[디자이너 부트캠프] 12일차 UI디자인을 위한 설계 (와이어프레임과 워크플로우)

 

[디자이너 부트캠프] 12일차 UI디자인을 위한 설계

 

 

 

 

“디자이너로서 당신이 디자인하는 모든것이 사람들의 삶에 영감을 준다는것을 기억하라”

- 다니엘 보야스키

 

 

 

피곤하다.... 진짜 피곤하다......못 잔 것도 아닌데 어떻게 이렇게까지 피곤할수가....

오늘은 진짜 운동하고 자야겠다....

사실 어제 다른 못 한 과제들을 업로드 하느라 레퍼런스를 많이 찾아보지 못해서 아쉬웠다.

오늘은 좀 집중해서 레퍼런스도 찾고 와이어프레임도 짜고...해야쥐...

나자신 오늘도 화이팅..!

 

 

 

 

---

 

강의노트

---

 

 

UI 설계란? 

 

: UI (User Interface)는 사용자가 제품과 상호작용하는 시각적 요소

: 단순한 화면 디자인이 아닌 사용자가 제품을 쉽게 이해하고 사용할 수 있도록 계획하는 과정

 

<https://wwit.design/ >

 

 

UI 설계에서 중요한 것

 

1) 사용자 중심 설계 : 사용자의 행동 패턴을 이해하고, 직관적인 인터페이스를 제공해야함

출처 : 슥삭

 

 

2) 디자인 일관성 : 버튼 크기, 컬러, 타이포그래피 등 일관된 스타일가이드 필요

기본적인 디자인 시스템 예시 출처: https://www.figma.com/community/file/874766871676128442

 

 

3) 정보 구조화 : 기능을 체계적으로 정리 / 정보가 논리적인 흐름을 가지도록 함

강의자료 캡쳐

 

 

 

 

UI 설계 과정

 

 

사용자 리서치 - 정보 구조화 (IA) - 와이어프레임 - 워크 플로우 - 프로토타임 - UI 디자인 완성

> 제품이나 서비스를 사용하는 사용자의 행동, 동기, 니즈 등을 조사하는 활동

 

 

 

 

사용자 리서치 - 정보 구조화 (IA) - 와이어프레임 - 워크 플로우 - 프로토타임 - UI 디자인 완성

> 정보를 구조화 함(Information Alchitecture)

<ex) 네이버 뮤직 IA 정보설계>

 

 

 

 

 

사용자 리서치 - 정보 구조화 (IA) - 와이어프레임 - 워크 플로우 - 프로토타임 - UI 디자인 완성

 

와이어프레임이란?

> UI 디자인의 초기 설계도

> 기능배치와 화면 구조를 시각적으로 표현

> 컬러, 폰트, 이미지 없이 기능과 정보 배치 중심

강의자료

 

 

와이어프레임의 필요성(장점)

> 디자인을 시작하기 전 기능과 구조를 먼저 정리해 효율적인 UI 개발을 가능하게 함

> 팀원(기획자, 개발자) 간의 원활한 커뮤니케이션 가능

> 초기 설계 단계에서 오류를 발견 / 개선할 기회 제공

 

 

와이어프레임 작성 방법

1) Low-Fidelity : 빠르게 손으로 그린 스케치(종이, 화이트보드)

2) High-Fidelity : 디지털 도구를 사용한 정교한 와이어프레팀 (Figma, adobe XD, Balsamiq)

(좌) 그릿지 블로그 참조 / (우) 어도비 블로그 참조

 

 

 

와이어프레임 제작 프로세스 (ex. 배달 서비스)

 

① 페이지 목록 정리 : 어떤 화면이 필요한지 리스트업

 

필요한 주요 화면

1. 온보딩 화면 – 앱 사용법 안내, 위치 권한 요청
2. 로그인/회원가입 화면 – 이메일/소셜 로그인, 주소 등록
3. 메인 화면 (홈) – 배달 음식 리스트, 검색 및 필터 기능
4. 음식점 상세 화면 – 가게 정보, 메뉴 리스트, 리뷰 확인
5. 장바구니 화면 – 선택한 음식 목록, 결제 진행 버튼
6. 결제 화면 – 결제 방식 선택(카드, 네이버페이 등), 쿠폰 적용
7. 주문 내역 화면 – 주문 진행 상태 확인 (접수됨 → 배달 중 → 도착)
8. 마이페이지 화면 – 주소 관리, 결제 수단, 리뷰 작성, 고객센터

 

② 핵심 기능 정의 : 각 화면에서 사용자가 수행해야 할 작업 정리

 

4. 음식점 상세 화면

    음식점 기본 정보(이름, 평점, 운영시간) 확인

    메뉴 선택 후 장바구니에 담기

    리뷰 및 별점 확인 가능

    최소 주문 금액 및 배달비 안내

    "장바구니 담기" 버튼 클릭 시 장바구니 화면으로 이동

 

 

③ 요소 배치 : 버튼, 텍스트, 이미지 등 기능 요소 배치

3. 메인 화면 (홈)

    > 상단 : 현재 위치 및 검색 바 

                 (📍 ‘서울 강남구’ 🔍 ‘음식 검색’)

    > 카테고리 메뉴

     : 🍕 한식 | 🍔 양식 | 🍣 일식 | 🍜 중식 | 🍰 디저트 | ☕ 카페

    > 추천 음식점 리스트 (카드 형식)

       : 가게 썸네일

       : 가게 이름, 평점, 최소 주문 금액, 배달비

       : "🔥인기" 또는 "🚀빠른 배달" 등 태그 표시

    > 하단 네비게이션 바 :  🏠 홈

                                        🔍 검색

                                        🛒 장바구니

                                        📦 주문 내역

                                        👤 마이페이지

 

 

④ 사용자 흐름 고려 : 다음 화면으로 이동하는 경로와 인터랙션 정의

사용자 시나리오 – "배달 음식 주문하기"

1. 앱 실행 → 온보딩 화면 (위치 권한 요청)
2. 로그인/회원가입 화면에서 주소 입력 후 메인 화면 이동
3. 메인 화면에서 음식점 검색 또는 추천 리스트에서 선택 → 음식점 상세 화면 이동
4. 메뉴 선택 후 "장바구니 담기" 클릭 → 장바구니 화면 이동
5. 장바구니에서 "결제하기" 클릭 → 결제 화면 이동
6. 결제 방식 선택 후 "결제 완료" 버튼 클릭 → 주문 내역 화면 이동
7. 실시간 배달 상태 확인 (🚀 "배달 중" → 🏠 "배달 완료")

 

 

좋은 와이어 프레임의 조건

 

: 사용자가 직관적으로 이해할 수 있는 간결한 레이아웃

: UI 요소들의 논리적인 배치로 명확한 정보구조

: 불필요한 장식 없이, 기능과 흐름에 집중

 

 

 

 

사용자 리서치 - 정보 구조화 (IA) - 와이어프레임 - 워크 플로우 - 프로토타임 - UI 디자인 완성

 

워크플로우란?

: 사용자가 서비스를 이용하는 전체 흐름을 시각적으로 표현한 것

: 와이어프레임이 개별 화면의 구조라면, 워크플로우는 화면 간 이동과 사용자 흐름을 정의

<위키미디어 개발자 워크플로>

 

 

워크플로우 작성의 중요성

: 사용자가 어떤 경로로 이동하는지 파악 가능

: 버튼을 누르면 어디로 이동하는 지 등의 사용자 행동 예측

: UI 디자인과 개발 과정에서 논리적인 구조 제공

 

 

 

워크플로우 작성 방법

1) 핵심 사용자 흐름 정의 : 로그인, 회원가입, 상품 구매 등 주요 시나리오 정의

2) 화면 간 연결 설정 : 버튼 클릭 > 다음 화면으로 연결되는 방식 명확화

3) 예외 상황 정의 : 사용자의 입력 오류시, 오류 메세지가 어떻게 처리 될 것인가 

 

① 핵심 사용자 흐름 정의 : 주요 시나리오 정리

 

사례 1 : 모바일 쇼핑 앱의 사용자 흐름 (상품 구매 과정)

사용자가 쇼핑 앱에서 상품을 구매하는 과정을 정의합니다.

1. 홈 화면 → 사용자 로그인 상태 확인
2. 상품 검색 → 사용자가 키워드 입력 또는 카테고리 탐색
3. 상품 상세 페이지 → 상품 설명, 가격, 리뷰 확인
4. 장바구니 추가 → 수량 선택 후 장바구니 담기
5. 결제 진행 → 배송 정보 입력 및 결제 방법 선택
6. 주문 완료 → 결제 성공 후 주문 확인 화면으로 이동

💡 핵심 요소:

• 사용자가 원하는 상품을 빠르게 찾고, 결제까지 최소한의 클릭 수로 진행할 수 있도록 설계
• 결제 단계에서 할인 쿠폰 적용 기능 추가

 

사례 2 : 금융 앱에서 회원가입 프로세스

1. 앱 실행 → 회원가입 또는 로그인 선택
2. 이메일 또는 휴대폰 번호 입력
3. 본인 인증 (SMS 또는 이메일 인증 코드 입력)
4. 비밀번호 설정 및 개인 정보 입력
5. 약관 동의 후 가입 완료

💡 핵심 요소:

• 보안 강화를 위해 이중 인증(2FA) 적용
• 사용자가 입력을 간소화할 수 있도록 자동 입력 추천 기능 제공

 

② 화면 간 연결 설정 : 버튼 클릭 → 다음 화면으로 이동하는 방식 명확화

 

사례 1 : 음식 배달 앱에서 주문하기 버튼 연결

1. 사용자가 음식 메뉴를 선택하고 '장바구니 담기' 버튼 클릭
   → 장바구니 화면으로 이동
2. 장바구니에서 '결제하기' 버튼 클릭
   → 결제 화면으로 이동
3. 결제 완료 후 '주문 확인' 버튼 클릭
   → 주문 상태 화면으로 이동

💡 핵심 요소:

• '이전 화면으로 돌아가기' 기능을 추가해 사용자가 자유롭게 탐색 가능
• 결제 완료 후 '배달 예상 시간'을 표시하여 사용자 만족도 향상

 

사례 2 : 헬스케어 앱에서 운동 루틴 설정 연결

1. 사용자가 운동 목표 선택 (근력 강화, 유산소 등)
   → 추천 운동 루틴 화면으로 이동
2. 루틴 선택 후 '시작하기' 버튼 클릭
   → 운동 수행 화면으로 이동
3. 운동 완료 후 '결과 저장' 버튼 클릭
   → 운동 기록 화면으로 이동 (이전 운동 데이터 비교 가능)

💡 핵심 요소:

• 운동 수행 중 사용자가 중간에 중단할 경우 데이터 저장 여부 확인 팝업 추가
• 사용자 맞춤형 추천 운동 기능 추가

 

③ 예외 상황 정의 : 오류 메시지 처리 방식

 

사례 1 : 로그인 실패 처리 (비밀번호 오류 시)

1. 사용자가 로그인 시 잘못된 비밀번호 입력
   → "비밀번호가 일치하지 않습니다. 다시 입력해주세요." 오류 메시지 표시
2. 3회 연속 실패 시
   → "비밀번호를 잊으셨나요?" 버튼 활성화 + 비밀번호 재설정 페이지 연결
3. 사용자가 5분 내에 다시 로그인 시도할 경우
   → "보안상의 이유로 잠시 후 다시 시도해주세요." 메시지 표시 + 로그인 제한 5분 적용

💡 핵심 요소:

• 사용자가 비밀번호를 잘못 입력할 경우 즉각적인 피드백 제공
• 보안 강화를 위해 일정 횟수 이상 실패 시 로그인 제한 기능 추가

 

사례 2 : 쇼핑몰 결제 오류 처리 (카드 결제 실패 시)

1. 사용자가 카드 결제 시 카드 한도 초과 또는 정보 오류 발생
   → "결제 실패: 한도를 초과했거나 카드 정보가 올바르지 않습니다." 메시지 표시
2. 결제 실패 후
   → "다른 결제 수단을 선택하시겠습니까?" 팝업 표시 (신용카드, 카카오페이 등)
3. 사용자가 결제 수단을 변경하고 다시 시도
   → 결제 성공 후 주문 확인 페이지 이동

💡 핵심 요소:

• 결제 실패 시 사용자에게 명확한 이유 제공 (예: 카드 한도 초과, 보안 인증 실패 등)
• 사용자가 즉시 다른 결제 수단을 선택할 수 있도록 옵션 제공

 

사례 3 : 파일 업로드 기능 오류 (클라우드 서비스)

1. 사용자가 대용량 파일(예: 2GB 이상)을 업로드 시도
   → "파일 크기가 너무 큽니다. 1GB 이하의 파일을 업로드해주세요." 메시지 표시
2. 파일 업로드 도중 인터넷 연결이 끊긴 경우
   → "네트워크 오류 발생. 연결을 확인한 후 다시 시도해주세요." 메시지 표시
3. 동일한 파일을 중복 업로드할 경우
   → "이 파일은 이미 업로드되었습니다. 중복 업로드를 방지하려면 파일 이름을 변경해주세요." 메시지 표시

💡 핵심 요소:

• 파일 크기 제한을 초과하면 사용자에게 사전에 알림 제공
• 네트워크 오류 발생 시 업로드 자동 재시도 기능 추가

 

워크플로우 작성 단계별 사례 요약

 

 

 

워크플로우 예시 (앱 로그인 프로세스)

 

사용자 앱 실행

> 로그인 화면 → 아이디, 비밀번호 입력

> 로그인 성공 → 메인 화면 이동

> 로그인 실패 → 오류 메시지 출력

> ‘비밀번호 찾기’ 클릭 → 비밀번호 재설정 화면 이동

 

 

좋은 워크플로우의 조건

 

: 사용자가 자연스럽게 이동할 수 있도록 명확한 흐름 제공

: 불필요한 단계 제거 > 최적화된 경험 설계

: 예외 상황을 고려한 다양한 플로우 제공

 

 

실제 사례 분석 및 정리

 

쿠팡 워크플로우 설계 방식

 

 

배달의 민족 워크플로우 설계 방식 

<https://brunch.co.kr/@jhw28/32 해원 브런치 참조>

 

 

 

 

 

 

 

 

<IA(정보구조화) vs 워크플로우>

 

IA = Depth(화면)를 파악할 때 용이

워크플로우(플로우 차트) =  전체적인 서비스의 동선과 흐름을 파악할 때 용이

 

>> IA가 전체적인 틀이고 워크플로우가 안에들어가는 흐름의 내용..!

 

와이어프레임 : 대충 그린 스케치같이.. 이게 이런 페이지야..를 보여주는 것

플로우챠트 : 이거 담에 이거 오고.. 그거 담에 저거 오고.. 를 짜는것

 

 

 

 

https://hello-woody.tistory.com/14

플로우 차트 의미와 종류

https://www.behance.net/gallery/195965519/_?tracking_source=search_projects|UXUI+%EB%94%94%EC%9E%90%EC%9D%B8+%EC%95%B1+%ED%8F%AC%ED%8A%B8%ED%8F%B4%EB%A6%AC%EC%98%A4&l=38

레츠위밍! 수영 커뮤니티 앱 서비스 - JU EUN RYU

 

https://velog.io/@rlatjdgh9612/UIUX-%EC%A0%95%EB%B3%B4%EA%B5%AC%EC%A1%B0-%EA%B8%B0%EB%8A%A5%EC%A0%95%EC%9D%98%EC%84%9C-%EC%99%80%EC%9D%B4%EC%96%B4%ED%94%84%EB%A0%88%EC%9E%84

UI/UX - 정보구조(I.A) & 기능정의서 & 와이어프레임

 

 

---

 

오늘의 과제

선정 서비스의 와이어프레임 및 워크플로우 설계

---

 

1) 와이어프레임 실습

토스 홈화면 >> 내 계좌 >> 계좌 채우기 까지의 화면을 와이어프레임으로 만들었다. 와압,,진짜 시간 많이 걸려,,,, 

토스뱅크 와이어프레임 실습

토스뱅크 UI

 

 

2) IA작성

 

일단 감을 좀 잡을 겸 버튼 구조를 먼저 정리해보았다. 토스 앱의 전체 메뉴는 아니고 크게 내계좌, 내소비 두 메뉴만 가지고 왔다.

 

토스 홈 >> 내 계좌 >> 계촤 채우기

                              >> 송금하기

            >> 내 소비 >> 편집

                              >> 내역 더 보기 >> 거래내역 추가하기

                                                       >> 숨긴 내역

                                                       >> 상세 내역  >>  더치페이 하기

ia 작성 (피그마 캡쳐)

 

 

3) 플로우 차트 작성

ia바탕으로 플로우 차트 작성

플로우 차트

얼레벌레 만들어 보긴 했는데 이게 맞나... 싶고 그렇다.. 

플로우 차트 레퍼런스들 많이 찾아봐야겠다..!!!

화이팅이지 뭐..