1분 22초 안에 전달되는 포트폴리오 만들기
이전의 포트폴리오 웹사이트.
약 2년 전에 만들었던 포트폴리오 웹사이트는 그래픽적, 시각적인 요소에 집중했었습니다. 내가 어떤 클라이언트들과 어떤 프로젝트를 진행했었고, 결과물은 이러이러하다. 라는 부분에 집중했습니다.
왜 업데이트가 진행되어야 했을까?
가디언에서 많은 것을 배웠고, 더욱 UX를 전문적으로 다루는 디자이너가 되었다고 생각하고, 그 과정을 잘 담아내야겠다고 생각했습니다. 깔끔하면서, 이 웹사이트에 방문한 유저들이 내용에 집중할 수 있는 환경을 원했습니다.
1. 현아를 만나는 사용자 경험 디자인
평균 체류시간 1분 22초. 이 안에 무엇을 보여줄 것인가
제 웹사이트에 유입된 유저들의 평균 체류시간은 1분 22초입니다. 사실 1분이 넘는다니 상당히 오래 체류한다고 볼 수 있습니다. (가디언 아티클도 1분이 넘으면 정독했다 판단하기도 합니다) 그런데 이 1분이라는 시간은 어떨까요. 내가 나라는 사람의 다채로움을 보여주기에는 짧습니다.
어떤 나를 유저들에게 보여주고 싶은지
이 웹사이트를 방문하는 사람들은 주로 어디에서 유입이 되고, 뭘 기대하면서 들어올까요? 제 블로그를 이 웹사이트에서 읽고자 방문하지는 않겠죠. 제가 링크를 걸어놓고 싶은 곳에 걸어놓을 것이고, 그곳에서 유입이 되겠죠. 저는 이 웹사이트가 나라는 사람을 더 알아갈 수 있는 공간이 되면 참 좋겠다고 생각하지만, 사실 실제로 이루고자 하는 목적은 취업입니다. 나와 잘 맞는 회사에서 나와 같은 사람을 필요로 하고, 나를 알아봐주었으면 좋겠죠. 나라는 사람을 여러 방향으로 어필할 수도 있겠습니다만, 그건 유입된 유저들이 시간이 많고 오롯이 나라는 사람에게 집중할 때의 이야기입니다.
한 사람이 오롯이 디자이너일 수는 없습니다. ‘나’는 스스로를 평가하기에 참 다양한 색을 가지고 있고, 모든 것을 보여주지 못함이 아쉽습니다. 어떤 제품도 실제로 그럴 수 있습니다. 우리 제품은 이것도 하고, 저것도 하고, 저것도 정말 잘 하는데 이 모든 걸 알려줄 수가 없어서 슬플 뿐입니다. 유저들은 이것도 저것도 잘 모르겠고 머리에 박히는 한가지 메시지, 키워드만을 기억할 수 있습니다. 세상에 기억해야 할 것들은 많고 어떤 곳에 유입이 되었을 때 그곳에 대한 인상은 바로 정의되던지, 혹은 정의가 되지 않던지. 둘 중 하나입니다. 그러니 모든 것을 다 보여주고 이도 저도 아닌 프로덕트가 되던지, 아니면 아쉽더라도 가지치기를 하고 집중해서 보여주어야 할 것만을 보여주던지, 선택을 해야 합니다.
그래서 간략하게 정의했습니다.
이 웹사이트에 유입이 되는 유저들 중, 실제로 컨버젼이 일어날 수 있는 유저는 바로 내가 이력서를 보냈거나 / 구직 웹사이트의 프로필에 걸어놓은 링크를 통해서 유입이 되는 사람들입니다. 그 분들의 경우, 목적이 명확합니다. 나라는 사람을 찾기 전에 UI/UX 디자이너인 사람을 찾고 있겠죠. 내가 내 스스로가 얼마나 매력적이던 간에, 나는 UI/UX 디자이너이며, 당신이 찾고 있는 사람이 맞다는 것을 이 웹사이트는 증명해야 합니다.
그들이 보고싶은 것은 아래와 같을 것입니다:
(필수) 요점만을 간단하게 짚고 넘어가고 싶습니다. 어떤 프로젝트를 했네? 이런 결과가 있었네? 오케이. 내가 찾는 그 디자이너가 맞네.
(선택) 위의 조건이 충족되었으니, 좋은 디자이너인지 궁금하네.
저는 당연히 1번의 목적도 충분히 충족시켜 주기를 원하지만, 2번도 가능하면 필수적인 요소로 노출되어 1분 22초 후에 이탈이 일어날 때 ‘UX적으로 풀어나갈 줄 아는, 일 잘하는 디자이너네’ 정도의 key takeaway 를 들려 보내고 싶습니다.
웹사이트의 목표는 취업이지만 실제로 취업 자체는 최상단에서 발생하는 마지막 이벤트입니다. 왜냐하면 제 몸은 일단 하나이기 때문이고(?) 아무리 좋고 멋진 곳에서 많은 오퍼가 와 봤자 한 곳 밖에 선택을 할 수 없기 때문입니다. 마찬가지로, 웹사이트와 이력서를 확인한 결과, 그들이 찾고 있는 인재상과 맞지 않는다고 판단할 수 있습니다. 그래서 그냥 아~오케이~ 하고 돌아서 나갈 수 있습니다. 하지만 그런 모든 사람들을 포함해서 제가 손에 들려 보내드리고 싶은 메시지는 바로 이것입니다. 아, 현아라는 사람은 좋은 UI/UX 디자이너구나. 라는 것.
이러한 경험을 주어야겠다 생각하고 웹사이트를 제작했습니다.
2. 기획, 설계, 개발, 구현, 배포
목표한 경험을 위한 구조 설계
원페이지의 구조로 가지고 가는 것으로 정했습니다. 버거 메뉴는 빼고 핵심에 집중하는 것이 가장 좋다고 생각했습니다. 프로젝트를 보여주는 페이지는 메인페이지이며, Work 메뉴로 들어가 다시 같은 페이지를 보여줄 필요성을 느끼지 못했습니다. 마찬가지로 About 또한 최상단에 간략하게 설명이 들어가면 되는 정도라, 페이지를 따로 빼서 유저의 추가 클릭을 요청할 이유는 없다고 판단했습니다. 메뉴에 대한 더 자세한 이야기는 브런치의 이 글↗︎에서 보실 수 있습니다.
함께 일했던 사람들이 정성스럽게 적어준 ‘리뷰’
어떤 제품을 구입하고자 할때 우리는 상세설명을 읽기도 하지만 실제 ‘후기’가 가장 궁금합니다. 상세설명은 판매자가 구매자에게 들려주고 싶은 이야기이고, 리뷰는 구매자가 구매자에게 들려주는 이야기입니다. 어떻게 보면 너무나 당연한 부분인데 왜 포트폴리오 웹사이트에는 이러한 ‘리뷰’ 항목이 들어가지 않을까? 생각했습니다.
함께 일했던 여러 직군의 동료들이 따뜻한 말을 남겨 주었고, 이 글들은 내가 나에 대해 장황하게 설명하는 것보다 더욱 강력한 한마디들입니다. 자랑스럽게 게시했습니다.
이력서…어딨죠? 여기 있습니다. 포트폴리오는요? 여기 있습니다.
이력서 따로, 포트폴리오 따로이지만 사실 두 개는 결국 하나의 묶음이며, 따로 떨어질 수 없다고 생각했습니다. 이력서가 곧 포트폴리오가 될 수 있고, 포트폴리오가 곧 이력서가 될 수 있습니다. 하지만 어떠한 이유이던지간에 두 가지는 따로 전달될 가능성이 있습니다. 그렇기 때문에 두 가지를 반드시 긴밀하게 연결해야 했습니다.
이력서 안에는 포트폴리오 링크로 연결될 수 있는 하이퍼링크, QR코드 등이 삽입되어 있고, 포트폴리오 웹사이트 안에도 이력서를 절대 놓치지 못하게끔 많은 곳에 버튼 형식으로, 혹은 그렇지 않은 형식으로 자리잡고 있습니다.
All clicks and taps matters
유저들이 혹시나? 싶어서 클릭하거나, 마우스를 위에 올려보거나, 탭을 할 수 있습니다. 그건 직관적인 행동입니다. 여기에 이런 게 있나? 생각했다면 그곳에 그것을 제공해야겠다고 생각했습니다.
물론 제공한다고 해서 모두가 그것을 사용하지는 않겠지만, 내가 예측할 수 있는 모든 경우의 수를, 내가 대응이 가능한 선에서는 모두 대응해야겠다 판단했습니다. 이유는 최상의 경험을 제공해 주고 싶기 때문이고, 결국 메시지를 전달하는 데에 이바지할 것이기 때문입니다. ‘좋은 UI/UX 디자이너구나’ 라는 메시지입니다.
혹시 소개 페이지에서 저를 클릭해 보셨나요?대응 그 첫번째. 메인 페이지에서 움직이는 모든 것
움직이는 모든 것들은 보는 유저에게 어떠한 자극을 전달해 주고 시선을 자연스럽게 집중시킵니다. 제한된 화면 안에서 유저들은 그 곳을 응시하게 됩니다. 이 응시는 무엇으로 이어질까요? ‘접촉’ 입니다.
그래서 메인 홈페이지에서 움직이는 모든 것은 반응합니다. 링크를 넣고, 유저가 이동할 수 있도록 만드는 것은 어렵지 않습니다. 제가 아쉬운 것은, 유저들이 접촉을 시도하는 그 찰나를 놓치는 것입니다.
대응 두번째. 프로젝트 안에서의 이동 방법
상단에는 프로젝트에서 어떤 내용을 다루는지에 대한 요약과 동시에, 궁금한 부분으로 바로 이동할 수 있습니다. 물론 스크롤을 내려서 처음부터 읽어내려갈 수도 있습니다. 빠른 스캔은 1분 22초 안에 반드시 이루어져야 하는 작업입니다. 더 고도화된 방법을 사용할 수도 있겠지만 제가 제공할 수 있는 수준에서 가장 최상의, 그리고 효율적인 방법으로 목적달성을 도왔습니다.
아까 그게 뭐였지? 위로 다시 이동하고 싶은데…
유저테스팅에서 알게 된 사실입니다. IOS에서 기본으로 제공해 주는 상단 더블탭 제스쳐가 있지만, 이 기본 기능을 모두가 알 수는 없을 수 있고, 안드로이드에서도 마찬가지일 수 있다는 결론이 나왔습니다. 최상단으로 이동하고자 할 때 제한된 화면을 방해하지 않으면서도, 필요할 때, 화면에서 찾고자 할 때 그 자리에 놓여져 있는 버튼이 고마울 수 있겠다는 판단을 내렸습니다. 이 브런치 글↗︎에서 이 기능과 버튼에 대한 고민에 대한 이야기를 읽어보실 수 있습니다.
마찬가지로, 최상단으로 돌아가고 싶은데 최상단 이동 버튼이 보이지 않는다면 어떻게 할까요? 혹시나 하는 마음으로 이곳으로 나를 이동시켰던 제목을 다시 클릭해보지 않을까? 생각했습니다. 이 부분 또한 놓치지 않았습니다.
‘읽는 경험’ 계속하시겠어요?
유저가 스크롤을 90% 이상 내리면 완독했다고 판단할 수 있습니다. 상단에서 마지막으로 바로 이동을 했던 그렇지 않던 간에, 이 유저는 끝을 보았고, 지금 하는 경험을 계속해서 하는 방향이 자연스러울 수 있습니다. 이 순간을 놓치지 않고 싶었고, 하단부로 스크롤을 하면 나타나는 ‘다음 프로젝트로 바로 이동하기’ 라는 버튼을 크게 노출시킴으로서 다음 프로젝트로 자연스럽게 이동할 수 있도록 유도했습니다. 이때의 링크는 Prefetch (본 페이지의 초기 로딩이 끝나면 이 링크의 데이터를 미리 받아놓는 것) 로 설정해서, 버튼을 눌렀을 때 페이지가 빠르게 로딩되는 경험을 제공해서 자연스러운 지속된 흐름을 유도했습니다.
사실 여기에서는 ‘지속된 행동으로 다음을 유도’ 하고 싶었던 욕심이 있어서 ‘스크롤 한번 더 해서 이동하기’ 기능을 넣고 싶었는데요. 아무리 찾아서 시도를 해 봐도 안 되거나, 원하는 수준으로 구현이 되질 않아서, 차선책으로 ‘탭’ 해서 이동하는 방법을 구현했습니다. 이 글을 읽으시는 분들 중 제가 무슨 이야기를 하는지 이해하시고, 제게 도움을 주실 수 있다면, 연락 주세요 커피 사 드릴게요↗︎
웹플로우, 디자인부터 배포까지 모두 한번에
웹플로우는 기본적인 코딩에 대한 지식이 있다면 충분히 사용이 가능한 포토샵 같은 존재입니다. 커스텀 코드를 삽입할 수 있고, 충분히 수준 높은, 혹은 그 수준에 준하는 자유로움을 선사한다고 느꼈습니다. 지식이 없어도 배울 수 있는 배움의 장이 폭넓게, 다양한 방면으로 준비되어 있고, 충분히 활발하게 질문과 답변이 이루어지는 커뮤니티 (포럼)도 있습니다. 수정하고, 배포하고, 삭제하거나 추가하고 배포하는 과정이 매우 매끄럽지만 그만큼 ‘내’가 생각을 많이 해야 하고, 고민을 해야 하는 툴입니다. 시간이 좀 걸리기는 했지만 제가 원하는 것을 충분히 효율적으로, 충분히 깔끔하게 구현할 수 있었습니다.
3. 데이터 측정, 실험, 유지, 그리고 개선
Google analytics, 그리고 Google tag manager
홈페이지를 메인 URL인 leehyuna.com 에 공개한 뒤, 구글 애널리틱스와 태그매니저를 이용해서 데이터를 확인합니다. 내 홈페이지에 들어오는 사람들이 어디에서 유입되는지, 홈페이지 안에서 어떤 활동을 하고 지나가는지, 어떤 걸 보고, 어디에서 시간을 가장 많이 보냈는지 등을 확인합니다. 난 이러이러한 목적으로 이 버튼을 두었는데, 과연 이 유저들은 그걸 눌렀을까? 그 버튼은 그 위치에 있었던 것이 맞았을까? 와 같은 여러가지 궁금증들을 풀어 주고, 또 새로운 발견을 하게끔 도와줍니다. 정량적 데이터로 포트폴리오 홈페이지를 개선한 두 가지 사례를 소개합니다.
첫번째 예시: 유저들이 원하는 프로젝트를 먼저 보여주세요
처음 홈페이지는 프로젝트 구성이 아래와 같이 이루어져 있었습니다.
가디언에서 진행했던 Delivery… 프로젝트가 최상단에 위치했고, 짧게 프로젝트로 진행했던 MVP 디자인이 그 아래에 위치해 있었는데요. 저는 가디언 이라는 회사에서 진행했던 프로젝트가 좀 더 사람들에게 어필이 되지 않을까? 라는 생각에 최상단에 위치해 놓았던 것이기도 했고, 제일 처음으로 완성했던 포트폴리오 프로젝트가 Delivery… 였기 때문에 그렇게 배치가 이루어졌던 것인데요.
실제로 트래픽은 두번째에 위치한 쇼핑 경험 디자인에 더 몰리고 있는 것을 확인했습니다.
67명의 유저가 홈페이지에 도달했고, 그 중 20명 (약 30%)의 유저들이 클릭해서 프로젝트를 더 알아보기로 결정했습니다. 즉, 첫 번째 프로젝트가 보임에도 불구하고 스크롤을 내려서 두 번째 프로젝트를 클릭한 게 70%. 그리고 30%의 유저는 첫 번째 프로젝트를 클릭하고, 그 중 절반 이상이 홈페이지로 돌아왔고, 그 중 25% (1명)는 두 번째 프로젝트를 클릭했죠. 즉 두 배의 유저들이 첫번째 프로젝트가 아닌 두번째 프로젝트를 클릭했습니다.
그 이유는, 예상하기에
첫번째 프로젝트가 그다지 흥미로워 보이지 않음
모바일 경험을 한 디자이너를 찾고 있기 때문
이라고 생각했습니다. 1번의 경우 타이틀을 조금 더 흥미를 끌 수 있는 제목으로 수정이 이루어져야 한다고 판단했고, 2번의 경우 모바일과 앱 경험이 한국에서는 필수적인 요소로 자리잡았기 때문일 수 있다고 판단했습니다. 그래서
A. 위치를 수정하고 B. 타이틀을 업데이트해서 바로 재배포했습니다. 데이터는 쌓여 보아야 알 수 있겠지만, 이력서 상으로도 MVP 쇼핑 경험이 가장 최근의 프로젝트이므로 최상단에 위치하는 것이 이력서와 포트폴리오를 자연스럽게 연결시키는 배치라고 판단했습니다.
두번째 예시: ‘다음 프로젝트로 바로 이동하기’
그리고 절반 정도의 유저들이 다시 홈페이지로 돌아와서 다음 프로젝트를 클릭했다는 사실에 주목했습니다. 당시 홈페이지에는 한 프로젝트를 확인하고 나서 다음 프로젝트로 바로 연결되는 버튼이 존재하지 않았는데요. 그 이유는 물론 오픈되어 있는 프로젝트가 한개밖에 없었기 때문이었습니다. 두 번째 프로젝트를 오픈하고 GA를 확인해 보니, 유저들이 메인페이지로 돌아간 다음 그 곳에서 다른 프로젝트를 클릭하는 것을 확인했고, 이때 하단에 프로젝트로 바로 이동할 수 있는 경험을 제공해주지 못했기 때문에, 뒤로 돌아갈 생각조차 하지 않고 바로 이탈했을 가능성에 대해 생각해 보았습니다.
그렇게 하단의 ‘다음 프로젝트로 바로 이동하기’ 버튼이 탄생했습니다.
단 몇 명의 유저라도, 완독한 유저들이 그 다음 프로젝트로 바로 이동하게끔 유도해서 더 많은 프로젝트를 보여줄 수 있다면, 이 버튼을 만든 목적을 달성했다고 볼 수 있습니다. GA를 통해 유저들이 버튼을 클릭해서 다른 프로젝트로 넘어가고 있는 것을 확인했습니다. 만족합니다!
정성적 데이터로 포트폴리오 홈페이지 개선하기
정량적인 데이터로 수정, 개선할 수 있는 부분이 있고, 깊이 있는 데이터를 얻어서 개선할 수 있는 정성적인 방법이 있습니다. 대면으로, 비대면으로 링크를 전달한 후 질의응답을 진행했습니다. 인상적이었던 한 가지를 공유합니다.
기발하다 생각했던 네비바. Fact: 아무도 클릭 안하는 네비바
필요없다고 생각했던 것들을 모두 빼고, 포트폴리오 웹사이트에 반드시 필요하다고 생각했던 이력서를 네비바에 넣기로 결정했습니다. 이력서를 표현하는 방법을 고민하다 로켓 이모지를 사용하기로 결정했는데, 결정적인 이유는 유저들은 네비바 안의 모든 것이 클릭이 가능하다는 것을 알고 있다는 가정을 내렸었기 때문이었습니다. 그 어떤 이모지를 넣어도 유저는 이것이 무엇인지 궁금해서 클릭해 볼 것이다 라는 가정을 내렸고, 이력서로 이동하는 ‘서프라이즈’, 즉 재미를 제공해 준다고 판단했습니다.
실상은 달랐습니다. 그 누구도 이 네비바를 보고 클릭하지 않았습니다. 심지어 ‘홈페이지에서 바로 연락할 수 있는 정보가 있으면 좋겠다’ 라는 피드백을 받았습니다. 정보가 그 화면 안에 있다고 말했음에도 찾지 못했습니다. 이모지는 A. 노션의 타이틀에나 존재하는 것(즉, 클릭이 안 됨) B. 로켓 이모지를 좋아하기 때문에 썼을 것 이라는 두 가지의 이야기를 들었습니다.
영어로 괜히 헷갈릴 여지를 줄 수 있는 Resume, CV 라는 단어를 쓰지 않고 분명하게 의미가 전달되는 '이력서' 라는 단어를 적어서 완성했습니다.
유저들은 네비바에 있는 이력서를 알아보고, 클릭하기 시작했습니다. 만족합니다!
백로그에 남아있는 태스크들
포트폴리오 웹사이트는 여전히 진화하고 있습니다. 더 많은 유저인터뷰를 진행할 예정이고, 더 나은 웹사이트를 만들고, 프로젝트들을 계속해서 손보며 돌보아 갈 예정입니다. 프로덕트나 서비스도 마찬가지로, 런칭한 이후부터가 진짜 시작이니까요! 언제 어떻게 닿을 지 모르는, 한국 혹은 한국어권 밖에 있는 좋은 사람들과 멋진 프로젝트를 함께 진행하기를 바라고, 저의 홈페이지가 제가 충분히 멋진 디자인을 해낼 수 있는 사람이라는 것을 증명해 주었으면 합니다.
어떤가요? 제 홈페이지는 ‘현아는 좋은 UI/UX 디자이너다’ 라는 ‘목적’ 전달이 되었나요? �
웹사이트를 방문해서 직접 확인해 보세요!
