UX 포트폴리오에서 피해야 할 15가지 실수
UX 포트폴리오 점검하기
해당 글의 번역입니다.
주니어 디자이너가 피해야 할 글이라고 하지만 포트폴리오의 기본이 되는 내용이라고 생각해 제목에서는 주니어를 생략하였습니다. 또한 몇 가지 문장이 의역, 요약되어 있습니다.
포트폴리오는 평생 만들어야 합니다. 하지만 포트폴리오를 만들고 업데이트할 때마다 포트폴리오의 디자인, 사고에 갇히는 기분이 들어서 그럴 때마다 보고, 환기하기 위해 번역을 남깁니다.
다른 분들께서도 포트폴리오를 만들면서 자기 점검을 할 때 도움이 되었으면 좋겠습니다.
1. 유저를 잊어버린 포트폴리오
포트폴리오 사이트는 그 자체로 거대한 UX 프로젝트입니다. 사이트를 통해 들어오는 사용자가 원하는 목적과 특정 요구를 달성시킬 수 있어야 합니다. 사이트를 들어오는 사용자는 일반적으로 채용 관련인, 잠재적 외주 고객이지만 이들은 원하는 전문 분야, 경력(직무)에 따라 목표와 요구가 달라집니다.
일반적으로 들어오는 사용자의 상황에 공감하세요. 예를 들어보자면, 채용 관련인은 수 백 개의 이력서, 포트폴리오를 제한된 시간에 확인합니다. 제한된 시간과 목표를 가지고 있는 이들에게 쉽게 프로젝트를 탐색할 수 있게 하는 것은 사용자에 대한 존중과 디자이너로서의 가치를 보여주는 중요한 요소입니다.
또한, 경쟁사를 조사하세요. 해당 분야에서 다른 디자이너의 포트폴리오를 찾고 그들이 포트폴리오에서 보여준 문제 해결 방법과 강, 약점을 분석하세요.
2. 너무 많은 작업물
15개 또는 20개의 프로젝트로 채워진 포트폴리오는 일반적으로 좋지 않은 모습입니다. 포트폴리오를 보는 관련인에게 압도적일뿐만 아니라 아마도, 최고의 작업과 "그럭저럭 괜찮은" 작업을 혼합해 보여주고 있다는 의미일 수 있습니다
A portfolio is for showing only your best work.
포트폴리오는 당신의 최고의 작품만 보여주는 것입니다.
포트폴리오란 당신의 최고의 작품만을 보여주기 위한 것입니다. 각 프로젝트에 10점 만점의 점수를 매기세요. 10점 만점에 9점 미만이면 포트폴리오에서 빼내세요. 또 다른 방법으로는 "만약 포트폴리오 사이트 방문자가 한 프로젝트만 클릭했다면 그 프로젝트만 클릭해도 행복할까?"라고 묻는 것입니다.
3. 너무 적은 작업물
UX 디자인 과정 수료생들은 대부분 학문(학교 수업) 중심의 프로젝트를 3~4개씩 보유하고 있습니다. 하지만 작품이 예외적인 것이 아니라면 학생 작품만 있는 포트폴리오가 가볍게 느껴질 수 있습니다. 포트폴리오에 깊이를 더할 방법(개인 프로젝트, 프리랜서 외주, 프로보노(보수 없는 봉사) 작업을 포함하여 최대 5~6개의 프로젝트가 포함된 전문성과 깊이 있는 포트폴리오를 제공하는 것을 목표로 삼으세요.
4. 너무 많은 이야기
대부분의 경우, 매우 심층적으로 쓰인 설명은 주니어 역할에는 너무 벅찹니다. 많은 수석 디자이너들의 사이트에 몇 가지 심층적인 사례 연구(예시 : Michael Evensen의 Soundcloud Writer와 Simon Pan의 Uber와의 작업)가 있지만, 이 예시는 프로젝트의 중요성과 일치하기 때문에 효과가 있습니다.
일반적으로 설계 문제와 수행한 프로세스에 대해 필요한 정보를 전달할 때, 최소한의 단어를 사용하세요.
5. 너무 적은 이야기
포트폴리오의 프로젝트에 대한 스토리텔링을 포함하지 않고 (프로젝트 비주얼만) 끝까지 보는 게 가능합니다. 이 접근 방식의 문제는 최종 이미지만으로 프로젝트를 이해하도록 요구한다는 점입니다.
Aim for around 300-400 words of narrative for each project.
각 프로젝트별로 약 300~400단어가 사용된 서사를 목표로 하세요.
포트폴리오를 보는 사람은 여러분이 어떻게 디자인 문제를 정의하고 해결했는지, 어떤 도전을 극복했는지, 그리고 이상적으로 결과물이 비즈니스 측면에서 어떤 것이었는지, 해결책으로 이끈 단계들을 이해하기를 원합니다.
스케치, 연구 문서 및 와이어 프레임과 같은 일부 프로세스 이미지를 포함해 작업 주의에 스토리를 만드세요. 프로젝트를 진행하는 데 도움이 되는 간략하고, 유용한 설명 텍스트 구절을 추가합니다. 각 프로젝트별로 제목과 글머리 기호로 명확하게 구성된 약 300~400단어의 서사를 목표로 하세요.
6. 프로젝트 역할에 대한 명확성 결여
대부분 전문 디자인 작업은 어떤 면에선 협력적이며 프로젝트 작업의 100%를 책임질 가능성은 거의 없습니다. 프로젝트에 어떻게 기여했는지에 대해 개방적이고 투명하게 설명하세요. 나머지 팀원들과 어떻게 소통하고 협력했는지, 최종 결과에서 여러분의 기여도가 어떻게 뚜렷하게 나타나는지 설명할 있는 기회입니다.
7. 일반 이미지 사용
포트폴리오의 위험신호(Red flag)는 일반적인 사진입니다. 특히 맥북과 메모장, 커피 머그잔이 있는 깔끔한 책상, 혹은 열린 도로 같은 사진들이요.
웹사이트를 닫기 전, 사용자와 연결할 시간은 몇초 밖에 걸리지 않습니다. 첫인상이 중요하므로 영향을 줄 기회를 낭비하지 마세요. 사용하는 모든 이미지를 의미 있게 만드세요. 해당 콘텐츠가 작업 내용에 실질적인 영향을 주지 않을 경우 벽에 포스트잇 사진이 있는 걸 피하세요.
You may only have a few seconds to connect with the user before they close your website again.
웹사이트를 닫기 전, 사용자와 연결할 시간은 몇 초 밖에 걸리지 않습니다.
모형을 사용하여 포트폴리오에 깊이를 더하는 경우, 고품질 템플릿(목업)을 사용해야 합니다. 고품질 템플릿에 비용을 지불할 가치가 있습니다. 다른 디자이너와 같은 템플릿을 사용할 가능성을 줄이고, 포트폴리오를 시각적으로 통합하는 데 도움이 되는 파일을 세트로 가질 수 있습니다.
8. 너무 작은 미리 보기(썸네일) 이미지
작업은 훌륭할 수 있지만, 사용자가 작은 썸네일 이미지를 클릭하여 이동해야 한다면 보지 못할 수도 있습니다. 썸네일의 역할은 사용자가 더 많은 것을 보고 싶어 할 만큼 콘텐츠를 충분히 보여주는 것입니다. 사용할 수 없는 미리 보기 이미지는 반대의 영향을 미칠 수 있으며 사람들이 탐색하기 전에 이탈하게 만들 수 있습니다.
9. 너무 작거나 큰 미리 보기(썸네일) 이미지
한 페이지에 많은 이미지가 있으면 이미지의 해상도와 파일 크기를 올바르게 설정하는 일은 어려울 수 있습니다.
사이트에 이미지를 표시하는데 필요한 최대 크기를 설정하세요. 예를 들자면 템플릿 뷰포인트 크기가 960픽셀의 넓이라면 레티나(2x) 해상도로 저장하는 게 좋습니다. 따라서 레티나 화면에서 선명하게 보이도록 1920픽셀 너비의 이미지 파일이 필요합니다.
이미지가 레티나 해상도면 파일 크기가 매우 커지기 시작합니다. 일반적으로 이미지 크기가 1MB보다 크지 않아야 합니다. 이상적으로는 각각 500KB 미만으로 유지하세요. 다음은 고해상도에서 파일 크기를 줄이는 몇 가지 팁입니다.
1. 사진 콘텐츠가 많이 포함된 이미지에는 JPG 형식을 사용하세요.
2. JPG 형식을 사용하는 경우 품질 수준을 12에서 8, 9 또는 10으로 낮추세요. 화질이 눈에 띄지 않게 저하되지 않지만 파일 크기는 크게 줄어듭니다.
3. 평면 색상의 넓은 영역이 있는 웹 그래픽이 포함된 이미지는 PNG 형식을 사용하세요.
10. 오타 - 목업에 포함된 오타
채용 담당자와 채용 관리자는 종종 다른 자질보다 세부 사항에 주의를 기울입니다. 사이트에 오타, 서류 오류가 있거나 목업에 오류가 있다면 큰 문제가 될 수 있습니다. 작품의 세부사항에 성실하지 않다면 그들은 당신의 작업을 신뢰할 수 있을까요?
11. 상투적인 소개 문구
여러분의 이름이 무엇이고, 무엇을 하는지 간단한 진술은 괜찮습니다. 하지만 "유니콘", "닌자" 그리고 "마법사"라는 단어처럼 상투적인 단어를 포함하는 일은 피하세요.
12. 둔하고 일반적인 서체
다양하고 많은 서체는 여러분의 작품을 지루하고 일반적으로 만들 것입니다. 혹은 다양한 서체를 사용하지 않다고 해도 둔하고 일반적인 서체를 사용한다면 작품을 지루하게 만듭니다. 다음은 주의해야 할 몇 가지 사항과 대안에 대한 제안사항입니다.
Avenir/Avenir Next ➡ Nunito
Arial ➡ Open Sans, IBM Plex Sans
Heleatica/Helvetica Neue ➡ Open Sans, IBM Plex Sans
Playfair DisPlay ➡ Bodoni
Din ➡ Roboto
Futura ➡ Diadct Gothic
Gill Sans ➡ Cabin
Montserrat ➡ Metropolis
Raleway ➡ Metropolis
13. 반응이 나쁜 경험
사람들이 모두 데스크톱(PC)에서 사이트를 접속한다고 가정하지 마세요. 이동 중에도 사이트를 검토할 수 있음으로 모바일 환경에서도 간편하고 유용하게 만드세요. 한 가지 요령으로 정사각형(혹은 약간의 세로형) 이미지를 사용하는 방법이 있습니다. 이 방법은 스마트폰에서 작품을 볼 수 있는 크기를 최적화합니다.
14. 너무 복잡한 템플릿
토바이어스 반 슈나이더는 좋은 포트폴리오를 갤러리에 비유합니다. 좋은 포트폴리오(갤러리)는 작품 자체에 집중할 수 있는 중립적인 공간입니다. 현대적인 디지털 디자인은 매우 단순하고 최소한으로 유지해야 합니다.
15. 연락하기로 이어지지 않는 행동
사람들이 어떻게 했으면 좋겠나요? 연락했으면 좋겠나요? 그럼 작업을 수행할 방법을 제시하고 눈에 띄는 "연락하기" 버튼을 사용하여 시각적으로 안내하세요. 당신을 고용하는 데 관심이 있는 사람에게 한 페이지 분량의 이력서를 쉽게 다운로드할 수 있게 한다면 당신을 기억하고 연락하는 것을 훨씬 쉽게 만들어 줄 수 있습니다.
드리블, 링크드인, 전문 인스타그램 계정에 대한 링크 또한 방문객과 계속 연결되도록 도울 수 있습니다.
