해피 테크로그

Codex나 Claude Code가 웹사이트를 만들어 주었는데, 그다음 무엇을 해야 할지 모르겠다면 이 글만 천천히 따라오면 됩니다. Git을 처음 듣는 사람도 이해할 수 있도록, 내 컴퓨터에 있는 프로젝트가 실제 인터넷 주소가 되는 과정을 처음부터 설명합니다. 요즘은 코딩을 몰라도 자연어로 프로그램을 만들 수 있습니다. “이미지를 변환하는 웹사이트를 만들어줘”, “회원가입이 있는 예약 페이지를 만들어줘”라고 요청하면 AI가 파일을 만들고 화면까지 완성해 줍니다. 그런데 마지막에 예상하지 못한 벽을 만납니다. “그래서 이걸 다른 사람은 어떻게 접속하지?” 내 컴퓨터에서만 열리는 웹사이트는 아직 세상에 공개된 서비스가 아닙니다. 다른 사람이 주소를 입력해 접속할 수 있도록 인터넷에 올리는 과정이 필요한데, 이것을 배포(Deployment) 라고 합니다. 배포를 검색하면 Git, GitHub, Repository, Commit, Push, Build, Vercel, 환경변수 같은 단어가 한꺼번에 등장합니다. 비개발자에게는 코딩보다 이 용어들이 더 어렵게 느껴질 수 있습니다. 하지만 처음부터 모든 기술을 공부할 필요는 없습니다. 각 도구가 무슨 역할을 하는지만 생활 속 물건에 비유해 이해하면 됩니다. 이 글에서 다루는 내용 1. 배포란 무엇인가 2. Git은 무엇인가 3. GitHub는 무엇인가 4. Repository·Commit·Push 뜻 5. 내 프로젝트에 맞는 배포 방법 6. HTML 사이트를 Netlify로 배포하기 7. Next.js를 GitHub와 Vercel로 배포하기 8. 환경변수와 API 키 9. 배포 오류 해결하기 10. AI에게 배포 준비를 맡기는 프롬프트 1. 배포는 무엇인가? 배포는 어렵게 말하면 프로그램을 운영 환경에 공개하는 일입니다. 쉽게 말하면 내 컴퓨터 안에만 있던 웹사이트를 인터넷에 올려 누구나 주소로 접속할 수 있게 만...

AI에게 일을 맡겼는데 첫 답은 그럴듯하지만 프로젝트의 규칙을 놓치거나, 매번 같은 설명을 반복하게 되는 일이 있다. 모델이 충분히 똑똑하지 않아서만은 아니다. 대개는 Context(맥락) 가 흐릿하기 때문이다. Context는 AI에게 주는 ‘작업 설명서와 현장 지도’다. 지도 없이 “맛집 찾아줘”라고 하면 유명한 곳만 말하지만, 동네·예산·인원·알레르기를 알려주면 현실적인 선택을 한다. 코딩 에이전트도 같다. 핵심 한 줄 좋은 Context는 많이 넣은 정보가 아니라, 이번 판단에 필요한 사실을 정확한 위치에 둔 정보 다. 1. 작업 목표와 ‘완료’를 함께 적는다 “로그인 기능 만들어줘”는 출발점일 뿐이다. 어떤 화면에서, 무엇을 허용하고, 테스트가 통과하면 끝인지가 있어야 AI도 같은 결승선을 본다. 나쁜 요청 좋은 요청 로그인 만들어줘 Next.js 앱에 이메일 로그인 화면을 추가해줘. 기존 디자인 토큰을 쓰고, 로그인 실패 문구는 한국어로 표시해줘. npm test 와 npm run lint 가 통과하면 완료야. 2. 변하지 않는 규칙은 파일로, 오늘의 일은 대화로 매번 말해야 하는 규칙은 대화창이 아니라 저장소의 AGENTS.md 에 둔다. Codex 공식 가이드는 이 파일에 프로젝트 구조, 실행·빌드·테스트 명령, 코딩 관례, 금지 사항, 완료 기준을 담으라고 권한다. 특히 짧고 정확한 파일이 길고 모호한 파일보다 낫다 고 설명한다. OpenAI Codex Manual Claude Code에서는 같은 역할을 CLAUDE.md 가 맡는다. Claude의 공식 문서도 “매 세션마다 다시 설명할 사실”만 적고, 반복 실수가 두 번째 생길 때 추가하라고 권한다. 구체적이고 간결하게 쓸수록 잘 지켜진다. Claude Code 문서 # AGENTS.md - 패키지 매니저는 pnpm만 사용한다. - 변경 전 관련 테스트를 먼저 찾는다. - API 응답 형식 변경 시 OpenAPI 스키마와 테스트를 함께 수정한다. - 완료 전: pnpm ...

1. 왜 토큰이 문제가 되는가 Claude Code로 하루 종일 작업하다 보면 어느 순간 “왜 이렇게 한도가 빨리 닳지?”라는 생각이 든다. 원인은 단순하다. 가장 똑똑한 모델일수록 토큰 단가가 비싸고, 코딩 작업의 대부분은 사실 그 정도의 추론 능력을 필요로 하지 않기 때문이다. Anthropic 공식 가격 정책 기준으로 보면 격차가 뚜렷하다. 모델 입력 (1M 토큰당) 출력 (1M 토큰당) Claude Fable 5 $10 $50 Claude Opus 4.8 $5 $25 Claude Sonnet 5 (2026년 8월 31일까지 도입가) $2 $10 Fable 5는 Opus 4.8의 2배, Sonnet의 5배에 달하는 단가다. 게다가 Fable 5를 포함한 최신 모델은 이전 세대보다 약 30% 더 많은 토큰을 소모하는 토크나이저를 쓰기 때문에, 같은 텍스트라도 체감 비용은 더 커진다. 문제는 단가만이 아니다. Claude Code에서 세션 하나가 파일을 읽고, 테스트를 돌리고, 로그를 확인하고, 다시 코드를 고치는 과정을 전부 최상위 모델 혼자 처리하면, 정작 “판단”에 쓰이는 토큰보다 “노동”에 쓰이는 토큰이 훨씬 많아진다. 파일 40개짜리 리팩터링을 처음부터 끝까지 Fable 혼자 맡기면, 정작 어려운 설계 판단을 하기도 전에 일일 한도나 주간 사용량을 다 써버리는 일이 흔하다. 그래서 나온 발상이 “ 오케스트레이션(orchestration) ”이다. 비싼 모델은 생각만 하고, 실제 손을 쓰는 작업은 싼 모델에게 맡기자는 것이다. 2. Fable 오케스트레이...

왜 토큰이 빨리 소모될까? 메시지를 보낼 때마다 이전 대화 전체(프롬프트, 응답, 도구 실행 결과 전부)가 처음부터 다시 전송되어 처리된다. 즉 토큰 사용량은 "내가 방금 입력한 양"이 아니라 세션이 시작된 이후 오간 모든 내용의 누적량 이다. 특히 Claude가 도구를 써서 파일을 읽거나 diff를 가져올 때마다 그 결과 전체가 대화 기록에 그대로 끼어들기 때문에, 무심코 큰 파일을 여러 개 읽게 하면 순식간에 컨텍스트가 불어난다.  💡 아래 명령어들은 모두 Claude Code를 실행 중인 터미널(또는 VS Code 통합 터미널) 안에서, 그냥 타이핑하고 Enter를 누르면 된다. 목차 01 세션 관리 02 CLAUDE.md 다이어트 03 작업에 맞는 모델 선택 04 MCP 서버 오버헤드 05 훅·스킬로 전처리 위임 06 서브에이전트 위임 07 확장 사고 조정 08 구체적인 프롬프트 09 Plan Mode + 조기 수정 10 코드 인텔리전스 플러그인 11 에이전트 팀 주의사항 12 서드파티 커뮤니티 도구 ＋ 사용량 확인 방법 ＋ 참고 자료 01 세션 관리 — 컨텍스트를 주기적으로 비우기 Claude Code는 세션이 길어질수록 이전에 시도했다 실패한 접근, 이미 해결된 에러, 더 이상 필요 없는 파일 내용까지 계속 컨텍스트에 들고 있는다. 아침에 시작한 세션을 점심 이후까지 그대로 이어가면, 실제로 지금 필요한 정보보다 "죽은 무게(dead weight)"가 더 많아질 수 있다. /clear 는 이 무게를 완전...