[8기 프롬프트] 아이디어만 입력하면 앱 페이지 기획과 DB 설계해주는 챗봇 개발하기


으아아아앙아아악 너무 늦었..지만 종일 고생했으므로 결과물을 올려보도록 하겠습니다ㅜㅜ

하고 싶었던 것

  • 유저 아이디어 한 문장을 입력하면 앱을 설계해주는 챗봇을 개발하고 싶었음

  • 아이디어 입력 → 앱 유형 선택 → 앱 이름 및 설명 작성 → 핵심기능 3가지 도출 → 기능을 구현하기 위한 페이지 구조 설계 → 각 페이지 별 UI 컴포넌트 화면 구성 → 데이터 구조 설계 → 샘플데이터 작성

  • 한 번에 시도하기보다 몇 개만 차례로 시도해보기로 함

  • 주요 목적은 프롬프트를 데이터 구조적으로 접근해보는 시도를 해보는 것이었음


접근

  • step을 나누어서 각각 [역할, 요청, 입력, 출력]을 정의해주자

  • 이전 스텝의 출력을 다음 스텝의 입력으로 넣는 게 가능할까?

  • 최대한 json 형태를 활용하여 gpt와 교감하고자 함 (벨루가 일시적 버그로 프롬프트에 중괄호가 들어가지 않아서, json 문법을 조금 벗어남)


결론

  • <변수명> 꺽쇠 형태로 넣은 변수명이 잘 작동함. 이전 스텝의 출력을 변수로 지정하여 다음 스텝의 입력으로 넣은 것이 잘 작동함.

  • 100% 정교한 페이지 기획과 디비 설계를 해주지는 못했지만, 그럼에도 아이디어 한 문장만 넣어도 필요한 기능을 제안해주고, 각 페이지에 들어갈 내용들을 구체적으로 제안해줌으로써 사용자로 하여금 러프한 아이디어를 단계별로 구체화시키는 데에 도움을 줄 거라 생각함.


추가 시도할 것

  • 유저로부터 명령을 입력받아서, 그 명령에 해당하는 스텝만 작동시키게끔 해보고자 함

  • 예를들어, 유저한테 선택권이 다음과 같이 주어짐 : [1. 앱 개요 / 2. 핵심 기능 3가지 / 3. 페이지 구조 / 4. 데이터베이스 구조 / 5. 샘플데이터 생성] //각 선택권마다 단축키를 부여하여 유저는 단축키만 입력하도록

  • 한번에 쫘라락 나오기보다는, 유저가 자신의 러프한 아이디어 한 문장이 단계별로 구체화되는 과정을 경험하게끔 하고 싶음

  • 유저 아이디어 한 문장에서 정교한 앱 기획(화면 및 디비)까지 하기 위해서 유저에게 필요한 질문들을 gpt가 계속 던져주고 취합하는 챗봇으로 발전시켜봐야겠음.


Step1. 앱 유형 선택 및 핵심 기능 도출

### Step1. 앱 유형 선택 및 핵심 기능 도출
역할 :
너는 10년차 IT 전문 컨설턴트야. 너는 앱서비스 창업자들 100 여 명을 컨설팅 해왔어. 앱을 개발할 때 린하게 고객검증을 해야하는 것을 알고있어.

요청 :
1) 다음의 앱 아이디어를 듣고 어떤 앱 유형인지를 "app_type" 리스트 중 1개 선택해줘. app_type : ["블로그형", "sns형", "이커머스형", "예약신청형", "데이터관리형"]
2) 이 앱이 사용자에게 제공하는 가치를 포함하여 1줄로 앱을 설명해줘.
3) 이 앱으로 mvp 테스트를 하기 위해서 반드시 필요한 핵심 기능 3가지를 나열해줘. 
단계별로 생각해보자.

입력 : <user_idea>
출력 : <step1_output_features>
<step1_output_features>: 
      "앱 유형": "<app_type>",
      "앱 설명": "<app_description>",
      "핵심기능": ["<feature1>", "<feature2>", "<feature3>"]


Step2. 화면 기획

### Step2. 화면 기획
역할 :
너는 UIUX 전문 디자이너야. 너는 약 100여 개의 앱서비스 화면을 기획해왔어. 너가 가장 잘하는 일은 앱의 요구 기능을 구현할 수 있는 페이지 구조를 기획하고, 각 페이지마다 필요한 UI 컴포넌트를 배치하여 화면을 디자인하는 일이야.

요청 :
다음의 앱 아이디어와 핵심 기능을 구현할 수 있는 앱 페이지 구조를 설계해주고, 각 페이지마다 필요한 UI 컴포넌트들을 배열해줘. 

입력 : <step1_output_features>
출력 : <step2_output_pages>
<step2_output_pages> : [
    "페이지명" : "<page_name1>",
    "페이지 한 줄 소개" : "<page_description1>",
    "컴포넌트 구성":["<component1> : <description1>","<component2> : <description2>","<component3> : <description3>",...]
]... 


Step3. DB 구조 설계

### Step3. DB 구조 설계
역할 :
너는 10년차 풀스택 앱개발자야. 너는 앱 개발 시 필요한 데이터베이스 구조에 대한 이해가 매우 높아. 
요청 :
다음 앱의 핵심기능, 페이지구조를 보고 필요한 DB를 설계해줘
입력 : <step1_output_features>, <step2_output_pages>
출력 : <step3_output_databases>
<step3_output_databases> : [
    "테이블명" : "<table_name1>",
    "필드":["<filed_name1>(<field_type1>)", "<filed_name2>(<field_type2>)", "<filed_name3>(<field_type3>)"...]
]...


최종 출력 포맷

### 최종출력 포맷
[**앱 개요**]
- 앱 유형 : <app_type>
- 앱 설명 : <app_description>
- 핵심 기능 : 1) <feature1>, 2) <feature2>, 3) <feature3>

[**페이지 구조**]
1. <page_name1>
설명 : <page_description1>
- <component1> : <description1>
- <component2> : <description2>
- <component3> : <description3>
- ...

2. <page_name2>
설명 : <page_description2>
- <component1> : <description1>
- <component2> : <description2>
- <component3> : <description3>
- ...

3. <page_name3>
설명 : <page_description3>
- <component1> : <description1>
- <component2> : <description2>
- <component3> : <description3>
- ...
...


[**데이터 구조**]
1. <table_name1>
- <filed_name1>(<field_type1>)
- <filed_name2>(<field_type2>)
- ...

2. <table_name2>
- <filed_name1>(<field_type1>)
- <filed_name2>(<field_type2>)
- ...
...


벨루가 챗봇 결과물

  • 제공한 출력 포맷에 잘 맞게 결과물이 나옴

  • 그러나 보다 정교한 프롬프팅 작업이 필요해보임. 추천기능이 있으면 데이터구조에 ‘추천’ 테이블이 들어가야하는데 그거까지 뱉어주지는 못했음.

  • 그럼에도 아이디어 한 문장만 넣어도 필요한 기능을 제안해주고, 각 페이지에 들어갈 내용들을 구체적으로 제안해줌으로써 사용자로 하여금 러프한 아이디어를 단계별로 구체화시키는 데에 도움을 줄 거라 생각함.



(여기서 잠깐..) 사실 원래 DB 구조도 뱉어주게끔 프롬프팅을 했었음

  • 그러나 페이지구조, DB구조까지 뱉어버리니 너무 길어지기도 했고

  • DB구조를 뱉어준다고 해서 이 결과값을 어디 당장 써먹을 데가 없어서.. (그냥 아이디어를 앱으로 개발할 때의 데이터 구조화 프로세스에 대한 이해 정도랄까.)

  • 오히려 페이지구조를 뱉게 하면, 화면 ui 만들어주는 AI 툴들에 넣어볼 수 있지 않을까 싶어서

  • DB 구조 뱉게하는 건 제외했음.

너는 10년차 앱개발 전문가야. 사용자가 아이디어를 입력하면, 1) idea를 위한 1개의 app_type을 고르고, 이 앱이 사용자에게 주는 가치를 포함한 1문장 설명을 적어줘. 2) 이 앱에 꼭 필요한 핵심 기능 3가지를 나열해줘. 3) 이 앱을 개발하기 위한 DB 구조를 설계해줘.

 "user_idea": "<idea>"
 "app_type": ["블로그형", "sns형", "이커머스형", "예약신청형", "데이터관리형"]
  "output_structure": 
      "app_type": "<app_type>",
      "description": "1문장 설명",
      "features": ["<feature1>", "<feature2>", "<feature3>"],
      "data_structure": ["<table_name1>":"<filed_name1>(<field_type1>),<filed_name2>(<field_type2>),<filed_name3>(<field_type3>)", "<table_name2>":"<filed_name1>(<field_type1>),<filed_name2>(<field_type2>),<filed_name3>(<field_type3>)"]


(다시 돌아와서) 위자드에 입력

- 아이디어 : 철학 주제에 대한 나의 생각을 서로 나누는 앱
- 앱 유형: sns형
- 앱 설명: 이 앱은 사용자들이 철학 주제에 대한 나의 생각을 서로 나누고 공유할 수 있는 공간입니다.
- 핵심 기능: 1) 주제별 게시물 작성 기능, 2) 댓글 및 토론 기능, 3) 관심 주제 추천 기능
- 페이지 구조 : [홈 페이지, 게시물 작성 페이지, 게시물 상세페이지, 개인프로필 페이지, 검색 및 추천 페이지]
- 데이터 구조 : [사용자(사용자ID, 이름), 게시물(게시물ID, 사용자ID, 주제, 내용, 작성일), 댓글(댓글ID, 사용자ID, 게시물ID, 내용, 작성일)]
- Idea: An app to share your thoughts on philosophy topics with each other
- App type: Social networking
- App description: This app is a place where users can share their thoughts on philosophy topics with each other.
- Core features: 1) Post creation by topic, 2) Comment and discussion, 3) Recommendation of topics of interest
- Page structure: [Home page, post creation page, post detail page, personal profile page, search and recommendation page].
- Data structure: [User (UserID, Name), Post (PostID, UserID, Topic, Content, Date), Comment (CommentID, UserID, PostID, Content, Date)]

//300자 글자 제한이 있어서 줄여서 넣었습니다.


위자드 ui 결과물

  • 내가 제시한 페이지 구조까지 정확하게 반영해주지는 못했지만, 그래도 sns형 유형이나 개인 프로필 페이지 등은 개발해줌

  • 그럴싸한 디자인으로 바로 시각화 해주니까, 아이디어 한문장이 눈 앞에 보이는 가치를 제공해줌


한 번에 여러 페이지 생성하는 기능은 2번만 무료. 그러나 각 페이지 별로 생성하는 건 조금 더 주네요?

  • 챗봇 출력 결과의 페이지 구조에 해당하는 각 페이지를 나눠서 생성하였음

5번까지 돌릴 수 있게 해주네요 (홈을 2번 생성해서 내게는 4페이지만 남았다..)


한 페이지씩 생성한 결과

  • 100% 반영은 아니지만 내가 요청한 프롬프트 내의 기능들을 70% 정도는 반영해줌

  • 특히 게시물 작성 페이지에서 visibility(공개여부) 설정하는 디테일까지 살려주다니!

  • ‘post’ 라고 프롬프트에 넣었더니, 프로필 페이지에서도 ‘15 Posts’ 라고 디자인되었음


이번엔 해치하이커에 넣어보기

  • hatchhiker.com

  • 작년 9월부터 지난 10월까지 꼬박 1년동안 초기 창업멤버로 함께 론칭했던 서비스

  • 아이디어 한문장만 넣으면 실제 작동하는 앱으로 개발해줌. 노코드 툴 bubble 기반 제작.

  • 위자드가 화면까지만 기획해줬다면, 해치하이커는 실제 기능이 작동하는 앱으로 제작해주는 컨셉

  • 챗봇 개발 연습할 겸 이 서비스의 간략버전(앱개발은 아니고 기능기획과 페이지, 데이터구조 설계까지?)를 만들어보고 싶었음 (겸사겸사 홍보..?)

  • 아직 베타버전이라… 작동 안될 때도 있음 …ㅎㅎ (하지만 팀원들이 매일같이 개발 중이니 곧 멋진 서비스가 탄생할 거예요! ><)

  • 결과물 짜잔 !

  • 아이디어 넣고 > 앱 유형 선택 > 작동하는 앱 생성


아이디어를 넣으면


앱 유형을 선택하게끔 해줌. 기다리면..


작동하는 앱이 생성됨!


댓글기능, 좋아요 기능, 스크랩 기능이 가능함

sns형 답게 프로필 페이지도 생성됨


(추가) - relume 툴 활용하여 화면 와이어프레임 기획하기!!!

지피터스 게시판 보다가 김수연님의 ‘툴 유목민의 웹페이지 디자인 제작 툴 비교하기’ 게시글에서 위자드와 함께 ‘http://Relume.io‘ 이라는 서비스를 알게 됨.


아래는 게시글


바로 시도!

어제 만든 챗봇의 결과물을 넣어주었음

- 이 앱은 사용자들이 철학 주제에 대한 나의 생각을 서로 나누고 공유할 수 있는 공간입니다.
- 핵심 기능: 1) 주제별 게시물 작성 기능, 2) 댓글 및 토론 기능, 3) 관심 주제 추천 기능
- 페이지 구조 : [홈 페이지, 게시물 작성 페이지, 게시물 상세페이지, 개인프로필 페이지, 검색 및 추천 페이지]
- 데이터 구조 : [사용자(사용자ID, 이름), 게시물(게시물ID, 사용자ID, 주제, 내용, 작성일), 댓글(댓글ID, 사용자ID, 게시물ID, 내용, 작성일)]

짜잔 출력!

  • 이거 대박!!!

  • 페이지 구조 넣으니까 정확하게 해당하는 페이지를 생성해줌

  • 사이트맵 뿐 아니라……. 와이어프레임도 그려줌 ㅜㅜㅜㅜㅜ (와이어프레임은 1페이지만 무료, 나머지는 유료플랜)


최종 후기

  • (챗봇) 유저 아이디어 입력 → 핵심기능 3가지 도출 → 기능 구현을 위한 페이지 구조 설계

  • (Relume.io) Relume에 넣고 페이지 사이트맵(페이지 별 컴포넌트 구성) → 최종 와이어프레임 생성

  • (Framer) html to framer 익스텐션 활용 하여, 리룸 결과물을 프레이머로 옮기기 → 많이 깨져서 실패

  • (Uizard) 스크린샷을 넣으면 위자드 화면으로 구성해주는 기능으로 리룸 결과물 옮기기 → 많이 깨져서 실패

  • 시도해보면 좋을 아이디어

    • Relume 와이어프레임에서 ‘copy to webflow’기능 제공(유료플랜) → 웹플로우로 옮기기(잘 옮겨지는지는 아직 모름. 유료기능이니까 퀄리티가 괜찮지 않을까?)

    • 이렇게 해보면 아이디어 한문장 → [챗봇 → 리룸 → 웹플로우] → 작동하는 앱 순으로 해볼 수 있지 않을까????

  • 리룸 체고……… 리룸 소개해주셔서 감사합니다ㅜㅜ (꾸벅)


아래는 리룸 → 웹플로우 소개 링크


(추가) 리룸에 바로 붙여볼 수 있도록 챗봇 출력물 포맷을 바꾸면 어떨까?


결과




흠.. free trial로 다른 와이어프레임까지 생성해봤는데,,, 앱화면 기획이 아니라 죄다 랜딩페이지처럼 와이어프레임을 그려주네요ㅜ


앱 와이어프레임은 위자드가 낫겠습니다

월 19달러 위자드.. 1달만 써볼까요


두근두근

  • 앱을 여러 페이지로 한 번에 기획해주는 magic 모드 사용

  • 챗봇의 맨 아래 리룸 결과물을 복붙 (300자 넘으면 사알짝 줄여준다..)

An app that allows users or businesses to efficiently manage project tasks, providing features such as task creation, assignment, and progress tracking. page_structure : [Project Task List, Task Creation, Task Detail, Task Priority Setting]


다음은, 페이지 별로 제작해보고자 함

  • 챗봇 결과물 중 한 페이지만을 복사해서 gpt로 요약해서 넣음

# 프로젝트 태스크 목록 페이지
Project Tasks List Page
- Description: A page where you can view a list of project tasks created by users.
- Task list component: A component that shows information such as the title, author, and priority of each task.

# 태스크 생성 페이지
Task creation page
- Description: Users create new tasks.
- Task title input component: Users enter the task title.
- Task description component: Users enter the task description.
- Task assignee selection component: Users select a team member to assign the task.

# 태스크 상세 페이지
Task Details Page
- Description: Shows task details.
- Task Title Component: Displays task title.
- Task Content Component: Displays task content without any images.
- Task Assignee Component: Displays task assignee.
- Task Progress Component: Shows task progress.

# 태스크 우선순위 설정 페이지
Set Task Priority page
- Description: The page to set the priority of the selected task.
- Task priority selection component: The component where the user sets the priority of the task.


위자드 각 페이지별 ai 생성 결과

리룸 후기

  • 장점

    • 사이트맵으로 페이지의 위계구조를 파악할 수 있음

    • 내가 입력한 페이지명과 페이지구조를 그대로 반영해줘서 마치 진짜 내가 만든 사이트맵 같음

    • 각 페이지마다 와이어프레임을 생성해줌. 서비스 소개 랜딩페이지로 home을 채택하기에 유용

  • 단점

    • 사이트맵과 와이어프레임을 기똥차게 만들어주는듯 했으나..

    • 각 페이지를 ‘앱’으로 생각하지 않고 ‘랜딩페이지’로 생각함.

    • 뱉어준 와이어프레임 결과물이 전부 각 페이지별 랜딩페이지

    • ex) 태스크 상세페이지 → 상세 태스크 자체가 마치 서비스인 것처럼 히어로섹션부터 랜딩페이지를 그려줌


위자드 후기

  • 장점

    • 앱서비스 화면 ui 기획을 해줌. 보다 그럴듯한 서비스 느낌.

    • 앱 설명을 넣으면 전체 페이지를 알아서 몇 개 생성해줌 (내가 프롬프트로 입력한 페이지 구조를 따르지는 않음)

    • 각 페이지마다 상세 설명을 넣어서 생성할 수 있음. 각 컴포넌트들을 내가 위자드 편집화면에서 이것저것 배치해볼 수 있음.

  • 단점

    • 이미 만들어진 템플릿들 중에 골라주는 방식이라, 내가 요청한 페이지 별 구성 컴포넌트들을 1:1 매칭하여 반영해주지는 못함.

    • 컴포넌트들을 다 나열해서 배치해주는 게 아니라, 페이지별로 템플릿을 만들어놓고 유저입력과 가장 유사한 페이지를 뱉어주는 개념.

    • 그래서 ‘태스크 상세페이지에 이미지는 넣지마’라고 했지만 이미지를 무조건 넣어줌.


최종 후기

  • 챗봇으로부터 페이지 구조 설계와, 페이지 안에 들어갈 컴포넌트 구성까지는 해올 수 있음

  • 이 페이지를 와이어프레임 화면으로 그려보기 위해 1) 위자드, 2) 리룸 각각 써봄

  • 둘다 프로버전으로 각각 테스트 (위자드 19달러, 리룸 free trial) 결과, 리룸으로는 서비스 소개 랜딩페이지를 뽑고, 위자드로 전체적인 앱디자인과 컨셉을 구현해보자. 고객에게 이게 무슨 서비스인지 대략적으로 설명하기에는 좋음.


아 계속 이거에 꽂혀서 정작 해야하는 일을 못하는 중…………… ㅎㅎ 끗…



24.01.01 추가

피그잼에서.. WireGen - AI GPT wireframe generation 이라는 플러그인을 발견하였음.

바로 위에 위자드에 넣었던 페이지 기획안 설명을 그대로 넣었더니 (복붙해서 가져옴)

# 프로젝트 태스크 목록 페이지
Project Tasks List Page
- Description: A page where you can view a list of project tasks created by users.
- Task list component: A component that shows information such as the title, author, and priority of each task.

# 태스크 생성 페이지
Task creation page
- Description: Users create new tasks.
- Task title input component: Users enter the task title.
- Task description component: Users enter the task description.
- Task assignee selection component: Users select a team member to assign the task.

# 태스크 상세 페이지
Task Details Page
- Description: Shows task details.
- Task Title Component: Displays task title.
- Task Content Component: Displays task content without any images.
- Task Assignee Component: Displays task assignee.
- Task Progress Component: Shows task progress.

# 태스크 우선순위 설정 페이지
Set Task Priority page
- Description: The page to set the priority of the selected task.
- Task priority selection component: The component where the user sets the priority of the task.


결과 (대박..)

  • 글자 수 제한이 없어서 위 텍스트 전체를 입력했고

  • 내가 나눈 4개의 페이지 구조를 그대로 따라줬고

  • 각페이지마다 내가 넣은 컴포넌트까지도 반영해줬고

  • 각 페이지의 ui 화면 와이어프레임을 그려줬고

  • 그걸 모두 copy to figma로 옮겨준다



아래는 페이지별로 결과물입니다.

  • 페이지 전체 프롬프트를 일괄 입력했는데, 각 페이지 별로 얼마나 반영되었는지를 비교하기 위해서 페이지별로 나눠서 입력과 출력을 보여드릴게요

# 프로젝트 태스크 목록 페이지
Project Tasks List Page
- Description: A page where you can view a list of project tasks created by users.
- Task list component: A component that shows information such as the title, author, and priority of each task.


# 태스크 생성 페이지
Task creation page
- Description: Users create new tasks.
- Task title input component: Users enter the task title.
- Task description component: Users enter the task description.
- Task assignee selection component: Users select a team member to assign the task.


# 태스크 상세 페이지
Task Details Page
- Description: Shows task details.
- Task Title Component: Displays task title.
- Task Content Component: Displays task content without any images.
- Task Assignee Component: Displays task assignee.
- Task Progress Component: Shows task progress.
  • 컴포넌트들도 모두 반영해준 것을 볼 수 있음!!!


# 태스크 우선순위 설정 페이지
Set Task Priority page
- Description: The page to set the priority of the selected task.
- Task priority selection component: The component where the user sets the priority of the task.


(참고) 25개 화면까지는 무료, 월 6.99달러 내면 100개까지 화면을 만들 수 있다고 합니다!

또 신기한 거 발견하면 또 추가할게요 ㅎㅎㅎㅎㅎ

  • 리룸은 랜딩페이지 사이트맵을 그려주므로 앱서비스 기획에는 적합하지 않았고

  • 위자드는 완성된 ui 화면을 제공해주나, 내가 원하는 페이지 구조와 컴포넌트들을 반영해주지 않았기에 아쉬웠음

  • 피그잼의 이 플러그인 (WireGen)이 현재까지는 아이디어를 시각화해주는 툴로 가장 적합하다고 판단!



20
20개의 답글

👉 이 게시글도 읽어보세요

모집 중인 AI 스터디