소개
오랜만에 돌아왔습니다! 이번 사례는 유저가 짧은 영상을 업로드하면 유튜브 쇼츠와 인스타스램 릴스를 한 번에 올려주는 웹서비스를 개발하기 위한 구조화 과정을 기록하려고 합니다.
한동안 AI 공부를 쉬었다가 바이브코딩을 해볼까 싶을 때 쯤 경호님의 미친 (positive) 세션을 보고 용감하게 #CTO워크샵 을 수강하고 있습니다. 비록 저는 아직 팀도 없고 바이브코딩의 ㅂ 단계이지만 ㅎㅎ
진행 방법
우선 바이브 코딩 수준으로 구현 가능한건지 클로드에게 물어보았습니다.
유저가 영상을 업로드하면 자동으로 쇼츠와 릴스에 올려주는 페이지를 바이브코딩으로 만들 수 있을까? 그러려면 어떤 것들이 필요하고 어떤 구조와 단계로 개발해야하지?처음엔 유저가 API를 설정해야 해서 반쯤 가능하다는 답변을 받았지만, 몇 차례 추가 질문 끝에 OAuth 방식으로 연동하도록 설계하면 가능할 것 같다는 답변을 받고 구조를 업데이트 했습니다.
구조화
처음 프롬프트에서 이미 구조와 단계를 물어보았기 때문에 필요한 구성요소, 제가 이해할 수 있는 진행단계, 그리고 폴더구조까지 추천받았어요. 승인한 내용에 대해 project-structure-v3.md 파일로 만들었고, 이후 클로드코드가 개발을 할 때 전체 구조를 이해할 수 있도록 사용할 것입니다.
지금 파일 내용에는 저의 이해를 돕기 위한 설명도 포함되어있기 때문에, 컨텍스트 오염을 방지하고 효율적인 컨텍스트 윈도우 관리를 위해 추가 가공을 좀 해야할 것 같 아요. -- 이 내용을 활용해서 claude.md 파일에 직접 넣을지, claude.md 파일에서 이 문서 (의 특정 부분)을 참조하도록 하는 것이 좋을지 고민이 됩니다.- 6단계 개발 로드맵: - Phase 1: 기반 (DB, 인증, 로그인) - Phase 2: OAuth 연동 (YouTube/Instagram) - Phase 3: YouTube 업로드 - Phase 4: 로그 시스템 - Phase 5: Instagram 추가 - Phase 6: 안정화 (테스트, 에러 처리) - `project-structure-v3.md` — 전체 프로젝트 구조, DB 스키마, OAuth 흐름 설계 문서 작성디자인 일관성 유지를 위한 가이드 작성
CTO로서 팀단위 협업을 가능케 하기 위해서는 인간 직원들끼리도 그러하듯 AI도 규칙을 이해하고 따르도록 하는 것이 중요하기 때문에, Context memory, skill, hook을 잘 활용해서 이걸 구현해보는게 이 프로젝트의 실제 목표입니다.
기존 팀과 서비스가 이미 있는 수강생 동료분들은 이미 갖고 있는 코딩 컨벤션, 규칙, 디자인 가이드 등이 있으시겠지만, 그런 것이 없는 제가 클로드에게 코딩을 시키면 클로드가 적당히 알아서 만들어주게 된다는 사실을 깨달았습니다. 각종 규칙을 정해야 한다는 것은 알았는데 (흑) 애초에 시각적인 디자인도 마련해두고 코드가 따르게 하는게 리팩토링 수고를 줄여줄테니 나노바나나를 시켜 디자인 시안부터 뽑아봅니다.
첫트에 제법 잘 뽑아주길래 제미나이에게 바로 이어서 이 화면을 실제로 구현하기 위해 필요한 프론트엔드 개발 가이드와 규칙을 알려달라고 했습니다. 만든 ~놈~ 이 제일 잘 해줄 것 같았거든요.그랬더니 색상이나 폰트를 포함한 내용을 작성해주었습니다.
주말 사이 클로드가 업데이트 되어 cowork 기능을 자랑하길래, cowork에게 이걸 검토하고 필요하면 클로드 코드에 최적화 된 양식으로 수정해달라고 했습니다.그런데 제미나이는 기존에 작성해둔 구조를 모르는 채로 답변을 작성했다보니, 프론트엔드 개발에 사용하는 프레임워크를 Next.js 와 Tailwind 기준으로 뽑아주었다는 것을 클로드가 알려주었습니다. 제가 그래도 인간으로서 검수하고 문제해결을 해야 할 가능성도 있기 때문에, 아쉽지만 약간 지식이 있고 난이도가 낮은 HTML+CSS+JS 구조로 선택하되, 추후 업그레이드 가능성을 염두에 두고 두 버전 각각 디자인 가이드 파일을 만들도록 했습니다.
가이드 내용 바탕으로 Skill 생성
업로드한 이미지를 바탕으로 뽑은 디자인 가이드에는 여러 페이지에 걸쳐 사용할 코어 디자인 부분도 있고, 해당 페이지만을 위한 부분도 있기 때문에 둘을 분리하여 다른 페이지 개발시 코어 디자인 가이드를 재사용 할 수 있도록 파일을 분리하고 폴더 구조도 개편해달라고 요청했습니다.
제가 능숙했으면 애초에 스킬로 쓸 수 있게 구조를 잡았을텐데, 스킬로 사용할 파일의 이름은 SKILL.md 여야 한다는걸 뒤늦게 알았거든요 ㅎㅎ 저는 아직 터미널 명령어 사용이 익숙치 않은데, 마침 cowork가 클로드 pc 앱에서 폴더 구조도 변경해줘서 좋았습니다.
Hook 만들기
클로드 cowork에게 Hook도 만들어달라고 했습니다.
그러면 design-system/SKILL.md, conventions/SKILL.md, features/SKILL.md, landing-page/SKILL.md 은 코드 실행 사전에 작동되는 훅으로, code-review/SKILL.md 는 사후에 작동되는 훅으로 만들어줘
#!/bin/bash
# PreToolUse hook: 코드 작성 전 디자인 시스템/컨벤션 규칙 리마인드
# write, edit 도구로 frontend/ 파일을 수정할 때 작동
INPUT=$(cat)
TOOL=$(echo "$INPUT" | python3 -c "import sys,json; print(json.load(sys.stdin).get('tool',''))" 2>/dev/null)
FILE_PATH=$(echo "$INPUT" | python3 -c "import sys,json; d=json.load(sys.stdin).get('input',{}); print(d.get('file_path','') or d.get('path',''))" 2>/dev/null)
# frontend/, styles.css, .html, .js, .css 파일만 대상
case "$FILE_PATH" in
*frontend/*|*styles.css|*.html|*.js|*.css)
RULES=""
# CSS 파일 → 디자인 시스템 규칙
if [[ "$FILE_PATH" == *.css ]]; then
RULES="[design-system] border-radius: --radius-xs(4px) 기본, --radius-sm(8px) 카드/업로드만, --radius-full pill/원형만. hover: 속성 1개만(CTA 예외). shadow: Modal/Toast/CTA만. 색상: var() 필수. 문서에 없는 스타일 추가 금지. 상세: docs/DESIGN_SYSTEM.md 참조."
fi실제 Hook 파일을 보니 이런식으로 작성되어있어요. skill에 담긴 내용 중 핵심을 Rule 에 적고 skill문서를 참고하도록 했는데, 이제 이걸 활용해서 실제로 바이브코딩이 의도한 대로 되는지 확인을 해보고 사례글을 또 써야겠습니다.
강의를 듣고서도 실행하려니 좀 막막했는데, 뉴스레터에 소개된 @김한솔 님의 사례를 보고 아이디어와 실행 둘 다 도움을 많이 받았습니다! 제 글도 초보 바이브코더에게 도움이 되길 바라며... :)
https://www.gpters.org/uiux/post/why-you-shouldnt-tell-Wd437N46KWsXmMU
