[UX] 가벼운 이야기2018.01.03 17:16


UX, UI, GUI 관련 회사에 취업하기 위해서는 포트폴리오, 이력서, 자기소개서를 쓰게 된다. pxd에서도 이와 관련된 글들이 몇 번 올라왔었지만, 관련 글들이 흩어져있는 상황이다. 이에 참고할만한 링크 모음과 체크리스트를 공유한다. 아무쪼록 포트폴리오, 이력서, 자기소개서를 작성하는 데 참고가 되었으면 좋겠다. 해당 체크리스트는 기본적인 체크리스트를 수집하여 정리하였다. 이에 필자의 개인적인 의견이며 지원하려는 직군 및 pxd의 채용 기준과는 상이할 수 있다.


포트폴리오 관련 체크리스트

□ 나만의 브랜드가 포트폴리오에 잘 녹여져 있는가?

□ 면접관의 입장에서 포트폴리오가 구성되어 있는가? (심플하지만 흥미로운 구성, 페이지의 강약조절, 보는 데 불편함이 없도록)

□ 가장 중요한 순서(혹은 스토리 순)로 포트폴리오가 구성되어 있는가?

□ 간결하고 핵심 정보가 잘 갖추어져 있는가?

□ 매력적인 부분(개성)이 잘 드러나 있는가?

□ 자신의 강점이 잘 드러나 있는가?

□ 포트폴리오에 문제 제기 및 문제 해결방식이 잘 드러나 있는가?

□ 디자인적으로 완성도가 있는 포트폴리오인가?

□ 장식적인 그래픽 요소가 적고 정돈된 포트폴리오인가?

□ 오탈자, 맞춤법에 대한 고려가 잘 되어있는가?

□ 프로젝트 기여도, 작업 기간 등 구성요소가 잘 들어가 있는가?

□ 주변 실무자 등 인맥을 활용하여 포트폴리오의 피드백을 받았는가?

□ 지원하려는 회사에 맞춤화된 포트폴리오를 구성하였는가?

□ 완성된 포트폴리오 파일 용량이 너무 과하지는 않은가?


이력서, 자기소개서, 면접 관련 체크리스트

□ 내가 가고싶은 분야를 확실히 결정하였는가?

□ 응시할 회사에 대해서 조사하였는가? (지인, 홈페이지, SNS, 블로그, 최신 작업, 회사 분위기, 디자인스타일, 디자인철학 등)

□ 이력서, 자기소개서에서 자신의 '강점'이 잘 드러나는가?

□ 이력서, 자기소개서에서 자신의 '개성'이 잘 드러나는가?

□ 이력서, 자기소개서의 디자인은 장식적인 그래픽요소가 적고 정돈되었는가?

□ 이력서, 자기소개서에 들어갈 정보가 빠짐없이 제공되었는가?

□ 면접 예상 질문에 대해서 리스트업하고 준비하였는가?

□ 지원하려고 하는 회사에 대한 질문이 준비되었는가?


1. 포트폴리오 관련 링크

▷ UX 포트폴리오 만들기 (by 이재용)

- 포트폴리오를 보는 사람의 입장을 고려하라.

- 제일 중요한 핵심 포트폴리오 정렬 순으로 제공하라.

- 문제 해결방식을 시각화하여 보여주라.

- 전체 스토리를 통해 ‘나’를 드러내라.

▷ UX 커리어 시작하기: 사용자 경험 디자인(User Experience Design) 직업을 시작하고자 하는 사람들을 위한 완벽한 가이드 (by 신유민)

- 내가 UX디자이너가 되고 싶은 이유는?

- 자기 평가하기

- 기본 스킬 평가하기

- 환경적인 경험 살펴보기

▷ UX 포트폴리오 UX, UI, 시각 디자이너들을 위한 10가지 주요 질문 (by 임호)

▷ 디자인 비전공자로 UX하기 (by 이재용)

▷ UX포트폴리오 준비 (by Kenny Hong)

▷ 포트폴리오 준비하기 전 꼭 알아야 할 팁 (by 디스페이스)

▷ 해외사례) 포트폴리오의 경쟁력을 높이는 5가지 방법 (1편) (by 이상인)

▷ 해외사례) 포트폴리오의 경쟁력을 높이는 5가지 방법 (2편) (by 이상인)


2. 포트폴리오 사례 링크

▷ pxd 포트폴리오

▷ The best new portfolio sites, September 2016

▷ Showcasing design intern portfolios at top tech companies

▷ 페이스북, 구글에서 일하는 디자이너들의 포트폴리오

▷ 이런 포트폴리오는 어때요? 최고의 포트폴리오 페이지 5

▷ 올해의 포트폴리오 2016

▷ 포트폴리오 2017 (by 권태욱)

▷ 디자인을 할 때 참고할만한 사이트 모음 (by 맨처음)


3. 관련학과 온라인 졸업전

▷ 온라인 졸업전 2017 (건국대학교, 국민대학교, 이화여자대학교, 울산대학교, 계원예술대학교)

▷ 한경대학교 디자인학과 온라인졸업전 2017

▷ 서울여대 산업디자인학과 온라인졸업전 2017


4. 이력서, 자기소개서 관련 링크

▷ 디자이너 이력서를 쓰는 법 (by 디스페이스)

▷ 맨땅에 헤딩하는 자소서 쓰지 말고, ‘자신’부터 점검하라! (by 잡코리아)

▷ 인사담당자가 직접 말하는, 서류 통과가 잘 되는 이력서 (by 원티드)


5. 면접, 취업 관련 링크

▷ 해외사례) 좋은 디자이너 고용하기 (by 이상인)

▷ UX포지션 면접 시 자주 듣게 되는 질문 10가지 (by 라이트브레인 황기석)

▷ 라이트브레인이 UX컨설턴트, 기획자 면접 시 자주 하는 10가지 질문 (by 라이트브레인 황기석)

▷ 스타트업에서 신입으로 일하기 (by 원티드)





Posted by 위승용 (uxdragon)

댓글을 달아 주세요

[UX] 독후감2018.01.03 17:14


2016년 이후 출간된 UX / UI / 비즈니스 관련 신간 소식입니다. ‘스프린트’만 2016년에 출간되었고, 나머지 도서는 2017년도에 출간되었습니다. 도서명을 선택하시면 관련 정보를 확인하실 수 있습니다.



1. 회의에서 똑똑해 보이는 100가지 기술

저자 새라 쿠퍼 | 역자 홍지수 | 어떤날

구글 출신 디자이너 ‘새라 쿠퍼’가 쓴 책으로 직장에서 회의에 집중하는척하면서 회의에서 똑똑해 보일 수 있는 다양한 노하우가 담겨있다. 일러스트와 짧은 글줄로 가볍게 읽을 수 있는 책이다.


2. 1달러 프로토타입

저자 그렉 누들먼 | 역자 김기성, 이윤솔 | 지앤선

포스트잇의 한계는 어디까지일까? pxd에서도 포스트잇은 떼려야 뗄 수 없는 업무 보조도구이다. (참고로 포스트잇으로 주로 부르긴 하지만 포스트잇은 제품 이름이고, 사실상 스티키 노트라고 불러야 한다.) 해당 책은 ‘1달러 프로토타입’이라고 부르는 UX디자인 방법론에 대해서 기술하고 있다.

관련해서 어댑티브 패스의 'Sticky note 닌자 발표 자료' 도 참고하면 좋겠다.


3. 터치를 위한 디자인하기

저자 조시 클라크 | 웹액츄얼리코리아

조시 클라크의 이 책은 단순히 터치 인터페이스만을 다루지 않고, 모든 기기를 위한 레이아웃 및 크기 조정, 새로운 제스처 등 터치 인터페이스 관련한 저자의 다양한 노하우를 다루고 있다. 해당 도서는 UI 기획에 관심이 있는 학생들이나 신입사원들에게 강력히 추천한다.

관련 글 : http://story.pxd.co.kr/1257


4. 스케치

저자 크리스티안 크래머 | 역자 김재이 | 웹액츄얼리코리아

스케치는 UI 기획자, GUI 디자이너와의 협업에 최적화된 벡터 기반 인터페이스 디자인 툴이다. 해당 책은 스케치 툴에 대해서 실습 형태로 소개하고 있다.

관련 글 : http://pxdstory.tistory.com/1252


5. 스프린트

저자 제이크 냅, 존 제라츠키, 브레이든 코위치 | 역자 박우정 | 김영사

이 책은 구글의 수석 디자이너인 ‘제이크 냅’이 팀 프로세스를 개선하는 방식에 대해 고민하였고, 그 결과물인 ‘스프린트’ 방식을 소개하는 책이다. 스프린트는 총 5일 동안 진행된다. 첫날 목표와 타겟층을 설정하고, 둘째 날부터 셋째 날까지 솔루션을 스케치하고 결정하는 과정을 거친다. 넷째 날부터 다섯째 날까지는 프로토타입을 제작하고 검증을 한다.


6. 꼭 필요한 만큼의 리서치

저자 에리카 홀 | 역자 김기성, 이윤솔 | 웹액츄얼리코리아

에리카 홀의 이 책은 리서치의 종류 및 방법에 대해서 저자의 경험 및 사례를 세세하게 다룬 책이다. 이에 리서치를 앞두고 있거나 직접 리서치를 해야 하는 현업의 주니어 & 시니어들이 전과(全課)처럼 해당 챕터를 읽어보고 진행해보면 좋을 것 같다.

관련 글 : http://story.pxd.co.kr/1265


7. 시장을 통찰하는 비즈니스 다이어그램

저자 제임시 캘박 | 역자 장용원 | 프리렉

컨설팅 일을 하다 보면 발표 자료에 다이어그램을 쓰기도 하고, 다이어그램 형태의 최종 결과물을 산출하기도 한다. 다이어그램으로 표시했을 때, 이해 및 전달도 쉽고 설득력이 높아지는 경우가 있다. 해당 책은 이러한 다이어그램의 종류와 다이어그램을 어떻게 만들 수 있는지를 다루고 있다.


8. 처음부터 다시 배우는 서비스 디자인 씽킹

저자 배성환 | 한빛미디어

이 책은 서비스디자인 씽킹과 서비스디자인 프로세스에 대해 전반적으로 다루고 있다. 디자인 씽킹 프로세스가 어떻게 진행되는지 설명하기 위한 여러 실무 사례를 소개하고 있다.


9. 서비스 경험 디자인

저자 김진우 | 안그라픽스

HCI 개론의 저자인 김진우 선생님의 책이다. 서비스 디자인 프로세스(더블 다이아몬드 프로세스)에 대한 설명과 연세대학교 학생들과 진행했던 프로젝트를 예시로 소개하고 있다.


10. 프로그래머처럼 생각하라

저자 요시다 루이 | 역자 황석형 | 제이펍

이 책은 프로그래머들이 즐겨 쓰는 ‘모델 기반 사고법’에 대해 다룬 책이다. 코딩해야 하는 프로그래머뿐만 아니라, 논리적 사고를 해야 하는 기획자들이 보면 좋겠다.



Posted by 위승용 (uxdragon)

댓글을 달아 주세요

[UX] 세미나2013.05.11 02:22


pxd 교육제도 중, 일정 기간 근속한 직원들에게 해외 교육의 기회가 주어지는 제도가 있습니다. 2012년 11월 보스턴에서 진행되었던 UI17(User Interface seventeen) 컨퍼런스에 참여하게 되었습니다.

UI17 컨퍼런스에 대해 간략히 소개를 드리자면, UIE(User Interface Engineering)에서 주최하는 행사로, 3일동안 해외 UX 전문가들의 세미나 발표와 풀데이 워크샵으로 진행됩니다. 학생들을 대상으로 하기 보다는 현업에 종사하는 UX, UI 디자이너들의 정보 공유와 업무 관련 노하우 공유 및 재교육 목적을 띈 컨퍼런스라고 생각하시면 됩니다.

셋째 날은 어제 들었던 세션인 Kelvin Hoffman의 Leading Epically Productive Meeting의 워크샵 세션을 듣기로 했습니다. Day-02에도 말씀드렸다시피 본 세션은 퍼실리테이션 관련 세션입니다. 4개의 롤을 정하고, 돌아가면서 체험해보는 방식으로 워크샵이 진행되었습니다. 내가 어떤 롤을 잘하고 어떤 롤을 잘 못하는지, 어떤 방식으로 의사 결정을 하는게 효율적인지 체험해 볼 수 있었습니다. 의사 결정을 할 때 말을 하지 않고 결정하는 방식도 경험해 보았는데, 언성이 높아지거나 결정에 어려움을 겪을 때 써 볼 수 있는 방법이라고 생각합니다.

총 10개의 퍼실리테이션 기법을 경험해 볼 수 있었으며, 이 기법들을 적절히 엮어서 하나의 워크샵처럼 느끼게 해주었습니다. 워크샵 설계를 꽤 잘하셨더라구요. 본 퍼실리테이션 기법 외에도 게임스토밍에서 나오는 퍼실리테이션 기법을 같이 보시면 좋을것 같습니다. (http://www.gogamestorm.com/)



웹사이트 : http://kevinmhoffman.com/

Twitter : https://twitter.com/kevinmhoffman



Table of contents
1. UI17 Day-1 퍼소나 기반의 시나리오 작성하기 (Kim goodwin)
2. UI17 Day-2 Luke Wroblewski, Jared Spool, Kelvin Hoffman, Nathan Curtis
3. UI17 Day-3 생산적인 회의 리딩하기 (Kelvin Hoffman)

Workshop 1. What's in the bag?

  • 가방안에 뭐가 있나?
  • 마쉬멜로우, 스파게티, 테이프로 탑 쌓기
    • 마쉬멜로우가 최대한 높아질 수 있도록

Workshop 2. 작은 롤플레잉 하기

  • 질문을 하나 하고 각각의 롤에 따라 행동하는 워크샵
  • 질문을 하나 하고 옆으로 카드를 돌려서 돌아가면서 수행해 볼 수 있음
    • 질문 1 : 어떻게 하면 미팅을 생산적으로 할 수 있나?
    • 질문 2 : 어떻게 하면 미팅이 비 생산적이 되는가?
    • 질문 3 : 오늘 워크샵에서 나가면 뭘 할건가?
    • 생각을 공유하는 시간
  • 4개의 롤 정하기
  • 퍼실리테이터
    • Is neutral, like Switzerland. (스위스처럼 중립하라. 스위스는 중립국가죠.)
    • 아이디어를 평가하지 말라
    • 아이디어에 기여하지 말라
    • 프로세스를 코디네이팅 / 매니징 하라
  • 레코더
    • 그룹의 기억을 기록하라
    • 화이트보드 같은곳에 공적으로 기록하라
    • 조용하고, 빨리 진행하라
    • 다음 단어를 따라가라
  • 그룹 멤버
    • 환상적인 아이디어에 기여하라
    • 긍정적인 상태를 유지해라
    • 디펜시브 하지말라
    • Check / Balances
  • 리더
    • 미팅을 디자인해라
    • 롤과 참석자를 선택하라
    • 골에 근접하게 하라
    • 미팅중에는 그룹의 멤버가 되라

Workshop 3. 제품만들기
  • 롤플레잉 방식과 동일함

Workshop 4. 문제 탐험하기

Workshop 5. 아이디어 워크샵
  • 3~4명이서 그룹을 만들고, 프레젠테이션하고 아이디어를 크리틱한다.
  • 2개의 좋은 아이디어를 선택한다. 1개 아이디어를 최종 선택한다.
  • 큰 포스트잇, 종이, 어떤 거든 괜찮다.

Workshop 6. 제품의 이름을 붙여라
  • 모든 사람이 각자 다른 색깔의 포스트잇을 사용해서 이름을 고민하고 3개씩 붙인다.
  • 제품의 이름을 결정해라.

Workshop 7. 10 Second Gut-Check
  • 10초동안 각각의 웹사이트를 보고 10점 척도로 평가를 한다.
  • 평가 자료를 모아서 높은 점수를 받은 곳과, 낮은 점수를 받은 곳의 이유를 논의한다.
  • 10초라는 짧은 시간은 UI보다는 GUI를 평가하기 쉬운 시간이라고 생각합니다.

Workshop 8. Sketch your user experience
  • 당신의 제품 경험에 대해 스케치한다.
  • 루크 로블르스키의 Mobile first 처럼 모바일 화면을 먼저 기획해보고, 그걸 패드 화면으로 옮겨보는 작업을 거쳤습니다.


Workshop 9. PECHA CUCHA
  • 일본에 사는 두 명의 외국인 건축가 마크 다이탐과 아스트리드 클라인이 2003년에 시작한 프리젠테이션 관련 이벤트라고 하는데요. (페차쿠차는 일본어로 잡담이라고 합니다) 페차쿠차의 형식은 발표자가 20장의 슬라이드만을 사용하여 각 슬라이드를 20초씩 발표하는 것입니다. 발표를 마치면 총 6분 40초가 소요된다고 하네요. 짧은 시간 안에 핵심적인 메시지를 사람들에게 전달하는 훈련에는 그만일 것 같습니다.
  • 관련 도서 : 프리젠테이션 젠 (http://book.naver.com/bookdb/book_detail.nhn?bid=4590776)


Workshop 10. What's in the bag (REDUX)
  • 오늘 뭘 배웠는지 공유




Posted by 위승용 (uxdragon)

댓글을 달아 주세요

[UX] 세미나2013.05.11 02:20


pxd 교육제도 중, 일정기간 근속한 직원들에게 해외 교육의 기회가 주어지는 제도가 있습니다. 2012년 11월 보스턴에서 진행되었던 UI17(User Interface seventeen) 컨퍼런스에 참여하게 되었습니다.

UI17 컨퍼런스에 대해 간략히 소개를 드리자면, UIE(User Interface Engineering)에서 주최하는 행사로, 3일동안 해외 UX 전문가들의 세미나 발표와 풀데이 워크샵으로 진행됩니다. 학생들을 대상으로 하기 보다는 현업에 종사하는 UX, UI 디자이너들의 정보 공유와 업무 관련 노하우 공유 및 재교육 목적을 띈 컨퍼런스라고 생각하시면 됩니다. 

둘째날은 각 1시간 30분짜리의 5개 강의를 들었습니다. 세미나 첫 날과 마지막 날에 하는 워크샵에는 총 8명의 강연자가 있고 (첫 날 4명, 마지막 날 4명중 각 택1), 둘째 날에는 8명의 강연자의 요약 발표와 주최자 제라드 스풀의 강연까지 총 9개의 강연 중 5개의 강연을 선택해서 들을 수 있는 날이었습니다.(제라드 스풀의 강연은 선택의 여지가 없이 모두 들어야 하는 강연)



Table of contents

1. UI17 Day-1 퍼소나 기반의 시나리오 작성하기 (Kim goodwin)
2. UI17 Day-2 Luke Wroblewski, Jared Spool, Kelvin Hoffman, Nathan Curtis
3. UI17 Day-3 생산적인 회의 리딩하기 (Kelvin Hoffman)


Luke wroblewski | First Person User Interface

천공카드 인터페이스에서부터 시작해서 First person user interface(1인칭 UI)까지 아우르는 사례 중심의 강연이었습니다. First person user interface라는 이름은 다소 생소하게 들리실 수 있겠습니다. 발표 상에서는 공간현실 / 증강현실 등의 새 흐름을 지칭하는 것 같았습니다. 현재까지는 First person 유저 인터페이스가 생성되는 시점에 있고, 여러 기술적인 가능성을 검토하고 있는 상황입니다. 이런 인터페이스가 어떤 이름으로 불리워질지는 모르겠지만 앞으로 기대가 되네요.


또한 루크 로블르스키의 강연을 처음 들어봤는데, 재미있게 발표를 잘 하시더라구요.

예전에 루크로블르스키의 블로그로 배우기라는 글도 썼을 정도로, 관심있게 지켜본 디자이너중 한 분 이었는데 실제로 뵙게 되니까 감회가 새로웠습니다.

내용 정리가 부실해도 양해 부탁드립니다. :)
대신, 아래 발표 자료 꼭! 보세요! 


웹사이트 : http://www.lukew.com/
Mobile First (책) : http://www.lukew.com/resources/mobile_first.asp
발표자료 : http://www.lukew.com/presos/preso.asp?21



  • 천공 카드 인터페이스
  • 커맨드 라인 인터페이스
  • 그래픽 유저 인터페이스
  • Natural user interface
  • First person user interface
    • 주위의 공간을 네비게이팅
    • 즉시 당신의 주변을 증강현실로
    • 근처의 사람과 사물을 인터랙팅





Jarad spool | The Secret Lives of Links

UI17의 주최자 제라드 스풀의 강연이었습니다. 간단하게 말씀드리자면 '링크 잘 만들어라!' 는 내용입니다. 링크 하나 가지고도 강연이 가능하군요.

  • 링크는 말하고 있다.
  • Fitts's law를 이야기하면서 링크 잘 만들라고 했습니다.
  • Trigger words를 잘 사용해라
    • Trigger words : 사용자의 목표를 이루기 위해서 어디를 클릭해야할지 알려주는 단어나 구
  • 사용자의 스캐닝 프로세스
    • Trigger words를 보고 없으면 검색한다.
  • Back 버튼을 사용하지 말아야 한다.
  • Pogo-sticking(원하는 정보에 가기까지 들어왔다 나갔다를 반복)을 사용하지 말아야한다.
  • 검색을 하지 않아도, 정보를 찾을 수 있게 해야한다.
  • 링크는 링크다워야하며, 링크와 다른 정보요소를 같은 방식으로 표현하면 안된다. (파랑색에 밑줄은 링크를 의미함)
  • 링크는 사용자의 기대를 충족시켜야 한다.
  • 링크의 안좋은 사례 (아래 이미지 참고)



Kelvin Hoffman | Designing Stellar Meeting

퍼실리테이팅 관련 발표였습니다. 클라이언트와 미팅을 가지면 관료적인 결정을 하거나 불필요한 회의에 끌려가기 마련인데, 이런 퍼실리테이팅 기법을 적절히 이용하면 효과를 볼 수 있을것으로 기대합니다. 적용가능한 것들은 적용해봤으면 좋겠습니다. 내용은 좋았는데 듣는 사람들의 호응이 별로 좋지는 않았습니다. 발표를 지루하게 해서 그런가본데요?

웹사이트 : http://kevinmhoffman.com/
Twitter : https://twitter.com/kevinmhoffman

  • 사람의 니즈에 맞는 스케일의 미팅을 해라
    • 단순하고 간단한 아젠다의 경우 Check-in을 하거나 미팅을 가지지 않는다. (이메일이나 베이스캠프를 이용)
    • 시간이 많이 필요하고 복잡한 아젠다의 경우 워크샵 형식으로 진행한다.
    • 그 외 협업이 필요한 경우 전통적인 미팅을 가진다.
  • 미팅을 할때 4개의 롤을 고용해라
    • 퍼실리테이터 / 레코더 / 그룹 멤버 / 리더
    • 작은 미팅일 경우 퍼실리테이터 / 레코더 2개의 롤 고용
    • 디자인 시안에 포스트잇 작업을 할 수 있다.
      • 빨강 - 유지하고 싶은 것, 노랑 - 바꾸고 싶은 것, 파랑 - 제거하고 싶은 것
  • '숫자'를 이용해 논의의 초점을 맞춰라
    • 모든 사람들이 하나의 웹사이트를 점수매기거나, 사이트의 방향을 결정할때 사용
    • Requirement의 중요도와 구현가능성을 점수매겨 앞으로 나아가야 할 방향을 결정하기도 함
  • 스케치를 통해 컨텐츠를 재정의하고, UX 전략을 논의함
  • 발산 및 수렴 계획을 세워라
    • 발산적 사고
      • 아이디어 리스트 만들기
      • 자유-흐름으로 열린 논의
      • 다양한 관점으로 살펴보기
      • 판단을 뒤로 미루기
    • 수렴적 사고
      • 아이디어를 카테고리화 하기
      • 키포인트 요약하기
      • 동의 구하기
      • 판단 연습
  • 협업 공간을 통해 산출물 만들기
    • 어린아이와 같은 사고를 하라
      • 실패를 두려워하지 않는다.
      • 빠른 반복과정을 거친다.
      • 계획과 논의를 하지 않고 단지 진행한다.
    • Mobile first
      • 먼저 모바일 화면을 만들고, 큰 화면을 만들라.




Nathan Curtis | Fearless Prototyping for Sketches

프로토타이핑 관련 발표입니다. 8 Shapes는 댄 브라운이 있는 회사인데요. 회사에서 점점 PDF(PPT) 와이어프레임을 그리는 대신, HTML 프로토타이핑으로 바꾸고 있는 추세라고 합니다. 또한 모듈화를 해서 계속 확장하고 있다고 하네요.

HTML 프로토타이핑을 하기전에 스케치를 먼저 한다고 하는데요, 스케치를 하는 방법에 대해서도 이야기 해주더군요. 본 세미나의 요지는 와이어프레임을 그리는데 시간을 낭비하지 말고, HTML을 배워 프로토타이핑을 하라는 것이었습니다.

Modular web design (책) : http://me2.do/GADN5SA6
Communicating design (책) : http://me2.do/GcZbaR82
웹사이트 : http://www.eightshapes.com/aboutus/nathan-curtis/
발표자료 : http://www.slideshare.net/nathanacurtis/from-pdfs-to-prototypes

  • 스케치를 바로 캡쳐하는 장비
    • IPEVO P2V Camera
    • IPEVO Stand
  • HTML 프로토타입



Posted by 위승용 (uxdragon)

댓글을 달아 주세요

[UX] 세미나2013.05.11 02:19

 

pxd 교육제도 중, 일정기간 근속한 직원들에게 해외 교육의 기회가 주어지는 제도가 있습니다. 2012년 11월 보스턴에서 진행되었던 UI17 (User Interface Seventeen) 컨퍼런스에 참여하게 되었습니다.

UI17 컨퍼런스에 대해 간략히 소개를 드리자면, UIE(User Interface Engineering)에서 주최하는 행사로, 3일 동안 해외 UX 전문가들의 세미나 발표와 풀데이 워크샵으로 진행됩니다. 학생들을 대상으로 하기 보다는 현업에 종사하는 UX, UI 디자이너들의 정보 공유와 업무 관련 노하우 공유 및 재교육 목적을 띈 컨퍼런스라고 생각하시면 됩니다.

첫 날은 Full day workshop으로 Kim Goodwin의 Using Scenarios to Design Intuitive Experiences 워크샵을 들었습니다. 퍼소나에 대한 이야기는 간략하게 넘어가고, 주로 프레임웍 스케치전에 들어갈 시나리오를 어떻게 작성할지에 대한 내용이 주였습니다. 서비스가 점차 복잡하고 커짐에 따라 중간에 서비스 디자인 프로세스인 Journey map이 등장합니다.

퍼소나 기반의 Journey map을 통한 시나리오를 작성하고, 디테일을 살려 그 시나리오의 기능이 구현 가능한지, 언제 구현할건지 결정하고, 더 나아가서는 시각적 정보의 위계까지 구성하는 프로세스를 경험해 볼 수 있었습니다. 프로젝트를 진행하다보면 시간에 쫒겨서 퍼소나에서 시나리오까지, 시나리오에서 스토리보드까지 집요하게 물고 늘어지지 않게 되는 경우가 있습니다. 퍼소나를 잘 만들어놓고 끝까지 잘 활용해야겠다는 생각이 들었습니다.



Table of Contents
1. UI17 Day-1 퍼소나 기반의 시나리오 작성하기 (Kim Goodwin)
2. UI17 Day-2 Luke Wroblewski, Jared Spool, Kelvin Hoffman, Nathan Curtis
3. UI17 Day-3 생산적인 회의 리딩하기 (Kelvin Hoffman)

세미나 내용 정리본을 공유합니다. 정리본이라 내용이 매끄럽지 않은 점 감안하고 봐주세요. :)


  • 왜 시나리오를 써야 하는가?
    • 더 나은 UX를 위한 익사이팅한 팀을 위해서
    • 인간은 시스템의 컴포넌트가 아니다.
    • Silos(조직의 부서들이 서로 다른 부서와는 교류하지 않고, 자기 부서의 이익만을 추구하는 현상)는 나쁜 경험으로 이끌기 때문
    • 좋은 디자인 프로세스는 진동하여 하나의 골로 이끈다. (Scenario/Sketch - Use case/Requirements)
    • 서비스의 시작과 끝
    • 서비스 전체의 경험 -> 제품의 경험 -> What if this happen? -> 데이터 제어 -> 디테일
  • 좋은 시나리오는 이해를 돕는다.
  • 좋은 퍼소나가 가져야 할 것
    • Task, Skill, Goal, Context, Feeling
  • 항상 여러 명의 퍼소나가 존재한다.
    • 적을 때는 2~3명
    • 특별하지 않은 롤의 경우 보통 6~8명
    • 롤이 여러 가지 있는 시스템의 경우 10~25명
    • 제가 생각한 것보다 퍼소나를 꽤 많이 만들라고 이야기하고 있습니다. 특수 롤이 여러 가지 있는 시스템의 경우 각 롤별로 퍼소나를 만들기 위함이 아닐까요?


 

  • 퍼소나 기반의 Journey map
    • 유저 멘탈모델 프로세스 스텝 X 속성
    • Want & Needs / Do / Feel & Think가 포함되어야 함
    • 퍼소나 기반의 Journey map 부분이 흥미로웠습니다. 서비스 디자인 프로세스의 Journey map이 Cooper사의 프로세스와 어떻게 결합되는지 보여주는 사례인것 같았습니다.
    • 서비스디자인에서 흔히 사용하는 Journey map은 꺾은 선 그래프를 통해 감정 상태를 표시해주는데, Feel & Think 부분을 통해 좀 더 구체적으로 묘사하는 것이 다른 점 같아 보였습니다. Want & Needs, Do 의 경우 Person의 데이터가 자연스럽게 녹아들 수 있고, 이 데이터들이 향후 시나리오에 자연스럽게 진행될 수 있게 도와주는 것 같았습니다.
    • 또한 제 견해이기는 합니다만! Cooper사에서 다루는 Journey map과, adaptive path에서 다루는 journey map은 내용 면에서는 큰 차이가 없지만 '관점' 에서 차이를 볼 수 있었습니다. Cooper사의 Journey map은 각각의 Persona를 더 풍부하게 하기 위한 Journey map이고, Adaptive path의 Journey map은 한 명의 사용자라기 보다는 다양한 사용자와 다양한 상황을 살펴보기 위한 목적이 있는 것 같았습니다.
    • 아래 그림은 Patients like me의 Journey map입니다.
    • http://www.patientslikeme.com



Workshop process

  • 가장 최근의 여행에 대한 Journey map 만들기
    • Want & Needs
    • Do
    • Think & Feel
    • Recent Journey
    • 저는 이 곳에 오면서 비행기를 타고 왔기 때문에, 제 겅혐에 대해서 Journey map을 만들었습니다. 2명이 팀을 짜서 진행했는데 저는 GE 다시시는 분과 같이 했습니다.
    • GE 다시니는 분이 저를 인터뷰하면서 데이터를 채워나갔는데, 인터뷰를 하다 보니 제가 불쾌했던 경험들이 체계적으로 정리됨을 알 수 있었습니다.
  • 퍼소나 만들기 (사전에 만들어진 공항 이용 퍼소나 2명 제공)
    • 한 명은 Light 유저, 한 명은 Heavy 유저였습니다.
  • 퍼소나를 기반하여 Journey map 만들기 (사전에 만들어진 퍼소나 2명의 Journey map 예시 2개 제공)
  • 퍼소나 2명중 한 명을 골라 시나리오 만들기
    • 퍼소나는 '현재'의 경험에 비춰진다면, 시나리오는 '미래'에 초점이 맞춰집니다. 이 맥락에서 볼 때는 Journey map도 현재의 경험이겠지요?
  • To-do list 만들기
    • 각각의 퍼소나에 대한 전형적인 Journey를 만들어라.
    • 주로 2~3개, 많게는 8~10개
    • 크든 작든 스토리는 '시작과 끝'이 있어야 한다.
  • 퍼소나를 행복하게 만들 수 있는 방법이 있을까?
    • 좌절했던 경험을 개선하자.
    • 퍼소나가 예상치 않은 즐거움(Unexpectedly good)을 느낄 수 있게 하자.
    • '좌절했던 경험 개선'에 대해서는 익히 알고 있으셨겠지만, '예상치 않은 즐거움'을 느낄 수 있게 하는 부분에 대해서는 간과하고 있었던 것 같습니다. 
  • 미래의 스토리를 이야기하자.
    • 퍼소나의 관점으로 이야기하자.
    • 시나리오는 정보와 결과가 들어있어야 한다.
    • 시나리오는 너무 디테일해도 안되고, 너무 생략되어도 안된다.
    • 시나리오는 제품이 작동되는 상황을 묘사하는 것이 아니다.
    • 흔히 퍼소나 시나리오와 제품 사용 상황을 혼동하는 경우가 있는데, 퍼소나 시나리오는 온전히 퍼소나의 관점으로 기술되어야 합니다.
  • 시나리오 다듬기 - 장소 기반으로 디테일을 살리기
    • 데스크탑, 모바일, 키오스크, 여행중...
  • 퍼소나의 요구사항으로 변환하기
    • 기술적인 요구 사항이 아니다.
    • 퍼소나가 알고 싶고, 성취하고 싶고, 느끼고 싶은 걸로 변환하라.
    • 큰 문제가 뭔지 의논하라.
  • 스토리보드 그리기
    • 일단 구체적인 비전을 수립하라.
    • 디자인 옵션을 고려하라.
    • 시나리오를 그룹핑하고 구조화하기
    • 시나리오를 위한 레이아웃 짜기
      • 간략하게, 흐름이 보이게
    • 퍼소나가 '만약에 ... 한다면?' 이라고 질문해보기
  • 멀티 퍼소나를 위한 Iterating
    • 프라이머리 퍼소나 정의하기
    • 프라이머리 퍼소나가 쓸 서비스 정의하기
      • 모든 경험? 데스크탑, 웹? 모바일? 체크인 키오스크? 여행중?
    • 다른 퍼소나에 이 스토리보드를 적용한다면 어떻게 바뀔 수 있을까?
  • 시나리오를 사용하여 디테일을 살리는 방법
    • 시나리오 기반의 스토리보드를 통해 로드맵 그리기
      • 이건 이번 연도에 하고, 이건 이번 연도 후반기에 하고, 이건 다음 연도에 하고...
    • 퍼소나에 따라 시각적 우선순위 정하기
      • 퍼소나가 중요하게 생각하는 정보는 무엇인가?
  • 4 Things to take away
    • 과거의 Silos 살펴보기
    • 처음의 큰 꿈 가지기
    • 사람의 문제를 사람의 툴로 살펴보기
    • Those who tell the stories rule society (말할 힘이 있는 사람이 세상을 지배한다. - 플라톤)



Posted by 위승용 (uxdragon)

댓글을 달아 주세요

[UX] 가벼운 이야기2013.05.11 02:13


UI 기획을 하는데 있어서 UI 패턴과 원칙을 이해하는 것은 건축가가 구조를 이해하는 것과 같이 기본적이면서도 중요합니다. 또한 패턴과 원칙을 통해 일반적인 디자인 문제를 다루는 광범위한 해결방안으로 적용할 수 있습니다. UI 패턴을 다룬 웹사이트 모음을 정리해 보았습니다. 링크 모음을 모은 것이라서 서로 중복되는 항목들이 있을 수 있습니다.


이 외에도 UI 패턴을 다룬 웹사이트가 있다면 공유 부탁드립니다. 업데이트 하도록 하겠습니다.



관련 글
 UI 패턴과 원칙을 다룬 도서 모음 20+
 UI 패턴을 다룬 웹사이트 모음 (현재 글)


UI 패턴을 다룬 웹사이트 모음

1. Mobile UI design patterns
http://sixrevisions.com/user-interface/mobile-ui-design-patterns-inspiration/

2. 모바일 앱 UI 패턴 사이트 모음
http://userexperience.tistory.com/272

3. 모바일 UI 디자인 패턴 참고 사이트 15개
http://monsterdesign.tistory.com/1630

4. 모바일/웹 UI 패턴, 쇼케이스, 가이드라인 및 리소스
https://sites.google.com/site/designpttrns/




Posted by 위승용 (uxdragon)

댓글을 달아 주세요

[UX] 가벼운 이야기2013.05.11 02:13


UI 기획을 하는데 있어서 UI 패턴과 원칙을 이해하는 것은 건축가가 구조를 이해하는 것과 같이 기본적이면서도 중요합니다. 또한 패턴과 원칙을 통해 일반적인 디자인 문제를 다루는 광범위한 해결방안으로 적용할 수 있습니다. UI 패턴과 원칙을 다룬(일부를 다룬 책도 포함) 도서 모음을 정리해 보았습니다. 본 도서는 pxd 라이브러리 에 구비되어 있으며, 제 유저스토리북에 모아두었습니다. :)

이 외에도 UI 패턴과 원칙을 다룬 도서가 있다면 공유 부탁드립니다. 업데이트 하도록 하겠습니다.


관련 글

 UI 패턴과 원칙을 다룬 도서 모음 20+ (현재 글)

▷ UI 패턴을 다룬 웹사이트 모음


UI 패턴과 원칙을 다룬 국내 도서 모음 (무작위순)

1. 웹 폼 디자인
루크 로블르스키 저 | 민은식, 김성은 역 | 인사이트 | 2009년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=6028170



2. 리치 인터페이스 디자인
빌 스콧, 테레사 닐 저 | 이은아, 김기형, 구신애, 윤지혜 역 | 인사이트 | 2010년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=6255460




3. 소셜 인터페이스 디자인
크리스천 그림리시, 에린 멀론 저 | 윤지혜, 남보현, 신나리 역 | 인사이트 | 2011년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=6764990



4. 검색 패턴
제프 칼렌더, 피터 모빌 저 | 김소영 역 | 한빛미디어 | 2010년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=6440010



5. 웹사이트 해부하기
로버트 후크만, 제라드 스풀 저 | 박지은, 정승녕 역 | 인사이트 | 2012년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=6792964



6. UX 디자인 7가지 비밀
박지수, 김현 저 | 안그라픽스 | 2013년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=7170392



7. Designing web navigation
제임스 콜백 저 | 김소영 역 | 한빛미디어 | 2008년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=4486815



8. 오래가는 UX 디자인
반준철 저 | 한빛미디어 | 2013년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=7131918



9. 퍼소나로 완성하는 인터랙션 디자인 About face 3
앨런 쿠퍼, 로버트 라이만, 데이비드 크로닌 저 | 김나영, 고태호, 유지선 역 | 에이콘출판사 | 2010년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=6401320



10. Designing interfaces
제니퍼 티드웰 저 | 김소영 역 | 한빛미디어 | 2007년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=2954032



11. 아이폰 앱 디자인 정석
조시 클라크 | 김은희, 신미원, 이청언 역 | 한빛미디어 | 2012년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=6831349



12. Human computer interaction 개론
김진우 저 | 안그라픽스 | 2012년 발행(개정판)
http://book.naver.com/bookdb/book_detail.nhn?bid=6863839



13. UI디자인을 잘 하기 위한 테크닉 80
노주환 저 | 비비컴 | 2002년 발행 (절판)
http://book.naver.com/bookdb/book_detail.nhn?bid=108792



14. 모바일 디자인 전략
조셉 카트먼, 리차드 팅 저 | 이재명, 이예나 역 | 위키북스 | 2011년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=6459751



15. 모바일 애플리케이션 UI 라이브러리
노주환 저 | 멘토르출판사 | 2011년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=6627677



16. The design of sites
더글러스 벤 듀인, 제임스 렌데이, 제이슨 홍 저 | 정유한, Yuna, 고태호 역 | 에이콘출판사 | 2011년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=6656725



17. 웹 스타일 가이드
사라 호튼, 패트릭 린치 저 | 김노경 역 | 인사이트 | 2011년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=6714944



18. 경험 디자인의 요소
제시 제임스 가렛 저 | 방수원 역 | 한솜미디어 | 2006년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=264361



19. 콘텐츠 UX 디자인
제니스 레디쉬 저 | 이지현, 이춘희 역 | 위키북스 | 2011년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=6771017



20. 모든 기획자와 디자이너가 알아야 할 사람에 대한 100가지 사실
수잔 웨인쉔크 저 | 이재명, 이예나 역 | 위키북스 | 2012년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=6827383


*이미지 출처 - 네이버 책 : http://book.naver.com/ 



Posted by 위승용 (uxdragon)

댓글을 달아 주세요

[UX] 가벼운 이야기2012.11.28 08:00


글을 시작하며...

Apple iOS6로 업데이트되면서, 모바일 앱스토어도 대폭 업데이트 되었습니다. 

본 글에서는 iOS6 모바일 앱스토어 업데이트의 장점 및 특징에 대해서 소개하려고 합니다. ‘Everything that’s wrong with the App Store in iOS 6‘ 글에서는 iOS6 앱스토어에서의 문제점을 이야기하고 있습니다. 이 글을 참고하시면, 균형잡힌 시각으로 UI에 대해서 생각해 볼 수 있을것으로 기대합니다. 


새롭게 업데이트된 iOS6 모바일 앱스토어의 장점/특징

1. Pad, apple TV화면과 일관성있는 UI 화면 구성

그림1) Pad, TV와 일관성있는 UI 화면 구성

그림2) 홈 화면 변경

iOS6 모바일 앱스토어에 처음 진입하면 등장하는 메인페이지에서 큰 변화를 살펴볼 수 있습니다. 기존 앱스토어 메인 페이지의 리스트 형 구조를 가로 스크롤 구조로 변경하였습니다.

UI 기획자 입장에서는 사용성 측면에서 어쩔 수 없이 리스트 형 구조를 선호할 수밖에 없는데, 리스트 형 구조는 일반적으로 너무 뻔한 UI라는 결과에 부딪히게 됩니다. 기획자의 입장에서 보면, 새로운방식의 UI를 선호하거나 클라이언트를 설득하기 위한 UI로 이런 Fancy한 메인페이지를 택하기 마련입니다.

그러나, 이러한 화면구성의 변경이 그러한 관점 보다는 Pad, TV화면의 일관성 측면에서 접근하였다는 해석도 가능합니다. 저는 이런 관점이 좀 더 타당하다고 생각합니다. 이런식의 화면 구성은 첫 화면에서 좀 더 다양한 콘텐츠를 노출한다는 점에서 앱스토어의 성격(다양한 콘텐츠를 한 화면에 노출)과도 잘 맞아떨어집니다. 

그림3) 앱 검색결과 화면 변경

또한 앱 검색 결과 화면에서 한 개의 앱의 정보가 풍부하게 보여지게 변경되었습니다. 화면 변경으로 인한 장점은 제목만 봐서는 무슨 앱인지 알 수 없으니까 바로 정보를 확인하기 좋은 구조로 설계되었다는 점입니다. 화면 변경으로 인해 생기는 단점은 관련 ‘참고링크’에서 확인하시기 바랍니다.

 

2. 앱 상세 화면 UI 변경

One page 구조에서 3개의 탭 구조로 변경

그림4) 앱 상세페이지 화면 변경

기존에는 앱 상세화면에서 앱 이미지를 리스트 최하단에 제공하고 one page구조로 설계하였습니다. 그러나 업데이트 후 한 페이지에 있던 정보인 ‘세부사항’, ‘리뷰’, ‘관련콘텐츠’의 3개의 탭으로 분리하였습니다. 또한 세부사항에서 이미지를 최 상단에 배치하였습니다. 

 

이는 사용자가 앱을 구매하기 전에 이미지를 먼저 보려는 Needs를 해소하기 위한 변경으로 생각합니다. (이는 pxd 사내에서 이루어진 rapid interview에서도 나온 결과입니다.)

그럼에도 불구하고 기존 앱스토어에서는 앱 이미지를 최 하단에 배치했었습니다. 그 이유는 앱 이미지의 경우 이미지를 불러오는 속도 가 문제가 될 수 있습니다. 이미지를 하단으로 배치하면 사용자는 이미지가 로딩이 빨리 되는것같은 착각을 할 수 있기때문에, ‘인지적측면의 이미지 로드’를 줄여준다는 장점이 있기 때문입니다.

모바일 앱스토어를 업데이트하면서 앱 상세화면 이미지를 상단으로 과감하게 올린걸 보면, 이미지 불러오는 속도의 문제가 어느정도는 해소 되었다고 생각합니다.

 

유동적인 탭 구조로 변경

앱 상세화면에서 3 개의 탭 구조로 변경되었다는 점은 위 내용에서도 언급한 내용입니다. 변경된 세 개의 탭도 일반적인 3 개의 탭이 아닙니다. 탭이 항상 상단에 고정되어있는 구조가 아니라 일정 위치에 올라가면 항상 보이는 유동적 구조로 설계하였습니다. iOS 모바일 주소록 리스트 구분자를 확인하시면 이해가 될 것입니다. 

탭을 항상 고정되어있는 구조로 설계하면 공간을 항상 차지한다는 문제가 있고, 그렇다고 스크롤에 따라 탭을 사라지게 하면 네비게이션을 어렵게 한다는 문제가 있습니다. 이러한 유동적인 방식의 탭 UI는 두 개의 서로 다른 문제를 해결하기 위한 방식으로 생각해 볼 수 있습니다.


3. Flow를 고려한 업데이트 UI 변경

복수의 앱 업데이트를 고려한 UI변경

그림5) 업데이트 화면 변경

기존의 앱스토어에서 앱을 업데이트 하면 바로 앱스토어를 나가고 홈 화면으로 이동하여 복수의 앱을 업데이트할 때에는 짜증이 났습니다. (기존에는 한 번에 한 개의 앱만 업데이트하기 편한 구조였습니다.) 

복수의 앱을 업데이트 하는 순서를 살펴보면,

 1.앱 이름 확인 → 2.업데이트 내역 확인 →  3.업데이트(이때 Home화면으로 이탈)  4.다시 앱스토어를 켜고 반복

하는 방식으로 과정자체가 번거롭게 설계되어 있습니다.

 

반면, 업데이트된 앱스토어는 다중 업데이트를 고려하여 UI가 변경되었습니다. 물론 이는 기술적인 업데이트가 아닌 UI적인 업데이트임을 밝힙니다. (기술적인 다중 업데이트 기능은 이전 앱스토어에서도 지원을 했습니다.) 

업데이트된 앱스토어에서 다중 업데이트를 하는 순서를 보면, 

 1.앱 이름 확인  2. 업데이트 내역을 한 화면에서 확인  3. 업데이트  4. 다른 앱 이름 확인.

하는 방식으로 과정이 간편하게 변경되었습니다. 이 모든것들이 한 화면에서 이루어진다는 점이 놀랍습니다!

 

한 화면에서 업데이트 상황 확인 가능

또한 업데이트 화면에서 아코디언 형식의 UI를 통해 어떤항목이 업데이트가 되었는지를 한 화면에서 바로 확인이 가능한 구조로 변경되었습니다.

  

글을 마치며...

본 포스팅에서는 iOS6 모바일 앱스토어의 업데이트된 내용에 대해서 UI관점으로 살펴보았습니다. 늘 그렇듯 UI설계에는 정답이 없습니다. UI 설계 이후 어떤점들이 좋아지면, 반대로 어떤점들이 나빠지게끔 마련입니다. 결국은 기획자의 관점 및 Persona같은 좋은 가이드를 통해 Trade off해야 할 것입니다.


*이 글은 Tech it 에도 실린 글입니다.



PS. 본 글은 업데이트된 UI가 좋다 나쁘다를 판가름할 수 있는 기준(퍼소나)에 맞추어 평가한 것이 아님을 밝힙니다. 

기존 버전 앱스토어에 대한 사내 약식 인터뷰를 통한 인사이트 및 필자(기획자)의 경험에 비추어 해석한 것이므로 기준이 퍼소나에 맞추어져 있지 않고 필자(기획자)에 맞추어져 있습니다. 그래서 해석보다는 객관적인 사실에 좀 더 집중하려고 노력했으나 관점에 따라 호불호가 갈리는 기능들이 존재합니다. 예를들면, 3번 주제인 복수의 앱 업데이트를 고려한 UI변경은 앱 업데이트가 빈번한 사용자에게는 유용한 변경이겠으나, 앱 업데이트를 귀찮아하는 사용자에게는 불편한 변경이 될 것입니다. iOS 6 모바일 앱스토어의 업데이트는 이러한 관점에서 봤을 때 라이트유저를 위한 기능에서 헤비유저를 위한 기능으로 조금씩 이동하는 추세를 보여줍니다.


Posted by 위승용 (uxdragon)

댓글을 달아 주세요

[UX] 가벼운 이야기2012.09.18 09:00


글을 시작하며 

[01] Band (이미지출처 하단 명기)


Micro SNS의 등장 이후 특정 그룹을 타겟팅한 SNS가 등장했고, Group형 SNS도 등장했다. 카카오톡(지인간의 채팅), 카카오스토리(지인간의 사진 공유 SNS), 카카오아지트(그룹간의 SNS)의 포지셔닝을 보면 카카오의 전략이 다각도로 이루어졌다는 것을 알 수 있다. (관련 기사 : http://me2.do/FfD7ct2)

NHN도 그룹 SNS 성격의 모바일앱 Band를 내놓고 발빠르게 움직이는 모습이다. Band 서비스의 정확한 시작은 알 수 없으나, SNS의 미투밴드에서 그 출발을 미루어 짐작할 수 있다. 미투밴드는 미투데이 사람들끼리 친목을 도모하기 위한 공개(혹은 비공개)형 소모임이다. (미투밴드 : http://me2.do/GiO7DLF)

그리고 밴드 서비스의 총괄 기획은 NHN 이람 이사님께서 하신 것으로 보여진다. 비공개형 Group SNS를 왜 기획하게 되었는지에 대한 심도있는 글이므로 꼭 읽어 보시기를 권한다. (관련 글:http://me2.do/GVTmyg6)

위 글에 영감을 받아 페이스북, 네이버, 카카오, 다음, Path의 SNS를 포지셔닝 해 보았다. 제공하는 모든 기능을 포지셔닝한 것이 아니므로 실제와 약간 다른면이 있을 수 있다. (이를테면 미투데이에서도 비공개 그룹형 SNS인 미투밴드를 제공하고, 채팅을 지원하므로 실제로는 페이스북과 포지셔닝이 겹친다.)

[02] 공개/비공개, 게시판/채팅 유형에 따른 SNS 포지셔닝 맵


- 페이스북은 공개형 SNS를 필두로 채팅, 그룹형 서비스를 지향하고 있으며, 커뮤니케이션과 관련된 거의 모든 활동을 지원한다.

- NHN(네이버)은 미투데이(공개형 SNS), 밴드(비공개형 SNS), 라인 (비공개형 SNS – 채팅형)을 런칭하여  공개형 SNS와 비공개형 SNS의 양 축을 공략하고 있다. 밴드 서비스는 특이한 점이 게시판형과 채팅형을 구분하지않고 비공개형 SNS에 최적화한 형태를 보여주고 있다는 것이다.

- 카카오는 카카오스토리(공개형 SNS – 게시판형), 카카오톡(비공개형 SNS – 채팅형), 카카오아지트(비공개형 Group SNS), 카카오수다(공개형 Group SNS – 현재 서비스 종료) 등 SNS의 다양한 분류에 최적화한 개별 서비스들을 다양하게 제공하고 있다.

- Daum은 요즘(공개형 SNS), 캠프(공개형-비공개형 SNS), 마이피플(비공개형 SNS – 채팅형)을 런칭하였다.

- Path는 비공개형 SNS를 필두로 일부 공개적인 형태를 보여주고 있다.

(본 포스팅은 SNS 전략을 다루고자 하는 글이 아니므로 각 회사의 서비스 전략 보다는 ‘현상’을 설명하는 정도로 그치고, 그 중에서도 밴드 서비스를 집중적으로 살펴보려고 한다.)

네이버에서 Group형 SNS ‘Band’를 런칭한다고 했을 때 無異 님을 필두로 필자의 회사에서 사내 친목을 도모하기 위한 수단으로 활용해보려고 밴드 앱을 이용해 보았다. 기존에는 친목 도모용으로 Path를 잘 활용하고 있었으나, 마침 Path의 서버가 느려지는 등 사용성의 문제가 있었기 때문에 Band를 사용 해 보고 서비스가 매력적이면 옮기는것도 고려하고 있었다.

이번 포스팅은 짧은 기간동안 이지만 필자의 회사사람들과의 경험을 토대로 한 Group형 SNS Band의 매력적인 부분과 다소 아쉬운 점을 논하고, Group SNS를 기획할 때 어떤 점들을 고려해야 할지를 기술하려 한다. 언급된 내용은 비단 Group형 SNS 뿐 아니라 일반적인 서비스 기획시에도 응용할 수 있을 것으로 보인다. 그만큼 일반적이고 어떻게보면 뻔하다고 느낄 수 있는 이야기를 다루고 있다.


Band App의 매력적인 부분은 다음과 같다.

1. 아이덴티티가 돋보이는 서비스이다.

[03] 밴드 색상 변경


밴드라는 아이덴티티를 고무밴드로 풀어낸 점이 인상깊었다. 또한 밴드 색상을 변경하면 밴드의 아이덴티티 컬러가 바뀌는 것도 좋았다. 


2. 정갈한 UI를 보여준다.

[04] 이미지 모아보기


밴드에서는 이미지를 모아 보여주는 뷰가 있는데, 사진을 한눈에 모아보기에 좋은 화면으로 생각한다. 또한 그 외에도 디테일한 부분에서 GUI의 장점이 돋보였다.


3. 채팅방에서 알림/끔 기능을 제공하는데 이 점 마음에 든다.

[05] 채팅방 알림 켬/끔 기능


채팅방 알림 켬 끔 기능은 유저의 성향과 상황에 따라 가변적인데, 쉽게 켬 / 끔을 지원하는 기능은 장점이라고 생각한다.


4. 댓글 시스템 기획 시 디테일이 돋보인다.

[06] 특정 멤버 대댓글 달기


특정 친구에게 댓글을 달고 싶을 때 특정 친구 댓글을 클릭하면 자동으로 친구 이름이 남겨진다. 그 외에 @친구이름을 입력해도 마찬가지로 입력이 가능한데 고민의 깊이가 느껴지는 UI였다. 특정 친구 댓글을 클릭하면 자동으로 친구 이름이 남겨지는 방식은 미투데이 UI에서도 활용했던 방식이다.


Band App의 아쉬운 점은 다음과 같다.

1. 게시판에서 알림 기능은 게시판 기능과 별도로 분리했으면 한다.

[07] 게시판의 알림 영역과 게시판 영역


알림 기능과 친구의 소식 기능은 별도로 분리되어야 한다. 필자가 쓴 카카오스토리 UI/GUI 글에도 관련 해서기술한 바 있는데 참고했으면 한다. (http://story.pxd.co.kr/520)


2. 사진첩에서 남긴 댓글의 수를 확인하기가 힘들다.

[08] 사진첩 화면


사진첩을 같이 감상하고 즐기는 것은 좋지만, 사진첩에 댓글이 달렸을 때 어디에 달렸는지 확인하기가 어렵다. (글 작성 초기에만 하더라도 댓글 수를 보여주는 GUI가 없었는데, 현재 추가되었다.)


3. 사진 삭제가 어렵다.

[09] 사진 삭제 기능 접근 시나리오


사진 삭제 기능까지 접근하기가 힘들다. 사진 삭제 기능을 1 depth 앞 단계로 빼도 되지 않았을까. (현재 사진 삭제 기능은 1 depth 앞으로 뺀 상태로 업데이트 되었다.)

4. 디테일한 일정 설정이 어려움

[10] 일정 만들기 화면


2일 이상 일정을 등록하기 위해서는 수동으로 2일의 일정을 등록해야 하는 어려움이 있다. 또한 일정 시간 등록을 위해서도 사용자가 수동으로 기입해줘야 한다.


그룹간 커뮤니케이션 서비스를 기획할 때 고려해야 할 사항들은 다음과 같다.

 1. 내 친구가 그 서비스를 이용할 수 있게 해야 한다. 

내 친구를 이 서비스로 쉽게 영입시킬 수 있어야 한다. 내 친구들이 이 서비스를 이용할 수 있는 장점이 분명히 존재해야 한다.


2. 기본적으로 속도와 안정화가 확보되어야 한다.

애초에 사내 커뮤니티로 활용하고 있던 Path의 대안을 고려하였던 부분도 바로 속도였다. 아무리 UI/GUI가 멋지다고 하더라도 기본적인 속도가 받쳐주지 않으면 서비스를 이용하기 힘들다. 카카오톡도 한때 서비스 속도로 인해 유저의 이탈을 초래하였던 쓰라린 경험이 있다. 아직 안정화 작업 중이겠지만 밴드 서비스는 사용 중에 종종 잘 꺼진다. 이러면 신뢰를 얻기 힘들다.


3. 친구가 글을 작성하면 적시 적소에 알려줄 수 있어야 한다.

알림 기능을 지원해야 하며, 알림을 하더라도 어떤 것을 어떻게 알려 줄지 고려되어야 한다. 물론 이건 밴드 서비스에서도 잘 하고 있는 부분이다.


4. 내가 원하는 기능에 대한 접근이 용이해야 한다.

친구들끼리 그룹 채팅방을 만든다면 어떤 서비스를 이용할 것인가? Path? Band? 카카오톡? 현재 같은 그룹의 친구들과의 커뮤니케이션 채널로 카카오톡과 Band를 이용하고 있는데, 채팅은 카카오톡이 좋고, 사진 공유는 Band가 좋아서 두 개의 서비스를 나눠서 이용하고 있다. 사진 공유 화면은 Band의 특장점으로 여겨진다. 친구들과의 커뮤니케이션 채널은 아직도 카카오톡이 좋은데, 논리적으로 설명하기는 힘들지만 밴드는 카카오톡에 비해서 채팅 UI에 대한 접근이 어렵다고 느껴졌다.


5. UI, GUI의 디테일은 장기간 사용시 서비스의 만족도를 높이는 데 기여할 것이다.

UI, GUI의 디테일도 물론 중요하다. 하지만 그 전에 내 친구가 이 서비스를 사용 해야 하고, 적절한 속도와 적절한 알림 등 기본적인 것들이 제공 될 때 의미가 있다.


글을 정리하며

Group SNS ‘Band’ App은 그룹간 SNS App으로써 새로운 가능성을 제시하였다. 특히 내 친한 친구들과 채팅하고 사진을 공유할 수 있다는 장점이 있다. 아직 기능이 좀 더 다듬어져야 하겠지만, UI / GUI 적으로도 고민을 많이 하고 만든 서비스로 보여진다. 

다만 카카오톡, Line과 같은 채팅 서비스들과 비교해 봤을 때 어떤 차별점이 있을지 의문이다. 결국에는 접근성의 문제인데 사용자들이 카카오톡과 같은 그룹 채팅방을 그대로 사용할 지 아니면 카카오톡은 그대로 유지하고 Band 앱을 적극적으로 활용할지는 시간을 두고 지켜볼 일이다. 이 선택은 앞으로 사용자들이 할 것이다. 

Band는 매력적인 서비스임은 분명하며, 앞으로도 많은 점들이 다듬어 질 것으로 예상된다.


*이 글은 Tech it! 에도 실린 글입니다.

이미지 출처

밴드 웹사이트 : http://campaign.naver.com/band/


참고사이트

김범수 "모바일은 패러다임의 신세계다." : http://me2.do/FfD7ct2

밴드, 네이버가 생각하는 소셜네트워크 : http://me2.do/GVTmyg6

밴드 웹사이트 : http://campaign.naver.com/band/


Posted by 위승용 (uxdragon)

댓글을 달아 주세요

[UX] 가벼운 이야기2012.05.01 23:51


카카오톡에서 최근 사진기반 SNS인 '카카오스토리'를 런칭했습니다. 카카오스토리를 사용하는 한 명의 유저로써 본 포스팅을 통해 카카오스토리를 UI / GUI 관점에서 살펴보고 주로 아쉬웠던 점을 기술하였습니다.

* 본 포스팅은 아이폰 앱 0.7 버전 기준으로 작성되었습니다.


UI의 아쉬움

1. 내 히스토리를 보기 힘듭니다.

카카오스토리는 사진과 글을 같이 올렸을 경우 미리보기가 힘듭니다. 또한 상세 사진으로 접근했을 때에는 다시 원래 화면으로 돌아온 뒤 이미지를 탐색하는 구조를 사용하고 있습니다. 물론 본 UI의 경우 많은 사진을 훓어보기에 적합한 UI입니다. 하지만 글과 이미지를 같이 미리본다는 관점에서는 적합하지 않은 UI로 보여집니다. 또한 하나의 이미지를 확인 한 뒤에는 다시 '이전' 버튼을 눌러 탐색하는 것도 불필요한 이동을 초래하는 것 같습니다.

인스타그램은 이런 방식을 보완하기 위해서 썸네일뷰와 리스트뷰를 동시에 제공하고 있습니다. 썸네일뷰는 전체적인 이미지를 훓어보는데 용이하고, 리스트뷰는 이미지와 글을 같이 볼 수 있습니다.

[카카오스토리와 인스타그램의 내 정보]

2. 소식에 내 친구의 소식과 알림을 같이 사용하고 있습니다.

SNS의 경우 내 친구의 소식을 중요한 비중으로 다루고 있습니다. 소식 알림 또한 중요한 요소이긴 합니다만, 친구의 소식과 중복해서 사용할 경우 정작 중요한 친구의 소식이 묻힐 우려가 있습니다. 타 SNS처럼 알림 기능과 친구의 소식 기능을 분리할 것을 권장합니다.

[친구의 소식과 알림을 같이 제공하는 UI]

3. 잘못된 친구신청을 취소할 수 있는 방법이 없습니다. 받은 친구신청을 지울 수 있는 방법이 없습니다.

친구신청 버튼을 눌러 친구신청을 했는데, 바로 친구 신청이 되었습니다. 잘못 누른건데 친구 신청을 변경할 수 있는 방법이 없어서 당황했습니다. 또한 역으로 친구 신청을 받았는데 친구 수락을 지울 수 있는 방법이 없어서 당황했습니다. 친구 신청 방지 UI는 추가되어야 할 것 같습니다. 또한 친구 수락을 지우는 기능은 향후 추가될 것으로 기대합니다. 

[친구 수락을 없앨 수 있는 방법이 없음]

4. 글 작성시 썸네일 이미지를 클릭하면 키패드가 닫힙니다.

이미지를 클릭하면 왜 키패드가 닫힐까요? 이미지를 확대해서 볼 수는 없었던 걸까요? 이미지를 클릭하면 큰 이미지를 보여주고 글 입력 영역을 클릭 시 키패드가 닫히게 하는 것이 좋을 것 같습니다.

[이미지를 클릭하면 키패드가 내려감]

5. 기타 UI 디테일의 아쉬움

편집 상태에서는 편집 버튼을 완료로 바꾸어야 합니다. 

좋아요 버튼을 눌렀을 때 되돌리기 위해서는 '삭제'가 아니라 '취소'가 좋을 것 같습니다.

[편집중 화면에서도 버튼이 편집으로 보여짐, 좋아요 버튼을 눌렀을 때 되돌리기 버튼은 삭제가 아닌 취소]


GUI의 아쉬움

GUI적인 부분에도 몇 가지 아쉬움이 있었는데요, UI기획자의 입장에서 본 것이라 다소 입장 차이가 있을 수 있습니다.


1. 디테일이 약간 아쉬운 GUI

내 스토리 화면에서 글을 쓰면 포스트잇 색상이 랜덤으로 배열되는데 색상이 뭔가 아쉽습니다. 좀 더 예쁜 색깔로 쓸 수 있었을 것 같은데 아쉬워요.

친구 화면에서 친구수락 버튼이 중앙정렬 되지 않았네요. 사소한 부분이지만 이상하게 신경쓰이더군요.

[포스트잇 색상, 친구수락 버튼]

2. 직관적인 아이콘 사용 필요

왜 친구 공개는 잠금 아이콘을 사용했을까요?

왜 모두 공개는 열림 아이콘을 사용했을까요?

왜 필독 친구는 클립 아이콘을 사용했을까요?

아이콘 메타포를 좀 더 직관적으로 사용했으면 좋을 것 같습니다. 물론 설명 문구를 제공하기 때문에 학습이 가능하겠지만, 설명 문구가 없이도 이해할 수 있는 아이콘을 사용한다면 굳이 설명을 하지 않아도 이해할 수 있을 것 같습니다. 해석이 필요한 아이콘보다는 좀 더 명확하게 이해할 수 있는 아이콘이 필요합니다.

[직관적인 아이콘 사용 필요]



카카오스토리의 좋은 UI

그러나, 카카오스토리도 특유의 장점을 가지고 있습니다. 장점을 살펴보도록 하겠습니다.


1. 카카오톡과 연계된 UI

카카오스토리는 인스턴스 메신저인 카카오톡과 유기적으로 연결되어 있습니다. 많은 유저를 확보하고 있는 카카오톡과 연계하여 카카오톡의 유저를 카카오스토리로 유입시키는데 성공했습니다. 결국 서비스가 성공하려면 사람들이 많이 유입되어야 되는데, 사람들을 유입시킬 수 있는 방법을 잘 고민한 것 같습니다. 

카카오스토리에서 친구 추가를 하면 카카오톡으로 메시지가 보내집니다. 또한 카카오톡에서 친구 프로필을 보면 카카오스토리 사진들이 보여져서 카카오스토리로 자연스럽게 유입될 수 있게 했습니다. 이런 점은 카카오스토리가 앞으로도 카카오톡의 상승세를 이어 받을 수 있는 장치로 보입니다.

[카카오스토리에서 친구신청을 하면 카카오톡으로 메시지가 보내짐]

2. 소소한 인터랙션을 잘 챙겼습니다.

'좋아요' 버튼을 누르기 위해서 하단에서 튀어나오는 애니매이션은 느낌이 좋더군요. UI기획을 하면서 흔히 놓치기 쉬운 부분이 객체 인터랙션인데 이런 부분은 잘 챙긴 것 같았습니다. 이런 부분들이 몇몇 군데에서 잘 보여지면 서비스 퀄리티 향상에 기여를 할 수 있겠지요.

[카카오스토리의 소소한 인터랙션]


정리하며...

카카오스토리는 아직 완성된 서비스가 아닙니다. UI 디테일이나 GUI 디테일이 아직은 아쉬운 서비스입니다. 일차적으로는 런칭 시간이 부족했을 것으로 생각됩니다. 그리고 각종 사진기반 SNS들이 난무하는 상황에서 다소 완성도가 떨어지더라도 빠르게 런칭을 하는 것을 선택했을 것으로 여겨집니다. 

물론 UI나 GUI가 완벽하다고 해서 항상 서비스가 성공하지는 않습니다. 다소 아쉬운 점은 꾸준한 업데이트로 메워 나갈 수 있겠지요. 지속적인 업데이트를 통해 카카오스토리의 성공을 기대해봅니다.


참고자료

- 카카오스토리 웹사이트 : http://www.kakao.com/story



Posted by 위승용 (uxdragon)

댓글을 달아 주세요