으아아아앙아아악 너무 늦었..지만 종일 고생했으므로 결과물을 올려보도록 하겠습니다ㅜㅜ
하고 싶었던 것
유저 아이디어 한 문장을 입력하면 앱을 설계해주는 챗봇을 개발하고 싶었음
아이디어 입력 → 앱 유형 선택 → 앱 이름 및 설명 작 성 → 핵심기능 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페이지만 무료, 나머지는 유료플랜)
최종 후기
(챗봇) 유저 아이디어 입력 → 핵심기능 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)이 현재까지는 아이디어를 시각화해주는 툴로 가장 적합하다고 판단!
