[실전 UI 디자인] CH2: 정보 구조와 시각 흐름을 통한 UI 설계

 

2-1) UI 설계와 정보 구조

 

정보 구조화의 개념

• 디자인을 시작할 때는? ▶️ 사용자에게 보여줄 정보의 순서를 먼저 고민해야 함
• UI 디자인: 정보들을 시각적으로 정리해서 사용자에게 차근차근 전달하는 일 ▶️ 화면 안의 정보를 분류해서 사용자가 자연스럽게 따라올 수 있도록 함

 

 

정보 구조화와 UI의 관계

• 사용자는? ▶️ 자신이 필요한 정보를 찾고, 필요한 기능을 쓰기 위해서 앱을 사용
• 정보가 분류 없이 놓여있다면?
  • 체계나 분류, 기준 없이 디자인되어 있으면 어디를 봐야 할지 알 수 없음
    ▶️ 그래서 정보를 목적에 따라 정리하는 '정보 구조화'가 필요함

 

 

정보 구조를 짜기 위한 UI 설계

• 중고 거래 서비스의 정보 구조 예시
  • 사용자 주요 행동: 구매, 문의, 찜하기
  • 행동을 유도하려면 어느 보를 먼저 보여줘야 할까? ▶️ 시선이 제일 먼저 닿는 상단에 상품명과 가격이 먼저 눈에 들어와야 함
  • 사용자의 목적과 행동이 정보 우선순위를 결정

 

 

클러스터링 Clustering

• 정보에도 친한 정도가 존재(중복/인접/상하 관계)
• 클러스터링
  • 게슈탈트 원리의 근접성의 원리와 유사함
  • 정보를 구조화하는 것 ▶️ 가까운 관계끼리 묶어서 덩어리를 만들고, 또 더 큰 덩어리를 만드는 것
  • 이런 덩어리 짓기를 정보 클러스터링, 콘텐츠 블록화 라고 부름
  • 💡 클러스터링이 중요한 이유
    • 시선의 자연스러운 이동을 만든다
    • 더 쉽게 읽히게 한다
    • 요소들을 정리정돈하면서 여백, 간격, 비례 등을 연습할 수 있다

• 정보 클러스터링
  
  • 카드는 크게 3개의 덩어리로 나눌 수 있음
    • 각 영역의 세부 영역(이미지, 제목과 설명 영역, 버튼 영역)
      

      

      출처: 실전 UI 디자인(2-1)

  • 하나의 정보 그룹 단위는 명확하게 시각적으로 분리해야 함
    

    

    출처: 실전 UI 디자인(2-1)

 

[실습]

---

2-2) 시각적 위계와 시선 흐름

 

시각적 흐름 구조

• 시각적 흐름 ▶️ 사람이 화면을 인식하는 순서
• 같은 정보라도 먼저 보이는 순서에 따라 사용자의 판단이 달라질 수 있음
  • 가격이 가장 크고 눈에 띄면? 가격 경쟁력이 있다고 인식함
  • 브랜드 로고가 강조되면? 브랜드가 중요하다고 인식함
  • 우리는 UI 안에서 사용자가 어떻게 움직이게 만들 것인가를 설계해야 함
• 사람은 화면 전체를 한 번에 보지 못함 + 인식에 필요한 에너지를 최대한 아끼기 위해 중요한 정보만 먼저 보려고함
  ▶️ 시선이 먼저 머무는 지점부터 차례로 정보를 인식하고 판단을 내림

 

 

시각적 흐름을 만드는 3가지 요소

• 타이포그래피
  • 글자의 크기, 굵기, 문장의 간격 등을 조정해 읽는 순서를 만듦
  • 타이포 스타일로 흐름 만들기
    • 글자는 클 수록, 굵을 수록 더 시선을 이끔
      • 글자 크기는 서로 4px 이상 차이나게 해주면 좋음
    • 확연히 구분되는 텍스트 스타일 3~4가지(큰거*2, 본문, 보조 라벨)를 만들어 사용하기
    • 줄 간격이 적절해야 읽기 좋음 ▶️ 글자 크기의 1.4~1.6 배 정도가 적절
    • ❌ 크기나 스타일이 너무 다양하거나 복잡하면 오히려 혼란을 줄 수 있음
  • 타이포 스타일 이름 짓기
    • 네이밍 컨벤션: 이름을 짓는 규칙
    • 타이포그래피 스타일 네이밍은 협업과 유지보수의 효율성을 좌우
    • 일반적으로 많이 사용하는 스타일 위계 분류 방법
      • Display: 가장 큰 제목 스타일 (ex. 브랜드 메시지, 메인 타이틀 등)
      • Title: 일반적인 타이틀 텍스트 (ex. 카드나 페이지의 제목)
      • Subtitle: 부제목 또는 보조 타이틀 (ex. 짧은 설명, 서브 섹션 헤드라인 등)
      • Body: 일반적인 본문 텍스트
      • Caption: 날짜, 태그, 설명 등 작은 보조 정보
        

출처: 실전 UI 디자인(2-2)

 

• 색상, 채도 및 명도
  •  강조할 정보에 포인트 컬러를 일반적으로 많이 사용하지만, 경우에 따라 지시가 명확한(거절, 승인 등) 색상을 사용할 수도 있음
  • 배경색과 글자색이 확실히 구분되도록 하기
    • 배경색과 글자색의 대비는 최소 3:1을 권장함 + 너무 흐린 색상은 비활성화된 정보로 보일 위험도 있음
  • 같은 컬러여도 밝기 차이로 위계를 줄 수 있음
    • • 중요한 정보는 컬러 대비와 명도를 조합하여 강조
      • 덜 중요한 정보는 옅은 회색 계열로 처리하면 자연스럽게 위계가 생김
      • ❌ 너무 강한 원색 조합은 피로도를 높일 수 있음

 

• 정렬과 여백
  •  정렬과 여백 ▶️ UI의 질서를 시각적으로 보여주는 핵심 요소
  • 요소 간 간격을 일정하게 유지하면? 정보 덩어리의 구분이 명확해짐
  • 정렬은 기본적으로 왼쪽을 기준으로 왼쪽 정렬을 하는 것이 좋음
  • 여백 ▶️ 어디서 어디까지가 한 덩어리인지 인지하는 기준이 됨

출처: 실전 UI 디자인(2-2)

 

[실습]

- 추가할 예정

---

2-3) 플랫폼과 레이아웃 변화

 

플랫폼과 레이아웃

• 사용자 기기에 따라 달라야 함
• 모바일, 태블릿, 데스크탑처럼 플랫폼이 달라지면 사용자의 환경과 조작 방식이 달라짐
  • 사용자가 어떤 기기에서 언제, 어떤 목적으로 이 화면을 볼 것인가에 따라 정보 전달 방식도 달라짐
    • 모바일: 사용자의 이동이 간편, 한 손 조작, 빠른 탐색 중요
    • 데스크탑: 넓은 화면 활용, 복잡한 정보 구조 한번에 보여주기 가능
    • 태블릿: 모바일과 데스크톱 사이에 위치해서 양손 조작과 세로/가로 화면 전환도 고려해야 함

 

 

플랫폼에 따른 레이아웃 전략

• 플랫폼 별 주요 특징
  • 데스크탑
    • 정보량 많아도 ㅇㅋ, 여러 컬럼으로 나누기 가능
    • 마우스, 키보드, 스크롤 모두 사용 가능 ▶️ 세밀한 정보 제시와 조작 가능
    • 한 화면 안에서 탐색과 입력을 동시에 처리하는 구조도 적합
  • 태블릿
    • 화면 너비 넓고, 회전 가능
    • 양손 조작과 터치 기반 입력을 동시에 고려해야 함
    • 모바일 보다 더 많은 정보를 한 화면에 담기 가능 하지만, 복잡한 인터랙션은 피하는 게 좋음
  • 모바일
    • 화면 너비가 좁아 콘텐츠를 수직으로 나열해야 함
    • 스크롤 탐색이 자연스럽고, 인터랙션은 엄지손가락 중심
    • 화면 내에 많은 정보를 넣기보다는 단순한 흐름으로 설계하는 것이 좋음
• 플랫폼 별 레이아웃 전략
  • 콘텐츠 구조
    • 모바일: 한 줄 흐름, 수직 스크롤 중심 → 정보는 ‘단계적으로’
    • 데스크톱: 병렬 배치, 섹션 분리 → 정보는 ‘한눈에’
  • 내비게이션 전략
    • 모바일에서는 상단 또는 하단에 최소한의 탐색 기능을 둬야 화면을 가리지 않음
    • 데스크톱에서는 사이드바나 전체 메뉴 구조를 함께 보여줘도 괜찮음
  • 시선의 집중 영역
    • 모바일은 화면 상단 or 하단에 시선에 먼저 닿음
    • 데스크톱은 화면 왼쪽 상단 -> 오른쪽 -> 아래 순으로 시선이 흐름

출처: 실전 UI 디자인(2-3)

 

 

반응형 레이아웃에서 유의할 점

• 실수1: 모바일에 모든 콘텐츠를 그대로 넣으려 한다
  • 작은 화면은 단순히 정보를 압축해서 넣는 것이 아님. 선택과 집중이 필요함
• 실수2: 콘텐츠 흐름이 디바이스마다 바뀌지 않는다
  • 수직 스크롤이 편한 모바일과, 병렬 탐색이 자연스러운 데스크톱의 사용 흐름은 다름
• 실수3: 시선 흐름이 고려되지 않은 배치
  • 화면마다 눈이 먼저 가는 영역이 다름. 디바이스에 맞는 시선 흐름을 고려해야 함
• 💡 질문해보기
  • 이 플랫폼에서는 어떤 정보가 먼저 보여야 할까?
  • 지금 구성은 사용자의 행동을 어떤 흐름으로 유도하고 있을까?
  • 이 콘텐츠는 데스크탑에서 본다고 가정했을 때, 더 잘 보여줄 수 있는 방식은 없을까?
  • 지금의 배치는 단순히 레이아웃을 잡은걸까, 아니면 이 서비스의 목적을 전달하고 있을까?

 

 

[실습]

- 추가할 예정

---

2-4) UI 평가 요소 7가지

 

UI 평가 지표

• 디자인을 잘 했다고 평가할 수 있는 관점 7가지
• 좋은 디자인 ▶️ 사용자의 목적에 맞게 정보가 적절히 구조화되고 행동을 자연스럽게 유도함
• 7가지 관점: 정렬, 공간감, 정보 밀도, 시선의 무게중심, 시각적 위계, 정보 흐름, 목적 적합성 ▶️ 회고하는 느낌으로

 

 

정렬

• 정렬이 맞지 않으면? 어수선해보임
• 수직, 수평 정렬 축을 기준으로 요소들을 정리해야 정보가 논리적으로 인식됨
• 같은 타입의 콘텐츠는 같은 라인에 정렬되어야 함
• 가로선, 세로선이 일관되지 않으면? 읽는 흐름이 계속 끊김
• 💡 정렬 축은 하나만 잡는 것이 가장 깔끔함

출처: 실전 UI 디자인(2-4)

 

 

공간감

• 같은 정보끼리는 가깝게, 다른 정보끼리는 멀리 배치해야 덩어리가 인식됨
• 하나의 관련 있는 정보 묶음으로 인식하는 경계선에선 여백을 더 넉넉히 주기 ▶️ 다른 묶음 이라는 걸 확실하게 보여줌
  관련 있는 정보끼리 묶인 안에서는? 여백을 가깝게 둬서 같은 묶음 안에 있는 거라는 걸 보여주는 요소
• 화면에서 요소 간의 간격 ▶️ 단순한 여백이 아니라, 정보의 경계선
• 4px 또는 8px 단위로 정렬된 4픽셀 그리드 시스템으로 여백을 구성하면 ▶️ 시각적 리듬이 생김 + 유지보수가 쉬워짐
  • 너무 작은 여백(e.g. 2px), 큰 여백(e.g. 40px 이상)은 혼란을 줄 수 있음
• 💡 이건 같은 그룹일까? 가깝게, 이건 다른 그룹일까? 멀리 떨어뜨리기

출처: 실전 UI 디자인(2-4)

 

 

정보 밀도

• 너무 빽빽하면 숨이 막히고, 너무 적으면 허전함
• 정보 밀도 차이에 따른 예시
• 정보 밀도에 따른 예시
  • 밀도가 너무 높으면?
    • 사용자가 인식해야 하는 정보가 한번에 너무 많이 들어옴
    • 텍스트가 빼곡하고, 다양한 UI가 한 화면에 10개 이상 노출됨
    • 무엇부터 해야 하지? 라는 생각이 든다
  • 밀도가 너무 낮으면?
    • 아무 정보도 없이 CTA 버튼 하나만 화면 중앙에 배치됨.
    • 지금 정상적으로 작동하는 걸까? 하는 의문이 생긴다
• 💡 한 번에 3~5개의 정보 덩어리 정도로 구성하는 게 이상적
  인간의 단기 기억 한계는 7 +-2 정도로 너무 많은 정보는 행동 유도를 방해함

 

 

무게 중심

• 화면에서 가장 시선이 먼저 닿으면서, 화면의 중심점 역할을 하는 요소
• 💡 가장 강조하고 싶은 정보가 시선의 시작점(보통 좌측 상단 또는 중앙) 근처에 위치해야 함
  CTA, 타이틀, 이미지 등은 지나치게 크거나 작지 않게, 중심에 잘 안착해야 함

 

 

시각적 위계

• 위계는 '무엇을 먼저 보고, 어떤 순서로 행동할 것인가'를 설계하는 일
• 가장 쉽게 접할 수 있는 요소 ▶️ CTA  버튼을 강조하는 것: CTA 버튼은 사용자가 반드시 해야 하는 우선적인 행동이며, 다른 요소들보다 위계가 훨씬 높아야 함
• 앞서 나온 크기, 굵기, 색상, 정렬, 여백 등 모든 요소를 전체적으로 고려해서 위계를 표현할 수 있음
• 강조가 너무 많으면 진짜 중요한 게 뭔지 모르고, 없으면 사용자가 아무 판단도 내리지 못함
• 💡 가장 중요한 정보가 가장 눈에 띄는가?
  이 화면의 핵심 정보는 첫 3초 안에 인식할 수 있을까?

출처: 실전 UI 디자인(2-4)

 

 

정보 흐름

• 위계가 정리되어 있어도 정보가 끊기는 지점이 있다면 사용자는 멈추게 됨
• 시선이 위아래, 좌우로 부드럽게 이어지는 흐름이 있어야 함
  
• 💡 지금 구성은 정보가 먼저 보이고 → 행동을 유도하고 있나요?
  사용자 흐름을 따라가면 화면 이동에 끊김이 없나요?

출처: 실전 UI 디자인(2-4)

 

 

목적 적합성

• 디자인이 예뻐도 사용자의 목적에 부합하지 않으면 실패
• 사용자는 맥락이 부족하거나 예측, 이해가 되지 않으면 위험을 감수하려고 하지 않음
• 💡이 기능, 이 정보가 정말 지금 이 시점에 필요할까?
  사용자가 이 화면에서 하려고 하는 일을 정확히 이해하고 있을까?

---

2-5) MVP 플로우 설계

 

MVP 디자인의 목적

• MVP, Minimum Viable Product
  • 최소 가치 제품, 사용자 문제를 해결하는 가장 작은 형태의 제품을 말함
  • 핵심 지표를 가장 빠르게 검증할 수 있는 사용자 흐름
  • 사용자의 최소한의 여정만 구현하는 것

 

MVP 디자인과 플로우 차트

• 화면 설계보다 먼저 해야 할 일▶️ 사용자의 행동 흐름을 시각화 하는 것
• 플로우 차트
  • 제품의 전체적인 구조와 흐름을 파악할 때 효율적인 도구
• 정보구조도와 플로우차트의 차이
  • 제품을 하나의 건물에 비유하면, IA는 층별 안내도, 플로우차트는 오시는 길이라고 할 수 있음
  • 정보구조도(IA): 전체적인 제품의 구성과 각 화면들의 관계 파악 가능, 화면과 정보들이 어떤 구조로 연결 되있는지를 나타내는 일종의 설계도
  • 플로우차트: 특정 위치 또는 행동을 위해 사용자가 거쳐야 하는 경로 , 사용자가 어떤 과정으로 제품을 이용하는 지를 시각적으로 정리한 순서도
  • 💡 와이어프레임과 프로토타입을 만들기 위해서는 사용자의 목적과 흐름이 담긴 시나리오가 필요해요. 이 사용자 시나리오를 만들기 위해 정보구조도를 작성하고 플로우차트를 만든다고 생각해 주세요.
• 플로우차트의 역할
  • 사용자가 어떤 의사결정 경로를 따라갈지 예측하기
  • 서비스에 필요한 화면 간 이동 구조를 시각화하기
  • MVP의 범위를 정의하고, 불필요한 화면 설계를 방지해 비용 절약하기  
• 플로우 차트 만들기 전 생각할 것
  • 사용자의 목적은?
  • 그 목적을 달성하기 위해 어떤 단계를 거쳐야 할까?
  • 그 중 '가장 최소한의 행동'은 어떤 흐름일까?
• MVP 디자인에서는 사용자의 최소한의 여정을 시각화해서 흐름에 문제가 없는지 파악하는 게 먼저

 

[실습] 최소한의 여정 도출하기

• 핵심 행동 선택: 채널 구독
• 인게이지먼트 게임 중 어떤 것으로 볼 수 있는지?: Attention Game: 오래 머무를 수록 이득 발생
• 사용자가 그 행동을 하기까지 어떤 화면과 판단을 거치는 지 순서대로 정리하기
  • 앱 서비스 메인 화면(추천 영상 영역 표시)
  • 영상 클릭 후 채널 상세 페이지 이동 또는 채널 상세 페이지로 바로 이동
  • 구독 버튼 클릭
  • 홈 화면에 구독한 채널 콘텐츠 노출
• 플로우 차트로 그려보기
  • 기본: 앱/웹 서비스 메인 → 채널 상세 → 구독 클릭 → 구독 완료 → 개인화 피드 반영
  • 조건 분기: 이미 구독한 채널일 경우
  • 예외 처리: 네트워크 오류나 비로그인 상태 시 로그인 유도하기
• 각 화면에 어떤 정보를 넣을 것인지 메모해보기
  • 메인 화면: 추천 채널 영상, 맞춤형 영상
  • 채널 상세: 채널 이름, 소개글, 대표 영상, 썸네일, 구독 버튼, 알림 설정 토글
  • 구독 후 메인 화면: 구독 채널의 추천 영상

•  

---

2-6) 와이어프레임과 사용자 흐름

 

와이어프레임

• 제품을 만들 땐 먼저 정보의 구조와 흐름, 판단의 우선순위로만 구성된 와이어프레임을 만듦
• 정보의 구조와 흐름, 판단의 우선순위를 정해서 스케치를 먼저 해야함
• 와이어프레임이 중요한 이유
  • 기능과 정보의 배치, 흐름, 위계를 시각적으로 정리할 수 있음
  • 시각적 표현 없이도 사용자 목적이 충족되는지 검토할 수 있음
  • 디자이너 혼자만이 아니라, 기획자·개발자와 의사소통의 도구
• 와이어프레임을 그리는 기본 순서
  • 1️⃣사용자 목적과 화면의 역할 정의
    • 이 제품 흐름에서 사용자는 어떤 목적을 가지고 있는지 명확하게 적어놓고 시작해요.
    • 각 화면에서 사용자는 어떻게 다음 화면들로 넘어갈 수 있는지 표시해요.
    • 💡 이 화면은 어떤 행동 플로우의 일부인가요?
  • 2️⃣필요한 정보와 우선순위 정하기
    • 각 화면에서 반드시 보여줘야 하는 정보를 메모하기
    • 상품명, 가격, CTA 버튼, 사용자 리뷰 등 정보 묶음 단위로 표시하면 소통이 빨라짐
    • 어떤 정보가 가장 핵심인지 표시하기
  • 3️⃣ 사용자 흐름과 행동 유도 점검
    • 이 화면에서 어떤 행동을 하게 되는지, 그 흐름이 명확한지 확인하기
    • CTA의 위치, 텍스트, 강조는 행동 유도와 연결되어야 함
    • 💡 와이어프레임을 작성할 땐 메모를 꼭 남기기
      이 화면의 목적, 핵심 판단 정보 등을 간단히 메모로 남기면 협업이 쉬워짐

출처: 실전 UI 디자인(2-6)

 

와이어프레임 설계 실전 팁

• 화면의 맥락부터 정하기
  • 이 화면은 어떤 행동 플로우의 일부인가?
  • 이전 화면에서 뭘 봤고, 이 화면에서 어떤 판단을 내려야 하나?
  • 💡 와이어프레임 옆에 플로우차트를 같이 놓고 보면 더 편함
    사용자 목적과 화면의 핵심 행동을 메모해두면 이해가 더 쉬움

• 덩어리부터 크게 접근하기
  • UI를 작은 것부터 만드는 것이 아니라, 큰 레이아웃 단위부터 접근하기
  • 각 덩어리를 화면에 던져 넣는다는 느낌으로
  • 💡 편한 방법으로 먼저 크게 크게 콘텐츠 덩어리를 그려보기
    덩어리를 먼저 만들고, 이건 어떤 목적인지 적어보는 연습해보기
• 컴포넌트의 역할을 정확히 명시하기
  • 와이어프레임은 특성 상 UI가 명확하게 드러나는 형태가 아님
  • 따라서 UI를 그려넣을 때는 목적을 명확하게 명시해주기
  • 💡 디자인 시스템이 있다면 디자인 시스템의 컴포넌트를 사용해 링크로 연결하거나 이름을 옆에 써주기
• 여백과 정렬은 정확하지 않아도 괜찮음

---

2-7) 전략적 UI 사고 훈련

 

전략적 UI 사고 훈련

• UI를 구성하는 데에는 정답이 없지만, 목적이 달라지면 구조는 분명히 달라져야 함
• 실제 제품 설계에서는 배치에 대한 고민보다는 아래 질문이 더 중요함
  • 이 화면은 사용자를 어떤 행동으로 이끌어야 하지?
  • 지금 강조한 정보가 정말 그 행동을 돕고 있을까?
  • 💡 UI는 목적에 맞는 전략적 구조가 더 중요

 

 

UI 설계 전략 실무

• 콘텐츠는 동일해도, 화면의 목적이 무엇인지에 따라 구조는 달라져야 함
• CTA는 위치보다 전략이 더 중요
  • 모든 CTA는 무조건 우측 하단에 두는 건 정답이 아님
  • 어떤 CTA는 반복 노출될수록 전환율이 높아지고, 어떤 CTA는 너무 많이 등장하면 사용자가 피로해짐
    즉, CTA의 위치, 크기, 강조 방식도 화면의 목적에 맞게 설계해야 함
• 화면 목적에 따른 전략 예시
  

  

  출처: 실전 UI 디자인(2-7)

  • 상품 구매 중심: 메인 이미지 → 제목 및 가격 → 후기 → CTA로 구매 유도
  • 구독 신청 중심: 서비스 제목 → 구독 혜택 → 가격 및 비교 포인트 강조 → CTA로 구독 유도
  • 정보 전달 중심: 제목 → 관련 정보 → 보조 정보 및 기능 안내
• 같은 공간이라도 운영 목적이 다르면 배치가 달라짐
  • 화면을 그리기 전 해볼 질문
    • 이 화면이 설득하고자 하는 건 무엇인가?: 구매, 구독, 정보 탐색, 행동 유도
    • 사용자의 목적은 무엇인가?: 빠른 결정, 여러 옵션 탐색, 신뢰 확보, ...
    • 비즈니스 목표는 무엇인가?: 전환율, 체류시간, 유입 분산, ...