UX/UI 포트폴리오 웹사이트, 오늘 바로 만드는 법
무료 노션 영문 디자인 포트폴리오 템플릿을 공유합니다.
본 글은 제가 미디엄에 게시한 글 'How to create your UX/UI portfolio website today | FREE Notion templates for you' 을 기반으로 번역한 글입니다.
UX/UI 디자인 커리어를 시작하고자 리서치할 무렵, 해외 취업을 위한 웹사이트 포트폴리오의 중요성을 깨닫고 작성한 글이 있었다. PDF 형식의 정형화된 포트폴리오에서 벗어나 웹사이트 형식의 포트폴리오를 강조했던 내용이다.
현재까지 다양한 분들을 멘토링이나 커피챗을 통해 만나며, 커리어 전향이나 해외취업을 원하지만 어디서부터 시작해야 할지 감이 안 서시는 분들에게 강조해 왔던 것은 '웹사이트 포트폴리오'를 제작하여 세계 어디서든 나를 증명할 무기를 만들라는 것이었다. 이 무기는 내가 원어민이 아니기에 비롯되는 자신감 부족을 보완해 주고 해외에서도 당당히 오퍼를 받을 수 있는 강력한 도구였다. 이에 많은 분들께 효과적인 도움이 될 수 있도록, 빠른 시간에 디지털화된 나의 포트폴리오를 만들 수 있도록 노션을 활용한 템플릿을 제작했다.
본 글에서는 생애 첫 포트폴리오 또는 기존에 있던 PDF 포트폴리오의 대안으로 노션이 왜 적합한 툴인지 설명하고, 기본적으로 포트폴리오에 들어가야 할 핵심 요소들을 짚어보면서, 오늘 당장 웹사이트 포트폴리오를 만들기 시작해 남들과 빠르게 차별화될 수 있도록 - 직접 제작한 무료 템플릿을 공유할 것이다.
왜
노션인가?
이미 너무나도 많이 알려지고 발전된 노션은, 이제는 더 이상 단순한 노트 테이킹 툴이 아니다. 노션으로 포트폴리오를 제작하는 경우는 이미 한국에서도 많이 알려지고 공유되고 있다. 실제로 다른 웹사이트 빌더를 사용할 시, 최소 150달러를 지불해야 하는 것에 비하면, 노션은 개인용으로 사용할 경우 무제한으로 블록을 만드는 것이 무료라 손쉽게 웹사이트 형식의 초안을 제작하고 싶거나, 디지털화된 포트폴리오가 없어 빠르게 자신의 웹사이트를 제작하고 싶은 사람들에게 매우 유용한 제품이다.
혹시나 노션을 아직 모르거나 노션이 어떻게 설립되었는지 궁금하다면, EO에서 제작한 유용한 인터뷰가 있어 공유한다.
어떻게
시작하지?
오늘 바로 UX/UI, 프로덕 디자이너로서의 해외 취업을 위한 한 걸음을 내딛을 수 있도록, UX/UI, 프로덕 디자인 포트폴리오에 담아야 할 필수 항목을 포함한, 직접 제작한 템플릿을 공유한다.
이 링크 클릭 후 'I want this' 클릭 시 템플릿 링크를 공유받을 수 있다. 해당 링크에서 오른쪽 위쪽 상단에 'Duplicate'을 누르면 복제가 되어 해당 템플릿을 기반으로 본인만의 포트폴리오 만들기를 바로 시작할 수 있다.
※ 이용 후 만족하셨다면, 더 좋은 콘텐츠를 생산할 수 있도록 해당 플랫폼에 리뷰를 남겨주세요 :)
※ 해당 템플릿 내의 콘텐츠는 가상의 인물을 기반으로 제작된 임의의 콘텐츠입니다. 내용보다는 전체적인 구성과 양식에 집중해 주시고 본인만의 이야기로 꾸미시길 권장합니다.
포트폴리오를
어떻게 구성할 것인가?
포트폴리오에는 기본적으로 세 가지 섹션을 넣을 것을 권장한다. : 자기소개 (About me), 작품 (Work), 경력(Experience). 추천사는 필수는 아니지만 가능하다면 전 직장 동료나 프로젝트를 같이한 멤버로부터 받아두면 추후에도 잘 활용될 수 있다.
About Me
: 하이어링 매니저가 한눈에 내가 어떤 백그라운드나 경력, 스킬이 있는지 한눈에 알 수 있도록 간단하고 명료하게 다듬은 인트로 메시지를 넣는다. 모든 것을 한 번에 다 끼어 넣으려고 하기보다는, 청중이 내게 호기심을 갖고 내 포트폴리오를 계속 볼 수 있도록, 매력적으로 보일만한 주 요소들을 간결하게 정리한다.
나는 누구인지
나는 어디에 베이스를 두고 있는지
나는 무슨 디자이너인지 (UX? UI? Product? Digital)
얼마큼 경력이 있는지
현재 근무 상태가 무엇인지 (Full time? Freelance?)
연락처
이력서, 소셜미디어, 별도의 사이드 프로젝트로의 연결
템플릿 예시
노션 템플릿 상단의 커버와 프로필 사진을 자신을 가장 잘 나타낼 것으로 바꾼다. 예시는 그러데이션 이미지지만, 얼마든지 다양한 이미지를 활용해서 나를 대표할 만한 이미지로 교체한다.
초반 인트로에서 어디 살고 있는 몇년차 경력의 무슨 회사에 재직 중인 디자이너임을 알 수 있도록 정리한다. 커리어를 전향하는 경우, 굳이 이전 커리어를 언급할 필요는 없지만, 어느 정도 산업적으로나 디자인 업무와 관련되어 어필하고 싶은 경우는 언급하여 자신을 차별하는 전략을 짤 수도 있을 것이다.
나의 소셜 링크나 취미적인 부분은 초반에 다 설명할 필요는 없고, 따로 'Lean more about me'와 같은 섹션을 통해 어필하는 것이 좋다.
'Lean more about me' 섹션의 주된 목적은 디자인을 넘어 나의 개인적 취미, 관심사와 성격을 쇼케이스하기 위함이다. 나의 잠재적 고용자가 봤을 때, 나라는 '사람'에 대해서 더 잘 파악할 수 있게 스스로를 어필할 수 있는 곳이다.
취업 과정에서 중요한 목표는, 나와 핏이 맞는 회사를 찾는 것이고 채용하는 회사 입장에서도 해당 롤과 잘 맞는 사람을 뽑고 싶은 것이 주된 목적일 것이다. 때문에 이곳에서는 좀 더 내가 커리어를 전향한 배경이나 백그라운드 등, 어떻게 디자인을 하게 됐고 지금의 내가 있는지 등의 진솔한 얘기를 통해 고용자 입장에서 더 알아보고 싶은 사람, 함께 일하고 싶은 사람으로 보일 수 있는 것이 좋다.
Work
: 프로덕 디자인의 전체 과정을 보여줄 수 있는 프로젝트를 엄선하여 전시하도록 한다. 전체적인 디자인 프로세스나 요약부터 내가 어떻게 챌린지에 접근하고 문제를 해결하여 최종 설루션을 도출했는지는 상세 페이지에 기술한다.
주요 비주얼이 강조된 썸네일
프로젝트 제목과 유형
부제목이나 짧은 인트로
프로젝트 진행 기간
템플릿 예시
바쁜 하이어링 매니저가 한눈에 포트폴리오를 보고 인상 깊을 수 있게, 프로젝트의 썸네일의 비주얼의 수준을 간과해선 안된다. 한눈에 봤을 때 해당 디자이너의 디자인 감각을 파악할 수 있도록 깔끔하면서도 프로젝트가 어떤 내용일지 파악할 수 있도록 제작하는 것이 중요하다. 각 프로젝트가 어떤 유형인지, 가능하면 간단한 디스크립션을 보여주고 정리하는 것도 좋다.
내가 제작한 템플릿에서는 테이블을 추가하여 갤러리 뷰로 전환하고 페이지 내의 커버 이미지가 썸네일로도 보일 수 있도록 설정했다. 또한 태그를 활용하여 프로젝트마다 유형을 구분했다.
주의할 것은 각 프로젝트의 내용은 AI를 통해 랜덤으로 발생시킨 것이므로, 케이스 스터디의 바람직한 예시로는 간주하지 말 것. 어떻게 설득력 있는 케이스 스터디를 제작하는지 등의 내용은 추후 별도의 콘텐츠를 통해 공유할 예정으로, 이 템플릿에서의 케이스 스터디 내용은 우선 무시하도록 한다.
Experience
: 관련 실무 경력을 시간 순으로 기록하고 해당 직무에서 한 업무를 성과 중심으로 기술한다.
직무 타이틀
고용 형태
업무 기간
회사명
성과 및 역할
템플릿 예시
직무 기술을 위해 노션의 테이블 뷰의 데이터 베이스를 활용했다. 각 직무마다 근무한 형태나 기간, 회사명 등을 정리하고 역할을 성과 중심으로 기술하면 한눈에 보기 좋다. 또한 PDF나 워드, 피그마 파일 형태 포맷의 이력서를 다운로드할 수 있는 링크를 첨부하는 것도 좋다. 간혹 리쿠르터들이 회사 내부 기록상 요청하는 경우가 있기 때문이다.
Testimonials (Optional)
: 추천사는 나의 내부적인 시각을 넘어 외부인의 시각으로 나를 드러낼 수 있는 기회이므로 활용하면 좋다. 실제 오퍼 이후 온보딩 과정에서 추천사를 정식으로 요청하긴 하지만, 채용 단계에서 추천사를 적극적으로 활용하는 것도 남들과 차별화할 수 있는 요소 중 하나가 될 수 있다.
템플릿 예시
전 회사 동료나 같이 프로젝트를 함께 했던 멤버로부터 나를 드러낼 수 있는 긍정적인 피드백을 첨부하도록 한다. 실제 작업했던 내용을 언급하여 팀워크나 내가 작업한 것을 증명할 수 있기 때문에, 추천사 섹션은 좋은 수단이 될 수 있다. 추천사를 남겨준 사람의 링크드인을 첨부하면 신뢰도를 높일 수 있다.
기본은 파악했다면,
그다음은?
노션을 이용해서 포트폴리오를 제작한다면, 공유할 기본 URL은 프로페셔널하게 세팅되지 않은 상태가 될 수 있다. 하지만 다양한 해결책으로 프로페셔널하게 보이는 URL로, 무료 또는 저렴한 가격으로 해결할 수 있다.
도메인을 개인화할 것
출처: https://www.notion.so/blog/personalize-public-pages노션의 Settings에 들어가 커스텀 도메인을 세팅하는 것은 무료다. 여기서 변경할 시, 노션 페이지를 퍼블릭 공유할 시 [설정한 도메인].notion.site 의 형태로 바꿀 수 있다.
노션 웹사이트를 공유할 것
출처: https://www.notion.so/blog/personalize-public-pages공유할 준비가 됐다면, 간단히 상단의 'Share'를 누르고 'Share to web' 토글을 켜서 생성되는 링크를 복사하면 된다. 다만 위에서 커스텀 도메인을 설정했을지라도, 이렇게 퍼블릭 공유되는 URL의 형태는 여전히 길고 투박하다. (예를 들어, https://example.notion.site/This-is-an-example-2bfe9d37c81a08c4f8f 이런 난해한 형태가 나올 수 있다.) 이런 링크를 포트폴리오 링크로 공유할 경우엔 아마 하이어링 매니저에게 프로페셔널하게 어필이 되지 않을 것이다.
이를 해결하기 위해서는 3가지 옵션이 있다.
:무료 옵션으로 해결하거나, 개인 도메인을 구매하거나, 종합적으로 관리할 수 있는 솔루션을 구독하는 것이다.
1. 무료로 URL을 간소화하기
Bitly 나 Rebrandly 서비스를 이용하면 무료로 긴 URL을 간소화할 수 있다. 다만 해당 서비스가 가진 URL 형태를 빌려 쓰는 것이므로, 장기적인 퍼스널 브랜딩을 고려한다면 지속적인 해결책이 될 순 없다.
2. 개인 커스텀 도메인 구매하기
개인 도메인을 직접 구매하여 노션 페이지와 연결할 수 있는 방법이 있다. 한눈에 퍼스널 브랜딩이 고려된 느낌을 줄 수 있고, 나만의 도메인으로 hello@domain.com과 같이 개인 도메인이 담긴 이메일도 호스팅 비용을 내면 가질 수 있기에 프로페셔널한 느낌을 줄 수 있다. GoDaddy 나 Namecheap과 같은 서비스에서 간단히 도메인을 구입할 수 있다.
이후 Fruition을 활용해, 구매한 도메인과 노션 페이지 연결을 무료로 할 수 있다. Fruition은 커스텀 도메인이나 다크모드, 구글 폰트 사용, SEO, 스크립트 활용 등 노션을 더욱 발전적으로 사용할 수 있는 오픈소스다. 약간의 셋업 단계를 거치긴 해야 하지만 (가이드 비디오), 한번 셋업을 마치면 다른 솔루션 보다 훨씬 저렴하게 사용할 수 있으므로 추천할 수 있는 옵션이다.
3. 종합 관리 솔루션 구독하기
위에 모든 솔루션이 귀찮고, 그냥 한 번에 구독해서 커스텀 도메인도 얻고 노션의 디자인을 다양하게 커스텀 하고 싶다면 Simple.ink 나 Super와 같은 서비스를 활용한다. 더 자세한 얘기는 바로 아래에서 이어진다.
제3의 서비스를 활용해 커스텀하기
노션이 빠르게 웹페이지를 만들고 정리할 수 있는 툴인 것은 맞지만, 쉽고 간단하게 빌딩 할 수 있는 만큼 커스텀에 대한 옵션은 상당히 제한되어 있다. 걱정할 필요는 없는 것이, 이를 보완해서 노션의 포트폴리오를 커스텀하고 발전시킬 수 있는 다양한 기능을 제공하는 서비스들이 있다. 보통 월 12달러 정보로 구독할 수 있는데 대표적인 서비스들을 확인하여 플랜을 비교해 보면 된다.
기타 유용한 자료들
노션 포트폴리오 예시
내 템플릿은 누구든 적용해 볼 수 있는 가장 기본적인 요소들로 구성되어, 창의적인 요소가 많이 들어있지 않다. 하지만 이미 굉장히 많은 세계 곳곳의 디자이너들의 노션으로 제작한 포트폴리오의 사례가 많이 공유되어 있기 때문에, 다른 디자이너들의 크리에이티브한 요소들을 보고 배워 나만의 것으로 활용하는 것이 가장 최고의 공부가 될 것이므로 공유한다.
노션 포트폴리오 만들기 튜토리얼
더 압도적인
포트폴리오를 제작하고 싶다면
webflow.com우선 어느 정도 포트폴리오의 전체적인 초안이 만들어지고 설계가 잡혀 자신감이 붙으면, 노션의 정형화된 형식을 넘어 더 독특한 포트폴리오를 만들고 싶은 욕심이 생기기 마련이다. 그럴 경우에는 웹플로우를 고려해 보는 것을 추천한다.
개인적으로 나는 다른 글에서 언급했듯이, 워드프레스와 셈플리체를 활용하여 포트폴리오를 만들어보기도 했고, 그 이전에는 윅스도 사용해 봤다. 특히 셈플리체는 화려한 비주얼에 혹하고 한 번만 구매하면 되는 라이브러리로 장기적으로 저렴하게 유지할 수 있지 않을까 싶어서 선택한 것인데, 이용하는 내내 한정된 커스텀 기능과 애니메이션을 자유롭게 만들지 못하는 한계에 부딪혀 웹플로우로 전환하고 싶은 갈증이 컸었다. 이에 큰맘 먹고 기존 포트폴리오를 없애고 웹플로우로 이전하는 작업을 진행했었고 현재까지도 계속 사용 중이다.
초보자라면 배우는 데에 시간이 조금 걸릴 수 있지만, 전체적인 툴 구성이 피그마와 같은 디자인 툴과 비슷해서 디자이너라면 좀 더 쉽고 빠르게 적응할 수 있다. 무료 버전으로 시작할 수도 있지만 역시 제한이 있어, 유료 구독 시 한 달에 16달러 정도이므로, 유지 비용이 매달, 매년 나가는 편이지만 내가 원하는 대로 자유롭게 디자인할 수 있어서 웹플로우를 애용하고 있다.
결론적으로, 노션으로도 얼마든지 커스텀을 통해 활용할 수 있지만, 뭔가 정형화된 형식을 벗어나 완전히 나만의 포트폴리오를 만들 자신이 생겼을 때는 웹플로우 같은 웹사이트 빌더를 이용하는 것을 추천한다. 하지만 초반에는 빠르게 나 스스로를 디지털 세상에서 증명하는 것이 중요하므로, 노션을 활용해 개요를 짜면 이후 포트폴리오를 빌딩 하는 것에 더 속도를 높일 수 있을 것이다. 비주얼과 커스텀의 요소도 중요하겠지만, 결국에 가장 중요한 것은 포트폴리오의 내용을 구성하는 나를 스토리텔링하는 방식과 나의 문제해결력을 보여주는 작품을 제대로 구성하는 것이 좋은 포트폴리오를 만드는 것에 핵심일 것이다.
긴 글을 끝까지 읽어주셨다면 감사합니다. 이 글이 조금이나마 도움이 되었으면 좋겠습니다. :)
더 깊은 1:1 상담이 필요하신가요?
현재 커리어 전향을 고민 중이거나, 막 디자이너 커리어를 시작했는데 어떻게 방향을 잡을지 막막하신가요?
저와의 커피챗, 멘토링 프로그램을 통해 답답한 고민 사이에서 걱정하는 시간을 줄이고 확실한 액션 플랜과 해결책으로 원하는 미래를 설계할 수 있습니다.
멘토링 프로그램에 대한 디테일과 현재까지의 멘티들에게 받은 리뷰는 여기에서 확인할 수 있어요.
여러 고민들로 미래가 막막 거나 전반적 상황에 대한 챗이 필요할 때
커피챗을 통해 개별 상황에 맞춰 고민을 해결하고 구체적인 목표를 세울 수 있습니다. 해외 취업을 원하지만 어떻게 방향을 설정할지와 같은 막연한 고민을 짧은 시간에 해결할 수 있는 가장 인기 있는 프로그램입니다.
포트폴리오 A to Z
포트폴리오의 모든 것을 다루는 최적화된 서비스입니다. 첫 30분 커피챗으로 커리어 목표와 현재 상황을 이해하고, 이후 두 번의 60분 챗으로 더 깊은 리뷰를 진행합니다.
- 웹사이트 포트폴리오 빌딩 자체가 처음이거나, 퍼스널 브랜딩 전략이 필요한 분
- 이미 포트폴리오는 있지만 어떻게 차별화되게 만들 수 있을지 리뷰가 필요한 분
- 한국식 포트폴리오가 아닌 해외식 포트폴리오를 정확하게 공략하여 시간 낭비는 줄이고 효율적으로 해외취업을 할 수 있도록 도움이 필요한 분
포트폴리오는 해외취업의 무기입니다. 인상적인 포트폴리오를 만들어 기업이 놓치고 싶지 않은 인재가 될 수 있도록, 제 실전 노하우를 공유해 드려요.
