크리에이티브 포트폴리오 웹사이트: 요정 동화책 만들기

나다움을 보여 주면서도 전문적으로 보이는 크리에이티브 포트폴리오 웹사이트는 어떻게 만들까요? 저는 최근 디지털 마케팅 전공을 졸업했고, 첫 포트폴리오가 프로젝트 목록 이상이기를 바랐습니다. 그래서 작은 요정이 방문자를 제 작업으로 안내하는 인터랙티브 동화책으로 만들었습니다.

이런 분께 맞습니다: 첫 포트폴리오를 만드는 졸업생, 마케터, 크리에이터 중 명확함을 잃지 않으면서 자기다운 포트폴리오를 원하는 분.

제 포트폴리오를 해부한 이 글은 일곱 부분으로 이루어져 있습니다. 각 부분은 제가 한 일과 이유로 시작하고, 이어서 따라 할 수 있는 내용을 드립니다.

• 일곱 가지 선택: 아이디어와 비주얼 아이덴티티에서 애니메이션, 사용성, 증거, 트레이드오프까지입니다.
• 30초 검토자 테스트: 직접 만든 사이트에 해 볼 수 있고, 이 선택들이 피하는 포트폴리오 실수도 함께 정리했습니다.
• 각 선택의 비용: 용량과 유지 관리 면에서, 따라 하기 전에 가늠해 볼 수 있습니다.

왜 다른 것을 만들었나: 포트폴리오는 개성을 보여 주어야 합니다

갓 졸업한 사람으로서, 저는 프로젝트와 성과의 목록 이상인 포트폴리오를 원한다는 것을 알았습니다. 제가 어떤 사람인지 보여 주는 작은 세계를 만들고 싶었습니다. 저는 창의성과 이야기, 그리고 특이한 아이디어를 현실로 만드는 일을 좋아해서, 전통적인 템플릿은 한 번도 맞는다고 느껴지지 않았습니다. 온전히 저만의 것을 원했습니다.

따라 하는 방법. 템플릿이 아니라 만드는 일에서 좋아하는 것부터 시작하세요. 검토자는 모든 단어를 읽지 않습니다. Nielsen Norman Group은 채용 담당자가 여러분의 포트폴리오 전체를 한 단어씩 읽는 일은 극히 드물다고 지적하고, Designlab은 방문자가 사이트를 닫기 전에 연결될 시간이 몇 초뿐이라고 경고합니다.

개성은 그 몇 초 동안 사람을 멈추게 하는 힘입니다. 마케팅 포트폴리오는 샘플을 하나도 보여 주기 전에 먼저 주장을 합니다. 이 사람은 브랜드를 한 사람처럼 느껴지게 만들 수 있다는 주장입니다. 샘플을 둘러싼 페이지가 무난한 템플릿이라면 그 주장에는 증거가 없습니다. 제 홈페이지에는 이에 대한 한 줄이 있습니다. “마케팅은 이야기를 들려주는 것만이 아닙니다. 사람들이 그것을 느끼게 하는 것입니다.” Shopify의 포트폴리오 가이드는 브랜드 정체성을 가장 앞에 둡니다. 색상, 서체, 이미지가 사이트의 분위기를 정하는 데 도움이 되며, 어조도 그만큼 중요합니다.

제 첫 화면은 어떤 설명보다 먼저 이 일을 합니다. 필기체로 쓴 제 이름에는 N이 더 짙은 장밋빛으로 들어가고, “Marketing · Creative · Da Nang → United States”라는 문장과 View Work, Get in Touch 두 버튼이 있습니다.

나만의 비주얼 아이덴티티 찾기: 요정, 색상 팔레트, 타이포그래피

저는 늘 동화, 자연, 환상적인 일러스트에 끌렸기 때문에 요정 콘셉트는 제 성격의 자연스러운 연장이었습니다. 사이트가 장난기 있으면서도 전문적으로 보이도록 부드러운 초록과 분홍, 꽃 디테일, 손으로 그린 요소를 골랐습니다. 방문자가 저에 대한 글을 한 줄 읽기 전에 디자인만으로 제 개성을 알아보기를 바랐습니다.

따라 하는 방법. 정체성을 담는 몇 가지를 고르세요. 제 정체성은 요정, 초록색 난초 프레임, 필기체 이름에 기대고 있습니다. 아래의 팔레트와 서체가 이를 갖추고, 다음 섹션이 여기에 생명을 불어넣습니다.

두 개의 팔레트, 하나의 느낌

제가 한 일. 제 홈페이지와 블로그는 느낌은 공유하지만 팔레트는 공유하지 않습니다. 홈페이지는 크림색 종이(#F2EDE3)에 분홍, 세이지, 포레스트 그린, 올리브, 갈색, 금색을 씁니다. 블로그는 순백색 바탕에 몇 가지 브랜드 색만 씁니다. 부드러운 느낌은 더스티 로즈(#D4A8B4)와 세이지(#8B9E7A)를 포레스트 그린(#4A6741)과 맞댄 데서 나오고, 히어로를 두른 꽃 프레임은 정지한 종이 배경과 따로 움직이는 꽃 레이어, 두 겹으로 만들었습니다.

블로그가 흰색이 된 것은 자체 토큰 시트에 기록된 수정 때문입니다. 첫 버전은 크림색 종이를 썼지만, 그 크림색은 글이 아니라 앱 셸을 칠하는 색이었습니다. 글 페이지에서 측정해 보니 기본 읽기 면 다섯 개 중 다섯 개가 순백색이었습니다. 그래서 따뜻함은 본문 글자에 닿지 않는 곳으로 옮겼습니다. 강조색, 배지, 콜아웃 뒤의 따뜻한 바탕입니다.

역할별로 짝지은 서체, 직설적으로 둔 문구

제가 한 일. 홈페이지의 이름은 Dancing Script로 쓰고 N은 더 부드러운 분홍색이며, 그 위의 소제목도 같은 필기체를 더 작게 씁니다. 섹션 제목은 Cormorant Garamond, 작은 라벨은 Caveat, 인터페이스 텍스트는 Inter입니다. 블로그는 역할을 더 엄격하게 나눕니다. 인터페이스와 제목에는 Geist, 읽기에는 Source Serif 4를 쓰며, 20픽셀 글자에 32픽셀 줄 간격, 680픽셀 너비의 단입니다.

검토자가 신경 쓰는 이유. 필기체는 문단에 나쁜 선택이므로, 페이지가 한 사람이 되는 곳인 이름과 그 위의 한 줄에만 나옵니다. 홈페이지는 포스터이기 때문에 서체 네 개를 쓸 여유가 있습니다. 블로그는 사람들이 읽는 곳이라 그렇지 않습니다.

문구도 같은 구분을 따릅니다. 블로그 머리글은 “The Fairy’s Field Notes” 아래에 “Where Curious Ideas Grow”라는 제목이 있는데, 캐릭터가 소량으로 말을 거는 것입니다. 실용적인 부분은 직설적으로 둡니다. 홈 내비게이션은 Social, Mobile, Design, SEO, Web App, Writing, About, Sign in, Contact로, 채용 담당자가 찾을 법한 작업 종류이지 수수께끼가 아닙니다.

따라 하는 방법. 서체마다 역할을 하나씩 주고 소리 내어 말해 보세요. 이건 이름, 이건 읽기. 머리글과 태그라인에서 목소리가 드러나게 하고, 내비게이션 라벨은 훑어볼 수 있을 만큼 단순하게 두세요.

포트폴리오에 생명 불어넣기: 일러스트, 마스코트, 애니메이션

저는 정적인 소개 페이지를 원하지 않았습니다. 작은 요정이 방문자를 제 프로젝트로 안내하고, 일러스트가 살아 움직이며, 섹션마다 고유한 캐릭터가 있는 인터랙티브 동화책을 원했습니다. 애니메이션과 작은 인터랙션은 둘러보는 일이 이력서를 스크롤하는 것이 아니라 하나의 경험처럼 느껴지게 하려고 있습니다.

따라 하는 방법. 움직임에 역할을 주고, 끄는 스위치를 함께 만드세요. 아래 두 부분이 그 방법을 보여 줍니다.

역할이 있는 마스코트와 끄는 스위치

제가 한 일. 요정은 홈페이지에서 가장 먼저 움직이는 요소입니다. 포즈마다 하나씩, 일곱 장의 스프라이트 시트(날기, 날갯짓, 앉기, 생각, 기쁨, 두드리기, 돌기)로 되어 있고 각각 여덟 프레임입니다. 일곱 장의 PNG 시트를 합치면 1MB를 조금 넘는데, 움직일 수 있는 마스코트의 비용이 이것이 전부입니다.

요정은 방문자에게도 반응합니다. 누르면 톡 치고, 링크나 버튼에 닿으면 기뻐 보이고, 움직이는 방향으로 몸을 돌립니다. 일곱 가지 포즈 가운데 세 가지가 일하는 모습입니다.

요정이 자리를 차지하는 이유는 무언가를 하기 때문입니다. 포인터가 있는 기기에서는 감쇠 스프링으로 커서를 따라가므로, 포인터에 딱 붙지 않고 뒤따라옵니다. 휴대폰에는 따라갈 커서가 없어서 스크롤과 함께 이동하며 제목들을 찾아갑니다. 포즈는 놓인 자리에서 의미를 가집니다. SEO 제목 옆에서는 생각하고, About 제목 옆에서는 앉아 있고, 연락처 제목 옆에서는 기뻐합니다.

검토자가 신경 쓰는 이유. 역할이 있는 마스코트는 서명이자 안내자입니다. 구석에 붙여 둔 마스코트는 스티커일 뿐입니다. 요정은 섹션 제목과 가장자리에 나타나고 샘플 위에는 절대 오지 않으므로, 작업물이 계속 주인공으로 남습니다.

끄는 스위치. 움직임은 개성이 위험으로 바뀌는 지점입니다. 브라우저는 사용자가 기기에 필수적이지 않은 움직임을 최소화해 달라고 요청했는지를 알려 줄 수 있고, MDN은 이런 애니메이션이 전정 운동 장애가 있는 사람에게 불편을 일으킬 수 있다고 설명합니다. 포인터 기기에서 홈페이지는 시스템 커서를 숨기고 요정을 그리며, 포인터의 정확한 위치에 15픽셀짜리 작은 점을 두고 그 뒤에 네 꼭짓점 반짝임의 꼬리를 남깁니다. 이 꼬리는 움직임을 줄여 달라고 요청한 방문자에게는 실행되지 않고, 터치스크린에서도 실행되지 않습니다. 블로그에서 요정은 날개의 첫 프레임을 한 채 자신의 길 위에서 쉬고, 홈페이지에서는 스프링으로 따라가는 대신 포인터에 고정됩니다.

작은 상호작용도 같은 규칙을 따릅니다. 버튼은 마우스를 올리면 2픽셀 올라갔다가, 누르면 내려앉으며 살짝 어두워지고, 작업물 카드는 올리면 떠오릅니다. 아래 책은 표지를 끌거나 Enter를 누르면 열리고, 화살표 키로 페이지를 넘깁니다.

따라 하는 방법. 모티프 하나를 고르세요. 어디에 나타날지(제목과 가장자리), 어디에는 절대 나타나지 않을지(샘플 위) 정하고, 움직임 줄이기 버전을 효과와 동시에 작성하세요.

하나의 일러스트 어휘, 다시 쓰기

제가 한 일. 홈페이지의 난초 프레임, 나비, 반짝임, 덩굴은 하나의 어휘입니다. 섹션마다 반복되므로 방문자는 첫 화면 이후에 무엇이 이 사이트의 것인지 배웁니다. 잎맥, 반점, 음영이 있는 벡터 그림이 흐려 보이던 첫 래스터 컷아웃을 대체했습니다. 나비는 날갯짓을 유지하고 새싹은 꽃 한 송이를 피우며, 방문자가 움직임 줄이기를 요청하면 모두 가만히 있습니다.

이 어휘는 작업물 자체에까지 닿습니다. 모바일 마케팅 챕터는 책처럼 그려져 있습니다. 금색 테두리와 제 마크가 있는 초록색 표지가 휴대폰 목업 옆의 챕터 페이지로 열리고, 페이지는 네 개의 채널을 넘깁니다.

Mobile
Marketing

CeraVe × Creva

Chapter II

Mobile Marketing

• I. SMS Messages
• II. MMS Rich Media
• III. Email Campaign
• IV. Push Notifications

검토자가 신경 쓰는 이유. Designlab은 포트폴리오를 시각적으로 통일해 주는 일관된 목업 세트를 권합니다. 반복되는 어휘는 페이지 전체에 대해 그 역할을 하며, 벡터는 어떤 크기에서도 선명하지만 늘어난 래스터는 그렇지 않습니다.

따라 하는 방법. 작은 도형과 색의 세트를 정하고, 모든 섹션에서 다시 쓰고, 샘플을 보여 주는 방식에도 적용하세요. 스톡 사진보다 더 많은 정성이 든다는 점을 각오하세요.

미학만이 아닌 사람을 위한 디자인: UX, 가독성, 접근성

가장 큰 과제는 세밀한 일러스트와 깔끔하고 전문적인 사용자 경험 사이의 균형이었습니다. 마케터로서 저는 방문자가 찾는 것을 찾지 못하면 아름다운 디자인이 큰 의미가 없다는 것을 압니다. 그래서 프로젝트가 잘 보이게, 내비게이션이 분명하게, 블로그가 편하게 읽히도록 했습니다.

따라 하는 방법. 가독성, 접근성, 휴대폰에서 제가 하는 점검은 이렇습니다. 블로그의 읽기 편안함은 680픽셀 폭의 단, 32픽셀 줄 높이에 20픽셀 글자, 흰 바탕의 짙은 잉크이며, Medium이 기사 본문에 쓰는 폭과 같습니다.

측정할 수 있는 대비

검토자가 신경 쓰는 이유. 낮은 대비는 부주의해 보이고 눈을 피로하게 합니다. 웹 접근성 지침은 일반 텍스트에 최소 4.5:1의 대비율을 요구합니다. 제 블로그 본문 잉크는 흰색 위에서 15.52:1이고, 버튼에 쓰는 초록은 6.35:1입니다. 금색과 장미색은 글자로는 2.29:1과 2.24:1로 통과하지 못하므로, 블로그는 이 색들을 채우기에만 쓰고 글자에는 더 어두운 짝을 따로 둡니다. 장미 잉크는 5.56:1, 금색 잉크는 6.10:1입니다. 색을 버리는 대신 통과할 때까지 어둡게 만들었습니다.

따라 하는 방법. 먼저 정체성이 되는 색을 고른 다음, 각 색을 페이지 배경 위의 글자로 테스트하세요. 통과하지 못하는 색은 채우기로 두고, 글자용으로는 더 어두운 짝을 만드세요. 따뜻함은 프레임에 두고, 본문은 단순하고 대비가 높은 바탕에 올리세요.

움직임, 터치스크린, 그리고 분명한 다음 단계

위의 모든 효과에는 움직임 줄이기 버전이 있고, 휴대폰에는 따라갈 커서가 없으므로 터치스크린에는 별도 경로가 있습니다. 홈 내비게이션은 Contact 버튼으로 끝나고 히어로에는 Get in Touch가 있어서, 작업물이 마음에 든 방문자는 다음에 무엇을 할지 압니다. Designlab은 모바일 경험을 단순하고 쓰기 쉽게 만들고 분명한 행동 유도를 두라고 조언합니다. 컨트롤에는 마우스를 올린 상태뿐 아니라 눌린 상태도 있습니다. 손가락은 올려 두는 일이 없기 때문이고, 포커스된 컨트롤에는 눈에 띄는 2픽셀 윤곽선이 생깁니다.

내 포트폴리오를 위한 30초 검토자 테스트

휴대폰에서 포트폴리오를 열고, 타이머를 켠 다음 순서대로 답해 보세요. 훑어보는 검토자처럼 페이지를 읽기 위해 제가 쓰는 테스트일 뿐 표준은 아닙니다.

1. 처음 5초. 누구이고 어떤 종류의 일을 하는지 말할 수 있나요? 스크롤해야 한다면 첫 화면이 제 역할을 못 하는 것입니다.
2. 다음 10초. 작업물 수를 세어 보세요. Designlab은 최적점을 3-5개 프로젝트로 보고, Nielsen Norman Group은 이 단계의 제목을 상세한 케이스 스터디로 3-5개 프로젝트를 고르라고 붙였습니다.
3. 다음 5초. 연락할 방법을 찾아보세요. Designlab은 행동 유도로 눈에 띄는 “Get in touch” 버튼을 권합니다.
4. 다음 5초. 본문 문단 하나를 읽어 보세요. 글자가 배경 대비 최소 4.5:1이고, 줄 길이가 편안한가요?
5. 마지막 5초. 숫자 하나나 주장 하나를 확인하세요. 옆의 라벨이 그것이 무엇이고 무엇이 아닌지 말해 주나요?
6. 그다음 움직임 줄이기를 켜고 기기 설정에서 새로 고침 하세요. 효과가 멈춘 상태에서도 페이지는 여전히 말이 되어야 합니다.

작업물이 스스로 말하게 하기: 프로젝트를 보여 주는 방법

제 포트폴리오에는 소셜 미디어, SEO, 그래픽 디자인, 크리에이티브 캠페인이 함께 담겨 있습니다. 소셜 미디어 커뮤니티를 키우고, 콘텐츠를 만들고, 마케팅 프로젝트를 한 작업을 보여 줍니다. 저는 창의성에는 늘 목적이 있어야 한다고 믿습니다. 디자인은 관심을 끌고, 진짜 이야기는 작업이 들려줍니다.

제가 한 일. 홈페이지는 다섯 개의 챕터(소셜 미디어, 모바일 마케팅, 그래픽 디자인, SEO, 웹 앱)를 소개하며, 작업물은 첫 화면에서 한 번 스크롤하면 닿는 곳에 있습니다. 장식이 많은 페이지는 알맹이가 얇다는 의심을 부르기 쉬워서, 증거 섹션은 일부러 직설적으로 썼습니다. 숫자가 오해될 수 있는 곳에는 바로 옆에 이렇게 밝힙니다. “이 계정 합계는 스냅샷이며, 제 개인의 성과나 제 덕으로 돌릴 수 있는 성장이 아닙니다.” 각 챕터 카드에는 브랜드 옆에 Account snapshot, Coursework, Live product 같은 분명한 태그도 붙어 있습니다.

검토자가 신경 쓰는 이유. 개성은 주목을 끌고, 꾸밈없는 라벨은 그 주목이 의심으로 바뀌지 않게 지켜 줍니다. 훑어보는 검토자도 스스로 한계를 밝힌 숫자는 믿을 수 있습니다.

따라 하는 방법. 각 작업물을 그것이 무엇이었고 무엇을 했는지로 이름 붙이세요. 단서는 각주가 아니라 숫자 바로 옆에 두세요. 페이지를 더 꾸밀수록 주장은 더 담백해야 합니다.

이 선택들은 무엇을 피할까? 흔한 포트폴리오 실수

위의 각 선택은 포트폴리오 가이드가 지적하는 실수 하나를 막습니다.

마법 뒤의 트레이드오프: 성능과 디자인 비용

트레이드오프가 있었습니다. 때로는 일러스트를 단순하게 만들고, 애니메이션을 줄이고, 시각적으로 더 흥미로운 것보다 읽기 쉬운 레이아웃을 골랐습니다. 강한 퍼스널 브랜드는 모든 창의적인 아이디어를 더하는 것이 아닙니다. 경험을 더 좋게 만드는 디테일을 고르는 것입니다.

따라 하는 방법. 아이디어마다 가격을 매겨 보고 남기세요. 제 아이디어의 가격은 용량과 유지 관리 면에서 이렇습니다. 아래 선택 가운데 두 가지는 일부러 단순하게 두었습니다. 블로그는 흰색으로 두었고, 방문자가 움직임을 줄이길 원하면 요정은 쉽니다.

포트폴리오를 만들며 퍼스널 브랜딩에 대해 배운 것

이 포트폴리오를 만들며 퍼스널 브랜딩이란 나 자신을 이해하고 그것을 전할 창의적인 방법을 찾는 일이라는 것을 배웠습니다. 저는 전문적으로 보이려고 장난기 있는 성격을 숨기지 않았습니다. 창의성과 전문성은 함께할 수 있기 때문입니다.

제가 전하고 싶은 것은 이렇습니다.

• 캐릭터나 모티프 하나를 골라 역할을 주세요. 제목 옆에 앉고 커서에 반응하는 마스코트는 하나의 체계입니다. 구석에 붙인 마스코트는 스티커입니다.
• 개성은 프레임에 두세요. 본문은 단순하고 대비가 높은 바탕에 올리세요.
• 색에 빠지기 전에 대비를 확인하세요. 브랜드 색이 글자로 통과하지 못하면 채우기로 쓰고 글자용으로 더 어두운 짝을 만드세요.
• 효과와 함께 끄는 스위치를 만드세요. 움직임 줄이기를 쓰는 사람과 터치스크린 사용자도 방문자입니다.
• 증거에는 쉬운 말로 라벨을 붙이세요. 페이지를 더 꾸밀수록 주장은 더 담백해야 합니다.

저는 제가 한 일을 보여 주기 위해서만 포트폴리오를 만든 것이 아닙니다. 제가 어떤 사람인지 보여 주는 작은 세계를 만들었습니다.

FAQ: 포트폴리오를 돋보이게 하는 방법

크리에이티브 포트폴리오 웹사이트는 프로젝트를 몇 개 보여 주어야 할까요?

생각보다 적게요. Designlab은 최적점이 보통 3-5개 범위에 있다고 말하고, Nielsen Norman Group은 상세한 케이스 스터디로 3-5개 프로젝트를 제안합니다. 제 홈페이지는 다섯 개의 챕터를 보여 주며, 각각 그 작업이 무엇이었는지 밝힙니다.

마스코트나 일러스트가 포트폴리오를 덜 전문적으로 보이게 할까요?

역할이 있고 작업물을 방해하지 않는다면 그렇지 않습니다. 제 마스코트는 제목과 가장자리에 나타나고 샘플 위에는 절대 오지 않으며, 모든 효과에 움직임 줄이기 버전이 있습니다. 가이드가 지적하는 위험은 내용에서 주의를 빼앗는 장식이며, 그래서 증거 섹션은 직설적으로 둡니다.

퍼스널 브랜딩 포트폴리오의 색은 어떻게 고르나요?

정체성에서 시작하세요. Shopify가 브랜드 정체성을 먼저 두기 때문이며, 그다음 각 색을 글자로 테스트하세요. 접근성 지침은 일반 텍스트에 최소 4.5:1을 요구합니다. 통과하지 못한 색도 채우기로는 쓸 수 있고, 글자용으로는 더 어두운 짝을 두면 됩니다.

검토자가 제 설명을 읽을까요?

아마 전부 읽지는 않을 것이므로 짧게 쓰고 한 일부터 먼저 말하세요. 작업 설명에 대한 Shopify의 조언은 짧게 유지하라는 것이고, Nielsen Norman Group이 인용한 한 채용 담당자는 “완성된 결과물만 보여 주지 마세요.”라고 말합니다.

내 포트폴리오를 어떻게 만들었는지 글로 써도 될까요?

네, 경험에서 우러나와 쓴다면요. Google의 유용한 콘텐츠 가이드는 여러분의 콘텐츠가 직접 경험한 전문성과 깊은 지식을 분명히 보여 주는지 묻습니다. 실제 선택과 그 비용을 담아 자기 사이트를 해부한 글은 구조상 직접 경험에서 나온 글입니다.

나만의 크리에이티브 포트폴리오를 계획하고 있다면, 위의 선택과 비용이 몇 번의 우회를 줄여 주기를 바랍니다. 전부 함께 보고 싶다면 포트폴리오에서 시작하세요. 블로그에서는 같은 정체성의 더 조용한 버전을 볼 수 있습니다. 연락처 페이지로 저에게 연락하실 수 있습니다.

이 글은 제 사이트에 대한 1인칭 기록이며 디자인 표준이 아닙니다. 연결된 출처가 대비, 움직임 줄이기, 포트폴리오 지침을 정하며, 그 밖의 모든 주장은 이 사이트가 만들어진 그대로를 설명합니다.