사용자를 사로잡는 UX/UI 실전 가이드

시장에서 살아남는 화면 설계와 스마트한 데이터 활용법, 현실적인 브랜딩

김성연(우디) 지음

루비페이퍼 2022년 07월 19일 출간 종이책 : 2021년 12월 15일 출간

작품소개

책소개

사용자를 사로잡는 건 ‘디자인’이 아닌 ‘디자이너’다!
매력적인 설계를 꿈꾼다면 이 책을 펼칠 때

이 책은 이제 막 디자인 너머 사용자를 고민하기 시작한 주니어부터 PM으로 활발히 활동 중인 시니어까지 사용자를 사로잡을 디자인을 꿈꾸는 모든 이를 위한 책이다. 주니어는 UX/UI의 이해부터 나무가 아닌 숲을 보는 방법과 기초 소양을, 시니어는 급변하는 트렌드의 소용돌이에서 건져낸 인사이트를 얻을 것이다.

목차

Chapter1 UX / UI 제대로 이해하기
1.1 UX 디자인? UI 디자인?
__1.1.1 UI - 사용자 인터페이스
__1.1.2 UX - 사용자 경험
__1.1.3 프로덕트 디자이너 - 제품 중심 조직의 디자이너
__1.1.4 UX/UI 디자인의 진행 과정
__1.1.5 Designer's Note 알아 두면 쓸모 있는 UX 용어
1.2 UI의 구조와 요소
__1.2.1 UI의 구조
__1.2.2 UI의 요소
1.3 모바일 디자인 트렌드의 변화
__1.3.1 마이크로소프트의 메트로 디자인
__1.3.2 애플 디자인의 변천사
__1.3.3 애플의 한 디자이너와 관성 스크롤
__1.3.4 뉴모피즘은 새로운 UI 트렌드가 될 수 있을까?

Chapter2 웹/앱 디자인 시 반드시 알아야 할 것들
2.1 해상도 이해하기
__2.1.1 목적에 맞는 해상도 설정
2.2 픽셀 밀도와 선명도의 상관관계
__2.2.1 화면 크기에 따른 픽셀 밀도 차이
__2.2.2 픽셀의 다양한 표현 방식
__2.2.3 1단계. 논리적 해상도
__2.2.4 2단계. 물리적 해상도
__2.2.5 3단계. 다운 샘플링
__2.2.6 4단계. 기기 표현
__2.2.7 iOS의 PT와 안드로이드의 DP/SP
2.3 모바일 서비스를 위한 앱 개발 과정 이해하기
__2.3.1 네이티브 앱
__2.3.2 모바일 웹앱
__2.3.3 하이브리드 앱
2.4 와이어프레임과 프로토타입의 이해
__2.4.1 와이어프레임
__2.4.2 프로토타입
__2.4.3 프로토타입 제작 툴
__2.4.4 Designer's Note 효과적인 유저 스토리 작성법
Chapter3 살아남는 것은 잘 설계된 것이다
3.1 생존을 위한 전략, MVP
__3.1.1 최소 기능 제품과 MVP 피드백 루프
__3.1.2 MVP로 시장 검증에 성공한 드롭박스와 에어비앤비
3.2 우리의 진짜 경쟁자는 누굴까?
__3.2.1 경쟁사 분석을 하는 이유
__3.2.2 경쟁사 목록 표 만들기
__3.2.3 기능 비교 표 만들기
3.3 디자이너가 데이터에 관심 가지면 보이는 것들
__3.3.1 디자이너의 든든한 근거, 데이터
__3.3.2 사용자의 선호도를 파악하는 A/B 테스트
__3.3.3 사용자의 경로를 추적하는 과정, 퍼널
__3.3.4 비즈니스 성장을 위한 핵심 지표, AARRR
__3.3.5 Designer's Note 한 끗 차이가 만든 다른 결과, 정육각 고기 두께 비교 UI
3.4 진짜 문제를 찾아서, 심층 인터뷰와 어피니티 다이어그램
__3.4.1 심층 인터뷰
__3.4.2 어피니티 다이어그램
__3.4.3 Designer's Note 브레인 스토밍에 유용한 질문법, HMW
3.5 사용자 유형을 대변하는 가상의 인물, UX 페르소나
3.6 문제의 근본 원인을 찾아, 5 Whys와 골든 서클
__3.6.1 사례로 보는 5 Whys
__3.6.2 5 Whys와 짝을 이루는 골든 서클
3.7 더 나은 UX 라이팅을 위한 몇 가지 팁
__3.7.1 UX 라이팅 vs 카피라이팅
__3.7.2 좋은 UX 라이팅을 만드는 4가지 법칙
__3.7.3 실전, UX 라이팅 적용하기

Chapter4 더 나은 비주얼 디자인을 위하여
4.1 타이포그래피의 기본, 웹폰트
__4.1.1 웹폰트의 이해
__4.1.2 웹폰트가 호출되는 과정
4.2 좋은 디지털 타이포그래피의 7가지 공식
__4.2.1 공식 1. 최소한의 폰트 종류
__4.2.2 공식 2. 가독성을 높이는 행간
__4.2.3 공식 3. 폰트 크기에 따른 자간
__4.2.4 공식 4. 한 줄에 적당한 글자 수
__4.2.5 공식 5. 배경색과 충분히 구별되는 글자색
__4.2.6 공식 6. 계층 구조를 활용한 타이포그래피
__4.2.7 공식 7. 성격에 맞는 폰트 선택
__4.2.8 Designer's Note 폰트 & 이미지로 브랜드 톤 구축하기
4.3 시각적 위계를 만드는 5가지 강조 방법
__4.3.1 1. 크기를 이용한 강조
__4.3.2 2. 색을 이용한 강조
__4.3.3 3. 질감을 이용한 강조
__4.3.4 4. 공간감을

출판사 서평

브런치 조회수 40만 작가, 10년 차 디자이너 김성연(우디)의
사용자를 유혹하는 UX/UI의 기술
이 책에서 다루는 주제는 7가지다. 먼저 현직 디자이너도 쉽게 정의하지 못하는 ‘UX/UI를 제대로 이해하는 것’부터 시작한다. 그렇게 프로덕트 디자이너의 역할을 이해한 다음 ‘웹/앱 디자인을 시작하기 전 알아 두어야 할 것들’ 픽셀, 해상도, 단위 등으로 기초를 탄탄하게 다진다. 본격 UX/UI 디자이너로서 첫 발을 뗄 수 있도록 실무에서 활발히 쓰이는 리서치 개념과 비즈니스 전략, UX 라이팅을 비롯해 화면의 완성도를 높이는 설계 요소까지 둘러볼 것이다.
후반부에선 사용자를 이해하기 위한, 그리고 목표를 조금 더 쉽게 달성하기 위한 ‘심리학’을 살펴본다. 여기에 스타트업도 지금 당장 시작할 수 있는 ‘가장 현실적인 브랜딩’을 더했다. 한 발 더 나아가 디자이너로서 나아가야 할 길에 대한 인사이트를 얻을 수 있는 ‘디자인과 윤리’ 그리고 부록으로 ‘디자이너의 말 그릇’까지 눌러 담았다. 저자의 목소리를 따라 책장을 모두 넘기고 나면 어느새 UX/UI의 광범위한 세계를 마주보게 될 것이다.

비주얼 디자인? UX 라이팅? 리서치? 브랜딩!
오래 가고 실현 가능한 것들에 대하여
시각적 요소부터 브랜딩까지. 폭넓다면 폭넓은 주제를 다루고 있지만 이 책은 단순히 아름다운 디자인을 하는 법이나 브랜딩의 원론적인 이야기를 다루지 않는다. 10년 차 현직 디자이너이자 작가로서 활동한 저자의 모든 경험이 고스란히 녹아 있기 때문이다. 이 책으로 나아갈 방향을 점치는 게 아닌, 나아갈 방향을 스스로 생각하는 힘을 얻게 될 것이다.

-추천사-
디자이너를 둘러싼 환경이 급변하는 탓에 수많은 디자이너가 ‘지금 이렇게 디자인을 하는 게 맞는 걸까?’라는 자기 검증의 시간을 갖곤 했었다. 나 또한 이직을 하거나 새로운 프로젝트를 시작할 때 이 과정을 되풀이했던 것 같다. 이 책은 우디 님이 10년간 쌓은 노력과 경험을 잘 담아냈다. 디자인을 시작하는 이들에게는 좋은 입문서로, 실무에서 한창 디자인을 하고 있는 이들에게는 스스로의 디자인 방법론을 돌이켜 보는 좋은 지침서가 되리라 확신한다. 디자인을 하면서 길을 잃었을 때 이 책을 들춰 본다면 상황에 맞는 현명한 어드바이스를 찾을 수 있을 것이다.
- 김지홍, 디자인 스펙트럼 파운더 / 멋쟁이 사자처럼 Head of Design

사용자 경험이란 실체가 막연하고 복합적이다. UX 디자인을 한 가지 분야만으로 설명할 수 없는 이유다. 시중에 UX 실용서를 표방하는 책들은 툴 사용법에 그치거나 웹/UI 디자인 이론서를 넘어서지 못하는 경우가 많았다. 그러나 이 책은 ‘풀스택 UX 디자이너’가 되기 위한 리서치, 비즈니스, 심리학, 브랜딩, 비주얼까지 빠짐없이 담겨 있다. 방법론이나 트렌드를 수집하고 나열하는 것을 넘어 실무에 쓰이는 지식으로 구성돼 있다. 반면 제품과 목적에 맞는 ‘도구’를 선택하는 일은 독자들이 능동적으로 할 수 있도록 펼쳐놓았다. UX에 입문하려는 사람, 제한된 환경에서 일당백을 해야 하는 사람, 주먹구구식 실무 처리에 한계를 느끼는 사람 모두에게 추천한다.
- 케일라, 메타(페이스북) 프로덕트 디자이너

좋은 서비스를 만들고 싶은 사람을 위한 종합 선물 세트! 디자이너뿐 아니라 IT 업계에서 서비스를 만드는 데 관심 있는 모든 주니어에게 이 책을 추천한다. 서비스를 만들려면 알아야 할 필수 내용들과 최신 트렌드가 굉장히 잘 담겨 있다. 심리학 전공자의 시선으로 보면, 이 책은 적절한 심리학 이론을 기반으로 디자인 요소를 쉽게 잘 풀어내고 있다. 심리에 대한 높은 이해는 좋은 서비스를 더 잘 만들기 위해서 굉장히 유용할 것으로 기대한다.
- 김수민, 우아한 형제들 PM (전 네이버 제트 PM)

‘시각적 인터페이스 디자인’이라는 영역을 뛰어넘어 ‘디지털 프로덕트 디자인’의 근본적인 주제를 다루는 가이드북. 매일 아침 눈을 뜨면서 잠들기까지 사용하는 전자기기의 디지털 프로덕트는 어떤 요소로 구성되어 있으며, 왜 그렇게 설계되었는지를 이해하기 쉽게 설명해 준다. 디자이너뿐만 아니라 디지털 프로덕트 사업을 전략적으로 설계하는 방법을 고민하는 사람에게도 이 책을 추천한다.
- 최지윤, 구글 본사 UX 디자이너

디자이너를 위한 성장 지침서. 디자이너라면 반드시 알아야 할 용어와 개념으로 시작하지만 서비스와 비즈니스를 이해할 수 있는 안목을 더하고 디자인 원칙, 심리학, 전략을 연구하며 성장할 수 있도록 가이드를 제시한다. 또한 저자의 오랜 경험과 깊은 생각이 녹아든 생생한 사례들과 노하우들을 고스란히 담고 있다. 책 후반부에는 ‘인간을 위한 디자인이란 무엇인가’라는 근본적인 질문으로 돌아가 디자이너가 성장하는 데 필요한 것이 지식만이 아니라는 것을 시사하고 있다. 성장을 갈망한다면, 인

작가정보

저자(글) 김성연(우디)

저자 : 김성연(우디)
글 쓰는 디자이너. 현업에서 10년째 사용자 경험을 디자인하는 일을 하고 있다. 디지털 컨설팅 회사를 거쳐 예비 유니콘 스타트업 정육각에서 ‘Head of Design’, 한국에서 글로벌 앱을 만드는 스타트업 픽소에서 ‘Senior Product Designer’로 일한 바 있다. 현재는 우디라는 필명으로 브런치와 각종 매체에서 디자인 관련 글을 쓰는 작가로 활동 중이며, 국내에서 가장 큰 디자인 윤리 커뮤니티를 운영 중이다.