입👄 기획의 기초: 노코드(버블)로 기획서 초안 작성기 (a.k.a ‘뭐든지 기획’) 만들기 파트 1.

본격적인 개발 전에 AI의 도움을 받아, 기획의 핵심인 아래 3가지 문서를 작성하는 사례입니다

서비스 시나리오, 메뉴 구조도, 스토리보드(화면설계서 혹은 와이어프레임)

소개

지피터스 AI스터디 14기(노코드 버블)에 참여중인 최피디라고 합니다.👋
(방송국 피디 아님 😆)

현재 프리랜서로 앱/웹 기획, 피그마 활용 기획 강의 등 을 하고 있는데요. 직접 개발을 해보면 더 나은 기획 서비스를 제공할 수 있고, 언젠가는 제가 구상중인 서비스도 직접 만들어 볼 수 있지 않을까, 하는 기대에 버블을 공부해 보려고 합니다.

버블은 노코드 개발툴이지만 결국 좋은 서비스를 만들기 위해서는 좋은 기획이 선행되야 하죠. 그래서 버블로 본격적인 개발전에 첫 파트로 입👄기획부터 진행한 사례를 소개합니다.

진행 방법

저는 보통 다음과 같은 순서로 기획합니다.

1. 요구사항정의: 사전 조사 및 온라인 미팅을 통한 심층 분석

2. 벤치마킹: 유사/경쟁 서비스 조사

3. 기획방향/컨셉 도출: 핵심 방향성 설정

4. 정책 및 구조 확정: 용어, 서비스 시나리오, 데이터 정의서 및 메뉴 구조 작성

5. 세부기획: 화면별 기능 및 스토리보드 작성

6. 수정/컨펌: 피드백 반영 및 확정

7. 완료: 최종 산출물 전달

1. 사용자 시나리오 작성

위 순서는 제가 고객과 일할 때의 방식이고, 1~3은 제 머리속에 있는 내용을 그대로 쓰면 되므로 생략했어요. 이 부분부터 구상이 필요하다면 처음부터 AI의 도움을 받는 것도 방법입니다. 아예, 아래와 같은 프롬프트로 아이데이션부터 물어보는거죠.

새로운 서비스를 만들고 싶은데 아이디어가 없어. 도와줘.

이런식으로 시작부터 대놓고 물어가며 티키타카해도 좋습니다.

일단 저는 고객들이 일을 의뢰하기 전에 스스로 앱이나 웹사이트의 기획 방향을 생각해보고, 더 구체적인 내용으로 의뢰할 수 있도록 간편하게 기획서 초안을 작성하는 서비스를 구상해 봤어요.

먼저 사용자 시나리오를 작성합니다.

간편하게 기획서 초안을 작성하는 서비스를 만들고 싶어. 이 서비스의 사용자 시나리오를 작성해줘.

ALT

오디오 신호의 흐름을 보여주는 다이어그램

2. 메뉴구조도(IA) 작성

다음은 위 시나리오에 따른 메뉴구조도 작성입니다. 메뉴구조가 정해져야 버블로 만들 화면이 확정되기 때문에 여기가 기획에서 가장 중요한 과정이죠. 아래와 같이 요청합니다.

이 시나리오로 메뉴구조도를 작성해줘

ALT

한국어 단어가 적힌 테이블

3. 화면 기획

위와 같이 메뉴구조가 확정되면 기획은 거의 끝난겁니다. 이 메뉴구조를 바탕으로 하나씩 화면을 만들어 나가면 됩니다.

Step 0. 화면을 작성해줘

이렇게 요청하면 아래와 같은 화면이 짠~!🎉

ALT

한국 구글 플레이 스토어 스크린샷

💡 AI툴은 어떤 것을 써도 상관없지만, 서비스 기획은 실제 화면을 만들 수 있는 클로드가 더 유용해요.더 복잡한 화면을 만들고 싶다면 v0.dev 도 좋습니다. (무료로 매일 10개 이상 화면을 만들 수 있어요)
💡 화면에 표시해야 할 항목이나 데이터를 명확히 설명하면 더 정교한 화면 생성이 가능해요(메뉴구조도 설명 칼럼에 미리 작성해 두면 편함 "설명 칼럼에 표시해야 할 데이터를 작성해줘") 

이렇게 하나씩 화면을 만들어 나가면 기획은 끝이죠.

클로드가 만든 화면을 참고하며 버블에서 개발하면, 머리속에만 있는 생각으로만 만들기보다 훨씬 완성도 높은 개발이 가능해 집니다.

앞으로 이 기획으로 실제 서비스 만드는 과정을 업데이트할 예정입니다.

다음 편을 기대해 주세요~🙏 🙏