자연어로 던지는 바이브 기획
• 생각이 흘러가는 대로 빠르게 적으면 문서 정리는 GPT가 • 기획의도와 다른 부분이나, 스펙과 다른 부분, 문서 형태를 디테일하게 피드백하면 또 정리는 GPT가 • 구현하고 싶은 기능이 있는데, 생각하는 플로우가 실현 가능한지, 효율적인지 알고 싶을땐 질문모드
요즘 바이브 코딩이 유행이라던데, 나는 오늘의 SLIP을 만드는 전과정을 챗GPT와 함께 협업했다.
요즘 내 취미는 밤마다 챗GPT에게 “나는 어떤 사람일까?”라고 물어보는 일이다.
반복되는 대답은 늘 같다. “구조화하려 한다. 문서화하려 한다. 정리 중독이다.”
하지만 1편에서 소개한 바와 같이 ”일“의 영역은 무엇이든 정리하려고 들지만, 일 외의 영역은 공허에 가까울 정도로 기록을 어려워 하는 편이다. 그래서 슬랙 메시지를 그대로 ”문서“로 만들어보고자 프로젝트를 시작하게 됐다.
처음 시작은 PoC로, 단일 링크를 붙여 넣으면 파일로 추출하는 기능을 테스트해봤다. 슬랙 앱과 API Docs를 훑어보며 워크스페이스에 앱을 설치하고, 포스트맨으로 타임스탬프, 스레드 포함 여부 등을 확인하면서, 내가 필요한 데이터만 정확히 가져올 수 있는지를 먼저 체크했다.
결과는 성공, 그 다음은 웹으로 띄워두면 쓰기 편할것 같아서 챗 GPT에게 페이지를 만들어 달라고 한 뒤 프로젝트를 만들었다.
링크를 직접 입력하는건 귀찮을지도
개인적인 목적으로 만든 프로젝트이다보니, PoC로 만든 앱의 여정은 불필요한 과정이 수반된다는 걸 빠르게 확인할 수 있었다.
PoC의 사용자 플로우
- 스레드의 링크 복사
- 웹페이지 진입
- 링크 붙여넣기
- md추출
- 옵시디언 폴더로 파일 저장하기
원하는 기능에 비해 5단계나 되는 동작은 너무 헤비하지 않나...
애초에 슬랙에서 메시지 복사하고, 파일을 만들고, 붙여넣는 동작이 귀찮아서 만든 앱인데 오히려 앱을 사용하면 3단계의 플로우가 5단계로 늘어나는 꼴이었다.
이대로는 안되지.
조금 더 라이트하게, 편리하게 사용할 수 있는 방법은 무엇일지 본격적인 기획을 시작했다.
챗GPT와 자연어로 아이데이션 미팅(?)을 진행하면서, 기능을 구체화하고, 플로우를 정리한 뒤 필요한 스펙을 정리했다. 그리고 구체화된 기능과 플로우를 바탕으로 AS-IS / TO-BE / TO-BE의 페이지 단위 UI 구성을 간략히 정리한 뒤, PRD 정리를 요청했다.
하지만 첫술에 배부를 수 없다고 했던가, GPT는 그럴싸한 문서를 만들어내긴 했지만 내가 의도한 바를 100% 반영하지는 못했다. 무한 피드백 루프 시작.
그래도 중간 중간 구글링을 하거나, Docs를 눈빠지게 읽어가며 찾아냈을 질문들도 척척 대답해주는 GPT 덕분에 빠르게 판단할 수 있었다.
귀차니즘 MAX인 사용자(나)를 위한 맞춤 기능 스펙 정리 완료!
MVP 버전의 사용자 플로우
- 앱 실행
- 날짜 입력 or 오늘의 기록 모달 열기
- 원하는 메시지 선택하여 추출
훨씬 간결한 플로우로 슬랙의 단편적인 기록 조각들을 모아, 문서로 만들어내기 위한 컨셉이 만들어졌다.
디자이너는 없고요... GPT가 있습니다.
몇번의 피드백과 상세 논의를 바탕으로 PRD 정리를 끝낸 뒤에는, 직접 구현을 해보기로 했다.
가장 먼저 진행한 건, 프레임워크와 라이브러리 1차 결정.
Next.js + React + TailwindCSS 환경에서 프론트엔드 개발을 하던 경험을 살려, 일단은 그대로 확정.npx create-next-app@latestts, ESLint, tailwindCSS 사용여부를 포함하여 몇가지 설정들에 응답하고 프로젝트를 시작했다.
그 다음은, PRD에 상세 화면 기획을 기술하고 PD와 컨셉을 잡을 타이밍이지만 이번 프로젝트에는 디자이너가 없다. Figma로 와이어프레임을 잡느니, 빠르게 작업하자는 마음으로 GPT에게 디자인을 요청했다.
디자인을 요청했더니 이미지를 만들기 시작하길래 헐레벌떡 중지하고, 리액트!! 리액트 코드로!! ㅋㅋㅋㅋㅋㅋㅋㅋ
맥락 오류가 자주 발생하는데, 실행력은 어찌나 빠른지 하루에도 수십번씩 중지하고 프롬프트를 수정하게 된다.
초안의 슬로건은 "오늘의 기쁨, 내일의 기쁨으로" 였다.
개인용 기록 앱으로, 슬랙 개인 워크스페이스의 이름이 "오늘의 기쁨"이고, 오늘의 나를 문서화하며 내일의 나에게 보내주는 컨셉.
현재는 앱 이름, 카피, 디자인이 모두 변해
오늘의 SLIP: 오늘의 조각 이라는 컨셉이 잡힌 상태이지만, 초안도 나쁘진 않았을지도?로그인 기능의 등장
그 다음은 기능 구현을 하며 개인 스페이스에서 생성한 앱의 봇토큰을 env에 직접 넣었고, vercel로 배포하여 사용할 계획이었기 때문에 로그인 기능을 추가했다.
임시 로그인 방편은 id와 pw, token을 env에 저장해두고, 일치하는 id와 pw를 입력하면 token을 반환해서 쿠키에 저장하는것. 쿠키의 token 값을 바탕으로 기능 페이지 접근 시 auth API로 권한 체크를 하는 로직을 추가했다.
그리고 api의 백엔드 로직을 자연어로 대화하며 구체화하여
/api/login /api/auth 기능을 붙였다.항목 | 설명 |
방식 | ID/PW -> 토큰 발급 방식 |
저장 | 쿠키에 토큰 저장, 이후 기능 페이지 접근 시 /api/auth 체크 |
구현 | POST /api/login, GET /api/auth |
이제 로그인한 유저만 내 워크스페이스에 접근이 가능하므로, 배포할 수 있다!
- 단, 로그인 유저만 기능 이용이 가능하므로 앱 진입 시 로그인 페이지로 튕기게 설계 되어있다🤣
바이브 기획에 대한 감상
나는 GPT를 단순한 개발 보조도구라기 보다는 초기 아이데이션부터 기능 검토, 설계 구조화까지 기획 업무를 보조하는 동료처럼 대하고 있다. 뿐만 아니라 때로는 디자이너 동료처럼, 개발자 동료처럼 만들어주세요! 하고 요청하고 내 의견을 덧붙여 함께 앱을 만드는 과정 전반을 함께하고 있다. Chat GPT-pro 모델을 한달여간 사용해본 경험으로는 이 글을 읽는 PM/기획자들에게 LLM과 함께하는 사고 확장 방식을 정말 추천하고 싶다.
프롬프트를 고도화해서 작성하는것도 중요하지만, 나처럼 자연어로 슥슥 단편적인 정보들을 나누며 대화하는 방식으로도 충분히 결과물을 이끌어낼 수 있다.
이번 프로젝트의 PRD는 초안부터 디벨롭까지 모두 Chat GPT가 작성했고, 앞서 공유한 이미지처럼 나는 초기 컨셉과 요구사항들을 자연어로 정리하여 전달했다.
GPT가 작성한 초안을 바탕으로 내가 의도한 내용이나 문체, 추가로 반영하고 싶은 스펙을 다시 정리해 전달했다.
그렇게 대화를 반복하며 함께 디벨롭 하는 중이다.
GPT와의 PRD 작성 예시
- 사용자의 약식 정리 텍스트(요건, 요구사항, 라이트한 사용자 플로우 등)
- GPT의 PRD 1차 작성
- 의도한 요건과 다른 부분이나, 더 구체화하고 싶은 부분, 방향이 바뀐 부분들을 약식으로 대화하며 피드백
- GPT의 제안 수정 내용 작성
- 상세 피드백 코멘트
- 수정사항 반영
프롬프트를 입력하면, 바로 사용할 수 있는 결과물이 나온다! 라기 보다는 대화를 통해 디벨롭하는 과정을 거치고 있지만, 실제 동료들과 프로젝트를 진행할 때에도 논의하는 과정에서 여러가지 변동사항들이 생기기도 하고, 내 의견이 제대로 전달되지 않아 재차 설명하는 순간들이 생기는 것처럼 자연스럽게 느껴졌다.
실무에서 적용해본 적은 없지만, 사이드 프로젝트에서 진행해본 바이브 기획은 생각보다 재미있고 생각보다 유용했다. 앞으로 더 재미있는 일을 만들어볼 수 있을 것 같다.
이제 기본 기능은 갖춰졌고, 1차 정리도 다음 편에서는 슬랙의 메시지를 실제로 받아오며 직면한 트러블슈팅과 크고 작은 고민들을 이야기 해보려고 한다.
NEXT
- 채널/메시지/스레드 3개의 액션
- 브랜딩 컨셉 구체화
- 고민중인 확장 기능들 - md 프리뷰 기능, Slack OAuth 도입까지?