UI/UX 디자인 포트폴리오 제작기
디자인 독학하기 08
UI/UX 디자인 포트폴리오 제작 경험을 공유합니다 :)
[Contents]
01 포트폴리오의 목적
02 어떤 포트폴리오를 만들 것인가?
03 포트폴리오 구성 짜기
04 포트폴리오 디자인하기
05 포트폴리오 리뷰 준비하기
06 포트폴리오 개선하기
07 참고 자료
작은 앱 프로젝트
많은 기능과 서비스를 갖추고 있는 슈퍼 앱들 사이에서 단순함을 가장 큰 목표로 하는 '작은 앱'이 사람들에게 어떠한 의미로 다가갈지 연구하는 '작은 앱 프로젝트'를 진행하고 있습니다.
UI/UX 디자인 포트폴리오는 어떻게 만들어야 할까? UI/UX 디자이너를 준비하기 시작했을 때 이 고민으로 눈앞이 캄캄했다. 데이터가 쌓이는 실무 현장에서 진행한 프로젝트로 포트폴리오를 만들 수 없었기에, 내 디자인이 좋은 경험을 주는 디자인인지 증명할 방법이 없었다.
내가 선택했던 방법은 '리디자인(Redesign)'이었다. 실제 서비스되고 있는 앱의 UI/UX 디자인을 개선하는 프로젝트를 개인적으로 진행해 포트폴리오를 만든 것이다. UX 연구 및 해당 서비스 분야의 연구 자료를 바탕으로 인사이트(Insight, 통찰)를 도출해 리디자인의 근거로 삼았었다.
이후 실무 경험이 쌓이고 다양한 프로젝트를 진행하면서 실제로 데이터가 쌓이고 내 디자인이 사용자에게 좋은 경험을 주고 있는지, 그렇지 않은지 관찰할 수 있게 됐다. 덕분에 직접 증명한 좋은 디자인이 하나둘 쌓여가기 시작했다.
최근 지난 디자인 경험을 정리하기 위해 포트폴리오를 만들어야겠다는 생각이 들었다. 처음 포트폴리오를 만들 때처럼 막막하다는 생각이 들지는 않았다. 실무 경험도 쌓였고, 내 디자인이 어떤 성과를 냈는지 증명할 수 있는 데이터도 있었다. 이제는 '어떻게 하면 UI/UX 디자이너 김경환을 잘 표현할 수 있는 포트폴리오를 만들 수 있을까?'라는 고민이 필요했다.
첫 포트폴리오를 만들 때나 지금이나 달라지지 않은 게 하나 있다. 나만의 사고 과정으로 포트폴리오를 만들어야 한다는 생각이다. 다른 포트폴리오를 참고하지 않는다는 뜻이 아니다. 나만의 디자인 철학에 맞는 맥락으로 포트폴리오를 제작한다는 의미다.
01 포트폴리오의 목적
이번에 만들기로 한 포트폴리오는 이직과 더불어 지난 디자인 성과를 기록하려는 목적이 강하다. '기록'은 나 스스로에게 대단히 가치 있는 일이다. 미래의 나에게 주는 선물과 같다. 기록해두지 않으면 '현재의 나'가 했던 생각을 온전히 기억하기 어렵기 때문이다.
또 다른 목적은 경험 공유다. 포트폴리오가 단순히 포트폴리오이지 않기를 바랐다. 브런치에 남기고 있는 글처럼 내 UI/UX 디자인 경험을 공유할 수 있는 방법이 되기를 바랐다. 포트폴리오는 압축적인 문서 또는 웹 형식으로 경험을 공유할 수 있다.
02 어떤 포트폴리오를 만들 것인가?
1) 철학이 담긴 포트폴리오
나는 'UX 디자인은 배려다'라는 철학을 바탕으로 디자인을 하고 있다. 좋은 사용자 경험(UX)을 주는 디자인은 디자이너가 고통스러운 고민의 과정을 거쳐 사용자를 배려할 때 나온다고 생각한다.
이 디자인 철학은 어릴 적 꿈이었던 수학 선생님에서 시작된다. 중, 고등학생 시절 나는 누구보다 수학을 잘 가르치고 싶었다. 내가 가르치는 학생들이 내가 설명하는 내용을 막힘없이 이해하도록 하고 싶었다. 그 꿈을 위해 고민하고 고민하며 수학을 공부했었다.
그때 내 지식과 경험을 누군가에게 이해하기 쉽게 전달하는 일이 몹시 어렵다는 사실을 깨달았다. 상대방이 내가 하는 설명을 잘 이해하도록 하려면, 내겐 당연한 내용이더라도 상대방에게는 당연하지 않은 내용도 고려해야 한다. 내겐 당연한 내용을 아직은 당연하지 않은 누군가에게 전달하려면 정말 많은 고민이 필요하다. 상대방을 배려해야만 가능한 일이다.
이런 고민이 지금 UX를 디자인하며 하는 고민과 크게 다르지 않다. UX 디자인의 기본은 사용자가 어떤 고민도 하지 않고 서비스를 이용하도록 만드는 일이라 생각한다. 설명이 필요없는 디자인이 좋은 UX디자인이다. 사용자가 불편하다고 느끼는 디자인은 좋지 않은 디자인이다. 이를 위해서 UI/UX 디자이너는 대단히 많은 고민을 해야 한다.
2) UX의 실체가 담긴 포트폴리오
UI/UX 디자인을 하면서 과연 'UX'에 실체가 있는 것인지 고민이 많았다. UX, 사용자 경험은 '경험'이기에 단어 그대로 받아들이면 추상적일 수밖에 없다. 하지만 실무자 입장에서 UX의 실체를 관찰할 수 있어야 더 좋은 UX를 만들 수 있다고 생각한다.
UI/UX 디자인은 각 화면의 디자인도 중요하지만, 무엇보다 화면들을 연결하는 '흐름'을 잘 디자인하는 게 중요하다. 난 UX의 실체 중 일부분은 이 흐름에서 관찰할 수 있다고 생각한다.
이 흐름을 데이터로 분석하기 위해 마이크로 퍼널 분석(Micro Funnel Analysis)이란 데이터 기반 UI/UX 디자인 방법론을 정의해 실무에서 활용하고 있다. 덕분에 실체가 없어보였던 UX는 '전환율'이라는 데이터(지표)로 실체를 엿볼 수 있게 됐다. 디자인의 결과로 쌓이는 데이터로 사용자와 실시간으로, 지속적으로 소통하며 UX를 살필 수 있게 된 것이다.
[참고 용어]
퍼널(Funnel)
사용자가 서비스에 들어온 시점부터 나가는 시점까지의 데이터 흐름.
마이크로 퍼널 분석(Micro Funnel Analysis)
사용자가 UI를 쓰는 흐름들을 세세하게 나눠 각 흐름의 데이터를 관찰하고 분석하며 UX를 개선하는 데이터 기반 UI/UX 디자인 방법론.
전환율은 우리 서비스에 방문한 사용자 중 얼마나 우리가 의도한 대로 행동했는지 나타내는 비율을 뜻한다. 요즘 전환율을 중심으로 보던 여러 지표가 최적화되면서 '잔존율(리텐션, Retention)'에 집중하고 있다. 잔존율은 우리 서비스를 이용한 사용자가 일정 시간이 지난 뒤에 얼마나 남아있는지 나타내는 비율을 뜻한다. 난 잔존율이 UX의 실체를 볼 수 있는 또 다른 지표라 생각한다.
잔존율 분석의 핵심은 '어떤 행동을 한 사용자가 우리 서비스를 계속 이용하는가?'다. 다시 말해 '어떤 행동을 한 사용자의 잔존율이 높은가?'를 유심히 관찰하고 있다.
3) 이야기가 담긴 포트폴리오
간단한 설명과 함께 UI 화면만 주르륵 놓인 포트폴리오는 만들고 싶지 않았다. 고민이나 관찰을 통해 문제를 발견하고, 가설을 세워 디자인으로 해결한 실무 현장의 '이야기'를 담고 싶었다.
4) 핵심만 명확하게 보여주는 포트폴리오
내 포트폴리오를 보는 사람의 시간을 배려해 프로젝트를 3개만 넣기로 하고, 내용도 프로젝트당 최대 3장으로 짧게 구성하기로 했다. 포트폴리오 내용 중 관련된 브런치 글이 있는 경우 '자세히 보기' 버튼을 눌러 해당 글로 이동할 수 있도록 하기로 했다.
03 포트폴리오 구성 짜기
난 디자인이든 글이든 무슨 일을 하더라도 '구성'을 짜고 시작한다. 모든 일에 앞서서 '큰 그림(Big Picture)'을 그린다는 의미다. 무엇을 하든 어떤 내용을 어떻게, 어느 위치에 넣을지 구성을 미리 구상하고 정리해둬야 내가 생각한 방향대로 내용을 채워나갈 수 있다.
포트폴리오 또한 마찬가지다. 포트폴리오의 큰 그림을 그리는 일부터 시작했다. 내가 짠 포트폴리오의 구성은 아래와 같다.
1) 표지
2) [철학]을 보여주는 첫 번째 파트
3) [실무] 능력을 보여주는 두 번째 파트
4) [성과]를 보여주는 세 번째 파트
5) 마무리
첫 번째 파트는 2020년 3월 그동안의 UI/UX 디자인 경험을 바탕으로 만든 UX 원칙 10가지를 담기로 했다. 'UX 디자인은 배려다'라는 나의 디자인 철학을 녹인 UX 원칙 10가지를 첫 번째 파트에 배치해, 내가 어떤 철학으로 디자인을 하는지 포트폴리오를 보는 이에게 가장 먼저 알리고 싶었다.
두 번째 파트는 나의 대표 프로젝트라 할 수 있는 '회원가입을 쉽게 만드는 UI/UX 디자인'이다. 깊이 고민했던 프로젝트이자, 놀라운 성과를 냈던 프로젝트다. 포트폴리오를 보는 사람이 가장 처음 보게 되는 실무 프로젝트로, 내가 실무에서 어떻게 UI/UX를 디자인하는지 보여주는 핵심 프로젝트다.
세 번째 파트는 '제품을 성장시키는 UI/UX 디자인'으로 내가 우리 앱을 성장시키기 위해 진행했던 여러 프로젝트를 묶어서 구성하기로 했다. 다양한 시도를 통해 UI/UX 디자이너로서 팀에 어떤 기여를 했는지 성과를 보여주는 파트다.
04 포트폴리오 디자인하기
포트폴리오의 구성을 마친 뒤에는 내용을 채워나가는 동시에 편집 디자인을 진행했다. 폰트는 평소 좋아하는 'Apple 산돌고딕 Neo'를 썼다. 색은 UI/UX 디자인 결과물을 강조하기 위해 무채색 4개만 활용했다. 배경색은 100% 흰색인 #FFFFFF가 아닌 #FDFDFD를 써서 눈부심을 조금이나마 줄였다. 포트폴리오를 보는 사람을 배려한 것이다.
폰트 이름에서 H는 Headings(제목), P는 Paragraph(단락), F는 Footer(꼬리말)를 뜻한다. 웹 언어인 HTML의 태그명에서 따왔다.표지는 아래처럼 포트폴리오의 내용을 알리는 데에만 집중했다. 포트폴리오와 관련 없는 경력 같은 기타 요소는 넣지 않았다. 필요한 만큼만 단순하게 디자인했다.
작업을 하다가 재미있는 생각이 하나 들었는데, 실제로 지원을 할 때 이력서 없이 포트폴리오만 보내보는 것이다. 그러면 내가 지원한 팀에서는 '이력'이라는 편견 없이 오로지 나의 UI/UX 디자인 철학과 실력만으로 나를 평가할 수 있지 않을까?
포트폴리오라는 걸 알려주는 영어 단어 'Portfolio'에는 Jost* 폰트를 썼다. 레이아웃은 서로 수직인 2개의 직선을 기준으로 잡았다. 위에서 오른쪽 영역에는 개요, 아래 왼쪽 영역에는 각주, 아래 오른쪽 영역에는 주요 내용을 담았다.
1. UX 원칙 10가지
첫 번째 파트에는 지난 3월 정립한 'UX 원칙 10가지'를 담아 나의 디자인 철학을 포트폴리오의 시작에서 볼 수 있도록 했다. 각 내용을 하나씩 설명할 수는 없기에, 오른쪽 상단에 있는 '자세히 보기' 버튼을 눌러 UX 원칙 10가지를 자세하게 볼 수 있는 글로 갈 수 있도록 링크를 넣어놨다.
***모바일 기기로 이 글을 읽는 분들이 포트폴리오의 각 이미지 속 글들을 읽기 편하시도록 각 포트폴리오 이미지 아래에 [포트폴리오 내용]을 따로 첨부했습니다 :) 이미지에서는 각 페이지를 어떻게 구성했는지 보시고, 내용은 이미지 아래에 있는 글을 보시면 읽기 편하실 거라 생각합니다!
[포트폴리오 내용]
'UX 디자인은 배려다'라는 철학을 바탕으로, 아래 UX 원칙 10가지를 세워 디자인합니다.
UX 원칙 10가지
Designed by 김경환
01 우리는 사용자가 아니다.
02 각 화면에서 한 가지 행동에만 집중하게 한다.
03 반응을 보여줘야 한다.
04 맥락 있는 흐름을 만든다.
05 시각적 일관성을 유지한다.
06 예상할 수 있어야 한다.
07 의미 있는 움직임만 보여준다.
08 누구나 이해하기 쉬운 글을 제공한다.
09 사용자의 익숙함을 존중한다.
10 필요한 만큼만 단순하게 디자인한다.
2. 회원가입을 쉽게 만드는 UI/UX 디자인은?
두 번째 파트에는 나의 대표 프로젝트인 '회원가입을 쉽게 만드는 UI/UX 디자인'을 넣었고, 총 3장으로 구성했다.
1) Before 27.9% / After 85.2%
첫 페이지에는 사용자의 회원가입 경험을 어떻게 개선했는지 그 과정을 넣었다. 문제를 인식하고 데이터를 바탕으로 인사이트를 이끌어낸 뒤, 가설을 세워 실험을 하고 결과를 낸 일련의 디자인 프로세스를 Before/After 형식으로 구성했다.
상당히 많은 내용이기 때문에 잘 압축해 정리하는 게 중요했다. 내용 중 내가 고안한 '마이크로 퍼널 분석'이라는 개념은 왼쪽 각주를 통해 설명했고, '자세히 보기' 버튼을 눌러 마이크로 퍼널 분석에 대한 설명이 있는 글을 볼 수 있도록 링크를 넣어놨다. 각 화면의 개선보다 회원가입의 흐름을 어떻게 개선했는지 강조하고 싶었기 때문에, 실제 화면이 아닌 모바일 화면을 형상화한 사각형들로 흐름을 표현했다. UI/UX 디자인에서 각 화면 디자인도 중요하지만, '흐름'이 정말 중요하다는 걸 강조하고 싶었던 것이다.
[포트폴리오 내용]
회원가입을 쉽게 만드는 UI/UX 디자인은?
회원가입은 대부분의 서비스에서 비즈니스적으로 가장 중요한 요소 중 하나입니다. 3개월 동안 다양한 실험을 거듭해, 기존에 27.9%였던 신규 앱 설치자의 회원가입률을 85.2%까지 끌어올렸습니다.
문제점
회원가입 화면까지 도달한 뒤에 회원가입 완료율은 65.3%로 괜찮은 편이지만, 앱 내에서 회원가입 화면까지 도달하는 비율이 42.7%로 상당히 낮았습니다.
데이터 분석을 바탕으로 한 인사이트
신규 설치 사용자의 흐름을 관찰해 여러 '마이크로 퍼널(Micro Funnel)'을 만들어 분석한 결과, 일관된 메시지에 지속적으로 노출된 뒤 회원가입 화면에 도달한 사용자가 더 높은 비율로 회원가입하는 것을 발견했습니다.
가설
모든 신규 사용자에게 광고부터 앱까지 일관된 메시지를 전달하고 회원가입 화면에 도달시키면 회원가입률이 오를 것이다.
검증 결과
실험을 진행한 결과 회원가입 화면 도달 사용자는 94.8%, 도달 사용자의 회원가입 완료율은 89.9%로 크게 올랐습니다. 결과적으로 회원가입률 85.2%라는 훌륭한 결과를 만들어냈습니다.
회원가입률
신규 앱 설치 사용자 대비 회원가입 완료 사용자의 비율입니다.
2) 성공 요인
두 번째 페이지에는 회원가입률을 27.9%에서 85.2%까지 올릴 수 있었던 성공 요인을 정리해 넣었다. 성공 요인 중 '간편 로그인을 유도하는 디자인'은 오른쪽 상단 '자세히 보기' 버튼을 눌러 간편 로그인을 유도하는 디자인을 자세히 볼 수 있는 글로 갈 수 있도록 링크를 넣어놨다.
목업은 쓰지 않았다. 목업은 내 디자인을 보는 걸 방해하는 시각 잡음이라 생각했다.[포트폴리오 내용]
성공 요인은?
이 회원가입 프로젝트의 성공 요인은 '맥락 있는 흐름'과 '간편 로그인을 유도하는 디자인'입니다.
맥락 있는 흐름
바뀐 사용자 흐름은 회원가입을 하지 않으면 앱을 쓸 수 없는 구조입니다. 회원가입률이 올라갈 수밖에 없지요. 하지만 사용자가 도달하는 곳마다 아무 맥락 없이 서로 다른 메시지를 전달한다면 사용자가 이탈할 가능성이 높다는 사실을 마이크로 퍼널 분석을 통해 알아냈습니다.
이런 인사이트를 바탕으로 광고부터 앱 스토어 설명, 앱을 처음 설치한 사용자에게 보여주는 앱 안내까지 모든 신규 사용자가 일관된 메시지를 보고 회원가입 화면에 도달할 수 있도록 사용자 흐름을 디자인했습니다.
간편 로그인 유도
#시각적 위계 #면 #색
#엄지 영역
맥락 있는 흐름을 거쳐 사용자가 도달하는 '회원가입 화면'은 간편 로그인 버튼의 시각적 위계를 가장 높게 설정해 사용자의 눈에 띄게 만들고, 버튼을 누르기 편하도록 엄지 영역에 놓았습니다. 사용자가 '간편 로그인'이라는 행동을 하도록 강하게 유도하는 겁니다.
간편 로그인 영역을 제외한 뒤로 가기 버튼의 위치, 문구, 텍스트 필드, 이용 약관, 모션, 코드 속 판단 조건 등 모든 요소를 하나하나 세심하게 신경썼습니다.
3) 지속적 개선
이 프로젝트를 진행하면서 꼭 확인해 보고 싶은 게 있었는데, 바로 사용자들이 어떤 간편 로그인을 선호하는지다. 확인해보고 싶었던 이유는 2019년 9월 브런치에 올린 글 [실무편] 회원가입을 쉽게 만드는 UI/UX 디자인은?에 한 독자 분께서 남겨주신 아래 댓글이 호기심을 자극했기 때문이다.
(댓글 원문) 간편로그인은 네이버를 추천해드려요. 카카오와 페이스북이 물론 사람들이 많이 쓰긴하지만, 개인의 사적인 영역과 연결되어있는 서비스이다보니 회원 가입 목적으로 사용하기에 꺼려한다는 통계가 있습니다. 실제로 저희 서비스도 3개의 간편 로그인 수단 중 네이버의 비율이 압도적으로 높더라구요!
흥미로운 실험 주제를 던져주신 것에 대단히 감사했고, 회원가입 프로젝트를 진행하면서 따로 확인해봤다. 결론부터 말하자면 서비스마다 사용자가 가장 많이 누르는 간편 로그인 버튼은 다르다. 독자님의 서비스 사용자들은 '네이버'를 압도적으로 많이 썼지만, 우리 서비스에서는 카카오를 쓰는 비율이 네이버보다 2배 높았다. 이는 각 서비스를 쓰는 사용자의 나이나 성향 등에 따라 달라지는 것으로 보인다.
우리 서비스의 회원가입 화면에서 사용자는 카카오, 네이버, 페이스북 간편 로그인 또는 이메일 로그인을 이용할 수 있다. 3개월 동안 데이터를 관찰한 결과 약 99%의 사용자가 이메일 로그인 대신 간편 로그인을 이용하며, 그중 66%는 카카오를 33%은 네이버를 썼다. 페이스북 간편 로그인은 이메일 로그인보다도 적게 썼다.
세 번째 페이지에는 이런 데이터를 바탕으로 회원가입 화면을 개선한 내용으로 채웠다. 사용자들이 거의 쓰지 않는 이메일 로그인과 페이스북 간편 로그인은 화면 아래 작은 텍스트 버튼으로 바꿔 디자인했다. 사용자들이 가장 많이 쓰는 카카오와 네이버 간편 로그인 버튼은 많이 쓰는 순서대로 위에서부터 배치했으며, 기존보다 조금 위쪽으로 옮겨 엄지 영역 위치를 최적화했다. 화면의 아래쪽보다 중앙에서 약간 아래에 있는 곳이 사용자가 엄지로 가장 누르기 편한 엄지 영역이기 때문이다. 그리고 애플의 지침에 따라 iOS 앱에는 6월까지 '애플 간편 로그인'을 넣어야 하기 때문에 애플 로그인 버튼이 추가됐다. (덧. 2020년 6월 이후 애플 로그인이 없으면 앱 심사를 통과하지 못할 수도 있습니다. 애플에서 공지하는 일정이 바뀔 수도 있으니 정기적인 확인이 필요합니다.)
[포트폴리오 내용]
카카오 vs 네이버 vs 페이스북 vs 이메일, 사용자는 무엇을 가장 많이 이용할까?
3개월 동안 사용자가 회원가입 화면에서 어떤 간편 로그인 버튼을 가장 많이 누르는지 데이터를 관찰했습니다. 그 결과 사용자의 66%가 카카오 버튼을, 33%가 네이버 버튼을 눌렀습니다.
1. 사용자 친화적 개선
2. 시각적 잡음 최소화
3. 엄지 영역 위치 최적화
3. 제품을 성장시키는 UI/UX 디자인은?
1) MAU 성장률
세 번째 파트에서는 MAU 성장률을 가장 먼저 보여주면서, 우리 앱을 효율적으로 개발하고 성장시키기 위해 진행했던 프로젝트인 '디자인 시스템' 프로젝트와 '검색을 쉽게 만드는 UI/UX 디자인' 프로젝트를 넣어 구성했다. 3장이라는 제약이 있었기 때문에 많은 프로젝트를 넣지 못하는 건 아쉽지만, 포트폴리오의 주요 독자인 인사팀이나 디자이너들이 시간에 쫓겨 많은 프로젝트를 보기 힘들 것이기 때문에 굳이 프로젝트를 많이 넣을 필요는 없다고 생각했다.
MAU
MAU는 Monthly Active User의 약자로 한 달 동안의 활성 사용자 수를 뜻한다. 서비스의 중요 성과 지표 중 하나로 사용자 규모를 알 수 있어 비즈니스적으로 많이 쓰인다.
[포트폴리오 내용]
제품을 성장시키는 UI/UX 디자인은?
2020년 1분기 동안 핏코 앱의 월간 활성 사용자(MAU)는 346% 성장했습니다. '코디 검색'이라는 새로운 서비스 런칭이 큰 역할을 했으며, 저는 PM이자 UI/UX 디자이너로서 사용자에게 코디 검색을 쉽게 전달하는 역할을 맡았습니다.
2) 디자인 시스템
한 페이지에 디자인 시스템을 모두 소개하기는 힘들어 고민이 많았던 페이지다. 최종적으로는 디자인 시스템이 어떻게 제품의 성장에 도움이 됐는지 설명할 수 있는 방식으로 구성했다. 일관적이고 효율적으로 디자인하기 위해 디자인 시스템을 설계했고, 개발 시간을 단축하는 환경을 만들었다는 것을 강조했다.
[포트폴리오 내용]
일관적이고 효율적인 UI/UX 디자인 = 제품을 빠르게 성장시키는 동력
'디자인 시스템(Design System)'을 설계해 일관적이고 효율적으로 디자인합니다. 디자인 시스템 속 반복되는 요소들은 코드로 대응시켜 개발 시간을 단축하고 오류를 줄입니다.
3) 검색을 쉽게 만드는 UI/UX 디자인
역시 고민이 많았던 페이지다. 처음에는 아래처럼 핵심이 되는 '코디 검색'의 사용자 흐름과 함께 이 흐름의 핵심 지표였던 전환율을 강조해 디자인했다.
내가 고민했던 부분은 포트폴리오에 '화면 구성력'을 보여줄 수 있는 부분이 없었다는 점이다. 다시 말해, 포트폴리오에서 내가 디자인한 화면들을 보여주는 부분이 없었다. 최종적으로 아래와 같이 '검색'과 관련된 화면들을 정리해 보여주고, 핵심 사용자 흐름은 따로 강조해 디자인했다. 전환율과 함께 KPI도 함께 넣어 성과를 강조했다.
KPI는 Key Performance Indicator의 줄임말로 핵심 성과 지표를 뜻합니다.
[포트폴리오 내용]
검색을 쉽게 만드는 UI/UX 디자인은?
1분기 핏코 성장 동력이었던 '코디 검색' 서비스는 일반 검색과는 다르게 사용자가 옷 사진을 찍어 올리고, 옷의 특징을 선택해야 합니다. 사용자의 노력이 들어가야 하는 과정으로 사용자가 한 화면에서 한 가지 행동에만 집중하도록 디자인했고, 55.6%의 전환율을 만들었습니다.
마지막은 '감사합니다'라는 인사로 담백하게 마무리지었다. 포트폴리오를 보는 사람이 다시 첫 페이지로 돌아가 연락처를 찾아보지 않도록 연락처를 표지와 똑같이 넣었다.
05 포트폴리오 리뷰 준비하기
포트폴리오 리뷰는 다른 디자이너들의 피드백을 받을 수 있는 좋은 기회다.
포트폴리오 디자인을 모두 마치고 '포트폴리오 리뷰'를 위한 발표 자료를 만들기 시작했다. 서류를 지원할 때에는 압축적으로 정리한 포트폴리오가 좋다고 생각했지만, 서류 통과 이후 포트폴리오 리뷰 혹은 실무 인터뷰에서는 발표에 적합한 형식으로 재구성하는 작업이 필요하다고 생각했다.
면접관이 UI/UX 디자이너(디지털 프로덕트 디자이너) 3명이라는 가정 하에 만들기 시작했다. 크게 바꿀 부분은 2가지다. 첫 번째는 표지고, 두 번째는 핵심 프로젝트인 '회원가입을 쉽게 만드는 UI/UX 디자인'이다. 표지는 기존과 같은 형식을 유지하되 지원하는 회사별로 다르게 디자인하면 좋겠다는 생각이 들었다. 팀에 관심이 있다는 걸 표지부터 보여줄 수 있지 않을까? 허나, 이는 무리수일 수도 있다. 만약 포트폴리오 리뷰에서 표지에 대한 반응을 살피고 무리수라는 생각이 들면 웃음으로 무마하며 빠르게 넘어가는 게 좋다. 무리수를 두지 않고 평범한 표지로 가는 게 더 좋을 수도 있다.
표지 다음에 나오는 페이지는 기존 포트폴리오와 똑같이 UX 원칙 10가지다. 실무적으로 팀원들과 합의한 UX 원칙을 바탕으로 효율적인 의사소통을 할 수 있다는 점을 강조하면서, 내 철학인 '사용자에 대한 배려'를 소개할 생각이다.
그 다음에 나오는 '회원가입을 쉽게 만드는 UI/UX 디자인' 부분이 발표의 핵심 내용으로 기존에 3장으로 압축했었던 내용을 13장으로 늘려 발표에 적합한 형식으로 바꿨다. 면접관이 나의 디자인 과정을 잘 따라올 수 있도록 구성한 것이다. 아래처럼 내 디자인이 실제로 어떤 성과를 냈는지 보여주면서 시작한다.
우리 앱의 회원가입률은 2020년 1분기 동안 약 3배 상승했다.그런데 여기서 꼭 명심할 점이 있다. 진행한 프로젝트가 어떤 서비스에서 진행한 프로젝트인지, 서비스에 대해 먼저 설명해야 한다는 점이다. 서비스에 대한 이해가 있어야 면접관이 프로젝트를 이해하기 더 좋다. 진행한 프로젝트마다 서비스가 다르다면 각 프로젝트마다 간략히 서비스에 대해 설명하고 시작하는 게 좋다. 이는 놓치기 쉬운 부분인데, 정말 중요하다.
다음 페이지에서는 3단계에 걸쳐 문제를 정의하고 해결한 과정을 소개한다.
[포트폴리오 내용]
STEP 1
간편 로그인을 유도하는 디자인
STEP 2
회원가입 화면에 도달시키는 디자인
STEP 3
맥락 있는 흐름을 만드는 디자인
다음으로는 첫 번째 단계(STEP 1)에서 가장 처음 정의했던 문제와 문제를 해결하기 위해 어떤 방법을 선택했는지 보여준다.
'회원가입하는 사용자가 적다'는 문제는 2019년 7월에 우리 앱의 MY 탭 전체를 새롭게 설계하면서 처음 인식한 문제였다. 이 문제를 해결하기 위한 프로젝트는 MY 탭 전체를 새롭게 설계하는 큰 프로젝트 안에 들어있던 작은 프로젝트로 어떤 성과를 구체적으로 내기보다는 기본적인 사용성을 높이는 데 집중했었다.
문제의 해결책은 '간편 로그인을 유도하는 디자인'으로 아래 이미지와 같다. 이 화면의 핵심은 간편 로그인 버튼들을 시각적으로 가장 눈에 잘 띄게 하고, 엄지 영역에 배치해 사용자가 쉽게 누를 수 있도록 한 디자인이다. 다른 요소들에 대한 설명을 모두 넣으면 이 화면의 핵심인 '간편 로그인을 유도하는 디자인'을 강조할 수가 없기에, 아래처럼 간편 로그인을 유도하는 디자인에 대한 설명만 넣었다. 포트폴리오 리뷰는 발표라서 말로도 설명할 수 있기에 핵심만으로 구성하는 게 좋다고 생각했다.
면접관이 추후 다시 이 발표 자료를 볼 수도 있기 때문에 기존 포트폴리오와 마찬가지로 '자세히 보기' 버튼을 눌러 이 디자인에 대한 설명을 자세하게 볼 수 있는 글로 갈 수 있도록 링크를 넣어놨다.
다음 페이지는 기존 포트폴리오에서는 없었던 이메일 로그인 디자인을 넣어 구성했다. 내가 말하고자 하는 큰 맥락과는 관련이 없어서 압축된 포트폴리오에서는 뺐던 디자인인데, 포트폴리오 리뷰에서는 보여주는 것도 괜찮겠다고 생각했다.
핵심은 '간편 로그인'으로 회원가입을 쉽게 하도록 유도한 디자인이지만, 사용자에 따라 이메일로 회원가입을 하고 싶을 수도 있다. 우리 서비스의 회원가입 화면에서는 그런 사용자를 배려해 이메일 로그인도 아래처럼 제공하고 있다.
꽤나 특이한 구조를 갖고 있는데, 사용자가 이메일을 입력하면 서버에서 회원인지 아닌지 판단한다. 회원이 아니라면 회원가입 화면으로, 회원이라면 로그인 화면으로 보낸다. 그리고 각각의 상황에서 사용성을 극대화한 마이크로 인터랙션(Micro Interactions)으로 각 과정을 진행한다. 사용자와 실시간으로 소통하며 사용자가 입력한 내용에 대한 피드백을 주는 것이다.
사실 간편 로그인 버튼을 누르는 사용자도 같은 경험을 하게 된다. 간편 로그인이지만 간편 회원가입이 될 수도, 간편 로그인이 될 수도 있다는 뜻이다. 이메일 로그인과 마찬가지로 사용자가 버튼을 누르면 서버에서 가입한 사용자인지 아닌지 판단한다. 사용자는 회원가입을 하는지 로그인을 하는지 신경쓰지 않고 버튼만 누른 뒤 디자이너가 유도한 행동대로 따라오기만 하면 회원가입이든 로그인이든 완료된다.
이 부분이 사용자에게 혼란을 주는 디자인이 아닌지 고민이 많았지만, 간편 로그인 버튼에 '~로 로그인'이 아닌 '~로 시작'이라는 문구를 써서 사용자가 회원가입인지 로그인인지 고민하지 않도록 만들어 큰 문제가 없는 것으로 보인다. 사용자 중심 글쓰기(UX Writing)를 통해 사용자가 혼란스러울 수 있는 상황을 없앤 것이다. 사용자가 회원가입을 할 지 로그인을 할 지 선택하는 단계를 완전히 없애 사용성을 극대화했다. 높은 회원가입률을 봤을 때 이는 사용자에게 좋은 경험을 주고 있다는 확신을 준다.
다음 페이지는 위 디자인으로 사용자가 얼마나 회원가입하는지 살핀 결과다. 내가 팀에 합류하기 전에는 회원가입과 관련해 측정한 데이터가 없었기 때문에, 아래 데이터가 회원가입과 관련된 최초의 데이터였고, 앞으로 진행할 실험의 비교 데이터(대조군)로 삼기로 했다. 이 데이터를 기준으로 새로운 디자인이 개선됐는지, 안 됐는지를 판단하겠다는 뜻이다.
여기서 새로운 문제(STEP 2)를 발견했다. 회원가입 화면에 도달한 신규 사용자가 회원가입을 완료하는 비율은 65.3%로 괜찮은 편이었지만, 첫 사용자가 앱을 설치하고 회원가입 화면에 도달하는 비율이 42.7%로 낮았던 것이다.
우리 팀은 앱에서 회원가입 화면으로 가는 경우를 늘려 회원가입하는 사용자를 늘리기로 했다. 사용자가 앱의 핵심 기능을 쓰려고 할 때 회원가입 화면으로 보낸다던가, 특정한 경우에 회원가입을 해야 하는 이유를 팝업을 띄워 알려줘 회원가입 화면으로 보내는 방법을 쓰기로 한 것이다. 이는 많은 앱에서 쓰고 있는 방법이기도 하다.
그리 성과가 좋지는 않았다. 앱을 설치한 첫 사용자가 회원가입 화면에 도달하는 비율이 10% 정도밖에 늘지 않은 것이다.
그런데 여기서 새로운 인사이트를 얻었다(STEP 3). 사용자는 앱의 다양한 위치에서 각기 다른 메시지를 보고 회원가입 화면에 도달하는데, 각각의 사용자 흐름을 분석하다가 '자동 사이즈 측정'이라는 일관성 있는 메시지를 보고 회원가입 화면에 도달한 사용자의 회원가입률이 평균보다 10% 정도 높다는 걸 발견한 것이다. 이를 바탕으로 모든 신규 사용자를 '맥락 있는 흐름'으로 회원가입 화면에 도달시키면 회원가입률이 오를 거라는 가설을 세웠다.
이 프로젝트에 대해 고민하던 당시 우리 팀은 '코디 검색'이라는 새로운 서비스 런칭을 준비하고 있었다. 따라서 자연스럽게 '코디 검색의 핵심 가치'를 사용자에게 전달할 '일관성 있는 메시지'로 하는 것으로 의견이 모아졌다.
그리고 앱을 설치한 이후가 아닌 앱을 설치하기 전부터 일관성 있는 메시지를 전달하기로 했다. 광고부터 앱스토어의 스크린샷과 설명, 앱에 처음 들어왔을 때 보게 되는 앱 안내까지 모든 메시지에서 코디 검색의 핵심 가치를 전달하기로 한 것이다. 모든 신규 사용자는 이런 일관적인 메시지를 보고 회원가입 화면에 도달하게 된다.
최종 결과는 놀라웠다. 앱을 설치한 신규 사용자가 회원가입을 한 비율은 85.2%가 나왔다. 앱을 설치한 뒤 사용자는 앱에 대한 안내 화면 6개를 지나 회원가입 화면에 도달하는 비율이 94.8%였으며, 회원가입 화면에 도달한 사용자의 회원가입 완료율은 89.9%로 기존 65.3%보다 24.6%p 증가했다. 실제 데이터지만 너무 놀라워 한 달 정도 계속 지켜봤는데, 꾸준히 비슷한 수치를 유지했다.
마지막으로 처음에 보여줬던 상승 그래프를 다시 한 번 더 보여주며 결과를 정리했다.
이 프로젝트의 마지막은 기존 포트폴리오의 마지막 페이지(3번째 페이지)와 같다. 사용자에게 좋은 경험을 주고자 지속적으로 디자인을 개선하고 있다는 걸 소개하며 발표는 마무리된다.
06 포트폴리오 개선하기
처음 지원했던 팀과 포트폴리오 리뷰를 진행하면서 준비한 포트폴리오에는 아래와 같은 점들이 부족하다는 걸 깨달았다.
1) 구체적으로 설명할 수 있는 프로젝트가 1개밖에 없다.
2) 조형 능력을 볼 수 있는 GUI 디자인 화면이 적다.
3) As is /To be 같은 익숙한 방식의 설명이 아니다.
부족한 점들을 개선하기 위해 3번째 파트인 '제품을 성장시키는 UI/UX 디자인은?'을 '검색을 쉽게 만드는 UI/UX 디자인은?'으로 주제를 바꾸고 첫 페이지는 아래 이미지와 같이 구성했다. 기존에는 프로젝트 2개를 통해 제품 성장에 어떻게 기여했는지 보여줬다면, 새로운 주제는 프로젝트 하나를 깊이있게 설명할 수 있도록 바꾼 것이다.
두 번째 파트인 회원가입을 쉽게 만드는 UI/UX 디자인 프로젝트에서 회원가입률의 성장을 첫 페이지에서 강조했듯이, 여기서는 KPI의 성장을 강조했다. 2번째 파트와 마찬가지로 문제를 인식하고 데이터를 바탕으로 인사이트를 이끌어낸 뒤, 가설을 세워 실험을 하고 결과를 낸 일련의 디자인 프로세스를 첫 페이지에 담았다. Before/After 형식 대신 As is/To be 형식으로 구성했다.
[포트폴리오 내용]
검색을 쉽게 만드는 UI/UX 디자인은?
2020년 1분기 동안 핏코 앱의 월간 활성 사용자(MAU)는 346% 성장했습니다. 그에 따라 KPI는 216% 성장했습니다. '코디 검색'이라는 새로운 서비스 런칭이 큰 역할을 했으며, 저는 PM이자 UI/UX 디자이너로서 사용자에게 코디 검색을 쉽게 전달하는 역할을 맡았습니다.
문제점
코디 검색 서비스를 런칭했지만, 이를 이용하는 사용자가 적었습니다. 코디 검색 서비스를 이용하는 사용자 수는 KPI와 연결되기 때문에 신규 사용자가 코디 검색을 쓰도록 행동을 유도하는 일은 중요했습니다.
한 화면 안에 '사이즈 검색' 및 '온라인 코디' 등 다른 서비스가 함께 있어 신규 사용자가 '코디 검색' 서비스를 쉽게 인지하기 어렵다는 게 가장 큰 문제라고 판단했습니다.
과거 A/B/C 테스트에서 얻은 인사이트
신규 사용자에게 단순하고 맥락 있는 첫 화면을 보여주면 명확한 행동을 유도할 수 있다는 인사이트를 활용하기로 했습니다.
가설
신규 사용자가 '사진으로 코디 검색'이라는 행동을 하도록 화면을 단순하고 명확하게 바꿔 디자인하면, 더 많은 신규 사용자가 코디 검색 서비스를 이용할 것이다.
검증 결과
신규 사용자의 코디 검색 이용 비율(KPI)은 9.7%에서 21%로 216% 성장했습니다. 이는 기존 디자인과 비교해 코디 검색 서비스로 진입하는 초반 전환율이 3배 상승한 것이 큰 역할을 했습니다. 회원가입을 쉽게 만드는 UI/UX 디자인 프로젝트로 KPI가 13%까지 올랐고, 해당 프로젝트를 통해 21%까지 올랐습니다.
다음 페이지는 사진으로 코디 검색을 위해 사용자가 거치는 흐름을 구체적으로 담았다.
[포트폴리오 내용]
독특한 검색 서비스의 UI/UX 디자인
1분기 핏코 성장 동력이었던 '코디 검색' 서비스는 일반 검색과는 다르게 사용자가 옷 사진을 찍어 올리고, 옷의 특징을 선택해야 합니다. 사용자의 노력이 들어가야 하는 과정으로 사용자가 한 화면에서 한 가지 행동에만 집중하도록 디자인했고, 55.6%의 전환율을 만들었습니다.
3번째 페이지는 사용자의 편의와 리텐션을 올리기 위해 런칭한 '검색어로 코디 검색'과 '최신 코디 모아보기'를 담았다. 특이한 건 '로딩 중' 화면을 넣은 것인데, 언뜻 보기에 포트폴리오에 적합해 보이는 화면이 아닌 것처럼 보일 수 있다. 이 화면을 넣은 목적은 UX 원칙 10가지 중 '반응을 보여줘야 한다'는 원칙이 어떻게 적용되고 있는지 보여주기 위해서다.
[포트폴리오 내용]
어떤 행동을 한 사용자가 리텐션이 높을까?
사진으로 코디 검색 서비스를 런칭한 뒤 '검색어로 코디 검색'과 '최신 코디 모아보기' 서비스를 추가로 런칭했습니다. 런칭 후 어떤 행동을 한 사용자가 리텐션(Retention, 잔존율)이 높은지 관찰하고 있습니다. 리텐션은 전환율과 더불어 'UX의 실체'가 나타나는 부분이라 생각합니다.
포트폴리오 리뷰를 진행하면서 또 하나 느꼈던 건 포트폴리오 리뷰를 위해 준비했던 발표 자료가 오히려 프로젝트를 전달하는 데 적합하지 않을 수도 있다는 점이다. 실제로 해보니 발표에는 적합할 수 있지만 진짜 목적인 '리뷰'에는 부적합하다고 느꼈다. 다음 리뷰부터는 프로젝트 당 3 페이지 이하로 구성된 제출용 포트폴리오로 진행해볼 계획이다.
마치며
UI/UX 디자인 포트폴리오를 처음 만들 때에는 정말 막막했습니다. 이 글이 UI/UX 디자인 포트폴리오를 준비하고 계신 분들께 조금이나마 도움이 되기를 바랍니다.
제가 포트폴리오를 만든 과정이 정답은 아닙니다. 디자인에는 정답이 없고, 포트폴리오에도 정답은 없습니다. 디자이너로서 스스로를 잘 표현할 수 있는 포트폴리오는 자기 자신밖에 만들지 못합니다. 자신을 잘 표현한 포트폴리오가 좋은 포트폴리오라고 생각합니다.
다음 포트폴리오는 저 혼자의 힘으로 디자인하고 개발까지 마친 웹 사이트로 만들고 싶습니다. 올해 꼭 해내야 할 일이기도 합니다. 웹 포트폴리오는 제가 포트폴리오의 목적 중 하나로 생각하고 있는 '공유'에 더 적합한 형식이라 생각합니다. 아마 웹 포트폴리오를 완성했을 때에는 꽤나 가슴이 벅찰 것 같습니다.(끝)
작은 앱 프로젝트
많은 기능과 서비스를 갖추고 있는 슈퍼 앱들 사이에서 단순함을 가장 큰 목표로 하는 '작은 앱'이 사람들에게 어떠한 의미로 다가갈지 연구하는 '작은 앱 프로젝트'를 진행하고 있습니다.
07 참고 자료
1. 디자이너 박종민님의 인터뷰 영상 '마이리얼트립 프로덕트 디자이너는 어떻게 일하나요?'
종민님의 포트폴리오에 관한 조언을 들을 수 있습니다.
2. 디자이너 Minnie Kim님의 글 '스타트업 디자이너의 포트폴리오 만들기'
3. 디자이너 오남경님의 글 '이력서와 포트폴리오를 준비하는 디자이너에게'
4. JASON YOO님의 RE: 포트폴리오 만들기
