DAY+12 [ 서비스 디자인 기획 ]

안녕하세요, 주-주스 입니다! 🍹

 

:.✨٩(๑>◊<๑)۶:.｡+✨
✺!~ 캠프 12일차  ~!✺

*ϵ(っꈍᗜꈍς)϶

 

오늘은!! 

UIUX 서비스 디자인 기획/ 서비스 디자인 기획의 이해, 사용자 시나리오, 정보 구조 설계 (IA), 와이어프레임을 포스팅하겠습니다!

 

---

서비스 디자인 기획

1. 문제 발견

이 단계는 사용자의 불편함을 찾아내고, 해결할 문제를 구체화하는 과정입니다.

• 문제점 수집:
  • 사용자가 서비스를 이용하면서 겪는 불편함, 즉 !!페인 포인트(Pain Point)!!를 찾아 UX 디자인 관점에서 분석합니다.
  • '왜' 불편했는지를 중심으로 구체적인 사례를 정리하고, 주변 사람들과 공감대를 형성할 수 있는 이슈들을 모읍니다.
  • 최소 10~30개 정도의 이슈를 수집하는 것이 효과적입니다.
• 주제 선정:
  • 수집된 문제점들에서 공통점을 찾아내거나, 해결 가치가 높은 문제를 중심으로 기획의 주제를 선정합니다.
  • 예시: 일상적으로 사용하는 스마트폰 서비스(대중교통, 식사 등)와 관련된 주제.
• 현황 파악:
  • 선정한 주제에서 문제가 발생하는 근본적인 원인을 파악하는 단계입니다.
  • 인터넷 리서치를 통해 관련 자료를 조사하고, '왜(Why)'라는 질문을 통해 문제의 원인을 심층적으로 분석합니다.

---

2. 문제 정의 및 가설 설정

이 단계는 발견한 문제를 바탕으로 해결책을 구체화하고, 사용자 시나리오를 설계하는 과정입니다.

• 가설 설정 및 프로젝트 정의:
  • 해결하려는 핵심 문제를 정의하고, 서비스를 제공하는 목적을 설정합니다.
  • 프로젝트 정의에서는 해결하고자 하는 문제와 제공할 서비스에 대한 간략한 요약과 설명을 작성합니다.
  • 고려 사항: '현황 파악'을 통해 정의한 핵심 문제와 '제품/서비스 소개 및 설명 요약'이 포함되어야 합니다.
  • 예시: 핫플레이스의 긴 웨이팅 시간을 해결하는 예약 및 웨이팅 앱 서비스, '테이블링'.
• 사용자 시나리오 및 페르소나 설정:
  • 사용자 여정: 사용자가 서비스를 경험하는 단계를 시간 순서대로 작성합니다.
    • 예시: 오븐 구매 여정 ('인터넷 검색' > '제품 선택' > '가격/성능 비교' > '후기 검색').
  • 페르소나 설정: 가상의 인물인 페르소나를 만들어 서비스가 필요한 사용자를 구체화합니다.
    • 나이, 성별, 직업 등 기본적인 프로필은 물론, 성격, 환경, 목표, 습관 등을 상세하게 묘사하여 페르소나를 설정합니다.
    • 예시: 김이랑, 27세.
• 정보 구조 설계:
  • 테스크 플로우(Task Flow):
    • 사용자 시나리오를 바탕으로 사용자가 목표를 달성하기 위한 행동들을 순서대로 정리합니다.
    • 대부분 선형 구조로 작성되며, 각 단계에 레이블을 붙여 사용자의 흐름을 명확하게 보여줍니다.
    • 예시: '로그인' > '홈 메인' > '검색' > '평점 및 후기'.
  • 페이지 플로우(Page Flow):
    • 테스크 플로우의 각 단계에 필요한 화면이나 기능을 작성합니다.
    • 예시: '검색' 단계에는 '검색 리스트', '후기별 추천' 등의 화면이 포함될 수 있습니다.
• 플로우 차트:
  • 테스크 플로우와 페이지 플로우를 통합하여 사용자 흐름을 한눈에 볼 수 있는 차트입니다.
  • '회원가입'과 '로그인' 같은 구체적인 시나리오를 예시로 들어, 사용자의 행동에 따른 화면 전환과 시스템 알림 등을 상세하게 보여줍니다.

 

---

심화!!

테스크 플로우는 단일 작업에 초점을!
페이지 플로우 (워크 플로우)는 사용자의 여정에 초점을!

 

테스크 플로우 (Task Flow) 가로

테스크 플로우는 사용자가 특정 목표를 달성하기 위해 거치는 일련의 행동을 순서대로 정리한 것입니다. '사용자의 행동'에 초점을 맞추는 것이 핵심입니다.

• 관점: 사용자 관점에서 "무엇을 하려는가?"에 대한 답을 찾는 과정입니다.
• 구성 요소: 사용자의 목표와 그에 따른 행동 단계를 '로그인', '검색', '상품 구매'와 같이 간단한 레이블로 표현합니다. 복잡한 화면 구성이나 UI 요소는 포함하지 않습니다.
• 주요 목적: 사용자가 목표를 달성하기 위한 가장 단순하고 효율적인 경로를 파악하고, 사용자 여정의 큰 그림을 그리는 데 사용됩니다. 서비스의 핵심 기능을 설계할 때 유용합니다.

예시:

'맛집 예약'이라는 목표를 가진 사용자를 위한 테스크 플로우는 다음과 같이 단순하게 구성될 수 있습니다.

1. 시작: 앱 실행
2. 행동 1: 로그인
3. 행동 2: 검색
4. 행동 3: 식당 선택
5. 행동 4: 예약
6. 행동 5: 결제
7. 종료: 예약 완료

---

페이지 플로우 (Page Flow) 옳고그름에 멈춰있지 말고 일단 GO ! / 세로

페이지 플로우는 테스크 플로우를 기반으로, 각 단계에서 사용자가 경험하게 되는 화면들을 구체적으로 시각화하는 것입니다. 즉, '사용자 행동'에 따른 '화면의 흐름'을 보여줍니다.

• 관점: 시스템 관점에서 "사용자의 행동에 따라 어떤 화면을 보여줄 것인가?"에 대한 답을 찾습니다.
• 구성 요소: 각 단계를 실제 서비스 화면의 이름이나 기능(예: '홈 화면', '검색 결과 화면', '결제 확인 팝업')으로 세분화하여 보여줍니다.
• 주요 목적: 서비스의 전체적인 화면 구조와 내비게이션을 설계하는 데 사용됩니다. 정보 아키텍처(IA)를 구체화하는 초기 단계에서 매우 유용합니다.

예시:

위의 '맛집 예약' 테스크 플로우를 페이지 플로우로 확장하면 다음과 같이 됩니다.

1. 로그인 페이지 →
2. 홈 화면 (추천 리스트) →
3. 검색 결과 화면 (필터링 옵션) →
4. 식당 상세 정보 페이지 (메뉴, 리뷰) →
5. 예약 날짜/시간 선택 화면 →
6. 예약 확인 팝업 →
7. 결제 화면 →
8. 예약 완료 화면

---

플로우 차트 (Flow Chart) 워크 플로우

플로우 차트는 테스크 플로우와 페이지 플로우를 통합하여, 사용자의 모든 가능한 경로와 상황별 분기점을 시각적으로 나타내는 포괄적인 다이어그램입니다. 특정 목표 달성 과정에서 발생할 수 있는 '예외적인 상황'이나 '조건'을 상세히 보여줍니다.

• 관점: 디테일한 시스템 로직과 사용자 인터랙션의 모든 경우의 수를 다룹니다.
• 구성 요소:
  • 시작/종료 : 타원형 (Start/End)
  • 행동/과정 : 사각형 (Process)
  • 결정/분기 : 마름모꼴 (Decision, 예: '로그인 성공?' '회원?' 등)
  • 데이터/입력 : 평행사변형 (Data)
  • 연결선 : 화살표
• 주요 목적: 시스템의 로직을 명확하게 정의하고, 개발자와의 협업을 원활하게 합니다. 사용자가 어떤 선택을 했을 때, 시스템이 어떻게 반응해야 하는지를 상세하게 설계할 때 사용됩니다. 신규 회원 가입, 비밀번호 찾기 등 복잡한 과정을 설계할 때 특히 효과적입니다.

예시:

'로그인' 과정을 플로우 차트로 만들면, '회원'과 '비회원'의 분기점, '비밀번호 입력 오류' 시의 처리 등 다양한 상황을 담을 수 있습니다.

1. 시작 (타원)
2. ID/PW 입력 (평행사변형)
3. ID/PW 체크 (사각형)
4. 로그인 성공 여부? (마름모꼴)
   • Yes → 메인 화면 이동 (사각형) → 종료 (타원)
   • No → '아이디 또는 비밀번호를 확인하세요' 알림 (사각형) → 2번으로 돌아가기 (화살표)

정리하면, 테스크 플로우가 '사용자 행동'의 큰 뼈대를 잡고, 페이지 플로우는 그 뼈대에 '화면'이라는 살을 붙이며, 플로우 차트는 '상황별 로직'이라는 혈관을 넣어 완성하는 과정이라고 생각하시면 됩니다. 이 세 가지 도구를 적절히 활용하면, 사용자에게 매끄러운 경험을 제공하는 서비스를 설계할 수 있습니다!

 

---

정보 구조 설계(IA, Information Architecture)는 말 그대로 정보를 체계적으로 정리하고 구조화하는 작업입니다.
간단히 말해, 복잡하고 다양한 정보를 사용자가 쉽게 찾고 이해할 수 있도록 만드는 일종의 '설계도'를 그리는 것

 

우리가 건물을 지을 때 설계도가 필요하듯이, 디지털 제품(웹사이트, 앱 등)을 만들 때도 정보 설계도가 반드시 필요합니다.

이 설계도 없이는 사용자가 원하는 정보를 어디서 찾아야 할지 헤매게 되고, 결국 불편함을 느껴 제품을 떠나게 됩니다!

---

IA가 왜 중요할까요?

사용자 경험(UX) 측면에서 IA는 굉장히 중요한 역할을 합니다. IA가 잘 되어 있으면 사용자는 다음과 같은 경험을 하게 됩니다.

• 쉽게 탐색합니다: 메뉴가 논리적으로 구성되어 있어 원하는 정보에 빠르게 도달할 수 있습니다.
• 길을 잃지 않습니다: 현재 위치가 어디인지, 다음에는 어디로 가야 하는지 명확하게 알 수 있습니다.
• 정보를 예측합니다: 특정 카테고리에 어떤 정보가 있을지 예상할 수 있어, 심리적으로 안정감을 느낍니다.

반대로 IA가 엉망이면 사용자들은 끊임없이 "내가 지금 어디에 있지?", "이 정보는 어디에 있는 거지?"라는 질문을 던지게 됩니다. 이는 곧 답답함과 짜증으로 이어져 나쁜 사용자 경험을 만들게 됩니다.

---

IA의 주요 구성 요소

IA는 주로 세 가지 핵심 요소를 다룹니다.

1. 조직 체계 (Organization Schemes)

정보를 어떤 기준과 방식으로 묶을지 결정하는 것입니다.

• 주제별 조직 (Topic-based): '스포츠', '경제', '사회' 등 주제에 따라 정보를 분류합니다. 뉴스 앱이나 블로그에서 자주 볼 수 있습니다.
• 태스크 기반 조직 (Task-based): 사용자의 행동에 맞춰 정보를 묶습니다. '예약하기', '결제하기', '내 정보 수정'과 같이 사용자가 하고자 하는 일에 초점을 맞춥니다.
• 알파벳 순서 (Alphabetical): 정보를 가나다순/알파벳순으로 정렬합니다. 사전이나 용어사전, 연락처 목록에 사용됩니다.
• 시간순 (Chronological): 시간의 흐름에 따라 정보를 정렬합니다. 게시판이나 피드에서 많이 볼 수 있습니다.

2. 레이블링 시스템 (Labeling Systems)

정보를 나타내는 명칭(이름)을 정하는 작업입니다. 사용자가 혼동하지 않도록 명확하고 간결한 이름을 붙여야 합니다.

• 예를 들어, '내 정보'를 '마이 페이지', '내 계정', '프로필' 등으로 부를 수 있는데, 어떤 이름이 가장 직관적이고 사용자가 이해하기 쉬울지 고민해야 합니다.

3. 내비게이션 시스템 (Navigation Systems)

사용자가 제품 내에서 이동할 수 있도록 돕는 길 안내 시스템입니다.

• 글로벌 내비게이션: 제품 전체에 걸쳐 항상 노출되는 메뉴(주로 상단이나 하단 탭 바)로, 주요 기능으로 바로 이동하게 합니다.
• 로컬 내비게이션: 특정 섹션이나 카테고리 안에서 이동을 돕는 메뉴입니다.
• 보조 내비게이션: 특정 작업을 돕거나 관련 콘텐츠로 연결하는 링크입니다. (예: '관련 기사', '이런 제품도 구매했어요')

이처럼 IA는 겉으로 드러나지 않지만, 사용자 경험의 뼈대를 이루는 가장 근본적인 작업입니다. IA를 잘 설계하는 것이 좋은 제품을 만드는 첫걸음이라고 할 수 있습니다.

 

IA : 기능단위 
플로우 : 사용자들의 흐름 관점 (정리 기준 다름)

---

와이어프레임

와이어프레임은 제품의 뼈대를 만드는 작업이라고 생각하시면 됩니다. 건물의 골조나 설계도면처럼, 앱이나 웹사이트 화면의 레이아웃, 정보의 위치, 그리고 핵심 기능들을 시각적으로 보여주는 단순한 스케치 또는 도면입니다. 보통 색상, 이미지, 폰트 같은 세부적인 디자인 요소는 배제하고, 오로지 정보의 배치와 기능의 흐름에만 집중합니다.

---

와이어프레임은 왜 중요할까요?

와이어프레임은 디자인 프로세스의 초기 단계에서 매우 중요한 역할을 합니다.

• 빠른 의사 결정: 복잡한 디자인 작업에 들어가기 전에, 팀원들이나 이해관계자들과 함께 화면의 구조와 기능을 빠르게 검토하고 수정할 수 있습니다. 초기 단계에서 문제를 발견하고 해결하면 시간과 비용을 크게 절약할 수 있습니다.
• 사용자 흐름 검증: 와이어프레임을 통해 사용자의 시선이 어디로 가는지, 어떤 정보가 먼저 눈에 들어와야 하는지 등을 테스트하고 최적화할 수 있습니다. IA에서 설계한 정보 구조가 실제 화면에서 어떻게 작동하는지 시뮬레이션하는 단계라고 할 수 있습니다.
• 협업의 효율성 증대: 디자이너, 개발자, 기획자 등 모든 팀원이 같은 그림을 보며 소통할 수 있는 공통의 언어를 제공합니다. "홈 화면에는 무엇이 들어가나요?"라는 질문에 추상적인 설명 대신 와이어프레임을 보여주면 모두가 정확히 이해할 수 있습니다.

---

와이어프레임의 핵심 특징

와이어프레임은 다음과 같은 특징을 가집니다.

1. 단순성 (Simplicity):
   • 흑백 또는 명암만 사용하고, 이미지 자리에는 사각형 박스와 '이미지'라는 텍스트를, 아이콘 자리에는 간단한 기호를 사용합니다.
   • 화면의 레이아웃과 정보의 위계(Hierarchy)에만 집중하여 불필요한 요소에 시선을 뺏기지 않도록 합니다.
2. 기능 중심 (Function-focused):
   • "이 버튼은 어떤 기능을 하는가?", "이 섹션의 역할은 무엇인가?"와 같이 기능적 측면에 초점을 맞춥니다.
   • 텍스트는 실제 내용 대신 '제목', '내용', '버튼'과 같은 플레이스홀더(placeholder)를 사용하기도 합니다.
3. 저비용/고효율 (Low Fidelity):
   • 종이와 펜으로 손쉽게 그릴 수도 있고, 간단한 툴(Figma, Sketch, Adobe XD 등)로 빠르게 만들 수 있습니다.
   • 쉽게 만들 수 있기 때문에 여러 가지 버전을 실험하고, 다양한 아이디어를 빠르게 시도해볼 수 있습니다.

결론적으로, 와이어프레임은 눈에 보이는 예쁜 디자인을 만들기 전에, "우리가 만들려는 제품이 어떤 구조로 이루어져 있고, 사용자가 어떻게 상호작용할 것인가?"에 대한 질문에 답을 찾는 가장 효율적인 도구입니다. 이 뼈대가 튼튼해야만, 그 위에 멋진 디자인이라는 살을 붙였을 때도 좋은 사용자 경험을 제공하는 제품이 완성될 수 있습니다.

 

---

오늘의 실습 !

⭐️ 서비스 디자인 기획의 ‘문제 발견’ 단계 실습

문제점 수집	주제 선정	현황 파악
- 배달 음식이나 간편식에 의존하게 되어 영양 불균형이 심화. - 아플 때 혼자 병원에 가거나 약을 챙겨 먹는 것에 어려움을 느낌. - 갑작스러운 응급 상황 발생 시 대처하기 힘들어 불안감을 느낌. - 건강 정보를 스스로 찾고 관리하는 데 소극적이거나 어려움을 느낌.	- 혼자 사는 사람들이 끼니를 제대로 챙기지 못하거나 아플 때 돌봄 사각지대에 놓이는 경우가 많음.	- 2024년 기준, 한국의 1인 가구는 전체 가구의 40%에 육박하며, 특히 청년층과 노년층의 건강 문제가 사회적 이슈로 떠오르고 있음. - 국민건강보험공단 연구에 따르면, 1인 가구의 만성 질환 유병률이 다인 가구보다 높게 나타고 있음. - 정부 및 지자체에서 돌봄 서비스를 제공하고 있지만, 대상자가 한정적이고 접근성이 낮다는 한계가 있습니다. - 개인 맞춤형 건강 관리 앱이 존재하지만, 이용률이 낮고 실질적인 도움으로 이어지지 않는 경우가 많음.

 

⭐️ 와이어프레임 작성
- 실제 UI 서비스를 선정 후 화면을 캡쳐, 클론하여 와이어프레임 제작 

Toss

 

---

[ 12일차 소감 ☺️ ] 
왛... 하면서 느낀점은.. 와이어 프레임 쉽지 않다는 점이요 ㅎㅎ..진짜 쓸 때는 몰랐는데 참 유용한 기능을 짤막하게 잘 배치했다는 걸 크게 깨달았습니다. 그리고 제가 너무 매력적으로 느꼈던 금융 앱인 토스를 직접 와이어 프레임 할 수 있다는 게 솔직히 힘은 들었지만 재밌었습니다!! 다른 분들 과제를 보니.. 조금 더 간결하게 해도 괜찮겠다는 생각이 들었습니다. 와이어 프레임은 새롭게 런칭하거나 할 때 실무에서 진행한다고 들었습니다. 아직은 2주밖에 안되어.. 미숙하지만 날이 갈수록 손이 빨라지겠죠!? ㅎㅎ 서비스 디자인 기획도 굉장히 매력적이였습니다. 문제를 찾고 문제 해결을 위한!! 실무에서 진짜로 쓰이는 방식이라 더 흥미가 가득했습니다.. 잘할 수 있을 것만 같은 근자감이 생긴달까용 ㅎㅎㅎ 드디어 찾아온 주말! 스터디내에서 어떤 걸 할지 참으로 고민이 많지만.. 시작이 다 좋으니 과정도 즐거울 것 같습니다.!! 주말엔 번외로 제가 좋아하는 게임 행사를 가볼까봐용~! 아싸~ ㅎㅎㅎ

= 오늘의 한 마디 =
척추 수술.. 3천 만 원...... (허리가 너무 아파여~~)