(프롬프트엔지니어링 방 게시글 올린 거 복붙해서 올립니다! 게시글 중복이라서 한 곳만 올리려고 했는데, 아무래도 내용 자체가 챗봇개발이다 보니 챗봇방에도 별도로 아카빙 되는 게 나을 듯 하여!!)
하고 싶었던 것
유저 아이디어 한 문장을 입력하면 앱을 설계해주는 챗봇을 개발하고 싶었음
아이디어 입력 → 앱 유형 선택 → 앱 이름 및 설명 작성 → 핵심기능 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>)"]
(다시 돌아와서) 위자드에 입력
텍스트만 넣으면 앱 화면을 기획해주는 ai 툴
- 아이디어 : 철학 주제에 대한 나의 생각을 서로 나누는 앱
- 앱 유형: 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’ 라고 디자인되었음
이번엔 해치하이커에 넣어보기
작년 9월부터 지난 10월까지 꼬박 1년동안 초기 창업멤버로 함께 론칭했던 서비스
아이디어 한문장만 넣으면 실제 작동하는 앱으로 개발해줌. 노코드 툴 bubble 기반 제작.
위자드가 화면까지만 기획해줬다면, 해치하이커는 실제 기능이 작동하는 앱으로 제작해주는 컨셉
챗봇 개발 연습할 겸 이 서비스의 간략버전(앱개발은 아니고 기능기획과 페이지, 데이터구조 설계까지?)를 만들어보고 싶었음 (겸사겸사 홍보..?)
아직 베타버전이라… 작동 안될 때도 있음 …ㅎㅎ (하지만 팀원들이 매일같이 개발 중이니 곧 멋진 서비스가 탄생할 거예요! ><)결과물 짜잔 !
아이디어 넣고 > 앱 유형 선택 > 작동하는 앱 생성
아이디어를 넣으면
앱 유형을 선택하게끔 해줌. 기다리면..
작동하는 앱이 생성됨!
댓글기능, 좋아요 기능, 스크랩 기능이 가능함
sns형 답게 프로필 페이지도 생성됨
(추가) - relume 툴 활용하여 화면 와이어프레임 기획하기!!!
지피터스 게시판 보다가 김수연님의 ‘툴 유목민의 웹페이지 디자인 제작 툴 비교하기’ 게시글에서 위자드와 함께 ‘http://Relume.io‘ 이라는 서비스를 알게 됨.
아래는 게시글
바로 시도!
어제 만든 챗봇의 결과물을 넣어주었음
- 이 앱은 사용자들이 철학 주제에 대한 나의 생각을 서로 나누고 공유할 수 있는 공간입니다.
- 핵심 기능: 1) 주제별 게시물 작성 기능, 2) 댓글 및 토론 기능, 3) 관심 주제 추천 기능
- 페이지 구조 : [홈 페이지, 게시물 작성 페이지, 게시물 상세페이지, 개인프로필 페이지, 검색 및 추천 페이지]
- 데이터 구조 : [사용자(사용자ID, 이름), 게시물(게시물ID, 사용자ID, 주제, 내용, 작성일), 댓글(댓글ID, 사용자ID, 게시물ID, 내용, 작성일)]짜잔 출력!
이거 대박!!!
페이지 구조 넣으니까 정확하게 해당하는 페이지를 생성해줌
사이트맵 뿐 아니라……. 와이어프레임도 그려줌 ㅜㅜㅜㅜㅜ (와이어프레임은 1페이지만 무료, 나머지는 유 료플랜)
최종 후기
(Relume.io) Relume에 넣고 페이지 사이트맵(페이지 별 컴포넌트 구성) → 최종 와이어프레임 생성
(Framer) html to framer 익스텐션 활용 하여, 리룸 결과물을 프레이머로 옮기기 → 많이 깨져서 실패
(Uizard) 스크린샷을 넣으면 위자드 화면으로 구성해주는 기능으로 리룸 결과물 옮기기 → 많이 깨져서 실패
시도해보면 좋을 아이디어
Relume 와이어프레임에서 ‘copy to webflow’기능 제공(유료플랜) → 웹플로우로 옮기기(잘 옮겨지는지는 아직 모름. 유료기능이니까 퀄리티가 괜찮지 않을까?)
이렇게 해보면 아이디어 한문장 → [챗봇 → 리룸 → 웹플로우] → 작동하는 앱 순으로 해볼 수 있지 않을까????
리룸 체고……… 리룸 소개해주셔서 감사합니다ㅜㅜ (꾸벅)
아래는 리룸 → 웹플로우 소개 링크