전 세계에서 가장 사랑받는 웹사이트 중 하나인 메일침프는 특유의 고객 친화적인 UI로 뉴스레 사용자들의 마음을 사로잡았습니다. 메일침프의 탁월한 웹사이트 디자인을 만들어냈던 수석 디자이너 애런 월터는 메일침프가 개성있고 유머가 넘치는 하나의 인격을 담은 사이트가 되기를 바랐다고 합니다. 그럼 애런 월터와 같은 생동감있고 탁월한 사이트 디자인은 어떻게 만들어질까요?
탁월한 웹사이트를 만들기 위한 디자인 페르소나 프로세스
“저는 메일침프를 위해 살아 있는 디자인 페르소나를 만들었습니다. 이러한 과정은 몇 가지 구성요소를 점검하여야 합니다. 다음은 여러분이 디자인 페르소나에 포함해야 할 목록입니다.”
애런 월터에 따르면 훌륭한 웹사이트는 몇 가지 디자인 페르소나를 충분히 고려한 뒤 제작해야 된다고 말합니다. 다음의 9가지 프로세스를 명심한다면 당신도 메일침프와 같은 탁월한 웹사이트를 제작할 수 있을 것입니다.
1. 브랜드이름
당신의 회사 또는 제공하는 서비스 이름.
사례) 메일침프
2. 개요
당신의 브랜드가 가진 개성에 대한 간단한 소개. 당신의 브랜드 개성을 특별하게 만드는 요소는 무엇인가요?
사례)
매일침프의 얼굴인 프레디 폰 침펜하이머 4세(Freddie Von Chimpenheimer IV)는 브랜드 개성의 완전체입니다. 프레디의 튼튼해 보이는 몸집은 애플리케이션의 힘을 보여주며, 바쁘게 행동하는 모습은 사람들로 하여금 이 브랜드가 비즈니스를 위한 것임을 알게 합니다.
프레디는 언제나 친절한 미소를 띠고 사용자를 맞이합니다. 만화 양식으로 그려진 캐릭터는 메일침프가 재미있고 격의 없는 경험을 제공한다는 것을 말해줍니다. 프레디는 만화로 그린 원숭이일 뿐이지만 어쨌거나 상당히 멋집니다. 그는 재치 있는 농담도 즐기지만 상황이 심각해지면 웃음기를 지우고 진지해지기도 합니까요.
3. 개성 이미지(personality image)
당신의 브랜드가 포함했으면 하는 특성을 담은 실제 사람의 이미지입니다. 이 이미지로 인해 개성은 현실감을 갖게 됩니다.
유명인사를 한 명 고르거나 당신의 팀에게 익숙한 누군가를 고르세요. 여러분의 브랜드가 마스코트를 가지고 있거나 개성 있는 대표 이미지가 있다면 그것을 써도 좋습니다. 브랜드의 개성을 알릴 수 있는 마스코트의 속성을 묘사하세요.
사례) 메일침프의 마스코트인 프레디 폰 침펜하이머 4세
4. 브랜드 특성
당신의 브랜드를 가장 잘 설명하는 일곱 가지 특징을 나열해보세요. 그리고 당신의 회사가 배제하고 싶은 특징도 나열해보세요. 여러분의 브랜드를 잘못된 방향으로 인도하는 특성을 빼고 나면 일관된 개성을 창조하기 위해 디자인 페르소나를 디자인하고 작성하는 과정에 도움이 될 것입니다.
사례)
재미있지만 유치하지는 않은, 재미있지만 바보 같지는 않은, 강력하지만 복잡하지는 않은, 유행에 밝지만 소외감을 느끼게 하지는 않는, 쉽지만 지나치게 단순하지는 않은, 신뢰가 가지만 따분하지는 않은, 편안하지만 헐렁하지는 않은
5. 개성 맵(personality map)
우리는 X/Y축 위에 개성들을 위치시킬 수 있습니다. X축은 개성의 친근감 정도를, Y축은 순종적인지 지배적인지를 보여줍니다.
사례) 메일침프의 개성 맵
6. 어조
당신의 브랜드가 말할 수 있다면 어떤 방식으로 말할까요? 서민적인 사투리? 아니면 세련되고 박식한 어투?
자신만의 브랜드가 가진 어조의 특징적인 면을 설명해보세요. 그리고 그 어조가 다양한 환경에서 어떻게 변하게 될지에 대해서도 서술해보세요. 사람들이 상황에 맞추기 위해 자신의 말투와 어조를 바꾸듯 여러분의 브랜드가 가진 어조도 마찬가지로 변할 것입니다.
사례)
메일침프의 어조는 친근하고 익숙하며 무엇보다 인간적입니다. 메일침프는 가벼운 농담을 던지고, 이야기를 들려주며, 오랜 친구와 이야기할 때 나올 법한 소탈한 어조로 말을 건넵니다. “앗, 끔찍한걸!”과 같은 말로 공감대를 형성하기도 합니다.
7. 예시 문구
당신이 만든 인터페이스 내부에서 펼쳐지는 다양한 상황에서 어떤 문구가 쓰일 수 있을지, 사례를 들어주세요.
사례)
성공 메시지 : “하이파이브! 당신의 목록을 불러왔습니다.”
에러 메시지 : “저런, 이메일 주소 넣는 걸 깜빡하신 것 같네요.”
주요 장애를 알리는 메시지 : “우리 서버 하나가 일시적으로 다운되었습니다. 이미 우리 엔지니어들이 현장으로 출동했으니 곧 해결될 것입니다. 기다려주셔서 감사합니다.”
8. 시각적 어휘 목록(visual lexicon)
이 문서를 당신 자신을 위해 혹은 디자인팀을 위해 만들고 있다고 해도 당신의 디자인 페르소나를 위한 시각적 어휘 목록을 작성할 수 있습니다. 여기에는 브랜드의 인격을 보여주는 색상과 서체, 비주얼 스타일에 대한 개괄적인 소개가 포함됩니다.
사례)
색상 : 메일침프는 밝지만 살짝 채도를 낮춘 색채 팔레트를 사용하여 재미있고 익살스러운 느낌을 줍니다.
서체 : 메일침프는 소탈하고 사용하기 쉽습니다. 그 느낌은 서체에도 반영되어 있습니다. 또한 정보의 위계를 색깔로 알려줍니다. 이를 통해 메일침프는 기능적이기도 하고 사랑스럽기도 한, 친근하고 편안한 카디건처럼 느껴집니다.
일반적인 스타일 노트 : 인터페이스 요소는 무난하고 단순합니다. 쉽게 이해할 수 있는 공격적으로 느껴지지 않는 스타일을 유지하기 위해서입니다. 절묘하게 사용된 부드러운 질감은 공백을 따뜻한 느김으로 채우고 인간미를 느끼게 합니다. 프레디는 유머를 살짝 넣고 싶을 때만 가끔씩 등장합니다.
9. 교감 방법
여러분의 인터페이스에서 정서적인 교감을 나눌 수 있는 방법을 기술해 보세요. 디자인 페르소나를 지탱하고 기억에 남는 경험을 만들어내는 데 도움이 될 것입니다.
사례)
놀라움과 즐거움 : 로그인 화면을 특정한 테마로 꾸며 공휴일이나 기념할 만한 사건, 또는 유명인사를 기념하며, 이스터 에그는 예상밖의 웃음을 줍니다.
기대 : 각 메인 페이지 상단에 프레디가 불쑥불쑥 나타나 재미있는 방식으로 환영하는 것은 로딩되는 다음 페이지에 기대감을 갖게 합니다. 이러한 환영 인사가 정보나 피드백을 제공하는 것은 절대로 아닙니다. 기능성이나, 사용성을 결코, 방해하지 않는 선에서 재미를 주는 장치일 뿐이죠.
디자인 페르소나 설정 시 유의해야 할 것
애런 월터는 UX디자이너들은 디자인팀과 개발팀, 그리고 콘텐츠 전략팀이 프로젝트 전반에 걸쳐 어디서라도 페르소나를 볼 수 있도록 배치해야 한다고 말합니다. 여러분의 디자인 페르소나는 함께 일하는 팀에게 여러분이 사용자와 형성하기를 원하는 관계에 대해 상기시킬 수 있도록 충분히 시각적이어야 할 것입니다. 또한 디자인 페르소나가 모든 사람을 이끌 수 있을 정도로 매력적인지도 충분히 고려하시기 바랍니다.
참고문헌
Aarron Walter, <감성 디자인>, webactually, 2013
