[ PM 공부 기록 ] PM공부 : 서비스기획 개론_ 앱 & 웹 서비스 기획 프로세스.

∇ PM공부 : 서비스기획 개론_ 앱 & 웹 서비스 기획 프로세스.

목  차

1. 아이디어 도출.
2. 최소안
3. 유저 시나리오
4. 기능 도출
5. 서비스 흐름도
6. 메뉴 구성
7. 정보-마인드맵
8. 페이지 흐름도
9. 화면 설계
10. 스토리보드(문서화)

하나의 앱이나 웹의 서비스가 만들어진다는 것은 사실 큰 영역을 가지고 있습니다.

사업기획에서 아이디어 도출 서비스 기획 그리고 디자인, 퍼블리싱, 개발 그리고 지속적인 관리 거기에서 서비스 기획이라는 것은 초기 세팅 작업으로 전체 영역의 20%~30%를 차지하고 있습니다.

하지만 서비스라는 것은 초기의 시작이 중요하고 점진적으로 고도화시켜 나가는 것이 매우 중요하기에 범위에서는 20% 일지라도 중요성은 80%라 하여도 과언은 아닙니다.

더군다나 요즘처럼 LLM에 이어서 AI 에이전트가 보편화되어가고,
AI 도구들을 활용해 디자인 및 개발을 빠르게 해볼 수 있는 시대에 있어서는
'기획안'을 제대로 잡고 방향성대로 빠르게 가는 것이 더욱 중요해졌습니다.

Ⅰ. 아이디어 도출.

🩻 아이디어 도출 과정 : 실현 가능한 아이디어를 브레인스토밍하는 작업.

• 처음 사업(기획)을 시작하며 무엇을 이루고자 하는지 '아이디어'를 정리해야 합니다.

• 가능한 사항도 있겠지만, 가능하지 않은 것들도 무조건 있습니다.

  • 이때 모든 아이디어를 끄집어내어서 취합해내는 것이 중요합니다.

• 아이디어를 발산하는 방법에는 다양한 방법론들이 있습니다.

• 그 중 가장 효과적인 방법은 '브레인스토밍'으로 팀이나 이해관계자들이 모여서 아이디어를 바닥까지 끄집어내는 것입니다.

Ⅱ. 최소안

🩻 최소안 도출 - 모든 아이디어 중에서 핵심이 되는 아이디어 도출

• 초기의 아이디어는 보통 거대하고 방대합니다.

• 고객의 관점에서 무엇이 가장 필요로 하고 문제를 해결해 주는지를 중심으로
  가장 기초적인 서비스를 설계합니다. 이것을 최소안이라고 합니다.

• 예를 들면 카카오톡의 경우 여러 가지 기능들이 있습니다.
  • 현재는 더 방대해졌습니다.
    그러나 처음부터 그렇게 시작한 것이 아니라
    처음에는 친구끼리 이야기를 보내는 톡 대화 기능으로 시작하였습니다.
    이렇게 핵심 기능이 정해진 상태에서는 개발이 더 수월해지고 방향이 잘 잡히게 됩니다.

Ⅲ. 유저 시나리오

• 최소한의 기획안이 완성되었다면,
  • 이를 바탕으로 사용자가 서비스를 어떻게 처음부터 끝까지 경험할지
    시나리오를 작성해 봐야 합니다.
  • 이 과정은 서비스의 핵심 흐름을 파악하고 사용자 경험을 최적화하는 데 큰 도움이 됩니다.

🩻 유저 시나리오란?

• '유저 시나리오'는 사용자가 서비스를 이용하는 전체 여정을 단계별로 정리한 것입니다.

• 이는 서비스의 핵심 기능과 사용자 경험의 흐름을 명확하게 보여주며,
  개발 과정에서 놓칠 수 있는 부분을 미리 발견할 수 있게 해줍니다.
  

🩻 유저 시나리오 작성 방법.

핵심 기능 중심으로 작성하기.

• 유저 시나리오를 작성할 때는 서비스의 가장 중요한 기능들만 포함시키는 것이 좋습니다.

• 너무 세부적인 내용까지 포함하면 오히려 핵심 흐름을 파악하기 어려워질 수 있습니다.

  • 세부적인 기능은 추후 기능 정의서에서 상세하게 정의하면 됩니다.

실제 사례.(스타벅스)

예를 들어, 스타벅스의 유저 시나리오는 다음과 같이 구성될 수 있습니다:

1.손님이 매장에 들어온다

2.메뉴를 선택한다

3.결제를 진행한다

4.대기표를 받는다

5.음료 준비 완료 알림을 받는다

6.음료를 받는다

7.매장을 나간다 (또는 매장 내에서 음료를 마신다)

이처럼 간결하면서도 서비스의 핵심 흐름을 잘 보여주는 시나리오가 효과적입니다.

실제 사례.(워크시트)

워크시트 제작 및 배송 서비스의 경우, 다음과 같은 유저 시나리오를 그려볼 수 있습니다:

1.사용자가 서비스에 접속한다

2.원하는 워크시트 종류를 선택한다

3.워크시트 내용을 작성/커스터마이징한다

4.작성한 워크시트를 검토한다

5.결제를 진행한다

6.배송 정보를 입력한다

7.주문 완료 및 배송 현황을 확인한다

8.워크시트를 받아 사용한다

9.미션 수행 결과를 저장한다

10.원하는 경우 결과를 다른 사용자와 공유한다

🩻 유저 시나리오 작성 연습 방법.

• 유저 시나리오 작성에 익숙해지기 위한 가장 좋은 방법은
  자신이 자주 사용하는 앱이나 벤치마킹하고 싶은 서비스를 모델로 삼아 연습해보는 것입니다.

• 이를 통해 다양한 서비스의 핵심 흐름을 파악하고,
  자신의 서비스에 적용할 수 있는 인사이트를 얻을 수 있습니다.

연습 방법

자주 사용하는 앱 3-5개를 선택한다

각 앱의 핵심 기능을 중심으로 유저 시나리오를 작성해본다

작성한 시나리오를 비교하며 공통점과 차이점을 분석한다

🩻 유저 시나리오의 활용.

• 잘 작성된 유저 시나리오는 다음과 같은 다양한 용도로 활용될 수 있습니다:

  • 개발 우선순위 설정: 핵심 기능을 중심으로 개발 로드맵을 설계할 수 있습니다

  • UX/UI 디자인 가이드: 사용자 경험의 흐름에 맞춰 인터페이스를 설계할 수 있습니다

  • 테스트 시나리오 작성: QA 과정에서 핵심 기능 테스트를 위한 기준으로 활용할 수 있습니다

  • 이해관계자 커뮤니케이션: 개발자, 디자이너, 마케터 등 다양한 팀원들에게 서비스의 핵심을 쉽게 설명할 수 있습니다

---

유저 시나리오는 복잡한 서비스 기획을 단순화하고 핵심에 집중할 수 있게 해주는 강력한 도구입니다.

사용자의 관점에서 서비스를 바라보고 경험의 흐름을 설계함으로써,
보다 직관적이고 사용하기 쉬운 서비스를 만들 수 있습니다.

서비스 기획의 초기 단계에서 유저 시나리오를 꼼꼼히 작성하고 검토한다면,
이후 개발 과정에서 발생할 수 있는 많은 문제를 미리 예방할 수 있을 것입니다.

Ⅳ. 기능 도출

🩻 기능 정의 - 서비스에 필요한 기능의 정의.

• 서비스 기획의 핵심 단계 중 하나는 필요한 기능들을 명확하게 정의하는 것입니다.
• 앞서 작성한 유저 시나리오를 바탕으로,
  서비스가 원활하게 작동하기 위해 필요한 모든 기능들을 식별하고 정의해야 합니다.
  

🩻 기능 정의의 중요성.

• 기능 정의는 서비스 개발의 청사진이라고 할 수 있습니다.
  • 이 과정에서 누락된 기능은
    개발 후반부에 추가하기 어렵거나 많은 비용이 발생할 수 있습니다.
  • 따라서 초기 단계에서 필요한 기능들을 꼼꼼하게 정의하는 것이 중요합니다.

🩻 기능의 종류.

: 서비스에 필요한 기능은 크게 다음과 같이 분류 가능합니다.

1. 핵심 기능: 유저 시나리오에서 도출된 서비스의 주요 기능들

예: 워크시트 선택, 작성, 출력, 배송 등

2. 공통 기능: 대부분의 서비스에 공통적으로 필요한 기능들

예: 회원가입, 로그인, 결제, 알림 등

3. 부가 기능: 서비스 경험을 향상시키는 추가적인 기능들

예: 공유하기, 즐겨찾기, 히스토리 관리 등

4. 관리 기능: 서비스 운영을 위한 백오피스 기능들

예: 회원 관리, 콘텐츠 관리, 통계 분석 등

🩻 기능 정의서의 역할.

• 기능 정의서는 개발팀과 디자인팀이
  정확히 어떤 기능을 구현해야 하는지 이해할 수 있도록 돕는 중요한 문서입니다.

이는 다음과 같은 역할을 합니다:

• 개발 범위 명확화

• 기능 간 상호작용 정의

• 개발 우선순위 설정

• 개발 일정 및 리소스 계획 수립

• 테스트 계획 수립의 기준

🩻 기능 정의서 작성 시 고려사항.

• 기능 정의서를 작성할 때는 다음과 같은 점들을 고려해야 합니다:

  • 명확성: 각 기능의 목적과 동작 방식을 명확하게 설명

  • 상세함: 기능의 입력값, 처리 과정, 출력값 등을 상세히 기술

  • 일관성: 용어와 형식을 일관되게 사용

  • 우선순위: 각 기능의 중요도와 개발 우선순위 표시

  • 의존성: 기능 간의 의존 관계 명시

🩻 기능 정의서의 구성요소.

• 일반적인 기능 정의서는 다음과 같은 요소들을 포함합니다:

1.기능 ID 및 이름

2.기능 설명 및 목적

3.기능 상세 (입력값, 처리 과정, 출력값)

4.화면 연결 정보

5.제약 조건 및 예외 사항

6.우선순위 및 개발 단계

7.관련 기능 및 의존성

8. 참고 자료 (와이어프레임, 플로우차트 등)

---

기능 정의는 서비스 기획자의 핵심 역할 중 하나입니다.

잘 작성된 기능 정의서는 개발 과정에서 발생할 수 있는 많은 오해와 문제를 사전에 방지하고,
효율적인 개발 진행을 가능하게 합니다.

기능 정의서 작성은 상당한 전문성과 경험이 요구되는 영역이므로,
지속적인 학습과 실전 경험을 통해 역량을 키워나가는 것이 중요합니다.

기능 정의에 대한 더 상세한 내용과 실제 작성 방법, 템플릿 등은
추후 별도의 포스팅에서 더 깊이 다루도록 하겠습니다.

Ⅴ. 서비스 흐름도

🩻 서비스 흐름도 - 서비스가 어떻게 흘러가는지를 그려내는 것.

• '서비스 흐름도(Service Flow)'는 사용자가 서비스를 이용하는 전체 과정을 시각적으로 표현한 다이어그램입니다.
• 이는 서비스의 로직과 순서를 명확하게 보여주어 개발팀, 디자인팀, 그리고 다른 이해관계자들이 서비스의 전체 구조를 쉽게 이해할 수 있도록 도와줍니다.

🩻 서비스 흐름도의 중요성.

• 서비스 흐름도는 다음과 같은 여러 측면에서 중요한 역할을 합니다:

  • 전체 서비스 구조 파악: 복잡한 서비스의 전체 구조를 한눈에 볼 수 있게 해줍니다

  • 사용자 여정 시각화: 사용자가 서비스를 이용하는 경로를 명확하게 보여줍니다

  • 문제점 조기 발견: 서비스 설계 단계에서 잠재적 문제점을 미리 발견할 수 있습니다

  • 팀 커뮤니케이션 향상: 다양한 부서 간의 의사소통을 원활하게 합니다

  • 개발 효율성 증대: 개발팀이 서비스의 로직을 명확히 이해하여 효율적으로 개발할 수 있습니다.

🩻 서비스 흐름도 작성 방법.

1.준비 단계

• 유저 시나리오와 기능 정의서를 검토합니다

• 서비스의 주요 화면과 기능을 파악합니다

• 사용자의 주요 목표와 행동을 정리합니다

2. 흐름도 구성 요소

: 효과적인 서비스 흐름도는 다음과 같은 요소들을 포함합니다:

• 시작점과 종료점: 서비스 이용의 시작과 끝을 명확히 표시

• 프로세스 단계: 사용자가 수행하는 각 단계를 표시

• 의사결정 포인트: 사용자의 선택에 따라 흐름이 달라지는 지점

• 화면 전환: 한 화면에서 다른 화면으로 이동하는 경로

• 데이터 흐름: 정보가 어떻게 이동하고 처리되는지 표시

• 에러 처리: 오류 발생 시 대응 방법

3. 흐름도 작성 도구

: 서비스 흐름도를 작성하기 위한 다양한 도구들이 있습니다:

Figma: UI/UX 디자인과 함께 흐름도 작성 가능

Lucidchart: 다양한 다이어그램 템플릿 제공

Draw.io: 무료로 사용 가능한 다이어그램 도구

🩻 서비스 흐름도의 종류.

1. 사용자 중심 흐름도

• 사용자의 관점에서 서비스 이용 과정을 표현한 흐름도입니다.
  • 주로 사용자 경험(UX) 설계에 활용됩니다.

2. 시스템 중심 흐름도

• 백엔드 시스템의 관점에서 데이터 처리와 기능 실행 과정을 표현한 흐름도입니다.
  • 개발팀이 주로 참고합니다.

3. 통합 흐름도

• 사용자 경험과 시스템 처리를 모두 포함한 종합적인 흐름도입니다.
  • 서비스의 전체 구조를 이해하는 데 유용합니다.

🩻 효과적인 서비스 흐름도 작성 팁.

1. 단순하게 유지하기: 너무 복잡한 흐름도는 이해하기 어렵습니다

2. 일관된 기호 사용하기: 동일한 유형의 요소는 같은 모양과 색상으로 표현

3. 계층 구조 활용하기: 주요 흐름과 세부 흐름을 구분하여 표현

4. 주석 추가하기: 복잡한 로직이나 중요한 포인트에 설명 추가

5. 버전 관리하기: 변경 사항을 추적할 수 있도록 버전 관리 실시

6. 피드백 반영하기: 팀원들의 피드백을 수렴하여 지속적으로 개선

---

서비스 흐름도는 서비스 기획의 핵심 산출물 중 하나로,
복잡한 서비스의 구조를 명확하게 시각화하여
모든 이해관계자가 서비스의 전체 흐름을 쉽게 이해할 수 있도록 도와줍니다.

잘 설계된 서비스 흐름도는 개발 과정에서 발생할 수 있는 많은 오해와 문제를 사전에 방지하고, 효율적인 서비스 구현을 가능하게 합니다.

서비스 기획자라면 서비스 흐름도 작성 능력을 지속적으로 발전시켜,
복잡한 서비스도 명확하고 이해하기 쉽게 표현할 수 있는 역량을 키워나가는 것이 중요합니다.

Ⅵ. 메뉴 구성

🩻 메뉴 구성 - 사용자 페이지와 관리자 페이지의 메뉴 설계하기.

• '메뉴 구성'은 서비스의 사용성과 접근성을 결정짓는 중요한 요소입니다.

• 효과적인 메뉴 설계는 사용자가 원하는 정보나 기능을 쉽게 찾을 수 있도록 돕고,
  관리자가 서비스를 효율적으로 운영할 수 있게 합니다.

• 메뉴 구성은 크게 사용자 페이지(프론트엔드)와 관리자 페이지(백엔드)로 나누어 접근해야 합니다.

🩻 사용자 페이지 메뉴 구성.

효과적인 사용자 메뉴 설계 원칙.

1. 논리적 구조화
: 관련된 페이지와 콘텐츠를 직관적인 카테고리와 하위 카테고리로 그룹화해야 합니다.

2. 제한된 상위 메뉴
: 상위 메뉴 항목을 제한하여 사용자가 쉽게 탐색할 수 있도록 합니다.
너무 많은 메뉴 항목은 사용자에게 혼란을 줄 수 있습니다.

3. 명확한 라벨링
: 메뉴 항목의 이름은 짧지만 설명적이어야 하며, 사용자가 여러 메뉴를 구분할 수 있도록 해야 합니다.

4. 중요도에 따른 배치
: 중요한 카테고리나 페이지는 메뉴의 상단에 배치하여 사용자가 쉽게 찾을 수 있도록 합니다.

5. 접근성 고려
: 메뉴는 시맨틱 마크업을 사용하여 구조화하고,
스크린 리더와 같은 보조 기술을 사용하는 사용자도 쉽게 탐색할 수 있도록 해야 합니다

사용자 메뉴 구현 방법.

1. 비순서 목록 사용
: 대부분의 웹사이트 내비게이션은 특정 순서가 중요하지 않으므로
ul 태그를 사용하여 구현합니다.

2. 메뉴 식별
: HTML5의 nav 요소를 사용하여 메뉴를 식별하면 사용자가 메뉴에 직접 접근할 수 있습니다.

3. 현재 항목 표시
: 사용자가 현재 위치를 파악할 수 있도록 현재 페이지에 해당하는 메뉴 항목을 시각적으로 표시합니다.

4. 반응형 디자인
: 화면 크기에 따라 메뉴 구조를 일관되게 유지하되,
일부 항목은 축소하거나 하위 내비게이션 메뉴로 숨길 수 있습니다.

🩻 관리자 페이지 메뉴 구성.

관리자 페이지의 메뉴 구성은 서비스 기획자들이 종종 어려워하는 부분입니다.
잘 설계된 관리자 메뉴는 서비스 운영의 효율성을 크게 향상시킬 수 있습니다.

관리자 메뉴 설계 원칙.

1. 기능 중심 구성
: 관리자 메뉴는 관리해야 할 기능과 데이터를 중심으로 구성합니다.

2. 계층적 구조
: 주요 기능은 상위 메뉴로, 세부 기능은 하위 메뉴로 구성하여 논리적인 계층 구조를 만듭니다.

3. 사용 빈도 고려
: 자주 사용하는 기능은 접근하기 쉬운 위치에 배치합니다.

4. 일관된 네이밍
: 메뉴 항목의 이름은 해당 기능을 명확하게 설명하고 일관성 있게 사용합니다.

5. 권한 관리
: 사용자 역할에 따라 접근 가능한 메뉴를 다르게 설정합니다.

🩻 메뉴 구성 시 주의사항.

1. 과도한 복잡성 피하기
: 너무 많은 메뉴 항목이나 깊은 계층 구조는 사용자 경험을 저하시킬 수 있습니다.

2. 일관성 유지
: 메뉴의 위치, 스타일, 동작 방식은 전체 서비스에서 일관되게 유지해야 합니다.

3. 테스트와 피드백
: 실제 사용자와 관리자의 피드백을 수집하여 메뉴 구성을 지속적으로 개선합니다.

4. 모바일 고려
: 반응형 디자인을 적용하여 다양한 디바이스에서도 메뉴가 잘 작동하도록 해야 합니다.

5. 성능 최적화
: 관리자 메뉴가 느리게 로드되면 업무 효율성이 저하될 수 있으므로,
성능 최적화에 신경 써야 합니다.

---

효과적인 메뉴 구성은 서비스의 사용성과 관리 효율성을 크게 향상시킬 수 있습니다.

사용자 페이지와 관리자 페이지 모두 사용자의 목표와 니즈를 중심으로 설계하고,
지속적인 테스트와 개선을 통해 최적화해 나가는 것이 중요합니다.

Ⅶ. 정보-마인드맵

🩻 정보마인드맵 - 각 정보에 관련된 내용을 카테고리별로 구성.

'정보마인드맵'은
서비스에 필요한 모든 정보와 데이터를 체계적으로 정리하고 시각화하는 도구입니다.

이는 개발자, 디자이너, 기획자 간의 원활한 소통을 돕고,
복잡한 정보 구조를 명확하게 파악할 수 있게 해줍니다.

🩻 정보마인드맵의 중요성.

정보마인드맵은 다음과 같은 이유로 서비스 기획 과정에서 중요한 역할을 합니다:

1. 정보 구조 명확화

: 서비스에 필요한 모든 정보와 그 관계를 시각적으로 표현합니다

2. 개발 효율성 증대

: 개발자들이 데이터 구조와 관계를 명확히 이해할 수 있게 합니다

3. 누락 방지

: 필요한 정보가 빠지지 않도록 체계적으로 관리할 수 있습니다

4. 의사소통 개선

: 팀원 간 정보 구조에 대한 이해를 공유할 수 있습니다

5. 확장성 계획

: 향후 서비스 확장 시 필요한 정보 요소를 예측할 수 있습니다.

🩻 정보마인드맵 작성 방법.

1. 핵심 카테고리 정의

: 서비스의 주요 정보 카테고리를 정의합니다.

일반적인 카테고리 예시:

• 사용자 정보

• 콘텐츠 정보

• 결제 정보

• 상품/서비스 정보

• 운영 정보

• 통계 정보

2. 세부 정보 요소 추가

: 각 카테고리별로 필요한 세부 정보 요소를 추가합니다:

사용자 정보

• 기본 정보 (이름, 이메일, 전화번호 등)

• 계정 정보 (ID, 비밀번호, 가입일 등)

• 프로필 정보 (프로필 이미지, 자기소개 등)

• 활동 정보 (방문 횟수, 최근 접속일 등)

콘텐츠 정보

• 콘텐츠 기본 정보 (제목, 내용, 작성일 등)

• 미디어 정보 (이미지, 동영상, 파일 등)

• 메타 정보 (태그, 카테고리, SEO 정보 등)

• 상태 정보 (공개 여부, 버전 등)

3. 정보 간 관계 설정

: 정보 요소 간의 관계를 연결선으로 표시합니다:

• 일대일 관계

• 일대다 관계

• 다대다 관계

• 포함 관계

• 참조 관계

4. 속성 정의

: 각 정보 요소의 속성을 정의합니다:

• 데이터 타입 (문자열, 숫자, 날짜 등)

• 필수/선택 여부

• 기본값

• 제약 조건 (최대 길이, 형식 등)

• 접근 권한
  

🩻 정보마인드맵의 중요성.

• 효과적인 정보마인드맵 작성을 위한 도구들

  - ThinkWise: 전문적인 마인드맵 작성 도구로, 복잡한 정보 구조를 표현하기에 적합합니다
  
  - XMind: 직관적인 인터페이스와 다양한 템플릿을 제공하는 마인드맵 도구입니다
  
  - MindMeister: 협업 기능이 강화된 온라인 마인드맵 도구입니다
  
  - Coggle: 실시간 협업이 가능한 심플한 마인드맵 도구입니다
  
  - Miro: 마인드맵 외에도 다양한 다이어그램을 작성할 수 있는 화이트보드 도구입니다

  

🩻 정보마인드맵 작성 시 주의사항.

1.과도한 복잡성 피하기

: 너무 세부적인 정보까지 한 번에 표현하면 가독성이 떨어집니다

2.일관된 표기법 사용

: 동일한 유형의 정보는 동일한 방식으로 표현합니다

3.업데이트 관리

: 정보 구조가 변경될 때마다 마인드맵을 업데이트합니다

4.팀 공유

: 작성된 마인드맵은 팀원들과 공유하고 피드백을 수렴합니다

5. 단계적 확장

: 핵심 정보부터 시작하여 점진적으로 세부 정보를 추가합니다

---

정보마인드맵은 복잡한 서비스의 정보 구조를 체계적으로 정리하고 시각화하는 강력한 도구입니다.

이를 통해 개발자, 디자이너, 기획자 간의 원활한 소통이 가능해지고,
서비스 개발 과정에서 발생할 수 있는 많은 혼란과 오류를 사전에 방지할 수 있습니다.

실무에서는 더 복잡하고 세부적인 정보마인드맵이 필요하지만,
기본 원칙과 방법론을 이해하고 적절한 도구를 활용한다면
효과적인 정보 구조화가 가능할 것입니다.

Ⅷ. 페이지 흐름도(플로우차트)

🩻 페이지 흐름도(플로우 차트) - 각 페이지별 연결 구조화

'페이지 흐름도(Flow Chart)'는
서비스 내 페이지 간의 이동 경로와 연결 관계를 시각적으로 표현한 다이어그램입니다.

이는 사용자 경험의 전체적인 흐름을 파악하고,
개발 과정에서 페이지 간 연결을 명확히 하는 데 중요한 역할을 합니다.

🩻 페이지 흐름도의 중요성.

'페이지 흐름도'는 다음과 같은 여러 측면에서 서비스 개발에 중요한 가치를 제공합니다:

• 전체 서비스 구조 파악
  : 복잡한 서비스의 전체 페이지 구조를 한눈에 볼 수 있습니다

• 사용자 여정 시각화
  : 사용자가 서비스를 이용하는 다양한 경로를 명확하게 보여줍니다

• 개발 가이드 제공
  : 개발자와 디자이너에게 페이지 간 연결 관계를 명확히 전달합니다

• 문제점 조기 발견
  : 사용자 경험 측면에서 불필요한 단계나 복잡한 경로를 미리 파악할 수 있습니다

• 커뮤니케이션 도구
  : 다양한 이해관계자 간의 서비스 구조 이해를 돕습니다

🩻 페이지 흐름도의 구성 요소.

1. 기본 도형과 의미

페이지 흐름도에서 사용되는 주요 도형과 그 의미:

• 직사각형(□): 일반적인 페이지나 화면을 나타냅니다

• 다이아몬드(◇): 사용자의 의사결정이 필요한 지점을 나타냅니다

  • [Y]: 사용자가 '예'를 선택했을 때의 경로

  • [N]: 사용자가 '아니오'를 선택했을 때의 경로

• 타원(○): 시작점과 종료점을 나타냅니다

• 화살표(→): 페이지 간 이동 방향을 나타냅니다

• 문서 모양(⎙): 출력물이나 보고서를 나타냅니다

• 원통형(⌭): 데이터베이스나 저장소를 나타냅니다

2. 페이지 번호 체계

각 페이지에는 고유한 번호를 부여하여 참조하기 쉽게 만듭니다:

• 대분류.중분류.소분류 형식으로 번호 체계를 구성합니다

  • 예: 1.0 (메인 페이지), 2.1 (회원가입 페이지), 2.1.1 (약관 동의 페이지)

• 이 번호는 화면 설계서(와이어프레임)와 연동되어 개발자와 디자이너가 참조할 수 있습니다

🩻 페이지 흐름도 작성 방법.

1. 준비 단계

• 서비스의 주요 페이지 목록을 작성합니다

• 사용자 시나리오와 유저 플로우를 검토합니다

• 페이지 간 연결 관계를 파악합니다

2. 작성 단계.

1. 시작점 정의
: 사용자가 서비스에 처음 접근하는 페이지(보통 메인 페이지나 랜딩 페이지)를 정의합니다

2. 주요 경로 설계
: 핵심 기능을 사용하는 주요 경로를 먼저 설계합니다

3. 분기점 추가
: 사용자의 선택에 따라 경로가 나뉘는 지점을 다이아몬드로 표시합니다

4. 예외 경로 추가
: 오류 상황이나 예외 케이스에 대한 경로를 추가합니다

5. 페이지 번호 부여
: 각 페이지에 고유한 번호를 부여합니다

6. 주석 추가
: 필요한 경우 특정 경로나 페이지에 대한 설명을 주석으로 추가합니다

3. 검토 및 개선

• 사용자 관점에서 흐름이 자연스러운지 검토합니다

• 불필요하게 복잡한 경로가 있는지 확인합니다

• 모든 페이지가 적절히 연결되어 있는지 확인합니다

• 팀원들의 피드백을 수렴하여 개선합니다

🩻 페이지 흐름의 작성 도구.

효과적인 페이지 흐름도 작성을 위한 도구들:

1. Figma: UI/UX 디자인과 함께 흐름도 작성 가능

2. Draw.io: 무료로 사용 가능한 다이어그램 도구

3. Lucidchart: 협업 기능이 강화된 다이어그램 도구

4. Miro: 화이트보드 기반의 협업 도구
   

🩻 페이지 흐름도 작성 시 주의사항.

1. 단순명료하게 유지
: 너무 복잡한 흐름도는 이해하기 어렵습니다

2. 일관된 표기법 사용
: 동일한 유형의 페이지나 기능은 동일한 방식으로 표현합니다

3. 적절한 상세도 유지
: 너무 세부적이거나 너무 추상적이지 않은 적절한 수준의 상세도를 유지합니다

4. 사용자 중심 설계
: 사용자의 관점에서 자연스러운 흐름을 설계합니다

5. 예외 상황 고려
: 오류 상황이나 예외 케이스에 대한 흐름도 포함합니다

6. 정기적인 업데이트
: 서비스 변경 시 흐름도도 함께 업데이트합니다

---

페이지 흐름도는 서비스의 전체 구조와 사용자 경험의 흐름을 시각화하는 중요한 도구입니다.

잘 설계된 페이지 흐름도는 개발자, 디자이너, 기획자 간의 원활한 소통을 돕고,
사용자 경험의 일관성과 효율성을 높이는 데 기여합니다.

페이지 번호 체계를 화면 설계서와 연동하여 사용하면,
개발 과정에서 페이지 간 연결 관계를 명확히 파악하고 참조할 수 있어
효율적인 개발이 가능해집니다.

서비스 기획 단계에서 페이지 흐름도를 꼼꼼히 작성하고 검토함으로써,
개발 과정에서 발생할 수 있는 많은 혼란과 오류를 사전에 방지할 수 있습니다.

Ⅸ. 화면 설계(스케치).

🩻 화면 스케치 - 페이지 흐름도에 따른 화면 스케치.

'페이지 흐름도(플로우차트)'가 완성되면 다음 단계로 각 페이지의 화면 스케치를 진행합니다.

화면 스케치는 디지털 작업 전 손으로 직접 그리는 초기 시각화 단계로,
서비스의 레이아웃과 주요 요소들을 빠르게 구상하는 과정입니다.

🩻 화면 스케치의 중요성.

화면 스케치는 다음과 같은 이유로 서비스 기획 과정에서 중요한 단계입니다:

1. 아이디어의 빠른 시각화
: 머릿속 아이디어를 빠르게 시각적으로 표현할 수 있습니다

2. 효율적인 반복 작업
: 디지털 작업보다 수정과 변경이 용이합니다

3. 창의성 촉진
: 손으로 그리는 과정에서 새로운 아이디어가 떠오르기도 합니다

4. 초기 문제점 발견
: 레이아웃이나 사용자 경험의 문제점을 초기에 발견할 수 있습니다

5. 리소스 절약
: 본격적인 디자인 작업 전에 방향성을 검증할 수 있어 시간과 비용을 절약합니다.

🩻 화면 스케치 시 고려사항.

단순화: 세부 디자인보다는 구조와 레이아웃에 집중합니다

일관성: 전체 페이지에서 일관된 디자인 패턴을 유지합니다

사용자 경험: 사용자의 시선 흐름과 조작 편의성을 고려합니다

반응형 고려: 다양한 기기에서의 표시 방식을 염두에 둡니다

핵심 기능 강조: 페이지의 주요 목적과 핵심 기능을 강조합니다

🩻 화면 스케치에서 스토리보드로.

화면 스케치가 완성되면 이를 바탕으로 더 상세한 스토리보드 작업을 진행합니다.

1. 디지털 도구 선택
: Figma, Sketch, Adobe XD 등 적합한 디지털 도구를 선택합니다

2. 스타일 가이드 설정
: 색상, 폰트, 아이콘 등 기본적인 스타일 요소를 정의합니다

3. 컴포넌트 설계
: 재사용 가능한 UI 컴포넌트를 설계합니다

4. 상세 와이어프레임 작성
: 스케치를 바탕으로 상세한 와이어프레임을 작성합니다

5. 인터랙션 정의
: 각 요소의 상호작용 방식을 정의합니다

6. 프로토타입 제작
: 필요한 경우 간단한 프로토타입을 제작하여 사용성을 검증합니다

---

화면 스케치는 디지털 작업 전 아이디어를 빠르게 시각화하고 검증하는 중요한 단계입니다.

경험 많은 기획자들이 손으로 직접 스케치를 하는 이유는 창의성을 촉진하고,
빠른 반복 작업이 가능하며, 초기 단계에서 문제점을 쉽게 발견할 수 있기 때문입니다.

화면 스케치를 통해 서비스의 전체적인 구조와 사용자 경험의 흐름을 미리 검토함으로써,
이후 디지털 작업 단계에서 발생할 수 있는 많은 시행착오를 줄이고
더 효율적으로 작업을 진행할 수 있습니다.

서비스 기획 과정에서 화면 스케치 단계를 생략하지 말고,
충분한 시간을 투자하여 아이디어를 발전시키고 검증하는 과정을 거치는 것이 좋습니다.

Ⅹ. 스토리보드(문서화)

🩻 스토리보드 - 도구를 활용한 화면 설계서 작성

'스토리보드(또는 화면 설계서)'는 서비스 기획의 최종 산출물 중 하나로,
앞서 진행한 모든 기획 과정을 시각적으로 구체화한 문서입니다.

이는 클라이언트, 기획자, 디자이너, 개발자 간의 핵심 소통 도구로 활용되며,
서비스의 실제 구현을 위한 청사진 역할을 합니다.

🩻 스토리보드의 중요성.

스토리보드는 다음과 같은 이유로 서비스 개발 과정에서 중요한 역할을 합니다.

1. 명확한 커뮤니케이션
: 추상적인 아이디어를 구체적인 시각물로 표현하여 모든 이해관계자가 동일한 이해를 가질 수 있게 합니다

2. 개발 가이드
: 개발자에게 구현해야 할 화면과 기능에 대한 명확한 지침을 제공합니다

3. 디자인 기준
: 디자이너에게 레이아웃과 UI 요소의 배치에 대한 기준을 제공합니다

4. 사전 검증
: 실제 개발 전에 사용자 경험과 인터페이스를 검토하고 개선할 수 있습니다

5. 범위 관리
: 프로젝트의 범위를 명확히 하여 범위 확대를 방지합니다

🩻 스토리보드 작성 도구.

피그마(Figma)

최근 UI/UX 디자인 분야에서 급부상한 피그마는
다음과 같은 장점으로 스토리보드 작성에 널리 활용되고 있습니다.

• 클라우드 기반
  : 별도의 설치 없이 브라우저에서 작업 가능

• 실시간 협업
  : 여러 사람이 동시에 작업하고 피드백을 주고받을 수 있음

• 컴포넌트 시스템
  : 재사용 가능한 UI 컴포넌트를 만들어 일관성 유지

• 프로토타이핑
  : 인터랙션과 화면 전환을 시뮬레이션할 수 있음

• 다양한 플러그인
  : 작업 효율을 높이는 다양한 플러그인 지원

• 버전 관리
  : 변경 이력을 추적하고 이전 버전으로 복원 가능

기타 스토리보드 작성 도구

• Sketch: Mac 전용 디자인 도구로, 직관적인 인터페이스와 풍부한 플러그인 생태계

• Adobe XD: 어도비의 UI/UX 디자인 도구로, 다른 어도비 제품과의 호환성이 좋음

• InVision: 프로토타이핑에 특화된 도구로, 디자인 시스템 관리 기능 제공

• Axure RP: 복잡한 인터랙션과 조건부 로직을 구현할 수 있는 고급 프로토타이핑 도구

• Balsamiq: 손으로 그린 듯한 스케치 스타일의 와이어프레임 작성에 특화된 도구

• PowerPoint/Keynote: 접근성이 높고 기본적인 와이어프레임 작성에 활용 가능
  

🩻 스토리보드 구성 요소.

1. 기본 정보

• 페이지 ID 및 제목

• 작성자 및 작성일

• 버전 정보

• 페이지 설명 및 목적

2. 와이어프레임

• 화면 레이아웃

• UI 요소 배치

• 콘텐츠 영역 구분

• 반응형 레이아웃(필요시)

3. 상호작용 정보

• 클릭, 스와이프 등 사용자 액션

• 화면 전환 방식

• 애니메이션 및 효과

• 상태 변화(호버, 포커스 등)

4. 기능 설명

• UI 요소별 기능 설명

• 데이터 입출력 방식

• 유효성 검사 규칙

• 예외 상황 처리 방법

5. 참고 사항

• 디자인 가이드라인

• API 연동 정보

• 기술적 제약 사항

• 관련 페이지 참조

🩻 피그마를 활용한 스토리보드 작성 방법.

1. 프로젝트 설정

• 피그마 계정 생성 및 로그인

• 새 프로젝트 생성

• 프레임 크기 설정(모바일, 데스크톱 등)

• 그리드 및 가이드라인 설정

2. 컴포넌트 시스템 구축

• 디자인 시스템 파일 생성

• 색상 스타일 정의

• 타이포그래피 스타일 정의

• 버튼, 입력 필드 등 기본 UI 컴포넌트 제작

• 컴포넌트 변형(variants) 설정

3. 와이어프레임 작성

• 페이지별 프레임 생성

• 레이아웃 구조 설정

• 컴포넌트 배치

• 텍스트 및 이미지 영역 설정

• 상태별 화면 변화 표현

4. 프로토타이핑

• 화면 간 연결 설정

• 트랜지션 효과 적용

• 인터랙션 정의

• 조건부 로직 설정(필요시)

• 프로토타입 테스트 및 수정

5. 문서화

• 컴포넌트 및 스타일 설명 추가

• 페이지별 주석 추가

• 개발자 참고 사항 기록

• 공유 설정 및 협업자 초대

🩻 효과적인 스토리보드 작성 팁.

1.일관성 유지
: 모든 페이지에서 동일한 스타일과 패턴을 사용합니다

2.모듈화
: 재사용 가능한 컴포넌트를 만들어 효율적으로 작업합니다

3.명확한 주석
: 개발자와 디자이너가 이해할 수 있도록 명확한 주석을 추가합니다

4.현실적 콘텐츠
: 가능한 실제 서비스에서 사용될 콘텐츠를 활용합니다

5.상태 표현
: 다양한 상태(로딩, 오류, 빈 상태 등)를 모두 표현합니다

6.접근성 고려
: 색상 대비, 키보드 탐색 등 접근성 요소를 고려합니다

7.피드백 수렴
: 이해관계자들의 피드백을 지속적으로 반영합니다

---

스토리보드는 서비스 기획의 최종 단계로,
앞서 진행한 모든 기획 과정을 시각적으로 구체화하는 중요한 작업입니다.

피그마와 같은 현대적인 디자인 도구를 활용하면
더욱 효율적이고 협업이 용이한 스토리보드를 작성할 수 있습니다.

잘 작성된 스토리보드는 클라이언트, 기획자, 디자이너, 개발자 간의 원활한 소통을 돕고,
서비스 개발 과정에서 발생할 수 있는 많은 오해와 문제를 사전에 방지합니다.

서비스 기획자는 스토리보드 작성 능력을 지속적으로 발전시켜,
자신의 아이디어를 명확하고 효과적으로 전달할 수 있는 역량을 키워나가는 것이 중요합니다.