'사용자를 사로잡는 UXUI 실전 가이드' 리뷰 - 1

 

서비스 기획을 하면서 디자이너와의 작업 경계선이 모호해지는 경우가 종종 있다. 그럴 때마다 작업 분배와 방식이 확실하지 않아 어려웠는데 이 책에서는 기획자로서, 디자이너로서 고민하고 신경써야하는 부분들에 대해 잘 알려주고 있다. 특히 기획을 시작한 지 얼마 되지 않은 주니어 기획자라면 많은 도움이 될 만한 내용들이 있기에 꼭 추천하고 싶다. 더불어 디자이너에게 디자인에 대한 피드백을 하기 전에 피드백을 미리 점검할 때 유용할 것이라고 생각한다. 

 

이번 글에서도 계속해서 주관적 입장에서 중요하다고 생각되는 것들, 명확하게 하고자 하는 것들을 기준으로 정리했기에 책의 모든 부분을 다루지 않은 점 유념바란다. 이번 글은 내용이 길어 두 개로 나누어 구성했다.

 

---

 

UX 디자인 vs UI 디자인

• UX: 사용자가 어떤 제품/서비스와 상호작용하는 과정에서 얻는 총체적 경험
• UI: 디자인을 마주할 대상을 고려해 컬러, 타이포그래피, 아이콘 등을 고민하고 실행에 옮기는 작업
• UX 디자인과 UI 디자인은 상호보완 관계(UX가 존재하기 위해 UI가 꼭 필요)
• 좋은 UX: 사용자의 니즈를 파악하는 것

 

프로덕트 디자이너 - 기능 중심 조직 vs 제품 중심 조직

• 기능 중심 조직: 워터폴 방식(기획 팀➔디자인 팀➔개발 팀)
• 제품 중심 조직:  제품 특성에 맞게 팀을 조직(상세 페이지팀, 피드 팀, 장바구니 팀)

 

UX/UI 디자인 진행과정

1. 발견 - 리서치: 데스크 리서치, 전문가 인터뷰, 관찰 조사, 포커스 그룹 인터뷰, 경쟁사 조사 등
2. 정의 - 전략 및 컨셉 도출: 어피니티 다이어그램, 페르소나, 저니 맵
3. 발전 - 와이어프레임 제작: IA, 와이어프레임
4. 전달 - 비주얼 디자인: 디자인 완성 후 내부 테스트➔오류/어려움 발견

 

UI 구조

• 웹사이트 구조: 가로 구조형, 세로 구조형
• 모바일 사이트 구조: 내비게이션, 탭바, 내비게이션+탭바

 

UI 요소

• 체크 박스, 라디오 버튼, 드롭다운 목록, 스피너, 토글 버튼, 텍스트 필드, 날짜/시간 피커, 검색 필드, 브레드크럼, 페이징, 슬라이더, 태그, 이미지 캐러셀, 알림, 진행 바, 스피너 로딩, 툴팁, 팝업, 아코디언, 툴바, GNB, LNB, 탭바, 모달 윈도우, 토스트 팝업, 빈 화면, 코치 마크

 

모바일 디자인 트렌드 변화

• 스큐어모픽 디자인 ➔ 플랫 디자인 ➔ 머티리얼 디자인

 

애플 - 관성 스크롤

• 바스 오딩(네덜란드 디자이너)가 세운 모바일 디자인 기준
• 관성 스크롤, 지니 효과, 밀어서 잠금 해제, 아이폰 키보드 커서 이동, 고무줄 효과 등

 

뉴모피즘

• dribble 디자인 플랫폼의 한 사용자로부터 출발
• 빛/그림자 표현 ➔ 촉각적, 사실적, 미래적
• 시각적 위계질서에 위배될 수도 있기에 사용 시 주의 필요

 

비트맵 vs 벡터

• 비트맵: BMF/GIF/JPG/PNG, 포토샵/페인터, 많은 픽셀 필요, 계단 현상
• 벡터: 경계 거칠어지지 X, 용량 변하지 X, 이미지 손실 X, AI/EPS/SVG, 일러스트레이터/코렐드로우/스케치

 

목적에 맞는 해상도 설정 필요

• 해상도에 따른 기기 다름 ➔ 대상 사용자 기기 파악 후 해상도 설정

 

픽셀 밀도 - 해상도 관계

• 픽셀 밀도 = ppi (pixel per inch)
• 이미지 크기 - 디바이스별 적정 시청 거리 고려 필요
• 픽셀 밀도 변화 과정
  1. 논리적 해상도: iOS-PT, 안드로이드-DP/SP(글자)
  2. 물리적 해상도(=래스터화): 기기x정해진 배율=픽셀px
  3. 다운 샘플링: 늘어난 픽셀을 줄여 기기에 맞는 해상도로 조절
  4. 기기 표현: 기기별 ppi 고려 ➔ 선명도 영향

 

앱 개발 방식

• 네이티브 앱: iOS/안드로이드 버전 각각 개발, 실시간 업데이트X, 높은 사양 그래픽, 빠른 속도, 기기 센서 활용
• 모바일 웹앱: 브라우저 내 실행, 성능/속도 느림
• 하이브리드 앱:앱 내 웹 페이지 불러옴, 업데이트X, 속도 일정X, 패키징 처리 필요(안드로이드/iOS 개발)

 

와이어프레임 vs 프로토타입

• 와이어프레임: 선으로 틀을 잡음, 이미지만으로 웹/앱 구조 및 용도 파악, 내용/구조/흐름/기능 등
• 프로토타입: 피델리티 레벨(로우/하이)

 

효과적인 유저 스토리 작성법

• 기본 틀: {사용자}는 {태스크}를 수행할 수 있다.
• 예시) 인스타그램 하이라이트 업로드 과정 - 1~6 번호순 나열

⇒ 유저 스토리 기본틀: {우디}는 {인스타 하이라이트에 사진 업로드}를 수행할 수 있다.

• As(사용자) ➔ {우디}
• I want(무엇을 원하는지) ➔ {인스타그램에 하이라이트를 업로드 하고 싶다}
• So that(수행함으로써 얻는 이득) ➔ {일상을 기록하기 위해}

+ Acceptance Criteria (인수 조건)

• Where {인스타 프로필 페이지에 진입한 상태에서}
• When {프로필 하단 "+" 버튼을 확인 후 클릭하면}
• Then {사진 선택 후 하이라이트에 추가할 수 있다}
• or {사진을 복수 선택하고 싶을 때}
• And {하이라이트에 있는 기존 사진에서 1개 이상 선택할 수 있다}

 

피드백 루프

• '제작 ➔ 측정 ➔ 학습' 반복
  1. 제작: 외부 사례, 검증된 프레임 워크 등 통해 가설 수립 + 서비스 제작
  2. 측정: 수치화한 정량적 데이터(클릭 수, 잔존 시간, 구매 전환 등), 정성적 데이터 모음 ➔ 최초 가설 타당성 검증
  3. 학습: 데이터 기반 응시, 나은 가설 발견 시 최초 가설 대폭 수정 가능, 시장 흐름 맞게 서비스 발전

⇒ 프로덕트-마켓 핏: 서비스가 시장에 안착되는 순간

 

우선순위 정하기(4사분면 분석)

1. '가치 vs 노력' 비교
2. '긴급도 vs 중요도' 비교

 

경쟁사 분석 표

• 경쟁사 목록 표: 경쟁사(직접/간접) 별 정보, 접속 링크, ID, 앱 목적, 생성일 등
• 기능 비교 표: 각 경쟁사가 가진 주요 기능 나열

 

시장 위치 파악 프레임워크

• SWOT 분석
• BCG 매트릭스
• 지각 매핑: 경쟁사 사이 자사 서비스 위치 4사분면 위 시각화

 

데이터

• 정량적 데이터:
  • 빅카인즈(검색어 결과 분석)
  • 국가통계포털(OECD 통계)
  • 국가법령정보센터(아이디어 관련 법)
  • 설문 조사
  • A/B 테스트
• 정성적 데이터:
  • 인터뷰: 심층 인터뷰, 전문가 인터뷰, 이해 관계자 인터뷰, 현장 조사/관찰 조사, 포커스 그룹 인터뷰, 전화 인터뷰, 오즈의 마법사(사람이 컴퓨터처럼 출력해 사용자에게 전달),
  • 데스크 리서치
  • 퍼널 분석(주요 단계 분석➔구간별 이탈률 파악)
    • AARRR(해적지표): 비즈니스 성장에 영향을 주는 가장 중요한 소비자 행동을 5단계로 나눠 분석
      • 유입 ➔ 활성화 ➔ 유지 ➔ 수익 ➔ 추천

 

심층 인터뷰 방법

1. 인터뷰 목적 & 대상자 & 질문 선정하기: MVP, UI/사용성, 정체성
2. 질문 순서 & 정리하기: 가벼운 것 ➔ 고민 필요한 것
3. 인터뷰 대상 섭외: 전화, 문자, 메일, SNS, DM, 지인, 전문 업체 등 ➔ 인터뷰어, 회사 소개, 인터뷰 의도, 섭외 이유, 날짜, 비용, 시간 등

• 좋은 질문을 위한 7가지 팁:
  1. 추측성 답변으로 돌아올 만한 질문 X
     • 만약 이런 기능 있으면 구매하시겠어요? (X)
     • 유사한 유료 기능이 있는 다른 사이트를 이용하고 있나요? 이유는? (O)
  2. 네, 아니요 답변으로 돌아올 질문 X
     • A라는 기능이 좋나요? (X)
     • A라는 기능이 어떤 형태로 도움을 주나요? (O)
  3. 인터뷰 대상자를 어설프게 도와주지 않기
     • 식재료를 구입하기 위해 매일 사이트에 접속합니까? 아니면 일주일에 1번 합니까? (X)
     • 식재료를 구입하기 위해 얼마나 자주 사이트에 접속합니까? (O)
  4. 한꺼번에 모든 질문을 하지 않기. 꼬리에 꼬리를 무는 형태로 질문하기
     • 당신의 회사는 어떤 제품을 만들고, 거기서 당신의 주요 임무는 뭐고, 어떤 가치를 느끼나? (X)
     • 당신의 회사는 어떤 제품을 제공하나? 당신이 맡은 역할은? 어떤 가치를 느끼나? (O)
  5. 모호한 질문 X
     • A라는 브랜드를 어떻게 생각하나? (X)
     • 최근 한 달 사이 A라는 브랜드를 어떤 이유 때문에 이용했나요? (O)
  6. 화면 공유 이용하기
     • 당신은 보통 장바구니에서 무엇을 하나요? (X)
     • 당신은 장바구니를 어떻게 사용하는지를 보여줄 수 있나요? (O)
  7. 듣고 싶은 답을 위한 질문 X
     • 이번에 출시한 A 브랜드의 새 제품이 주부들에게 외면받을 것 같지 않나요? (X)
     • A브랜드의 새 제품이 왜 주부들을 대상으로 출시했다고 생각하나요? (O)

 

데이터 모델링 - 어피니티 다이어그램

• 어피니티 다이어그램(Affinity Diagram): 정성적 데이터 더미에서 관련 있는 정보를 찾아 묶는 일종의 그루핑 기법
• 진행 과정:
  1. 어피니티 노트 나열
  2. 연관성 높은 어피니티 노트끼리 그루핑
  3. 그루핑한 그룹들의 연관성 고려 ➔ 어피니티 헤더 만들기
  4. 전체 총괄 주제 어피니티 슈퍼 헤더 만들기
  5. 인사이트/패턴 도출, 완성된 어피니티 다이어그램 월 보며 리뷰

 

HMW, 브레인스토밍에 유용한 질문법

• HMW: How Might We Questions? 어떻게/우리가/~할 수 있을까?

 

UX 페르소나

• 사용자에게서 공통으로 발견되는 행동 패턴을 묶어 만든 데이터 모델링의 한 종류
• 방법:
  1. 개인정보 도출하기: 이름/성별/나이/직업/디바이스 환경/연 수입/사진 등
  2. 사용하는 서비스/디바이스 환경/선호하는 SNS 특정하기
  3. 서비스 사용 동기 파악하기
  4. 니즈 파악하기
  5. 페인 포인트 알아보기
  6. 페인 포인트 해결하기

 

5 Whys

• 문제의 근본 원인을 파악하기 위해 꼬리에 꼬리를 무는 질문을 연속

 

골든 서클

• Why-How-What 틀로 근본 Why에 접근
• Why: 문제를 해결하려는 이유/목적
• How: 목적을 이루기 위한 방법 또는 과정
• What: 드러나는 결과(최종 제품/서비스)

 

UX 라이팅 vs 카피라이팅

• 카피라이팅: 마케팅 목적, 이목 끄는 문장, 판매 지향적, 스토리텔링 
• UX 라이팅: 간단하고 명료한 문장, 제품지향적, 정보 전달

 

좋은 UX 라이팅을 만드는 법칙

1. 명확함: 전문 용어 지양, 사용자가 맥락을 이해할 수 있어야
2. 간결함: 한눈에 알아볼 만큼 간결해야
3. 유용함: 사용자가 다음에 취해야 할 행동이 무엇인지 알아야
4. 일정함: 브랜드 톤을 일정하게 유지해야

 

실전 UX 라이팅 적용

• CTA 버튼: 사용자가 얻을 가치에 주목할 것
  • ex) 무료 체험하기 ➔ 30일 무료 체험을 시작해 보세요.
  • ex) 업로드하기 ➔ 코멘트 업로드하기
• CTA 서브 텍스트: 사회적 증명으로 선택에 확신을 줄 것
  • ex) 지난 주에만 4,131개의 회사가 등록했어요!
• 대화 상자: 친절, 명확
• 툴팁: 지식의 저주(다른 사람도 당연히 알 거라 생각하고 소통하는 것) 피하기 

 

웹폰트

• TTF(True Type Font): 가장 오래됨, 맥&윈도우, 속도 빠름, 문서 작업
• OTF(Open Type Font): 맥&윈도우, 속도 느림, 섬세 작업
• EOT(Embedded Open Type): 웹 사용 목적, only 인터넷 익스플로러
• WOFF(Web Open Font Format): 웹 사용 목적, 저작권 O, 속도 빠름, 다양X

 

좋은 디지털 타이포그래피 7가지 공식

1. 최소한의 폰트 종류
2. 가독성 높이는 행간(글자 크기x1.5)
3. 폰트 크기 따른 자간(구글-머티리얼 디자인 가이드 참고)
4. 한 줄에 적당한 글자 수(짧은 문단-줄당 20~40자, 긴 문단-줄당 40~60자)
5. 배경색과 충분히 구별되는 글자 색(제목-배경 명암비 3:1, 본문 4.5:1 이상)
6. 계층 구조를 활용한 타이포그래피(글자 크기, 두께, 색 구분)
7. 성격에 맞는 폰트 선택(브랜드 톤 구축)

 

시각적 위계를 만드는 5가지 강조 방법

• 크기, 색, 질감, 공간감, 형태

 

색상 선택

기능을 위한 색상	정서를 위한 색상
시스템 아이콘 헤드라인 제목 정보의 위계 마케팅적 요소(New, Sale 등) 링크 유도	스플래시 스크린 히어로 이미지 로고 색상 스크린샷 브랜드 아이콘

• 색상 이미지 공간: IRI 색채 디자인 연구소 - '부드러운/정적인/동적인/딱딱한' 컬러 분포 표
• 톤온톤 컬러 배색: 같은 색상 계열에서 톤의 차이로 색 구성
• 컬러 강조 통한 어포던스
• 시스템 컬러: 초국가적 색 체계

 

디지털 그리드 시스템

• 칼럼(Columns): 그리드 기둥 역할, 사각형 이미지 or 콘텐츠 배치
• 거터(Gutters): 칼럼과 칼럼 사이의 여백
• 마진(Margins): 화면 양 끝 여백(모바일 360dp 기준 - 최소 마진 16dp)

 

반응형 디자인

• 브레이크 포인트: 브라우저 크기에 따라 레이아웃이 변하는 기준점(추천 그리드 시스템 표 활용)

 

피보나치 수열

• 황금비: 인접한 두 피보나치 수의 비율(1:1.618)
• 타이포그래피 적용

 

앱 아이콘 vs 시스템 아이콘

• 앱 아이콘: 서비스 첫인상과 기능 전달, 디자인 스타일 제약 X
• 시스템 아이콘: 간결, 명확, 선/면 활용, 관습에서 크게 벗어나지 X

 

아이콘 - 시각 보정

• 도형 형태에 따라 보이는 착시 현상 고려 필요

 

---

 

📌 참고 단어

 

단어	뜻
스쿼드	팀마다 프로덕트 오너, 프로덕트 디자이너, 엔지니어 등이 포함(제품 중심 조직)
어피니티 다이어그램	정성적 데이터를 그루핑해 라벨링
저니 맵	사용자가 서비스에서 느끼는 경험과 다양한 감정을 지도로 시각화
W3C	웹(www) 표준 장려 조직 - HTML, XHTML, CSS 등 웹 관련 기술 표준 담당
피저빌리티 (Feasibility)	실현 가능성
VOC (Voice of Customer)	고객의 소리
UGC (User Generated Content)	사용자가 직접 생성한 콘텐츠
피델리티 (Fidelity)	시각적으로 최종에 얼마나 가까워졌는가를 판가름하는 충실도 - 로우/하이 피델리티
어포던스 (Affordance)	행동 유도성, 사용자는 인터페이스를 보기만 해도 다음에 어떤 행동을 해야 할지 알 수 있어야 함
UT (Usability Testing)	같은 팀이 모여 유저빌리티 테스팅하는 단계
멘탈 모델	인터페이스 예측 가능성 ↔ 멘탈 모델 부조화
브레드크럼 (Breadcrumb)	웹/앱에서 사용자 위치 파악 위한 페이지 상태 디자인 요소
이미지 캐러셀 (Image Carousel)	여러 장 이미지를 좌우로 이동하며 볼 수 있는 인터페이스, 하단 인디케이터
코치 마크 (Coach Marks)	사용자가 처음 앱을 열었을 때 중요 기능을 미리 알려 주는 인터페이스
스큐어모픽 디자인 (Skeuomorphic design)	사물을 사실적으로 표현하는 디자인 기법
플랫 디자인 (Flat design)	구성과 색상을 단순화해 직관적으로 표현하는 2D 그래픽 디자인 기법
머티리얼 디자인 (Material design)	구글 창안 디자인 가이드, 그리드 기반 레이아웃/계획적 색상 설계/의도적 여백/그래픽적 비주얼
CLV(Life Time Value)	고객 생애 가치, 사용자가 서비스 떠날 때까지 기업이 벌어들이는 수입
대화형 마이크로카피	글자에 질감을 만들어 무의식중에 인터페이스가 아닌 사람과 대화하는 듯한 느낌을 주는 것
CTA(Call To Action)	앱애서 가장 중요한 행동을 이끌어내는 요소
타이포그래피	글자를 창조하고 배치하는 행위 전반
웹폰트, 폰트 임베디드	접속한 웹사이트에 사용한 폰트가 내 컴퓨터에 없어도 폰트를 볼 수 있는 것
HSB 시스템	컴퓨터 그래픽스에서 색 표현 시 사용하는 색 모델, Hue(색상)/Saturation(채도)/Brightness(밝기)

 

출처 | 김성연(우디), 사용자를 사로잡는 UXUI 실전 가이드, 루비페이퍼, 2021년