바이브코딩·앱 만들기
코덱스·클로드 코드로 웹사이트·앱을 만들고 배포하는 법 · 54편
바이브코딩 애니메이션 용어 24가지, AI에게 움직임 정확히 요청하는 법
바이브코딩 애니메이션 용어 24가지를 뜻과 어울리는 자리, 그대로 붙여 넣는 요청 문장으로 정리했습니다. 효과 이름·속도·시작 조건 공식과 모션 감소 설정 문구까지 담았습니다.
ChatGPT 데스크톱 앱 설치 방법, 코덱스로 폴더·엑셀 작업 시키기
ChatGPT 데스크톱 앱 설치부터 코덱스 모드 선택, 권한과 프로젝트 폴더 설정, 폴더 정리와 항공권·숙소 엑셀 조사까지 윈도우 기준 36단계로 정리했습니다.
그래피파이 사용법, 코드를 지식 그래프로 만들어 토큰 줄이기
그래피파이(Graphify) 사용법을 설치부터 지도 만들기, 질문 명령, 갱신, 삭제까지 정리했습니다. 코드와 문서가 밖으로 나가는 범위, 토큰 절감 수치를 읽는 법도 담았습니다.
AI 코딩 토큰 절약 도구 7가지, 문제별로 고르는 법과 설치
AI 코딩 토큰 절약 도구 7가지를 쓰는 양, 읽는 양, 찾아 헤매는 과정, 내 설정 중 어디를 줄이는지로 나눠 비교했습니다. 클로드 코드 설치 명령, 확인법, 라이선스까지 담았습니다.
클로드 코드 서브에이전트 만들기, 비개발자가 폴더 하나로 시작하는 법
클로드 코드 서브에이전트 만들기를 비개발자 기준 21단계로 안내합니다. 폴더와 코드 탭 준비, 내 상황 알리기, CLAUDE.md 규칙집과 AI 직원 만들기, 첫 일 맡기기와 권한 주의점을 담았습니다.
바이브코딩 보안 점검, 권한·비밀 키·업데이트·에이전트 체크리스트
바이브코딩 보안 점검을 권한, 비밀 키, 업데이트, 에이전트와 패키지, AI 점검으로 나눠 26단계로 적었습니다. 슈퍼베이스 RLS 설정과 키 유출 대처, 백업 복구 시험까지 내 앱 기준입니다.
BigQuery 대시보드 만들기, 클로드와 챗GPT 코덱스로 질문하며 키우는 법
BigQuery 대시보드 만들기를 클로드와 챗GPT 코덱스로 따라 합니다. 데이터 연결, 질문을 이어 가며 분석 추가, 공유와 데이터 갱신 방식 차이까지 정리했습니다.
코덱스 이미지로 화면 만들기, 캡처 한 장으로 대시보드 복제
코덱스 이미지로 화면 만들기를 테슬라 대시보드 캡처 예시로 정리했다. 이미지 첨부와 CLI -i 옵션, 조건을 붙인 요청 문장, 결과를 원본에 가깝게 고치는 요령과 상표 주의점까지 담았다.
깃허브 트렌딩 AI 도구 10개, 구직 비서와 보안 감사 스킬까지
10월 21일 깃허브 트렌딩 AI 도구 10개를 순위별로 정리했습니다. 구직 비서 AI Job Search, 클라우드플레어 보안 감사 스킬, 토큰 압축 Headroom 등 하는 일과 별 수, 라이선스, 설치 명령, 주의점을 담았습니다.
바이브 코딩 웹사이트 만들기, 코덱스 설치부터 버셀 배포까지
바이브 코딩 웹사이트 만들기를 코덱스 앱 설치, 지시문 작성, 깃허브 비공개 저장소 업로드, 버셀 배포와 재배포까지 50단계로 따라 하게 정리했습니다. 요금과 무료 플랜 조건도 함께 담았습니다.
코덱스 AI 챗봇 만들기, 업스테이지 API와 웹 검색 붙여 배포
코덱스 AI 챗봇 만들기를 업스테이지·Tavily API 키 발급, 디자인과 AGENTS.md 지침 파일, 깃허브 업로드, 버셀 환경 변수 배포, 키 교체까지 순서대로 정리했습니다.
바이브코딩 프론트엔드 개념, 기기로 가는 코드와 서버에 둘 코드
바이브코딩 프론트엔드 개념을 사용자 기기로 가는 코드와 서버에 둘 코드라는 기준 하나로 설명합니다. 리액트, 타입스크립트, 빌드, shadcn/ui, Electron과 비밀 키·RLS 보안 사례까지 담았습니다.
AGENTS.md 예시와 하네스 실습, 지시 파일 있는 코덱스 비교
AGENTS.md 예시와 PLANS.md, 스킬, 평가 샘플을 갖춘 Codex와 프롬프트 한 줄만 준 Codex를 같은 과제로 비교한 실습입니다. 채점표 7개 항목, 점수가 갈린 이유, 내 프로젝트에 지시 파일을 심는 순서를 담았습니다.
RAG 챗봇 만들기, Supabase 구글 로그인과 대화 저장까지
RAG 챗봇 만들기를 코덱스로 따라 하게 정리했습니다. 회사 PDF 임베딩, 구글 클라우드 OAuth와 Supabase 구글 로그인 연결, 대화 저장과 RLS, 버셀 재배포와 동작 확인까지 담았습니다.
DESIGN.md 작성법, 받은 디자인 문서를 내 사이트에 맞게 고치기
DESIGN.md 작성법을 공개 문서 적용부터 결과 평가, 계획 먼저 받는 보정 요청, Do's and Don'ts 규칙 추가까지 17단계로 정리했습니다. 파일 형식과 lint·diff 검사 명령도 담았습니다.
모임 일정 사이트 만들기, 코덱스로 달력·채팅 넣고 링크 공유
모임 일정 사이트 만들기를 코덱스 21단계로 정리했습니다. 달력 날짜 체크, 장소 추천, 공지, 채팅을 말로 요청해 넣고, 챗GPT 사이트 주소로 로그인 없이 링크를 공유하는 방법과 공개 범위 주의점까지 담았습니다.
바이브코딩 기초 지식, IDE·깃·포트·API·DB 개념 한 번에
바이브코딩 기초 지식을 입문자 눈높이로 정리했습니다. LLM·CLI·IDE, 깃과 깃허브, 프런트엔드와 백엔드, 포트와 로컬호스트, 배포·API·DB 개념과 VS Code·깃허브·클라우드플레어 첫 배포 28단계를 담았습니다.
바이브코딩 데이터베이스 구축, PostgreSQL 설치부터 대시보드까지
바이브코딩 데이터베이스 구축을 Windows에서 따라 하는 147단계 실습입니다. VS Code·Python·Node.js·Git·PostgreSQL 설치, psql Path 오류 해결, Claude Code로 CSV 적재, pgAdmin 확인, 매출 대시보드 연결까지 담았습니다.
깃허브 트렌딩 9월 5주 Top 10, 1위 paperclip과 주의점
깃허브 트렌딩 9월 5주 Top 10을 1위 paperclip부터 Next.js 원격 코드 실행 패치, VoiceStudio 비상업 라이선스까지 정리했습니다. 써 보기 전에 확인할 버전과 설정 다섯 가지를 함께 담았습니다.
Cloudflare Pages 무료 배포 방법, HTML 게임 폴더 끌어다 올리기
Cloudflare Pages 무료 배포 방법을 처음부터 따라 합니다. 제미나이로 PRD와 코드를 받고 메모장으로 index.html을 저장한 뒤, 폴더를 끌어다 놓아 pages.dev 주소를 만들고 휴대폰으로 실행하는 40단계와 무료 한도를 정리했습니다.
온프레미스 클라우드 차이, 집 짓기와 호텔 비유로 고르는 법
온프레미스 클라우드 차이를 집 짓기와 호텔 살기에 빗대어 설명합니다. 서버 용량 문제, 클라우드가 맞는 경우와 온프레미스가 맞는 경우, 옮길 때 드는 비용, 작은 가족 사이트를 올릴 곳까지 정리했습니다.
웹 개발 과정 순서, 서버부터 배포까지 집 짓기로 이해하기
웹 개발 과정을 집 짓기 순서에 맞춰 서버, 기획, 서버 세팅, DB와 테이블, 백엔드, 프런트엔드, 배포, 유지보수까지 설명합니다. 깃허브와 배포 서비스의 차이, AI로 웹게임을 여는 맛보기도 담았습니다.
grill-me 스킬 사용법, 설치부터 tdd·구조 점검까지 10단계
grill-me 스킬 사용법을 설치부터 첫 작업까지 10단계로 정리했습니다. grill-with-docs로 요구사항을 맞추고 tdd로 AI 코드를 검증하며 구조를 주기적으로 점검하는 흐름과 실제 설치 명령을 담았습니다.
HTML CSS 자바스크립트 차이, 메모장으로 웹페이지 만들기
HTML CSS 자바스크립트 차이를 뼈대·인테리어·스위치 비유와 예제 코드로 설명합니다. 글자·여백·배경색·팝업 문구를 직접 고치는 법, 메모장에서 html과 UTF-8로 저장하는 법, 자주 쓰는 태그를 담았습니다.
자동화 대시보드 만들기, AI 인터뷰 설계부터 Railway 배포까지
자동화 대시보드 만들기를 화면보다 설계부터 시작하는 113단계로 정리했습니다. AI 인터뷰로 문제·데이터·화면을 정하고, 목업과 테마, MVP 검수를 거쳐 GitHub와 Railway로 스테이징·운영 배포까지 갑니다.
클로드 데스크톱 앱 사용법, 채팅 자동화부터 웹서비스 배포까지
클로드 데스크톱 앱 사용법을 99단계로 알려 드립니다. 설치와 요금제, 예약 자동화·PPT·엑셀·아티팩트 공유·Gmail 커넥터·스킬, 코드 모드로 만든 게임과 로그인되는 구독 관리표의 Vercel 배포까지 담았습니다.
AI 코딩 도구 추천 8가지, 막히는 상황별로 고르는 깃허브 저장소
AI 코딩 도구 추천 8가지를 코드 구조가 안 보일 때, 사이트가 느릴 때, AI가 의도를 엉뚱하게 해석할 때처럼 막히는 상황별로 정리했습니다. 각 저장소의 별 수와 라이선스, 설치 명령을 함께 담았습니다.
클로드 코드 계획 모드로 웹사이트를 실제 서비스로 만드는 법
클로드 코드 계획 모드로 웹사이트를 회원 가입·글·댓글이 되는 실제 서비스로 바꾸는 순서를 알려 드립니다. 계획 요청부터 Supabase 터미널 로그인까지 28단계와 Git·Supabase·Cloudflare 역할을 담았습니다.
깃허브 AI 오픈소스 10선, DeepSeek Harness와 OmniRoute
깃허브 AI 오픈소스 10선을 DeepSeek Harness, OmniRoute, MoneyPrinterTurbo, Ponytail 등 하는 일과 별 수, 라이선스로 정리했습니다. 개발자 미리 보기 도구를 안전하게 시험하는 방법과 AI 표시 규정도 담았습니다.
스택 오버플로 개발자 설문 2026, AI 도구·언어·만족도 수치
스택 오버플로 개발자 설문 2026 결과를 웹 개발 도구 1위, 언어 10년 흐름, AI 사용과 믿음, 업무 만족도로 나눠 정리했습니다. 응답 30,903명 기준 수치와 작년 대비 변화를 함께 담았습니다.
AI 개발 도구 텔레메트리 끄는 법, 10월 깃허브 트렌딩 정리
AI 개발 도구 텔레메트리 끄는 법을 10월 둘째 주 깃허브 트렌딩 Top 10과 함께 정리했습니다. text-to-cad, claude-mem, 하이퍼프레임, e2e의 끄는 명령과 버전 고정, 요금제 자동 전환 막는 설정을 담았습니다.
REA 활용법 5가지, 기능 분석부터 버그·보안 점검까지
REA 활용법 다섯 가지를 설치부터 25단계로 정리했습니다. 다른 앱의 기능 동작 분석, 경쟁 서비스 조사, 내 앱 버그·성능·보안 점검 요청 문장과 확인·추정·모름 리포트 읽는 법을 담았습니다.
깃허브 오픈소스 추천 4가지, PhotoCraft·VoiceStudio 설치법
깃허브 오픈소스 추천 4가지인 PhotoCraft, VoiceStudio, 하이퍼프레임, REA를 설치부터 첫 결과물까지 27단계로 정리했습니다. 별 수와 라이선스, 알파 단계의 한계, 목소리 복제 주의점도 함께 담았습니다.
REA 작동 원리, 분석 대상별 결과와 맥·윈도·리눅스 차이
REA 작동 원리를 에이전트가 MCP로 분석기를 부르는 흐름으로 풀고, 분석 대상별 결과, 맥·윈도·리눅스 준비물 차이, 에이전트 설치·점검·제거 명령, 결과의 한계와 저작권·약관 주의점을 정리했습니다.
바이브 코딩 실력 차이, "고쳐줘"에서 갈리는 이유와 타입스크립트
바이브 코딩 실력 차이가 새 기능이 아니라 에러를 고칠 때 나는 이유를 알려 드립니다. 에러 메시지에서 파일과 줄을 찾는 순서, 범위를 좁힌 수정 요청 프롬프트, 타입스크립트 읽기 기초까지 담았습니다.
REA 사용법, 소스 코드 없이 앱 원리 찾는 역분석 도구
REA 사용법을 설치 6단계와 첫 분석 요청 프롬프트로 알려 드립니다. 소스 코드 없이 앱 원리를 찾는 방식, 필요한 Node.js 버전과 Hopper·Ghidra·IDA, 저작권법상 역분석 허용 범위와 약관 주의점까지 담았습니다.
웹 UI 자료 사이트 5곳, 바이브코딩 결과물이 비슷해 보일 때
바이브코딩 결과물이 비슷해 보일 때 쓸 웹 UI 자료 사이트 5곳. 움직이는 아이콘, UI 블록, GSAP 컴포넌트, 디자인 레퍼런스, 클로드 코드용 리액트 스킬의 라이선스와 설치 명령을 16단계로 정리했다.
바이브코딩 서버 구조, 호스팅과 서버 비용 차이와 Nginx
바이브코딩 서버 구조를 처음 배포하는 사람 눈높이로 설명합니다. 도메인 접속 5단계, 호스팅과 서버의 사이트 개수별 비용 차이, Nginx 서버 블록 예시, 서버 한 대 운영 전략까지 담았습니다.
비개발자 AI 게임 만들기, 지오스포츠가 퍼진 설계 11단계
비개발자 AI 게임 만들기 사례로 알려진 지오스포츠가 Claude Code와 Vercel로 만들어진 과정, 가입 없는 1분 플레이와 이모지 결과 공유, 오늘의 호스트 출제 방식을 11단계로 정리했습니다.
AI 앱 빌더로 만든 복근 점수 앱, 공개 매출 자료와 출시 순서
AI 앱 빌더로 만든 복근 점수 앱 AbMaxx의 공개 매출 자료를 MRR 기준으로 읽는 법, Lovable에서 Rork로 다시 만든 과정, 광고 실수와 틱톡 전환, 출시 전 수요 검증 12단계를 정리했습니다.
클로드 코드 버셀 배포 방법, 깃허브에 올리고 잘못되면 롤백
클로드 코드 버셀 배포를 한 문장 요청으로 시작하는 법과, 자동 배포로 화면이 깨졌을 때 버셀에서 직전 배포로 되돌리는 롤백 순서, 배포 전 검사 장치 만드는 요청 예시까지 담았습니다.
바이브코딩 창업 사례, Stan이 14일 만에 AI 에이전트를 만든 과정
바이브코딩 창업 사례로 꼽히는 Stan의 AI 에이전트 스탠리 14일 제작 과정을 날짜순으로 풀었다. 범위 자르기, 지시가 많아 망가진 문제와 해결, 내 프로젝트 적용법까지 담았다.
AI 인터뷰 프롬프트 사용법, UI 작업 전에 질문받는 3단계
AI 인터뷰 프롬프트로 AI가 먼저 질문하게 만들어 UI 작업 결과를 바로잡는 3단계를 알려 드립니다. 역할·규칙·질문 요청을 담은 복사용 예시와 인터뷰 뒤 결과물 받는 순서, 막힐 때 대처법을 담았습니다.
DHH 에이전트 코딩 관점, 37signals가 손코딩을 멈춘 이유
DHH 에이전트 코딩 관점을 순서대로 짚었습니다. 37signals가 손코딩을 멈춘 이유, Hey 네이티브 앱과 Rust 백엔드 수치, 앱에 CLI를 달라는 요구와 이를 시작하는 프롬프트·과제 설명서 틀까지 담았습니다.
마누스 홈페이지 만들기, 뉴스레터·로그인·AI 챗봇까지 29단계
마누스 홈페이지 만들기를 29단계로 안내합니다. 바꿔 쓰는 요청문 틀, 블루프린트 승인, 리센드 API 키 발급, 뉴스레터·로그인·AI 챗봇 점검과 사용량 화면에서 볼 비용까지 담았습니다.
아샴푸 뮤직 스튜디오 2027 무료 배포, 받는 법과 설치 방법
아샴푸 뮤직 스튜디오 2027 무료 배포를 받는 방법을 계정 로그인부터 설치, 등록 확인까지 9단계로 설명합니다. 기능 네 가지와 설치 시 주의점, 공식 조건 확인법도 담았습니다.
바이브코딩 UI 용어 총정리, AI에게 화면 수정 요청하는 법
바이브코딩 UI 용어를 11개 카테고리 표로 정리했습니다. AI가 자주 빼먹는 세이프 에어리어, 엠프티 스테이트 등 주의 항목 아홉 줄과 UI 참고 사이트 10곳, 화면 수정 요청 문장 예시까지 담았습니다.
GPT-6 아스트라 코덱스 꿀팁, AGENTS.md 정리와 추론 강도 설정
GPT-6 아스트라 코덱스 꿀팁 2가지. 스킬과 AGENTS.md 충돌을 정리하는 복사용 프롬프트, 점수·비용표로 본 추론 강도 선택 기준, 코덱스 설치와 설정 위치, 백업 요령까지 담았습니다.
챗GPT 코덱스로 홈페이지 만드는 법, 기획부터 사이트 배포까지
코덱스 홈페이지 만들기를 기획, 디자인, 다듬기, 배포 순서로 알려 드립니다. 복사용 프롬프트, 레퍼런스 사이트, gpt-taste 스킬 설치 명령, 색감·사진·움직임 다듬기, 맞춤 도메인 연결까지 담았습니다.
코덱스 블로그 자동화 방법, 네이버 글 작성부터 임시 저장까지
코덱스 블로그 자동화 방법을 7단계로 정리했다. 네이버 카테크 스타일 학습 프롬프트, 최신 주제 고르기, 에디터 업로드와 임시 저장, 수정·예약 발행 프롬프트에 설치법과 저품질·저작권 주의점까지 담았다.
클로드 코드 개발 워크플로 7단계, intent.md부터 배포까지
앤트로픽 Applied AI 팀이 공개한 AI 네이티브 개발 방식을 클로드 코드 개발 워크플로 7단계로 풀었습니다. intent.md, spec.md, plan.md 작성부터 빌드, 테스트, 배포, 유지보수까지 단계별로 무엇을 하는지 용어를 풀어 설명합니다.
클로드 코드 깃허브 사용법, 커밋·브랜치·.gitignore 3가지
클로드 코드 깃허브 사용법을 커밋, 브랜치, .gitignore 세 가지로 다룬다. 깃 설치와 이력 관리 시작, 비공개 저장소에 푸시하는 순서, 에이전트에게 그대로 넣을 지시 문장, 키가 유출됐을 때 할 일까지 초보자 기준으로 따라 할 수 있다.
코덱스(Codex) 사용법 총정리, 핵심 기능 5가지와 멀티 터미널
코덱스(Codex) 사용법을 앱 설치와 로그인부터 권한·메모리 설정, 컴퓨터 유즈와 노션 플러그인, 계획 모드, 클로드 코드와 함께 쓰는 멀티 터미널, 인앱 브라우저까지 실제 메뉴 경로와 함께 정리했다.
코덱스 브라우저 자동화, API 없는 웹 업무 맡기는 법과 설치
코덱스(Codex) 브라우저 자동화로 API가 없는 서비스의 클릭과 입력을 맡기는 네 가지 활용법을 정리했습니다. 터미널 설치 순서, 요금 구조, 로그인 계정을 맡길 때의 안전 수칙과 셀레늄 같은 도구와의 차이까지 담았습니다.