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