추가 적립 안내

수많은 독자의 호평을 받아 온 UI 디자인의 정석!
멀티 디바이스 시대, 훌륭한 UI의 원리와 디자인 비결을 터득하자!

우리는 유튜브를 더는 하나의 디바이스로만 시청하지 않는다. 집 안에서 컴퓨터로 보다가 집 밖에서 남은 부분을 스마트폰으로 이어 보며, 때론 TV를 통해 사람들과 큰 화면으로 다 같이 보기도 한다. 유튜브의 인터페이스는 디바이스에 따라, OS에 따라, 또 웹이나 앱이냐에 따라 달라진다. 어떤 방식이든 콘텐츠에 쉽게 접근하는 데 중점을 두면서, 시시각각 변하는 사용자의 요구를 받아들인다. 컴퓨터·스마트폰·태블릿·TV 등 멀티 디바이스에 적용되는 인터페이스에는 이렇듯 기본적인 사고방식과 사용 조건에 따른 변화가 섞여 있다. 인터페이스와 인터랙션의 쓸모를 판단하여 관행과 변화에 적절히 대응해야 하는 것이다. 이 책은 바로 그처럼 호환성이 높은 UI 시스템 디자인의 모든 것을 다룬다.
15년 이상 경력을 가진 베테랑 UI 디자이너인 저자는 ‘UI 디자인 교과서’라는 제목을 내걸고 UI의 기초 지식부터 디자인 실무를 위한 방법과 조언까지 단 한 권에 담아냈다. 디자인의 목적 및 UI와 UX의 정의부터 디바이스별 특성, 소프트웨어의 영향과 사용자의 심리, 그리고 인터페이스의 계층과 구조까지 누구나 단숨에 이해할 수 있게 설명한다. 개념부터 활용 사례까지 핵심 내용만 골라내며 실제 스크린샷으로 알기 쉽게 소개하며, 사용자 중심의 UI 디자인을 둘러싼 여러 변수를 한눈에 파악할 수 있도록 한다. 4단계로 체계적으로 구성되어 깔끔하게 필요한 부분만 먼저 읽을 수 있는 것도 특징이다.
일본에서 출간 즉시 분야 베스트셀러에 오른 이 책은 배경지식이 없는 초보자부터 자신의 방향을 한번 점검해보고픈 전문가까지 다양한 독자를 아우른다. 또한 소프트웨어의 운용·감수·발주 등을 맡는 관계자에게도 유용하다. 교과서처럼 개념 풀이, 활용 사례, 요점 정리가 나란히 구성되어 오래 곁에 두고 틈틈이 읽어도 좋다. 예시 패턴을 바탕으로 올바른 해결책을 찾고 설득력 있는 인터페이스를 원하는 사람에게 이 책은 훌륭한 안내서가 되어줄 것이다.

출간 즉시 일본 UI 디자인 분야 베스트셀러가 된 화제의 책!
탄탄한 기초 지식으로 UI에 관한 지평을 넓혀주는 책!

UX 입문자부터 디자이너, 기획자, 개발자 모두를 위한
영감을 불어넣고 방향을 바로잡는 효율적인 UI 디자인 가이드

지금은 멀티 디바이스 시대다. 디바이스가 다양해질수록 최적의 인터페이스를 향한 실무자의 고민은 깊어진다. 컴퓨터·스마트폰·태블릿·TV 등 각 디바이스와 OS의 특성을 이해하고, 인지적·신체적 부하를 줄이며 일관성을 갖춘 인터페이스를 구축하고, 그에 따라 내비게이션과 인터랙션을 설치하는 것. 이 복잡한 일련의 과정에는 인간의 심리에 따른 영향을 염두에 두고 사용자 관점에서 파악해야 한다는 기본이 자리하고 있다.

이 책은 웹과 앱에서의 UI 최적화는 물론, 인터페이스의 계층과 구조를 구성하는 다양한 요소를 풀어낸다. 작가는 요즘처럼 다루는 대상이 넓어질수록 인터페이스에 관한 고찰은 더욱 근원을 향한다고 진단한다. 즉 올바른 해결책을 얻으려면 기본으로 돌아가 자신이 가진 정보를 꼼꼼히 되짚고 보완해야 한다. 이 책은 텍스트·이미지·동영상의 개별 특성, 색·모양·움직임에 관한 인간의 인지 특성, 프로토타입·모크업 활용법 등 익숙한 기본 개념을 새롭게 정립한다.

개괄적이고 단계적인 구성은 더욱 이해를 돕는다. 입문자에게는 UI의 세계를 한눈에 파악하는 조감도가 될 것이며, 실무자에게는 난제의 물꼬를 터줄 설계도가 되어줄 것이다. 하드웨어, 소프트웨어, 인간의 심리까지 순조롭게 익히고 나면 구체적인 인터페이스 디자인 전략과 디자인 완성에 필요한 각종 기법을 소개한다. 이를 통해 사용자와 개발자 모두 만족할 만한 UI 디자인 가이드라인을 제시한다. 숙련도에 따라 필요한 부분만 읽어도 무관하다.

UI·UX 정의부터 디바이스 특성, 심리적 영향, 디자인 형상화까지
사용자와 콘텐츠의 시너지를 끌어내는 UI 디자인 방법의 모든 것

“어떻게 보이는가가 디자인이라 여기는 사람도 있지만, 깊이 들어가면 어떻게 기능하는가가 디자인이다.”라는 스티브 잡스의 말처럼 UI 디자인에도 기능이 중심이 되어야 한다. 그러나 미니멀리즘 디자인으로 대표되는 심플한 UI 디자인에서 개발자들은 종종 사용자의 괜한 수고를 불러일으킨다. 이해와 목적이 명쾌한 상태가 심플하다는 것임을 인지하지 못하고 요소를 최대한 줄인 탓이다. 서비스의 의도와 목적을 충분히 이해하고 디자인을 최소한으로 개선해 가는 기량이 필요하다. 공통 개념 등 다양한 요소를 활용하여 사용성을 높인 사례를 이 책에서 확인해볼 수 있다.

사용자가 쉽게 조작 가능한 UI 시스템을 구축하려면 요소별 개념과 활용법을 익혀 두어야 한다. 이 책에서는 UI의 원칙과 기초 지식, 그리고 실제 사례를 차곡차곡 쌓아 올린다. 한 예로 아이폰의 설정 화면에서는 하층으로 이동할 때마다 새로운 화면이 슬라이드되면서 원래 화면은 어두워지고 새 화면의 아래로 숨겨진다. 또 원래 화면이 새 화면의 뒤로 가기 이름이 된다. 이러한 인터랙션은 ‘이해를 위한 인터랙션’과 ‘연출을 위한 인터랙션’ 중 전자에 해당한다. 이 책을 꼼꼼히 살펴보았다면, 호버·탭·포커스 등 각각의 인터랙션을 충분히 이해하고 사용자 관점에서 적합한 인터랙션을 골라 쓸 수 있다. 또한, 헤더·푸터 등에서의 내비게이션 적용 사례를 통해 사용자의 수고를 줄이면서도 편리성과 일람성을 모색할 수도 있다.

이 책의 장점은 어떤 OS의 디바이스를 다루든, 또 얼마큼 숙련된 사람이든 웬만하면 누구나 유용하게 읽을 수 있다는 점이다. 배경지식이 부족한 사람이라도 충분히 습득하여 생각의 지평을 넓히고 서비스에 맞는 디자인 패턴을 만들어갈 수 있다. 현업에 있는 사람이라면 아마존·유튜브·넷플릭스·인스타그램 등 유수의 인터페이스를 두루 살펴보면서 인정받는 UI 디자인의 속사정을 알아갈 수도 있다. 이 책이 콘텐츠의 가치와 사용자 만족을 모두 높이는 직관적이고 유연한 UI를 디자인하기 위한 길잡이가 될 것이다.

먼저 읽은 독자들의 찬사
“지금까지 읽은 UI 디자인 책 중 가장 잘 정리되어 있다.”
“이 책을 읽으면 주변에 UI 디자인이 넘쳐 난다는 것을 깨닫게 된다.”
“UI 디자인의 체계가 균형 있게 정리되어 머릿속에 완벽히 그려진다.”
“UI 디자인이 무엇인지, 어떻게 구현해야 좋을지가 보인다.”

들어가며

1장 디자인의 목적과 UI·UX의 정의
1-1 이 책의 범위와 대상
1-2 디자인의 목적
1-3 UI와 UX의 구분
1-4 요점 정리

2장 디바이스의 물리적 특성
2-1 다양한 디바이스별 특징
2-2 입력 수단에 따른 인터페이스 변화
2-3 화면의 여러 가지 특성
2-4 안드로이드폰과 아이폰
2-5 요점 정리

3장 소프트웨어의 영향
3-1 웹과 앱의 정의
3-2 텍스트·이미지·동영상
3-3 퍼포먼스의 특성
3-4 요점 정리

4장 인간의 인지 특성
4-1 색·모양·움직임에 관한 인지 특성
4-2 인터랙션 비용의 구체적 정의
4-3 서비스의 규칙을 만드는 일관성
4-4 사용자의 이해를 높이는 심플함
4-5 인지적 부하를 줄이는 공통 개념
4-6 요점 정리

5장 계층과 구조
5-1 가로·세로·전후의 입체적 구조
5-2 계층의 깊이와 넓이
5-3 탐색 경로와 차별화 표현
5-4 메인 화면·리스트·상세
5-5 관련 정보의 종류와 기능
5-6 모른다는 것의 의미
5-7 요점 정리

6장 내비게이션과 인터랙션
6-1 내비게이션을 좌우하는 요소
6-2 인터랙션의 목적과 활용
6-3 효율적인 헤더 활용법
6-4 푸터의 숨겨진 가치
6-5 탐색 경로의 역할과 기능
6-6 칼럼과 좌우 내비게이션
6-7 오버레이와 인레이
6-8 스크롤과 페이징
6-9 스크롤 방향을 결정하는 것들
6-10 요점 정리

7장 디자인 형상화
7-1 미니멀리즘 디자인
7-2 디자인 가이드라인
7-3 프로토타입을 제대로 활용하는 법
7-4 멀티 디바이스 디자인
7-5 요점 정리

UI가 서비스와 사용자를 연결하는 접촉에 관한 개념이라면, UX는 사용자 내면에 관한 개념이다. 또한 UI는 눈에 보이는 객관적인 것이지만, UX는 사용자의 경험에 따른 주관적인 것으로 눈에 보이지 않는다. 따라서 UX는 설계와 평가가 어렵다. 즉 UI와 UX는 본디 다른 개념이다. ---16p

단순히 겉으로 보이는 문제를 제쳐 두더라도, 텍스트로 표시할 수 있는 것은 이미지화하지 않고 텍스트로 두는 편이 유리하다. 문자를 복사·붙여 넣기할 수 있을 뿐만 아니라, 컴퓨터가 인식하기도 쉽다. 따라서 다른 언어를 구사하는 사용자가 방문하더라도 웹 브라우저가 텍스트를 번역해 서비스의 이해를 돕는다. 메뉴와 버튼의 문자를 이미지가 아닌 텍스트로 나타내는 서비스가 많은 이유다. 즉 텍스트는 이용이나 접근이 편리한 데이터 형식이다. ---70p

일관성을 생각할 때 중요한 점은 예외를 절대로 허용하지 않는 것이 아니라, 예외가 생기기 어려운 규칙을 만드는 것이다. 따라서 규칙을 만들 때는 겉으로 보이는 것 이상의 위기에도 임기응변할 수 있는 정합성이 필요하다. ---106p

구조와 조작에서 일관성 있는 인터페이스 디자인이란 ‘모름’을 해결하는 것이다. 사용자가 현재 위치를 파악하려면 ‘전체의 어디에 있는지’라는 위치 관계를 이해해야 한다. 이를 위해 사용자가 내비게이션이나 인터랙션의 조작을 예측할 만큼의 일관성 있는 인터페이스가 필요하다. ---154p

실제로 인터랙션 대부분은 사용자의 이해를 늘리는 움직임에 해당한다. 사용자가 얼마큼 쉽게 서비스를 사용하는지는 대부분 인터랙션 디자인의 완성도에 달려 있다. 사용하기 쉽다는 것은 인지적 부하를 얼마나 줄일 수 있는지와 큰 관련이 있다. 인터랙션은 그것을 위한 효과적인 수단이다. ---171p

화면 가로 폭이 제한적인 스마트폰에서는 대부분의 서비스가 1칼럼 레이아웃이다. 태블릿이나 컴퓨터에서도 대다수가 1칼럼 레이아웃을 사용한다. 컴퓨터를 1칼럼으로 구성하면 반응형 디자인으로 쉽게 대응할 수 있다. 스마트폰이나 태블릿에서 구조적인 실패를 초래하지 않고 멀티 디바이스에서 전개하기 쉽다는 점도 큰 장점이다. ---192p