크몽 지식창고

웹/앱 기획 준비 총정리 가이드

2023-08-01

온라인 비즈니스가 보편화됨에 따라 웹/앱은 비즈니스를 운영하는 데 필수적입니다. 제품을 판매하거나 브랜드를 홍보하는 등 웹/앱의 진행 목적이 다양하기 때문에 목적과 목표에 맞춰 기획을 완성해야 합니다.

웹/앱 기획 시에는 목표와 사용자를 명확하게 정의하여 프로젝트의 방향성을 확립해야 합니다. 개발자 및 디자이너와 원활한 커뮤니케이션을 위해 ① 사용자 요구 정의서 ② 인포메이션 아키텍처 ③ 와이어 프레임 ④ 스토리보드 ⑤ 프로토타입 작성이 필요합니다.

💡이 콘텐츠를 다 읽으면 알 수 있어요 (3분)

1. 웹/앱 기획 시 준비해야 하는 문서

2. 사용자 요구 정의서 작성 방법

3. 인포메이션 아키텍처 작성 방법

4. 와이어 프레임 작성 방법

5. 스토리보드 작성 방법

6. 프로토타입 작성 방법

1. 웹/앱 기획 시 준비 할 문서

웹/앱 기획 시 준비해야 하는 문서에는 ① 사용자 요구 정의서 ② 인포메이션 아키텍처 ③ 와이어프레임 ④ 스토리보드 등이 있습니다.

이러한 문서를 잘 준비해야 프로젝트 초기 단계에서 이해관계자들과 원활하게 의사소통할 수 있습니다. 또한, 사용자들의 요구와 피드백을 바탕으로 프로젝트의 효율성과 품질을 향상시키고. 웹/앱의 만족도를 높일 수 있습니다.

사용자 요구 정의서: 사용자 요구사항을 바탕으로 한 주요 기능부터 시스템 요구사항까지 정리한 문서입니다. 사용자에게 필요한 기능 설명, 성능·보안과 같은 비기능적 요구사항, 예산·일정과 같은 제한 사항, 우선순위가 포함되어야 합니다.
인포메이션 아키텍처: 정보의 쉬운 접근성을 위해 정보를 체계적으로 구조화하고 이해할 수 있도록 설계한 문서입니다. 정보 아키텍처는 UX 디자인의 한 부분이며, 웹/앱의 사용성과 효율성을 향상시키는데 중요한 역할을 합니다.
와이어 프레임: 레이아웃을 구성하는 시각적 가이드로, 검은색 선으로 이루어진 화면 구조를 표현하는 문서입니다. 디자인과 콘텐츠에 집중하기 전에 인터페이스의 기본 구조를 정의하는 데 사용됩니다.
스토리보드: 사용자 경험(UX) 측면에서 시각적으로 표현한 문서로 사용자의 행동과 화면 이동 등의 내용이 포함됩니다. 프로젝트의 구조와 흐름을 시각적으로 표현해 디자이너, 개발자, 의뢰인의 의사소통을 원활하게 하고 프로젝트의 방향성을 제시합니다.

2. 사용자 요구 정의서 작성법

사용자 요구 정의서는 ① 사용자 요구 정의서의 역할 ② 사용자 조사 및 요구사항 도출 ③ 명확성과 일관성을 고려하며 작성해야 합니다.

사용자 요구 정의서의 역할: 사용자 요구 정의서는 웹/앱 기획의 전체 방향을 설정하는 가장 중요한 단계로, 기획 시 사용자 중심으로 프로젝트가 진행할 수 있도록 하는 동시에 개발자, 디자이너 등 다양한 이해관계자들과의 커뮤니케이션 도구로 활용될 수 있습니다.
사용자 조사 및 요구사항 도출: 사용자 요구 정의서에는 타깃 사용자를 설정하여 그들의 필요 사항, 문제점, 기대사항 등을 확인 후 작성해야 합니다. 이를 바탕으로 요구사항을 기능, 디자인, 호환성 등으로 섹션을 분류합니다.
명확성과 일관성: 사용자 요구 정의서를 작성할 때에 명확하고 일관성 있게 작성해야 합니다. 프로젝트에 참여하는 모든 이해관계자가 이해할 수 있도록 구체적이고 일관되게 작성해야 합니다.

3. 인포메이션 아키텍처 작성법

인포메이션 아키텍처 작성 시에는 ① 인포메이션 아키텍처의 역할 ② 정보 구조 및 내비게이션 설계 ③ 유지보수와 확정성 등을 생각하며 작성해야 합니다.

인포메이션 아키텍처의 역할: 인포메이션 아키텍처는 웹/앱 기획 시 정보를 구조화하고 표현하는 과정으로 사용자가 웹사이트에서 필요로 하는 정보를 쉽게 찾을 수 있도록 도와주는 큰 역할을 합니다.
정보 구조 및 내비게이션 설계: 사용자 요구 정의에서 수집된 사용자 조사 및 요구사항을 바탕으로 정보를 분류 및 구조화하여 웹사이트에서 사용자가 쉽게 탐색할 수 있는 구조를 설계합니다. 또한, 이를 기반으로 메뉴, 버튼 등을 설계하여 내비게이션 시스템을 완성합니다.
유지보수와 확장성: 인포메이션 아키텍처를 작성할 때는 유지보수와 확장성을 주의하며 작성해야 합니다. 웹사이트나 앱이 변경되거나 새로운 기능을 추가하는 경우가 발생할 수 있기 때문에 유지보수가 가능하고 유연하게 확장할 수 있도록 작성해야 합니다.

4. 와이어프레임 작성법

와이어프레임은 ① 와이어프레임의 역할 ② 기능 정의 ③ 페이지별 구조 설계 및 콘텐츠 배치 ④ 단순·간결 등을 고려하며 작성해야 합니다.

와이어프레임의 역할: 와이어프레임은 웹/앱 기획 시 전체적인 시스템을 시각화하여 나타내는 문서입니다. 작업 시 커뮤니케이션의 도구로 사용됩니다.
기능 정의: 와이어프레임 작성 시 기능 정의를 먼저 진행해야 합니다. 필요한 페이지를 나열하고 각 페이지에서 사용자가 무엇을 할 수 있는지 정의합니다.
페이지별 구조 설계 및 콘텐츠 배치: 기능 정의 완료 후 페이지별 레이아웃과 인터페이스를 설계하는 단계로 검은색 선을 이용하여 콘텐츠의 배치를 간단하게 그려 전체적으로 큰 그림을 알아볼 수 있도록 합니다.
단순·간결: 와이어프레임은 아이디어를 시각화하는 문서로 완벽하지 않을 수 있고 수정사항이 많이 발생할 수 있습니다. 따라서 디자인적인 요소에 집중하기보다는 핵심적인 구조와 콘텐츠에 집중될 수 있도록 단순하면서도 간결하게 작성해야 합니다.

5. 스토리보드 작성법

스토리보드 작성 시에는 ① 스토리보드의 역할 ② 페이지 정의 및 화면 구성 ③ 상호작용 설명 및 플로우 표현 ④ 중요한 기능 강조 등을 생각하며 작성해야 합니다.

스토리보드의 역할: 스토리보드는 본격적으로 디자이너와 개발자가 함께 보는 문서로 웹/앱의 페이지와 기능을 시각적으로 나타내어 구조와 흐름을 이해할 수 있게 만듭니다.
페이지 정의 및 화면 구성: 와이어프레임에 작성된 내용을 바탕으로 페이지 정의를 마무리하고, 페이지별로 텍스트, 이미지 등의 화면 요소들을 시각적으로 표현하고 배치합니다.
상호작용 설명 및 플로우 표현: 화면별 사용자의 행동을 예상하고 이에 따른 앱의 반응을 그림으로 표현하고 설명합니다. 또한 페이지에서 사용자의 경로를 시각적으로 파악할 수 있도록 상세한 플로우 차트를 작성합니다.
중요한 기능 강조: 스토리보드를 작성할 때 사용자에게 필요한 중요한 정보나 기능은 강조해서 나타내야 합니다. 핵심적인 상호작용이 명확히 드러나도록 주의하여 작성해야 합니다.

6. 프로토타입 작성법

프로토타입은 ① 프로토타입의 역할 ② 도구 선택 ③ 기본 레이아웃 작성 및 상호작용 구현 ④ 데이터 입력 및 페이지 간 이동 구현 ⑤ 실제 사용 환경 고려 등을 유의하며 작성해야 합니다.

프로토타입의 역할: 프로토타입을 통해 앱의 기능과 플로우를 점검하여 웹/앱의 문제점이나 개선점을 도출해 내기 때문에, 실제 개발 진행 전에 웹/앱의 최종 품질 향상에 도움을 주는 역할입니다.
도구 선택: 프로토타입 작성 시 피그마, 어도비 XD, 스케치 등 어떤 도구를 사용하여 작성할지 결정합니다.
기본 레이아웃 작성 및 상호작용 구현: 선택한 도구로 화면 크기와 배치 등을 생각하며 기본 레이아웃을 작성하고, 화면 전환이나 애니메이션 등의 상호작용을 추가하여 시뮬레이션합니다.
데이터 입력 및 페이지 간 이동 구현: 버튼, 텍스트 입력 등 데이터 입력 요소를 추가하여 사용자가 데이터를 입력할 수 있도록 하고, 특정 행동을 통해 페이지 간의 이동이 필요한 경우 이를 구현합니다.
실제 사용 환경 고려: 프로토타입을 작성할 때는 기기 종류, 화면 크기 등 실제 사용자의 사용 환경을 고려하여 제작해야 합니다. 다양한 환경에서 시뮬레이션 함으로써 사전에 여러 가지 문제점을 파악하고 개선할 수 있습니다.

복잡한 웹/앱 기획은? 크몽에서