소개
이번에는 단순한 디자인 구현을 넘어, 기획부터 디자인 완성까지 전체 흐름을 자동화/통합해보는 시도를 했어요 ✨
ChatGPT로 PRD(제품 기획서)를 작성하고해당 기획서를 기반으로
Bolt에서 랜딩페이지를 제작이후 디자인 수정을 위해
Cursor로 소스를 옮겨 세밀하게 다듬었습니다
이 워크플로우 덕분에 팀 내 기획자/디자이너/개발자의 경계를 넘나들며 훨씬 빠르게 결과물을 만들 수 있었어요!
진행 방법
🛠 사용한 도구
ChatGPT: 기획서(PRD) 생성 자동화에 활용
Bolt: PRD 내용을 바탕으로 UI 시각화 (랜딩페이지 빌더)
Cursor: 코드 기반의 편리한 디자인 수정 에디터
[Cursor 에서 작업 1]
[Cursor 에서 작업 2] 이미지 바꿔 적용하기
🔄 작업 흐름
ChatGPT로 PRD 생성하기
프롬프트 예시: "헬스케어 앱을 위한 랜딩페이지 PRD를 작성해줘. 타겟, 핵심 기능, CTA 포함"타겟 사용자, 주요 섹션, 기대 효과 등 정리된 기획서를 받아보기
Bolt에서 시각적 UI 구성
PRD를 참고해 적절한 랜딩페이지 템플릿 선택
헤더, 기능 소개, CTA 등 핵심 구조 구성 완료
HTML/CSS 코드 Download 후 Cursor로 이동
전체 소스를 복사해 cursor에서 수정 시작
컬러, 폰트, 텍스트, 버튼 등 세밀한 디자인 커스터마이징
💡 팁
ChatGPT는 구체적으로 지시할수록 더 쓸모 있는 PRD를 만들어줘요!
Bolt에서는 텍스트만 기획서에 맞게 바꾸면 거의 완성!
Cursor에서 tailwind 수정 시 실시간으로 결과 확인 가능해서 디자인 피드백 반영이 편해요
결과와 배운 점
ChatGPT 덕분에 기획 속도가 대폭 단축됨 (10분 이내)
Bolt에서 기획 내용을 시각화 → 15분 안에 UI 초안 완성
Cursor에서 세밀한 디자인 수정으로 완성도 향상 (약 20분)
전체 흐름을 통해 '기획-디자인-개발'이 연결되는 느낌!
👉 이번 주에는 Cursor에 MCP를 연결하여 랜딩페이지를 만들어볼 예정이에요. 😊