[8기 챗봇만들기] 아이디어 한문장으로 앱 기획하고, 위자드로 화면 디자인까지 해보기!


(프롬프트엔지니어링 방 게시글 올린 거 복붙해서 올립니다! 게시글 중복이라서 한 곳만 올리려고 했는데, 아무래도 내용 자체가 챗봇개발이다 보니 챗봇방에도 별도로 아카빙 되는 게 나을 듯 하여!!)

하고 싶었던 것

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

  • 아이디어 입력 → 앱 유형 선택 → 앱 이름 및 설명 작성 → 핵심기능 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’기능 제공(유료플랜) → 웹플로우로 옮기기(잘 옮겨지는지는 아직 모름. 유료기능이니까 퀄리티가 괜찮지 않을까?)

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

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


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



8
1개의 답글

👉 이 게시글도 읽어보세요