한빛미디어

 

디자이너에게 포트폴리오란, 바로 밑그림을 그리는 시작점이자 그림을 완성하기 위해 계속해서 채워나가야 하는 채색과 같은 것이다.

UI/UX 디자인, 일러스트레이션, BX 디자인 포트폴리오 만들기

​

목차

Part 1. 나를 알리는 포트폴리오

Part 2. UX/UI 디자이너 포트폴리오 전략

Part 3. 일러스트레이터 포트폴리오 전략

Part 4. BX 디자이너 포트폴리오 전략

​

Part 1. 나를 알리는 포트폴리오

포트폴리오란? 현재 자신의 경쟁력을 한눈에 파악할 수 있는 유용한 도구입니다. 포트폴리오를 통해서 현재까지의 작업물을 정리할 뿐 아니라 자신의 주력 분야와 작업의 퀄리티도 확인할 수 있습니다.

​

포트폴리오 제작시 주의사항

첫 번째, 왜 보여주는가

두 번째, 누구에게 보여주는가

세 번째, 무엇을 보여주는가

​

좋은 포트폴리오란? 여러가지 의미가 있으며, 취업을 위한 일차적인 목적에서는 회사나 인사담당자에게 어필할 수 있는 포트폴리오가 좋은 포트폴리오입니다. 만약 목적이 확실하다면 그에 따라 맞춤형 포트폴리오를 제작할 필요도 있습니다.

​

디자이너라면 대중성을 추구해야 하지만 여러분만의 정체성, 즉 세계관과 개성도 있어야 합니다. 대표적인 분야가 일러스트레이션이라고 할 수 있습니다.

보기 편한 포트폴리오를 만들려면 단순히 텍스트와 레이아웃만 신경써서는 안됩니다. 텍스트를 읽지 않더라도 무엇을 보여주고자 하는지 한눈에 파악이 가능해야 합니다. 보는 이의 시각적인 피로함을 덜어주고, 일정한 규칙을 통해 정보의 흐름이 쉽게 파악되어야 합니다. 일반적으로 사람은 텍스트보다는 이미지를 먼저 확안하고, 이후에 필요에 따라 텍스트를 읽습니다. 깔끔한 이미지를 사용하고, 과도한 컬러를 사용하여 눈을 피곤하게 맏드는 것을 지양합니다.

​

맞춤형 포트폴리오란? 여러분이 지원하려는 회사나 클라이언트의 특성을 충분히 반영한 포트폴리오입니다. 디자인 회사마다 고유한 연출과 레이아잇이 있습니다. 또한 그 회사의 아이덴티티르 반영한 포인트 컬러, 폰트를 쓸 수도 있습니다.

​

Part 2. UX/UI 디자이너 포트폴리오 전략​

포트폴리의 정의

Who? 내가

When? 정한 시간 안에

Where? 나만의 세상에서

What? 내가 만든 결과물을

How? 잘 정리해서

Why? 서류 전형에 합격하기 위해 제출하는 자료

트폴리오를 만들려면 클라이언트가 필요하며, 이를 위해 가상의 클라이언트를 상대로 리뉴얼 디자인을 하는 것이 효과적입니다. 포트폴리오에 들어갈 작품의 수는 신입은 2~3개, 경력자는 연차의 개수만큼이 적당합니다. 포트폴리오로 사용할 작품이 많다고 하더라도 잘 만든 작품들 위주로 보여줘야 합니다.

​

브랜딩 디자인

어떤 브랜드나 기업의 가치를 상승시켜, 고객들이 해당 브랜드에 대한 상징체계와 신뢰도를 형상할 수 있도록 하는 일종의 사전 마케팅 전략입니다. 그렇기에 디자인의 본질적 기능 중 하나인 컨셉트 디자인 능력이 가장 중요합니다. 디자인 목표를 하나의 컨셉트에만 집중하는 전략입니다.

​

이커머스 디자인

이커머스는 온라인에서 상품이나 무형의 서비스를 사고파는 것을 뜻하며, 이커머스 디자인은 브랜딩 디자인과 함께 UI 디자인 능력이 많이 요구됩니다. 쇼핑몰 UI에 대한 학습 및 연구도 필요하며 난이도가 높은 디자인입니다.

​

모바일 디자인

모던 웹에서는 유저들이 PC보다 주로 모바일에서 컨텐츠를 소비하기 때문에, 인사담당자는 모바일 디자인 능력을 매우 중요하게 생각합니다. 모바일 디자인 기술 중 하나는 반응형 웹 디자인입니다. PC와 모바일에서 화면이 어떻게 변경되는지, 컨텐츠는 어떻게 변하는지 등을 고려한 디자인이 필요합니다.

​

앱 디자인

네이티브 앱이란 웹 브라우저로 보는 사이트가 아니라 애플리케이션 스토어에서 설치하여 사용하는 앱을 말합니다. 네이티브앱은 백엔드 언어로 코딩하기 때문에 디자이너가 코딩까지 하는것이 사실상 어렵습니다. 그렇기 때문에 비주얼 디스플레이 디자인이 중요합니다. 특히 와이어프레임, UI 가이드, 목업 시뮬레이션 등 다양한 전략이 필요합니다.

​

멤버십 UI 디자인

회원가입, 수정, 탈퇴 등 멤버십과 관련된 UI 디자인으로 실제 가장 중요한 파트입니다. 특히 디자인 과정에서 UI Flow에 대한 심도 깊은 연구가 필요합니다.

​

포스팅 UI 디자인

웹사이트에서 텍스트 및 멀티미디어 데이터를 전송, 등록, 수정하는 포스팅과 관련된 UI 입니다. 대표적으로 Q&A, FAQ, BOARD 등이 있습니다.

​

개선 전략 세우기

타킷, 제작 전략, 스타일 등을 고려하여 습작을 만들었다면 이제는 습작을 개선해야 할 차례입니다. 처음 만든 습작은 미흡한 부분이 많기 때문입니다.

문제는 ‘무엇을 어떻게 개선해야 하는가?’ 입니다. 크게는 두가지 기준이 있습니다. 첫 번째로 디자인 기본기를 잘 드러내는 것, 두 번째로 모던 웹의 흐름을 반영하는 것입니다. 두 가지 기준으로 개선합니다. 디자인 기본기를 개선하기 위해서는 콘셉트만 강조하고 나머지 기본적인 원칙을 무시한 부분이 없는지 체크해야 합니다. 두 번째, 모던 웹의 흐름을 반영하기 위해서는 벤치마킹이 중요합니다. 충분한 벤치마킹과 레퍼런스 없이 자신의 취향대로만 작업한다면 디자이너의 개성은 잘 드러낼 수 있으나, 실무형 디자인을 선호하는 기업의 입장에서는 선택하기 어려운 포트폴리오 입니다.

​

디자인 기본기 학습전략

UI 디자인은 예술과 공학이 공존하는 영역이기 때문에, 디자인 기본기, UI/UX 이론, 화면 설계, 그래픽 툴, 코딩, 웹 표준, 웹 접근성, 프론트엔드 개발, 웹 기획 등을 공부해야 합니다. 이 모든 내용을 학습하는 것이 현실적으로 의문이지만 필요합니다.

​

소규모 프로젝트를 하나 정해서 내가 필요한 내용 위주의 공부를 하여, 필요한 지식을 습득하는 것이 가장 기억에 남습니다. 배운 기술을 바로 써먹지 않으면 바로 잊어버리기 때문에 프로젝트에 바로 적용해보는 것이 좋습니다.

​

디자인 기본기 구성요소

디자인 기본기는 글자를 잘 쓰는 능력, 공간에 대한 이해, 색채에 대한 관점, 타인의 감정에 대한 통솔력 등이 있습니다. 글자를 잘 쓰는 능력은 디자인의 시작이자 끝이라고 할 수 있습니다. 상업 디자인에서 글자는 매우 중요한 요소이기 때문입니다. 글 쓰는 능력이 부족하다면 좋은 디자인을 완성하는 것은 불가능합니다. 이외에도 공간, 색체, 타인의 감정등도 중요한 디자인 기본기입니다.

​

벤치마킹 디자인 기법 제안

일반적인 벤치마킹 디자인 방법

첫 번째, 레퍼런스를 감상하고 참고할 만한 포인트를 분석하고 이를 토대로 디자인합니다.

두 번째, 작업 화면 앞에 레퍼런스를 띄워 두고 보면서 따라합니다.

세 번째, 레퍼런스를 그래픽 툴 캔버스 아래에 깔아두고 픽셀 하나 컬러 하나까지 똑깥이 따라합니다.

​

효과적인 벤치마킹을 위한 과정

레퍼런스 서칭 - 모작 - 장점 연구 - 개선 아이디어 도출 - 디자인 개선

디자인 벤치마킹은 레퍼런스 모작에서 시작해야 합니다. 모작 후에 레퍼런스의 장점은 연구합니다. 그리고 나의 생각을 담아 디자인을 개선합니다. 즉, 벤치마킹 디자인은 모작에서 시작해서 개선으로 끝납니다.

벤치마킹과 표절의 차이점은 시간의 차이에서 발생합니다. 벤치마킹을 할 때는 일단 똑같이 모작을 해야 합니다. 그런데 여기서 그대로 멈추면 표절이 됩니다. 모작을 통한 학습을 한 다음 거기서 멈추지 않고 나만의 방법으로 재해석하여 개선하면 그것은 훌륭한 벤치마킹이 됩니다.

​

UI/UX 디자인의 원칙

UI/UX 디자이너의 가장 중요한 역량은 냉철한 논리적 사고와 따뜻한 마음입니다. 유저의 행동 패턴을 이해하기 위해 노력하고 유저가 사용하는 데 불편함이 없는지 살펴보아야 합니다. 또한 논리적으로 판단하여 화면을 설계하고 기능성을 높여야 합니다.

​

예상 가능한 UI

일관적인 UI

단순한 UI

직관적인 UI

유저의 익숙함을 존중하는 UI

유저의 실수에 관대한 UI

유저의 의식 수준과 발걸음을 같이하는 UI

똑 부러지게 반응하는 UI

목적이 분명한 UI

심미적 디자인은 훌륭한 UI를 위한 도구

딱 필요한 만큼의 반응

안전 장치를 제공하는 UI

타킷층을 고려하는 UI

피드백을 경청하는 태도

데이터 분석을 통한 UI/UX

3-클릭-룰

모바일 온리

출구가 명확한 UI

​

디자인 레퍼런스 베스트

Pinterest (https://www.pinterest.co.kr/)

Behance (https://www.behance.net/)

Good Web Design (https://www.gdweb.co.kr/main/)

DB CUT (https://www.dbcut.com/)

Awwwards (https://www.awwwards.com/)

Mobbin (https://mobbin.com/)

Dribble (https://dribbble.com/)

​

코딩 레퍼런스 베스트

bXSlider (https://bxslider.com/)

slick (http://kenwheeler.github.io/slick/)

jQuery UI (https://jqueryui.com/)

HtmlDrive (http://www.htmldrive.net/)

Google Fonts (https://fonts.google.com/)

Open Tutorials (https://opentutorials.org/)

TCP School (http://www.tcpschool.com/)

Code Pen (https://codepen.io/)

Coverr (https://coverr.co/)

Html Color Codes (https://htmlcolorcodes.com/)

한글입숨 (http://hangul.thefron.me/)

Unsplash (https://unsplash.com/ko)

Cool Symbol (https://coolsymbol.com/)

Lipsum (https://www.lipsum.com/)

Font Awesome (https://fontawesome.com/)

W3 Schools (https://www.w3schools.com/)

​

Part 3. 일러스트레이터 포트폴리오 전략

일러스트레이션 분야로는 출판, 광고, 에디토리얼 등이 있습니다.

​

출판 일러스트레이션

일반적으로 책의 표지 및 본문에 들어가는 그림 등을 모두 일컬으며, 여러 종류의 일러스트레이션 중 작가의 상상력과 아이디어를 가장 많이 발휘할 수 있는 분야입니다. 일러스트레이션은 책 판매에 있어 중요한 역할을 하기 때문에 출판사 입장에서는 독자들의 눈에 띄는 일러스트레이션을 선호합니다. 출판사가 어떤 스타일의 일러스트레이션을 선호하는지 파악하는 것도 중요합니다.

​

광고 일러스트레이션

광고 회사 일러스트레이션은 소비자를 대상으로 상품 혹은 서비스를 판매하기 위해 사용하는 그림입니다. 우리 주위에서 볼 수 있는 신문 광고, 브로셔, 포스터 등이 해당됩니다. 제품의 특징과 장점을 부각하여 홍보 효과를 극대화하기 위해 제작합니다. 광고 일러스트레이션은 상업성과 작품성을 동시에 추구해야 합니다. 광고 일러스트레이션의 특성상 제품 판매를 극대화할 수 있는 상업적인 면을 무시할 수 없습니다. 그렇다고 지나치게 상업적인 면에 치중하면 광고의 품질이 떨어져 보일 수 있으므로 작품성도 고려해야 합니다.

에디토리얼 일러스트레이션

에디토리얼 일러스트레이션은 신문이나 잡지에 실리는 그림입니다. 전국에서 발행되는 신문과 잡지의 종류가 많으므로 일러스트레이터가 쉽게 접할 수 있는 분야이기도 합니다.

​

기획하기

좋은 기획은 콘셉트를 분명히 잡고, 좋은 작품을 골라 적합한 레이아웃과 구성을 고려하는 것입니다. 기획이 잘된 포트폴리오는 클라이언트의 눈길을 사로잡아 지속적으로 일할 수 있는 기회를 제공합니다. 포트폴리오에 대한 개략적인 구상이 끝났다면 구체적으로 아이디어를 가시화합니다. 자신이 전달하고자 하는 목적을 확실히 했다면, 그 목적을 어떻게 표현할 것인가를 결정합니다. 무엇인가에 대해 아이디어를 갑자기 도출하려고 하면 떠오르지 않습니다. 다양하고 체계적인 발상을 통해 아이디어를 도출해야 합니다. 우선은 키워드를 뽑고 스토리 전개와 구성, 레이아웃을 고려하여 결과물을 완성해 나가야 합니다. 포트폴리오 구성은 표지와 내지, 그리고 작품의 수를 정하는 것입니다. 자신의 전문분야 위주로 작품을 구성합니다. 다른 분야의 작품을 넣고 싶다면 클라이언트의 시선을 끌만할 완성도 높은 작품만 선별하여 최소한으로 넣는 것이 좋습니다,

​

Part 4. BX 디자이너 포트폴리오 전략

브랜드 경험(BX, Brand eXperience) 디자인이란? 브랜드를 동일하게 인식시킬 수 있는 심벌, 로고 등과 같은 시각적 이미지뿐만 아니라, 다양한 매개체를 활용한 시각, 청각, 촉각 등 공감각적인 경험을 동반하며 브랜드의 아이덴티티를 소비자에게 지속적으로 인식시키는 디자인을 말합니다. ​

타킷 정하기

브랜드 혹은 브랜드 경험 디자이너로서 포트폴리오를 제작하기에 앞서 가장 먼저 해야 할 일은 방향을 설정하는 것입니다. 브랜드와 브랜드 경험 디자이너는 크게 기업의 인하우스 디자이너, 에이전시 및 소규모 스튜디오 디자이너, 1인 디자이너로 나눌 수 있습니다. 이러한 부류 안에서 회사 타킷을 정하는 것이야말로 포트폴리오 시작 단계이며, 첫걸음입니다.

​

자료 조사

포트폴리오를 활용할 분야와 진로의 방향성을 정했다면, 이제는 포트폴리오의 내용을 효과적으로 구성하고 표현하기 위한 자료 조사가 필요합니다. 우선 자신의 프로젝트들을 파악하고 점검하기 위한 포트폴리오를 만듭니다. 그리고 디자이너로서 목표하는 분야에 지원하기 위해 무엇을 보완해야 할지를 파악합니다. 자료 조사에서는 여러 자료를 찾을 수 있는 방법과 조사한 자료에서 포트폴리오의 디테일과 성향, 트랜드 등을 파악하여 어떻게 자신의 포트폴리오에 적용할지 구상합니다.

​

표현 및 제출하기

포트폴리오를 처음 제작하거나 전공을 바꾸어 시작하는 경우라면, 그 분야에 관련된 프로젝트 경험이나 경력이 부족합니다. 그러므로 프로젝트별 프로세스를 고려하여 다양한 내용을 전달하는 포트폴리오를 만들어야 전반적으로 좋은 평가를 받습니다. 포트폴리오와 이력서, 자기소개서 등을 효과적인 방법과 형식으로 제출해야 합니다.

​

이 책은 포트폴리오에 대한 개념과 성공하기 위해 필요한 부분이 무엇인지를 현업에 있는 디자이너들이 본인들의 경험에 대해 상세하게 알려는 책입니다. 난 디자이너가 아니지만, 이런 부분에 평소 관심이 많아 이 책을 선택하여 읽어봤는데 많은 도움을 받은 거 같습니다. 향후 디자이너를 꿈꾸는 분들이라면 충분히 도움이 될거라고 생각됩니다.

​

한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다.