누구나 UX 를 이야기하는 시대가 되었지만 , 정작 UX 라는 말은 새로운 간판에 불과한 경우가 허다합니다 . 웹디자인부서나 기획부서가 UX 라고 간판만 바꿀 뿐 실제 하는 일은 달라지지 않는 것이죠 .

UX 전문가라고 자칭하는 사람이 알고보니 UX 와 사용성 (Usability) 의 구분조차 못하는 경우도 흔합니다 . 자신이 모바일 앱을 디자인하고 있다고 해서 UX Design 을 했다고 하는 사람들도 많습니다 . 거듭 말씀드리지만 UX Design 은 방법론입니다 . 특정 대상을 지칭하는 용어가 아닙니다 . UX Design 이라는 방법론을 쓸 줄 알아야지만 UX 전문가라고 할 수 있습니다 .

User experience 는 제품 / 서비스의 구성요소 또는 디자인 같은 레이어가 아닙니다 . UX 는 전체 시스템과 그들의 상호 연관성에 대한 것이라고 보는 게 맞습니다“UX 는 제품이나 서비스의 레이어나 요소를 의미하는 것이 아니다 . UX 는 전적으로 시스템내 상호 접속을 포함한 시스템 전체에 관한 것이다- Andrew Hinton,  Senior information architect at Vanguard

 “User experience design 은 체크박스나 디자인하는 일이 아닙니다 . 여러분들이 하는 모든 것들을 통합하는 것이죠 " - Liz Danzico, Chair, MFA in Interaction Design School of Visual Arts in NYC “User experience design 은 컴퓨터에만 국한된 게 아닙니다 . 화면조차 필요없는 경우도 많이 있습니다 . User experience 는 어떤 제품이나 시스템 , 서비스들에도 적용될 수 있죠 "- Bill DeRouchey, Director of interaction design at Ziba Design

User eXperience 는 단지 사용자에 관한 것이 아니다 .

우리는 항상 무엇이 사용자에게 최선인가를 고민할 수 만은 없다 .

우리는 비즈니스의 목적에 대해 고민할 수 밖에 없고 , 우리는 그것을 설계해야 한다 . ”Russ Unger Director of Experience Planning, Draft FCB

먼저 UI, UX 디자인을 배제하고 UI, UX 용어 자체 정의에 대해서는 큰 의견차가 없습니다 . 우선 위키피디아의 정의는 다음과 같이 되어 있습니다 . The user interface, in the industrial design field of human?machine interaction, is the space where in-teraction between humans and machines occurs.

User experience (UX) is the way a person feels about using a product, system or service.   UI 와 UX 는 다른 개념입니다 . 정의도 분명합니다 .  1. UI 디자인은 (User Interface) 의 약어로 기술적인 표현이라고 할 수 있습니다 . UI 디자인이란 말 그대로 ' 유저

인터페이스 ' 사용자 위주의 인터페이스를 말합니다 . 인터페이스를 만드는 디자인 기술 자체와 실현해서 사용하는 실물을 말하는 것입니다 . 웹디자인에서 UI 는 보통 그래픽 사용자 인터페이스 (GUI) 라고 하는데 사용자가 어떤 프로그램을 사용할 때 메뉴나 버튼 기타 입력창들을 사용자가 사용하기 쉽게 디자인하는 걸 말합니다 . 즉 사용자가 프로그램을 이용해서 컴퓨터에 내용을 입력하고 작업을 수행할 때 쉽게 눈과 손이 움직일 수 있도록 메뉴나 버튼을 배치하고 디자인하는 작업을 말합니다 . 

* 인터페이스 (interface) 는 말 그대로 inter( 사이의 , 상호간의 ) 와 face( 얼굴 , 표면 , 겉면 ) 의 합성어로 두 시스템이나 객체의 사이나 경계의 접점 혹은 어느 중간 사이에서 맞대고 있는 부분을 의미한다 . 인터페이스는 컴퓨터 용어에서 많이 등장하는데 대표적인 것이 사용자 인터페이스 (User Interface, UI) 다 .  사용자 인터페이스란 사용자와 컴퓨터 사이에서 일어나는 상호작용을 매개하는 것을 말한다

 2. UX 디자인은 (User experience) 의 약어로 사용자가 디자인된 제품과 서비스 , 그리고 그것을 제공하는 회사와 상호작용하면서 경험하게 되는 모든 경험의 총합을 의미합니다 .  모범적인 사용자 경험을 만드는 가장 중요한 조건은 고객의 요구를 정확하게 만족하게 하는 것이며 , 다만 어떤 경우에도 고객을 혼란스럽게 만들거나 귀찮게 해서는 안 됩니다 . 다음으로 중요한 것은 단순함과 우아함인데 이 특징들은 사람들이 제품을 가지고 싶고 , 사용하고 싶게 만듭니다 .  정리하면 ...사용자 경험이라는 총체적인 관점으로 콘셉트를 잡고 개발 방향을 정하고 감독하는 작업을 UX 디자인이라고 할 수 있고 그것을 구현하는 제작단계에서 사용자에게 맞는 최적화를 시켜주는 디자인 행위를 UI 디자인이라고 할수있습니다 .

What is UX (2/3)

※ The spectrum of User Experience v0.5 by Information Architects, Inc.

< User Experience 범주 >

“Technol-ogy”

“Busi-ness”

“Design”

서비스 , 상품 , 프로세스 , 사회와 문화까지 응용되고 있음컴퓨터 인터랙션 연구에서 출발

• 1974, 에드워드 (E.C.Edwards) 와 카시크 (D.J.Kasik) 의 “사이버 그래픽터미널에서의 사용자 경험 (User Experience With the CYBER

Graphics Terminal Proceedings of VIM-21) 에서 용어가 언급됨

• 1970-80 년대 , 인간중심의 디자인 (Human Centered Design, UCD)

의 맥락에서 인간과 기계간의 상호교감에서 긍정적 경험의 가치를 창출하고자 수많은 연구가 이루어짐• 1998, 조셉 파인 (B, Joseph Pie II) 과 제임스 길모어 (James Gilmore)

는 경험경제로의 초대 (Welcome to the Experience Economy) 기사를 하버드 비즈니스 저널에 발표 /1999 년 저서를 발표해 경제 , 경영계에 사용자 경험에 대한 관심을 불러일으킴

농업경제에서 산업경제로 각 단계의 발전을 이루는 동안 상대적으로 우수한 조건의 제품으로 차별화시키기 위해 선도기업들은 자신들의 제품 서비스의 독특한 경험을 만들어 내었다고 주장 ( 월트디즈니사의 일관된 테마를 통해 오감을 통한 경험과 기억강화 )

• 1970, 앨빈 토플러는 미래쇼크에서 언급한 경험산업 개념을 통해 디자인 , 영화 , 레크레이션 , 컴퓨터 , 예술 , 미술 전문가들의 경험설계 역량을 기업행위 전반에 사용하게 될 것이라고 예측

What is UX (3/3)

※ The User Experience Honeycomb by Peter Morville, Semantic Stu-dios

유용한useful

가치있는valu-able

credible

접근 가능한acces-sible

매력적인desir-able

발견 가능한findable

usable

신뢰할 수 있는

사용하기 쉬운

< 7 가지 User Experience 구성요소 >

• 유용한 (useful) : 좀 더 유용하고 혁신적인 솔루션을 만들기 위해 기술과 매체에 대한 지식을 창의적으로 적용해야 함

• 매력적인 (desirable) : 효율성의 추구와 더불어 이미지 , 아이덴티티 , 브랜드 , 기타 감성적 디자인 요소들의 강렬함이나 가치도 중요함으로 적절 한 조율이 필요

• 접근 가능한 (accessible) : 건물에 엘리베이터와 휠체어용 경사로 가 공존하듯 장애가 있는 사람들까지도 접근 가능하도록 만들어야 함

• 신뢰할 수 있는 (credible) : 사용자의 신뢰도에 영향을 미치는 디자인적 요소를 적절히 사용하여 완성도를 높여야 함

• 발견 가능한 (findable) : 사용자들이 필요로 하는 것을 찾을 수 있도록 , 내비게이션 , 개체의 위치 파악이 가능하게 만들어야 함

• 사용하기 쉬운 (usable) : 다양한 환경 , 제약조건을 가지고 있는 사용자들도 사용하기 용이하도록 만들어야 함

• 가치 있는 (valuable) : 광고주 , 사이트 목표 등 사용자를 포함한 다양한 이해관계자에게도 가치를 전달해야 함

UX

User Experi-ence

Interaction Interface

목표 (GOAL) 행동 (Activity) 도구 (Tool)

사용자와 접하는 시간Long Short

ContentCommunity (Customer)CommunicationCompany (Corporation)ConnectivityCredibilityCulture

Coherence ( 일관성 )Syncronization ( 일치 )Screen Sharing ( 화면공유 / 분할 )Device Shifting ( 디바이스간 이동성 )Complementarity ( 상보성 )Simultaneity ( 동보성 )

PUI Key MappingTouch UI MethodScreen LayoutInput MethodsWidgetGeneral RulesNotifications

□ 출처 / SW 사용성 개선을 위한 평가 모델 및 방법론에 관한 연구 - 한국 소프트웨어 진흥원 2005

사용자 품질 요구에 부응하는 S/W 는 사용성에 달려있다사용자의 품질 요구에 부응하는 소프트웨어 개발을 위해서 소프트웨어 제품의 사용성이 향상되어야 한다

디자인으로 경영을 혁신하라디자인을 기업 가치사슬에 녹여라상품에 즐거운 ‘체험의 옷’을 입혀라

□ 출처 / Dong-A Harvard Business Review : 삼성경제연구소 / LG 전자 디자인경영센터 / KAIST - 2008 JUN Vol.11

3.1.3. UX 프로토타입– 부가 설명

[ 프로젝트 산출물간의 관계 ]

UXB 전문가가 PI 단계에 제공하는 UX 프로토타입 산출물은 설계 단계 이후 , 프로젝트 현업의 사용자 중심 업무정의에 새로운 관점을 지원하며 , 이 개념은 SI 의 모델러 , 디자이너 , UI 개발자의 산출물에 영향을 주게 됩니다 .

핵심 업무 UX 프로토타입 작성

분석 단계 설계 단계

UXB

UXB 대상 핵심 업무

차세대 시스템 전체 범위

프로젝트 현업핵심 업무 UX 프로토타입 정의

화면 작성 UX 멘토링

UXB

프로젝트 현업전체 범위 화면 및 기능 정의

SI 모델러전체 범위 화면 정의서 작성- 화면 구성 모습- Input/Output- Event

차세대 시스템 전체 범위

화면 유형별 Sample

디자이너

UI 개발자

활용

UI 표준 / 디자인 가이드 작성

UI 개발 표준 작성 / UI 개발

개발 단계

- 업무규칙- 화면속성- Validation 로직

개발자

프로젝트 현업 SI 모델러

시스템 개발

시스템 Test

활용

표준준수

차세대 시스템 전체 범위

코딩화면제공

- 화면 구성 모습- 주요기능 / 동작방식 정의

프로젝트 현업 역량강화 지원현업은 화면 설계시 화면 설계를 프로세스 / 사용자와 연계를 하는 방법을 알지 못하며 , 프로젝트의 여러 상황에 의해 화면 설계 우선순위를 낮추게 되어 AS-IS 의 모습 그대로 화면을 구축하게될 가능성이 높습니다 . 이를 방지하고 사용자 중심의 화면 설계가 될 수 있도록 업무 당담자를 위한 UX 멘토링이 필요합니다 .

< 프로세스 >

< 화면 >

어떻게구성하지 ?

[ 현업 ]

연속성 관리 부재

현업을 위한“ UX 멘토링”

필요

‘ 프로세스 - 화면’의 연관성이 없다고 생각

사용자 고려 부재 IT 관점으로 기능 단위의 화면 개발 운영관리조직에 따른 메뉴 구성 예쁘기만 하면 사용자가 만족할

것이라 착각

강한 현상유지 성향 현재 사용에 익숙한 화면에서 벗어나지 못함

화면의 중요성 인지 약함 중요하지 않으므로 마지막에 진행하면 된다고 생각

새로운 기술 파악 어려움 새로운 UI 기술을 알지 못해 적용하기 힘듦

3.3.1. 진행방안

현업이 고민하고 있는 업무를 사용자 관점으로 ‘프로세스 - 사용자 - 화면’을 재정의 할 수 있도록 UX 멘토링을 진행합니다 . UX 전문가와 현업이 함께 고민하고 해결방안을 토론하며 찾아가는 과정을 통해 , 현업 스스로 동부화재 차세대 시스템 사용자중심의 화면을 구성할 수 있는 능력을 키우게 됩니다 .

현업을 위한 UX 멘토링

화면 스케치( 진행산출물 )

업무성격에 따른화면 유형화

산출물

[TO-BE Usage Process]

[ 현업 ]

매일 같은 업무만 하니까이렇게 생각해본 적이 없는데…‘ 새로운 시각’을 가지게 된 것 같아요 !

1 사용자 그룹별로 프로세스 분리 2 사용자 그룹별 업무수행 시점 분리

3 사용 행태 반영

4 새로운 기술 적용

[UX 전문가 ]

[ 화면 ]

3.3.2. 선행 프로젝트 예시

TO-BE 프로세스를 통해 화면을 구성할 경우 사용자 관점으로 구성하기 어려우므로 , ‘ 프로세스 – 사용자 – 화면 ‘ 재정의를 통해서 사용자 그룹 업무 특성에 적합한 화면 도출 및 구성을 진행하였습니다 .

현업을 위한 UX 멘토링

Illustrative example

높은 수준의 시스템 UI 위한 가이드 – 예시

UI QA 를 위해서 ‘ IT 담당자 - 디자이너 (SI) – UXB 전문가 (PMO)’ 의 co-Work 으로 IT 여러 단계의 Task 를

진행 합니다 . 이를 통해서 모든 업무영역을 고려한 UI 표준 수립 및 적용이 가능하게 됩니다 .

UI StudyTASK

1.시스템 구성에 대한 TFT 팀원 공유/ 필요 기능 수집

2.화면 CRUD

3.UI 표준

4.UI 표준 교육 및 Q&A

5.화면 검수 방안

…

차세대 시스템 구성전략 설명

진행 준비( 대상자 모집 ,

시간 선정 )

/ 진행

진행 준비( 대상자 모집 ,

시간 선정 )

/진행

UI Q&A 지원 - …

차세대 시스템구현 모습 정리(PI 단계 UXB

산출물 )

자료 제공/ 진행 지원

자료 제공/ 진행 지원

UI Q&A 지원 화면 검수 방안 수립 …

필요 기능 수집및 정리 수행

화면 CRUD 확정 화면 UI 표준 정의 UI 표준 교육 화면 검수 …

대상자 프로젝트현업 전체

( 프로젝트 현업 중 )

UI 핵심 멤버( 프로젝트 현업 중 )

UI 핵심 멤버프로젝트 현업 전체

+ SI 설계자SI 설계자

…

[IT 담당자 ]

[PMO - UXB 전문가 ]

[SI – 디자이너 ]

+

Illustrative example

변화의 소리

14

프로젝트 끝나고 시스템 오픈 하면 , 실제 사용자는 데이터 통합이 잘됐는지 무슨 솔루션을 썼는지 관심 없습니다 . 오직 화면만으로 평가하기 때문에 중요합니다 .- A 보험사 . 정보기획

담당임원

비즈니스와 IT 사이에 비어있던 뭔가…그 부족했던 뭔가가 UXB 로군요 . - B 증권사 . 차세대시스템 수행

PM

(UXB 완료보고 이후 ) 단순히 화면만 나오는 줄 알았는데 , 이건 화면으로 하는 BPR 인데요 . - B 증권사 . 정보기획 담당임원

이렇게 해주면 실제 사용자가 정말 좋아하겠는데요 . 선정된 과제 이외의 것도 이렇게 해야 되야텐데 . - C 증권사 . 차세대시스템 프로젝트 , 개발 PL

- D 보험사 . 차세대시스템 프로젝트 , 현업담당자

User Interface User Interaction

인간이 ‘도구’를 사용하기 시작하면서 , 인간과 도구 사이에 상호작용하는 총체적인 작용을 일컬음

인간의 컴퓨터나 핸드폰 사용에서… - 컴퓨터 , 핸드폰이라는 device 를 사용하는 것 - 화면 (screen) 을 통해 인지하는 것 - 키보드 , 마우스 , 터치스크린 등의 도구를 통해 시스템을 조작 하는 것

Interface 가 일어나는 동안 사용자와 ‘도구’가 서로“대화”하는 것

Interaction Design : 제품의 사용성과 사용자 경험가치의 관계를 연구 , 새로운 기술과 소비자를 연결하는 다리 구실

Web 2.0 시대 Interaction 의 발전 및 진화 : Asynchronization, Mash-up

UI

사용자가 특정한 목적을 가지고 어떤 도구를 사용할 때 , 사용자가 이해하고 , 학습하고 , 흥미를 느끼게 하는

해당 도구 , 또는 도구 내의 소프트웨어의 특성 으로 사용자의 도구 사용에 대한 만족도 측정의 중요한 기준 (ISTQB)

Usabil-ity

Intro… between Users & system…

4.1. 화면 , UI 는 무엇인가 ?

창문의 하늘 저 너머에는 보이는 것 보다 더 복잡한 우주가 존재하지만 ,우리는 그저 우리에게 보이는 것만 볼 뿐이고 , 그 이상은 보기 원하지도 필요하지도 않는다 .

각자 다른 곳에서 다른 창을 통해 보고 있지만 , 우리가 보는 하늘은 동일한 하늘이다 .

모니터속 화면 저 너머에는 보이는 것보다 더 복잡한 시스템이 존재하지만우리는 그저 우리에게 보이는 화면에만 신경 쓸 뿐이고 , 그 이상은 생각하지 않다 .

각자 다른 곳에서 다른 모니터를 통해 보고 있지만 ,

우리가 보는 화면은 동일한 화면이다 .

시스템 화면 = 창문을 통해 보이는 하늘