AI 활용 · 바이브코딩 노트

거대언어모델(LLM)은 주어진 문맥 뒤에 이어질 확률이 가장 높은 토큰 조각을 순차적으로 생성한다. 아래 세 가지 특성을 전제로 작업을 설계한다.

• 지식 기준 시점(Knowledge Cutoff): 모델 구축 이후 바뀐 최신 라이브러리 문법은 모를 수 있으므로 패키지 버전이나 공식 문서 근거를 직접 건네준다.
• 비결정성(Non-determinism): 같은 요청도 매번 조금씩 다르게 작성하므로 반드시 지켜야 할 기준은 수치와 규칙 파일로 고정한다.
• 그럴듯함 편향(환각): 확실하지 않은 내용도 그럴듯하게 이어 쓰려는 성향이 있으므로 실제 파일 열람과 빌드 확인을 필수로 묶는다.

한 번의 응답을 생성할 때 동시에 참조할 수 있는 최대 토큰 용량이다. 내가 친 질문뿐 아니라 시스템 프롬프트, 규칙 파일, 읽어들인 코드, 이전 대화와 에러 로그가 모두 이 공간을 차지한다.

• 책상이 80% 이상 차면 초기에 적어 둔 제약 조건이 희미해지는 중간 망각(Lost in the Middle) 현상이 나타난다.
• 독립된 기능 하나가 마무리되면 대화를 압축(`/compact`)하거나 **새 세션(New Chat)**을 열어 깨끗한 상태에서 다음 작업을 이어간다.

매번 반복하는 기본 원칙을 프로젝트 루트 규칙 파일에 적어 두면 새 대화를 열 때마다 자동으로 먼저 반영된다.

• 포함할 내용(50~120줄 압축): 기술 스택·버전, 타입체크·빌드 명령어, 폴더 구조, 디자인 토큰 경로, 절대 금지 규칙(`.env` 수정 금지, 무분별한 패키지 추가 금지 등).
• 제외할 내용: 일회성 작업 메모나 수천 줄짜리 장황한 문서(매 턴 컨텍스트만 낭비하고 핵심 규칙이 묻힌다).

새 기능을 추가하거나 화면을 개편할 때 아래 네 항목을 채워 전달하면 불필요한 재수정이 크게 줄어든다.

• 목표(Goal): 만들 기능과 목적을 한 문장으로 정의.
• 맥락(Context): 기존 스타일과 패턴이 담긴 파일 경로(예: `src/app/globals.css`)를 지정해 먼저 읽게 함.
• 제약(Constraints): 8pt 여백 수치, 반응형 폭, 지정 파일 외 수정 금지, 외부 패키지 추가 금지 등 경계선 명시.
• 완료 조건(Done): 5대 상태 포함 여부, 모바일 375px 정상 표시, `tsc --noEmit` 무오류 통과 등 기준 제시.

파일 여러 개가 얽힌 작업을 곧바로 코드부터 고치게 하면 방향이 어긋났을 때 되돌리기 번거롭다. 코드 수정 전에 계획부터 짧게 확인하는 2단계가 가장 빠르다.

• 1단계(계획 요청): `'아직 코드는 수정하지 말고, 관련 파일을 읽은 뒤 수정 대상 파일 목록과 구현 방향부터 정리해 줘.'`
• 2단계(조정 후 실행): 계획에서 어긋난 부분(예: 새 라우트 대신 탭으로 분리)을 바로잡은 뒤 실제 수정을 진행.
• 역질문 유도 문구: `'모호하거나 결정이 필요한 지점이 있으면 추측해서 구현하지 말고 먼저 질문해 줘.'`

'뭔가 답답해 보인다'처럼 인상만 말하면 이미 마음에 들던 색상과 서체 크기까지 한꺼번에 바뀌어 버린다.

• 유지 대상 선언: `'현재 카드 컬러와 타이포 크기는 그대로 유지하고,'`처럼 보존할 영역을 먼저 잠근다.
• 수치 중심 변경: `'카드 내부 패딩만 16px → 24px로 넓히고 카드 간 gap을 12px → 20px으로 조정해 줘.'`

챗봇이 텍스트 답변 한 번으로 끝난다면, 에이전트는 목표 기준을 충족할 때까지 도구를 호출하며 피드백 루프를 돈다.

• 파일 열람·검색·타입체크처럼 안전한 조회 작업은 자율 실행에 맡기고, 파일 삭제·패키지 설치·외부 배포처럼 되돌리기 어려운 작업은 사전 승인을 거치게 둔다.

**MCP**가 외부 도구와 연결하는 표준 포트라면, **RAG**는 추측 대신 참고할 실제 근거 문서를 먼저 쥐여주는 방식이다.

• MCP: 브라우저 제어(Playwright), 디자인 시안(Figma), 저장소(GitHub), 데이터베이스 등을 표준 규격으로 연결해 실제 상태를 읽고 검증하게 해준다.
• 실무형 수동 RAG(근거 파일 고정): 작업 지시 시 `@globals.css`, `@src/data/labData.ts`처럼 기준이 되는 실제 파일을 먼저 읽히고 그 구조와 토큰만 따르도록 못 박는다.

'잘 되는지 확인해 줘'라고만 적으면 코드만 눈으로 훑고 끝내기 쉽다. 구체적인 검증 명령과 확인 항목을 명시한다.

• 1단계 · 타입·문법 검사: `npx tsc --noEmit` 또는 빌드가 에러 0건(Exit 0)으로 통과하는지 확인.
• 2단계 · 로직·데이터 무결성 확인: 연결된 ID나 필터 조건이 누락 없이 매칭되는지 확인.
• 3단계 · 실제 라우트 응답 확인: 로컬 서버에서 대상 경로 `200 OK` 및 핵심 텍스트 렌더링 확인.
• 4단계 · 반응형 폭 확인: 데스크톱(1280px)과 모바일(375px) 양쪽에서 레이아웃 깨짐 확인.
• 5단계 · 콘솔 에러 확인 및 직접 확인하지 못한 항목은 `'미확인'`으로 구분 표기.

'안 돼, 다시 고쳐줘'만 반복하면 임시방편 코드 위에 또 임시방편이 겹쳐 구조가 꼬인다. 개발자 도구(F12 → Console / Network)의 원문 단서를 전달하고, **같은 에러가 3번 연속 안 풀리면 코드 수정부터 멈춘다.**

• 3회 루프 탈출 순서: ① 코드 수정 즉시 중지 → ② 지금까지 실패한 시도와 원인 가설 3가지 정리 → ③ 가장 유력한 지점 1곳에 로그만 찍어 원인 확정 → ④ 꼬인 코드는 마지막 정상 Git 커밋으로 되돌린 뒤 깔끔하게 재적용.

오른쪽 여백을 고쳤더니 왼쪽 메뉴가 틀어지는 현상은 수정 허용 범위가 열려 있을 때 생긴다. 허용 파일과 금지 파일을 명시해 변경 반경을 가둔다.

• 허용 파일 지정(Whitelist): `'이번 수정은 오직 `src/components/Header.tsx` 파일 안에서만 진행해.'`
• 금지 파일 잠금(Blacklist): `'공통 레이아웃(`layout.tsx`), 라우팅 구조, `package.json`은 절대 수정하지 마.'`
• 최소 변경(Minimal Diff): 파일 전체 재작성 대신 필요한 줄만 정밀하게 고치도록 제한한다.

혼자 작업할 때도 Git은 언제든 1초 만에 돌아갈 수 있는 가장 확실한 세이브 슬롯이다. 배포 전에는 비밀키 노출 여부도 함께 점검한다.

• 세이브 습관: 기능 하나가 정상 작동할 때마다 `git add . && git commit -m '메시지'`로 저장 지점을 남긴다.
• 보안 1 · 비밀키 분리: API 키·DB 비밀번호는 프론트엔드 코드나 `NEXT_PUBLIC_` 변수에 넣지 않고 서버 전용 `.env`에만 두며 `.gitignore`로 커밋을 막는다.
• 보안 2 · 서버 검증 필수: 화면에서 버튼을 숨긴 것만으로 권한이 막히지 않으므로 서버에서 권한·입력값을 다시 검증한다.
• 보안 3 · XSS 차단: 외부 입력값을 여과 없이 `dangerouslySetInnerHTML`이나 `innerHTML`에 넣지 않는다.