[제로베이스 PM 파트타임 스쿨] 11주차 - 14장 서비스 기획서 작성하기 후반부

【최종수정시각】 2025. 06. 16. 16:49

 

 

목차

• 14 서비스 기획서 작성하기
  • 14.10 정보구조(information architecture, IA)
  • 14.11 사용자 프로세스(user process)
  • 14.12 와이어프레임(wireframe)

 

 

14 서비스 기획서 작성하기

---

14.10 정보구조(information architecture, IA)

---

• IA 설계 개요
  1. 본격적인 설계 착수에 앞서 현황 분석에서 발견한 문제점들을 정리한다.
  2. 개선점을 포함한 목적과 방향을 설정한다.
  3. 벤치마킹을 통해 타사들의 IA를 참고한다.
  4. 서비스의 전략과 방향에 어긋나지 않게 설계한다.
  5. 서비스 용어의 정의와 운영 프로세스 구조도 포함한다.
  6. 현 IA 중 중복됐거나 불필요한 정보를 조정한다.
• IA 설계 상세 (표 형태로 작성함을 가정)
  • 유일한 정답은 없다. (기업마다 조직마다 설계 방식이 조금씩 상이할 수 없다.)
  • 번호(인덱스), 1-뎁스, ···,  n-뎁스, 화면 ID, 페이지, 유형, 상세 설명 등의 열로 구성된다.
  • 일반적으로는 화면의 흐름을 따라 뎁스(depth, 깊이) 수준이 결정된다.
  • 그러나 항상 UI의 위치대로 뎁스 수가 결정되는 것은 아니다.
    예 1) '로그인'의 뎁스 수가 1이고, '로그인' 화면에서 [회원가입] 버튼과 [비회원 주문조회] 버튼이 있다고 가정하자. 이때, '회원가입'과 '비회원 주문조회'의 뎁스 수는 '로그인'처럼 1이다. 왜냐하면 (비록 연관성은 있으나) 서로를 포함하지 않는 동등한 수준의 정보이기 때문이다. 상기 두 버튼은 그저 빠른 이동을 도와주는 역할을 수행할 뿐이다.
    예 2) 게시글 그룹핑 혹은 필터링을 수행하는 버튼은 IA에 기재할 하나의 정보 인스턴스가 아니다.
    예 3) (보통 화면 우상단에 있는) 각종 언어 변경 버튼은 IA에 기재할 하나의 정보 인스턴스가 아니다.
    예 4) [라이트 모드], [시스템 모드], [다크 모드] 버튼은 IA에 기재할 하나의 정보 인스턴스가 아니다.
  • 화면 ID 명명법에 왕도는 없다.
  • 하지만 이왕이면 정보의 흐름을 담아서 화면 ID를 명명하는 것이 좋다.   
  • 추후 수정을 대비해 화면 ID 번호를 일부러 넉넉하게 비워두는 것이 좋다.
  • '상세 설명' 내 모든 칸을 채울 필요는 없다. (말 그대로 상세한 설명이 필요할 때만 채워도 무방하다.)

14.11 사용자 프로세스(user process)

---

* 혹자는 사용자 프로세스와 순서도를 묶어서 서비스 프로세스라 부르기도 한다.

* 혹자는 서비스 기획서가 굳이 사용자 프로세스까지 포함할 필요가 없다고 생각하기도 한다.

 

• 사용자 프로세스 개요
  • 사용자가 서비스를 사용하는 과정을 뜻한다.
  • IA를 바탕으로 사용자가 특정한 작업을 수행하는 흐름을 정의한다.
  • 데이터의 이동, 저장, 호출 프로세스도 포함한다
  • 사용자 시나리오보다 좀 더 구체적이다.
  • UI(화면), 행동, 판단 등으로 표현한다.
  • 사용자 프로세스를 일정한 형칙으로 도식화한 것이 바로 사용자 순서도(user flowchart)이다.
• 사용자 프로세스의 순기능
  • 서비스와 각 페이지의 주요 흐름을 빠르게 이해할 수 있다.
  • 인터페이스를 효율적으로 설계할 수 있다.
    예) 사용자 프로세스 설계 업무를 수행하면서 미처 고려하지 못했던 것과 불필요한 것을 발견하기도 한다.
  • 개선이 필요한 영역이 명확하게 드러난다.
  • 여러 직무의 실무자들과 원활한 의사소통을 촉진하는 매개체로 작용한다.

14.12 와이어프레임(wireframe)

---

* 엄밀하게 따지면, 와이어프레임, 스토리보드, 프로토타입은 서로 다른 개념이다.

* 그러나 오늘날 현업에서는 명칭을 혼용해서 사용하는 경우도 꽤 있다. (화면 설계서나 화면 정의서라 부르는 사람도 있다.)

 

• 와이어프레임이란
  • UI(화면)를 어떻게 표현할지를 그려 놓은 화면의 프로토타입
  • 웹페이지, 앱페이지의 화면을 페이지 구조, 레이아웃, IA, 사용자 흐름, 기능, 의도된 동작들이 포함된다.
• 와이어프레임 설계 시 주요 고려 사항
  • 왜(Why)
  • 목표(Goal)
  • 무엇(What)
  • 컨셉(Concept)

---

※ 이 글은 제로베이스 PM 파트타임 스쿨의 강의 자료 일부를 발췌하여 작성되었습니다.