안그라픽스

UX 디자인 7가지 비밀

온라인 판매처

너무나 잘 알려져 있지만
제대로 활용되지 못하는
UX 디자인의 뻔한 비밀들

UX 디자이너는, 머리는 치밀한 태스크 분석을 위한 논리적 사고로 무장하고, 귀는 사용자가 말없이 요구하는 요구사항을 잘 들을 수 있도록 항상 열어두고, 눈은 부분이 아닌 전체를 조망하며 일관된 인터랙션을 설계하고, 가슴은 사용자를 위한 따뜻한 배려로 가득 채우고, 손은 프로토타입을 직접 만들어 디자인을 테스트하고, 발은 관찰과 인터뷰를 위해 사용자가 있는 현장으로 향해야 한다. 총체적인 사고와 접근이 UX 디자인에서 필요하기 때문이다.

성공적인 UX 디자이너를 꿈꾸는 이들을 위해 『UX 디지안 7가지 비밀』은 UX 디자인에서 반드시 지켜야 하는, 혹은 알고도 제대로 활용하지 못하는 원칙과 방법들을 다루고 있다. 이 책은 주요 UX 설계원칙과 방법론에 따라 모바일 앱의 UX를 설계하는 과정과 그 결과까지 한눈에 확인할 수 있게 하여 초급자도 쉽게 이해할 수 있도록 잘 정리하고 있다. 즉 실무에 바로 적용할 수 있는, 성공하는 UX 디자인의 비밀들을 소개한다.

편집자의 글

스마트폰의 사용 환경이 발전함에 따라 모바일에서 구현되는 UX 디자인 또한 나날이 중요해지고 있다. 기계의 편리함을 넘어 사용자 경험(User eXperience)을 생각하는 디자인이 바로 UX 디자인이다. 이를 위해서는 기술의 습득과 함께 인간의 가치를 고민하는 인문학적 이해까지 병행되어야 하기에 UX 디자이너에게 통합적 사고와 전문성이 요구되고 있다. 더욱이 이제 겨우 UX에 대한 전반적 이론과 방법적 체계를 잡아가고 있는 국내 교육 현장에서 이론과 실무에 전문성을 갖춘 교육자의 역할이 중요할 것이다. 이 책은 10년이 훨씬 넘는 기간 동안 실무와 교육 현장에서 UI/UX를 다룬 두 명의 저자가 경험적 이론을 모아 집필한 것이다.

『UX 디자인 7가지 비밀』은 UX에 대한 올바른 이해를 바탕으로 설계를 위해 지켜야 할 원칙과 방법의 핵심 내용을 정리하고 있다. 사용자 경험에 대한 다학제적 이해를 거쳐, UX 설계에 필요한 기본 설계원칙 20가지, 설계의 바탕이 되는 태스크 분석 방법, 와이어프레임 스케치 방법, 페이퍼 프로토타입을 통한 디자인 테스트 방법, UX 디자인에 앞서 작업자 간의 소통과 이해를 돕는 UI 시나리오 작성 방법 등을 상세한 도판과 함께 정리하고 있다. 성공하는 UX 디자이너는 기술과 이론을 바탕으로 한 통합적 사고를 기반으로 성장한다. 이 책은 바로 성공적인 UX 디자이너로 발돋움하기 위해 초석을 다지는 기본서 중의 기본서이다.

이 책은 성공한 UX 디자이너가 되기 위해 꼭 알아야 하는 뻔한 비밀들을 소개한다. 그 7가지 비밀을 대형 마트 앱의 UX를 설계하는 시뮬레이션에 적용하고, 그로부터 얻어진 최종 결과까지 공개한다. 이 책에 공개된 대형 마트 앱 UX 설계에는 태스크 분석에서 도출된 사용자 요구 사항을 반영하고, 인지심리학 이론과 UX 설계원칙을 적용한다. 그리고 개발자와 UI 디자이너의 소통에 필요한 UX 시나리오 문서를 함께 제공하여 대형 마트 앱의 UX 설계 표준을 제시한다.

비밀 1. 시스템 관점에서 UX 디자인을 넓게 본다

1990년대 중반부터 UI 디자인 대신 UX 디자인이라고 쓰기 시작했다. 사내 부서 명칭도 UI팀에서 UX팀으로 바뀌었다. 이는 사용자 경험이 중요시되는 시대가 도래했음을 의미하는 변화다. 그렇다면 과연 UX 디자인을 제대로 하고 있는가? 혹시 아직도 UI 디자인 수준에 머물러 있으면서 UX 디자인이라고 말하는 것은 아닌가? 비밀 1에서는 UI 디자인의 개념을 인터랙션 디자인, 협의의 UX 디자인, 광의의 UX 디자인, 그리고 시스템 관점으로 확장하고, 제품 개발 과정에서 UX 디자이너의 역할을 살펴본다.

비밀 2. 사용자의 인지적 특성을 인터랙션 디자인에 반영한다

어떤 제품은 친숙하지 않지만 처음부터 노력을 들이지 않고도 아무 어려움 없이 사용할 수 있다. 그러나 어떤 제품은 사용설명서를 읽고 사용법을 익혀야 사용할 수 있다. 이러한 차이는 어디에서 오는가? 바로 인터랙션 디자이너가 사용자의 인지적 특성을 알고 인터랙션을 세심하게 디자인했느냐 안 했느냐에서 온다. 비밀 2에서는 사용자의 인지적 특성을 어떻게 인터랙션 디자인에 활용하는지를 설명한다.

비밀 3. 설계원칙을 명확하게 이해하고 인터랙션 디자인에 적용한다

UX 디자이너라면 다 알고 있다고 생각하지만 막상 설계에 적용하려면 쉽지 않은 핵심적인 인터랙션 디자인 원칙과 가이드라인들이 있다. 인터랙션 디자이너는 원칙과 가이드라인에 입각하여 인터랙션을 디자인하고 그 장단점을 다른 사람에게 명쾌하게 설명할 수 있어야 한다. 비밀 3에서는 직관적・일관적・효율적인 인터랙션을 디자인하는 데 도움을 주는 20가지의 설계원칙과 가이드라인들을 이해하기 쉽도록 사례를 들어 설명한다.

비밀 4. 태스크 지식을 전문 사용자 수준으로 이해한다

인터랙션 디자이너들은 디자인하는 제품에 대한 태스크 지식을 전문 사용자 수준으로 이해해야 하는 숙명적인 어려움에 처한다. 이 책에서 예시로 든 대형마트 앱 인터랙션을 설계하려면, 가족들에게 필요한 생필품을 대량으로 구입하기 위해 대형마트를 일주일에 한 번씩 가는 주부 수준으로 대형마트 태스크를 이해해야 한다. 그러나 많은 경우 시간과 돈이 없다는 이유로, 유사 제품을 벤치마킹하는 것으로 태스크 구조를 알 수 있다는 이유로, 태스크 분석은 인지공학 전공자들이 수행하는 어려운 일이라는 이유로, 인터랙션 디자이너가 태스크를 제대로 분석하지 않고 인터랙션을 설계하는 경우가 많다. 비밀 4에서는 인터랙션 디자인에 꼭 필요한 태스크 분석 방법을 다룬다. 태스크 분석은 전형적인 사용자 유형에는 무엇이 있는가, 사용자 유형별로 어떤 목적을 달성하기를 원하는가, 그 목적을 달성하기 위해 사용자는 실제로 어떤 태스크를 수행하며 어떤 절차로 태스크를 수행하는가, 태스크를 수행하는 과정에서 사용자가 경험하는 문제는 무엇인가 등을 분석해서 사용자 요구사항을 도출하는 과정이다.

비밀 5. 사용자 요구사항과 설계원칙을 반영해서 인터랙션을 디자인한다

비밀 4에서처럼 태스크 분석이 끝나면, 이를 기반으로 하는 인터랙션 디자인 과정을 보여 준다. 인터랙션 디자이너는 태스크 분석으로부터 도출된 요구 사항을 충실하게 반영하여 인터랙션을 디자인해야 한다. 여기에 비밀 3에서 이미 살펴본 여러 설계원칙들을 충실하게 반영한다. 비밀 5에서 다루는 내용은 성공적인 UX 디자이너가 되는 데 가장 유용한 비밀이다. 태스크 구조로부터 인터페이스 구조를 도출해서 와이어프레임을 스케치하는 전 과정을 대형마트 앱의 설계 사례를 통해 설명한다.

비밀 6. 페이퍼 프로토타입을 직접 만들어서 테스트한다

페이퍼 프로토타입은 인터페이스를 종이로 만든 것으로, 컴퓨터 역할을 맡은 사람이 인터랙션을 모사함으로써 사용자가 실제 제품을 사용하면서 태스크를 수행하는 과정에서 경험하는 문제점을 발견하고 이를 개선하는 데 사용된다. 특히 제품/서비스 개발 초기에 제품의 디자인 콘셉트, 사용성, 기능 동작 등을 빠르고 반복적으로 검증하기 위해 활용한다. 무엇보다도 페이퍼 프로토타입을 만드는 과정은 디자인 과정에 재미를 부여하기 때문에 더욱 창의적이고 완성도 높은 인터랙션을 디자인하는 데 필수적이다. 비밀 6에서는 페이퍼 프로토타입의 필요성, 장단점, 제작 방법, 테스트 방법, 그리고 페이퍼 프로토타입을 워킹 프로토타입으로 만드는 방법 등에 대해 사례를 들어 설명한다.

비밀 7. UI 시나리오를 작성하여 개발자, 디자이너와 효율적으로 커뮤니케이션한다

누구나 작성할 수는 있지만 이해하기 쉽게 만들기는 어려운 UI 시나리오는 사용자 인터페이스의 기능구조, 대표화면, 화면 간 인터랙션 흐름, 그리고 다양한 예외적 상황의 처리방식 등을 문서로 정리한 것이다. 이는 각각 태스크 중심 인터랙션 디자인의 기능구조, 와이어프레임, 페이퍼 프로토타입을 통해 대부분 이미 결정된 내용을 다른 사람들이 이해하기 쉽도록 작성하고 개발이 가능하도록 상세한 내용들로 채워가는 과정이다. 요컨대 UI 시나리오는 ‘효율적인 UI 관리’와 그래픽 디자이너, 소프트웨어 개발자, 품질관리자 등 다른 개발자들과의 ‘원활한 커뮤니케이션’을 위해 작성한다. 비밀 7에서는 대형마트 앱의 UI 시나리오 작성을 예로 들어 시나리오의 구성요소, 작성 과정 그리고 문서 작성의 팁을 상세히 설명한다.

추천사

이 책은 현장에서도 모호하게 사용되거나 혼용되고 있는 UX 디자인 관련 개념들 간의 유기적인 관계를 명쾌하게 설명하고 있을 뿐만 아니라, UX 디자인에 필요한 세부 원칙과 방법의 가장 핵심적인 이슈들을 전략적으로 짚어내고 있다. UX 디자인 분야 연구자, 교육자, 전문 종사자들뿐 아니라, 기업이나 기관에서 경영 전략을 세우거나 혁신 프로그램을 주도하는 분들에게도 많은 도움이 될 것으로 기대한다.

이철배 (LG전자 디자인경영센터 모바일커뮤니케이션 디자인연구소장)

지식과 정보 그리고 감성이 융합된 지금 사회에서 새로운 가치상품들은 사용자에 대한 이해와 연구를 통해 발굴되고 있다. 즉 User eXperience는 기존 사용자에 대한 연구에서 시작해 다양한 사용자들이 공존하는 사회 전반의 서비스를 디자인하는 가치로 진화하고 있다. UX 분야에서 일하거나 UX를 공부하고 있는 후학들에게 이 책은 큰 의미가 있는 이정표이다. UX의 가치를 공감하는 우리 모두에게 이 책의 일독을 권한다.

곽승훈 (바이널 익스피어리언스 대표이사)

UX 디자이너가 되기 위한 요건, 즉 진입장벽은 높지 않다. 매우 상식적이며 사람들에 대한 애정이 있다면 상품과 고객 간의 인터랙션을 디자인할 수 있다. 그러나 경쟁력 있는 UX 디자이너가 되는 것, 상품 가치 향상에 기여하는 UX를 디자인하는 것은 쉽지 않은 일이다. 이는 많은 주니어 UX 디자이너들의 고민이기도 하다. 이 책은 현업에서의 디자인 사례를 이론적 배경과 함께 설명하여 단단한 UX 디자인 지식의 습득을 돕는다. 바로 경쟁력 있는 UX 디자이너가 가져야 하는 역량이다.

이동석 (SK 플래닛 UX 전략실 팀장)

현업에서 프로젝트를 경험해보지 못한 학생이나 초보자들이 이 책을 읽어본다면 1)정의, 개념에서 시작하여 2)원칙, 방법론, 3)실제로 프로젝트를 진행할 때 사용할 방법이나 문서까지, 기본적으로 필요한 모든 내용을 한 권의 책을 통해 한 번에 볼 수 있을 것이다. 가장 인상 깊은 부분은 사용자의 요구사항과 태스크 분석을 통하여, 와이어프레임을 그리고, 페이퍼 프로토타입을 만들어 시나리오 문서까지 작성하는 과정인데, 과정 하나하나를 매우 구체적인 사진이나 자료와 함께 설명하여, 마치 두 분 저자들과 함께 워크샵을 통해 배우는 듯한 느낌이 들었다. 책으로 얻을 수 없는 부분까지 책으로 전달하려 한 저자들의 노력을 통해, 독자들은 일반적인 입문서보다 훨씬 많은 것을 얻게 될 것이다.

이재용 (피엑스디 대표/연세대 겸임교수)

차례

추천하며 1. UX 디자인 제대로 하는 법을 원리와 사례로 친절하게 풀어놓은 책
추천하며 2. UX 설계자는 물론 디자이너들에게도 유용한 책
필자 P와 K의 대화

들어가며 1. 성공하는 UX 디자이너의 7가지 뻔한 비밀
들어가며 2. UX/UI의 이론과 실무 사이를 고민하며

비밀 1. 시스템 관점에서 UX 디자인을 넓게 본다
UI, 인터랙션, UX의 구분
UI의 네 가지 계층
UX 디자인 프로세스

비밀 2. 사용자의 인지적 특성을 인터랙션 디자인에 반영한다
인터랙션 디자이너가 인지심리학 이론을 알아야 하는 이유
정보 처리 단계
감각기억
지각
인지, 추론
기억장소
스키마
지각 체계화의 원리
인지심리학 이론으로부터 도출된 인터랙션 설계원칙
제품의 사용편의성과 차별성의 상충관계

비밀 3. 설계원칙을 명확하게 이해하고 인터랙션 디자인에 적용한다
UI 설계원칙과 사용성 척도
설계원칙 1. 당신은 사용자가 아니니 사용자가 받아들일지 아닐지 당신이 판단하지 마라
설계원칙 2. 기술발전의 패러독스를 명심하라
설계원칙 3. 시스템의 현재 상태를 명확하게 가시화하라(가시성).
즉각적인 피드백을 제공하라
설계원칙 4. 디폴트 모드를 신중하게 결정하고 스마트하게 변하게 하라
설계원칙 5. 모든/특정 사용자의 모든 태스크 상황,
사용케이스, 시나리오를 고려하라(접근성)
설계원칙 6. 사용자의 실수를 방지하고 복구할 수 있는 방법을 제공하라(포용성)
설계원칙 7. 매뉴얼을 믿지 마라. 사용자는 직접 제품을 써가면서 탐험적으로 배운다
설계원칙 8. 시스템의 물리적 모습과 디스플레이의 표상을 일치시켜라(근접성, 매핑)
설계원칙 9. 스테레오타입에 어긋난 설계를 하지 마라
설계원칙 10. 중복코딩의 이점을 활용하고 간섭이 일어나지 않도록 설계하라
설계원칙 11. 모든 상황에서 반드시 의도된 행위를 유발하도록 설계하라(행동유도성)
설계원칙 12. 현실감을 높이고 메타포를 반영하라
설계원칙 13. 기능의 그룹핑과 함께 깊이와 너비의 적절성을 고려하라
설계원칙 14. 모든 태스크 수행 절차는 일관되어야 한다(일관성)
설계원칙 15. 일관성, 중요하다. 그러나 태스크의 맥락이 더 중요하다
설계원칙 16. 화면 간 이동 시 순간적 변화를 최소화하고 의미 있는 움직임을 부여하라
설계원칙 17. 사용자가 기억하게 하지 마라(‘회상’보다 ‘인식’)
설계원칙 18. 인터페이스를 접어라
설계원칙 19. 자주 쓰이고 중요한 것을 더 쉽게 접근할 수 있도록 하라(80/20 원칙)
설계원칙 20. 사용자의 태스크 수행에 연속성을 부여하라.
팝업을 최소화하라(태스크 연속성)

비밀 4. 태스크 지식을 전문 사용자 수준으로 이해한다
태스크 지식이란 무엇인가
인터랙션을 디자인할 때 태스크 분석을
반드시 해야 하는 이유는 무엇인가
태스크 분석 없이 인터랙션을 디자인할 수 없다
태스크를 분석하지 않으면 피상적인 범용의 인터페이스를 디자인하게 된다
태스크 분석은 기능 선발의 근거를 제공한다
태스크 절차는 인터페이스의 기능구조, 정보 구조, 제어 흐름을 설계하는 근거가 된다
목적, 태스크, 기능
태스크 분석을 위한 도구, 카드 소팅
태스크 분석
사용자 유형 도출
목적과 태스크 도출
태스크 시나리오 기술

비밀 5. 사용자 요구사항과 설계원칙을 반영해서 인터랙션을 디자인한다
태스크 분석에서 인터랙션 디자인까지 전체 과정
태스크 구조를 기능구조로 변환하기
기능구조를 기반으로 와이어프레임을 스케치한다
메타포를 활용하라
디폴트 모드를 신중하게 결정하고 사용자 이력에 따라 똑똑하게 변하게 하라
사용자가 기억하게 하지 마라(‘회상’보다 ‘인식’)
사용자의 실수를 방지하거나 복구할 수 있는 방법을 제공하라
모든/특정 사용자의 모든 태스크 상황, 사용케이스, 시나리오를 고려하라
시스템의 현재 상태를 명확하게 가시화하라
인터페이스를 접어라
사용자의 태스크 수행에 연속성을 부여하라.
팝업을 최소화하라
모든 상황에서 반드시 의도된 행위를 유발하도록 설계하라(행동유도성)
태스크 수행 절차를 일관되게 설계하라
와이어프레임을 기반으로 페이퍼 프로토타입을 제작하여 테스트한다
UI 시나리오 문서로 결과물들을 이해하기 쉽게 정리한다

비밀 6. 페이퍼 프로토타입을 직접 만들어서 테스트한다
페이퍼 프로토타입이란 무엇인가
페이퍼 프로토타입 제작과 테스트 요령
라디오버튼과 체크박스
선택 바/하이라이트
마크
텍스트 입력필드
비활성화 컨트롤
드롭다운 리스트
팝업
탭 다이얼로그 박스
확장 가능한 다이얼로그
기타 위젯과 인터랙션
내부연습과 테스트의 수행
워킹 프로토타입 만들기

비밀 7. UI 시나리오를 작성하여 개발자, 디자이너와 효율적으로 커뮤니케이션한다
UI 시나리오 문서란 무엇인가
UI 시나리오 문서 작성
기능구조 작성
대표화면 정의
인터랙션 흐름 정의
예외 케이스 정의
UI 시나리오 문서 작성의 팁
UI 시나리오 문서의 예

나오며
링크
주석
도판목록
마인드맵

박지수

상명대학교 감성공학과 교수. 1991년 카이스트 산업공학과 석사과정에서 UI 디자인을 공부하기 시작한 우리나라 1세대 UI 디자이너. 같은 대학원에서 UI 디자인으로 박사학위 취득 후 대우일렉트로닉스 디자인연구소에서 디자이너들과 협력하여 제품 UI 디자인 업무를 수행하였고, 과학기술부에서 주관한 감성공학기반기술개발사업 연구책임자를 맡아 차세대 감성제품 개발 연구를 수행하였다. 영국 요크대학교 심리학과 연구원을 거쳐 한국예술종합학교 미술원 디자인과 교수로 6년간 재직하였으며, 문화체육관광부가 주관하는 문화기술 R&D 과제 기획에 참여하였고 함평나비축제 문화프로그램 기획 및 실경 공연 제작 등 디자인의 영역을 문화 콘텐츠 분야로 확장하는 데 앞장섰다. 2010년부터 SK플래닛에서 운영하는 T아카데미에서 ‘모바일 UX/UI 기획 및 설계’를 강의하였고, 2012년에는 방송통신위원회에서 주최하고 한국인터넷전문가협회에서 주관한 ‘UX 디자인 스쿨’에서 UX 기획 과정을 강의하는 등 UX 기획 및 설계 방법론을 학생들과 현업 실무자들에게 교육하고 있다.

ppirong@paran.com

김헌

서울과학기술대학교 기계시스템디자인공학과 교수. 2003년 LG전자에 입사한 뒤 다양한 모바일 UX/UI 개발 실무를 거치면서 LG전자 UI개발실 전략・기획 그룹장, SK텔레콤 UI기획팀 UX파트장을 역임했다. 2008년에는 Vinyl, DNA, PXD 등의 UI 전문회사들과 함께한 SK텔레콤의 스마트폰 OS UI개발을 총지휘하였고, 2009년부터는 현대기아자동차, LG전자, 삼성전자, SK플래닛 등과 대학 간에 다수의 UX/UI 과제를 수행하고 있다. 이러한 경험을 바탕으로 2010년부터는 T아카데미에서 모바일 UX/UI 기획 및 설계, 디자인전문가 과정 등을 강의하며 UX/UI 전문인력의 양성에 힘을 쏟아오고 있다. 성균관대 산업공학과에서 공학사 취득 후 KAIST에서 공학박사 (인지・인간공학 전공)를 취득했고 현재 UXPA협회 이사를 맡고 있다. 그동안 40여 편의 국내외 연구논문을 발표하였고 50여 개의 UI 특허를 출원・등록하였다.

huhnkim@seoultech.ac.kr
huhnkim@snut.ac.kr
은 안그라픽스에서 발행하는 웹진입니다. 사람과 대화를 통해 들여다본
을 나눕니다.