태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.


'UI'에 해당되는 글 78건

  1. 2018.08.27 [UI 디테일] 모바일 동영상 플레이어 내 Gesture UI 살펴보기 by 위승용 (uxdragon)
  2. 2018.03.15 [UI 디테일] 신한카드 Fan 앱카드 약관 동의 UI의 불편함 (2) by 위승용 (uxdragon)
  3. 2017.12.06 UX 포트폴리오, 이력서, 자기소개서를 준비하기 전 알아야 할 관련 링크 모음 by 위승용 (uxdragon)
  4. 2017.11.30 [도서] UX / UI 신간 소식 (2016~2017) by 위승용 (uxdragon)
  5. 2017.03.09 영감을 주는 3개의 글 by jun.ee
  6. 2016.02.17 [도서] UX / UI 신간소식 (2015~) by 위승용 (uxdragon)
  7. 2016.01.19 UI의 근본 문제와 UX의 핵심 4단계 by 이 재용
  8. 2015.03.09 UX / 디자인 신간 소식 (2014~) by 위승용 (uxdragon)
  9. 2013.12.22 [해외교육] Euro IA 2013 둘러보기 - Day 1 : Usable Usability, Being in business with IA (2) by kyuheeee
  10. 2013.04.24 UI 패턴을 다룬 웹사이트 모음 by 위승용 (uxdragon)
2018.08.27 07:50

[UI 디테일] 모바일 동영상 플레이어 내 Gesture UI 살펴보기

시작하며

우리의 일상에서 동영상 시청이 차지하는 비율이 점점 높아지고 있다. 필자 또한 예전보다 동영상을 감상하는 시간이 많이 늘어난 것을 실감하고 있다. 그리고 집에 있는 TV보다는 모바일로 영상을 감상하거나 이동 중에도 수시로 영상을 감상한다. 어느 날은 모바일로 유튜브 영상을 보다가 우연히 플레이어 영역을 ‘두 번 터치’ 한 경우가 있었는데 '10초 다음으로 이동’ 기능이 제공되어 놀랐었던 경험이 있다.

개인적으로 UCC(User creative contents) 중심 UI는 Youtube가 선도적이라고 생각하는데, 그도 그럴 것이 동영상 플레이어 관련한 새로운 기능들은 대부분 Youtube에서 출발한 것들이 많다. (세로 모드로 영상 시청 중 화면을 아래로 쓸어내리면 '미니 플레이어’로 전환되는 방식도 Youtube에서 먼저 제공했던 것으로 알고 있다. 현재는 해당 멀티태스킹형 UI가 표준화되었지만 말이다)

이와 맞물려 시간이 지남에 따라 모바일 플레이어 앱 서비스는 점점 고도화되고, 사용자의 편의를 위해 한정된 영역에서 다양한 기능을 활용할 수 있는 다양한 방식들이 고려되고 있다. 이에 각종 모바일 동영상 플레이어에서 Gesture를 어떤 식으로 활용하는지 사례를 간단하게 찾아보았다. 사실 IT 업계가 그렇듯 1~2년만 지나도 새로운 것이라고 생각하던 서비스들이 옛날 것으로 바뀌는 것이 현실이다. 하지만 현시점에서의 UI가 나중에 또 어떤 방향으로 변화하는지 살펴보는 것도 흥미로울 것 같다.

[그림1] Youtube 동영상 플레이어 : 미니 플레이어 전환


조사 개요 : 2018년 8월 21일 기준, iOS 모바일 앱, VOD(Video on demand) 콘텐츠 위주로 조사

(Youtube, 페리스코프, TVING, 옥수수, 비디오포털)

해당 조사는 ‘실시간 TV' 화면은 포함하지 않았다. 그 이유는 실시간 TV의 경우 구간탐색 기능을 제공하고 있지 않아 VOD 플레이어보다 상대적으로 적은 기능을 제공하기 때문이다. (국내 VOD 제공 서비스에서는 보편적으로 실시간 TV에서 좌/우 Swipe 시 이전/다음 채널로 이동하는 UI를 제공한다)

또한, 해당 글에서는 손가락을 댄 후 한쪽 방향으로 드래그하는 동작을 편의상 Swipe로 용어를 통일하였다. UI설계를 하다보면 해당 용어를 혼용해서 사용하는 경우가 있는데, 필자도 설계할때마다 헷갈리는 부분 중 하나이다.

  • Swipe : 손가락을 댄 후 일직선으로 드래그하는 동작
  • Flick : 손가락을 댄 후 빠르게 한쪽 방향으로 긋는 동작



1. Youtube

Youtube VOD는 기본적으로 영상을 한번 탭 하면 관련 버튼들이 호출되고, 다시 탭 하면 사라지는 방식으로 제공된다. (다른 동영상 플레이어도 유사한 방식을 제공한다) 그리고 VOD 영상의 좌측 영역을 두 번 탭 하면 10초 이전으로, 우측 영역을 두 번 탭 하면 10초 다음으로 이동한다. 또한, 세번 탭 하면 20초, 네번 탭 하면 40초 단위로 이동한다. 즉 해당 기능을 재생구간 이동 용도로 활용하고 있다. 이건 최근에 추가된 기능인데, 영상에서 하→상 방향으로 Swipe 하면 관련 동영상 목록을 불러올 수 있다. 이는 단순히 하나의 영상을 감상하기만 하는 것이 아니라 다양한 영상을 쉽게 탐색할 수 있도록 하는 기능을 강조하려는 의도라고 생각한다.

유튜브 플레이어(Web)의 과거


그렇다면 건너뛰는 플레이 타임을 어떤 기준으로 잡는것이 좋을까?

한상택 | Youtube 웹에서는 더블 클릭은 전체화면 전환 기능으로 제공되며, 화살표 좌/우 키 선택 시 5초 단위로 제공된다. 그 외의 사례를 보면 동영상 서비스의 원조 격인 Tivo 의 instant replay는 8초 단위로 제공된다. 또한, Roku는 7초 단위로 제공한다.

문한별 | 건너뛰는 플레이 타임을 어떤 기준으로 잡아야 할까 생각해보다가, 영상을 만들 때 각 컷은 몇 초를 기준으로 편집하는지 알아보았다. 일단 드라마와 영화가 상황이 조금 다르다고 한다. 영화는 한 컷 자체 농도가 짙다. 그래서 컷 하나에도 더 심혈을 기울여서 많은 것을 보여주어야 하며, 컷 전환이 너무 빠르면 몰입을 해친다고 한다. 반면 드라마는 짧게는 1초 단위로 컷 전환이 이뤄진다고 한다. 인물과 환경을 설명하는 설정 숏트라는게 있는데 이게 보통 3초 정도 된다고 한다. 설정 숏트 이후부터는 주인공 A의 모습 2초, 말하는 모습 클로즈업 1초, 그 말을 듣는 B의 반응을 1초로 보여주는 식이다. 그래서 10초 이상은 아예 다른 씬으로 뛰어넘을 수 있는 시간이 되기 때문에 "3초에서 7초 정도가 플레이어에서 건너뛰기로 적당하지 않나?" 는 업계 관계자의 의견을 들을 수 있었다. 물론 일반화하긴 어려운 얘기다.

[그림2] Youtube 동영상 플레이어 : 주요 Gesture



2. 페리스코프 (Periscope)

실시간 개인방송을 지향하는 페리스코프에서도 VOD를 제공한다. 페리스코프는 기본적으로 세로 모드 영상을 제공하는 것이 특징이다. 페리스코프에서는 VOD 영상을 Long Tap 하면 구간 탐색 기능을 제공한다. 조금 특이한 방식이고, 재미있기는 한데 전체 영상 시간을 직관적으로 알 수 없고, Gesture를 이어서 진행하기에는 불편한 느낌이다. 구간탐색 모드에서 구간탐색은 좌/우 Drag로 이동하고, 좌/우 구간탐색을 하는 중에 상/하 이동을 같이 수행하면 미세 조정이 가능한 방식으로 되어있다.

[그림3] Periscope 동영상 플레이어 : 주요 Gesture



3. TVING

TVING VOD에서는 좌측영역을 상/하 Swipe 하면 밝기조절 기능을, 우측영역을 상/하 Swipe 하면 음량조절 기능을 제공한다. 그리고 좌/우 Swipe를 하면 추천 채널 및 회차 이동 UI를 제공한다. 좌→우 Swipe 하면 '인기 Live 채널' 호출을, 우→좌 Swipe 하면 '회차, 최신방송'을 호출한다.

[그림4] TVING 동영상 플레이어 : 주요 Gesture



4. 옥수수 (Oksusu)

옥수수 VOD에서는 좌측영역을 상/하 Swipe 하면 밝기조절 기능을, 우측영역을 상/하 Swipe 하면 음량조절 기능을 제공한다. 그리고 좌/우 Swipe 하면 재생구간 이동 기능을 제공한다. 이 외에 타사에 없는 새로운 기능을 제공하는 것이 하나 있다. 화면을 Double Tap 하면 가로 모드에서 세로 모드로 전환, 세로 모드에서 가로 모드로 전환한다. 확실히 특이하긴 하지만 유용한 기능인지는 잘 모르겠다.

[그림5] 옥수수 동영상 플레이어 : 주요 Gesture



5. 비디오포털

비디오포털 VOD에서는 좌측영역을 상/하 Swipe 하면 밝기조절 기능을, 우측영역을 상/하 Swipe 하면 음량조절 기능을 제공한다. 그리고 좌/우 Swipe 하면 재생구간 이동 기능을 제공한다.

[그림6] 비디오포털 동영상 플레이어 : 주요 Gesture



정리하며

다음과 같이 모바일 동영상 플레이어 내 Gesture UI를 간략하게 살펴보았다. 예전에는 동영상 플레이어에서 Gesture를 잘 활용하지 않았지만, 요즘에는 고객의 시청 경험을 향상하기 위한 부가요소로 Gesture가 적절히 활용되고 있는 것을 알 수 있다.

[그림7] 각 VOD 서비스별 Gesture를 통한 UI 호출방식


한 가지 흥미로운 점은 대부분의 국내 서비스는 상/하 Swipe 하면 밝기조절과 음량조절을 제공한다는 것인데, 정작 해외 사례를 보면 상/하 Swipe를 다른 부가적 기능으로 활용(관련 동영상 호출)하거나, 해당 Gesture를 사용하지 않는 것을 파악할 수 있었다. 또한, 대부분의 국내 서비스에서는 좌/우 Swipe는 구간 탐색 기능이나 관련 영상 호출 기능으로 활용하는데 해외 사례에서는 좌/우 Swipe Gesture를 활용하지 않는 경우가 대부분이었다. 상/하/좌/우 Swipe 기능이 잘 활용이 되면 유용하겠지만, 사용자의 입력 오류를 발생시킨다는 점을 고려해 신중히 활용되어야 할 것이다.

N Player의 경우 좀 더 나아가서 Gesture를 별도로 커스터마이징 할 수 있는 기능을 제공한다. 모든 설정이 귀찮듯, 커스터마이징을 사용자에게 전부 맡길 수는 없겠지만 필요에 따라 사용자의 성향과 상황에 맞는 Gesture를 제공할 수도 있겠다.

[그림8] N Player : Gesture 커스터마이징


물론 Gesture 사용에 있어서 단점도 존재한다. Gesture는 직접 사용해보지 않고는 해당 기능이 있는지 알기 어렵고, Gesture 자체가 익숙하지 않은 경우도 있다. 이러한 문제를 해결하기 위해서는 ‘도움말’ 같은 팝업 화면을 활용하여 안내할 수도 있다. 팝업 형태의 안내도 있겠지만 Youtube에서는 프로그래스 바의 Knob을 잡고 Drag & drop을 했을 때 상단에 구간이동 Gesture에 대한 간단한 설명을 제공한다. 이런 방식으로 자연스럽게 사용자에게 기능을 안내하는 것도 바람직한 방향이라고 생각한다.

[그림9] NaverTV 동영상 플레이어 : Gesture 이용 가이드


[그림10] Youtube 동영상 플레이어 : 재생구간 Gesture 이용 가이드


반면 넷플릭스의 동영상 플레이어는 Gesture 기능이 제공되지 않는다. Gesture 기능이 제공되지 않는다고 해서 특별히 사용이 불편한 것도 아니다. 만약 동영상 플레이어의 Gesture UI를 기획해야 한다고 하면, 이러한 점을 함께 염두에 두어야 할 것이다. 마지막으로 단순히 타사를 참고하기만 할 게 아니라, 어떤 Gesture와 기능을 활용할 수 있을지 깊이 있게 고민해야 한다. 좀 더 나은 UI를 기획하기 위해서는 당연하게도 더 많은 고민이 필요하고, 그것은 결국 사용자의 편의를 위한 것이어야 한다. ⓦ



[참고##UI 디테일##]



팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 0
Ad Test...
2018.03.15 07:50

[UI 디테일] 신한카드 Fan 앱카드 약관 동의 UI의 불편함


최근에 우연한 기회로 신한카드 Fan 앱카드를 가입하게 되었다. 가입 중에 약관 동의 페이지를 접했는데 입력해야 할 항목이 많아서 깜짝 놀랐다. (약관 동의 UI 화면은 하단 이미지를 참고하길 바란다.) 해당 페이지에서 느꼈던 UI 상의 불편함은 다음과 같다.


[신한카드 Fan 앱카드 약관동의 UI]

[신한카드 Fan 앱카드 약관동의 UI (동의 체크시 Flow)]


1. 입력의 불편함

일단 기본적으로 해당 약관 동의 UI는 체크박스가 너무 많다. 물론 '전체 동의’ 버튼을 누르면 모든 약관에 동의가 되기는 한다. 하지만 선택 약관을 해제하기 위해서는 일일이 선택해서 동의 해제를 해야 한다.

그리고 해당 약관은 대 카테고리 약관과 소 약관이 있는 구조로 되어있는데, 대 카테고리 약관에 동의하면 화면에 보이지 않던 소 약관들까지 한 번에 펼쳐지는 구조로 되어있다. 펼쳐지기 전 보이는 화면이 복잡해서 그러려니 했지만 약관이 펼쳐지는 순간 갑자기 복잡한 화면이 등장하는 바람에 혼란스러웠다.

(타사 사례로) 좌측 이미지는 카카오 뱅크의 약관 동의 UI이다. 카카오 뱅크 약관 동의 UI는 전체 동의 버튼을 하나만 두고, 기타 약관의 경우 동의 표시만 주고 있다. 또한 전체 동의 버튼 선택 시 선택 동의가 추가로 보이는 구조로 되어있다.

[좌-카카오 뱅크 / 우-신한카드 Fan 앱카드]


2. 레이블의 문제

해당 약관 동의 UI는 어떤 기준인지는 모르겠지만 [선택] 카테고리 하위에 [필수] 약관 동의와 [선택] 약관 동의가 섞여 있는 구조로 되어있다. 그래서 해당 약관이 선택 가능한 약관인지, 필수로 해야 하는 약관인지 혼란을 준다.

자잘한 이슈이지만 [선택], [필수] 약관 표시 전 약관 명과 띄어쓰기가 통일되어있지 않아 보이는 것도 신경 쓰인다.

약관을 동의하고 나서 추천인을 등록하는 UI가 있는데, 분명 [선택] 항목이라고 되어있으나 선택하지 않으면 다음 단계로 진행되지 않는 것도 문제이다.

좌측 이미지는 자사 신한카드 약관 동의 UI이다. 신한카드 약관 동의 UI는 필수 약관과 선택 약관을 분리하였다. 필수 약관에 전체 동의 체크박스를 두어 필수 약관 우선 전체 동의하고 그 이후에 선택 약관을 고를 수 있게끔 한다. 또한 필수 약관과 선택 약관의 구분이 비교적 명확하게 되어있다.

[좌-신한카드 / 우-신한카드 Fan 앱카드]


3. 항목 구별의 문제

해당 약관 동의 UI는 [필수] 약관과 [선택] 약관이 시각적으로 명확하게 구별이 되지 않는다. 그래서 필수 약관인지 선택 약관인지 주의 깊게 살펴보아야 하는 문제가 있다.

또한, 대 카테고리 약관과 소 약관의 구별이 잘 되지 않아 시각적으로 더 복잡해 보이기도 한다.

[접기] / [펼치기] 버튼과 약관 상세정보 [더보기] 버튼 스타일이 동일하게 되어있어 내용을 주의 깊게 살펴보고 버튼을 눌러야 한다.

(타사 사례로) 좌측 이미지는 K뱅크 약관 동의 UI이다. 필수 약관과 선택 약관의 구별이 시각적으로 명확하게 구별되어 있으며, 필수/선택 항목을 약관 명보다 우선해서 보여줘 빠르게 인지를 할 수 있다.

[좌-K뱅크 / 우-신한카드 Fan 앱카드]


정리하며

다음과 같이 신한카드 Fan 앱카드 약관 동의 UI의 문제점을 살펴보았다. 신한카드의 경우 잘 하고자 하는 ‘의지’는 있지만 뭔가 다른 문제로 인해 사용성에 문제가 생긴 경우라고 볼 수 있다.

UI 기획을 하다 보면 서비스마다 약관 동의 화면을 기획하게 된다. 약관 동의 화면은 정책적인 이슈로 인해 화면 기획을 보수적으로 설계해야 하는 어려움도 있고, 상대적으로 중요한 페이지에 밀려 기획의 고민이 소외될 수밖에 없는 영역이다. 하지만 약관 동의 화면을 제대로 설계하지 않을 경우 사용자는 이 서비스에 대한 인상이 나빠질 수밖에 없다. 약관 동의 화면은 앱 사용에 있어 최전선에 있는 화면이고 좋든 싫든 간에 마주할 수밖에 없는 화면이다. 해당 UI의 제약점을 알고 조금 더 사용자 친화적으로 설계했으면 하는 바람이다.

마지막으로 매력적인 약관 동의 UI를 찾아보았다. 좌측은 Toss 약관 동의 UI이고, 우측은 카카오페이 약관 동의 UI이다. 물론 실제로 서비스에 적용하기에는 제약점이나 한계가 있을 것이다. 내가 어떤 약관에 동의하는지 안내하고 [동의] 버튼을 누름으로써 갖가지 약관에 즉시 동의할 수 있게 하는 UI가 현재로서는 그나마 이상향에 가까운 UI라고 생각한다.

[좌-Toss / 우-카카오페이]


[참고##UI 디테일##]



팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 2
Ad Test...
2017.12.06 07:50

UX 포트폴리오, 이력서, 자기소개서를 준비하기 전 알아야 할 관련 링크 모음


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 원티드)



[참고##포트폴리오##]



팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 0
Ad Test...
2017.11.30 07:50

[도서] UX / UI 신간 소식 (2016~2017)


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. 프로그래머처럼 생각하라

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

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


[참고##도서추천##]


팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 0
Ad Test...
2017.03.09 07:50

영감을 주는 3개의 글


저는 인터넷의 많은 블로그들에서 영감을 주는 글을 읽는 것을 좋아합니다.

특히나 한 업계의 대가가 들려주는 글들을 통해 얻는 영감은 말할 것도 없겠지요 :)

최근에 우연한 기회로 제가 UX업계로 발을 들이도록 인도해 준 Alan Cooper의 블로그 글들을 읽게 되었습니다.

(혹시나 모르시는 분을 위해… Alan은 퍼소나를 고안해낸 Interaction design 분야의 선구자입니다.)


제가 읽은 글 중에서 가장 감명 깊게 읽은 3개의 글을 소개 드립니다.

이 글들을 신입 디자이너일 때 읽었어도 좋았겠지만, 6년 차인 지금 읽으니 그간의 프로젝트 경험과 디자이너라는 직업에 대해 반추해보는 계기도 되고, 새롭게 와닿는 부분도 있어서 좋았습니다.


영문 글이니 시간 있으실 때 천천히 음미하시면서 읽어보시면 좋을 것 같습니다.



간략하게 설명하는 UX Design의 14단계_UX Design in 14 Simple Steps

https://medium.theuxblog.com/ux-design-in-14-simple-steps-b8a0f2780769

UX를 배우고 싶어 하는 19살 소년의 질문에 답변한 내용을 바탕으로 UX의 전체 프로세스를 14단계로 설명하는 내용입니다.

현장조사, 퍼소나, 시나리오, 프레임워크, 세부 디자인까지, 각 단계에서 가장 핵심적인 것과 전체 과정에 대한 중요한 철학들을 담고 있습니다.




UX 디자이너의 위기지학_You learn by doing, so do what you must learn

https://medium.com/@MrAlanCooper/you-learn-by-doing-so-do-what-you-must-learn-f59e15574635

UX 디자이너들이 Learn by doing을 어떻게 해야 할지에 대한 관점을 제시하는 글입니다. 위기지학이 중요하다는 것은 알지만 어떤 방식으로 해야 할지 막막하다면 읽어보시는 것을 권합니다.

글의 골자는 역순으로 redesign을 해보라는 것인데 저에게는 새로운 관점이어서 재미있었습니다.




알렉산더식 디자인_Alexandrian Design

https://medium.com/@MrAlanCooper/alexandrian-design-ab5742c5175a

여기서 말하는 알렉산더는 그 정복자 알렉산더 대왕이 아니라 <A Pattern Language>이라는 유명한 책의 저자인 건축가 크리스토퍼 알렉산더를 뜻합니다.

이 글은 위 2개의 글에 대한 근본적인 철학을 담고 있기도 하고, 인터랙션 디자이너의 직업적 소명에 대해 다시금 생각해볼 수 있는 글입니다.


제가 해당 글에서 가장 큰 울림을 받았던 구절입니다.

When you are an artistic designer, you look inside yourself for inspiration and vision. When you are an Alexandrian designer, you look at your users.



팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 0
Ad Test...
2016.02.17 07:50

[도서] UX / UI 신간소식 (2015~)

2015년 이후 출간된 UX / UI 신간 소식 공유드립니다.


1. 어바웃 페이스 4 (2015)

앨런쿠퍼, 로버트 라이만 외 저 | 최윤석 역 | 에이콘출판

어바웃페이스 3 업데이트판 입니다. 어바웃페이스 3 업데이트 된 이후 아이패드가 출시되었고, 이후 터치기반 인터페이스 관련한 용어 및 내용이 추가되었다고 합니다. 

http://book.naver.com/bookdb/book_detail.nhn?bid=9190581


2. 사용자 인터뷰 (2015)

스티븐 포티걸 저 | 김승권 외 2명 역 | 지앤선

그동안 '인터뷰' 하나에 대해서 중점적으로 기술한 책이 드물었던 것 같은데, 비로소 이런 책이 출간되었습니다. 이론과 실무의 간극이 분명히 존재하지만 체크리스트 관점에서 활용하실 수 있을것 같습니다.

http://book.naver.com/bookdb/book_detail.nhn?bid=9878156


3. 사용자 경험이야기 (2015)

이상용 저 | 지앤선

UI 입문서로 적당한 책으로 생각됩니다.

http://book.naver.com/bookdb/book_detail.nhn?bid=9546849


4. UX 디자인 이야기 (2015)

현호영 저 | 유엑스리뷰

이 책도 UI 입문서로 적당한듯 합니다.

http://book.naver.com/bookdb/book_detail.nhn?bid=9577835


5. 모바일 결제 UX 디자인 (2015)

스킵 알럼스 저 | 전현정 역 | 비제이퍼블릭

요즘 트랜드를 반영한 책이네요. 모바일 결제 프로젝트나 평소 결제 관련해서 관심이 있으셨다면 읽어보시면 좋을것 같습니다.

http://book.naver.com/bookdb/book_detail.nhn?bid=9192386


6. One UX (2015)

문재승 저 | 지앤선

1인칭 주인공시점 UX를 One UX라고 한다네요... 사물인터넷 관련 도서입니다.

http://book.naver.com/bookdb/book_detail.nhn?bid=9742096


7. 마이크로인터랙션 (2015)

댄 새퍼 저 | 정승녕 역 | 인사이트

댄 새퍼의 마이크로인터랙션 번역본이네요. 댄 새퍼는 UI도서의 원조격이라고 할 수 있는 '인터랙션 디자인'의 저자입니다. 마이크로인터랙션은 디테일에 집착한 인터랙션이라고 이 책에서는 정의하고 있습니다. 아주 작은 부분에서의 개선이겠지만 강한 위력을 발휘한다고 하는데 어떤 내용일지 궁금하네요.

http://book.naver.com/bookdb/book_detail.nhn?bid=9011635

원서 : Microinteractions http://amzn.com/1491945923


8. 현대카드 디자인 이야기 (2015)

오영식, 차재국 외 1명 저 | 세미콜론

토탈임팩트의 현대카드 브랜딩 비화가 담겨있는 책입니다.

이전에 Design whthout word 라는 책과 맥락을 같이하는듯 합니다.

http://book.naver.com/bookdb/book_detail.nhn?bid=9202735


9. 모바일 앱 디자인 패턴 (2015)

테레사 닐 저 | 박정아, 임정화 역 | 에이콘출판

'리치 인터페이스 디자인' 책을 기억하시나요? 웹 인터랙션 패턴을 정의한 그 테레사 닐의 모바일 앱 버전입니다. 개인적으로 내용이 기대되네요.

http://book.naver.com/bookdb/book_detail.nhn?bid=8778877

관련도서 : 리치 인터페이스 디자인 http://book.naver.com/bookdb/book_detail.nhn?bid=6255460


10. 스타워즈에서 미래 사용자를 예측하라 (2015)

네이선 셰드로프, 크리스토퍼 노에셀 저 | 정지훈 역 | 틔움

영화에서 미래 시나리오에 대해 영감을 얻는것은 꽤 괜찮은 발상인것 같고, 실제로도 학교에서 이런 방식의 접근을 수행하는 것으로 알고 있습니다. 

최근 'Her'나 'Black mirror'에서도 충분히 예측가능한 미래 시나리오와 미래 시나리오의 부작용에 대해서 생각해 볼 거리를 던지고 있는데, 영화에서 미래 사용자를 예측한다니... 흥미롭네요.

http://book.naver.com/bookdb/book_detail.nhn?bid=10017295

원서 : http://amzn.com/1933820985

[참고##도서##]



팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 0
Ad Test...
2016.01.19 07:58

UI의 근본 문제와 UX의 핵심 4단계


철학의 근본 문제는 존재와 사유의 관계에 대한 문제다.

(The great basic question of all philosophy, especially of more recent philosophy, is that concerning the relation of thinking and being. Frederick Engels, Ludwig Feuerbach and the End of Classical German Philosophy, Part II Materialism)


진화 이론에 따르면 모든 동물의 '생각'이란 자연 세계에서 생존 확률을 높이기 위하여 바깥세상을 미리 시뮬레이션하는 기능, 즉 거울(모방) 기능이기 때문에 기본적으로 둘은 서로 유사할 수 밖에 없고, 무엇이 더 우선하느냐에 대하여 혼란이 생길 수밖에 없다. 더군다나 인지하는 주체가 의식이며, 우리가 물질을 파악할 수 있는 유일한 방법이 의식을 통해서이기 때문에, 물질과 의식의 관계에서 의식에 더 강조점을 두는 것이 오랫동안 자연스러운 현상이었다. 

(물론 결론에 관하여는 개인에 따라 의견 차이가 있다.)


어쨌든 사용자 인터페이스에서도 마찬가지로, 우리가 만들려는 대상이 있고, 이를 인간이 인식하고 조종하는 관계를 만든다면 이 두 가지의 관점에서 간단히 생각해 볼 수 있다.



사용자 인터페이스(UI)의 근본 문제는 무엇일까?


UI의 근본 문제는, 우리가 사용하려는 자원(Resource)의 배분 문제이다. 배분이 문제가 되는 건 자원이 제한되어 있기 때문인데, 크게 두 가지 자원의 제약이 있다.


1. 전달하려는 인터페이스의 대역폭(Bandwidth)의 제한

화면 인터페이스라면 화면의 크기가 제한되어 있다. 소리라면 소리의 형태로 담을 수 있는 정보가 제한되고, 촉각이라면 구분하여 보낼 수 있는 촉각의 종류가 제한되어 있다. 공간에 펼쳐지면 공간이, 시간에 펼쳐진다면 시간에 제한이 있을 수 있다.

많은 경우 우리가 'UI 디자인'을 한다는 건, 제한된 자원에서, 우리가 더 중요하다고 생각하는 것을 배치하는 행위를 말한다. 혹은 때로는 그것을 공간에 압축하거나, 공간상에 펼치거나, 시간순으로 펼치거나, 반대로 시간 축에 접는 디자인을 말한다.


2. 받아들이는 인간의 주의력 제한

인간의 주의력도 매우 제한된 자원이다. 

설령 무한대의 인터페이스 자원이 펼쳐진다 하더라도, 인간이 주의를 기울여 파악할 수 있는 것의 한계가 있기 때문에 제한이 생기게 된다. 인간이 한 번에 볼 수 있는 것과 들을 수 있는 것이 한계가 분명하고, 설령 다 본다고 하더라도 그 중에서 정말 관심을 가지고 볼 수 있는 것은 극히 제한적이기 때문에 인터페이스 디자이너는 사용자가 어디에 관심을 끌게 하도록 설계할지 깊이 고민할 수밖에 없다. 이러한 관점에서는 사실 손바닥만 한 모바일 화면조차 태평양의 크기에 가깝게 느껴질 때가 있다. 


이렇게 인터페이스의 대역폭과 인간의 주의력이 제한되어 있으므로 우리는 화면을 설계할 때 특정한 사람의 특정한 문제에 집중할 수밖에 없다. 이를 위하여 목표 고객을 정확하게 이해하는 퍼소나(Persona)는 인터페이스 디자인에서 근본적인 방법이 될 수 밖에 없다.




1세대 HCI/UI의 목표가 사용성의 증가, 즉 좀 더 효율적으로 학습하고, 사용하고, 오류를 일으키지 않는 것이 목표였다면, 2세대 UX의 목표는 사용자의 근본적인 목적(Goal Directed Design)과 환경(Contextual Design)에 대한 이해라고 할 수 있다. 이를 위하여 '사용자 경험'을 디자인하는 것은 서비스를 통하여 사용자의 태도(Attitude), 행동(Behavior), 환경(Context)을 변화시키는 것을 말한다.


그러나 단순한 오류 개선으로 한계를 느꼈던 많은 사람들이 총체적인 변화를 이끌어내는 '경험'이라는 개념을 통해 혁신을 이루었듯이, 이제 단순히 사용자의 목적을 잘 이해하는 UX만으로는 새로운 서비스를 만들기 어려운 시대가 된 상황에서 무언가 더 근본적인 것이 없으면 혁신을 이루기 어려운 시대가 되었다. 


그것이 무엇인지 아직 잘 모르겠지만,

최근에 정리한 UX의 핵심 4단계는, 

1단계. 욕망, 궁금, 불안, 결여, 찝찝함 (불편 X) 

2단계. 반복의 재미 

3단계. 통제감 (욕망/궁금증/불안/결여의 완벽한 해소) 

4단계. 하지만 다시 오는 욕망, 궁금증, 불안, 결여. 


사실 '디자인과 욕망'으로 검색해 보면 이미 많은 자료가 나오기 때문에 특별히 더 설명할 필요는 없지만, UX 디자이너들로서 스스로 깨달은 것이라면, '무엇이 불편하니까 고치려고 한다'거나 '사람들은 어떤 목적을 달성해야 하는데 그것을 이루도록 한다'거나 하는 수많은 서비스와 앱들이 그 자체가 훌륭함에도 불구하고 성공하지 못 한 것은 앞으로 서비스를 설계하는 UX 디자이너들은 반드시 '욕망'이나 '결여' 혹은 '불안'을 다루지 않으면 안 된다는 사실이었다.


예를 들어 택시 앱을 설계한다면, 택시를 잡기 어렵다거나(불편), 야간에 택시를 타고 쉽게 집에 갈 수 있다(목적)는 건 기본적으로 해야 하지만 이것으로는 결코 앱이 성공할 수 없다는 점이 중요하다. 우버가 불려 일으켰던 '욕망' 혹은 '궁금'은 무엇이었을까? 카카오택시를 반복하여 탄다는 건 어떤 느낌의 재미일까? 이제 카카오택시를 이용하면 어떤 '통제감'이 들 것인가? 이런 식의 설계를 해 나가야 할 것 같다.


이는 인터페이스의 제한 보다는 인간의 주의력 제한이 날이 갈수록 더욱 희소한 자원이 되어 가기 때문에 (무언가 멋진 일을 해주려는 멋진 앱이나 서비스나 너무 많으므로) 생기는 일인 듯하다.


내가 설계하는 UX에서 늘 다시 생각하고 다시 생각하지만, 여전히 아주 잘 해결되지는 않는 문제라 늘 괴롭다.


[참고##시간 위의 디자인##]




팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 0
Ad Test...
2015.03.09 07:50

UX / 디자인 신간 소식 (2014~)

UX / 디자인 신간 소식 공유드립니다.


요즘은 UX / 디자인 서적이 많이 나오고 있어서 정보를 얻기에는 좋지만 자신에게 꼭 필요한 책을 고르기는 더 어려워진것 같습니다.

나에게 맞는 책을 찾으시려면 인터넷에서 관련 키워드로 검색한 후에 서점에서 책을 살펴보시길 권합니다.

 

 


1. 일상의 디자인 (2015)

진선태 저 | 지콜론 북

버내큘러 디자인에 관련된 책 입니다. UX 디자이너가 디지털 제품에 중점을 두고 문제 해결을 한다면, 버내큘러 디자인은 일상 생활의 문제 해결에 중점을 둡니다.
http://book.naver.com/bookdb/book_detail.nhn?bid=8735250

 


2. 내일의 디자인 (2014)

하라켄야 저 | 이규원 역 | 안그라픽스

무인양품의 아트디렉터인 하라켄야의 신작입니다. 더이상 설명이 필요할까요?
http://book.naver.com/bookdb/book_detail.nhn?bid=7463679 


하라켄야의 이전 책 리스트
http://book.naver.com/search/search.nhn?sm=sta_hty.book&sug=&where=nexearch&query=%ED%95%98%EB%9D%BC+%EC%BC%84%EC%95%BC
 


3. 함께하는 디자인 (2014)

댄브라운 저 | 장현순 역 | 위키북스

요즘 화두가 되고있는 기획자와 디자이너와의 협업에 관련된 책입니다. 흥미롭네요.
http://book.naver.com/bookdb/book_detail.nhn?bid=7760370
 

댄브라운이 쓴 책인데, 댄브라운은 이전에 UX 디자인 커뮤니케이션을 썼습니다. 

http://book.naver.com/bookdb/book_detail.nhn?bid=6869716
 

4. D&department 에서 배운다.(2014)

나가오카 겐메이 저 | 허보윤 역 | 에피그람

D&department 의 디자이너 나가오카 겐메이의 신간이네요.
http://book.naver.com/bookdb/book_detail.nhn?bid=8386449
 

 
나가오카 겐메이의 이전 책들도 같이 공유드립니다.
 
디자이너 함께하며 걷다 (2010)
http://book.naver.com/bookdb/book_detail.nhn?bid=6271283
디자인 하지않는 디자이너 (2010)
http://book.naver.com/bookdb/book_detail.nhn?bid=6264692

디자이너 생각위를 걷다. (2009)

http://book.naver.com/bookdb/book_detail.nhn?bid=6101167 



5. The story of UX design (UX 디자인 이야기) (2014)

현호영 저 | 프로제

UX 초급자나 학생들이 쉽게 읽을 수 있는 전과같은 느낌적인 느낌.
http://book.naver.com/bookdb/book_detail.nhn?bid=8199633
 

 


6. 웹디자이너 아이디어 북 (2014)

패트릭 맥닐 저 | 손정현 역 | 프리렉

웹디자인 GUI 패턴에 관련된 책입니다.
http://book.naver.com/bookdb/book_detail.nhn?bid=8109823
 

 


7. 사악한 디자인 (2014)

크리스 노더 저 | KAIST IT 융합연구소 역 | 위키북스

인지 심리 관련도서로 제프존슨의 '마음을 생각하는 디자인'과 유사한 책입니다. 

'마음을 생각하는 디자인'이 사용성 원칙들이 왜 그러한지 설명하는 책이라면, '사악한 디자인'은 사람의 심리를 이용한 디자인 패턴 모음입니다

디자인 패턴을 7대 죄악(사람의 기본적인 욕구)에 따라 분류를 해서 흥미를 일으키도록 했습니다.

http://book.naver.com/bookdb/book_detail.nhn?bid=7905836
 

  

8. 경험디자인 (2014)

김진우 저 | 안그라픽스

연세대학교 HCI 랩 김진우 교수님의 책입니다.
http://book.naver.com/bookdb/book_detail.nhn?bid=8498532
http://agbook.co.kr/book/1725/
 

 
 

9. 멀티디바이스 UX 디자인 (2014)

미할 레빈 저 | 이미령 역 | 한빛미디어

멀티디바이스 이슈, 사물인터넷 내용이 좀 들어있는것 같아요.
http://www.yes24.com/24/goods/15112047
 

 


10. 사용자를 생각하게 하지 마! (2014)

스티브 크룩 저 | 이미령 역 | 인사이트

스티브크룩의 Don’t make me think 3판 번역본입니다.
이전 판에 비해 그렇게 많이 바뀌진 않았습니다.
http://book.naver.com/bookdb/book_detail.nhn?bid=8399135

이재용 대표의 서평도 참고하세요.

http://story.pxd.co.kr/986

스티브크룩의 이전 책들도 확인해보세요.
http://story.pxd.co.kr/318
 

 
고맙습니다.


[참고##도서##]

 


팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 0
Ad Test...
2013.12.22 03:45

[해외교육] Euro IA 2013 둘러보기 - Day 1 : Usable Usability, Being in business with IA

pxd의 교육 프로그램의 일환으로, 2013년 9월 26~28일에 영국 스코틀랜드의 수도 에든버러에서 진행되었던 Euro IA 2013 컨퍼런스에 pxd Innovation Group 1의 Experience designer 두 명이 참가하였습니다.

총 3일 동안 워크숍과 강연으로 구성된 컨퍼런스의 주요 내용을 날짜별로 공유하려고 합니다. 그리고 나머지 교육 전후의 흥미로운 여행기도 함께 연재하려 하니 기대해 주세요. 
(컨퍼런스는 영어로 진행되었기 때문에, 대부분은 우리말로 바꾸어 보았습니다. 그러나 다소 어색할 수 있으니 양해 바랍니다. ^^)

Euro IA 2013 둘러보기 - Day 1
Euro IA 2013 둘러보기 - Day 2
Euro IA 2013 둘러보기 - Day 3
교육 전후 여행기 1 (예정)
교육 전후 여행기 2 (예정)

그럼 시작해 볼까요? ^ ^


Workshop 1.
Usable Usability — Lean UX Start Right Here presented by Eric Reiss 


Euro IA 2013의 첫째 날에는 본격적인 컨퍼런스에 앞서 워크숍 프로그램이 있었습니다. 첫 번째로 참여한 프로그램은 에릭 리스Eric Reiss의 Usable Usability입니다. 우리말로 바꾸면 '사용할 수 있는 사용성(감)' 정도가 될까요? 또한, 이 주제는 에릭 리스가 2012년에 같은 제목의 책으로 출간했습니다. 당초 워크숍일 것이라는 예상과는 다르게 튜토리얼 강의라서 당황했지만, 사용성에 대해 다시 떠올려 볼 수 있는 시간이었습니다.
강의는 Usability의 정의를 Ease of Use와 Elegance clarity라는 두 가지로 분류하고, 그에 해당하는 주요 항목에 대한 내용에 대한 설명과 주의할 점들을 중심으로 진행되었습니다. 개인적으로는 UX를 하면서 알고 있지만 정리하지 않았던, 그리고 배웠었지만 잊고 있었던 내용들이라, 강의 내용을 좀 무리해서(?) 정리해 보았습니다. ^^;; 
    What is Usability?(사용성이란 무엇인가?)

  1. "We make applications that let users put information in and get it out again. If a user can do this, then it's usable." -Anonymous developer-  
    (우리는 사용자가 정보를 입력하고 다시 그것을 얻을 수 있도록 응용 프로그램을 만든다. 사용자가 이 작업을 수행할 수 있다면, 그것은 사용가능하다고usable 말할 수 있다 - 익명의 개발자)
  2. "An automobile is a machine that moves people from one place to another. If it can do this, then it's usable." -My wife-
    (자동차는 한 장소에서 다른 장소로 사람을 이동시키는 기계다. 이 작업을 수행할 수 있다면 사용가능하다고usable 말할 수 있다 -나의 아내-)
  3. Usability is situational (사용성은 상황적인 것이다)
  4. "ease of use" : "It does what I want it to do" (physical)
    (사용 편의성 : 내가 무엇을 원하는지에 대한 것, 물리적 관점)
  5. "elegance and clarity" : It does what I expect it to do" (psychological)
    (간결한 명료성 : 내가 기대하는 것들에 대한 것, 심리적 관점)


* 아래 각 항목에 대한 상세 내용은 '더보기' 버튼을 선택하여 확인하세요.

1. Ease of Use(사용 편의성)

Ease of use = Functional + Responsive + Foolproof + Convenient + Ergonomic
(사용 편의성 = 기능적 + 반응 + 고장없는 + 편의성 + 인간공학적)

1) Functional(기능적)
- The buttons and links work when they are clicked(버튼과 링크가 클릭할 때 잘 연결되는지)
- The navigation is responsive(네비게이션이 제대로 반응하는지)
- The processing speed is acceptable(허용가능한 처리속도 수준인지)

&#39;Functional&#39; 더보기


2) Response(반응)
- When a button is clicked, you can see that it "reacts"(버튼을 클릭하면, 당신이 "반응"을 볼 수 있는지)
- When the page changes, you notice the change(페이지가 변경되면 변하는 것들을 확인할 수 있는지)
- Cursors and markers change when appropriate(적절한 때에 커서와 표식이 바뀌는지)
- In short, the application provides visual feedback(짧게 말하자면, 응용 프로그램이 시각적인 피드백을 제공하는지)

&#39;Response&#39; 더보기


3) Ergonomics(인간공학)
12 principles of ergonomics(인간 공학의 12가지 원칙)
- Work in neutral postures(중립적인 자세)
- Reduce excessive force(무리한 힘을 감소)
- Keep everything in easy reach(쉽게 미칠수 있는 범위에서 모든 것을 유지)
- Work at proper height(올바른 높이에서 작업)
- Reduce excessive motions(과도한 움직힘을 감소)
- Minimize fatigue and static load(피로와 정적 부화를 최소화)
- Minimize pressure points(문제가 생길 곳을 최소화)
- Provide clearance(간격 제공)
- Move, exercise, and stretch
- Maintain a comfortable environment(쾌적한 환경 유지)
- Enhance clarity and understanding(명확성과 이해도 향상)
- Improve work organization

&#39;Ergonomics&#39; 더보기


4) Convenient(편리한)
- The buttons are put where they are needed most(가장 필요한 곳에 버튼을 배치)
- Scrolling is kept to a minimum(스크롤은 최소로 유지)
- Related items are grouped together in the layout(관련 항목들을 그룹화)
- Elements that must be used simultaneously are also visible simultaneously(동시에 사용해야 하는 요소들을 동시에 볼 수 있도록)
- Alt tags let people know what unfamiliar icons will do. You can even use these to create small help boxes: This control lets you change the materials used in your construction(ALT tags는 사람들에게 익숙하지 않은 아이콘이 무엇인지를 알려준다. 당신은 이것을 이용하여 작은 헬프박스를 만들 수 있다 : 이 컨트롤은 당신이 생성한 것에 사용된 material을 변경할 수 있다)

&#39;Convenient&#39; 더보기


5) Foolproof(풀 프루프): 제어장치나 제어계 시스템에 대해 인간의 오동작을 방지하기 위한 설계
- Help people avoid making mistakes(사람들이 실수를 방지하는데 도움)
- Don't rely on instructions!(지침/지시사항에 의존하지 마라!)
- Don't expect people to remember what they did to make it work the last time they used the application(사용자가 마지막으로 사용한 것을 기억할 것이라 기대하지 마라)
- There are three techniques : Remind(상기), Alert(경고), Force(강제)
- Customization vs personalization(맞춤화 vs 개인화)
     Customization : what I do to something(내가 원하는 무언가)
     Personalization : what the thing does because it thinks I might want this(내가 원할 수도 있는 것이니까 이뤄지는 것들)

&#39;Foolproof&#39; 더보기




2. Elegance clarity(간결한 명료성)

Elegance clarity = Visible + Understandable + Logical + Consistent + Predictable
(간결한 명료성 = 가시성 + 이해 가능한 + 논리적 + 일관성 + 예측 가능한)

1) Visible(가시성)
- If people don't see a control, it does not exist!(컨트롤을 볼 수 없다면, 존재하는 게 아니다)
- Use groupings and colors to create a visual hierarchy(시각적 계층 구조를 만들 수 있게 그룹화하고 컬러를 사용해라)
- Cut down the visual noise. Think "feng shui"(시각적 노이즈를 줄여라. 풍수를 고려해라)

&#39;visible&#39; 더보기


2) Understandable(이해가능한)
The keys to creating shared references(공유하는 레퍼런스 생성의 핵심)
- Don't make anything for granted(당연하다고 여기지 마라)
- Answer the questions people may have(사람들이 할 수 있는 것들에 대한 질문에 답해보기)
- Anticipate questions they didn't think to ask(사람들이 궁금해할거라 생각하지 않았던 질문을 예상해보기)
- The communication environment will affect the information needed at any given time(커뮤니케이션 환경은 언제든지 요구된 정보에 영향을 미칠 것이다)

&#39;Understandable&#39; 더보기


3) Logical(논리적)
- Deductive reasoning(연역적 추리)
- Inductive reasoning(귀납적 추론)
- Retroductive inference(환원적 예측)

&#39;Logical&#39; 더보기


4) Consistent(일관성)
- Always call things by the same name: Save = Save ≠ Submit
(항상 같은 이름으로 호출하도록 해야 함 : 저장 = 저장 ≠ 제출)
- Don't reuse icons for different functions (다른 기능 아이콘을 재사용하지 말 것)
- Don't change the behaviour of objects as they open and close on a page(페이지에 가까운 개체 동작을 변경하지 말것)
     Look the same = behave the same(동일하게 보이기 = 동일하게 동작해야함)
     Look different = behave differently(다르게 보이기 = 다르게 동착해야함)

&#39;Consistent&#39; 더보기


5) Predictable(예측)
- Make sure that functions and navigation always appear in the same place(기능과 탐색은 항상 같은 위치에 나타나는지 확인해야 함)
- People need to know where they can expect to find things(사람들이 원하는 것을 찾을 수 있도록 예상할 수 있어야 함)
- Use your design to let people know ahead of time how many steps there are in a process(처리 중에 어느 단계에 어느 정도 소요되는 지 사람들이 알 수 있도록 디자인해야 함)
- Make sure to let them know where they are in a multistep process(여러 단계 속에 어디에 있는지 확인할 수 있도록 해야 함)

&#39;Pridictable&#39; 더보기



이렇게 강의는, 우리 주변의 작은 것들부터 시작하는 사용성에 대해 사례와 함께 생각해 보면서, 사용성 문제를 발견하고 해결해가는 가이드에 대해 들을 수 있는 의미 있는 시간이었습니다.



Workshop 2. 
Being in Business with IA — Delivering Cross-channel UX presented by jason hobbs and Andrea Resmini 

에릭리스의 프로그램이 끝나고, 오후에는 안드레아Andrea Resmini와 제이슨Jason Hobbs이 함께 진행하는 Being in Business with IA라는 프로그램에 참석했습니다. 

프로그램 구성

Session 1 : 인포메이션 아키텍처Information Architecture가 각자에게 어떻게 정의되고 있는지 참여자들 각자의 관점과 생각을 논의
Session 2 : 워크숍 참여자들과 간단히 실습

에릭리스의 워크숍은 교과서적인 내용을 가지고 굉장히 체계적인 흐름의 강의를 듣는다는 느낌을 받았던 반면, 이 워크숍은 진행자 두분의 난상 토론격 대담식으로(게다가 매우 빠른 속도의 영어로!), 자유로운 분위기에서 진행되었습니다. 

강의의 주요 내용과 현장 스케치를 공유합니다. 


Session 1 : What is Information Architecture?
What is 'Information Architecture'?(인포메이션 아키텍처는 무엇인가?)
  1. Everything is design(모든 것이 디자인이다)
  2. The complexity of the world we live in steadily increasing(우리는 복잡성이 점점 더 증가하는 세상 속에 있다)
  3. The problems we face are systemic and grounded in social reality(우리가 직면하는 문제들은 조직뿐만 아니라 사회적 리얼리티에 기반하고 있다)
  4. Design is battling to respond in it's current siloes(graphic, industrial, architectural, digital) (디자인은 현재의 사일로siloes(그래픽, 산업, 건축, 디지털)에 대응하기 위해 다투고 있다.)
    * 여기서 사일로는 조직이기주의와 조직장벽을 빗댄 용어입니다.
    http://terms.naver.com/entry.nhn?docId=1914350&cid=2897&categoryId=2897


Design에 대해
  1. Research-Strategy-Design= "Design"
  2. : For simpler problems this process is performed at an intuitive level by designers.(간단한 문제의 경우, 이 과정이 디자이너의 직관적인 레벨에서 수행된다)
  3. : Complex problems however, require tools that can tackle the complexity explicitly(복잡한 문제가 있으면, 명시적으로 복잡성을 해결할 수 있는 도구가 필요하다)
  4. 리서치 과정 중에서 엄청나게 많고 복잡한 데이터를 얻는다.
  5. 디자이너는 이것들을 이해할 수 있게 구성하고 조직한다.
  6. 그리고 이 과정을 엮어서 결과적으로 솔루션을 제시한다.

Information Architecture
이 모든 것이 인포메이션 아키텍처Information Architecture 아닐까?
 
우리가 이렇게 문제를 발견하고 정의하고 해결하는 과정을  IA라고 인식하지 않는 이유는 우리는 일반적으로 IA를 '디지털적인 것Digital thing'이라 간주하기 때문이고, 포지셔닝 자체가 디자인 영역으로 되어있지 않기 때문이다.
(오히려 정보Information나 도서관학Library Science을 지향한다)


Session 2 : Workshop 
워크숍은 주제는 "Visit Inverness" campaign으로, 다음의 시나리오와 조건이 주어졌습니다.
* 인버네스Inverness는 영국 스코틀랜드 하이랜드Highland에 있는 도시입니다. http://www.inverness-scotland.com/
The city council wants to establish yet-undecided tourist-oriented services and support and promote a "Visit Inverness" campaign.
( 시의회는 관광 중심의 서비스를 구축하고 지원하기 위한 "인버네스 방문" 캠페인을 추진하려고 합니다)
  1. 인버네스에는 괴물이 살고 있다는 전설이 있다. 이를 활용하라.
  2. 이 서비스의 대상자는 지역 주민이 될 수도 있고 외부인일 수도 있다.
  3. 어떤 입장의 서비스 제공자가 될 지는 각 조에서 알아서 선택하라. 여행사가 될 수도 있고, 여행사에게 의뢰받은 서비스 컨설턴트 혹은 정부기관이라고 생각해도 된다.


Workshop 현장 스케치
실습은 A, B, C 3개 조로 나뉘어 팀 작업으로 진행하였습니다.
먼저 낯선 곳으로 여행을 가게 되면 그 지역의 정보를 어떻게 얻는지, 아이스-브레이킹 토크Ice-breaking talk를 하면서 정보를 얻는 채널 리스트를 작성했습니다.
그리고 이후에는 어떤 가이드도 주지 않고 진행과정 자체를 조별 재량으로 열어둔 상태로 진행했습니다. 저희 조는 전략과 솔루션을 내자는 큰 목표하에,
여행 상품 서비스의 이해관계자들과 그 관계속에 발생하는 이슈들을 고민해보기도 하고
구체화 방안에 대해 시각화 작업도 해보고,
이것저것 다양한 인포메이션 아키텍팅Information Architecting을 하면서 즐겁게 작업했습니다. 왼쪽부터 영국여자, 러시아남자, 미국남자, 영국남자..^^
조별로 다양한 시작점을 가지고 문제를 풀어낸 각자의 개성이 드러난 발표를 들을 수 있었습니다.

이 워크숍에서 전달하고자 했던 바와 인상깊은 구절을 다음과 같이 정리해보았습니다. 

  1. 일반적으로 IA라는 것은 웹과 같은 디지털 환경에서의 구조 설계라고 인식하고 있지만, 어느 채널에서나 응용되는 작업이다.
  2. 우리가 인포메이션 아키텍처로서 내는 결과물은, 작은 데이터 단위를 사용하여 새로운 구조와 공간 솔루션을 도출하는 (굉장히)창의적인 일이다.
  3. And in doing so, we design meaning.
    (그렇게 함으로써, 우리는 의미있는 것들을 디자인한다)


덧)
이번 컨퍼런스에서는 우리가 평소 부르는 UI나 UX라는 용어보다는, 유독 Information Architecture라는 용어를 많이 언급하고 있었습니다(다음에 연재될 블로깅에서도 Information Architecture 주제에 대한 강연이 있습니다). 특히 현장에서 다른 참가자들과 서로에 대해 인사할 때, 저희는 '나는 UI 디자이너야' 또는 '나는 UX 디자이너야'라고 소개하면, 상대방은 '나는 인포메이션 아키텍처야' 또는 '나는 인포메이션 아키텍팅을 해' 라고 하는 경우가 꽤 있었습니다. 인포메이션 아키텍처는 무엇인지, 우리가 알고 있는 정보설계라는 것이 어디까지 포함하는 것인지 고민하게 되었는데요, 이 강연에서는 인포메이션 아키텍처를 UI/UX이 담고있는 내용과 거의 유사한 관점으로 보고 있었고, 특히 채널범위의 확장을 얘기하고 있었습니다.



이렇게 두 가지 프로그램에 참여하면서, 첫째날의 일정을 마무리하였습니다. 다음 블로깅에서는 두번째 날에 진행되었던 컨퍼런스 현장과 강연에 대해 공유드리겠습니다. 유럽의 IA 공동체에서는 어떤 테마들에 대해 관심을 갖고 있고, 어떤 프로젝트를 시도했는지 궁금하다면 다음 블로그 포스팅을 기대해 주세요. ^^
[참고##해외교육##]

팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 12 Comment 2
Ad Test...
2013.04.24 00:06

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

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

또한 pxd 팀블로그의 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/


[참고##패턴##] [참고##가이드라인##]



팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 1 Comment 0
Ad Test...