AI와 바이브 코딩 활용법

왜 클로드 모델부터 짚나

• 1)영상·젠스파크 화면에 Opus 4.8, Sonnet 4.6 같은 이름이 자주 나옵니다 — 스펙표를 외우라는 뜻이 아니라 앤트로픽 모델 라인업 소개 정도로 보면 됩니다.
• 2)지금 분위기상 AI 글쓰기·코딩 모두 클로드가 1황이고, 프로덕션·비즈니스 현장 개발자들도 Claude Code·CLI로 많이 씁니다.
• 3)저는 IDE형 커서를 메인으로 두지만, 모델·엔진 이야기만큼은 클로드를 먼저 짚습니다.

Opus · Sonnet · Haiku — 이름만 익히면 됨

• 1)등급은 세 단계 — Opus(최상위·긴 글·복잡한 코딩), Sonnet(균형·가성비), Haiku(경량·속도).
• 2)4.6 → 4.7 → 4.8은 같은 Opus/Sonnet 안에서 세대가 올라간 번호일 뿐, 숫자를 달달 외울 필요는 없습니다.

• 1)Opus — 최상위. 긴 글·기획·복잡한 코딩. 비싸고 상대적으로 느릴 수 있음.
• 2)Sonnet — 균형형. 빠른 수정·실무 초안·가성비.
• 3)Haiku — 경량. 단순·대량·속도·비용 우선.

버전 숫자 (4.6 → 4.7 → 4.8) — 참고

• 1)Opus 4.8이 현재 앤트로픽 최상위 라인이고, 젠스파크·클로드 코드 등에서도 자주 보입니다.
• 2)화면에 4.7만 보여도 "구세대 Opus"일 뿐 등급은 여전히 최상위입니다.
• 3)비즈니스·팀 단위로는 CLI·Claude Code 조합이 많고, 개인 바이브 코딩은 Cursor·Codex·젠스파크 조합도 흔합니다.

제가 실제로 고르는 기준

• 1)글쓰기·대본·칼럼·구조 설계 → Opus 4.8.
• 2)빠른 수정·반복 → Sonnet 4.6급.
• 3)단순 처리·실험 → Haiku 또는 로컬 모델.
• 4)젠스파크처럼 한 화면에서 모델을 바꿔 가며 같은 프롬프트를 비교하는 습관이 중요합니다.

젠스파크 화면에만 보이는 이름들 (o3, ChatGPT 5.5 등)

• 1)젠스파크 한 화면에는 Grok, Kimi, Gemini, OpenAI o3, ChatGPT 5.5·4.8·3.1 같은 표기도 함께 뜹니다.
• 2)전부 외울 필요는 없고, 「같은 프롬프트를 여러 엔진에 던져 결과를 고른다」는 용도로 이해하면 됩니다.
• 3)코딩·사이트 구현은 Cursor, 글·대본은 Opus 쪽 Sonnet/Opus 등급으로 나눕니다.

189+ 기능 — 한눈 요약

• 1)무료 앱·기능 189개 이상, 목표 300개+.
• 2)화면은 워드프레스 같아 보여도 전부 커서 등 바이브 코딩으로 만든 이 사이트입니다.
• 3)말로 떠들면 형광펜·목차·퍼센트·플로팅 버튼까지 구현됩니다. 아래 표는 대표 기능·상세·예시입니다.

숫자 정리 — 189 vs 188,065

• 1)189+는 무료 앱·계산기·칼럼·데이터 보드 기능 개수입니다.
• 2)188,065는 유튜브 채널 수집 DB 규모입니다 — 다른 지표이니 혼동하지 마세요.

바로 가볼 페이지

위키·인터랙션 (바이브 코딩이 되는지 보여주는 샘플)

• 1)형광펜 칠하기 효과
• 2)읽기 진행률 퍼센트 (우르륵 내리락)
• 3)우측 하단 탑·다운·목차 플로팅 버튼
• 4)글자 크기 키우기/줄이기
• 5)음악 재생 시 파형(wave) UI
• 6)위키 목차 패널
• 7)네이버 지도 삽입
• 8)국회의원 정보 검색(일부 API 응답 지연 — 수시 수정)

189개를 왜 만들었나

• 1)189개는 「한 사이트 몰빵」 실험 — AI가 뭘 잘/못하는지 미리 체득
• 2)백지에서 시작하면 어렵다 — 버튼·날짜 선택·입력 UI를 직접 만들어 본 뒤 AI와 대화
• 3)질문도 잘 아는 사람이 잘한다 — 기자처럼 송곳 질문은 도메인 이해에서 나옴
• 4)목표 300개+ — 유튜브·검색 유입 받아낼 무료 도구 계속 추가
• 5)국회의원 API 등 일부는 깨져 있음 — 살아 있는 사이트라 계속 고침

Supertonic TTS 체험

• 1)최근 관심 많았던 무료 AI TTS 생성 테스트를 Supertonic TTS 칼럼 하단에 붙였습니다.
• 2)제 PC·전용 TTS 서버가 켜져 있으면 사이트에서 생성 버튼만 눌러 합성할 수 있고, Enjoy Read 나레이션·칼럼 MP3도 같은 API로 올립니다.
• 3)ZIP으로 받아 로컬에서도 실험 가능합니다.

CPU만으로 — GPU 없이 · MIT 공개

• 1)슈퍼토닉(Supertonic)은 슈퍼톤이 MIT 라이선스로 공개한 CPU 전용 TTS입니다.
• 2)GPU 없이도 만 자·이만 자 긴 글을 처리할 수 있습니다.
• 3)칼럼 하단 생성 테스트 버튼으로 제 TTS 서버(tts.min-inter.co.kr) 체험이 가능합니다. ZIP 4번 다운로드 아래에도 같은 체험 링크가 있습니다.

한국어 TTS 소신

• 1)해외 TTS는 한국어가 약한 경우가 많습니다.
• 2)억양·호흡·띄어 읽기·감정은 한국 사람이 만들어야 합니다. 외국인이 만들면 감성이 안 맞습니다.
• 3)슈퍼톤은 한국 팀이 계속 개발하니 기대해 주세요.
• 4)목소리가 더 많은 유료 슈퍼톤 플레이가 있습니다. 제 링크로 가입 시 3,000포인트를 드립니다.

Vercel 45,000원 교훈

• 1)여러분 무료로 쓰시라고 공개한 ZIP 약 200MB — 다운로드할 때마다 트래픽 비용이 발생했고, 설계를 잘못한 결과(정확히는 AI한테 시킨 제 잘못) 버셀에서 45,000원이 청구됐습니다.
• 2)R2에 파일을 올려놨는데 해시값 확인 때문에 요청이 버셀을 경유해 나갔고 — R2는 egress가 없는데 버셀은 대역폭 요금이 있습니다.
• 3)원래 월 3만 원대 내다가 거의 5만 원. 무료로 풀었는데 제가 돈을 냈습니다.
• 4)같은 시기에 Supabase도 해지하고 D1·Turso로 옮겼습니다 — 인증만 필요할 때 Supabase, 대량 CRUD·수집은 Cloudflare 쪽이 낫습니다.

Cloudflare 스택 — Pages · Workers · D1 · R2 · KV

• 1)ZIP 200MB를 버셀 정적 호스팅에 두면 다운로드마다 대역폭 요금이 터집니다.
• 2)그래서 R2(파일) + Pages(화면) + Workers(API) + D1(DB) + KV(캐시)로 나눴습니다.
• 3)Access·도메인 설정은 여전히 까다롭습니다.

이전 경로 (마이그레이션 연습)

• Notion — 처음 홈페이지를 노션으로 구성
• Oopy (우피) — 노션 기반 사이트를 우피로 이전
• Vercel (버셀) — 우피에서 만든 사이트를 버셀로 배포
• Cloudflare — ZIP 트래픽 요금 폭탄 후 Pages·Workers·D1·R2로 이전

교훈

• 1)대용량·정적 페이지·DB·API를 한 곳에 몰면 요금이 터집니다.
• 2)적당한 스펙을 여러 곳에 나눠 분산 운영하세요. Cloudflare 이전 가이드 칼럼(Pages·Workers·D1·R2)에 부랴부랴 옮긴 과정을 더 적어 두었습니다.

처음 시작·이전 팁 (영상 기준)

• 1)처음엔 Vercel + Next.js + React + 로컬 SQLite로 — AI가 Next 코딩을 잘함
• 2)R2 파일을 버셀 경유(해시 검증)로 내보내면 egress 폭탄 — R2→사용자 직접 전송
• 3)Supabase — 인증·로그인 특화. 무거운 CRUD·대량 수집은 D1·Turso
• 4)Cloudflare — Pages·Workers·D1·R2·KV·Access. 월 8,000원대면 어지간한 건 가능, 설정은 까다로움
• 5)8개월 삽질·메뉴 익숙함 — 노션→우피→버셀→CF 이전은 며칠, 처음부터 CF는 골치
• 6)2인용 비공개 홈페이지 — 보안·Access 연습용으로 별도 구축 중
• 7)네이버 SNS 커뮤니티 — 인프라·요금 교훈은 커뮤니티에서 먼저 공유

노션 → Next.js — 디자인 그대로

• 1)예전 노션·우피 사이트를 Next.js로 그대로 옮겼습니다. 노션과 디자인이 비슷하고 애드센스도 붙어 있습니다.
• 2)사이트맵·이미지·DB까지 AI에게 「옮겨줘」하면 R2·D1로 이전됩니다.
• 3)Vercel 해지는 월 3만 원대지만 AI가 Next 코딩을 잘해줘서, 처음엔 Vercel로 연습하고 트래픽·대용량이 늘면 Cloudflare로 가는 순서를 추천합니다.