본문으로 건너뛰기

루프공방LoopLab

배우기 카탈로그 도구·모델 AI 질의 소식 챌린지 공유 방명록

페이지를 불러오는 중입니다.

루프공방

바이브코딩을 해 봤지만 아직 서툰 사람을 위해, 하네스·Skills·MCP·Hooks·실제 도구를 익히고 시행착오를 줄이는 학습 허브

검색 완전 초보 배우기 도구·모델 카탈로그 소식 챌린지 프로젝트 방명록 로그인

배우기
카탈로그
AI 질의
챌린지
공유

Learn

배우기

긴 강의보다 짧은 가이드와 실전 팁. 데모는 되는데 실전에서 막히는 구간을 집중 공략합니다.

완전 초보 바이브코딩 첫 실습 개발 지식 지도 프롬프트 작성 UI 결과물 고르기 가이드 20 꿀팁 진행 일지 챌린지 카탈로그

오늘 할 일 · 6단계

0/6

01
완전 초보
바이브·에이전트 정의 · Git/Node · Claude/Codex/Antigravity 설치
초보 가이드 →
02
프롬프트 작성
5칸 공식·복붙 예시로 에이전트에게 정확히 시키기
작성법 →
03
완전입문
기획 → 화면 → 배포까지 한 바퀴 (비전공 OK)
입문 →
04
UI 고르기
결과물 비교 + DESIGN.md 톤 선택
톤 고르기 →
05
첫 Build
한 줄·도구 1개 이상 남겨 공유 (게스트 OK)
올리기 →
06
챌린지 도전
주간 템플릿으로 한 번 더 — 반복이 실력
도전 →

완전 처음이면 여기부터

바이브코딩 첫 실습

AI 도구를 한 번도 써 본 적이 없어도 됩니다. 회의록 양식 · CSV 현황 · 기록 도구 · 미니 대시보드를 카드 복붙으로 오늘 당장 만듭니다.

10장 · 약 3시간 · 프롬프트 카드 그대로 복붙 →

완전 초보 · 여기부터

바이브코딩 · 에이전트 · 설치 가이드

정의부터 Git·Node, Claude Code · Codex · Antigravity 앱/CLI 설치·첫 프롬프트까지. 코딩 몰라도 OK.

완전 초보 가이드 →

초보 필수 · 이어서

프롬프트 작성법

5칸 공식 · 나쁜 예/좋은 예 · 상황별 복붙 레시피. 코드를 몰라도 에이전트에게 정확히 시키는 방법.

예시 보고 복사 →

개발 지식 지도

프론트 · 백엔드 · DB · 인증 · 보안 · 배포 · Git · 품질 · 안드로이드·애플 앱 · 스토어. 비유 + 용어 + 에이전트 지시문.

19단계 · 용어 사전 →

메 타깃

해 봤는데, 잘 안 되는 구간

주말 데모는 나오는데 · 권한·배포·디버깅에서 막히고 · 컨텍스트가 꼬입니다. 아래 가이드·꿀팁은 그 구간을 짧고 구체적으로 다룹니다.

막힐 때 추천

진행 상황·로그를 HTML로 저장하세요

채팅 창만 보면 ‘뭐가 됐고 뭐가 안 됐는지’가 흐려집니다. 짧게라도 오늘 목표 · 끝난 일 · 막힌 점 · 에러 로그 요약을 HTML 한 장으로 남겨 두면, 본인이 진행을 파악하기 쉽고 새 채팅·다른 도구에 이어서 붙이기도 좋습니다. 막힐 때마다 같은 파일을 고치면 됩니다.

파일 예: progress.html 또는 날짜별 메모
넣을 내용: 목표 1줄, 완료 체크, 재현 방법, 로그 핵심만
에이전트에게: “이 HTML 기준으로 이어서, 끝난 항목은 건드리지 마”

템플릿 다운로드 · 이어 지시 복붙 →

막힘 트리아지

지금 뭐가 막혔나요?

증상 하나를 고르면 바로 할 일과 에이전트용 한 줄 지시가 나옵니다.

위 버튼 중 가장 가까운 증상을 고르세요.

학습 가이드

프롬프트 작성: 5칸만 지키면 된다

목표·스택·규칙·완료·범위. 나쁜 예와 좋은 예, 복붙 레시피는 전용 페이지에.

입문프롬프트초보

개발 지식 없이 시작하기 (지도 안내)

프론트·백엔드·인증·보안·배포 용어가 막막할 때. 전체 지도로 이동하는 입구 가이드.

입문개발지식초보

바이브코딩 첫 주: 실패 패턴 피하기

데모는 되는데 다음이 없는 이유를 끊는 7일 루틴.

프롬프트 체크리스트 (복붙용)

매 작업 시작 시 붙여 넣는 최소 템플릿.

컨텍스트 예산 생각하기

긴 채팅이 망가지는 이유와 줄이는 법.

디버깅 루프 4단계

에러 메시지 → 최소 재현 → 가설 1개 → 패치.

MCP 안전하게 시작하기

처음 3개만, 읽기 권한부터.

스킬 설계: 한 스킬 한 책임

만능 스킬이 실패하는 이유.

에이전트 Hooks ≠ React Hooks

이름만 같은 다른 개념.

Supabase RLS 최소 세트

본인 row만 읽고 쓰기.

배포 전 12분 체크

로컬 OK → 프로덕션 깨짐 줄이기.

토큰·비용 감각

싸게 배우는 습관.

멀티 에이전트는 언제?

한 에이전트로 충분할 때 쪼개지 않기.

AI가 짠 코드 읽는 법

리뷰 포인트를 고정.

하네스 엔지니어링이란

프롬프트만 잘 쓰는 게 아니라, 에이전트를 감싸는 레일(규칙·훅·스킬·검증)을 설계하는 일.

하네스에이전트

하네스 레이어 쌓기

규칙 → 스킬 → 훅 → MCP → 평가 순서.

하네스실전

하네스 안티패턴

규칙 100줄, MCP 20개, 훅 과다.

하네스함정

네이버 지도·검색 API 활용하기

네이버 클라우드 플랫폼 Maps(Web Dynamic Map·Geocoding·Directions)와 개발자센터 검색 API(뉴스·지역·쇼핑)를 정리. 카카오 가이드와 대조해 보며 선택 기준까지.

API지도네이버

공공데이터포탈 Open API 활용하기

data.go.kr 활용신청부터 인증키 Encoding/Decoding 함정, 첫 호출, 페이징 수집까지. 기상청·실거래가·미세먼지 등 대표 서비스 예시 포함.

API공공데이터

카카오 지도·로컬 API 활용하기

JavaScript 키로 지도 띄우기부터 REST API로 주소↔좌표·장소검색·길찾기까지. 공식 문서(developers.kakao.com/docs/ko) 기준으로 키 발급부터 실전 코드까지.

API지도카카오

주제 맵

완전 초보 가이드

바이브코딩·AI 에이전트 정의, Git·Node, Claude Code·Codex·Antigravity 앱/CLI 설치·첫 프롬프트.

개발 지식 지도 (초보)

프론트·백엔드·DB·인증·보안·배포·Git·모바일 앱을 비유와 쉬운 말로. 전공 없이도 에이전트에게 시키는 법.

프론트엔드 UI · 결과물로 고르기

코드보다 화면 비교. DESIGN.md·getdesign.md·designmd.ai로 톤 고정 후 에이전트에 적용.

카카오 지도·로컬 API

키 발급부터 지도 띄우기·주소↔좌표·장소검색·길찾기 REST API까지. 키 없이 쓰는 지도 URL 포함.

네이버 지도·검색 API

NCP Maps(동적 지도·Geocoding·Directions)와 개발자센터 검색 API(뉴스·지역·쇼핑). 카카오와의 선택 기준까지.

공공데이터포탈 Open API

data.go.kr 활용신청·인증키 Encoding/Decoding 함정·첫 호출·페이징 수집. 기상청·실거래가·미세먼지 예시.

해 봤는데 잘 안 될 때

중간 사용자 구간: 작은 데모는 되는데 실서비스·디버깅·권한에서 막힘. 여기가 루프공방의 메 타깃.

바이브코딩이란

AI 코딩 도구로 짧은 루프를 도는 방식. 완벽한 설계보다 검증 가능한 한 조각.

프롬프트 작성법

5칸 공식·나쁜/좋은 예·상황별 복붙. 초보 필수.

하네스 엔지니어링

프롬프트만이 아니라 규칙·스킬·훅·MCP·테스트로 에이전트 루프를 감싸기.

Skills · MCP · Hooks · Plugin

실제 공개 확장의 역할과 보안. 설치 전에 무엇을 쓰는지 알기.

시크릿 · RLS · 권한

키를 채팅에 넣지 않기, DB는 본인 row만, MCP 최소 권한.

배포 전 짧게

env 목록, 프로덕션 한 번 열기, 에러 화면.

실전 꿀팁

프롬프트입문

지시는 5칸: 목표·스택·규칙·완료·범위

‘예쁘게 해줘’ 대신 목표 한 문장, 경로, 하지 말 것, 브라우저에서 볼 완료 조건, 이번 턴 범위만 적어도 성공률이 올라갑니다. 예시 모음: /learn/prompts

워크플로입문

한 번에 ‘앱 전체’를 시키지 마세요

바이브코딩을 해 본 사람이 가장 많이 하는 실수입니다. ‘로그인 있는 SaaS 전체’ 대신 ‘로그인 화면 + 세션 확인’처럼 한 조각만 끝낸 뒤 다음 조각으로 가세요.

컨텍스트중급

대화가 길어지면 새 채팅 + 요약

같은 스레드에 에러 로그를 계속 붙이면 모델이 예전 잘못된 가정을 붙잡습니다. 현재 목표·파일 경로·안 되는 점 3줄만 새 세션에 옮기세요.

막힘로그입문

막히면 진행·로그를 HTML로 남겨 두세요

채팅만 스크롤하면 ‘어디까지 됐는지’를 놓치기 쉽습니다. 오늘 목표·끝난 일·안 되는 점·에러 로그 요약을 짧은 HTML 한 장으로 저장해 두면, 본인이 진행을 보고 에이전트에게도 이어서 시킬 수 있습니다. 템플릿: /learn/progress

프롬프트

‘저 파일’ 대신 경로를 적으세요

`src/app/page.tsx`처럼 경로를 주면 환각이 확 줄어듭니다. ‘그 컴포넌트’ ‘아까 만든 거’는 실패 패턴입니다.

검증

‘됐습니다’를 믿지 말고 실행하세요

에이전트가 완료를 선언해도 tsc·브라우저·로그를 확인하세요. 초보가 아니라 숙련자도 같은 함정에 빠집니다.

MCP보안

MCP는 3개 이상 한꺼번에 켜지 마세요

처음엔 파일/GitHub 정도만. 서버가 많을수록 도구 선택 실수·권한 사고가 늘어납니다.

Skills

스킬은 ‘만능 비서’가 아니라 한 일

리뷰 스킬, 배포 체크 스킬처럼 책임을 쪼개세요. 모든 걸 하는 스킬은 결국 아무도 안 믿습니다.

하네스중급

프롬프트 말고 하네스를 고치세요

같은 실수가 반복되면 지시를 더 길게 쓰지 말고, 규칙 파일·훅·완료 조건(테스트)을 고치세요. 그게 하네스 엔지니어링의 시작입니다.

보안 한 장

·API 키·service_role을 채팅·공개 글·스킬 예시에 넣지 않기
·Supabase RLS: auth.uid() 본인 row — 개발 중에도 켜 두기
·MCP는 최소 권한·프로젝트 폴더만 — 홈 전체 금지
·GitHub PAT은 읽기부터, 만료 짧게

배포 전 짧게

·환경변수 키 이름 목록 (값 없이)
·마이그레이션 원격 반영 여부
·프로덕션 URL 홈·작성 한 번씩
·시크릿 패턴 검색