마크업개발자가 ux를 알아야 하는 이유

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

SitePerformance

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 컴포넌트로 이루어져 있는지 떠올려보자.

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

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

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

MyColorScreeniOS와 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?