#04. UX/UI 포트폴리오 표지부터 산출물까지 제작
표지부터 산출물까지의 플로우 흐름을 파악해 보자
안녕하세요 디자이너 다구몬입니다
#00-#03편 까지는 여러분들과 함께 UX/UI 디자인 포트폴리오 구성을 어떻게 해야 하고, 어떻게 제작해야 하는지에 대해서 수업 진행을 했습니다.
저의 글이 여러분들께 도움이 되었을까요?
도움은 되었지만, 아직까지는 감이 안 오시는 분들도 계실 거고, 어떤 형식으로 포트폴리오 제작을 해야 하는지 감을 잡으신 분들도 계실 거라고 생각합니다. 하지만, 뭐든 처음이 어려운 법이기 때문에 포트폴리오를 제작하면서도 혼란스러움을 안고 계실 거라고 생각이 드네요
저 또한, 아무리 많은 정보를 수집하고 읽어보고 이해하려고 노력해 봐도 잘 되지가 않았어요.
제일 중요한 건 직접 제작을 하면서 어떤 식으로 진행하면 좋을 것인지 마인드맵을 그려가며 이해하는 것이 좋습니다. 경험을 통해 배움을 얻어가는 것이 제일 중요하기 때문입니다.
오늘은 여러분들과 UX/UI 포트폴리오 제작하는 방법을 그동안 제가 제작했던 포트폴리오 하나의 예시를 가지고 알려드리고자 합니다.
불펌... 멈춰주세요!
상세하게 알아보기 전 꿀팁 세 가지를 알려드리려고 합니다.
01. 긴 이야기를 적으면 안 된다
- 면접관들은 여러분들의 포트폴리오를 자세히 들여다보지 않습니다.
02. 키워드를 도출해야 한다
- 시선 유도를 위해 키워드만 도출해서 보여주세요.
03. 글보다는 인포그래픽 활용
- 인포그래픽을 활용하여 피로감을 감소해야 합니다.
01. 표지 디자인
UX/UI 표지 디자인은 많은 분들이 해당 목업 파일을 대상으로 활용하여 표현하는 경우가 많습니다. 표지는 앞 수업 때 말씀드린 것처럼 전반적인 프로젝트의 이미지를 전달하는 구간이기 때문에 해당 프로젝트의 아이덴티티를 부각할 수 있도록 디자인 설계를 해주는 것이 좋습니다.
저의 포트폴리오 표지 디자인을 보시면 저는 캐논이라는 어플리케이션을 리디자인한 프로젝트를 진행했습니다. 컨셉은 가운데에 동그라미를 넣어 카메라 렌즈를 형상화한 표지 디자인을 제작했으며, 검정과 빨간색의 컬러를 이용하여 캐논의 브랜드 아이덴티티를 부각하고자 했습니다.
제가 리디자인을 진행한 캐논 모바일 어플리케이션의 컨셉은 "혁신적이고 고급스럽고 무게감이 있는 디자인"을 진행했기 때문에 표지에서도 전반적으로 무게감을 주고 혁신적인 분위기를 연출했습니다.
여기서 주의사항 하나!
현재, 제 포트폴리오 표지에서는 포토샵 효과인 노이즈 효과를 넣었습니다. 그렇지만 회사 제출용 PDF에서는 효과를 넣지 않는 것이 좋습니다. PDF 용량을 조절하는 과정에서 화질이 깨질 우려가 매우 큽니다.
다른 프로젝트인 롯데 아쿠아리움 키오스크 표지디자인입니다. 롯데월드 아쿠아리움 키오스크 디자인 기반으로 제작된 프로젝트로, 해양 생태계를 연출시킬 수 있는 이미지와 목업을 활용하여 전반적인 이미지를 전달하도록 디자인 제작하였습니다.
그렇다면, 꼭 해당 웹이나 모바일 목업을 시행한 것들을 표지에 보여줘야 할까요?
NOPE! 그렇지 않습니다. 포트폴리오는 나의 작업물의 모음집이기 때문에 전반적으로 디자인 요소가 많이 들어가게 됩니다. 그렇기 때문에 피로감이 증대할 수 있어, 저는 중간중간 표지에 목업을 사용하지 않고 해당 프로젝트의 브랜드 아이덴티티만 보여줄 수 있는 표지 제작도 진행을 했습니다.
예시를 보시면 대한항공 표지 디자인에서 볼 수 있습니다. 전반적으로 색채를 부각하여 아이덴티티를 확립하도록 하였고 깔끔한 디자인 제작을 통해 피로감을 감소시키고자 노력했습니다.
*하나하나의 프로젝트의 디자인을 살리는 것도 중요하지만, 포트폴리오는 작업의 모음집이기 때문에 강 중 약을 조절해 가면서 플로우를 만들어 줘야 더 시선이 간다고 생각합니다.
저는 해당 프로젝트 명, 간략한 설명, 앱 아이콘과 어떤 디자인으로 분류가 되는지, 사용 프로그램, 그리고 기여도를 기재하였습니다.
02. 개요 (Background)
개요에서는 가장 중요한 점 글이 너무 많으면 안 됩니다! 또한, 디자인 요소를 넣어 시선을 사로잡게 하는 것이 좋습니다. 저의 경우 타이포를 활용하여 시선을 유도하는 디자인 설계를 진행했습니다.
궁금증을 유발할 수 있는 내용들을 구성하고 인포그래픽 혹은 말풍선을 통해 호기심을 자극할 수 있도록 설계하였으며, 컬러를 이용하여 해당 프로젝트의 아이덴티티를 부각했습니다.
개요에서는 대체적으로 이러이러한 가운데 (문제제시), 이런 불편함을 가지고 있다.(사용자리서치) 그래서 해당 브랜드는 이를 개선할 수 있도록 서비스 구축을 하려고 한다 (프로젝트목표)라는 짧은 내용을 통해 전반적인 프로젝트의 내용을 전달하는 것이 좋습니다.
03. 수치 (Market Research)
해당 프로젝트의 자료조사한 데이터 기반을 보여주는 구간으로 인포그래픽화 하여 보여줘야 합니다. 방문연령이 어떻게 되는지, 주로 누가 방문을 하는지, 방문 목적은 무엇인지, 이용함에 있어 불편한 것이 무엇인지, 원하는 서비스가 무엇인지 등을 여러분들이 데이터 조사한 것들 중 가장 중요 데이터를 뽑아서 디자인 표현을 하는 것이 좋습니다.
꼭, 인포그래픽 디자인을 사용해야 할까요?
꼭 그래야 하는 건 아니지만, 면접관들의 시선을 사로잡게 하기 위해서는 가능하다면 인포그래픽 디자인을 통해서 여러분들이 조사한 내용들을 보여주는 것을 추천드리고 싶습니다.
*면접관들은 여러분들의 포트폴리오 하나하나 구체적으로 읽지 않습니다. 그렇기 때문에, 키워드를 뽑아 스치듯이 보게 되더라도 읽힐 수 있게 만드는 것이 중요합니다.
04. 페르소나 (Persona)
사용자가 해당 어플리케이션 혹은 웹 사이트를 이용함에 있어 불편한 점들을 인터뷰 리서치 기반으로 제작하는 구간입니다. 여기서도 너무 긴 설명보다는 정확하게 어떤 점이 아쉬운 지에 대해 키워드 도출을 하여 보여주는 것이 좋습니다. 제가 제작한 포트폴리오 페르소나에서는 아무래도 실무에서 진행한 프로젝트보다 대학교 혹은 디자인 외주를 맡아 진행한 프로젝트가 많다 보니 설문조사를 진행함에 있어 한계성이 있기 때문에, 상세하게 디자인을 하기에는 어려움이 있었습니다. 그렇지만, 실제 인터뷰를 도와주었던 대학교 친구들 혹은 지인들에게 부탁하여 간단한 인터뷰 조사를 통해 키워드를 도출하고 설득하는 과정을 표현했습니다.
여러분들도 최대한 실제 사용자들의 목소리를 기반으로 제작하는 것이 좋습니다.
05. 기획 (Project Goal or Design Goal)
기획 부분에서는 여러분들이 프로젝트 목표/서비스의 가치 키워드를 발굴하여 적어야 합니다. 너무 긴 이야기를 풀어서 나열하는 것보다 짧은 키워드에 시선이 가도록 유도하는 디자인 제작을 해야 합니다. 요즘은 타이포를 이용한 디자인 활용이 많기 때문에, 저 같은 경우에도 이모티콘과 타이포를 활용하여 시선 유도를 유발하였습니다.
06. 디자인 가이드 (Design Guide)
UX/UI 포트폴리오에서 가장 중요한 구간이라고 볼 수 있습니다. 바로 "뼈대"입니다. Wireframe과 IA는 필수적으로 들어가야 한다고 봐도 무관할 정도로 중요합니다. 그 이유는 해당 페이지를 제작하기 전 얼마큼 구체적인 과정을 걸치고 들어갔는지에 대해 보여주기 때문에, 가급적이면 와이어프레임과 IA를 함께 보여주는 것이 좋습니다.
그다음으로는 여러분들이 사용한 색상, 타이포, 앱 아이콘, 기타 아이콘 등을 한 페이지 안에서 보여주는 것이 좋습니다.
07. 간지 (도비라)
앞 수업 시간에서 말씀드렸지만 간지를 넣는 것은 선택사항입니다. 간지의 역할은 시각적 피로도를 감소시켜 주기 위해서 존재하기 때문에 여러분들의 프로젝트 플로우 흐름이 피로도에 영향을 미치지 않는다면, 선택하지 않아도 됩니다. 저는 기본적으로 포트폴리오가 피로도가 높다고 판단하여 간지 구간을 넣었습니다. 간지 내용에서는 해당 브랜드의 가치 문구 혹은 프로젝트의 목표성 문구를 넣어 휴식의 공간이지만 아이덴티티를 한 번 더 부각하기 위해 진행한 페이지로 구성을 하였습니다.
08. 디자인 산출물 (Output)
드디어 마지막이네요. 최종 시안 작업물을 보여주는 구간입니다. UX/UI 포트폴리오는 다른 디자인 포트폴리오와는 다른 점이 하나 있다면, 제작한 페이지의 수가 길거나 많다는 것입니다. 하나의 작업물만 보여주는 브랜드, 패키지, 캐릭터가 아닌 각각의 페이지마다의 작업물을 보여줘야 하기 때문에 다른 점이라고 볼 수 있습니다. 저의 경우에는 해당 페이지의 기능과 어떤 디자인적 표현을 하였는지 간단명료하게 적어내었고, 각각의 인터페이스 페이지 크기를 조금씩 조절하여 시선을 사로잡도록 하였습니다.
제 포트폴리오 예시를 들고 여러분들과 함께 UX/UI 디자인 포트폴리오에 대해서 알아보았습니다. 어떤 생각을 많이 하시게 되었을까요? 저 또한, 아직 많이 부족하고 배워 나가야 하는 디자이너이지만 여러분들과 함께 공부하면서 새로운 배움을 얻을 수 있는 시간이 되었습니다. ㅎㅎ
다음 시간에는 디자인 포트폴리오 목차 설정하는 방법에 대해서 다뤄보려고 합니다.
가장 중요한 마지막 단계이니까 끝까지 포기하지 말고 같이 만들어보아요 감사합니다.
