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

66
Between UX and Front-end Technology How much should a FE developer know about User Experience Sanghun Woo NHN Technology Services [email protected]

Upload: woo-sanghun

Post on 23-Jun-2015

4.144 views

Category:

Design


0 download

DESCRIPTION

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

TRANSCRIPT

Page 1: 마크업개발자가 UX를 알아야 하는 이유

Between UX and Front-end Technology

How much should a FE developer know about User Experience Sanghun Woo

NHN Technology Services

[email protected]

Page 2: 마크업개발자가 UX를 알아야 하는 이유

My work: 나모 웹에디터 UX 설계

VIS Studio UX 설계

LG 전자 모바일 부품 표준화

NAVER 해피빈NAVER 날씨

NAVER 자동차

NAVER 뮤직

NAVER 모바일 메인

NAVER 지도 NTS UIT실

Page 3: 마크업개발자가 UX를 알아야 하는 이유

왜 UX를 알아야 할까?

Page 4: 마크업개발자가 UX를 알아야 하는 이유

근데 UX는 뭐지?

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

...

Page 5: 마크업개발자가 UX를 알아야 하는 이유

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

좋은 제품의 비밀사용자 경험

Page 6: 마크업개발자가 UX를 알아야 하는 이유

고속도로와 국도UX와 UI의 관점에서 서로 어떤 가치를 가질까?

빠른 도착 = 고속도로 = 좋은 UI한국의 풍광 = 국도 = 좋은 경험 = 좋은 UX

Page 7: 마크업개발자가 UX를 알아야 하는 이유

사용자 경험 User Experience사용자가 제품이나 디자인을사용하기 전에, 사용하면서, 사용한 후에 느끼는모든 감각과 경험

image - http://500px.com/photo/1273261

Page 8: 마크업개발자가 UX를 알아야 하는 이유

사용자의 인식과 행동에 영향을 끼치기 위해 그들의 경험에 긍정적인 작용을 할 수 있도록 여러 요소를 창조하거나 일체화 시키는 것.

목표 달성의 과정에서 재미나 즐거움을 주는 것이 중요한 과제.

UX 디자인?

Page 9: 마크업개발자가 UX를 알아야 하는 이유
Page 10: 마크업개발자가 UX를 알아야 하는 이유

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

Page 11: 마크업개발자가 UX를 알아야 하는 이유
Page 12: 마크업개발자가 UX를 알아야 하는 이유
Page 13: 마크업개발자가 UX를 알아야 하는 이유

사람, 시스템 그리고 매개체

사람(=사용자)는 매개체(=UI)를 통해서 기계와 대화한다.각자의 경험, 지식에 따라 다르게 해석할 수 있다.

image - http://www.flickr.com/photos/atochotto/3906333331

Page 14: 마크업개발자가 UX를 알아야 하는 이유

때로 이해할 수 없는 판단을 하는 사람

불이 나면 우리는 어떤 행동을 할까요?

Page 15: 마크업개발자가 UX를 알아야 하는 이유

2 좋은 제품을 빠르고 즐겁게 만들기 위한 도구로서의 UX

더 빨리더 기분 좋게

Page 16: 마크업개발자가 UX를 알아야 하는 이유

소통을 위한 기본 지식

image - http://500px.com/photo/2109625

서비스를 완성하려면 디자이너의 의도를 이해할 수 있는 스토리보드나 문서를 이해하고 인터렉션을 구현해야 한다.

디자이너가 사용하는 기본 단어를 알고 대화하면 더 빠르고 정확하게 이해/구현할 수 있다.

Page 17: 마크업개발자가 UX를 알아야 하는 이유

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

Page 18: 마크업개발자가 UX를 알아야 하는 이유
Page 19: 마크업개발자가 UX를 알아야 하는 이유
Page 20: 마크업개발자가 UX를 알아야 하는 이유
Page 21: 마크업개발자가 UX를 알아야 하는 이유

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

Page 22: 마크업개발자가 UX를 알아야 하는 이유
Page 23: 마크업개발자가 UX를 알아야 하는 이유
Page 24: 마크업개발자가 UX를 알아야 하는 이유

스크롤을 움직이는 막대스크롤을 하기 위해

마우스로 드래그하는 막대 영역. 저 영역의 이름은 무엇일까?

Page 25: 마크업개발자가 UX를 알아야 하는 이유

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

Page 26: 마크업개발자가 UX를 알아야 하는 이유

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

Page 27: 마크업개발자가 UX를 알아야 하는 이유

쥬니버 케이스

쥬니버 PC "뽀로로놀이교실" 에 핵심 UI 를 모두 JavaScript로 개발하였습니다.

오픈 할 때는 다양한 animation 효과를 구현하였지만, 오픈 후에 모두 제거해 달라는 요청을 받았습니다.

개발자 입장에서는 어렵게 개발한 기술을 모두 제거 해야 할 상황이므로 기분이 상하거나, 아무 생각 없이 제거할 수도 있습니다.

하지만 주 사용자 = 어린이에게 드래그 & 드롭 UI는 복잡하고 화려한 롤링 애니메이션 UI 보다는 단순한 마우스 클릭 기반 UI 가 효과적이라는 설명에 납득하여 바로 제거했던 기억이 있습니다.

Page 28: 마크업개발자가 UX를 알아야 하는 이유

2 단순히 동작하는 기능이 아니라더 쓰기 좋은 제품을 위한 UX

좋은 제품을 위한 전문가로서의 책임

Page 29: 마크업개발자가 UX를 알아야 하는 이유

사용자와의 접점

마크업 개발자는 사용자의 인터랙션 영역을 담당.

사용자의 경험을 극대화 하고, 최상의 성능을 위한 UI를 제안하는 일 = 마크업 개발자의 몫

단순한 기능 구현이 아닌 좋은 기능을 추구

Page 30: 마크업개발자가 UX를 알아야 하는 이유

네이버 날씨

적극적인 의사 소통 + 의견 개진으로 CSS3 애니메이션 도입

더 풍부한 사용자 경험을 제공

Page 31: 마크업개발자가 UX를 알아야 하는 이유

어떻게 만들지 설계할 수 있는 능력

만들어야 하는 UI의동작과 의미에 맞춘 마크업을

선택할 수 있는 능력이 필요

모양과 함께 의미를 가지는 마크업을 만들기 위한 노력

Page 32: 마크업개발자가 UX를 알아야 하는 이유

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

Page 33: 마크업개발자가 UX를 알아야 하는 이유

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

Page 34: 마크업개발자가 UX를 알아야 하는 이유

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

Page 35: 마크업개발자가 UX를 알아야 하는 이유
Page 36: 마크업개발자가 UX를 알아야 하는 이유
Page 37: 마크업개발자가 UX를 알아야 하는 이유

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

Page 38: 마크업개발자가 UX를 알아야 하는 이유

4 좋은 개발자, 혹은 새로운 일의 준비를 위한 UX

발전하는 나를 위한 능력

Page 39: 마크업개발자가 UX를 알아야 하는 이유

프론트앤드 개발자의 미래마크업, JavaScript, Flash, 서버, UX Design.....UX를 통해 나의 새로운 재능을 알 수도 있다.

image - http://www.carpages.ca

CSS3

Accessibility

HTML

SitePerformance

Product

Markup Developer?

Page 40: 마크업개발자가 UX를 알아야 하는 이유

JavaScript

Server Programming

HTML5

Front-end Developement

Product

Python

Accessibility

CSS3

Java

UX Design

Site Performance

Page 41: 마크업개발자가 UX를 알아야 하는 이유

image - http://www.carpages.ca

UX는 어떻게 공부할 수 있을까?

왕도는 없지만7가지 재료를 염두에 둔다면더 좋은 UX를 공부할 수 있다.

image - http://500px.com/photo/2960331

Page 42: 마크업개발자가 UX를 알아야 하는 이유

1. 유저 인터페이스 패턴

반복적인 문제에 대한 해결책소프트웨어나 서비스에서 자주 나타나는 상황/문제 해결을 위한 UI 구현

Page 43: 마크업개발자가 UX를 알아야 하는 이유

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

Page 44: 마크업개발자가 UX를 알아야 하는 이유

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

Page 45: 마크업개발자가 UX를 알아야 하는 이유

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

Page 46: 마크업개발자가 UX를 알아야 하는 이유

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

Page 47: 마크업개발자가 UX를 알아야 하는 이유

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

Page 48: 마크업개발자가 UX를 알아야 하는 이유

2.각종 가이드Apple Human Interface Guideline

Windows Phone Human Interface Guideline

Android Supporting Multiple Screens

LukeW Gesture Guide

Page 49: 마크업개발자가 UX를 알아야 하는 이유

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를 알아야 하는 이유
Page 51: 마크업개발자가 UX를 알아야 하는 이유
Page 52: 마크업개발자가 UX를 알아야 하는 이유
Page 53: 마크업개발자가 UX를 알아야 하는 이유
Page 54: 마크업개발자가 UX를 알아야 하는 이유
Page 55: 마크업개발자가 UX를 알아야 하는 이유
Page 56: 마크업개발자가 UX를 알아야 하는 이유
Page 57: 마크업개발자가 UX를 알아야 하는 이유
Page 58: 마크업개발자가 UX를 알아야 하는 이유
Page 59: 마크업개발자가 UX를 알아야 하는 이유
Page 60: 마크업개발자가 UX를 알아야 하는 이유

이런 스텐실도 있습니다.

Page 61: 마크업개발자가 UX를 알아야 하는 이유

4.디자인의 요소

레이아웃 = 그리드 시스템정보의 분할, 배치, 나열

타이포그래피서체, 크기, 정렬…

색상가능하면 OS의 기본 색상을 사용하자.

UI 컨트롤OS에서 제공하는 컨트롤은 눈감고도 암기할 수 있어야 한다.

아이콘 서비스/어플리케이션의 첫 얼굴.

Page 62: 마크업개발자가 UX를 알아야 하는 이유

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

Page 63: 마크업개발자가 UX를 알아야 하는 이유
Page 64: 마크업개발자가 UX를 알아야 하는 이유

기존의 기술을 사용한 새로운 인터랙션

영상, 내용, 근거 자료를 간단하지만 훌륭한 인터랙션으로 재구성한 New York Times

Page 65: 마크업개발자가 UX를 알아야 하는 이유

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를 알아야 하는 이유

Questions?