[Day 11] 좋은 서비스는 구조에서 시작된다 : IA, User Flow, Wireflow, Wireflow

안녕하세요 여러분, 송2입니다.

 

여러분은 처음가보는 쇼핑몰이나 백화점에 가면 가장 먼저 어떤 행동을 하시나요?

 

저는 보통 안내 지도를 먼저 확인하는것 같습니다. 어떤 매장이 있는지, 가고 싶은 매장을 어디에 있는지, 어디로 이동해야 하는지 등을 알 수 있기 때문이죠. 안내 지도를 안보고 매장을 찾는다면 아마 여러층을 돌아다니면서 많은 시간을 소요하게 될 것입니다. 

11차 수업을 듣고나니 저희가 사용하는 웹사이트나 앱 서비스도 이와 비슷하다는 생각이 들었씁니다. 

 

만약 저희가 사용하는 서비스들이 정리된 구조를 가지고 있지 않다면  원하는 기능을 찾기 위해서 이곳저곳을 해매게 될 것입니다. 우리가 사용하고 있는 서비스들은 단순히 화면을 예쁘게 만드는 것에서 끝나는 것이 아니라, 화면을 만들기 전에 어떤 정보가 필요한지, 사용자가 어떤 경로로 이동할지가 다 미리 설계된 결과물입니다.. 

 

오늘 포스팅은 IA, User Flow, WireFlow를 통해 좋은 서비스를 만들기 위해 구조를 어떻게 설계해야 하는지와 Grid, Spacing Rule, 와이어 프레임대해 정리해보겠습니다.

 

오늘도 힘내서 달려봅시다!!!

---

■ 1. 좋은 서비스는 어떻게 구조를 설계할까? 

1.1 더블 다이아몬드 모델이란?

수업에서는 IA를 배우기 앞서 더블 다이아몬드 모델에 대해 알아봤습니다. 

 

강사님께서는 "Ui는 더블 다이아몬드의 어느 단계에 해당할까?라는 질문을 하셨습니다. 여러분은 어떤 단계에 해당하시는 것 같나요?

더블 다이아몬드는 서비스를 만드는 과정을 문제발견(Discover), 문제 정의(Define), 해결방안 탐색(Develop), 산출(Deliver)의 네 단계로 설명하는 모델입니다. 

 

특히 두 개의 다이아몬드 현태는 생각을 넓게 홪아하는 단계와 그 중에서 가장 적절러한 방향을 선택하는 단계를 의미합니다. 

 

• 발견 : 최대한 많은 정보를 수집하고, 문제에 대한 이해를 넓히는 단계

- SWOT, BM분석, 경쟁자 조사, 시장현황 파악, VOC수집, 오픈서베이, 기사자료, Survey(정량), ID(정성) 등

 

• 도출 : 수집한 정보를 바탕으로 문제를 명확하게 정의하고 해결할 핵심 문제를 도출하는 단계

- 이슈제기 / 문제 정의, 인사이트 도출, 해심 타겟 정의(페르소나) 등

 

• 구체화 : 정의된 문제를 해결하기 위한 다양한 아이디어를 발산하는 단계

- 아이데이션, IA, User Flow, Wireflow, Wireframe, 프로토타임 개발 등

 

• 산출 : Develop 단계에서 나온 아이디어 중 최종적으로 선택된 아이디어를 구현하고 평가하는 단계

- 사용성 테스트, 검증, 개발 협업, 출시 및 개선 등

 

저도 처음에는 UI가 어느 단계에 해당하는지 고민했습니다.  개인적으로 초기 UI 설계는 Develop단계, 최종 UI는 Deliver 단계에 해당된다고 볼수 잇을 것 같다고 생각했습니다. 

 

특히 11차 수업에서 배우는 IA, User Flow, WIreflow는 화면을 구현하기 전에 구조를 설계하는 과정으로, Develop 단계에서 이루어지는 대표적인 작업이라고 볼 수 있습니다. 

 

 

1.2 서비스의 안내지도, IA

화면을 만들기 전에 가장 먼저 해야 할 일은 무엇일까요? 바로 서비스의 정보 구조를  설계하는 IA(Information Architecture)입니다.

 

백화점에 안내 지도가 없으면 원하는 매장을 찾기 힘든 것처럼, 아무리 좋은 기능이 많다고 하더라도 정리되어 있지 않다면 사용자는 원하는 기능을 찾기 어려울 것입니다. 그렇기 때문에 서비스 역시 체계적인 구조가 필요한 것입니다. 

 

IA(Information Architecture)

서비스의 정보 구조를 한눈에 파악하기 위함. 정보가 논리적으로 정리되어 있어 사용자가 헷갈리지 않음.

IA를 쉽게 이해하기 위해 음식 메뉴를 예시로 들어보겠습니다. ‘음식’은 Main Category, ‘한식·중식·일식’은 Sub Category, ‘김치찌개·짜장면·초밥’은 Depth에 해당합니다. 이처럼 IA는 사용자가 원하는 정보를 쉽게 찾을 수 있도록 정보를 체계적으로 분류하고 구조화하는 작업이라고 볼 수 있습니다.

 

작업 프로세스

① Main Caegory

② Sub Caregory : ddddd + 공통영역 : ㅇㅇㅇㅇㅇ

③ Depth: 서브 카테고리에서 페이지로 넘어가는 부분

 

실제 IA 예시 카카오페이지 웹툰탭 분석

 

• 주요 구성
  • 메인 카테고리: 주로 앱의 바텀 내비게이션을 기준으로 잡음.
  • 댑스(Depth): 사용자가 목표에 도달하는 단계. 가급적 3댑스 이내로 설계하는 것이 사용자 경험에 좋음.
• 표현 방식
  • 트리 구조: 상하 관계가 명확하여 이해 관계자에게 구조를 설명할 때 유리.
  • 엑셀 형식: 화면 ID, 기능 설명 등을 상세히 기입하여 실무 협업(개발/디자인)에 주로 사용.

1.3 사용자의 이동 경로, User Flow

• User Flow는 사용자가 목표를 달성하기 위해 어떤 과정을 거치는지 시각적으로 표현한 것
• IA가 지도라면, 유저 플로우는 그 위에서 사용자가 실제 움직이는 이동 경로

 

여러분이 이해하기 쉽게 사람이 밥먹는 과정에 대해서 설명을 해봤습니다. user flow는 보통 아래의 단계를 기준으로 진행이 됩니다.

 

① 목표 (User Goal)

• 사용자가 최종적으로 이루고자 하는 목적
• 예) 웹툰 보기, 음식 주문하기, 회원가입하기

 

② 작업 (Task)

• 목표를 달성하기 위해 수행하는 작업
• 예) 작품 검색하기, 메뉴 선택하기

 

③ UI

사용자가 실제로 마주하는 화면

예) 홈 화면, 상세 페이지, 결제 화면

 

④ 행동 (Action)

• 사용자가 화면에서 수행하는 행동
• 예) 클릭하기, 검색하기, 입력하기

 

⑤ 판단 (Decision)

• 사용자의 선택에 따라 다음 경로가 달라지는 지점
• 예) 로그인 여부 확인, 결제 진행 여부 선택

 

예시 카카오페이지 Task : 원하는 만화 찾아 보기 

1.4 화면과 흐름을 함께보는 WireFlow

Wireflow = Wireframe + User Flow

• User Flow가 사용자의 이동 경로를 보여준다면, Wireflow는 실제 화면과 함께 사용자의 이동 흐름을 확인할 수 있도록 도와줌.
• 서비스를 설계할 때 화면 간 연결 관계를 보다 직관적으로 파악할 수 있다는 장정

---

■ 2. 보기 편한 환면에는 규칙이 있다.

2.1 화면을 정리하는 보이지 않는 규칙 , 레이아웃과 그리드 시스템

 

디자인을 처음 접하게되면 가장 먼저 마주치는 단어가 바로 그리드(Grid)와 레이아웃(Layou)입니다. 단어만 둘어서는 둘이 비슷해보이기도 하시죠? 여러분이 쉽게 이해할수 있게 우리가 학창 시절 매일 마주치던 '식판'을 예시로 설명드리겠습니다. 

레이아웃이란?

• 화면 안에서 요소를 어떻게 배치할 것인지 정하는 구조
• 사용자가 정보를 쉽게 이해할 수 있도록 콘텐츠를 정리하는 역할
• 식판의 예시로 보면 정해진 칸막이 규칙에 맞춰 밥,국, 반찬을 먹기 좋고 보기좋게 담아낸 상태.

 

그리드란?

출처 : krds

• 화면을 일정한 기준으로 나누어 요소를 정렬하는 방법
• 화면을 격자 형태로 나누는 눈에 보이지 않는 구조적인 가이드라인
• 마진, 컬럼, 거터같은 수학적 계산을 통해 화면을 조각내어 규칙을 만드는 작업
• 식판의 예시로 보면 밥, 국, 반찬이 섞이지 않도록 완벽한 비율로 성형된 '식판의 틀과 칸막이'

 

마진(Margin

출처 : krds

• 마진은 화면 가장자리와 콘텐츠 사이의 여백을 의미
• 적절한 마진은 답답하지 않은 화면을 만드는 데 도움.
• 인지 부하 감소  : 화면 테두리와 콘텐츠 사이에 명확한 경계가 생겨, 정보를 편하게 인지
• 손가락 오작동 방지 : 터치 기반의 모바일 환겨엥서 가장자리 근처에 위치한 요소들의 오작동을 방지
• 시선 집중 : 중요한 정보를 더 돋보이게 만듦
• large : 최소 24px, medium: 최소 24px, small : 최소 16px

 

칼럼(Column)

출처 : krds

출처 : krds

• 화면을 일정한 기준으로 나눈 세로 영역
• 디자이너는 칼럼을 기준으로 요소를 배치해 일관성을 유지
• 시각적 정렬 : 칼럼이라는 기준선이 있음으로 스크롤을 내릴 때 콘텐츠가 체계적이고 일관되게 정렬하여 배치 가능
• 시선 최적화 : 칼럼의 가로폭을 적절히 조절해야 사용자의 눈이 피로하지 않게 컨텐츠를 읽을수 있음
• large : 12~16개, medium : 8~12개, small : 4~6개

 

거터(Gutter)

출처 : krds

• 칼럼과 칼럼 사이의 간격을 의미
• 적절한 거터는 정보가 구분되어 보이도록 도와줌
• 시각적 분리 (가독성): 적절한 거터는 정보의 경계를 명확히 해줍니다.
• 화면 숨통 확보: 콘텐츠 사이에 숨 쉴 공간(여백)을 주어 사용자가 스크롤을 내릴 때 시각적인 안정감을 느낌
• large : 16~24px, medium : 16~24px, small : 16px

 

2.2 디자이너는 왜 4와 8을 사용할까?

웹이나 앱을 만들 때 디자이너들이 여백이나 컴포넌트 크기를 정할 때 아무 숫자나 쓰지 않고 4, 8, 12, 16, 24...같은 배수를 사용합니다. 디자이너가 4와 8을 사용하는 이유는 UI의 일관성, 확장성, 그리고 개발 효율성을 높이기 위해서입니다. 

4배수 그리드

• 4px 단위를 기준으로 여백과 간격을 설정하는 방식.
• 버튼 내부 패딩, 아이콘 간격 등 작은 요소를 세밀하게 조정 가능.
• 모바일 환경처럼 제한된 공간에서 유연하게 레이아웃을 구성하기 좋음.
• 8배수 그리드보다 더 세밀한 조정이 필요할 때 사용하는 보조 시스템

 

8배수 그리드

• 8px 단위를 기준으로 여백과 간격을 설정하는 방식.
• 간격 규칙이 단순해져 화면 전체의 일관성을 유지하기 쉬움.
• 개발자가 구현할 때도 규칙을 이해하고 적용하기 쉬워 협업 효율이 높아짐.
• 가장 표준이 되는 시스템, 크기, 요소 간 간격, 높이 등을 8의 배수로 설정

4와 8을 사용하는 이유

• 선명한 화면 : 스마트폰과 모니터는 종류마다 해상도가 제각각입니다. 이때 4나 8의 배수로 디자인을 하면, 어떤 화면 크기(0.5배, 1.5배,2배.3배 등)로 늘어나거나 줄어들어도 소수점(1.5px 같은 소수점 픽셀)이 생기지 않아 화면이 흐릿해지지 않고 선명하게 표현
• 완벽한 비례와 규칙성 : 칼러과 거터의 간격을 8배수로 맞추면, 그 안에 들어가는 아이콘, 버튼 높이, 글자 행간 등이 딱 맞아 떨어짐.

 

2.6 기기마다 달라지는 레이아웃

모바일

• 화면 폭이 좁기 때문에 정보를 세로로 길게 배치하는 것이 기본
• 칼럼 개수 : 보통 4~6개
• 거터 : 12~16x
• 마진 : 기기 폭 안에서 콘텐츠 숨 쉴 여백 확보 16~24px

 

태블릿

• 모바일과 웹의 중간 단계, 세로 모드와 가로 모드의 변화에 유연하게 대응
• 칼러 개수 : 보통 8개 사용
• 거터 : 16~24px
• 마진 : 16~24px

 

웹

• 가로 화면이 가장 넓음, 많은 정보를 효율적으로 구조화
• 칼럼 개수 : 12개
• 거터 16, 24, 32px(8배수 기준)
• 마진 : 가번적 또는 최소 40~80 이상

 

 

2.7 디자이너라면 반드시 알아야하는 UI 용어

Header

웹사이트의 최상단 영역으로 서비스의 첫인상을 결정하는 얼굴이자 이정표 역할

• 구성 : 기업의 로고,, 검색창, 회원가입/로그인 버튼, 다크 모드 전환 토글 등이 주로 배치
• 특징 : 사용자가 쉽게 홈으로 돌아거나 핵심 기능에 접근할 수 있도록, 스크롤을 내려도 상단에 고정되는 경우가 많음.

 

Footer

 

웹사이트 최하단 영역, 페이지의 마침표 역할을 하는 공안

• 구성 : 기업정보, 이용약관 및 개인정보처리방침 링크, 저작권표시, sns바로가기 아이콘 등
• 특징 : 사용자가 서비스의 신뢰도를 확인하거나 고객센터 정보를 찾을 때 마지막으로 확인하는 공간

 

GNB

사이트 전체에 공통으로 적용되는 최상의 메인 메뉴 목록, 보통 헤더 내부나 바로 아래에 위치

• 구성 : 홈, 제품, 고객지원 등 핵심 카테고리로 이루어짐
• 특징 : 어떤 상세 페이지로 이동하더라도 항상 같은 위치에 노출되어 사용자가 길을 잃지 않게 만듦

 

Sidebar

 

화면의 좌측이나 우측 가장자리에 세로 형태로 붙어 잇는 보조 영역

• 구성 : 하위 메뉴 리스트, 상세 필터, 광고 등
• 특징 : 메인 화면을 방해하지 않으면서 부가 기능과 빠른 탐색을 지원

---

■ 3. 화면을 그리기 전에 필요한 것, 와이어프레임

3.1 와이어프레임이란?

• 앱이나 웹사이트를 만들기 전에 그리는 설계도
• 선과 상자를 이용해 화면의 구조를 대략적으로 배치

 

MVP 고도화단계

• 로우 피델리티 : 빠르게 아이디어 스케치
• 미드 피델리티 : 기능 흐름과 구조 전달용
• 하이 피델리티 : 사용자 테스트, 개발 전달 등

 

3.2 와이어프레임은 왜 먼저 만들까?

• 구조와 기능 집중: 화려한 색상이나 디자인에 시선을 빼앗기지 않고, 버튼의 위치나 정보의 흐름 같은 본질적인 기능과 구조에 집중 가능.
• 비용과 시간 절약: 고해상도 디자인(High-Fidelity) 완성 후 구조를 바꾸려면 많은 리소스가 들지만, 와이어프레임 단계에서는 선 몇 줄만 지우고 다시 그리면 되므로 수정이 빠름.
• 원활한 의사소통: 기획자, 디자이너, 개발자, 클라이언트가 동일한 화면 구조를 공유하며 "여기에 이 기능이 들어가는군요"라고 직관적으로 소통 가능.
• 사용성 검증: 실제 디자인이나 개발에 들어가기 전, 유저가 이 화면 흐름에서 불편함을 느끼지 않을지 미리 시뮬레이션(검증)할 수 있음.

 

3.3 좋은 와이어프레임과 아쉬운 와이어프레임

구분	좋은 와이어프레임	아쉬운 와이어 프레임
디자인 요소	흑백과 회색조로 심플하게 표현함	색상이나 화려한 폰트를 넣어 시선을 분산시킴
목적성	정보의 우선순위와 기능이 명확히 보임	실제 들어갈 텍스트나 기능 정의가 모호함
정렬	그리드와 배수 시스템에 맞춰 정돈됨	선과 상자가 비뚤배뚤하여 레이아웃이 흐려짐

 

 

레이아웃 구조 팁: Tabs vs Bottom Navigation

화면 내 네비게이션 구조를 짤 때 가장 많이 고민하는 두 가지 레이아웃의 핵심 차이점입니다.

 

Tabs

• 용도: 동등한 성격을 가진 콘텐츠나 카테고리를 평면적으로 전환하며 보여줄 때 유용. (예: 네이버 패션/뷰티, 리빙 탭)

 

Bottom Navigation 

• 용도: 앱의 가장 핵심적인 메인 메뉴(3~5개)를 배치합니다. 엄지손가락이 가장 잘 닿는 영역이기 때문에, 기기 전환이나 핵심 기능 이동 시 필수적으로 사용. (예: 토스, 인스타그램 하단 아이콘 바)

 

 

11일차 내용을 드디어 정리했어요!!! 제가 요즘 다른 프로젝트 준비하고 수업내용 복습하고 하느라 짬내서 적느라 시간이 정말 정말..부족해요... 저도열심히 쓰고 싶은데!!!! 그래도 남은 차수들도 꾸준히 작성해보겠습니다!!! 오늗도 유익한 시간을 보내시길 바래요~!!!