[10/20_To Do]
- UI 디자인 Chepter 1. UI 디자인 접근
- UI 디자인 Chepter 2. UI 설계와 정보 구조
UI 디자인 Chepter 1. UI 디자인 접근
UI 디자인의 개념
UI 디자인의 목적
- UI 디자인의 본질은 행동을 설계하는 일
- 사용자가 서비스를 사용하는 모든 순간에, 우리가 원하는 행동을 선택하도록 유도하는 것을 의미
사용자의 흐름 설계
- 디자이너가 설계하는 것은 단순히 예쁜 구성과 정렬이 아님
- 사용자가 어떤 행동을 위해 자연스럽게 움직이도록 돕는 흐름(Flow)
- 사용자가 어디서 선택할지, 어디서 고민할지, 어떤 정보가 우선순위인지 알 수 있도록 설계
UI 디자인의 바른 접근
- 결과물보다 먼저 사용자의 행동을 봐야함
- "왜?"라는 질문의 형태라는게 중요함
- 장바구니까지 갔는데, 왜 결제를 안했을까?
- 메뉴 화면에서 왜 오래 머물렀을까?
[실습] 생각해보기
☑️ 홈 화면을 구성할 때, 가장 먼저 보여야 하는 정보는 뭘까?
영화, 드라마, 도서, 웹툰 등 콘텐츠 추천 및 평가 서비스 왓챠피디아를 살펴보았다.
왓챠피디아의 경우 콘텐츠 아티클이나 핫한 작품이 히어로 섹션으로 가장 먼저 보여지고 있다.
아티클이나 핫한 작품에 대한 내용은 그 컨텐츠에 대한 추천이고, 작품 감상 혹은 작품 정보 찾기로 이어지기 때문에 사용자에게 어플 체류 시간을 늘려주고, 왓챠피디아의 콘텐츠 추천 목적을 달성하게 해준다.
이러한 히어로 섹션을 가장 먼저 보여지게하여 왓챠피디아가 제안하는 다양한 콘텐츠에 대한 접근을 쉽고 빠르게 한다.
☑️ 최근에 사용한 앱 중, 내가 가장 많이 누른 버튼은 뭐였지?
왓챠피디아에서 내가 가장 많이 누른 버튼은 검색탭이다.
영화를 보기 전에는 이 작품이 어떤 평을 받고 있는지, 나의 예상별점은 어떻게 되는지 확인하기 위해 검색을 하고, 영화를 본 후에는 영화 별점을 남기고, 다른 사람들의 후기를 보기 위해 다시 영화를 검색한다.
이렇게 왓챠피디아에서는 검색이 자주 사용되는 기능이기 때문에 하단 네비게이션바에 위치시켜 언제든지 검색을 용이하게 할 수 있도록 제공하고 있다.
사용자 행동 설계하기
사용자 행동의 중심 요소
- 사용자가 원하는 바를 더 빠르게 얻게 하려면 사용자 행동을 중심으로 설계할 수 있어야 함
- 구체적으로 원하는 무언가에 무사히 도착하게 하는 게 디자이너의 일
행동 설계의 주요 3가지 요소
- 목표(Goal): 사용자가 이루고자 하는 목적
- 행동(Task): 목적을 이루기 위한 단계별 액션
- 흐름(Flow): 액션을 연결하는 정보 구조
[실습] 생각해보기
☑️ 내가 사용 중인 앱을 보고, 사용자가 무엇을 하게 하려는지 찾아보세요.
왓챠피디아는 '사용자 취향에 맞는 콘텐츠를 발견할 수 있게' 만들고 싶어한다.
☑️ 그 행동은 어떤 단계들로 구성되나요?
왓챠피디아 접속 → 홈화면에서 맘에 드는 콘텐츠 발견 → 콘텐츠 상세페이지 확인 → 나의 예상 별점 확인 → 감상 가능 플랫폼 정보 확인 → 콘텐츠 감상하러 이동 → 감상 후 다시 접속 → 나의 별점 남기기 → 다른 유저들의 코멘트 확인
UI 설계와 북극성 지표
북극성 지표(North Star Metric)
- 실무에서는 여러 사람들이 함께 협업하기 때문에 사용자 문제가 없는지 파악하기 어려움. 그래서 데이터를 통해 확신할 수 있는 기준을 만듬
- 그 기준이 북극성 지표이며 사용자의 목적을 숫자로 나타낸 것
- 사용자가 이 앱을 왜 쓰는지에 대한 근본적인 이유를 찾을 수 있음
- 회사가 어느 방향으로 성장해야 하는지 알려줄 수 있음
- 단순 클릭 수나 노출 수보다 더 의미 있는 행동이 뭔지 분석할 수 있음
서비스별 북극성 지표 예시
| 유튜브 | 사용자 1인당 시청 시간 |
| 배달의 민족 | 주문 완료 건수 |
| 에어비앤비 | 예약 완료율 |
| 토스 | 주간 활성 사용자 수(WAU) |
| 왓챠 | 사용자 1인당 평균 감상 횟수 |
이 수치들이 높을수록 사용자가 목적을 잘 달성하고 있다는 뜻, 제품이 올바르게 잘 가고 있다고 확신할 수 있다.
실무에서는 서비스가 성공해야 하는 기준이 필요하고, 그 기준이 북극성 지표나 핵심 지표가 된다.
[실습] 생각해보기
☑️ 내가 설계 중인 제품에서, 사용자는 어떤 목적을 가지고 있을까요?
왓챠피디아의 경우 사용자가 각자 취향에 맞는 콘텐츠를 발견할 수 있도록하는 목적을 가지고 있음
☑️ 그 목적을 수치로 표현하면 어떤 지표가 될까요?
왓챠피디아는 콘텐츠를 발견하고, 감상하고 다시 왓챠피디아에서 별점을 남기는 과정이 계속해서 반복되는 것을 유도하고 있다고 분석
왓챠피디아에 남겨진 별점 개수가 핵심 지표가 될 수 있을 것 같다.
인게이지먼트 게임
인게이지먼트 게임(Engagement Game)
- 제품과 사용자 목적에 따라 핵심 지표의 유형이 달라지는 것
- 사용자가 어떤 행동 패턴으로 제품에 몰입하게 되는지를 정의한 툴
인게이지먼트 게임의 유형
- Attention Game: 오래 머무를수록 이득이 발생
- 유튜브 / 인스타그램 / 브런치 등이 예시
- 콘텐츠 소비를 통한 몰입이 핵심
- 사용자가 '더 보고 싶어지는'경험을 느끼도록 UI를 설계
- Transaction Game: 거래가 발생할수록 이득이 발생
- 배달의민족 / 쿠팡 / 숨고 / 미소 등이 예시
- 사용자가 앱 안에서 어떤 거래나 결과를 만들어내게 함
- 사용자가 빠르게 목적을 달성할 수 있도록 빠르고 명확한 흐름
- Productivity Game: 업무를 완수할수록 이득이 발생
- 노션 / 포트폴리오 툴 / 구글 캘린더 등이 예시
- 사용자가 앱 안에서 생산적인 활동을 하게 만듬
- 사용자에게 무언가 만들어가는 의미를 주는 게 중요
인게이지먼트 게임의 확장
- 대부분의 제품은 하나의 게임으로 시작하지만 성장하면서 다른 게임의 속성까지 확장한다.
- 서비스마다 중심이 되는 행동 구조와 게임이 있다. 그 게임을 잘 이해하면 UX 설계 우선순위가 분명해진다.
[실습] 생각해보기
☑️ 내가 설계하는 제품은 어떤 게임에 가장 가까운가요?
내가 설계해고자 하는 제품과 비슷한 왓챠피디아를 분석했다.
왓챠피디아의 경우 여러 콘텐츠를 살펴보는 구조로 어텐션이 가깝다.
☑️ 그 게임에 맞춰 사용자의 핵심 행동 흐름을 3단계로 나눠본다면 어떻게 될까요?
콘텐츠 탐색 → 콘텐츠 클릭 → 콘텐츠 정보 확인 → 반복하며 계속 탐색
사용자 행동 유도와 흐름
북극성 지표와 인게이지먼트 게임은 UI 디자인을 UX, 비지니스와 연결하는 핵심 모델이다.
어떤 지표가 가장 중요한지, 그 지표를 올리기 위해선 어떤 게임에 몰입시켜야 하는지를 찾아야한다.
그럼 그 지표를 올리는 게임을 어떤 흐름으로 설계할 것인가를 고민해야 한다.
- 이 목적이 어떻게 행동으로 흘러가야 할지
- 그 행동이 어떤 화면에서, 어떤 구조로 이어져야 할지
실무 설계 예시
- 흐름 > UI
- UI는 의도와 목적을 화면에 나타내는 도구로써 기능함. UI를 어떻게 만들지 고민하는 것보다 사용자가 어떤 흐름을 통해 목적으로 도달할지 고민하는 것이 우선
사용자 관점으로 생각하는 예시
- 사용자가 어떤 경로로 들어와서 어떤 화면까지 가야하지?
- 어떤 단계에서 이탈하는 걸 막을 수 있을까?
- 어떤 화면이 있어야 이 흐름이 매끄러울까?
사용자 흐름 설계 시 주의사항
- 사용자가 도달하고자 하는 최종 목적지는 무엇인가요?
- 그 목적지까지 가기 위해 어떤 '중간 행동'이 필요한가요?
- 중간 행동 사이에서 선택 / 탐색 / 고민의 순간이 언제 일어나나요?
- 그 고민의 순간마다 도움을 줄 수 있는 정보는 무엇인가요?
[실습] 생각해보기
☑️ 당신이 설계 중인 서비스의 최종 목적은 무엇인가요?
왓챠피디아에서 사용자가 도달하고자 하는 최종 목적: 내게 딱 맞는 콘텐츠 찾기
주요 행동 흐름: 콘텐츠 탐색 → 콘텐츠 상세 정보 확인 → 반복으로 콘텐츠 선택 후 감상
☑️ 각 단계에서 사용자는 어떤 '고민'이나 '결정'을 할까요?(그 고민을 덜어줄 수 있는 UI 요소나 정보는 무엇인가요?)
콘텐츠 탐색 단계: 어떤 콘텐츠를 보고 싶은지 고민 / 콘텐츠 랭킹, 평균 별점 등이 도움을 주고 있다.
콘텐츠 상세 정보 확인 단계: 콘텐츠의 정보를 파악하며 내가 원하는 콘텐츠인지 고민과 결정 / 콘텐츠 정보, 나의 예상 별점, 다른 사람들의 코멘트 등의 정보로 도움을 주고 있다.
사용자 문제 정의 이해
문제 정의의 개념
- 무엇을 어떻게 해결할지 결정하는 기준이자, 서비스가 존재하는 이유 그 자체
문제 접근 과정
- 문제 자체와 문제가 가져온 결과를 혼동하면 안됨
- 반드시 사용자의 행동을 중심으로 문제를 다시 보아야 함
문제 접근 방식
- 이탈률이 높다: 사용자의 의도와 동선이 맞지 않는다 → 사용자가 기대한 기능이나 정보를 확인해야 함
- 전환율이 낮다: 선택 순간에 망설이게 하는 요소가 있다 → 불확실성을 제거하고, 정보의 확신을 주어야 함
- 탭 전환율이 적다: 구조가 아닌 맥락에 문제가 있다 → 흐름 속에서 탭 전환이 필요한 상황인지 먼저 돌아봐야 함
- 리뷰가 부정적이다: 사용자의 기대와 실제 경험이 다르다 → 기대의 충돌에 대해 파악해야 함
- 기능을 안 쓴다: 기능을 위한 기능이 되어 버렸다 → 기능자체가 의미 없는 맥락에 존재할 수 있음
[실습] 생각해보기
☑️ 최근 당신이 불편하다고 느꼈던 앱이나 서비스는 무엇인가요?
유튜브를 보려고 접속을 한 뒤 어떤 영상을 볼지 둘러보는데, 내가 보고 싶지 않은 연예인 가십 영상들이 떠서 기분이 안 좋았다. 평소 나의 알고리즘과도 연관이 없는 영상이 추천되는게 불편해서 시청기록을 꺼 영상이 추천되지 않게 설정하였는데, 이를 설정하니 영상을 어디까지 봤는지 자동으로 저장되는 기능까지 같이 꺼져 다시 기능을 켤 수밖에 없었다.
☑️ 그 경험에서 문제는 어디에 있었을까요?
알고리즘과 연관이 없는 영상이 추천되는데 문제가 있다고 보여진다.
사용자는 자신의 알고리즘과 관련 없는 자극적인 영상들은 보고싶어 하지 않는데, 유튜브는 알고리즘과 관련이 있는 영상과 없는 영상 모두 추천하여 띄워주기 때문에 발생한 문제이다.
UI 디자인 Chepter 2. UI 설계와 정보 구조
정보 구조화
정보 구조화의 개념
- 화면 안에 담긴 정보들의 순서를 만들어 사용자에게 소개하는 방법
- 화면 안의 정보를 체계적으로 분류해 사용자가 자연스럽게 따라올 수 있도록 하는 것
- 사용자는 자신이 필요한 기능을 쓰기 위해 서비스를 사용하기 때문에 정보를 목적에 따라 정리하는 정보 구조화가 필요함
클러스터링(Clustering)
- 가까운 관계끼리 정보를 묶어서 덩어리를 만들고, 또 더 큰 덩어리를 만드는 것을 정보 클러터링, 콘텐츠 블록화라고 부름
- 요소들을 정리정돈하면서 여백, 간격, 비례등을 고려함
- 시선의 자연스러운 이동을 만들고 더 쉽게 읽히게 함
[실습] 클러스터링 : 주어진 정보를 알맞게 덩어리로 나눠보기
시각적 위계와 시선 흐름
잘 만든 UI는 한 눈에 보인다
- 원하는 정보를 한 번에 찾기 쉽고 읽기 편하다
- 무엇을 먼저 보고, 어떤 순서로 행동해야 할지 자연스럽게 인식할 수 있다는 뜻
시각적 흐름 구조
- 사람은 화면 전체를 한 번에 보지 못한다
- 시선이 먼저 머무는 지점부터 차례로 정보를 인식하고 판단을 내린다
- 같은 정보라도 먼저 보이는 순서에 따라 사용자의 판단이 달라질 수 있다
- 가격이 가장 크고 눈에 띄면 가격 경쟁력이 있다고 인식
- 브랜드 로고가 강조되면 브랜다가 중요하다고 인식
- UI 안에서 사용자가 어떻게 움직이게 만들 것인가를 설계
시선 흐름을 만드는 3가지 요소
- 타이포그래피
- 네이밍 컨벤션(Naming Convention) : 이름을 짓는 규칙
- 디자인 시스템에서 타이포그래피 스타일 네이밍은 협업과 유지보수의 효율성을 좌우함
- Display: 가장 큰 제목 스타일 (ex. 브랜드 메시지, 메인 타이틀 등)
- Title: 일반적인 타이틀 텍스트 (ex. 카드나 페이지의 제목)
- Subtitle: 부제목 또는 보조 타이틀 (ex. 짧은 설명, 서브 섹션 헤드라인 등)
- Body: 일반적인 본문 텍스트
- Caption: 날짜, 태그, 설명 등 작은 보조 정보
- 색상, 채도 및 명도
- 강조할 정보는 더 진하고 선명한 컬러로 표현
- 같은 컬러여도 밝기 차이로 위계를 표현할 수 있음
- 정렬과 여백
- 요소 간 간격을 일정하게 유지하면 정보 덩어리의 구분이 명확해짐
[실습] 시각적 위계 설정하기
여행 일정 선택 섹션 → 일정 목록 → 버튼으로 위에서 아래로 시선이 흐르도록 유도
여행 일정 선택 섹션에는 타이틀을 붙여 더 시선이 가도록 강조
목록 중 강조할 부분에는 컬러를 사용하여 강조
사용자가 눌러야 할 버튼은 가장 강조하여 행동을 유도
텍스트의 크기와 굵기를 수정하여 가독성을 높이고, 일관적인 디자인을 위해 곡률을 일정하게 수정하였음
플랫폼과 레이아웃 변화
플랫폼별 주요 특징
- 데스크탑: 정보량이 많아도 괜찮고, 한 화면 안에서 탐색과 입력을 동시에 처리하는 구조도 적합
- 태블릿: 복잡한 인터랙션은 피하는게 좋음
- 모바일: 화면 너비가 좁아 콘텐츠를 수직으로 나열해야 함, 단순하 흐름으로 설계
플랫폼별 레이아웃 전략
- 콘텐츠 구조
- 모바일: 한 줄 흐름, 수직 스크롤 중심 → 정보는 단계적으로
- 데스크톱: 병렬 배치, 섹션 분리 → 정보는 한눈에
- 네비게이션 전략
- 모바일: 상단 또는 하단에 최소한의 탐색 기능
- 데스크톱: 사이드바 또는 전체 메뉴 구조를 보여줘도 괜찮음
- 시선의 집중 영역
- 모바일: 상단 또는 하단에 시선이 먼저 닿음
- 데스크톱: 강조 부분에 따라 자연스럽게 시선이 흐름
반응형 레이아웃에서 유의할 점
- 데스크탑에 비해 모바일은 정보를 덜어내고 선택과 집중을 해야한다
- 디바이스에 따라 콘텐츠의 흐름을 다르게 고려해야 한다
- 디바이스에 맞는 시선의 흐름을 고려해야 한다
[실습] 플랫폼별 레이아웃 전략
☑️ 구글 맵 데스크탑과 모바일 화면 비교
데스크탑
- 지도에서 나타나는 장소의 사진이 가장먼저 보이고, 배경 지도가 보이고, 좌측 상세 정보 페이지로 시선이 간다.
- 좌측 상세정보 페이지에서는 상단의 사진 → 장소 이름 → 버튼들 → 추가 정보 순서대로 시선이 흐른다.
모바일
- 지도 이미지가 가장 먼저 보이고, 상단의 검색탭 → 상세 정보 팝업 창 순서로 시선이 흐른다.
두 플랫폼의 동일한 행동 흐름
- 구글 맵은 사용자가 지도를 확인하는 행동과 검색을 하는 행동이 가장 많이 이루어지기 때문에 데스크탑과 모바일 두 플랫폼 모두 배경을 지도로 이미지로 두고, 검색바를 상단에 고정시켜두었다.
차이점
- 데스크탑은 넓은 화면을 활용하여 검색 후에도 배경 지도가 계속해서 보이며, 지도 위에 장소 사진을 보여주는 등 지도 화면을 계속해서 활용하고 있다. 하지만 모바일 환경은 화면 크기가 제한적이므로 검색 후에는 상세정보 화면이 지도 화면을 가리며 위로 올라오게 된다.
UI 평가 요소 7가지
7가지 관점(평가 지표)
- 정렬 (Alignment)
- 공간감 (Spacing)
- 정보 밀도 (Density)
- 시선의 무게중심 (Visual Weight)
- 시각적 위계 (Visual Hierarchy)
- 정보 흐름 (Flow)
- 목적 적합성 (Fit for Purpose)
MVP 플로우 설계
MVP(Minimum Viabel Product)
- 최소 가치 제품, 사용자 문제를 해결하는 가장 작은 형태의 제품
- 리소스가 한정되어 있고, 사용자의 목적을 빠르게 검증해야 할 때 사용되는 제품
MVP 디자인과 플로우차트
- 플로우 차트(화면 흐름도)는 제품의 전체적인 구조와 흐름을 파악할 때 효율적인 도구
- MVP 디자인에서는 사용자의 최소한의 여정을 시각화해서 흐름에 문제가 없는지 파악하는 것이 가장 우선
정보구조도와 플로우차트의 차이
- 정보구조도(IA)
- 전체적인 제품의 구성과 각 화면들의 관계를 파악
- 일종의 설계도, 층별 안내도의 개념
- 화면흐름도(Flowchart)
- 실제로 사용자가 어떤 과정을 통해 제품을 사용하는지 시각적으로 확인 가능
- 제품 이용을 시각적으로 정리한 순서도, 오시는 길 개념
플로우차트의 역할
- 사용자가 어떤 의사결정 경로를 따라갈지 예측
- 서비스에 필요한 화면 간의 구조를 시각화
- MVP의 범위를 정의하고, 불필요한 화면 설계를 방지해 비용을 절약
플로우차트를 만들기 전 생각할 것
- 사용자의 목적은 무엇인가요?
- 그 목적을 달성하기 위해 어떤 단계를 거쳐야 할까요?
- 그 중 ‘가장 최소한의 행동’은 어떤 흐름일까요?
[실습] 최소한의 여정 도출하기
☑️ 쿠팡에서 상품 구매 행동의 사용자 흐름을 도출
사용자 목적: 새벽 배송으로 우유 구매
인게이지먼트 게임: Transaction Game, 거래가 발생할수록 이득이 발생
1. 홈 화면: 로켓 프레시 클릭
2. 로켓 프레시 화면: 검색 탭에 이동 / 카테고리 탭 이동
3-1. 검색 탭: 우유 검색
3-2. 카테고리 탭: 우유/유제품 선택 → 흰 우유 선택
4. 상품 목록 화면: 우유 제품 비교
5. 제품 상세 화면: 상세 정보 확인 → 바로 구매 버튼
6. 장바구니 화면: 구매하기 버튼
7. 결제 화면: 결제 진행
8. 결제 완료 화면: 구매 완료, 목적 달성
☑️ 플로우 차트
'2025 내일배움캠프' 카테고리의 다른 글
| [MVP UI/Prototype 설계] 1. 중고거래 앱 분석 (0) | 2025.10.22 |
|---|---|
| UI 디자인 실무 컴포넌트와 프로토타입 (0) | 2025.10.21 |
| UXUI 실무 프로세스와 디자인 툴 (2) | 2025.10.17 |
| 음식 배달 시장 문제 아이디어 구체화, 와이어프레임 제작하기 (2) | 2025.10.16 |
| A-E-I-O-U 프레임 분석 (0) | 2025.10.15 |