소개
시도/목적: 17기 커리어전환에서 1주차 숙제로 LLM간 비교 기능도 같이 적용해볼겸, 사내에서 프롬프트를 자유롭게 공유할 수 있는 갤러리 형태의 웹앱을 기획하며, 디자인 툴로 바로 넘길 수 있는 수준의 PRD를 작성해보고자 했습니다.
한 줄 요약: 디자인 중심의 상세 PRD를 LLM 친화적으로 정리하는 과정에서 발생한 2가지 어려움을 중심으로 고민했습니다.
진행 방법
1. 준비
사용한 도구: Cursor, ChatGPT, Gemini, Google Stitch, FigmaMake, Vooster ai, PRD 작성 템플릿(PRD Builder)
환경 설정: GPT를 통해 구조화된 아이디어를 재정리하고, 디자이너가 바로 가져갈 수 있도록 명세서 형식에 집중
겪은 이슈:
디자인 요소가 복잡해질수록 PRD가 장황해졌고, LLM 응답처럼 Vanilla 구조로 단순화하는 데 어려움이 있었습니다.
LLM의 활용 가능성을 염두에 두고 프롬프트 갤러리 형태의 웹사이트로 변환할 방법을 고민하면서 사양 설계가 더 점점 복잡해졌습니다.
2. 실행
프롬프트 PRD 생성 시도
1) 프롬프트 작성 1차: 'PRD Builder(GPTs)'의 도움을 받아 작성했을 때, MongoDB까지 구축해야 하는 것으로 매우 상세하게 작성해줬습니다. 처음에 바로 Cursor로 가져갔다가 에러 수정만 몇 시간째 반복. 그래서 복잡한 기능 그다지 원치 않는데 환경 구축으로만 수정이 계속되어서 다른 방법을 찾기로 함.
2) 프롬프트 작성 2차: 일단 시각적으로 완성된 디자인안을 갖고서 작업하는 게 어떨까 하여, FigmaMake로 작업 시작. 레퍼 이미지를 사용했어도 툴 사용이 서툴러 효율이 나지 않음.
3) 프롬프트 작성 3차: Google Stitch에 와서 자연어로 최대한 근접하게 바로 디자인 초안을 작성함. 여기로 정착하여 이 컨셉 이미지를 갖고서 V0와 Lovable로 감. 프롬프트와 기능을 다듬으며 가장 유사한 디자인안 완성. 너무 디자인 포커스되어서 세세한 기능 설정을 하지 못한 점이 반복 작업량을 높임.
4) 프롬프트 작성 4차: (진행 중) 다시 처음부터 시작하기로 함. Vooster ai에서 PRD를 재생성.
진행 순서 요약:
프롬프트 공유 플랫폼 기획 및 사용 목적 정의
메뉴 구조, 주요 기능, 인터랙션 흐름, 관리자 페이지 등 상세 명세 작성
디자인 요소 (컬러, 폰트, 레이아웃 등)까지 정의한 후, 디자이너가 바로 Figma/Framer로 작업 가능하게 구성
개발자와 연계할 수 있도록 기술 연동 방식, React 컴포넌트 구조, MVP 우선순위 포함
PRD 이미지/캡처
(by PRD Builder(GPTs))
한국어 웹 사이트의 스크린 샷
3. 결과
(by Google Stitch 디자인 초안)
다른 항목이있는 웹 사이트의 스크린 샷
(by V0 디자인 초안)
한국 웹 사이트의 스크린 샷
시행착오 & 극복 방법:
처음에는 일반적인 Text 문서 형식으로 정리했으나, Visual-friendly한 구조로 전환하는 과정에서 재작성이 많았음
“Vanilla 코드처럼 단순하고 읽기 쉬우면서도 모든 요소가 빠짐없이 들어간 문서”를 만드는 게 가장 큰 도전이었음
핵심 교훈 및 노하우:
프롬프트 형태로 분해하여 작성하면, 추후 LLM이 해석하거나 리팩토링하기에도 용이
PRD 안에 ‘의도 + 동작 + 인터랙션 후 효과’를 모두 쓰면, 디자이너-개발자-LM까지 모두 커버할 수 있음
어려웠거나 도움이 필요한 부분:
프롬프트 갤러리처럼 재활용 가능한 구조로 PRD를 변환하거나 리팩토링하는 워크플로우를 어떻게 만들지 고민 중입니다
앞으로의 계획
확장 아이디어:
이 PRD 기반으로 실제 웹앱을 만들고, 프롬프트를 직접 저장/검색/복사할 수 있는 기능 구현 예정
다음 시도:
PRD → JSON → 디자인 시스템 컴포넌트 자동 생성 워크플로우 시도
다양한 포맷으로 변환하는 변환기 제작
