클리어보스 세미나에서 발표한 파일입니다. 마크업 개발자 (혹은 프론트앤드 개발자)가 UX를 공부해야 하는 이유와 그 효과를 말합니다.

1. Between UX and
Front-end Technology
How much should a FE developer
know about User Experience Sanghun Woo
NHN Technology Services
wodory@nhn.com

2. My work: 나모 웹에디터 UX 설계
VIS Studio UX 설계
LG 전자 모바일 부품 표준화
NAVER 해피빈
NAVER 날씨
NAVER 자동차
NAVER 뮤직
NAVER 모바일 메인
NAVER 지도
NTS UIT실

3. 왜 UX를 알아야 할까?

4. 근데 UX는 뭐지?
UX가 좋아야 한다는데 UI랑 뭐가 다른지도
모르겠고, 그걸 어떻게 공부해야 할지도 모
르겠고
...

5. 1 사용자 경험 (User Experience, UX) 및
UX와 제품의 품질이 어떤 관계인지 살펴본다
좋은 제품의 비밀
사용자 경험

6. 고속도로와 국도
UX와 UI의 관점에서 서로 어떤 가치를 가질까?
빠른 도착 = 고속도로 = 좋은 UI
한국의 풍광 = 국도 = 좋은 경험 = 좋은 UX

7. 사용자 경험
User Experience
사용자가 제품이나 디자
인을
사용하기 전에,
사용하면서,
사용한 후에 느끼는
모든 감각과 경험
image - http://500px.com/photo/1273261

8. 사용자의 인식과 행동에 영향을 끼치기 위해
그들의 경험에 긍정적인 작용을 할 수 있도록
여러 요소를 창조하거나 일체화 시키는 것.
목표 달성의 과정에서 재미나 즐거움을 주는
것이 중요한 과제.
UX 디자인?

10. 만약 실수로 열쇠를
트렁크에 빠트리고 닫았다면?

13. 사람, 시스템
그리고 매개체
사람(=사용자)는 매개체(=UI)를 통해서 기계와 대화한다.
각자의 경험, 지식에 따라 다르게 해석할 수 있다.
image - http://www.flickr.com/photos/atochotto/3906333331

14. 때로 이해할 수 없는
판단을 하는 사람
불이 나면 우리는 어떤 행동을 할
까요?

15. 2 좋은 제품을 빠르고 즐겁게 만들기 위한
도구로서의 UX
더 빨리
더 기분 좋게

16. 소통을 위한 기본 지식
image - http://500px.com/photo/2109625
서비스를 완성하려면 디자이너의 의도를 이해
할 수 있는 스토리보드나 문서를 이해하고 인터
렉션을 구현해야 한다.
디자이너가 사용하는 기본 단어를 알고 대화하
면 더 빠르고 정확하게 이해/구현할 수 있다.

17. 디자이너: 첫 페이지의 토스트 팝업 위치를
바꾸어 주세요.

21. 디자이너: 드로어는 왼쪽과 오른쪽에
각각 있어야 해요.

24. 스크롤을 움직이는 막대
스크롤을 하기 위해
마우스로 드래그하는 막대 영역.
저 영역의 이름은 무엇일까?

25. 스스로에게 동기 부여하기
좋은 제품을 위한 설계 변경은 당연한 일
하나의 팀으로서 움직일 수 있는 동력

26. 아... 디자인 뭐 이래... 이상해

27. 쥬니버 케이스
쥬니버 PC "뽀로로놀이교실" 에 핵심 UI 를 모
두 JavaScript로 개발하였습니다.
오픈 할 때는 다양한 animation 효과를 구현
하였지만, 오픈 후에 모두 제거해 달라는 요청
을 받았습니다.
개발자 입장에서는 어렵게 개발한 기술을 모
두 제거 해야 할 상황이므로 기분이 상하거나,
아무 생각 없이 제거할 수도 있습니다.
하지만 주 사용자 = 어린이에게 드래그 & 드
롭 UI는 복잡하고 화려한 롤링 애니메이션 UI
보다는 단순한 마우스 클릭 기반 UI 가 효과적
이라는 설명에 납득하여 바로 제거했던 기억
이 있습니다.

28. 2 단순히 동작하는 기능이 아니라
더 쓰기 좋은 제품을 위한 UX
좋은 제품을 위한
전문가로서의 책임

29. 사용자와의 접점
마크업 개발자는 사용자의 인터랙션 영역을 담당.
사용자의 경험을 극대화 하고, 최상의 성능을 위
한 UI를 제안하는 일 = 마크업 개발자의 몫
단순한 기능 구현이 아닌 좋은 기능을 추구

30. 네이버 날씨
적극적인 의사 소통 + 의견 개진으로 CSS3
애니메이션 도입
더 풍부한 사용자 경험을 제공

31. 어떻게 만들지
설계할 수 있는 능력
만들어야 하는 UI의
동작과 의미에 맞춘 마크업을
선택할 수 있는 능력이 필요
모양과 함께 의미를 가지는 마크업을
만들기 위한 노력

32. 같은 기능, 다른 구현
같은 결과물이지만
접근성, 혹은 효율면에서 서로 다른 구현

33. 같은 기능, 다른 구현
같은 결과물이지만
접근성, 혹은 효율면에서 서로 다른 구현

34. 같은 기능, 다른 구현
같은 결과물이지만
접근성, 혹은 효율면에서 서로 다른 구현

37. 성능 vs 개발 속도
애니메이션은 무조건 CSS3로 해야 한다는 고정관념을 타파

38. 4 좋은 개발자, 혹은 새로운 일의
준비를 위한 UX
발전하는
나를 위한 능력

39. 프론트앤드 개발자의 미래
마크업, JavaScript, Flash, 서버, UX Design.....
UX를 통해 나의 새로운 재능을 알 수도 있다.
image - http://www.carpages.ca
CSS3
Accessibility
HTML
Site
Performance
Product
Markup Developer?

40. JavaScript
Server
Programming
HTML5
Front-end
Developement
Product
Python
Accessibility
CSS3
Java
UX Design
Site
Performance

41. image - http://www.carpages.ca
UX는 어떻게
공부할 수 있을까?
왕도는 없지만
7가지 재료를 염두에 둔다면
더 좋은 UX를 공부할 수 있다.
image - http://500px.com/photo/2960331

42. 1. 유저 인터페이스 패턴
반복적인 문제에 대한
해결책
소프트웨어나 서비스에서 자주 나타나는 상황/문제 해결
을 위한 UI 구현

43. 로그인 패턴?
로그인 창은 어떤 UI 컴포넌트로 이루어져 있는지 떠올려보자.

44. pttrns
iOS의 UI 패턴을 각 상황별로 모아둔 사이트.

45. mobile-patterns.com
다양한 모바일 패턴. 주로 iOS가 많다.

46. Scoutzie
다양한 디자이너의 포트폴리오를 보고 협업할 디자이너를 찾을 수 있다.

47. MyColorScreen
iOS와 Android에서 다양한 색감과 디자인의 앱을 선정하여 소개하는 사이트.

48. 2.각종 가이드
Apple Human Interface Guideline
Windows Phone Human Interface Guideline
Android Supporting Multiple Screens
LukeW Gesture Guide

49. 3.템플릿
1.손으로 하고 싶다
http://notepod.net/
http://www.pixelpads.com/PixelPads_I_Features.html
2.컴퓨터로 하고 싶다.
http://mockapp.com
http://balsamiq.com
http://www.morford.org/iphoneosdesignstencil/
http://www.designerstoolbox.com/designresources/iphone/

60. 이런 스텐실도 있습니다.

61. 4.디자인의 요소
레이아웃 = 그리드 시스템
정보의 분할, 배치, 나열
타이포그래피
서체, 크기, 정렬…
색상
가능하면 OS의 기본 색상을 사용하자.
UI 컨트롤
OS에서 제공하는 컨트롤은 눈감고도 암기할 수 있어
야 한다.
아이콘
서비스/어플리케이션의 첫 얼굴.

62. 사람들은 미적으로 기쁨을 느낄 때 실수에
대해서 더 관대하다.
기능과 함께 보기 좋은 것을 감안해야 하는 이유

64. 기존의 기술을 사용한
새로운 인터랙션
영상, 내용, 근거 자료를 간단하지만 훌륭한
인터랙션으로 재구성한 New York Times

65. The greatest feeling in the world is to win a major league
game. The second greatest feeling is to lose a major
league game.
Chuck Tanner

66. Questions?