Are UX Ready?

[도서] UX / UI / 디자인 도서 목록 (userstory book)

uxdragon — Wed, 28 Dec 2011 23:23:36 +0900

2010년 8월 29일에 업데이트한 'UX / UI / 디자인 도서목록'을 2011년 버전으로 업데이트 하였습니다.
(비 UX 도서도 섞여있습니다. -_-;)
http://uxdragon.userstorybook.net/

기존에는 리스트형식으로 되어있었는데, 유저스토리북 서비스를 활용하여 업데이트를 하였습니다.
우측의 '내가 만든 책 목록'을 보시면 책 종류별로 카테고리가 되어있으므로 참고하시면 좋을 것 같습니다.

향후에는 개인 UX 도서목록이 아닌 UX전문가가 모여 만드는 'UX 라이브러리' 같은걸 만들어보면 좋겠네요. :)

감사합니다.

[세미나] 금융권에서 바라보는 UI, UX디자인 후기 (HCI연구회 11월 세미나)

uxdragon — Mon, 19 Dec 2011 03:01:02 +0900

HCI연구회 11월 세미나로 금융권에서 바라보는 UI, UX 디자인 세미나를 듣고 왔습니다. (2011.11.26 금)
발표 요약본을 공유합니다.

금융권에서 바라보는 UI, UX디자인

- 정성재

- 하나은행 신사업추진부 UCD팀장

UX iceberg

본 정의를 알면 전문가임
Strategy > Scope > Structure > Skeleton > Surface

Hugh dubberly (2008)

제조 > 제품 > 인터랙션 디자인 > 서비스 디자인

UI, UX, Co-UX, Service design

Co-UX
Machine to Machine

Man to Man

Service design

Customer
Touchpoint (Blueprint)
Contact person

다양한 비대면 채널을 사용하는 사용자 그룹 (By Everett Rogers)

기술광, 공상가/몽상가 = 스마트폰 뱅킹, VM 뱅킹 (Chasm)
실용주의자, 보수적인 사람 = 웹사이트, ATM, 폰뱅킹

30대 후반

느리고/의심이 많은 사람 = 실제 은행

UI 실무 분야

퍼블리셔, 코더가 UX, UI에 눈을 뜨기 시작했음
Bump 이체 쓸것 같냐? 안써도 기사에는 난다. -> 소비자 브랜딩 측면에서 한다. 각종 기반 기술에 대해서 알아야 한다.

요리하는 Experience

Component = 믹서
Tool = 믹서기
System = 주방
Experience = 요리

은행 Experience

Component = 터치스크린
Tool = ATM
System = 은행에 설치된 ATM
Experience = ATM을 이용한 이체 서비스

어떻게하면 사용자 줌심의 UI / UX 디자인을 할 수 있을까?
올바른 방법론

정성조사

필드리서치
인뎁스 인터뷰 등

이해

고려할 요소들

사람
기술
비즈니스

관찰

컨셉 만들기

브레인스토밍
스토리보드
그리기
모델

시각화 -> 사용성 검증 / 수정 -> 프로토타이핑 (… 반복)
실행

구현 F/U
소프트웨어 개발
앱스토어 업로드
업그레이드

각종 채널의 VOC, 실제 사용환경을 토대로 재 적용
브레인스토밍 이전단계를 잘하는 회사가 좋은 회사임

사용자 중심의 심성 모형을 제공

디자이너 모형 -> 시스템 모형 <-> 사용자 모형
ATM : 카드를 먼저 빼야 돈이 나오는 구조로 변경
비디오 채널을 4번 채널로하면 사용자가 이해할 수 있나?
공인인증서 재발급 너무 어려움

인문계 사람들이 좋다.

Creative 함
뭔가 새로운것 좀 해봐
스탠포드 대학의 D-School 다이어그램 참조 (Multidisciplinary design team)
Technology / Business / Human values
인간에 대한 이해가 중요하다.

Personal in-depth interview

FGI는 이제 할게 못된다.(목소리큰 사용자의 의견이 들어가는 순간!)
실제 타켓유저를 데리고 올 수 있느냐?
몇명을 데리고 올 수 있느냐? (정규분포 30명?)
모더레이터가 중요하다.

60세 이상 사용자 인뎁스인터뷰 해본 경험?
60세 이상 사용자도 인뎁스인터뷰 해봐야된다.

클라이언트는 모든 보고서가 끝나면… '디자인 인사이트가 있냐?' 부터 물어보는 경향이 있다. 좋던 싫던 인뎁스인터뷰에 참여해야 한다.

0000 00 에 대한 핵심 니즈

접근성 <-> 내용성
안전성 <-> 사용성

0000 00 개발 방향 정하기

앱은 모바일 웹사이트가 아니잖아요.
필요한 기능만 모아서 간단하게 썼으면…

사용자 이해를 위한 Persona 작업

사용 시나리오
Behavioral pattern 분석 후 인사이트 추출
산고의 고통이 필요한 작업이다.
강남역 미디어 폴 : 공공장소에서 먼지가 잘 묻는다.
그렇다면 ATM 기기에는 먼지가 쌓일까?
패널을 바꾸는데는 가격의 문제가 있음(실제 구현이 되는가?)

컨셉 UI 디자인, 내부 리뷰 및 시안 확정

화이트 보드 80개 사용하고 있음

메뉴 화면 설계 / 비주얼 가이드

설계 시 효율을 생각해봐야 한다.

UX, UI 디자인 전문가가 되기 위한 각종 Tips (개인, UX조직, 회사)

1개라도 제대로 하면 된다.
인간을 제대로 이해/관찰하는 능력

심리학 책을 읽어라. 서점가서.

리서치 능력(UX 컨셉, 벤치마킹 능력)
UI 기획 능력 (UT)
디자인 인사이트 추출 및 시각화 능력
정보구조(IA) 설계 능력
프로토타입 개발 능력
어학 능력
UI 컨셉 검증 능력
커뮤니케이션 스킬 (with 협업부서)

일 하는 과정을 사진으로 찍어라. 주욱 붙이면 프로세스가 됨. (bottom-up)
업종별 UI / UX 조직

제조사(전기,전자), UI 에이전시, 통신사, 기타, 포탈, 리서치사, 소프트웨어 개발, 금융권(은행,증권), SI업체 (SDS, LG-CNS), 콘텐츠관련 전문 CP

개발자, 디자이너, 프로젝트 매니저들은 개개인별로 보는 시각이 다르다.

디자이너는 개발자나 PM이 보는 시각을 다르게 보여줄 필요가 있다.
이러지좀 마세요…

조직 문화에서 오는 이슈

근면한 조직 구성원 <-> 창의적 조직 구성원
자율적 조직 구성 <-> 통제적 조직 구성
주인정신형, 집단지성형, 일사분란형, 군계일학형
http://bizcomm.cafe24.com/prmarket-insight/2011072000.html

도널드노먼의 보이지않는 컴퓨터

의자 : 엔지니어, 마케터, 디자이너 vs 사용자
얼마나 다양한 시각으로 사용자를 오해하고 있는가를 단적으로 보여주는 사례

감사합니다.

[세미나] UX intensive 후기 (2011.10.7)

uxdragon — Tue, 01 Nov 2011 10:00:00 +0900

2011년 10월 7일 금요일
장소: 포스코 P&S 타워
공식 블로그 : http://blog.naver.com/ux_intensive

UX intensive를 다녀왔습니다. 내용 정리 및 감상 중심으로 공유합니다.
(정리가 미흡한 점이 있을 수 있으나 이점 양해 부탁드립니다.)

터치 인터페이스 기술동향

- 사용자의 터치 및 근접 감지에 대한 기술 및 연구사례

이기혁교수 카이스트 HCI 연구실

Smart TV, Smartphone, PC/Notebook의 터치 인터페이스의 기술 동향에 대해서 알 수 있는 강의였습니다. 기술적인 부분에 대한 강의라서 기술 전문 용어들은 생소한 감이 없잖아 있었습니다.

인상깊은 기술중에는 Remote touch를 꼽을 수 있습니다. 일반적인 터치기술은 터치를 해야 된다는 제약점이 있는 반면 Remote touch는 터치를 하지 않더라도 손의 영역을 인식해서 구현이 가능하다는 점이 특이했습니다. 이 기술이 범용화된다면 등장할 수 있는 서비스는 어떤 것들이 있을지 기대됩니다. 각각의 기술 중에서 최고의 기술도 중요하지만, 어떤 도메인에 사용되느냐에 따라 적절한 기술이 쓰일 수 있다는 말씀이 인상적이었습니다.

1. Smart TV

TV 리모트 옵션

- RC car 콘트롤러

- 포인팅 & Shooting

- 제스쳐

- Remote touch : 손가락의 그림자를 통해 인터랙션 수행

- panasonic EZ Touch

- hover tracking touchpad

- iGesturePad

- Finger shadow sensing

Capacitive VS Optical

- Optical이 더 좋음

RemoteTouch UI

2. Smartphone

- Force gesture

- 압력, 수평 수직 감지 센서

- 최고의 기술이 무엇인지가 중요한 것이 아니라, 애플리케이션에 따라 적절한 기술이 쓰일 것

3. PC / Notebook

- 반 이상의 영역을 키패드가 차지하고 있음

- Dual screen notebook

- Asus at Cebit 2009

- Toshiba libretto w100

- Problem to solve

- Gesture design

- Control-Display mapping

- Feedback (texture가 없음, 반응이 없음)

- Multi touch gesture

- Mapping

- TactaPad (Tactiva, 2005)

UX, 그 개념, 구조, 범위 디자인의 위상과 역할

이은종교수 한동대학교

UX의 개념과 그간의 UX 디자이너의 롤 변화를 통해, 디자이너가 가져야 할 역할에 대한 강의였습니다. 그간 알고있었지만 명쾌하게 정리되지 않았던 UX의 개념에 대해서 차근차근 설명해주셨습니다.

우리는 UX 프로젝트를 하면서 중요한 UX 요소를 발견하여 프로젝트에 반영을 하곤 합니다. 하지만 항상 프로젝트가 성공하지는 않습니다. 어떻게 하면 프로젝트를 성공으로 이끌어 낼 수 있을까요? 이은종 교수님은 전략적 접근을 강조하고 있습니다. 모든 UX 요소가 함께 존재할 경우 충돌과 방해요소가 될 수 있으므로, 해당 상황에서 가장 중요하며 다른 요소가 부족하더라도 압도할 수 있는 요소를 찾는 것이 중요합니다.

1. UX, 그 개념, 구조, 범위

a. 감성 vs 실용

i. 스마트 냉장고

1. 손이 아파 못쓰겠다.

ii. 네비게이션

1. 카메라를 찍으면 해당 장소를 알려줌

b. 기능성 vs 사용성

i. 나는가수다

1. 내레이션, 표정, 포즈, 스토리, 진정성

c. UX에서 중요시 여기는 요소들

i. 다양한 사용자

ii. 휘발성이 강한 감정의 편린들

iii. 다양하고 복잡한 정보의 흐름

iv. 작아 보이지만 중요한 행위들로 구성

v. 내재된 정신 내면적 사고양식 파악의 어려움

d. UX의 구성

i. UX 상황에서의 목표 : 기대 목표(유용적목표:기능성+사용성, 정신적 목표:관계형성, 보안, 휴식, 프라이버시), 유희적 니즈(아름다운 소리, 그립감, 감촉, 예쁜 모양)

e. UX 디자인이란 무엇인가?

i. 해당 브랜드가 가지는 특성 하에 유용적, 유희적인 목표를 효과적으로 이루기 위해 구성해보는 4차원의 공간

f. UX의 구성원들

g. 칼라코드 사례

i. 밤에는 볼 수 없음. context를 고려해야 함

h. Profession vs Role

i. 총체적인 UX관점에서 역할의 재 분류가 필요.

2. 디자인의 위상과 역할

a. 전통적 의미의 디자인(심미성) -> 디자인 결과물에 영향을 주는 요소 및 가치들

b. 디자이너의 역할이 늘어나고 있다.

i. ideation vs creation

ii. 이론적 근거가 있어야 함

iii. 조직화

iv. Seamless rational 등

c. 디자인의 경쟁력

i. Design thinking

1. 디자이너의 해결안이 아름답고 창의적이며 제한적이지 않는 것은 아는것이 별로 없어서이다. - don norman

ii. creativity

1. 정보가 없는 ideation은 가치가 없다.

iii. savvy

1. KTX - 산천

iv. emotion

1. 디자인과 인간심리, visual interface design

v. 디자이너의 역할

1. 미스테리 샤퍼

2. UX관점에서 요구되는 디자이너의 상

a. 장점을 강화하려는 시도 : 더욱 차별화된 상황을 만들 수 있음

vi. UX의 미래

1. UX의 새로운 이슈들

a. 중요한 UX요소들을 넣었는데 왜 실패하나?

b. 전열 모드?

i. 열 교환

c. 정의 vs 정

i. 상당히 심도있는 조사와 다방면의 사용자 경험을 개선한 결과물이 왜 실패할까?

ii. 이상과 현실은 항상 부딪히며 기업의 사정이라는 것이 있다.

d. UX의 전략적 접근의 필요성

i. 시장의 판세속에서 접근을 해야 함

ii. overriding UX factor

iii. normative approach

iv. holistic approach

v. trend approach

vi. strategic approach

e. pitfall

i. 판세 변화의 파악보다는 지난 성공요소에 집중하기

ii. UX 전략가의 취향과 한계

iii. UX 경험 요소의 부분합을 해결안으로 제시

iv. 머리속의 경험, 개인적인 경험의 보편화

v. 사용자 조사에 기반하면 잠재하고 있으나, 완전히 새로운 경험요소를 파악하기 어려움

2. UX전략을 잘 하려면?

a. 기존의 창의성/ 사고/ 역량의 유지

b. 복잡한 문제를 해결하는 사고방법에 대한 훈련

c. 인문학적 기반 하에 인간에 대한 깊은 이해

d. 도메인의 특성에 대한 풍부한 지식 등

UX/UI Design for smartphone

- Galaxy series

삼성전자 무선사업부 UX디자인파트 박주연 책임연구원

삼성전자에서 갤럭시 시리즈를 만들면서, 제조사에서 고민되는 바에 대한 이야기가 중심인 강연이었습니다. 실무에서 느낄 수 있는 디테일한 고민들이 좀 더 공유되었으면 하는 아쉬움이 있는 강연이었습니다.

제조사 입장에서는 스마트폰의 경우 (삼성전자의 경우 자체 OS를 개발하기도 합니다만) 구글의 안드로이드 OS에 의존하기 때문에 차별화할수 있는 부분이 그리 많지 않습니다. 그런 부분에 대한 고민들을 엿볼 수 있었습니다. 제조사 입장에서 차별화 할 수 있는 부분은 락스크린, 홈스크린, 메뉴구성 및 아이콘이며, 이에 대한 고민이 주를 이룹니다. 추가적으로 motion UI에 대한 고민과 위젯에 대한 고민을 하고 있습니다.

또한 이러한 고민들은 기술이 뒷받침될때 비로소 빛을 발한다는 것도 배울 수 있었습니다. 부가적 질문으로... 락스크린은 간결해야 할까요? 아니면 더 많은 정보를 주어야 할까요? 정답이 없는 질문이겠습니다만 이런 고민들에 대해 솔루션을 낼 수 있다면 타사대비 강점으로 작용할 수 있는 부분이 될 수도 있겠습니다.

1. UXD

a. 기업 경영의 핵심의 되는 경영전략임

b. the 3 elements of UX design

i. 거시적 3요소

1. 사용성, 유용성, 감성

ii. 미시적 3요소

1. 일관성(지역향에 따른 일관성), 혁신성, 구현 가능성

c. Internal actors of smartphone UX

i. UX

ii. 검증

iii. SW 개발

iv. 상품기획/마케팅

v. 영업

d. Internal actors of smartphone UX 2

i. 플랫폼 회사

ii. 제조사

iii. 통신사업자

iv. 웹 서비스

v. 개발자

e. 홈스크린, 락스크린, 메뉴

i. 홈스크린을 어떻게 가져가느냐가 중요

ii. 날씨, 시계, 구글 검색

iii. 하단 : 통화, 주소, 메시지, 어플리케이션

iv. 뉴스, 이메일 위젯

v. 위젯 리사이즈 기능 추가

vi. page transition, widget transition

f. 어플리케이션

i. 폴더, 페이지, 좌우 페이지 구조로 변경

g. 아이콘

i. 갤럭시 S2에서 변경

h. 위젯 편집

i. 기존에는 롱탭을 사용하고 있었으나 위젯 편집화면으로 변경함

i. 락스크린

i. 락은 기본적으로 간결해야 한다. vs 더 많은 정보를 주어야 한다.

ii. 락스크린은 이것도 해보고, 저것도 해보고 이러고 있음

iii. 어떤 사용자의 의견을 들어주어야 할까?

j. 라이브 월페이퍼

i. 날씨를 반영

k. 허브 시리즈

i. 뮤직허브, 소셜 허브, 게임허브, 리더스 허브

l. Motion UX

i. 수신전화 벨소리 끄기

ii. 탭 & 틸팅 (밀당)

iii. 탭 & 패닝 (위젯/메뉴 아이콘 이동)

iv. 동작으로 전화걸고... 바보스러운 동작이 되어서는 안된다. 손쉽게 할 수 있고, 거부감이 들지 않는 동작상황을 주어야 함

m. Voice to go

i. 유럽향 버전

n. 갤럭시 탭

i. Top 4 숏컷을 다른걸로 바꾸어야 하나?

ii. 인터넷 / 메인메뉴 / 이메일

o. 갤럭시 탭 10.1인치

i. 폰, 탭, TV?

p. 갤럭시 탭

i. 큰 화면을 어떻게 쓸 것인가?

ii. 캘린더, 음악, E-book

iii. Split view

1. 2단 뷰를 통해 메뉴 재정렬 수행

q. 컨버전스 기능

i. all share

ii. share via

Smart 냉장고 UX

삼성전자 UX센터 이노베이션 그룹 박현철 책임연구원

삼성전자의 Smart 냉장고 UX 프로세스 전반에 대한 발표였습니다. 퍼소나를 만들기 전에 마케팅자료를 기반으로 만들고, 유저 인터뷰용 리크루팅도 마케팅 세그먼트를 중심으로 진행했다는 점이 마음에 걸리기는 합니다. 퍼소나를 만드는데에는 마케팅 세그먼트들이 도움이 될 수 있겠으나, 유저 인터뷰용 리크루팅도 마케팅 세그먼트를 중심으로 할 필요가 있었을까요?

전자제품 양산형 프로젝트를 할때에는 특히나 하드웨어 부분도 고려해야 합니다. 본 프로젝트에서는 패널 제작 시 패널이 유리 재질이며, 하단부가 탈 우려가 있으므로 하단부를 GUI적으로 검게 처리했다는 점이 인상적이었습니다. 또한 냉장고 제품의 고유 특성들 - 제품도 여성이 고르고, 사용도 여성이 주로 한다는 점- 도 고려해야 할 것입니다. 냉장고의 경우 10년 주기로 교체가 일어나는데 10년동안 사용해도 질리지 않을 UI/GUI가 수반되어야 할 것입니다.

1. 제품 특성 이해

a. 선택도 여성이 하고, 결정도 여성이 함

b. 하드웨어적인 제품임

c. 10년 주기로 제품을 변경

d. 유사 제품 이력

i. 삼성 지펠, 지펠 패밀리 윈도우, 지펠 e-다이어리, RF4289HARS, 이커머스(이마트)

e. 사용자 평가

i. 개선을 위한 평가

1. 사용자 니즈 파악, 선행 제품의 UI 문제점 파악

2. 외부버튼 인지하기, 요리법 사용항법 보기, 경조사 사용하기, 전체기능 찾기...

ii. 등급을 위한 평가

2. 사용자 환경 이해

a. 냉장고 : 가족의 정보 집합소

i. 학습정보, 광고지. 쿠폰, 사진 등

ii. 깔끔하게 보관하고 싶은 니즈?

3. 컨셉 & 시나리오 개발

a. 요리법(추천식단), 식품관리, 경조사 알림, 메모기능, 포토앨범, Ticker, 제품간 연결, 부가기능(엔터테인먼트- 가족 알림)

4. UI 설계

a. 단순한 구조의 네비게이션

b. 이전 버튼을 왼쪽에 넣을것인가? 왼쪽에 넣을 것인가? 에 대한 고민들...

5. GUI 디자인

a. 홈 화면 디자인

b. 시간에 맞게 홈 화면이 바뀜

c. 모던, 팬시

d. 미국 : 이성적인 부분을 강조

e. 화면 디자인 - 채도 보정

f. 아이콘 세트 메타포 가이드 정의

g. 냉장고 온도 / 설정

6. 음원 개발

a. 15종 소리 개발

7. 사용자 평가

a. 가설에 대한 검증

i. 네비게이션의 효율/효과

ii. 인터페이스의 효과

iii. 개발 결과물에 대한 만족

b. 타겟 유저를 까다롭게 골랐음

i. 28세~38세 7명

ii. 소득, 가계소득

iii. 양문형 구입

iv. IT 기기 사용에 가능한 자

8. 제품 품질 평가

9. 양산

a. 소프트웨어에 대한 이해가 필요

i. 주장에 대해 타당한지, 타당하지 않은지 판단

ii. 구현 불가능한 것에 대한 경우 설득해야 함

iii. CP의 성격을 이해해야 함

1. 24시간 ON

2. 글자가 바뀌어도 다시 긁어들이는 현상

3. 오버플로우 나는 현상

b. 초기 기획부터 고민을 해야함

c. 유리형 패널 및 소프트웨어 문제로 인해 하단부를 어둡게 디자인함

네이버 검색 UX

남찬우 실장 (NHN 검색혁신 UX실)

네이버 검색 UX에 대한 강연이었습니다. 삼성전자와 마찬가지로 현재 진행중인 프로젝트에 대한 공유라기보다는 기존에 하고있던 서비스에 대한 소개 중심의 강연이었습니다. 1024x768 해상도 대응에 대한 고민들. 이미지 크기를 어떻게 할 것인가? 에 대한 고민들. (사용자는 사용성이 다소 떨어지더라도 이미지가 크면 클 수록 만족도가 높아진다고 하였습니다.) 검색 결과를 어떻게 보여줄 것인지에 대한 고민들... 각종 스마트파인더 DB구축을 통해 특정단어 검색 시 검색 결과에 대해 정보디자인을 하는 방법(시각적으로 한눈에 복잡한 정보를 이해할 수 있도록)을 사용하고 있습니다.

또한 제안서 포멧을 통일하였다는 점도 인상깊더군요. 마지막 메시지가 기억에 남는 강연이었습니다. 1. 이노베이션은 항상. 하지만 조용하게, 2. 프로토타입을 제안서와 기획서로. 3. 어려운 메시지일수록 단순하고 명확하게 시각화

1. 1024 * 768에서 잘려보이는 현상 개선

a. 결론적으로는 자르는게 1024에서는 확실히 좋더라

b. 해상도가 커졌을땐 비슷하더라

c. 리서치 포멧 통일화

2. 통합검색 우측영역 : A-B 테스트

3. 이미지 검색 사용 현황 : 아이트래킹

a. 사용자는 이미지가 클수록 좋아한다.

4. 스마트 파인더

a. 휴대폰, 사람, 영화 필터링을 어떻게 풀 것인가?

b. 음악검색

c. 영화 스마트파인더

d. 이미지 검색

e. 동영상 검색 (드래그 앤 드롭을 통한 레이아웃 변경 및 감상 UI 제안)

5. Message

a. 이노베이션은 항상. 하지만 조용하게.

b. 프로토타입을 제안서와 기획서로.

c. 어려운 메시지일수록 단순하고 명확하게 시각화.

검색 결과를 어떻게 보여줄 것인가에 대한 고민들
1. 방대한 정보vs 요약정보

사용자가 어떤 것을 더 효과적으로 받아들이는지에 대한 파악이 중요함.

2. 정보를 어떻게 표현하는가?

-사용자는 검색 결과를 DB로 보지 않고 컨텐츠로 인식함.

-검색 결과를 패턴화하는 것이 중요하다. 현재는 정보의 종류가 더욱 다양해 지고 있으므로 다양한 패턴이 나오고 있음.

-검색 결과를 시각화하여 정답화 정보로 보여주는 것이 좋음. (예 : 소고기 부위 검색 결과를 다음과 같이 보여주는것)

2. 검색형 정보 vs 탐색형 정보

실시간 검색어>인기 검색어가 대표적 탐색형 정보

3. SE 검색

-빠른 검색이 가능하나 얻고 싶은 정보를 잘 못 얻는다.

-통검으로 가지고 가기에는 너무 과감한 시도일 것.

-통검과 SE 검색의 중간점을 고민하는 중.

모바일 UX

PC 웹, 모바일 웹, 모바일 앱 UX/UI 설계과정에서의 방향과 고민

NHN UX Lab 이윤희 랩장

모바일 웹과 모바일 앱을 어떻게 가져갈지에 대한 NHN의 고민이 드러나는 발표였습니다. 현재도 모바일 웹과 앱에 대한 고민을 하고 있는것으로 보이며, 앞으로 어떻게 변하고 어떻게 될지에 대해서 지켜볼 필요가 있을 것 같습니다.

1차 전략은 PC웹, 모바일 웹, 모바일 앱을 각각의 플랫폼 특성에 맞추어서 전개하였으나, 2차 전략으로 Family UI에 최적화한 UI를 전개했음을 알 수 있습니다. 그 이유는 사용자는 모바일 앱에서도 웹에서 사용하는 동일한(혹은 준하는) 경험을 하고 싶다고 하기 때문이라고 하네요.

또한 속도에 대한 고민도 하고 있습니다. 속도를 줄이기 위해 이미지 용량을 줄이고, 꼭 필요한 이미지의 경우만 이미지로 보여주는 방법들을 사용하고 있더군요.

모바일의 경우 런처 아이콘을 통해 앱 혹은 웹으로 진입하기 때문에 런처 아이콘에 공을 들였다고 합니다. 모바일 앱과 모바일 웹 아이콘을 동일한 Look & Feel로 전개하였으며 동일한 모바일 웹과 앱을 설치(혹은 바로가기 추가) 했을 경우 모바일 웹 런처 아이콘은 웹이라고 부가 표시를 했다고 합니다. 단 Naver 웹과 Naver 앱의 런처아이콘만 동일한 모양의 다른 색상으로 풀어내었습니다.

네이버 안드로이드 앱의 경우 안드로이드 마켓에서 다운로드 받아야 되는데, 다운로드 받기 위해서는 구글 계정이 있어야 한다는 진입 장벽이 있습니다. 이에 따라 마켓을 거치지 않고 자체 다운로드 받을 수 있는 게이트 페이지를 만들었다고 합니다. 당연히 설치율이 높아졌다고 하네요.

제가 궁금한 점은 네이버에서 안드로이드 앱과 아이폰 앱의 UI를 거의 흡사하게 가져가고 있는데 왜 그렇게 할까? 라는 생각이 들었습니다. 일관성 측면일까요? 아니면 개발 비용 측면일까요? 의견주시면 감사하겠습니다.

1. 웹(2011년 현재)

a. 홈이 3개가 되는 형태

b. 네이버 메인 페이지가 바뀌는데 있어서의 어려움

i. 유저는 바뀌고 싶어하지 않는다.

ii. 하지만 더 좋은게 뭐지? 라는 고민을 하고 있음

2. 모바일 서비스

a. 기존에 있는 메인페이지의 느낌(웹의 느낌을 많이 가져감)에서 아이콘 중심으로 서비스를 찾아갈 수 있는 구조로 변경 되었다가 콘텐츠와 서비스를 찾아갈 수 있는 구조로 변경

b. 주요 고려사항

i. 전략 : PC + 모바일 웹 + 모바일 앱

ii. Small screen

iii. 속도

iv. 브랜딩

v. 위젯

vi. 스프레드

c. 전략

i. 1번째 라인업 : PC, Mobile 각자의 특성이 있을 것

1. 유저 피드백 : 네이버 서비스를 통합적으로 쓰고 싶다. 앱의 경우 네이버를 원활하게 쓰고싶은데 쓸 수가 없다. 음성검색 잘 안되요(기능 향상의 니즈)

ii. 2번째 라인업 : PC 와 Mobile에서 동일한 경험을 주자, 밝고 면을 넓게 쓰는 느낌을 주자.

1. 통합적인 구조로 가져감

2. Naver ME 통합

3. 유저 피드백 : 인식 검색 접근이 어려워졌다.

d. 웹에 있는 기능 중 어떤부분을 모바일로 넣을 것인가에 대한 고민.

-사용 데이터 통계를 통해서, 모바일에서 쓸만한 것들이 무엇인가라는 고민으로부터 필수적으로 넣을 것들을 선별-> 검색, 뉴스 등등. 서비스로 바로바로 가는 루트

: 모바일은 아래로만 내리는 형태임, 통일성있는 루트 구현이 중요

e. Speed

i. 용량을 최대한 줄이려는 노력

1. 이미지를 어떻게 할건가?

2. 퀄리티에 이상이 없을만한 압축률을 정함

3. 가급적 이미지를 사용하지 않음

‘객관적으로 우리 사이트는 몇 초에 뜨는가?’ 가 아니라 ‘유저가 주관적으로 느끼는 로딩속도는?’ ->-객관적인 속도 측정이 있지만 객관적인 측정결과를 어떻게 반영하냐는 다른 문제 임. (예 : 웹페이지 하나를 여는데 2초-> 빠른 속도일까 느린 속도일까? 사람마다 다른 답을 가지고 있음. 따라서 주관적으로 느끼는 속도가 목표점이 되어야 한다.)

4. 목적형 서비스, 서핑형 서비스에 따라 로딩속도가 다를것이다.

5. 안드로이드 아이폰에따라 로딩속도가 다를것이다.

f. Branding

i. 아이콘 디자인

1. 모바일로 진입하는 첫관문임

2. 앱 아이콘과 웹 아이콘을 통일

3. 아이콘에서 네이버 로고 위치 통일 및 가이드라인 제작

4. 단 네이버 아이콘만 다름

5. 두개를 설치했을 경우 앱인지 웹인지 구별할 수 있게 웹의 경우 부가 표시

6. 네이버 안드로이드 위젯

g. 배포

i. 안드로이드 마켓을 거치지않고도 배포가 가능하게 설계

ii. 설치율이 높아짐

PS. 정리하는데 도움주신 진현정님 감사합니다.

감사합니다.

[클라우드 알아보기] 1. 클라우드 도서 리뷰 - 클라우드

uxdragon — Tue, 27 Sep 2011 12:07:39 +0900

앞으로 '클라우드 알아보기' 라는 제목의 시리즈를 연재할 예정입니다.
클라우드는 최근 IT 업계에서 화두가 되고있는 분야입니다. 클라우드 관련 도서 리뷰와 퍼스널 클라우드 관련 서비스를 간략하게 살펴보려고 합니다.

살펴볼 내용은 아래와 같습니다.

1. 클라우드 도서 리뷰(1) - 클라우드
2. 클라우드 도서 리뷰(2) - 클라우드 컴퓨팅
3. 퍼스널 클라우드 관련 서비스

'클라우드'라는 제목의 책을 읽었습니다.
야코 도모노리 지음, 김정환 옮김, 도안구 감수

본 책은 클라우드의 기본 개념을 설명하는 책입니다. 또한 클라우드를 뒷받침 하는 기술에 대해서 논하고 있으며, 클라우드가 기업 및 개인의 측면에서 어떤 가치를 지니는지에 대해서 논하고 있습니다. 클라우드에 대해서 개념이 잘 이해가 되지 않으시면 가볍게 읽을 수 있는 분량과 내용을 제공하고 있습니다. 다만 클라우드에 대해서 깊게 이해하고 싶으시다면 다른 책을 읽어보시길 권합니다. 또한 기획자의 입장에서 볼 때 기획적인 인사이트보다는 개발에 관한 이해를 돕는 내용이 많아 다소 이해가 되지 않는 부분이 있었습니다.

인상깊은 구절들을 공유합니다.

p.19-20

클라우드의 정의와 기원에 대해서 다루고 있습니다.
클라우드는 인터넷을 가리킨다. 클라우드 컴퓨팅의 클라우드를 말할 때 대전제가 되는 건 인터넷의 존재다. 개개인의 단말기에서는 인터넷 저편에 네트워크로 연결된 컴퓨터가 몇 대 있는지, 그리고 그것들이 구체척으로 어떤 상태인지 잘 알 수 없다. 그래서 IT업계의 사람들은 처음부터 인터넷 자체를 '구름'같은 존재로 표현했다.
클라우드 컴퓨팅 이라는 말은 구글의 CEO인 에릭슈미트가 2006년에 강연에서 처음 사용했다고 하는데, 그 역시 위와 같이 자연스러운 발상에서 그렇게 말했을것이 틀림없다.

p.20
클라우드를 뒷받침하는 기술에 대해서 다루고 있습니다.

1. SaaS (software as a service)
- 소프트웨어 서비스, 구글의 G메일이나 구글 문서도구, 구글 스프레드 시트

2. PaaS (platform as a service)
- 플랫폼 서비스, 애플리케이션의 개발환경이나 소프트웨어를 위한 기본적인 모듈을 뜻함

3. Iaas (infrastructure as a service)
- 인프라 서비스, 서버나 데이터베이스등의 하드웨어를 뜻함

p.52
'어떻게하면 컴퓨터를 잘 사용할 것인가'에서 '컴퓨터를 이용해 무엇을 하고싶은가'에 대한 물음입니다. 앞으로 클라우드를 통해 무엇을 하고 싶은가요?

컴퓨터를 이용해 '무엇을 하고싶은가'로 관점이 바뀐다. 어떤 단말기를 사용하느냐는 문제가 아니다.

p.82
'세일즈포스 닷컴'의 클라우드 전략에 대한 부분입니다. 기업 내 채팅 어플리케이션에 대해 다루고 있습니다. 애플리케이션이 짹짹거리는 것이 특징이라는데 재밌네요.
트위터에서 힌트를 얻어 개발했다는 기업 내 채팅 애플리케이션 채터(Cahtter)가 2010년 6월에 공식 출시됐다.

간단한 설정으로 애플리케이션과도 연계시킬 수 있는 이 클라우드 서비스는 애플리케이션이 짹짹거리는(경고나 메시지를 보내는) 것이 특징으로, 기업 내의 커뮤니케이션 환경을 변화시킬지도 모르는 가능성을 내포하고 있다.

p.102
개인 시장을 위한 퍼스널 클라우드 서비스에 대한 내용입니다. 다소 생소한 PCC에 대해서 새롭게 알게 되었습니다.
개인시장의 경우에는 N 스크린 전략을 구체화하기 위한 방안으로 클라우드 서비스들이 등장하고 있다. 이런 흐름을 퍼스널 클라우드 서비스(PCC)라고 명명하고 있다.

PCC는 수많은 디바이스들을 보유한 이용자가 언제 어디서나 자신이 사용하던 사진, 동영상, 주소록, 오피스 문서, 게임, 메일 등의 콘텐츠들을 최신의 상태에 접근해 사용할 수 있도록 해는 서비스다.

p.162
클라우드는 어떤 변화를 일으킬 수 있을까요? 어떤 단말기에서나 클라우드에 접속할 수 있습니다. 이 책에서는 클라우드 단말기가 생겨날 수 있다고 예견하고 있습니다. 또한 클라우드를 통해 공동작업(crowdsourcing)을 할 수 있다고 이야기 합니다. (현재 국내 퍼스널 클라우드 서비스에서는 '다음 클라우드'가 유일하게 공동작업을 위한 공유컨셉을 제공하고 있습니다.)

클라우드가 일으키는 변화
- 컴퓨터가 변화한다.
- IT 비즈니스가 변화한다
- 기업경영이 변화한다
- 업무방식이 변화한다
- 사회 인프라가 변화한다
- 지식과 인류가 변화한다
- 클라우드 자체가 변화한다.

그 외의 궁금한 내용들은 해당 도서를 읽어보시길 권합니다.
감사합니다.

[Mobile] 안드로이드 위젯 기획시 고려사항

uxdragon — Tue, 06 Sep 2011 09:00:00 +0900

글을 시작하며...
최근 회사 동료로부터 안드로이드 위젯 프로젝트 관련 노하우 공유 요청을 받았습니다. 경험을 공유하다 보니, 이와 관련해서 생각을 정리해보고 싶은 마음이 들었습니다.

본 블로깅을 통해 안드로이드 위젯 관련 프로젝트를 시작하시는 신입 분들이나, 실무경험이 상대적으로 적은 학생분들에게 도움이 되었으면 좋겠습니다. (저보다 많은 경험이 있으신 분들은 의견을 보태주시면 저같은 UI 기획자가 배울 수 있는 밑거름이 될 것 같습니다.) 또한 다음 고려사항들은 순수히 제 의견이며 논란의 여지가 충분히 있으므로 이점도 감안해 주시고 봐주세요.

[그림1] 추억의 햅틱 위젯

[그림2] 안드로이드 위젯

위젯은 무엇인가?
웹 전문가인 '힌치클리프' 는 위젯을 웹에서 실행되는 작은 어플리케이션이라고 정의하였습니다. 위젯의 사전적 의미는 실용적인 목적으로 사용되는 작은 기계 또는 장치를 말하는 것으로, 주로 새롭게 만들어졌거나 신기한 장치, 또는 이름을 알 수 없거나 생각나지 않는 소형 장치, 부품, 도구를 일컫는 단어로 사용되고 있습니다. 또한 위젯의 동의어로 자주 사용되는 단어로 가젯이 있는데요. 위젯과 가젯의 어원이 정확히 알려진 바는 없지만 웹스터 사전에 등록된 시기를 볼 때 오래 전부터 사용된 단어인 것으로 추정됩니다. 또한 위젯을 뱃지(badge), 모듈(module), 버튼(button) 등으로 부르기도 합니다. (출처 하단 명기함) (아이폰같은 경우 위젯과 어플리케이션의 경계가 모호하기는 합니다. 이 점은 논란의 여지가 있으나 본 블로깅에서는 다루지 않습니다.)

본 블로깅에서는 안드로이드 위젯 기획시 고려사항에 대해서 다룹니다.

안드로이드 위젯 기획시 고려사항

1. 위젯의 핵심 고려사항은 유용성과 크기다.
다양한 위젯 사이즈중에서 어떤 사이즈를 선택하는 것이 좋을까요? 저는 유용성과 크기를 고려해서 설계해야 한다고 생각합니다. 위젯을 설치할 확률은 유용성에 비례하고 크기에 반비례하지 않을까 생각합니다. 같은 유용성을 갖는다면 가능하면 작게 만드는 것이 좋겠고요, 그렇다고 해서 고유의 유용성을 해치면서까지 작게 만들다가는 실패할 여지가 있습니다. (위젯 크기와 위젯의 유용성에 따른 위젯 등록의 상관관계에 대해서 조사해보고 싶은 생각은 드네요.)

[그림3] 안드로이드 portrait size

[그림4] 안드로이드 landscape size

2. 터치 영역을 고려해야 한다.
위젯은 그 크기가 어플리케이션에 비해 상대적으로 작으므로 터치 영역을 잘 고려해서 설계해야 합니다.
애플 Human interface guideline을 보면 최소 터치 영역이 44px임을 확인할 수 있습니다. 윈도우폰 UI 가이드라인을 보면 터치 영역을 9mm(34px) ~ 7mm(26px) 사이로 권장하고 있습니다.

현재 안드로이드 위젯 가이드라인에는 최소 터치 영역에 대한 가이드라인이 없으므로, 아쉬운대로 애플 HIG나 윈도우폰 UI 가이드라인을 참조해야 겠습니다.

[그림5] Touch target size

3. 기왕이면 기능은 단순한게 좋다.
위젯은 어플리케이션이 아닙니다. 기왕이면 단순한게 좋습니다. 위젯을 어플리케이션처럼 생각해서 기능에 집중하기 보다는 Short cut의 개념으로 생각하는 게 좋습니다. 또한 위젯은 스크롤이나 트랜지션이 원활하지 않으므로 이 점을 충분히 감안해서 설계하여야 합니다. 요즘들어 안드로이드 사양이 점점 좋아지고는 있다고 하나, 아직까지는 위젯의 기능을 무겁게 가져가기에는 부담이 좀 있는 상황입니다.

4. 기타 고려사항은 없는지 살펴보아야 한다.
- 어떤 안드로이드 단말의 경우 위젯모드를 세로모드 뿐만 아니라 가로모드도 지원하기 때문에 가로모드에 따른 위젯을 추가적으로 개발해야 할 수 있습니다.

- 위젯 크기에 따라 종류별로 추가 셋트를 구성할 수 있습니다. 예를들면 작은 위젯, 중간 위젯, 큰 위젯의 3가지 세트를 만들어놓고 사용자에게 선택하게 하는 것이죠. 하지만 너무 많은 종류의 위젯을 지원하다보면 사용자 입장에서는 선택을 하는데 있어서 혼란을 가중시킬 우려도 있습니다. 선택해보기 전까지는 크기 외에 어떠한 정보도 알수 없으니까 말이죠.

[그림6] 안드로이드 위젯 선택 UI

- 또한 위젯 정보 동기화 이슈가 있습니다. 위젯의 정보를 몇시간마다 가져와서 보여질 것인지에 대한 고민이 필요합니다. 당연히 수시로 정보를 업데이트 하는것이 좋지만, 성능의 문제가 있으므로 수동 업데이트 버튼을 추가로 제공해야 할지를 고려해봐야 합니다.

- 음악 위젯의 경우 락스크린 UI도 고려해야 합니다. 락스크린 UI는 단말이 락이 걸려있더라도 사용할 수 있는 UI인데요, 음악의 경우 멀티태스킹이 가능하기 때문에 락 스크린 UI를 추가로 구성할수도 있습니다.

[그림7] 안드로이드 윈앰프 락스크린(우측)

출처: http://mudchobo.tistory.com/510

글을 마치며...
적고보니 다소 일반적인 이야기가 된 것 같습니다. 하지만 기본에 충실한다면 위젯을 기획하는데도 도움이 되지 않을까 생각합니다. 때로는 정공법도 도움이 될때가 있습니다.

현재 안드로이드 위젯 가이드라인이 존재하기는 하지만, 가이드라인이 실제 기획과 디자인을 하는데 있어서 모든 부분을 커버해주지는 않습니다. 그렇기 때문에 어느 부분에 한해서는 새롭게 적용해야 하는 부분이 있을것으로 생각합니다.

또한 안드로이드 3.0(허니콤) 위젯을 제작할 때에는 퍼포먼스의 향상으로 인해 위젯 3D UI를 시도해 볼 여지가 있습니다. (본 포스팅에서는 안드로이드 3.0 위젯에 대한 문제는 논외로 합니다.)

감사합니다.

참고자료

노주환, 웹 패러다임을 바꾸는 위젯, 멘토르, 2008

루크 로블르스키의 터치 영역 사이즈
http://www.lukew.com/ff/entry.asp?1085

위젯의 역사와 종류
http://1370.me/694

안드로이드 위젯 가이드라인
http://developer.android.com/guide/practices/ui_guidelines/widget_design.html

[PXD] 프로젝트 룸 1개월 체험기

uxdragon — Tue, 02 Aug 2011 01:25:20 +0900

글을 시작하며...
저는 요즘 거의 프로젝트 룸에서 생활을 하고 있습니다. 이번 블로깅에서는 프로젝트 룸 생활을 하면서 느꼈던 본인과 팀원들의 경험. 그리고 (프로젝트 룸을 쓰고있는 사람들의 약식 인터뷰를 통해 얻은) 프로젝트 룸을 구성하는데 있어서 필요한 요소 및 프로젝트 룸의 장점과 단점을 공유하려고 합니다.

[IDEO의 프로젝트 룸]
이미지 출처 : http://userexperience.tistory.com/92

[PXD의 프로젝트 룸]

프로젝트 룸 꾸미기

1. 프로젝트 룸
- 프로젝트 룸을 꾸미기 위해서는 일단 사내에 프로젝트 룸이 구비되어 있어야 합니다. 프로젝트 룸도 하루종일 그곳에서 생활할 수 있는 공간이면 더더욱 좋습니다. 사내에 프로젝트 룸을 구비할 수 있는 환경이 아니라면, 구역을 나누어 좀 더 의사소통을 원활히 할 수 있게 하는 방법도 시도해 볼 수 있습니다.

2. 칠판, 벽, 프로젝터, PC(혹은 노트북), 모니터
- 프로젝트 룸을 구성하는데 있어서 칠판은 필수요소입니다. 의사소통이 잘 되지 않을 경우 칠판을 활용해서 설명하면 좀 더 설명이 명확해 질 수 있습니다.
- 벽을 활용하여 시안이나 작업물들을 붙여놓고 확인할 수 있습니다. 본 프로젝트에서는 벽을 충분히 활용하지는 않았습니다만, 다른 프로젝트에는 벽을 활용할 일이 많을것 같습니다. IDEO처럼 벽에 포스트잇 전지를 붙여서 활용하는 방법도 있으며, 보드판을 이용하여 벽면을 대체하는 방법도 있습니다.
- 프로젝터 또한 필요한 요소중 하나입니다. 프로젝터를 통해 문서를 리뷰하고 공유를 쉽게 할 수 있습니다.

3. 일정표, To-do list, 공지사항
- 일정표는 프로젝트의 현 상황을 파악하고 일정대비 얼마나 진행이 잘 되었는지 확인하는데 용이합니다. 그동안 프로젝트를 하면서 일정표를 엑셀에도 관리를 해보고, 구글 Docs로도 관리를 해봤습니다. 그러나 이번에는 일정을 칠판에 적어서 관리했습니다. 칠판에 일정을 적어놓고 관리해 보니 현재 일정을 파악하고 수시로 확인하는데 용이하더군요. 일정에는 문서 릴리즈 일정 및 팀원의 휴가들을 적어놓았습니다.

- To-do list는 오늘 어떤 일들을 수행해야 하는지를 나타내줍니다. 이것 또한 문서화하지 않고, 칠판에 적었습니다. 칠판에 적어놓으니 오늘 어떤 일을 해야하는지 분명히 알 수 있었습니다.

- 공지사항은 수시로 확인해야 할 사항을 적었습니다. 이전에 문서의 번호를 매길 때 문서 번호에 대한 Rule을 칠판에 적어놓고 수시로 확인하면서 작업을 했더니 작업이 수월했습니다.

4. 스피커
- 스피커는 다소 조용한 프로젝트 룸에 활기를 불어넣어 줍니다. 문서 작업을 할때 음악을 들으면서 하면 좀 더 편안한 분위기에서 작업을 할 수 있습니다.

프로젝트 룸의 장점

1. 팀원간의 커뮤니케이션에 용이하다.
- 같은 공간에 있지 않을때는 의사소통할 것들을 정리하고 따로 모여서 회의를 해야합니다. 하지만 프로젝트 룸에 있다보면 그럴 필요가 없습니다. 또한 팀원이 현재 어떤 작업을 하고 있는지 알고 있기 때문에 어떤 것들이 필요한지, 어떤 작업이 진행중인지 파악하기가 용이합니다. 또한 회의를 위해서는 회의 시간도 정해야되는데 프로젝트 룸에서는 그럴 필요가 없습니다. 바로 프로젝터를 켜면 됩니다.

2. 팀원간의 정이 돈독해진다.
- 아무래도 같은 공간에 오랫동안 있다보면 자연스럽게 친해집니다. 친해지면 그만큼 협업을 하는데 있어서 장점으로 발휘됩니다.

3. 프로젝트에 집중을 하는데 용이하다.
- 사내에 있다보면 사내의 다양한 활동과 변수에 노출이 됩니다. 하지만 프로젝트 룸에 있다보면 그런 상황에 노출이 적습니다. 그만큼 업무에 집중할 수 있습니다. 또한 심리적으로 안정이 되기도 합니다.

프로젝트 룸의 단점

1. 팀원들끼리 너무 친해져서 대화를 많이 하게 된다.
- 장기간 프로젝트를 하다보면 프로젝트원들끼리 친해지게 됩니다. 친해지게 되면 대화가 많아지게 되지요. 그만큼 시간을 쓰다보면, 퇴근 시간이 늦어지게 되는 원인이 되기도 합니다.

2. 사생활이 없다.
- 친한 팀원들끼리라면 같은 공간에 계속 붙어있어도 큰 상관은 없겠지만, 불편한 팀원과 같은 공간을 쓴다는 것은 불행한 일이겠습니다. 또한 가끔은 자기 시간이 필요할 때도 있는데, 사생활이 노출된다는 단점은 분명 있습니다. (반면 회사 내에 있으면 작업하면서 눈치를 보게 되는데, 프로젝트룸에서는 눈치를 덜 보게되는 경우도 있습니다.)

3. 같은 회사 사람들과의 교류가 상대적으로 적어진다.
- 항상 프로젝트 룸에 있다보면, 반대로 사내 사람들과의 교류가 적어지게 됩니다. 회사에 무슨 일이있는지 모르는 경우가 생기게 됩니다. 프로젝트 룸을 쓰지 않는 사람들과의 커뮤니케이션이 단절되는 경우도 종종 있습니다.

4. 한정된 프로젝트 룸을 점유할 경우 문제가 발생한다.
- 어느 회사나 프로젝트 룸은 한정되어 있습니다. 프로젝트 룸의 수보다 진행되고 있는 프로젝트의 수가 많을 경우 문제가 발생합니다. 이럴때는 각 프로젝트의 팀원들끼리 협의하여 모두가 공평하게 프로젝트 룸을 사용할 수 있도록 조율이 되어야 하겠습니다.

글을 마치며...

요즘에는 프로젝트 룸을 쓰다보니 제 자리에 앉을 시간이 없습니다. 그만큼 프로젝트 룸에서 주로 생활을 하고 있습니다. 프로젝트룸에 대해서 현재로서는 만족하고 있습니다. 그러나 사내에서는 처음 시도해본 방식이기 때문에 아직 부족한 점이 많다고 생각합니다. 다음 프로젝트부터는 부족한 점을 개선해서 프로젝트 룸을 적극적으로 활용해보아야 겠다고 생각했습니다.
프로젝트 룸을 사내에서 이미 잘 활용하고 있는 회사도 있을 것입니다. 그동안 프로젝트 룸을 잘 활용하고 있지 않았다면 이번 프로젝트 부터는 프로젝트 룸을 활용해 보시는것도 좋을것 같습니다. 물론 프로젝트 룸의 단점도 있지만 단점을 커버할만큼의 장점이 있기 때문에 자신있게 추천합니다.

감사합니다.

참고 웹사이트.

능률을 올리는 프로젝트 룸

http://www.wizmusa.net/1170964078

the innovation process : the project room

http://www.theinnovationprocess.com/2010/12/the-innovation-process-orderliness-in-innovation/

[ux book] 2011년 UX(UI) 관련 신간 소개

uxdragon — Fri, 01 Jul 2011 10:00:00 +0900

2011년에 발간된 UX(UI) 관련 신간을 소개합니다.
요즘 들어서 번역본들이 많이 나오고, 흥미로운 책이 많이 나와서 즐겁네요.

더 많은 책 정보를 얻으시려면 제 '유저스토리북 책장'에도 들려주세요.
http://uxdragon.userstorybook.net/

1. 거침없이 배우는 익스프레션 블랜드
- 프로토타이핑을 도와주는 강력한 툴인 익스프레션 블랜드에 대한 소개를 다루고 있습니다.
- 책 정보 보기 : http://book.naver.com/bookdb/book_detail.nhn?bid=6635394

2. The design of sites

- 웹 사이트 디자인의 107가지 패턴에 대해서 다룬 책입니다. 원서인 The design of sites 2판이 2006년도에 나왔네요.
- 책 정보 보기 : http://book.naver.com/bookdb/book_detail.nhn?bid=6656725

3. 보다 쉽고 빠른 개발을 위한 모바일 어플리케이션 UI 라이브러리
- 비단 개발자를 위한 책이라기보다는 UI 기획자가 읽어도 될 법한 내용입니다.
- 책 정보 보기 : http://book.naver.com/bookdb/book_detail.nhn?bid=6627677

4. 프로토타이핑
- 멘탈모델, 웹 폼 디자인을 발간한 인사이트의 도서입니다. 프로토타이핑 방법론에 대해서 자세히 다룬 책이네요. 2009년도에 나온 Prototyping: A Practitioner's Guide 의 번역본입니다.

- 책 정보 보기 : http://book.naver.com/bookdb/book_detail.nhn?bid=6638931

5. 모바일 디자인 전략
- 오랫만에 모바일 관련 신간이 나왔습니다. 개인적으로 기대되는 책이네요. 2008년에 나온 Strategic Mobile Design의 번역본입니다.
- 책 정보 보기 : http://userstorybook.net/square/122554/

6. 명확하게 디자인하라
- 실전 UX 디자인을 지은 로버트 후크만의 신간입니다. 역시나 웹 디자인에 관한 책입니다. 2006년도에 나온 Designing the Obvious(1판)의 번역본입니다. Designing the Obvious(2판)은 2010년도에 출간했습니다.

- 책 정보 보기 : http://book.naver.com/bookdb/book_detail.nhn?bid=6608938

7. UX design
- 모바일 애플리케이션 UI 라이브러리, 웹 2.0 기획과 디자인, 웹 패러다임을 바꾸는 위젯, UI 디자인을 잘 하기 위한 테크닉의 저자 노주환님의 신간입니다. 이번에는 다소 도발적인 제목이네요.

- 책 정보 보기 : http://book.naver.com/bookdb/book_detail.nhn?bid=6452292

PS. 이미지의 정보는 Naver 책, 이미지는 미투데이, 책 정보는 유저스토리북에서 참고하였습니다.
- 네이버 책 : http://book.naver.com/index.nhn
- 유저스토리북 : http://userstorybook.net/
- 미투데이 : http://me2day.net/

감사합니다.

[UI 디테일] 웹사이트 로그인, 어떤 방식으로 하는것이 좋을까?

uxdragon — Wed, 25 May 2011 18:01:23 +0900

최근, 미투데이의 miriya 님이 올려주신 UX movement 링크를 보게 되었습니다.
http://uxmovement.com/forms/innovative-techniques-to-simplify-sign-ups-and-logins

웹사이트의 회원가입과 로그인을 어떻게 하면 쉽게 할 수 있을지에 대한 몇가지 테크닉에 관한 글입니다.
그 중에도 인상깊었던 부분은 '웹사이트 로그인을 할때 어떤 정보를 통해서 로그인을 하게 할 것인가?' 였습니다.

로그인 방식은 다음과 같이 몇가지 유형이 있습니다.

1. ID + Password 로 로그인 하는 방법
국내 웹사이트에서는 거의 이 방식을 사용하고 있습니다.
이 경우에는 사용자가 ID를 기억해야 한다는 부담감이 있습니다.
ID 입력 방식도 사이트에 따라 천차만별이기 때문에 한 사람이 여러개의 ID를 가질 수 있습니다.(첫 글자가 숫자면 안된다는 규칙, 6자리에서 12자리 사이로 입력해야 한다는 규칙같은것들 때문이죠.) 저의 경우 4~5개의 ID와 마찬가지로 4~5 개의 Password가 있어서 상황에 따라 조합해서 가입하는 경우가 있습니다.
또한 회원 가입시에는 별도로 E-mail 정보를 입력해야 한다는 부담이 있습니다.(E-mail 정보를 ID, Password 확인 용도나, 이벤트 알림 용도로 사용할 수 있죠.)

미투데이의 로그인 방식

2. E-mail + Password 로 로그인 하는 방법
외국 웹사이트에서는 거의 이 방식을 사용하고 있습니다.
이 경우에도 마찬가지로 사용자가 E-mail을 기억해야 한다는 부담감이 있습니다.
또한 상대적으로 ID보다는 긴 형태이기 때문에 입력하는데 시간이 걸리며, 인지하는데도 어느정도의 어려움이 있습니다. E-mail을 몇 개나 사용하고 있는지도 마찬가지로 천차만별입니다. 저의 경우를 비추어보자면 E-mail을 4~5개 정도 보유하고 있어서 이 경우에도 어떤 E-mail로 가입했는지 고민을 해야 합니다. 그렇지만 E-mail을 한 개만 사용하는 경우에는 크게 문제는 없을것 같습니다.

또한 웹사이트에서는 E-mal 입력이 편한 반면, 모바일에서는 E-mail 주소 입력이 상대적으로 불편합니다. 이런 여러가지 생각들속에서 올바른 가치판단을 해야겠습니다.

페이스북의 로그인 방식

그렇다면 회원 가입 시 E-mail 인증 및 E-mail 중복 체크를 해야될까요?
E-mail 중복 체크는 꼭 해야 할것으로 보입니다. 하나의 E-mail로 두 명이 사용할 수는 없기 때문입니다. E-mail 인증 절차도 복잡하지않게 설계한다는 전제하에서 필요할 것으로 보입니다. '인증을 해서 사용자를 불편하게 할 것인가?' vs '인증을 하지 않아 입력단계를 편하게 하지만, 이메일을 잘못 입력했을 경우에는 사용자의 책임으로 전가할 것인가?' 를 사이에 두고 가치판단을 하여야겠습니다.

3. E-mail or ID + Password 로 로그인 하는 방법
E-mail 혹은 ID 둘 중 하나만 입력해도 로그인 하는 방법입니다. 이 경우 E-mail 과 ID 둘다 입력되어있다는 전제하에서 로그인이 성립 될 것 같습니다. E-mail 통해 가입하는걸 원하는 사람 혹은 ID를 통해 가입하는걸 원하는 사람이 있을 수 있으므로 둘 다 지원하자는건데, 개인적으로는 부가적인 방법으로 상황에 따라 적용하는 것이 좋다고 생각합니다.

4. 아예 회원가입을 하지 않고 로그인 하는 방법
회원 가입대신 Facebook이나 Twitter 로그인으로 대신 하는 방법이 있습니다. 원래는 이 방법이 보안을 위해 특정 어플리케이션에서 직접 ID, Password를 입력받지 않고 사용자의 정보에 접근하기 위한 표준이었습니다. 그러나 요즘에는 개인정보가 많이 필요하지 않은 경우 페이스북, 트위터 OAuth로 사용자 인증을 하는 서비스가 많아졌습니다.

그 전에는 통합아이디 개념의 Open ID 가 하나의 방법이었는데, 요즘에는 이 방식이 점점 줄어들고 있는 것 같습니다. 미투데이에서도 Open ID를 지원하다가, 최근 어떤 이유로 인해 Open ID를 지원하지 않고 있습니다.

5. 전화번호로 로그인(인증)하는 방법
이 경우는 웹사이트보다는 모바일에서 적합한 방식으로 보입니다. '카카오톡'에서 이 방식을 사용하고 있지요. 이 방식은 회원가입 없이도 로그인을 할 수 있다는 장점이 있습니다. 하지만 전화번호가 바뀌거나 없어질 경우에는 이 방식이 문제가 됩니다. 카카오톡의 경우 문자를 주고받는 커뮤니케이션 앱이기 때문에 전화번호가 바뀌어도 크게 이상하지는 않습니다. 하지만 다른 종류의 앱들이 전화번호로 로그인을 할경우에는 다시 친구를 맺어야 하는 문제가 생길 수 있습니다.
또한 어떠한 연유로 두 개의 전화번호를 가지고 있는 사용자의 경우를 고려할 필요가 있습니다. 카카오톡은 한번에 한 개의 전화번호를 인증하기 때문에 두 개의 전화번호를 인식할 수 있는 방법이 없습니다.

또한 카카오톡은 전화번호 정보밖에 가져오지 않기 때문에, 다른 서비스(이를 테면 웹)에 접목시키기가 매우 어려운 실정입니다. 추가적으로 ID를 입력하게 하는것도 이 때문으로 보여집니다.

카카오톡의 로그인(인증) 방식

웹사이트 로그인, 어떤 방식으로 하는 것이 좋을까요?
저는 요즘 'E-mail + Password' 방식이 좋은 것 같다는 생각이 듭니다. 여러분들의 생각은 어떠세요?

PS. Log in vs Sign in 어떤 용어를 쓰는것이 좋을까요?
http://legendre.tistory.com/entry/Log-in%EA%B3%BC-Sign-in

* 본 블로깅은 PXD 사내메일의 글을 일부 포함하고 있습니다.
(글 쓰는데 많은 도움주신 이재용님, 無異님 감사합니다.)
* 좋은 자료 링크해주신 miriya님 감사합니다.

[UI 인사이트] 루크 로블르스키의 블로그로 배우기

uxdragon — Wed, 25 May 2011 17:55:34 +0900

웹 폼 디자인의 저자 루크 로블르스키의 블로그를 우연히 발견하게 되었습니다.

구글에서 lukew 로 검색하시면 바로 나옵니다.

http://www.lukew.com/

1. 저자의 블로그 메인화면에서 배우기

- 메인페이지에 경력을 숫자로 표현한 방식이 마음에 듭니다.

- 16년 일했고, 1242건의 글을 썼고, 2권의 책을 냈고, 132번 프레젠테이션을 했다. (좀 대단한것 같습니다.)

- 2권중에 한권은 국내 번역서로도 나온 웹 폼 디자인이란 책이고,

http://www.lukew.com/resources/web_form_design.asp

한 권은 (저에게는) 좀 생소한 Site seeing (2002)이란 책입니다.

우리 회사에서 보유하고 있는 책이라고 하는데, 기회가 될 때 한 번 읽고싶다는 생각이 들었습니다.

http://www.lukew.com/resources/site_seeing.asp

2. 저자의 책에서 배우기 - 웹 폼 디자인

이 사람이 쓴 '웹폼 디자인'에서 말했던 내용은 '결국 폼은 사라져야 된다.' 는 거였죠.

입사초기에 모 프로젝트 소강상태에서 이미지위주로 빠르게 훓어 본것 같은데,

그당시 '이 책을 먼저 접하고 프로젝트를 했으면 프로젝트에 더 좋은 영향을 끼치지 않았을까?' 라는 생각이 들었었습니다. (물론 그 당시 할 수 있는 최선의 대응을 한 것 같습니다.)

3. 저자의 발표 자료에서 배우기

여하간 이분이 블로그에 모바일관련해서 발표한 자료도 공유가 되어있더군요.

이것도 빠르게 훓어 봤는데 읽어보시면 도움이 될 것 같습니다.

(모바일 폼 디자인 책도 곧 나오려나요? ^^;)

Mobile first

http://www.lukew.com/presos/preso.asp?26

Mobile input

http://www.lukew.com/presos/preso.asp?23

4. 저자의 세미나 경험에서 배우기

이 분이 올해 U15에도 갔었나봅니다.

타마라 아주머니의 발표도 정리 해 놓으셨더군요.

http://www.lukew.com/ff/entry.asp?1241

데이브 그레이의 게임스토밍 발표 감상도 정리되어 있습니다.

http://www.lukew.com/ff/entry.asp?1241

게임스토밍은 최근 한글로도 번역되어 출간되었었죠.

http://koko8829.tistory.com/984

책의 내용은 제대로 안봐서 모르겠습니다. 시간 날 때 꼭 읽어보고 싶더군요. (브레인스토밍을 게임처럼?!)

*본 블로깅은 PXD 사내메일에서 발췌하였습니다.