25.10.01 / JUN
- D17: 최종 앱 프로젝트안 제출 확인 >> 기획서 도입부 작성 >> 김홍님 역사네컷 Gemini API >> Pinokio & Stable Diffusion >> GPT OSS 20B, 120B & LM Studio >> 앱 프로젝트 1차 빌드, 기능 검증
- D18: KlingAI API >> Google Chrome App Store >> Stripe
- D19: 프로젝트 기획서 완성 >> 배포 가이드라인에 맞춰 코드 수정 >> 타겟 시청자 선정 >> 콘텐츠 제작 >> 홍보 자동화 >> Product Hunt 배포 가이드라인 리뷰
- D20: 최종 프로젝트 발표회 (광주) >> 우수 프로젝트 시상 >> 네트워킹
Day17. 앱 기획 & 프로토타이핑
앱 프로젝트 기획 양식 (구름 바이브코딩 마스터 5주차)
https://docs.google.com/presentation/d/1CvY-S-fApOdcE91dTwS7ZiRQ4Y5ZN4xCviuGCKyPisc/edit?usp=sharing
- 세션1 (1h): 아이디어 브레인스토밍
- 개인 혹은 소그룹별 앱 아이디어 도출
- 사용자 페르소나 & 문제 정의 작성
- 레퍼런스 사례(구글 특허 검색, 크롬 웹스토어 앱 등) 공유
- 세션2 (1h): 앱 구조 설계 & 기술 스택 선택
- HTML, CSS, JS + Gemini API 기반 기본 구조 복습
- API/데이터 소스 연결 계획 수립 (News API, TMDB, Google Sheets 등)
- 세션3 (2h): 와이어프레임 & 프로토타입 제작
- Cursor 또는 Figma/Whimsical 활용
- 주요 화면(메인, 기능 페이지, 결과 페이지) 설계
- 앱의 핵심 사용자 플로우 시각화
참고자료
- LM Studio << 내 컴퓨터에 GPT를 설치해서 쓰고 싶다면
Run local AI models like gpt-oss, Qwen, Gemma, DeepSeek
https://lmstudio.ai/ - Pinokio << 내 컴퓨터에서 스테이블 디퓨전을 실행하고 싶다면
Install, Run & Control Anything on Your Computer with 1 Click.
https://pinokio.co/ - Stable Diffusion << 현실감 넘치는 이미지 생성 모델
A latent text-to-image diffusion model capable of generating photo-realistic images
https://stablediffusionweb.com/
Day18. 앱 개발 & 테스트
- 세션4 (1h): 기본 뼈대 코드 작성
- HTML/CSS로 UI 구현
- JS로 API 호출, 데이터 바인딩 실습
- 세션5 (2h): 기능 개발 & 실습
- 검색/추천 기능, 시각화(차트), 사용자 입력 처리 구현
- 에러 처리 및 CORS 이슈 해결 방법 학습
- 세션6 (1h): 테스트 & 디버깅
- 크롬 브라우저, 모바일 환경에서 실행 확인
- 팀별 문제점 공유 및 개선 아이디어 적용
바이브코딩 주의사항 | 예산을 크게 벗어나는 비용 문제
- 커서를 포함한 현대적인 바이브코딩 도구는 기본적으로 코드 빌드 목표를 완수할 때까지 쉼 없이 실행을 반복하는 목표지향형 AI 에이전트입니다.
- 그 덕분에 바이브코더에게 부담스러운 수십, 수백 회의 시행착오와 성공할 때까지 실패를 반복할 수 있습니다.
- 하지만 바로 그런 이유로 불과 한 시간여 만에 수십만 단위의 토큰 또는 컨텍스트를 소모할 수 있으며, 이를 비용으로 환산하면 하루 수백달러의 비용이 청구될 수 있는 문제가 있습니다.
- 바이브코딩 시 비용 및 보안 통제 방법: 프롬프트 또는 커서 룰스와 같은 시스템 규칙 등에서 AI 에이전트의 반복시행 횟수를 5회, 10회 등으로 제한하고, 코드 실행 과정을 지속적으로 모니터링할 것을 권장합니다. 일부 고급 소프트웨어 엔지니어는 의도적으로 수 시간 동안 백그라운드에서 에이전트를 실행하지만, 바이브코딩 입문자에겐 권장하지 않습니다.
커서 디렉토리 | 모범적인 빌드 가이드라인
Cursor Rules 활용 가이드
1. Cursor Rules란?
- Cursor 안에서 AI의 행동과 답변 스타일을 제어하는 규칙 모음
- 특정 프로젝트 또는 작업에 일관성 있는 코드/문서 작성 가능
- 팀 단위 협업 시 개발 규칙을 통일하는 데 유용
- GPT·Claude·Gemini 등 모델과 함께 사용할 수 있음
2. Rules의 기본 구조
- YAML 또는 JSON과 유사한 구조로 정의
pattern과rule형태로 구성- 특정 입력 상황에 따라 AI의 응답을 수정·제약
- 필요에 따라 여러 개의 규칙을 동시에 적용 가능
3. Rules 작성 방법
pattern: 어떤 입력 또는 상황에 적용할지 정의rule: 적용 시 AI가 따라야 할 동작·출력 지침 작성- 예: “파일 생성 시 반드시 TypeScript 사용”
- 간단한 문법으로 직관적으로 작성 가능
4. Rules의 주요 활용 사례
- 코드 스타일 일관화 (예: 세미콜론 강제, 들여쓰기 규칙)
- 출력 포맷 지정 (예: Markdown, JSON, 특정 템플릿)
- 금지 규칙 설정 (예: 특정 라이브러리 사용 금지)
- 프롬프트 오염 방지 (불필요한 답변 차단)
5. Rules 적용 범위
- 프로젝트 단위 Rules: 해당 프로젝트 전체에 적용
- 폴더/파일 단위 Rules: 특정 디렉토리나 파일에 한정
- 글로벌 Rules: 모든 프로젝트에서 기본 적용
- 프로젝트 협업 시 Rules 공유 가능
6. Rules 관리와 수정
- Cursor 좌측 사이드바 →
Rules메뉴에서 관리 - 신규 규칙 추가 / 기존 규칙 편집 / 삭제 가능
- 테스트를 통해 AI가 규칙을 잘 따르는지 확인
- 규칙 적용 후 즉시 코드 생성/편집에 반영
7. Rules 작성 시 주의사항
- 규칙은 명확하고 구체적일수록 효과적
- 너무 많은 규칙은 AI 유연성을 제한할 수 있음
- 프로젝트 성격에 맞는 최소 규칙부터 적용 권장
- 팀 내 공유 시, 문서화하여 합의된 기준 유지
8. 바이브코딩 입문자를 위한 팁
- 처음에는 간단한 출력 형식 규칙부터 시도하기
- 규칙을 만들어두면 반복 작업 자동화에 큰 효과
- 팀 프로젝트에서는 코드 품질과 협업 효율성 상승
- Rule 작성도 결국 “프롬프트 엔지니어링”의 확장판
가이드라인 예시 | TypeScript 기반 모범적인 웹앱 구현 가이드
You are a Senior Front-End Developer and an Expert in ReactJS, NextJS, JavaScript, TypeScript, HTML, CSS and modern UI/UX frameworks (e.g., TailwindCSS, Shadcn, Radix). You are thoughtful, give nuanced answers, and are brilliant at reasoning. You carefully provide accurate, factual, thoughtful answers, and are a genius at reasoning.
- Follow the user’s requirements carefully & to the letter.
- First think step-by-step – describe your plan for what to build in pseudocode, written out in great detail.
- Confirm, then write code!
- Always write correct, best practice, DRY principle (Dont Repeat Yourself), bug free, fully functional and working code also it should be aligned to listed rules down below at Code Implementation Guidelines .
- Focus on easy and readability code, over being performant.
- Fully implement all requested functionality.
- Leave NO todo’s, placeholders or missing pieces.
- Ensure code is complete! Verify thoroughly finalised.
- Include all required imports, and ensure proper naming of key components.
- Be concise Minimize any other prose.
- If you think there might not be a correct answer, you say so.
- If you do not know the answer, say so, instead of guessing.
Coding Environment
The user asks questions about the following coding languages:
- ReactJS
- NextJS
- JavaScript
- TypeScript
- TailwindCSS
- HTML
- CSS
Code Implementation Guidelines
Follow these rules when you write code:
- Use early returns whenever possible to make the code more readable.
- Always use Tailwind classes for styling HTML elements; avoid using CSS or tags.
- Use “class:” instead of the tertiary operator in class tags whenever possible.
- Use descriptive variable and function/const names. Also, event functions should be named with a “handle” prefix, like “handleClick” for onClick and “handleKeyDown” for onKeyDown.
- Implement accessibility features on elements. For example, a tag should have a tabindex=“0”, aria-label, on:click, and on:keydown, and similar attributes.
- Use consts instead of functions, for example, “const toggle = () =>”. Also, define a type if possible.
Day19. 앱 홍보 & 상용화
- 세션7 (1h): 배포 & 공유 실습
- GitHub Pages, Vercel, Netlify를 이용한 앱 배포
- 배포 과정 단계별 가이드 실습
- 세션8 (2h): 마케팅 전략 & 홍보 콘텐츠 제작
- 앱의 4P(제품·가격·유통·홍보) 정리
- 앱 소개용 블로그/노션 페이지 제작
- 유튜브 쇼츠 홍보 영상 시나리오 작성
- 세션9 (1h): 프로젝트 발표 & 피드백
- 각 팀별 5분 발표 (앱 데모 + 기획 의도)
- 동료·강사 피드백 & 개선 방향 제시
- 우수 프로젝트 시상
웹앱 배포 및 수익화 플랫폼
1. Product Hunt
- 스타트업·인디 개발자의 신제품 론칭 플랫폼
- 하루 수십만 명이 방문 → 초기 트래픽·피드백 확보에 적합
- 무료/유료 SaaS, 웹앱 모두 소개 가능
- 글로벌 얼리어답터 사용자층에 빠르게 확산
2. Gumroad
- 디지털 제품 판매 전문 플랫폼
- 웹앱 액세스권(구독·라이선스 키) 형태로 판매 가능
- 결제·세금 정산을 간단히 처리해줘서 1인 개발자 친화적
- 전자책·템플릿·코드 스니펫도 함께 판매 가능
3. Itch.io
- 주로 인디 게임 플랫폼이지만 실험적 웹앱·툴 배포도 가능
- 브라우저 실행 가능한 앱을 직접 올려서 체험·판매 가능
- “Pay what you want” 결제 구조 지원
- 창작자 커뮤니티와 소통하며 빠르게 피드백 받기 좋음
4. Ko-fi & Patreon
- 단순 판매보다는 구독·후원 기반 수익화에 적합
- 웹앱 사용자에게 프리미엄 기능 제공 → 후원/멤버십 구조로 연결
- 크리에이터·개발자 모두 많이 활용하는 글로벌 플랫폼
5. WordPress.org 플러그인 디렉토리 + 자체 웹사이트
- 웹앱을 워드프레스 플러그인 형태로 배포 → 글로벌 수십만 유저 대상
- 기본 기능은 무료, 확장(Pro) 버전은 유료 판매 모델 활용
- Stripe/PayPal 연동으로 구독 기반 수익화 가능
6. Vercel / Netlify 배포 + 자체 결제 연동
- 프론트엔드 웹앱을 손쉽게 글로벌 CDN 배포
- Stripe, LemonSqueezy, Paddle 같은 SaaS 결제 API와 연결해 직접 SaaS 서비스화
- 최근 인디 개발자들이 크롬 웹스토어 대신 가장 많이 선택하는 방식
👉 요약
- 런칭·홍보: Product Hunt
- 디지털 판매: Gumroad, Itch.io
- 후원/구독: Ko-fi, Patreon
- 플러그인 모델: WordPress
- SaaS 배포: Vercel/Netlify + Stripe
Product Hunt 웹앱 등록 가이드라인
인기 프로젝트 사례: CrePal
Create short movies with just a prompt with our AI director
https://www.producthunt.com/products/crepal-3
1. 등록 전 준비
- 런칭 요일 선택: 화요일·수요일·목요일이 가장 트래픽이 많음. (미국 시간 기준 새벽 12시에 오픈)
- 웹사이트/랜딩페이지 준비: 방문자가 바로 이해할 수 있도록 핵심 기능·가격·CTA(Call To Action)를 명확히.
- 썸네일 & 이미지: 직관적이고 매력적인 로고·스크린샷·GIF 제공. (권장: 240×240 아이콘, 1270×760 스크린샷)
- 1줄 설명(Tagline): 제품을 한 문장으로 요약. (60자 이내, 명확·심플)
- 소개 영상: 30~60초 짧은 데모 영상이 큰 효과.
2. 제품 등록 시 필수 항목
- Name: 앱 이름 (짧고 기억하기 쉽게)
- Tagline: 한 줄 설명 (예: “역사 속 인물과 사진 찍는 AI 포토 앱”)
- Description: 2~3단락, 핵심 가치와 사용자가 얻는 이점을 강조.
- Gallery: 스크린샷 3~5장 + GIF/영상 첨부.
- Topics: 관련 카테고리 태그 선택 (예: AI, Productivity, Developer Tools).
- Pricing: Free, Freemium, Paid 등 표시.
3. 커뮤니티 규칙 & 매너
- 헌터(Hunter) 지정: 본인이 직접 등록하거나, 유명 헌터에게 부탁 가능. (헌터 영향력 크지만 필수는 아님)
- 초기 댓글 달기: 런칭 직후, 제작자가 직접 첫 댓글로 “왜 만들었는지, 어떤 문제를 해결하는지”를 설명.
- 스팸 금지: 친구·커뮤니티에 무분별한 업보트 요청은 금지. 대신 사용자 그룹·SNS에서 자연스럽게 공유.
- 실시간 소통: 댓글에 질문·피드백이 달리면 빠르게 답변.
4. 성공적인 런칭을 위한 팁
- 런칭 페이지 공유: 트위터(X), LinkedIn, Reddit 등 커뮤니티에서 함께 알리기.
- 국제적 타겟 고려: 설명·영상은 영어 우선, 필요 시 다국어 추가.
- 런칭 이후 Follow-up: Product Hunt에서 받은 피드백을 반영해 업데이트 소식을 다시 공유.
- Maker Profile 강화: 본인 프로필 사진, 과거 프로젝트, 짧은 자기소개 등록 → 신뢰도 상승.
5. 체크리스트 (등록 전)
✅ 앱 이름과 도메인 정리
✅ 태그라인 60자 이내 준비
✅ 썸네일, 스크린샷, 영상 준비
✅ Pricing 정보 설정
✅ Topics/카테고리 선택
✅ 런칭 당일 댓글 초안 준비
크롬 웹 스토어 개발자 프로그램에서 한국 개발자는 등록 불가
2020년이전부터 현재까지 크롬 웹 스토어 개발자 등록에서 대한민국은 선택할 수 없는 상태가 유지되고 있습니다. 몇 가지 이유가 있는 것으로 보이며, 웹앱 개발자라면 당분간 크롬 웹 스토어는 배포 대상에서 제외해야 하겠습니다.
Day20. 발표회, 수료식
종강식 일정
- 프로젝트 발표 및 수료식 : 2025. 10. 2. 목요일 15:00 ~ 18:00
- 네트워킹 : 2025. 10. 2. 목요일 18:00 ~ 19:30
장소
- 프로젝트 발표 장소 : ZOOM & 주식회사 구름 광주지사 (광주광역시 동구 제봉로 96 3층)
- 네트워킹 장소 : 애슐리 퀸즈 충장점
워크북 초안
1. 앱 기획 단계
- 내가 해결하려는 문제는 무엇인가?
- 대상 사용자는 누구인가? (페르소나 작성)
- 이 앱의 핵심 기능은 무엇인가? (3줄 요약)
- 참고할 만한 유사 서비스/앱은 무엇인가?
- 이번 프로젝트에서 사용할 API/데이터 소스는 무엇인가?
2. 앱 개발 단계
- 메인 화면 레이아웃 설계
- 데이터 가져오기(API 호출) 코드 작성
- 사용자 입력 처리 기능 구현
- 기본적인 오류 처리 로직 작성
- 실행 결과 캡처 & 정상 동작 체크
3. 앱 홍보 단계
- 앱의 USP(Unique Selling Point)는 무엇인가?
- 누구에게, 어떤 채널로 홍보할 것인가?
- 홍보 문구 1줄 작성
- 블로그/노션/랜딩페이지 링크
- 유튜브 쇼츠/이미지 썸네일 기획
4. 프로젝트 발표 체크리스트
- 앱의 기획 의도를 1분 안에 설명할 수 있는가?
- 데모 실행 시 주요 기능이 원활히 작동하는가?
- 동료/멘토의 피드백을 반영할 계획을 제시했는가?
첫 포스팅: 25.09.29 / 포스트 문의: JUN (naebon@naver.com)
