abc

1. 오래가는
UX 디자인
1414905 이서현
모바일 시대의 제품 디자인 기본 원칙

2. 목 차
UX 디자인01.
PART
01. UX 디자인이란?
02. 시대별 사용자 경험
인터랙션 디자인02.
PART
03. 인터랙션 디자인 방식
04. 인터랙션 기반 설계
05. 인터랙션 표현 설계

3. UX 디자인이란
01

4. 01. UX 디자인이란
사용자 경험이란?
사용자 경험(UX: User Experience)이란 사용자가 기업, 서비스, 기업의 제품과 상호작용하면서 얻는 모든 측면의 경험을 의미한다.
훌륭한 사용자 경험을 만드는 조건
1. 고객의 요구를 정확하게 만족시킨다.
2. 고객이 직접 필요하다고 말하는 것 이상을 제공해야 한다.
3. 체크리스트에 나열된 기능을 제공하는 수준을 넘어서야 한다.
UI, UX, 인터랙션 디자인
인터페이스(Interface): 서로 다른 두가지의 주제나 시스템, 성분이 만날 때 그 두 요소 사이에 생기는 경계면. (사용자와 시스템 사이)
API(Application Programming Interface): 시스템과 시스템 간에 생기는 경계면.
UI: 사용자와 기기, 사용자와 웹사이트 및 애플리케이션이 만나는 접점
UI 디자인: 사람과 만나는 시스템의 외형과 화면구조, 버튼 모양 등을 설계하는 것
사용자와 시스템이 만나는 면이 UI(사용자 인터페이스)이고, 사용자가 인터페이스를 통해 시스템을 이용하는 일련의 상호작용이 인터랙션(Interaction)이다.
사용자 경험(UX): 인터랙션과는 다르게 제품을 사용할 때 사람들이 마주하는 다양한 경험을 설명하는 용어. 사용자 경험을 좁은 의미에서 설명할 때는 보통
사용자가 제품을 직접 사용하면서 느끼는 경험을 의미한다.

5. 01. UX 디자인이란
그림1. 인터페이스라는 용어를 함께 사용하는 UI와 API
인터페이스는 두 요소 사이의 경계면을 뜻하는 용어이다.
그림2. UI, UX, 인터랙션의 관계. UX는 UI와 인터랙션을
합한 이상의 다양한 경험적 요소를 포함한다.

6. 01. UX 디자인이란
그림3. 디지털 제품의 디자인 절차와 UX 디자인 조직. UX 디자인 조직은 주로 사용자 중심 디자인을 적용하는 조직으로 구성된다.
디지털 제품 디자인을 위한 UX 디자인 조직

7. 01. UX 디자인이란
그림4. 웹/애플리케이션 제품의 디자인 절차와 UX 디자인 조직. 산업 디자인 역할이 빠지고 UI 개발 조직이 추가된다.
웹/애플리케이션 디자인을 위한 UX 디자인 조직

8. 01. UX 디자인이란
그림4. 웹/애플리케이션 제품의 디자인 절차와 UX 디자인 조직. 산업 디자인 역할이 빠지고 UI 개발 조직이 추가된다.
웹/애플리케이션 디자인을 위한 UX 디자인 조직
이 그림은 이전의 디지털 제품의 디자인 절차 그림을 일부 수정한 것이다.
차이점을 보자면, 디지털 제품의 외형 디자인과 관련되는 산업 디자인 부분이 웹, 애플리케이션
분야의 소프트웨어 개발에는 필요 없으므로 생략됐다. 대신에 개발과 디자인의 중간적인 위치
를 차지하는 UI 개발 조직이 추가되었고, 개발이 UI 개발과 백엔드 개발로 세분되었다.

9. 01. UX 디자인이란
제품 디자인의 3가지 관점: 기술, 기능, 경험
경험
기술 기능
기술 중심 디자인:
- 새 기술이 나오면 가능한 기술을 조합해서 제품을 만든다.
- 최고 기술을 적용한 제품이 좋은 제품이라 생각한다.
- 기기 제조사의 접근방법
- 사용자가 기기와 기술의 세부사항을 알아야 한다.
기능 중심 디자인:
- 필요한 기능이 있으면 기능을 모아서 제품을 만든다.
- 좋은 기능을 많이 제공하는 제품이 최고라고 생각한다.
- 소프트웨어 개발사의 접근 방법
- 사람들이 익혀서 사용하는 기능의 수에는 한계가 있다.
경험 중심 디자인:
- 제공할 경험의 수준을 정하고 구현 가능하면 제품을 만든다.
- 최고의 경험을 제공하는 제품이 최고의 제품이라 생각한다.
- 엔터네인먼트 기획사의 접근 방법
- 경험을 구현할 기술을 찾는 데 많은 노력과 시행착오가 필요하다.

10. 시대별 사용자 경험
02

11. 02. 시대별 사용자 경험
메인프레임을 사용하던 90년대 초반은 일반인에게 PC(개인용 컴퓨
터)가 알려지는 시기이기도 했다. 가정용 8비트 컴퓨터가 먼저 나왔
고 그 후엔 좀 더 성능이 뛰어난 16비트 컴퓨터가 나오면서 여러 분야
에서 PC를 사용했다.
하지만 표준이 제대로 마련되지 않아서 개발자마다 다르게 데이터 구
조를 설계하다 보니 한 프로그램에서 만들어진 문서와 파일을 다른
프로그램에서 사용할 수 없을 때가 많았다. 이 시기에는 압축 파일,
문서 파일, 그림 파일 등이 프로그램마다 호환되지 않았기 때문에 컴
퓨터를 하기에 아주 혼란스러운 시기였다.
1. 기계가 최고의 가치였던 메인프레임 시대 2. 컴퓨터로 처리할 수 있는지가 중요했던 PC 도입기
초기 컴퓨팅 시대인 1990년대에는 컴퓨터가 무엇보다 중요한 자
산이었다. 이 시대의 프로그램은 모두 컴퓨터의 효율성에 맞춰 설
계되고 구현되었다. 개발자들은 컴퓨터가 더 빨리, 더 많은 일을
동시에 처리할 수 있게 하는 데 모든 노력을 집중했다.
당시에는 기술의 완성도가 높지 않아서 컴퓨터의 처리 효율을 높
이느라 사람이 사용하기 편하고 배우기 쉽게 프로그램을 만드는
노력을 할 여럭이 없었기 때문에 실제 개발된 시스템은 복잡하고
사용하기 어려우며 컴퓨터 내부 구조를 잘 알아야 사용할 수 있었
다.

12. 02. 시대별 사용자 경험
문자 기반의 사용자 인터페이스는 컴퓨터 기술의 발전과 함께 자
연스럽게 그래픽 사용자 인터페이스(GUI: Graphic User
Interface)로 발전했다. 마이크로소프트도 그래픽 사용자 인터페
이스를 채용한 MS윈도우 시리즈를 발표했는데 이 시리즈가 사람
들의 관심을 끈 것은 1992년부터였다. 그 후 윈도우가 도스를 대
체하는 운영체제 역할을 한 것은 시간이 더 지나 윈도우 95와 원
도우 98부터였다.
1990년대 이후 컴퓨터 기술의 발전 속도는 눈부셔서 1990년대 초
반과 이로부터 20여년이 지난 최근의 환경을 비교해보면 상상하
기 어려울 정도로 많은 변화가 있었다.
3. 사람이 중요해지는 PC 발전기, 성숙기

13. 기술의 발전으로 이전의 제약이 사라지고 있다.
심미적이고 감성적이 측면이 강조된다.
제품의 성능이 높아지면 디자인의 중요성은 커진다.
기기가 작아지면 디자인의 중요성이 커진다.
모바일 제품을 만들 때 사용자 경험 디자인이 주목받는 이유:
1)
2)
3)
4)
02. 시대별 사용자 경험

14. 인터랙션 디자인 방식
03

15. 03. 인터랙션 디자인 방식
인터랙션 디자인의 7가지 접근 방법
시스템의 전체적인 동작 구조에 맞춰서 디자인한다.시스템 디자인
기능 중심 디자인
사용자 중심 디자인
목표 지향 디자인
직관적 디자인
천재적 디자인
연구 중심 디자인
시스템에 요청되는 기능의 구현에 집중한다.
디자인 전 과정에 사용자의 반응을 반영하여 디자인한다.
사용자의 목표를 찾고 그것을 중심으로 디자인한다.
디자이너의 직관과 통찰력을 기반으로 새로운 제품을 디자인한다.
디자이너 개인의 뛰어난 능력에 기반을 두고 디자인한다.
인간과 기계의 특성을 연구하고, 그 연구에 기반을 두고 디자인한다.

16. 03. 인터랙션 디자인 방식
실행
물리적 행위 실행
목적
실제 세상의 목적
행동 행동
지각 해석
평가
해석된 결과와
원래 의도 비교
실행한 조작 결과 지각
목적을 시스템에 맞춘
의도로 전환
실행차: 목적과 실행가능한 행위간의 차이
평가차: 실행 결과와 원래 목적간의 차이
변화된 시스템 상태 해석
실행결과
행위의 순서 규정
인터랙션 디자인 기본 원칙
노먼의 7단계 인간 행위 모형. 인간의 행동은 목적, 의도를 형성하고 행위 순서를 실행하고 결과를 지각, 해석, 평거하는 7단계를 거친다.

17. 인터랙션 기반 설계
04

18. 04. 인터랙션 기반 설게
심성 모형(Mental Model)이란?
우리가 제품의 동작 방식 등을 해석하려고 머릿속에 만드는 모형.
(ex. 처음 보는 자판기를 불편함을 느끼지 않고 이용할 수 있다. 그 이유는 우리가 예전에 다른 자판기를 사용하면서 일반적인 자판기의 동작
방식을 머릿속에 모형화했고 그 모형을 바탕으로 새로운 자판기가 동작하는 방식을 설명하는 모형을 머ㄹ쏙에 만들어 작동 방식을 이해하기
때문이다. )
디자이너의 개념 모형(Designer’s Conceptual Model)이란?
디자이너가 제공하는 시스템 구조, 동작 방식 등을 나타내는 모형
심성 모형(Mental Model)이란 사람들이 자기 자신, 다른 사람, 환경, 상호작용하는 사물들에 대해 갖는 모형이다. 사람들은 경험, 훈련, 지시를 통
해 심성 모형을 형성한다. 한 도구의 심성 모형은 주로 그 장치의 작용과 가시적 구조를 지각하고 해석함으로써 형성된다. 개념모형(Conceptual
Model)은 디자인에서 중요한 심성 모형의 한 부분이다.
도널드 노먼의 [디자인과 인간 심리](학지사, 1996)에서 인용

19. 04. 인터랙션 기반 설게
개념 모형의 정의
개념 모형은 사람이 시스템 등의 개념적인 것을 이해하려고 머릿속에 만든 모형을 의미한다. 이때 개념 모형은 심성 모형의 한
부분으로 본다 (보통 디자이너 또는 전문가의 머릿속에 있는 시스템에 대한 정리된 개념을 개념 모형으로, 일반 사용자, 즉 비
전문가의 머릿속에 있는 모호한 개념 모형을 심성 모형으로 이야기한다).
개념 모형은 심성 모형과 같은 의미로 사용된다. (용어의 구분 없이 개념 모형 또는 심성 모형으로 통일해서 사용한다. )
개념 모형은 디자이너의 심성 모형을 구현한 결과물(노먼은 시스템 이미지로 정의)을 의미한다 (‘적절한 개념 모형을 제공하
라’는 말은 개념 모형을 직접 사용자에게 전달할 수는 없으므로 개념 모형을 구현한 적절한 시스템 이미지를 제공하라는 의
미로 해석될 수 있다. )
1)
2)
30

20. 인터랙션 표현 설계
05

21. 05. 인터랙션 표현 설게
어포던스와 행동유도성
어포던스는 한 개체가 행동할 수 있게 허용하는 사물 또는 환경이 가진 특성을 말한다. 깁슨은 어포던스를 사람(행위자)과 사물 또는 사람과 환
경 사이에 일어날 수 있는 행동의 가능성을 설명하는 용어로 사용했다. 깁슨의 어포던스는 사물 또는 환경이 지니는 본연의 특성을 의미하며
사람이 알아채지 못하더라도 항상 내부에 존재하는 특성이다.
행동유도성, 또는 인지된 어포던스는 행위자의 행동을 유도하는 사물 또는 환경의 인지된 특성을 말한다.
시그니파이어(Signifier)는 일종의 지시자. 의미 전달자로 물리적 세상과 사회적 세상에서 의미 있게 해석될 수 있는 표시를 의미한다. 시그니
파이어는 우연히 세상에 나온 부산물일 수 있지만 그때도 복잡한 세상을 이해하는 강력한 근거가 된다.
의도적 시그니파이어는 계획에 따라 만들어지고 적용되며, 우연한 시그니파이어는 활동이나 현상의 결과로 자연스럽게 따라오는 부산물이다.
사회적 시그니파이어는 다른 사람의 행동에서 나오는 것이다. 디자이너는 제품의 적합한 사용을 돕기 위해서 의도적으로 시그니파이어를 심어
놔야 한다.
시그니파이어 - 도널드 노먼

22. 05. 인터랙션 표현 설게
피드백의 역할
피드백은 사용자의 행위가 어떻게 처리되고 있으며 어떤 결과가 나왔는지 다시 사용자에게 알려주는 것.
확인
사용자가 수행하는 작업을 확인
해서 응답한다. 시스템은 사용자
가 내린 명령이 시스템에 제대로
전달되었는지, 처리하는 데 성공
했는지 실패했는지 알려야 한다.
작업의 진척과 시간 추정
작업이 금방 완료되지 않을 때에
는 작업 진행 상황을 사용자에게
적절히 전달해야 한다.
경고
문제가 생길 수 있는 상황을 알린
다. 하드디스크나 메모리의 남은
용량이 부족할 때, 배터리가 부족
할 때 시스템은 사용자에게 경고
표시를 해서 문제가 발생할 수 있
음을 알린다.
학습을 위한 알림
피드백은 학읍을 위한 용도로도
사용된다. 게임에서는 정상적인
값을 입력하거나 정확한 선택을
하면 재미있는 소리가 나는 등 긍
정적 강화 방식의 피드백을 적극
이용하기도 한다.
오류 알림
오류가 발생하면 이를 사용자에
게 알린다. 연산오류, 네트워크
오류 등이 생기면 시스템은 이를
사용자에게 알려야 한다.
상태 알림
시스템에서 동작하는 작업 중 시
스템이 가동되는 동안 언제나 실
행 중인 작업이 있는데, 이런 작
업의 동작 상태를 알려주는 피드
백이 상태 알림 피드백이다.
특별한 상황 알림
오류상황은 아니지만 일상적이지
않은 값이 입력되거나 일반적이
지 않은 조작이 실행될 때 시스템
은 사람이 이를 다시 확인하도록
요청할 수 있다.
기대 관리
시스템이 적절한 피드백을 제공
하면 사용자는 현재 기대할 수 있
는 서비스 품질의 수준을 알 수
있다.

23. 05. 인터랙션 표현 설게
제품을 단순하게 만드는 제약의 힘
물리적인 장치로 만들어진 생활용품에서 가장 중요하게 사용되는 디자인 제약 조건.
제품에 논리적 제약을 부여하면 사람들이 제품을 사용하면서 현재 할 수 있는 일이 무엇인지 쉽게 알 수 있다.
디자인에 이용하는 제약 중에는 관례적이고 문화적인 이유로 생기는 것들이 있다.
의미적 제약이 제품을 단순하게 만들고 사람의 행동 방향을 결정하는 방법이 될 수 있다.
물리적 제약
논리적 제약
문화적 제약
의미적 제약

24. 감사합니다