포트폴리오 따라하기 10가지 기법. 프로덕트 디자이너 abhishk.me

Bestfolios.com에 Featured된 영문 이력서와 포트폴리오를 분석하는 시리즈 중 하나입니다.

일단 백문이 불여 일견! 웹사이트를 먼저 직접 방문해보세요. 링크

고용이 됨직하는 포트폴리오와 이력서는 따로 있습니다. 그리고 아주 좋은 포트폴리오를 자주 보고 장점을 배워서 나 자신을 고용이 됨직하게 만들면 참 좋겠지요. 무엇보다 아이티 분야와 직책이 다른 포트폴리오를 함께 공부하면 더욱 좋습니다. 그 중에서도 저는 디자이너들 특히 프로덕트/UX 디자이너의 포트폴리오들을 참 좋아합니다.

오늘은 페이스북의 프로덕트 디자인으로 일하고 있는 Abhishek Sharma의 프로덕트 디자이너의 포트폴리오를 함께 보도록 하겠습니다.

전체적인 느낌

2021년 현재 프로덕트 매니저나 UX 디자이너의 포트폴리오들의 공통점은 모두 차분하고 이지적인 느낌을 담고 있는 것인데. 이 웹사이트도 그 예외일 수가 없습니다.

전체적으로 차분한 파란색-흰색-회색의 색조를 사용했습니다. 사실상 자기가 일하고 있는 페이스북 색이죠. 파란색은 “신뢰의 색”이죠. 거기에 회색은 차분하면서도 이지적인 느낌을 낼 수 있고 또한 파란색과 아주 잘 어울리는 색이라서 포트폴리오에 꼭 추천합니다.

또한 간결하고 선형적인 정보 아키텍쳐를 사용해서 한눈에 이 웹사이트가 뭐가 있을 것이다라는 느낌을 유저에게 전달합니다.

포트폴리오 따라하기. 프로덕트 디자이너 abhishk.me

글꼴

Inter 구글 폰트 링크
Source Serif Pro 구글 폰트 링크

전체적인 글꼴은 굉장히 작은 편에 속하는 14px ~ 16px 사이인데 이렇게 작은 글꼴은 차분함과 전문성의 느낌을 줄 수가 있습니다. 2021년 웹디자인의 트랜드가 큼직큼직한 폰트인데 이걸 쓰지 않았습니다.

글꼴도 차분하고 읽기가 편한 글꼴을 선택했고 텍스트 폰트는 Sans Serit계열의 Inter을 부각시키는 글꼴은 Source Serif Pro를 사용했습니다. 유저들이 자주 어디서 봤던 친근한 구글폰트를 사용했습니다.

포트폴리오 디자인 1: 메뉴는 역시 3개가 딱 좋습니다.

많지도 적지도 않은 3개가 딱.

위에서도 말씀드렸다시피 읽는이로 하여금 포트폴리오의 전체적인 내용이 예상이 되게 하면서도 부족함이 없게 느끼게 하는 것이 중요하다고 했는데요. 메뉴의 숫자가 매우 중요할 때가 있습니다. 하나는 너무 없고 2개는 좀 모자르고 3개가 가장 좋을 때가 있습니다.

이 포트폴리오도 메뉴를 3개로 나누었는데요. (1) 일에 관련된 포트폴리오 그리고 (2) 사이드 프로젝트 마지막으로 (3) 자기 소개로 나누었습니다.

포트폴리오 디자인 2: 마이크로 애니메이션

웹사이트가 전체적으로 딱딱하고 전문적인 이야기를 나누고 프로덕트 디자이너만큼 차분하고 절제된 디자인을 해야하는데 그 와중에도 깨알같이 작은 마이크로 애니메이션을 넣었습니다. 이걸 보고 제가 느낀건 개성과 발랄함이고 그리고 무엇보다 작은 디테일에도 신경쓴다라는 인상을 주었습니다.

그럼 제가 여기저기서 발굴한 마이크로 애니메이션들을 보도록하죠.

평범해 보일 수 있는 정적인 화면에
요로코롬 깨알같은 애니메이션들을 넣었습니다. 돌아가는 톱니바퀴는 마우스를 올려놓으면 움직입니다.
깨알같습니다.
가장 신선했던 것 중 하나가 바로 페이지 하단 Footer에 물결치는 애니메이션을 넣은 겁니다.

포트폴리오 디자인 3: 피쳐 프로젝트도 3개

위에서 말씀드렸다시피 메뉴도 3개. 그런데 여기서 랜딩페이지에 가장 먼저 뜨는 프로젝트도 3개입니다.

가장 중요한 프로젝트 3개를 나열했습니다. 면접을 위해 읽는 유저에게 처음부터 정보를 쏟는 인포덤프(info dump)를 하지 않지요. “한눈에 모든 정보가 들어오는데 부족하지는 않군.”라는 느낌은 항상 좋은 느낌이니까요. 부족하지 않는 느낌을 매직넘버는 3인거 같습니다.

더 많은 프로젝트들을 볼려면 메뉴를 클릭해서 들어가보면 됩니다. 일 프로젝트와 개인 프로젝트. 이렇게 2개로 나뉘었지요.

포트폴리오 내용 1: 쉬운 단어를 사용한 100자의 자기 소개

여기서 말하는 간단함이란 어려운 단어나 표현이 아닌 12살 짜리 아이도 이해할 수 있는 문장을 말합니다. 물론 “digital experiences”라는 말은 좀 어렵네요. 하지만 전체적으로 내가 누군지 단 하나의 문장으로 아주 깔끔하게 표현했습니다.

포트폴리오 내용 1: 프로젝트 맨위에 요약을 넣자

포트폴리오의 알맹이라고 할 수 있는 프로젝트들의 요악을 맨 위 헤더에 넣었습니다. 가끔씩 이런 요약을 긴 문장으로 하거나 사이드에 하는 경우가 있어요. 하지만 저는 읽는이의 눈을 위에서 아래로 쭈욱 내려오게 선형적인 정보 배치를 좋아하기 때문에 개인적으로 페이지 맨 위에 넣는 것이 가장 효과적이라고 생각합니다.

위 그림에 나온 요약된 내용을 보자면:

  1. 가장 중요한 주제 타이틀
  2. 프로젝트를 단 한문장으로 요약한 부제: 무엇이든 한문장으로 요약할 수 있다는 것이 매우 중요하네요.
  3. 진행된 기간
  4. 어떠한 성격의 프로젝트였는가요? 저 위에는 웹이라고 써있네요.
  5. 함께 이 프로젝트를 진행한 동료들과 그들의 역할: 저는 이것이 가장 눈에 띄었습니다.

함께 프로젝트를 진행했던 동료들과 그들의 직책을 나열한 것이 아주 좋았습니다.

포트폴리오 내용 2: 내용의 구조

프로젝트 내용의 대략적인 구조는 다음과 같은 섹션으로 나뉘어져 있는데요. 각 섹션은 간결한 제목과 아주 짧은 문장들을 사용했습니다. 한눈에 읽을 수 있는 양들이었습니다.

내용의 구조는:

  1. 맥락 (항상 있음)
  2. 목표
  3. 솔루션 제시
  4. 제시한 솔루션을 만드는 과정에 있어서의 디자인 원칙들
  5. 결과물
  6. 끝맺음
한눈에 읽을 수 있는 각 섹션의 문장들 그 이상, 그 이하고 사용하지 않았습니다.

포트폴리오 내용 3: 잘 활용된 아이콘들

이 포트폴리오에서는 이미지들과 아이콘들을 아주 잘 활용했습니다.

맥락을 설명할 때 사용된 아이콘들은 전하고자 하는 내용을 아주 효율적으로 함축했습니다.
여기서도 아이콘들이 잘 사용되었습니다.
백문이 불여 일견이니 이미지를 많이 사용하고 글은 아주 간결했습니다.

포트폴리오 내용 4: 팀이 일을 하고 있는 사진을 넣자

팀이 회의를 하고 프로젝트를 진행하고 있는 바쁜 사무실의 사진을 넣는다면 보는 이로 하여금 “이 사람과 일을 하면 이런 느낌이 나겠군”이라는 이미지들을 상상을 하게 합니다. 이러한 이미지는 굉장히 도움이 됩니다. 포트폴리오에 소개된 프로젝트에 생동감을 주는 것은 물론이구요. (프로젝트 링크)

포트폴리오 내용 5: 프레젠테이션에 효과를 많이 넣자

제가 이 포트폴리오를 많이 좋아하는 이유 중 하나가 바로 자잘한 디테일에 신경을 많이 썼다는 건데요.

예를 들어 인터뷰한 고객들의 반응을 이렇게 돌아가는 carousel효과를 넣는다거나.

이런 깜직한 애니메이션도 그저 문장과 사진만으로만 이루어진 포트폴리오 보다 훨씬 좋인 인상과 몰입을 가져다 줍니다.

포트폴리오 내용 6: 더 많은 내용들을 링크로 걸자

이 포트폴리오에는 자신이 쓴 글들의 링크들이 참 많이 걸려 있습니다. 포트폴리오는 그 내용들을 모아 놓은 중간 지점일 뿐 진짜배기들은 medium이나 디자인에 관련된 유명 블로그에 올라가 있습니다.

이 친구가 쓴 글들을 번역할 계획입니다.

포트폴리오 내용 7: 오픈소스 프로젝트를 깃헙을 활용하여 호스팅

다른 사람들과 만든 오픈소스 프로젝트를 깃헙에 올리면 참 좋은데요. 만약 프로그래머라면 이러한 자잘한 작은 프로젝트를 정리하여 링크를 건다면 참 좋겠습니다. 깃헙은 호스팅도 할 수 있답니다. 깃헙말고도 무료로 쉽게 호스팅할 수 있는 곳이 많은데 오픈소스와 함께 올려놓기엔 깃헙만한 것도 없지요.

끝맺으며

이 포트폴리오의 주인공인 Abhishek Sharma은 Github과 다른 블로깅에서 많은 활동을 하고 있습니다. 그가 만든 오픈소스툴을 함께 둘러보고 좋은 글 몇개를 추려서 번역해보고자 합니다.

답글 남기기