디자이너 맥신, 성장일기

목차
01. UX 기획 첫 단추 : 문제 정의 및 가설 수립
02. UX 기획 구체화 : 유저 사용 맥락 반영
03. UX 기획 구체화 : 논리적인 흐름 설계
04. UX 기획 문서화 : 화면 설계서 및 QA 문서

논리적인 흐름을 설계할 수 있는 방법론

1️⃣ 유저플로우 #화면 간의 이동
2️⃣ 와이어 프레임 #Lo-fi #아이디에이션
3️⃣ 정보 구조도 #그룹핑 #라벨링

정해진 순서는 없다. 유저 플로우와 와이어 프레임은 디자이너 개개인마다 선호도가 있어서 유저 플로우를 먼저 작업하는 것을 선호하는 디자이너도 있고 와이어 프레임을 먼저 작업하는 것을 선호하는 디자이너도 있다.

플로우를 먼저 설계한 다음에 화면에 뭐가 들어갈 건지 고민하는 디자이너가 있고, 화면에 뭐가 들어갈 건지 생각해 본 다음에 플로우를 구성하는 것을 선호하는 디자이너도 있다.

1) 유저 플로우 (User Flow)

유저가 제품이나 서비스를 이용하는 과정을 유저의 행동 및 화면 간의 이동에 초점을 맞추어 시각화하는 단계.

• 유저가 최종 목표에 도달하기 위해 서비스 내에서 어떤 경로로 이동하며, 어떤 행동을 하는지 구체화하는 도구로 활용할 수 있다.
  
  
• ‘해피 패스’에 매몰되지 않고 다양한 경로를 고려해볼 수 있다는 장점이 있다.
  
  해피 패스(Happy Path)
  유저가 제품이나 서비스에서 원하는 목적지까지 아무런 문제를 겪지 않고 도달했을 때의 경로
  
  
• 유저 플로우와 와이어프레임은 상호보완적인 도구로 활용할 수 있으며, 작업에 정해진 순서가 있는 것은 아니다.
  
  
• 유저 플로우 구성 요소

✅ 원형 : 시작/끝 프로세스의 시작이나 끝

✅  사각형 : 동작/프로세스 유저의 입력이나 액션

✅  마름모 : 조건 특정한 조건이나 결정 지점을 표현, 여기서 유저의 행동이나 시스템의 상태에 따라 플로우가 여러 가지로 나뉠 수 있다.

✅  화살표 : 플로우의 방향 한 상태나 단계에서 다음 상태나 단계로의 흐름을 표현

☘️ 유저 플로우 예시
유저가 로그인 시도 시 소셜 로그인 및 이메일 로그인을 했을 때 경험할 수 있는 플로우를 도식화한 예시

TIP)
화면, 유저 액션, 시스템 액션, 모달의 경우 색상으로 구분하여 이해를 높일 수 있다.

• 화면 : 유저와 시스템의 상호작용이 발생하는 공간
• 유저 액션 : 유저가 화면에서 수행하는 행동 또는 입력
• 시스템 액션 : 유저의 행동에 의한 응답으로 시스템이 수행하는 동작
• 모달 : 특정 상황이나 유저의 행동에 대한 부가 정보나 선택지 제공

유저가 상품을 탐색하고 결제하기까지의 플로우를 도식화한 예시

2) 와이어프레임 (Wireframe)

화면의 레이아웃과 플로우를 단순한 선과 도형으로 설계하는 과정.

• 로우 피델리티(Lo-fi)로 작업되어 작업자들이 부담 없이 아이디어에 자유롭게 참여하고 의사결정에 기여할 수 있도록 도와주는 도구로 활용할 수 있음.
• 그래픽 요소 및 기술적인 세부사항을 배제하고 신속하게 결과물을 생성하여 작업자 간 커뮤니케이션을 위한 초기 비주얼을 제공할 수 있다는 장점이 있다. (화면 그릴 때, 그래픽 요소나 기술적으로 구현이 구현이 가능할지 혹은 디자인시스템에 맞는 건지 등 생각보다 고려할 것이 많은데, 이런 걸 다 빼고 신속하게 결과물을 생성할 수 있다.)
• 변경되는 요구 사항에 대응하여 빠르게 구조를 검토하고 수정하기가 용이하다.
• 논의의 초점을 (그래픽적으로 이게 유려한가 혹은 기술적으로 구현이 가능한가를 배제하고) 레이아웃과 플로우에 집중되도록 최소한의 색과 디자인을 사용하여 작업한다.
• 와이어프레임에 화면 이동에 대한 정보를 추가했을 때는 ‘와이어 플로우(Wire Flow)’라고 부르기도 한다.

☘️ 와이어프레임 예시

와이어프레임은 종이에 손으로 그리는 타입부터, 디자인 툴에 작업하는 타입까지 다양한 피델리티로 작업할 수 있다.

• 신속하게 제작하고 손쉽게 수정할 수 있다.
• 회의 중 간단한 종이나 보드에 함께 스케치하면서 아이디어를 즉각적으로 공유하고 토론하기 용이하다.
• 손으로 그리는 과정 중에 아이디어를 발산하기 용이하다.

• 손으로 그린 와이어프레임보다 비교적 정확하고 일관된 와이어프레임을 만들 수 있다.
• 디자인 툴로 작업한 경우 링크를 공유하여 피드백을 받기 용이하다.
• 물리적으로 같은 공간에 있지 않더라도 실시간으로 함께 작업하는 것이 가능하다.

3) 정보 구조도 (Information Architecture)

제품이나 서비스를 구성하는 요소들의 구조를 도식화하는 것으로, 유저가 길을 잃지 않고 원하는 정보를 쉽게 찾고 작업을 완료할 수 있도록 돕는 과정

• 유저가 자신의 현재 위치와 다음 장소로 가기 위해 무엇을 해야할 지 인지할 수 있도록 설계할 때 활용
• 정보 구조가 효과적으로 설계될 경우 유저의 접근성이 향상되지만, 부적절하게 설계될 경우 유저의 이탈과 오류를 발생시킬 수 있다.
• 상위와 하위 개념을 효과적으로 그룹핑하고 올바른 라벨링을 하는 것이 중요하다.
  
  
• 정보 구조도의 기반이 되는 구성 요소

✅ Organization : 조직 및 구성 시스템
목적 - 정보를 체계적으로 정리하고 구성하기
예시 - 웹사이트의 메뉴 계층 구조, 콘텐츠 그룹화, 상위 및 하위 카테고리화

✅ Labeling : 라벨링 시스템
목적 - 정보를 명확하고 이해하기 쉽게 표현하기
예시 - 메뉴 항목의 명칭, 버튼 레이블, 카테고리명

✅ Navigation : 내비게이션 시스템
목적 - 유저가 정보를 찾고 이동함
예시 - 웹사이트의 메뉴 바, 내비게이션 바

✅ Searching : 검색 시스템
목적 - 유저가 원하는 정보를 검색하여 찾기
예시 - 웹사이트의 검색 기능, 검색 결과 페이지, 필터 및 정렬 옵션

☘️ 정보 구조도 예시

정보 구조도는 비슷비슷하게 보이지만, 반드시 지켜야 하는 형태가 있지 않다.
때문에 프로젝트 성격과 상황에 따라 맞춰서 적용하는 것을 추천한다.

✅ Organization 예시 :
화해 쇼핑 이벤트 페이지 내 콘텐츠들이 어떻게 그룹화되어 있는지 도식화한 예시

✅ Labeling 예시 :
화해 쇼핑의 카테고리 구조를 도식화한 예시

✅ Navigation 예시 :
화해의 바텀 내비게이션 구조를 도식화한 예시

✅ Searching 예시 :
화해 쇼핑의 검색 기능을 도식화한 예시

화면의 구성과 흐름을 매우 단순하게 만들어 빠르게 공유하는 와이어프레임!!

화면과 시나리오를 최대한 단순한 형태로 만들어서 빠르게 만든 것을 뜻한다.

.

• 와이어프레임 = 선(와이어)으로 그려진 화면.
• 어떻게 만들지 논의하는 과정을 거치고 나면, 본격적인 디자인을 하기 전에 주로 하게 된다.
• 낮은 단계의 프로토타입이라는 뜻에서 Lo-fi Prototype 이라고 부르기도 함.
• 전체적으로 형태와 방향을 먼저 잡는 것.

와이어프레임을 만드는 이유

👪 팀원 간의 다른 생각을 통일할 수 있고 협업을 원활하게 한다.

글로 된 문서만 보고 디자인과 개발을 하게 되면, 서로 생각이 조금씩 달라서 문제가 생길 수 있다. 아무리 단순한 디자인이더라도 화면의 형태를 같이 보면서 이해가 다른 부분을 줄일 수 있다.

 🎨 디자인을 관리하기 쉽고, 불필요한 부분에 시선을 뺏기지 않는다.

처음부터 너무 완성된 UI로 작업하게 되면 중요한 사용자 시나리오에 집중하기 어렵고, 디자인 변경이나 수정할 때 빠르게 변경하기 힘들다. 최대한 단순한 형태로 중요한 흐름만 만든다면 집중하기도 좋고, 디자인 방향을 조금씩 잡아가면서 완성도를 끌어올릴 수 있다.

⭐ 습관 형성 모델을 반복적으로 실험해 볼 수 있어요

와이어프레임을 만드는 이유 중 가장 중요한 것은, 참여 전략과 북극성 지표를 토대로 설계한 습관 형성 모델이 잘 작동할 수 있는지를 확인하는 것이 필요하기 때문. 습관이 형성될 수 있도록 사용자 시나리오를 작성하고, 와이어프레임을 통해 그 과정이 매끄러운지, 부족한 건 없는지를 빠르게 검증해 볼 수 있다.

와이어프레임을 그리는 법

와이어프레임의 목적은 빠르고 효율적인 커뮤니케이션과 일관된 디자인 방향이다. 최소한의 가독성만 확보 (글씨가 읽혀지면 됨) 하고 서로 이해할 수만 있다면 어떤 방식을 사용해도 좋다.

와이어프레임 규칙 정하기

• 와이어프레임에서 표현할 것과 표현하지 않을 것을 과감하게 고르기.
• 최대한 단순하고 빠르게 그릴 수 있도록 단색의 선을 사용하는 것을 권장.

그리고자 하는 화면 스케치하기

• 최대한 단순하게 그리는 게 핵심
• 시나리오에 필요하지 않은 부분은 과감하게 글자나 단순한 도형으로 대체
• 텍스트의 경우 최대 길이를 가늠할 수 있도록 실제 사용할 내용으로 넣어주면 좋다

와이어프레임의 핵심

세세한 부분들을 그리지 않아도 전체적인 모양과 구조를 이해하는 데는 문제가 없다는 걸 알 수 있다. 이렇게 대략적인 형태를 잡은 상태에서 사용자 시나리오를 테스트하고 논의하다 보면, 시나리오에서 보완해야 할 부분도 찾을 수 있고 앞으로의 결과물이 어떤 형태가 되겠다는 걸 팀원들이 서로 이해할 수 있다.

화면을 선으로 연결하는 이유

와이어프레임으로 만든 화면들을 선으로 연결하는 이유는 화면들이 어떤 관계로 이어져 있는지 파악하기 위함이에요. 디자인과 레이아웃을 단순하게 만들어 각 화면들이 어떻게 연결되어 있는지, 이 화면에서 저 화면으로 이동하려면 어떤 동작을 하게 되는지를 알기 쉽도록 선으로 연결하는 거랍니다!

🔌 플러그인 소개 : Simpleflow
프레임끼리 선으로 연결할 수 있는 플러그인