소개
요즘 학생들은 종이 교재보다 인터랙티브하고 시각적인 콘텐츠를 선호합니다. 디지털 네이티브 학생들을 위해 중국어 웹앱을 만들었습니다. 다양한 AI 도구들의 도움을 받아 기획 단계부터 수정과정에 이르기까지 교재 기반 웹앱 제작을 시도해보았습니다. 💡
진행 방법
🔧 사용한 도구들
Vooster AI: PRD(기획서)와 TRD(기술요건서) 생성
Google AI Studio: 생성 된 문서 리뷰 및 보완
Bolt.new: 완성된 TRD 기반으로 작업 시작
Cursor AI: 코드 업로드 및 UI/UX 수정 작업
ChatGPT & Claude: 아이디어 피드백, 세부 조정 및 커서 내 프롬프트 조정
💡 작업 흐름
Vooster AI로 기획 문서(PRD/TRD) 초안 생성
-여진님이 모각에서 알려준 프롬프트를 챗지피에 입력하며 아이디어 구체화 대화 사용자가 하나의 질문으로 프로젝트 아이디어를 말할 거예요. 아이디어를 자연스럽게 풀 수 있도록 가볍게 리액션하고, 핵심을 더 잘 떠올릴 수 있도록 후속 질문을 이어가줘. 설명은 짧고, 대화 흐름을 막지 않도록 해줘. 가능하다면 1~2턴 안에, 늦어도 3턴 이내에는 아이디어의 골격이 드러나도록 정리해줘.
-Vooster AI에서 요구하는 질문들이 도움이 많이 됨
프로젝트의 아이디어를 간단히 설명해 주세요. / 좋아요! 이 문제가 해결되면 사용자는 무엇이 좋아지나요? / 참고할 유사 서비스가 있다면, 이유와 함께 알려주세요. / 예상 사용자는 누구인가요? / 꼭 있어야할 핵심 기능과, 장기적으로 있으면 좋을 추가 기능을 알려주세요. / 서비스 형태와 기술 스택을 알려주세요.
2. Google AI Studio에서 문서 정리 및 보완
-강승규님이 제공한 프롬프트를 사용하여 Vooster AI로 작성한 PRD, TRD 수정
아래 prd를 다음 기준에 따라 검토하고, 개선하라. 개선해야할 포인트를 간단하게 설명한뒤, 모두 설명하고나서 완성본을 응답하라.
-node.js 15버전 권장사항에 맞는 structure로 구성
-가장 빠르게 mvp를 출시하기위해 기술 스텍과 복잡도 등이 최소한으로 설계되었는지 점검
Bolt.new에 TRD 업로드해 프로토타이핑 시작
Cursor AI에서 실제 코드 업로드 후 UI/UX 수정
ChatGPT와 Claude를 통해 카피라이팅, 레이아웃 등 다듬기
🎨 디자인 관련 팁
UI/UX 수정 시, 용어를 알면 요청이 훨씬 수월해짐
예: 색상 맵핑(color mapping), 히어로 섹션(hero section) 등
커서에서 프롬프트는 **문장 단위보단 '모듈 단위'**로 요청하는 것이 더 정확하고 효율적
결과와 배운 점
케네스님, 강승규님, 조형래님의 도움을 받아 완성
다양한 AI 도구를 흐름에 따라 연계해 쓰는 것이 핵심
커서에서 프롬프트 전략이 중요, 전체 페이지가 아닌 UI 컴포넌트 단위로 수정 요청하면 결과물이 더 효과적
다음에는 사용자 피드백을 반영하고, 학습 기능을 더 추가해볼 계획
