마크업개발자가 ux를 알아야 하는 이유
DESCRIPTION
클리어보스 세미나에서 발표한 파일입니다. 마크업 개발자 (혹은 프론트앤드 개발자)가 UX를 공부해야 하는 이유와 그 효과를 말합니다.TRANSCRIPT
![Page 1: 마크업개발자가 UX를 알아야 하는 이유](https://reader036.vdocuments.net/reader036/viewer/2022082223/5588f799d8b42aa8418b46a7/html5/thumbnails/1.jpg)
Between UX and Front-end Technology
How much should a FE developer know about User Experience Sanghun Woo
NHN Technology Services
![Page 2: 마크업개발자가 UX를 알아야 하는 이유](https://reader036.vdocuments.net/reader036/viewer/2022082223/5588f799d8b42aa8418b46a7/html5/thumbnails/2.jpg)
My work: 나모 웹에디터 UX 설계
VIS Studio UX 설계
LG 전자 모바일 부품 표준화
NAVER 해피빈NAVER 날씨
NAVER 자동차
NAVER 뮤직
NAVER 모바일 메인
NAVER 지도 NTS UIT실
![Page 3: 마크업개발자가 UX를 알아야 하는 이유](https://reader036.vdocuments.net/reader036/viewer/2022082223/5588f799d8b42aa8418b46a7/html5/thumbnails/3.jpg)
왜 UX를 알아야 할까?
![Page 4: 마크업개발자가 UX를 알아야 하는 이유](https://reader036.vdocuments.net/reader036/viewer/2022082223/5588f799d8b42aa8418b46a7/html5/thumbnails/4.jpg)
근데 UX는 뭐지?
UX가 좋아야 한다는데 UI랑 뭐가 다른지도 모르겠고, 그걸 어떻게 공부해야 할지도 모르겠고
...
![Page 5: 마크업개발자가 UX를 알아야 하는 이유](https://reader036.vdocuments.net/reader036/viewer/2022082223/5588f799d8b42aa8418b46a7/html5/thumbnails/5.jpg)
1 사용자 경험 (User Experience, UX) 및 UX와 제품의 품질이 어떤 관계인지 살펴본다
좋은 제품의 비밀사용자 경험
![Page 6: 마크업개발자가 UX를 알아야 하는 이유](https://reader036.vdocuments.net/reader036/viewer/2022082223/5588f799d8b42aa8418b46a7/html5/thumbnails/6.jpg)
고속도로와 국도UX와 UI의 관점에서 서로 어떤 가치를 가질까?
빠른 도착 = 고속도로 = 좋은 UI한국의 풍광 = 국도 = 좋은 경험 = 좋은 UX
![Page 7: 마크업개발자가 UX를 알아야 하는 이유](https://reader036.vdocuments.net/reader036/viewer/2022082223/5588f799d8b42aa8418b46a7/html5/thumbnails/7.jpg)
사용자 경험 User Experience사용자가 제품이나 디자인을사용하기 전에, 사용하면서, 사용한 후에 느끼는모든 감각과 경험
image - http://500px.com/photo/1273261
![Page 8: 마크업개발자가 UX를 알아야 하는 이유](https://reader036.vdocuments.net/reader036/viewer/2022082223/5588f799d8b42aa8418b46a7/html5/thumbnails/8.jpg)
사용자의 인식과 행동에 영향을 끼치기 위해 그들의 경험에 긍정적인 작용을 할 수 있도록 여러 요소를 창조하거나 일체화 시키는 것.
목표 달성의 과정에서 재미나 즐거움을 주는 것이 중요한 과제.
UX 디자인?
![Page 9: 마크업개발자가 UX를 알아야 하는 이유](https://reader036.vdocuments.net/reader036/viewer/2022082223/5588f799d8b42aa8418b46a7/html5/thumbnails/9.jpg)
![Page 10: 마크업개발자가 UX를 알아야 하는 이유](https://reader036.vdocuments.net/reader036/viewer/2022082223/5588f799d8b42aa8418b46a7/html5/thumbnails/10.jpg)
만약 실수로 열쇠를 트렁크에 빠트리고 닫았다면?
![Page 11: 마크업개발자가 UX를 알아야 하는 이유](https://reader036.vdocuments.net/reader036/viewer/2022082223/5588f799d8b42aa8418b46a7/html5/thumbnails/11.jpg)
![Page 12: 마크업개발자가 UX를 알아야 하는 이유](https://reader036.vdocuments.net/reader036/viewer/2022082223/5588f799d8b42aa8418b46a7/html5/thumbnails/12.jpg)
![Page 13: 마크업개발자가 UX를 알아야 하는 이유](https://reader036.vdocuments.net/reader036/viewer/2022082223/5588f799d8b42aa8418b46a7/html5/thumbnails/13.jpg)
사람, 시스템 그리고 매개체
사람(=사용자)는 매개체(=UI)를 통해서 기계와 대화한다.각자의 경험, 지식에 따라 다르게 해석할 수 있다.
image - http://www.flickr.com/photos/atochotto/3906333331
![Page 14: 마크업개발자가 UX를 알아야 하는 이유](https://reader036.vdocuments.net/reader036/viewer/2022082223/5588f799d8b42aa8418b46a7/html5/thumbnails/14.jpg)
때로 이해할 수 없는 판단을 하는 사람
불이 나면 우리는 어떤 행동을 할까요?
![Page 15: 마크업개발자가 UX를 알아야 하는 이유](https://reader036.vdocuments.net/reader036/viewer/2022082223/5588f799d8b42aa8418b46a7/html5/thumbnails/15.jpg)
2 좋은 제품을 빠르고 즐겁게 만들기 위한 도구로서의 UX
더 빨리더 기분 좋게
![Page 16: 마크업개발자가 UX를 알아야 하는 이유](https://reader036.vdocuments.net/reader036/viewer/2022082223/5588f799d8b42aa8418b46a7/html5/thumbnails/16.jpg)
소통을 위한 기본 지식
image - http://500px.com/photo/2109625
서비스를 완성하려면 디자이너의 의도를 이해할 수 있는 스토리보드나 문서를 이해하고 인터렉션을 구현해야 한다.
디자이너가 사용하는 기본 단어를 알고 대화하면 더 빠르고 정확하게 이해/구현할 수 있다.
![Page 17: 마크업개발자가 UX를 알아야 하는 이유](https://reader036.vdocuments.net/reader036/viewer/2022082223/5588f799d8b42aa8418b46a7/html5/thumbnails/17.jpg)
디자이너: 첫 페이지의 토스트 팝업 위치를 바꾸어 주세요.
![Page 18: 마크업개발자가 UX를 알아야 하는 이유](https://reader036.vdocuments.net/reader036/viewer/2022082223/5588f799d8b42aa8418b46a7/html5/thumbnails/18.jpg)
![Page 19: 마크업개발자가 UX를 알아야 하는 이유](https://reader036.vdocuments.net/reader036/viewer/2022082223/5588f799d8b42aa8418b46a7/html5/thumbnails/19.jpg)
![Page 20: 마크업개발자가 UX를 알아야 하는 이유](https://reader036.vdocuments.net/reader036/viewer/2022082223/5588f799d8b42aa8418b46a7/html5/thumbnails/20.jpg)
![Page 21: 마크업개발자가 UX를 알아야 하는 이유](https://reader036.vdocuments.net/reader036/viewer/2022082223/5588f799d8b42aa8418b46a7/html5/thumbnails/21.jpg)
디자이너: 드로어는 왼쪽과 오른쪽에 각각 있어야 해요.
![Page 22: 마크업개발자가 UX를 알아야 하는 이유](https://reader036.vdocuments.net/reader036/viewer/2022082223/5588f799d8b42aa8418b46a7/html5/thumbnails/22.jpg)
![Page 23: 마크업개발자가 UX를 알아야 하는 이유](https://reader036.vdocuments.net/reader036/viewer/2022082223/5588f799d8b42aa8418b46a7/html5/thumbnails/23.jpg)
![Page 24: 마크업개발자가 UX를 알아야 하는 이유](https://reader036.vdocuments.net/reader036/viewer/2022082223/5588f799d8b42aa8418b46a7/html5/thumbnails/24.jpg)
스크롤을 움직이는 막대스크롤을 하기 위해
마우스로 드래그하는 막대 영역. 저 영역의 이름은 무엇일까?
![Page 25: 마크업개발자가 UX를 알아야 하는 이유](https://reader036.vdocuments.net/reader036/viewer/2022082223/5588f799d8b42aa8418b46a7/html5/thumbnails/25.jpg)
스스로에게 동기 부여하기좋은 제품을 위한 설계 변경은 당연한 일하나의 팀으로서 움직일 수 있는 동력
![Page 26: 마크업개발자가 UX를 알아야 하는 이유](https://reader036.vdocuments.net/reader036/viewer/2022082223/5588f799d8b42aa8418b46a7/html5/thumbnails/26.jpg)
아... 디자인 뭐 이래... 이상해
![Page 27: 마크업개발자가 UX를 알아야 하는 이유](https://reader036.vdocuments.net/reader036/viewer/2022082223/5588f799d8b42aa8418b46a7/html5/thumbnails/27.jpg)
쥬니버 케이스
쥬니버 PC "뽀로로놀이교실" 에 핵심 UI 를 모두 JavaScript로 개발하였습니다.
오픈 할 때는 다양한 animation 효과를 구현하였지만, 오픈 후에 모두 제거해 달라는 요청을 받았습니다.
개발자 입장에서는 어렵게 개발한 기술을 모두 제거 해야 할 상황이므로 기분이 상하거나, 아무 생각 없이 제거할 수도 있습니다.
하지만 주 사용자 = 어린이에게 드래그 & 드롭 UI는 복잡하고 화려한 롤링 애니메이션 UI 보다는 단순한 마우스 클릭 기반 UI 가 효과적이라는 설명에 납득하여 바로 제거했던 기억이 있습니다.
![Page 28: 마크업개발자가 UX를 알아야 하는 이유](https://reader036.vdocuments.net/reader036/viewer/2022082223/5588f799d8b42aa8418b46a7/html5/thumbnails/28.jpg)
2 단순히 동작하는 기능이 아니라더 쓰기 좋은 제품을 위한 UX
좋은 제품을 위한 전문가로서의 책임
![Page 29: 마크업개발자가 UX를 알아야 하는 이유](https://reader036.vdocuments.net/reader036/viewer/2022082223/5588f799d8b42aa8418b46a7/html5/thumbnails/29.jpg)
사용자와의 접점
마크업 개발자는 사용자의 인터랙션 영역을 담당.
사용자의 경험을 극대화 하고, 최상의 성능을 위한 UI를 제안하는 일 = 마크업 개발자의 몫
단순한 기능 구현이 아닌 좋은 기능을 추구
![Page 30: 마크업개발자가 UX를 알아야 하는 이유](https://reader036.vdocuments.net/reader036/viewer/2022082223/5588f799d8b42aa8418b46a7/html5/thumbnails/30.jpg)
네이버 날씨
적극적인 의사 소통 + 의견 개진으로 CSS3 애니메이션 도입
더 풍부한 사용자 경험을 제공
![Page 31: 마크업개발자가 UX를 알아야 하는 이유](https://reader036.vdocuments.net/reader036/viewer/2022082223/5588f799d8b42aa8418b46a7/html5/thumbnails/31.jpg)
어떻게 만들지 설계할 수 있는 능력
만들어야 하는 UI의동작과 의미에 맞춘 마크업을
선택할 수 있는 능력이 필요
모양과 함께 의미를 가지는 마크업을 만들기 위한 노력
![Page 32: 마크업개발자가 UX를 알아야 하는 이유](https://reader036.vdocuments.net/reader036/viewer/2022082223/5588f799d8b42aa8418b46a7/html5/thumbnails/32.jpg)
같은 기능, 다른 구현같은 결과물이지만접근성, 혹은 효율면에서 서로 다른 구현
![Page 33: 마크업개발자가 UX를 알아야 하는 이유](https://reader036.vdocuments.net/reader036/viewer/2022082223/5588f799d8b42aa8418b46a7/html5/thumbnails/33.jpg)
같은 기능, 다른 구현같은 결과물이지만접근성, 혹은 효율면에서 서로 다른 구현
![Page 34: 마크업개발자가 UX를 알아야 하는 이유](https://reader036.vdocuments.net/reader036/viewer/2022082223/5588f799d8b42aa8418b46a7/html5/thumbnails/34.jpg)
같은 기능, 다른 구현같은 결과물이지만접근성, 혹은 효율면에서 서로 다른 구현
![Page 35: 마크업개발자가 UX를 알아야 하는 이유](https://reader036.vdocuments.net/reader036/viewer/2022082223/5588f799d8b42aa8418b46a7/html5/thumbnails/35.jpg)
![Page 36: 마크업개발자가 UX를 알아야 하는 이유](https://reader036.vdocuments.net/reader036/viewer/2022082223/5588f799d8b42aa8418b46a7/html5/thumbnails/36.jpg)
![Page 37: 마크업개발자가 UX를 알아야 하는 이유](https://reader036.vdocuments.net/reader036/viewer/2022082223/5588f799d8b42aa8418b46a7/html5/thumbnails/37.jpg)
성능 vs 개발 속도 애니메이션은 무조건 CSS3로 해야 한다는 고정관념을 타파
![Page 38: 마크업개발자가 UX를 알아야 하는 이유](https://reader036.vdocuments.net/reader036/viewer/2022082223/5588f799d8b42aa8418b46a7/html5/thumbnails/38.jpg)
4 좋은 개발자, 혹은 새로운 일의 준비를 위한 UX
발전하는 나를 위한 능력
![Page 39: 마크업개발자가 UX를 알아야 하는 이유](https://reader036.vdocuments.net/reader036/viewer/2022082223/5588f799d8b42aa8418b46a7/html5/thumbnails/39.jpg)
프론트앤드 개발자의 미래마크업, JavaScript, Flash, 서버, UX Design.....UX를 통해 나의 새로운 재능을 알 수도 있다.
image - http://www.carpages.ca
CSS3
Accessibility
HTML
SitePerformance
Product
Markup Developer?
![Page 40: 마크업개발자가 UX를 알아야 하는 이유](https://reader036.vdocuments.net/reader036/viewer/2022082223/5588f799d8b42aa8418b46a7/html5/thumbnails/40.jpg)
JavaScript
Server Programming
HTML5
Front-end Developement
Product
Python
Accessibility
CSS3
Java
UX Design
Site Performance
![Page 41: 마크업개발자가 UX를 알아야 하는 이유](https://reader036.vdocuments.net/reader036/viewer/2022082223/5588f799d8b42aa8418b46a7/html5/thumbnails/41.jpg)
image - http://www.carpages.ca
UX는 어떻게 공부할 수 있을까?
왕도는 없지만7가지 재료를 염두에 둔다면더 좋은 UX를 공부할 수 있다.
image - http://500px.com/photo/2960331
![Page 42: 마크업개발자가 UX를 알아야 하는 이유](https://reader036.vdocuments.net/reader036/viewer/2022082223/5588f799d8b42aa8418b46a7/html5/thumbnails/42.jpg)
1. 유저 인터페이스 패턴
반복적인 문제에 대한 해결책소프트웨어나 서비스에서 자주 나타나는 상황/문제 해결을 위한 UI 구현
![Page 43: 마크업개발자가 UX를 알아야 하는 이유](https://reader036.vdocuments.net/reader036/viewer/2022082223/5588f799d8b42aa8418b46a7/html5/thumbnails/43.jpg)
로그인 패턴?로그인 창은 어떤 UI 컴포넌트로 이루어져 있는지 떠올려보자.
![Page 44: 마크업개발자가 UX를 알아야 하는 이유](https://reader036.vdocuments.net/reader036/viewer/2022082223/5588f799d8b42aa8418b46a7/html5/thumbnails/44.jpg)
pttrnsiOS의 UI 패턴을 각 상황별로 모아둔 사이트.
![Page 45: 마크업개발자가 UX를 알아야 하는 이유](https://reader036.vdocuments.net/reader036/viewer/2022082223/5588f799d8b42aa8418b46a7/html5/thumbnails/45.jpg)
mobile-patterns.com다양한 모바일 패턴. 주로 iOS가 많다.
![Page 46: 마크업개발자가 UX를 알아야 하는 이유](https://reader036.vdocuments.net/reader036/viewer/2022082223/5588f799d8b42aa8418b46a7/html5/thumbnails/46.jpg)
Scoutzie다양한 디자이너의 포트폴리오를 보고 협업할 디자이너를 찾을 수 있다.
![Page 47: 마크업개발자가 UX를 알아야 하는 이유](https://reader036.vdocuments.net/reader036/viewer/2022082223/5588f799d8b42aa8418b46a7/html5/thumbnails/47.jpg)
MyColorScreeniOS와 Android에서 다양한 색감과 디자인의 앱을 선정하여 소개하는 사이트.
![Page 48: 마크업개발자가 UX를 알아야 하는 이유](https://reader036.vdocuments.net/reader036/viewer/2022082223/5588f799d8b42aa8418b46a7/html5/thumbnails/48.jpg)
2.각종 가이드Apple Human Interface Guideline
Windows Phone Human Interface Guideline
Android Supporting Multiple Screens
LukeW Gesture Guide
![Page 49: 마크업개발자가 UX를 알아야 하는 이유](https://reader036.vdocuments.net/reader036/viewer/2022082223/5588f799d8b42aa8418b46a7/html5/thumbnails/49.jpg)
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/
![Page 50: 마크업개발자가 UX를 알아야 하는 이유](https://reader036.vdocuments.net/reader036/viewer/2022082223/5588f799d8b42aa8418b46a7/html5/thumbnails/50.jpg)
![Page 51: 마크업개발자가 UX를 알아야 하는 이유](https://reader036.vdocuments.net/reader036/viewer/2022082223/5588f799d8b42aa8418b46a7/html5/thumbnails/51.jpg)
![Page 52: 마크업개발자가 UX를 알아야 하는 이유](https://reader036.vdocuments.net/reader036/viewer/2022082223/5588f799d8b42aa8418b46a7/html5/thumbnails/52.jpg)
![Page 53: 마크업개발자가 UX를 알아야 하는 이유](https://reader036.vdocuments.net/reader036/viewer/2022082223/5588f799d8b42aa8418b46a7/html5/thumbnails/53.jpg)
![Page 54: 마크업개발자가 UX를 알아야 하는 이유](https://reader036.vdocuments.net/reader036/viewer/2022082223/5588f799d8b42aa8418b46a7/html5/thumbnails/54.jpg)
![Page 55: 마크업개발자가 UX를 알아야 하는 이유](https://reader036.vdocuments.net/reader036/viewer/2022082223/5588f799d8b42aa8418b46a7/html5/thumbnails/55.jpg)
![Page 56: 마크업개발자가 UX를 알아야 하는 이유](https://reader036.vdocuments.net/reader036/viewer/2022082223/5588f799d8b42aa8418b46a7/html5/thumbnails/56.jpg)
![Page 57: 마크업개발자가 UX를 알아야 하는 이유](https://reader036.vdocuments.net/reader036/viewer/2022082223/5588f799d8b42aa8418b46a7/html5/thumbnails/57.jpg)
![Page 58: 마크업개발자가 UX를 알아야 하는 이유](https://reader036.vdocuments.net/reader036/viewer/2022082223/5588f799d8b42aa8418b46a7/html5/thumbnails/58.jpg)
![Page 59: 마크업개발자가 UX를 알아야 하는 이유](https://reader036.vdocuments.net/reader036/viewer/2022082223/5588f799d8b42aa8418b46a7/html5/thumbnails/59.jpg)
![Page 60: 마크업개발자가 UX를 알아야 하는 이유](https://reader036.vdocuments.net/reader036/viewer/2022082223/5588f799d8b42aa8418b46a7/html5/thumbnails/60.jpg)
이런 스텐실도 있습니다.
![Page 61: 마크업개발자가 UX를 알아야 하는 이유](https://reader036.vdocuments.net/reader036/viewer/2022082223/5588f799d8b42aa8418b46a7/html5/thumbnails/61.jpg)
4.디자인의 요소
레이아웃 = 그리드 시스템정보의 분할, 배치, 나열
타이포그래피서체, 크기, 정렬…
색상가능하면 OS의 기본 색상을 사용하자.
UI 컨트롤OS에서 제공하는 컨트롤은 눈감고도 암기할 수 있어야 한다.
아이콘 서비스/어플리케이션의 첫 얼굴.
![Page 62: 마크업개발자가 UX를 알아야 하는 이유](https://reader036.vdocuments.net/reader036/viewer/2022082223/5588f799d8b42aa8418b46a7/html5/thumbnails/62.jpg)
사람들은 미적으로 기쁨을 느낄 때 실수에 대해서 더 관대하다.기능과 함께 보기 좋은 것을 감안해야 하는 이유
![Page 63: 마크업개발자가 UX를 알아야 하는 이유](https://reader036.vdocuments.net/reader036/viewer/2022082223/5588f799d8b42aa8418b46a7/html5/thumbnails/63.jpg)
![Page 64: 마크업개발자가 UX를 알아야 하는 이유](https://reader036.vdocuments.net/reader036/viewer/2022082223/5588f799d8b42aa8418b46a7/html5/thumbnails/64.jpg)
기존의 기술을 사용한 새로운 인터랙션
영상, 내용, 근거 자료를 간단하지만 훌륭한 인터랙션으로 재구성한 New York Times
![Page 65: 마크업개발자가 UX를 알아야 하는 이유](https://reader036.vdocuments.net/reader036/viewer/2022082223/5588f799d8b42aa8418b46a7/html5/thumbnails/65.jpg)
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
![Page 66: 마크업개발자가 UX를 알아야 하는 이유](https://reader036.vdocuments.net/reader036/viewer/2022082223/5588f799d8b42aa8418b46a7/html5/thumbnails/66.jpg)
Questions?