Portfolio_001. 2017년 전문가다운 웹 및 앱 디자인 포트폴리오 제작 방법

2017년 전문가다운 웹 및 앱 디자인 포트폴리오 제작 방법

3월 8, 2017 /디자인 / Adobe Korea

잘 구성된 포트폴리오는 디자이너의 가장 좋은 친구라고 합니다.

이러한 이유에서 포트폴리오 제작은 대부분의 신입 디자이너들이 반드시 해야 할 일의 목록 중 가장 높은 순위에 있습니다. 따라서 디자이너로서 신규 클라이언트를 상대로 자신이 프로젝트의 적임자라는 확신을 심어주는 데 포트폴리오가 효과적인 수단이라는 생각에 공감하지 않을 수 없습니다.

그러나 여기에도 문제는 있습니다.

모든 형태의 포트폴리오가 똑같이 효과적인 것은 아닙니다. 최악의 경우 일부 포트폴리오는 일자리를 얻게 하기 보다 오히려 직업을 잃는 역효과를 낼 수도 있습니다.

문제의 원인은 디테일에 있다고 합니다. 지금부터 디테일에 대해 자세히 살펴보고 클라이언트에게 강한 인상을 주고 문으로 들어서자마자 전문가처럼 보이도록 만들어줄 2017년 웹 디자인 포트폴리오 제작법을 살펴보겠습니다.

시작하며…

 

웹 디자인 포트폴리오의 주요 목표

 

실제적인 두 가지 목표:

• 다른 사람에게는 없는 자신만의 독창성을 부각하는 작품을 제시할 것
• 성과를 제공할 수 있는 바람직한 근거를 제시할 것

첫 번째 목표는 매우 분명해야 합니다. 시장에는 수많은 디자이너가 배출되어 있으므로 그중에서도 눈에 띄는 것은 매우 중요한 스킬입니다. 눈에 띄게 된다면 그때부터는 자신만의 브랜드를 구축할 수 있습니다. 자신의 작업이 세상에 알려지는 것입니다. 눈에 띄지 않는다면 동종 업계에서 경쟁하는 수천 명의 다른 디자이너와 다를 바가 없습니다.

두 번째 목표인 성과를 입증하는 근거를 제시하는 것은 생각보다 훨씬 더 까다로운 일입니다.

성과를 제공할 수 있어야 하는 것의 필요성은 흔히 초보 디자이너가 깊게 생각하지 않는 부분입니다. 명확하게 언급되지 않은 사실이 있는데 여기서 의미하는 성과는 “디자인 성과”가 아니라 비즈니스 성과라는 점입니다.

사이트가 예쁘게 보여도 결과적으로 클라이언트가 원하는 것은 “예쁜 사이트”가 아닙니다. 클라이언트가 정말로 원하는 것은 웹 사이트가 특정 비즈니스 목표를 달성하고 웹 사이트가 없을 때보다 성공적인 비즈니스를 수행하는 데 도움을 주는 디자인입니다.

이는 최종 웹 사이트의 시각적인 매력을 넘어 완전히 다른 측면에 초점이 맞춰진 웹 사이트의 수익성에 관한 것이기 때문에 매우 중요합니다. 2017년에 특히 이러한 중요성이 사실로 부각되고 있습니다. e커머스 웹 사이트와 다른 상업용 웹 사이트 프로젝트가 증가함에 따라 성공적으로 수행되는 웹 사이트 디자인의 핵심 기능들 가운데 브랜드의 수익 잠재력이 존재하기 때문입니다.

그렇다면 어떻게 이 모든 사항까지 계산하여 클라이언트에게 자신이 이러한 비즈니스 성과를 제공할 수 있다는 확신을 심어줄 포트폴리오를 제작할 수 있을까요?

 

독창성 부각

 

포트폴리오 웹 사이트를 구축할 때 기술적인 관점에서 따라야 하는 불변의 법칙이란 없습니다. 무엇을 하든지 상관없습니다. 독창적으로 표현하십시오. 자신만의 특별한 작품을 만드십시오.

결국 포트폴리오 사이트가 독창적일수록 그 효과 또한 커집니다.

핵심은 포트폴리오로 적합하지 않는 레이아웃, 디자인 유형, 그래픽 콘셉트 또는 웹 사이트 구조는 없다는 것입니다. 효과적으로 포트폴리오를 소개하고 서비스를 제시하며 자신이 적임자임을 클라이언트에게 강하게 어필하기만 하면 무엇이든지 가능하다는 것입니다.

실례로, 비핸스(Behance)에서 인기 있는 사용자 프로필을 살펴보십시오. 해당 링크를 따라 웹 사이트를 방문하면 많은 부분에서 다른 점을 발견할 수 있습니다.

다음은 두 가지 훌륭한 예시입니다.

• 다양한 디바이스에서 사용 중인 웹 사이트 – 루카즈 드롯츠(Lukasz Drozdz) 작품

• 프로젝트를 보여주는 전체 랜딩 페이지 – 아코스 폴가르디(Akos Polgardi) 작품

 

보이는 것에 집중하지 말고 사례 연구로 생각할 것

 

클라이언트에게 필요한 것은 예술 작품이 아니라 솔루션입니다.

구축한 웹 사이트의 시각적인 부분만을 과시해서는 안 되며 여타의 설명을 제공하지 않는 것도 안 됩니다. 현실 속의 클라이언트는 크게 관심을 가지지 않을 것입니다.

포트폴리오에 있는 각 프로젝트에는 해당 목표를 서술하는 설명이 있어야 함은 물론이고 프로세스의 처음부터 끝까지 모든 단계에 대한 설명도 필요합니다.

그렇습니다. 안타깝게도 이는 글쓰기 작업이 필요하다는 것을 의미합니다. 그러나 이 유형의 글쓰기는 투자 대비 수익이 아주 좋은 글쓰기라고 할 수 있습니다.

프로젝트에 대한 훌륭한 설명은 미래의 클라이언트가 포트폴리오에 들어 있는 각 프로젝트의 목표를 이해하는 데 도움이 됩니다. 이러한 설명을 통해 웹 사이트의 첫인상 외에도 기본적으로 프로젝트를 선택하게 된 구체적인 이유까지 이해할 수 있습니다.

디자이너의 전문 역량을 선보일 수 있는 기회일 뿐만 아니라 클라이언트에게 붓을 든 일개 디자이너가 아니라 문제 해결 능력까지 겸비한 인재임을 알릴 수 있게 됩니다.

다음은 WebsiteSetup.org의 로버트 메닝(Robert Mening)이 웹 디자인 분야의 지원자를 평가하는 방법에 대해 언급한 것입니다.

“지원자의 이전 작업을 살펴보는 것이 핵심입니다. 그리고 이때 스크린샷이나 간단한 데모를 확인하는 것만이 아니라 디자이너가 특정 문제를 해결하고 솔루션을 제공할 수 있는지를 알아보는 것입니다. 디자이너의 포트폴리오에서 이러한 흔적을 발견할 수 있다면 청신호입니다. 따라서 시각적인 부분에만 집중하기보다는 다른 가능성과 비교하여 이러한 선택을 하게 된 이유에 대한 설명을 찾으려고 합니다.”

디자이너의 워크플로우를 살펴보는 것도 중요합니다. 복잡한 디자인 프로젝트를 수행하다 보면 여러모로 신경 쓸 일이 많아지므로 지시자의 의도를 간파하고 제시된 개선안을 작업에 적용할 수 있어야 합니다. 저는 포트폴리오를 검토할 때 타당한 비즈니스상의 이유로 특정 디자인 의사 결정을 하게 되었다는 것이 명확하게 드러나는 지점을 찾으려고 노력합니다. 다시 말해 “붓을 잘 다루는” 디자이너가 아니라 비즈니스 목표를 염두에 두고 일하는 디자이너가 필요하다는 의미입니다.

요약하자면, 저는 시간제가 아닌 정규직 근무에 관심 있는 지원자를 찾고 있는데 디자이너들과 저의 비전이 모여 최종 결과물을 완성하는 하나의 팀으로서 협업할 수 있어야 하기 때문입니다.

 

다시 강조하지만 포트폴리오를 프로젝트 스냅샷이 아닌 사례 연구로 바라보십시오. 프로젝트 사례 연구를 효과적으로 제시하기 위해 필요하면 얼마든지 많은 시각 요소를 사용하되 이러한 시각 요소가 포트폴리오의 핵심이 되지 않도록 하십시오.

다음은 크리에이티브 모나키(Creative Monarchy)가 제작한 사례 연구 기반 포트폴리오의 바람직한 예시입니다.

 

다음을 기억하십시오.

 

각 개별 프로젝트를 별도로 제시할 것

 

우리는 각 포트폴리오 프로젝트를 하나의 프로젝트 스냅샷이 아니라 사례 연구 모음으로 간주하기 때문에 각 프로젝트마다 고유한 하위 페이지를 만들어 메인 포트폴리오 목록에서 연결되도록 해야 합니다.

포트폴리오 전체를 하나의 콘텐츠 묶음으로만 간주하여 한 페이지에 넣으면 개별 프로젝트에 대한 세부 정보를 효과적으로 확인할 수 없습니다.

안드레아 페드리나(Andrea Pedrina)가 제작한 포트폴리오를 예로 살펴봅시다.

메인 포트폴리오는 제목 상자를 배치한 것에 불과합니다. 그러나 이 상자를 클릭하면 세부 설명이 있는 개별 페이지가 표시되는데 이로써 사례 연구 모드로 전환됩니다. 여기서 안드레아는 해당 프로젝트의 아이디어와 과제를 설명하는데 더 많은 시간을 할애하고 있습니다.

덧붙이자면 이러한 유형의 구조를 활용하면 특정 클라이언트와 특정 사례 연구를 공유할 수도 있습니다. 예를 들어 X 유형의 프로젝트에 관심이 있는 클라이언트가 있을 경우 유사한 유형으로 이어지는 특정 포트폴리오 링크를 공유할 수 있습니다. 이는 지원자가 관련 경험을 확보하고 있다는 것을 알기 때문에 클라이언트에게 지원자와 협력하고 싶은 의지를 더 강하게 심어주게 됩니다.

 

실제 성과를 설명할 것

 

지원자 본인이 포트폴리오 프로젝트를 설명할 때는 시각적 측면이 아니라 사실과 각 프로젝트의 매개 변수에 집중해야 합니다.

다시 말해 눈으로 보여지는 재능이 아닌 성과에 대해 생각하고 설명해야 한다는 의미입니다.

다음은 포트폴리오에서 프로젝트를 검토하는 클라이언트에게 실제로 중요한 내용입니다.

• 이전 클라이언트가 지원자와 협력하여 얻은 결과. 여기에는 비즈니스 관점에서 비즈니스 목표, 성과 및 기타 중요한 결과가 포함됩니다.
• 프로젝트와 함께 제시된 데이터의 존재 여부. 여기에는 웹 사이트의 성과, 웹 사이트를 통해 생성된 매출, 이전 웹 사이트와 비교한 새 사이트의 전환율 등에 대한 실제 수치 데이터가 포함됩니다. 기본적으로 웹 사이트를 효과적인 마케팅 또는 세일즈 툴로 만들어주는 모든 것을 말합니다.
• 웹 사이트의 장기적인 성공에 핵심이 되는 UX, 전환율, 최적화, 분할 테스트, 기타 웹 사이트 성과 측정 지표에 대한 언급이 있는지의 여부입니다.

다음은 이컴디자인의 카탈린 조르지니(Catalin Zorzini)가 이에 대해 공유한 내용입니다.

“저와 함께 일하고 싶은 디자이너는 순수한 미적 요소에 치중하기보다는 심도 있게 기능성과 UX에 집중해야 합니다. 장기적인 관점에서 미적 요소는 점차 식상해질 수 있지만 UX는 어떤 상황에서도 유지되어야 하기 때문입니다.”

필수적으로 웹 디자이너의 인내심을 중시합니다. 훌륭한 UX를 만들기까지는 시간이 걸리며, 첫 시도만으로 완벽하게 만들 수 있는 것이 아닙니다. 디자이너가 포트폴리오에서 다양한 UX에 대한 모든 요소와 프로젝트의 사용성 관련 측면을 설명하는 데 상당한 관심을 기울인 흔적이 보이면 눈여겨보게 됩니다.

• 단평이 있는지의 여부. 여기에는 실제 클라이언트가 디자이너와 함께 작업한 경험을 간략하게 언급한 내용이 포함됩니다. 단평은 포트폴리오를 더욱 부각시킵니다. 단평 자체로 성공하는 것은 아니지만(즉, 포트폴리오에 다른 요소가 필요해짐) 새로운 클라이언트가 마음을 정하는 데 단평이 결정적인 최후의 요소가 될 수 있습니다.

앞서 언급한 크리에이티브 모나키의 경우 유효적절한 단평 프레젠테이션을 제공하고 있습니다.

다음과 같은 단평 구성을 고려해 보십시오.

• 실제 단평 제공자를 입증하는 사진
• 단평 제공자의 이름과 직위
• “홍길동은 훌륭한 디자이너입니다”와 같이 일반적인 서술이 아닌 함께 작업한 구체적인 측면을 중점적으로 부각한 사실에 기반한 텍스트

 

모든 것을 보여주지 말 것

 

지금까지 제작한 모든 프로젝트를 포트폴리오에 담을 필요는 없습니다.

최고의 프로젝트 또는 가장 흥미로운 프로젝트를 선택합니다.

최고의 프로젝트는 쉽게 구분할 수 있습니다. 아마도 클라이언트의 비즈니스나 삶을 바꾼 프로젝트이거나 비즈니스 성장에 기여했거나 누군가의 매출액을 몇 배로 올려준 프로젝트일 것입니다.

이러한 프로젝트에 대해 자세히 설명해야 합니다. 프로젝트가 성공할 수 있었던 모든 요소를 설명합니다. 이해하기 쉬우면서도 독자, 즉 잠재 클라이언트도 유사한 성과를 기대할 수 있다는 확신을 심어주도록 설명하십시오.

포트폴리오에 반드시 가장 흥미로운 프로젝트로 포함시켜야 할 다른 프로젝트 유형은 어떤 프로젝트가 이 범주에 속하는지 판단하기에 조금 더 어려울 수 있습니다. 반드시 대대적인 성공을 거둔 프로젝트이거나 가장 많은 찬사를 받은 프로젝트가 아닐 수도 있기 때문입니다. 새로운 클라이언트가 개인적으로도 쉽게 감동받을 수 있는 무엇인가를 담고 있는 프로젝트가 해당될 수 있습니다.

예를 들어 매출이 하락하는 비즈니스를 구할 목적이었지만 실행으로 이어지지 못한 프로젝트에 대해 이야기하십시오. 새로운 전략에 따라 어떤 역할을 했는지 이야기할 수도 있습니다(직접 겪은 경험이 있는 경우). 이때 초점은 자신이 만든 최종 웹 사이트가 아니라 프로세스 자체에 두어야 합니다.

또는 X라는 특정한 대의명분으로 사회적 인식을 높이기 위해 비영리 목적으로 수행한 프로젝트에 대해 이야기하십시오. Y라는 특정 인물과의 만남, X라는 명분에 대해 공유되어야 할 메시지를 제시한 사실 등을 이야기합니다.

일반적인 비즈니스 상황에서는 비영리 프로젝트에 대한 비중을 크게 할애하지 않아도 됩니다. 이러한 프로젝트가 부나 명예를 수반하는 것은 아니지만 포트폴리오에 포함되어 있다는 사실만으로도 디자이너의 인간적인 측면을 부각시킬 수 있고 상대로부터 작품에 대한 궁금증을 자아낼 수 있습니다.

 

최근 프로젝트를 포함할 것

 

포트폴리오는 최근 프로젝트를 많이 포함할수록 훌륭합니다. 다시 말해 5년 전 수행한 프로젝트는 별로 도움이 되지 않습니다.

운동 경기와 마찬가지로 최근 성적이 중요합니다. 작년 시즌에 친 홈런 개수를 신경 쓰는 사람은 없기 때문입니다.

따라서 포트폴리오에 최근 작품이 실리도록 업데이트하고 항상 새롭고 흥미로운 프로젝트를 추가하도록 노력해야 합니다.

또한 프로젝트 설명 맨 위에 프로젝트의 제작 날짜를 표시하십시오. 클라이언트는 디자이너가 현재 활동 중인지, 꾸준하게 새롭고 흥미로운 프로젝트를 추구하고 있는지 알아야 합니다.

 

액세스가 쉽고 한눈에 파악되게 할 것

 

가장 명백한 문제부터 다뤄봅시다. 실제로 이는 매우 중요합니다.

포트폴리오 제작에 어떤 방법을 선택하든지 최종 결과물은 모든 디바이스, 모든 화면과 브라우저에서 액세스하고 쉽게 한눈에 파악할 수 있는 것이어야 합니다.

처음에는 당연한 이야기로 들려서 이를 언급할 필요조차 없다고 생각할 수 있습니다. 그러나 이 점을 강조하는 이유는 잘못하면 거래를 망치는 심각한 요인이 될 수도 있기 때문입니다.

신발 제조업자가 형편없는 신발을 신고 거리를 활보할 수 없듯이, 웹 디자이너는 어떤 형태로든 자신의 웹 사이트에 결점을 남기면 안 됩니다. 요약하자면 잠재 클라이언트가 포트폴리오 사이트에서 이상한 점을 발견하면 결정은 이미 물 건너간 것입니다. 신빙성을 잃게 됩니다.

따라서 언제나 진정으로 사용자 친화적인 포트폴리오 사이트를 구축할 수 있는 최상의 툴만을 사용해야 합니다.

이러한 툴을 이미 확보하고 있다면 별문제 없습니다. 툴을 사용해 제작에 매진하십시오. 그렇지 않은 경우라면 누구에게나 친숙한 어도비 포트폴리오(Adobe Porfolio)를 고려해 보십시오. 코딩 없이도 신속하게 포트폴리오를 제작할 수 있으므로 소스 코드 등으로 인한 서버 비호환성 문제를 우려하지 않아도 됩니다. 간편하게 해결됩니다. 또한 사용할 수 있는 레이아웃이나 룩에 제한이 없습니다.

또한 한눈에 파악하기 쉬운 포트폴리오를 제작하는 과정에서 포트폴리오에서 사용하는 언어 표현을 염두에 두어야 합니다.

전문가처럼 유식하게 보이기 위해 노력하지 마십시오. 대신 친근하고 자연스럽게 사람들에게 감명을 주기 위해 노력하십시오. 사람들이 포트폴리오를 접할 때 기분이 좋아지고 디자이너에 대해 좀 더 알고 싶게 만들어야 합니다. 너무 형식적인 어조로 자신의 벽을 만들지 마십시오. 디자이너는 월스트리트에서 일하는 사람이 아니기 때문입니다.

결국 포트폴리오를 열람하는 사람들을 친구로 생각한다면 그만큼의 가치를 얻을 수 있을 것입니다. 자신의 작업에 대해 이야기하는 방식을 통해 사람들을 편안하게 만드는 것은 훌륭한 시작점이 될 뿐만 아니라 잠재 클라이언트가 디자이너에게 훨씬 쉽게 접근할 수 있게 만듭니다.

 

 

 

디자인. 프로토타입. 공유. 모두가 가능한 하나의 올인원 앱 Adobe XD.

웹사이트 및 모바일 앱을 디자인하고  프로토타이핑하고 공유할 수 있는 최초의 올인원 툴인 Experience Design CC(베타)를 사용하면 아이디어 구상에서 프로토타이핑에 이르는 과정을 신속하게 진행할 수 있습니다. 베타 버전을 테스트해 보시고, 여러분의 피드백을 공유해 주십시오.  다운로드 받기 

 

 

 

 

 

저자: 캐롤 케이

캐롤 케이(Karol K.)(@carlosinho)는 블로거 겸 라이터, 출판 작가로도 활동하고 있으며 NewInternetOrder.com의 창립자입니다.

 

자료 출처 : 

https://blogs.adobe.com/creativedialogue/ko/design-ko/how-to-create-your-2017-ready-web-design-portfolio/