포트폴리오 케이스스터디, 리디자인할때 챙겨야 할 7가지

Unsplash Adam Wilson

실제로 채용 매니저들이 프로덕트 디자이너들의 포트폴리오에서 중점적으로 보는 건 크게 세가지다.

1. 문제 해결 과정이 잘 드러나는지
2. 디자인 완성도와 디테일
3. 그리고 커뮤니케이션 능력

이 중에서 특히 ‘2. 디자인 완성도와 디테일’은 누구나 첫눈에 확인할 수 있는 부분이라서, 정말 신경 써야 하는 요소다. 접근성, 가독성, UI 일관성과 같은 디테일까지 꼼꼼하게 보여줘야 하고, 물론 디자인 결과물이 아무리 좋아도 그걸 설득력 있게 보여주고 문제 해결 스토리를 명확하게 시각적으로 전달해야 한다고 생각한다. 그래서 오늘은 실제 케이스 스터디안에서 제품을 리디자인할 때 중요하게 고려해야 할 디테일 요소들을 정리했다.

1. 타이포그래피 계층 구조

헤드라인, 타이틀, 본문 등 텍스트 계층을 명확하게 분리하는 것이 기본이다. H1~H5 사이에는 단순히 폰트 사이즈만 다르게 하지 말고, 폰트 웨이트(굵기)도 조절해서 시각적인 대비와 일관성을 동시에 챙기면 좋다.

2. 폰트 종류 선정

UI에서는 보통 산세리프(San-serif) 계열(Inter, SF Pro, Roboto 등)을 기본으로 쓴다. 만약 브랜드가 좀 더 감성적이라면 세리프(Serif)와 조합해서 쓸 수도 있고, 한 프로젝트 안에서는 폰트 종류를 2개 이하(Body + Title)로 제한하는 것이 깔끔해 보인다.

3. 컬러 계층 정의

Primary, Secondary, Accent, Text, Background 등 컬러 레벨을 명확히 나눠서 쓴다. CTA 버튼은 항상 Primary 컬러로, 보조는 Secondary로 통일하고, 텍스트 컬러는 명도 대비(Contrast ratio)도 꼭 체크해서 WCAG 기준 4.5:1 이상이면 접근성 면에서도 안심할 수 있다.

4. 확장 가능한 아이콘 시스템

아이콘은 2px 그리드나 스탠다드 24x24 / 미니 12x12 같은 사이즈 기준에 맞춰 정렬하고, 라인 굵기나 코너 스타일도 통일해서 전체적으로 일관성을 맞추면 더욱 일관적인 경험을 준다.

5. 확장 가능한 UI 구조

카드, 리스트, 버튼 같은 컴포넌트를 반복해서 쓸 수 있는 구조로 만들고, 만약 데이터가 많아지거나 텍스트 길이가 달라질 때 어떻게 레이아웃이 반응하는지도 신경 써야 한다. 에러 메시지, 엠티 스테이트 로딩 상태 같은 다양한 베리언트(variant)도 미리 생각해두면 좋다.

6. 적절한 이미지 설정

신뢰감을 주는 제품 경험을 만들기위해 이미지 선정이 중요하다. 제품을 부각시키기위해서 full-width 이미지를 활용하는 것도 방법이다. 이미지 톤이나 구도들도 브랜드 가이드에 맞춰서 통일성 있게 사용하는 것이 중요하다.

7. 레이아웃과 스페이싱

8px 시스템이나 4px 스케일처럼, 기준이 되는 spacing 시스템을 정해서 쓴다. 그룹(섹션) 간에는 더 넓게, 항목 간에는 좀 더 촘촘하게 조절하면 전체적으로 밸런스가 좋아진다.

결국, 포트폴리오 케이스 스터디를 리디자인할 때는 결과물의 퀄리티뿐만 아니라, 보는 사람이 한눈에 “와, 시각적으로 잘 정돈되어 있네!”라고 느낄 수 있도록 구조와 디테일에 신경 쓰는 것이 정말 중요하다. 위에서 말한 요소들만 잘 챙겨도 포트폴리오가 훨씬 더 설득력 있고, 프로페셔널하게 보일 수 있다. 리디자인할 때 꼭 한 번씩 체크리스트처럼 참고하면 도움이 될 것이다. 더나은 포트폴리오 개선을 위해 워크샵 프로그램을 운영하고 있으니 관심 있는 분들은 아래 링크를 확인해도 좋다. https://litt.ly/teamours_design