라벨이 Codex인 게시물 표시

Codex Context 관리법: /compact로 토큰 낭비 줄이고 긴 프로젝트 이어가기

이미지
Codex로 프로젝트를 오래 진행할수록 대화창에는 이전 지시, 파일 탐색 결과, 오류 로그가 계속 쌓인다. 이 글에서는 컨텍스트를 줄이는 기능 과, 긴 프로젝트를 안정적으로 이어 가는 실전 작업 흐름을 정리한다. Context가 길어지면 왜 불편할까? 컨텍스트(Context)는 Codex가 현재 작업을 위해 참고하는 정보의 묶음이다. 이전 대화, 지시사항, 읽은 파일, 명령 실행 결과, 오류 로그 등이 포함된다. 그래서 “아까 만든 기능을 조금 수정해줘” 같은 요청을 이해하기 편하다. 하지만 대화가 길어질수록 이미 끝난 논의와 긴 로그까지 함께 남는다. 지금의 작업과 관계없는 정보가 많아지면, 같은 파일을 반복해서 확인하거나 과거 결정과 충돌하는 제안을 할 가능성도 커진다. 핵심은 대화를 무조건 이어 가는 것이 아니라, 필요한 정보만 남겨서 이어 가는 것 이다. 가장 간단한 방법: /compact Codex CLI를 사용 중이라면 대화가 길어졌을 때 아래 명령을 입력할 수 있다. /compact /compact 는 지금까지의 긴 대화를 핵심 요약으로 바꾸는 기능이다. 프로젝트의 중요한 결정, 현재 진행 상태, 남은 작업은 가능한 한 유지하면서 오래된 세부 대화와 긴 출력 내용을 줄인다. 예를 들어 이미지 변환 기능을 구현하며 오류 로그를 여러 번 확인했다면, 그 모든 로그를 들고 가는 대신 “이미지 변환 기능 구현 완료, 브라우저 내 처리 방식 사용, 특정 형식의 예외 처리 보완 필요”처럼 압축된 정보만 남긴다. 알아둘 점: Codex는 대화가 길어지면 자동으로 압축하기도 한다. 다만 기능 하나가 끝났을 때 직접 /compact 를 실행하면 작업 전환 시점을 더 깔끔하게 정리할 수 있다. /compact 는 Codex CLI의 슬래시 명령이다. Codex 앱을 사용한다면 같은 목적을 위해 새 작업을 시작하고, 아래의 인수인계 문서를 활용하는 방식이 가장 확실하다. /compact ...

바이브 코딩은 끝났는데 배포를 못 한다면? Git·GitHub·Vercel 완전 입문 가이드

이미지
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. 배포는 무엇인가? 배포는 어렵게 말하면 프로그램을 운영 환경에 공개하는 일입니다. 쉽게 말하면 내 컴퓨터 안에만 있던 웹사이트를 인터넷에 올려 누구나 주소로 접속할 수 있게 만...

좋은 Context는 어떻게 만들까? AI 코딩 실전 원칙 7가지

이미지
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 ...

Codex로 무료 온라인 툴 사이트 만들기: AGENTS.md 하네스 적용부터 직접 따라 하기

NEXT.JS · CODEX · HARNESS TUTORIAL Codex로 무료 온라인 툴 사이트 만들기 하네스 적용부터 직접 따라 하기 오늘 적용한 AGENTS.md 하네스가 왜 필요한지 먼저 쉽게 설명하고, 이어서 프로젝트에 그대로 복사·붙여넣기 할 수 있는 문서와 Codex 요청문을 한 편에 정리했습니다. 이 글에서 다루는 내용 하네스를 적용한 이유 왜 문서를 나누나 폴더 구조 AGENTS.md docs 역할 Codex 사용 순서 먼저, 왜 Codex에 하네스를 적용했을까? 이번에 만들려는 것은 회원가입 없이 브라우저에서 바로 사용할 수 있는 무료 온라인 툴 사이트입니다. UUID 생성기, JSON Formatter, Base64, Timestamp Converter, QR Code Generator처럼 작은 도구를 하나씩 늘려 갈 계획입니다. 처음에는 “Codex에게 도구 하나씩 만들어 달라고 하면 되지 않을까?”라고 생각하기 쉽습니다. 그런데 도구가 늘어나면 기준도 함께 늘어납니다. 어떤 페이지는 오류 메시지가 영어이고, 어떤 페이지는 복사 버튼이 없을 수 있습니다. 어떤 기능은 입력값을 서버로 보내고, 어떤 기능은 브라우저 안에서 처리할 수도 있습니다. 이처럼 같은 사이트 안에서 규칙이 제각각이 되는 것을 막기 위해 하네스(harness) 를 적용했습니다. 하네스는 별도 프로그램이 아닙니다. Codex가 프로젝트를 작업할 때 먼저 읽고 지켜야 할 규칙, 안전 원칙, 확인 방법, 완료 기준을 적어 둔 프로젝트의 작업 안내서 입니다. 새 팀원에게 “우리는 이런 방식으로 일합니다”라고 알려 주는 짧은 온보딩 문서에 가깝습니다. 이 프로젝트에서는 그 중심 파일을 AGENTS.md 로 정했습니다. 코드와 파일명은 영어로, 사용자가 보는 문구와 오류 메시지는 한국어로 작성합니다. 가능한 기능은 브라우저에서 처리하고, 사용자 입력을 불필요하게 서버...

Codex 업무 자동화 예제 | Python 이미지 리사이즈 프로그램 만들기

이미지
오늘 처음으로 Codex를 설치해 보았다.  무료 플랜이라 사용할 수 있는 모델이 ' 5.6 Terra'  만 가능했다.  무료 플랜으로 만들 수 있는  실제로 사용할 수 있는 작은 자동화 도구 를 추천해 달라고 했더니,  그 중에 이미지 리사이즈 자동화 가 있었다.   그래서 다시 채팅으로 ' 이거 하고 싶은데 어떻게 해야 해?' 라고 물어보았더니,  아래와 같이(프로젝트 목표에서 마무리까지) 자세하게 설명해 주었다.  내가 한 것은 ChatGPT가 알려준 프롬프트 대로 Codex에게 일을 시킨 거 밖에 없는데,  아래의 프로젝트 목표와 똑 같은 결과물은 아니었지만, 괜찮은 결과물이 나왔다.  이미지 resize 하고, webp 변환 과,  이미지 압축(TinyPNG 같은 기능) 까지 해봤는데,  남아있는 토큰을 봤더니 25%가 남았다.  한 달 동안 쓸 수 있는 토큰의 75%를 쓴거다.  토큰이 5시간마다 리셋이 되었으면 불가능했을텐데,  한달마다 리셋되도록 풀려서 정말 맛보기로 간단한 것은 만들어 볼 수 있을 거 같다.  결과 코드는 github 에 올려 놓았다.  Python으로 구현되었으며 자세한 설치 방법과 사용법은 README을 보면 된다.  Codex 실행 화면 프로젝트 목표 예를 들어 다음과 같은 이미지 폴더가 있다고 가정한다. images/ photo1.jpg photo2.png logo.webp 다음과 같이 명령어를 실행하면 python resize.py images --width 1200 자동으로 output 폴더에 리사이즈된 이미지를 생성한다. output/ photo1.jpg photo2.png logo.webp 즉, 여러 장의 이미지를 한 번에 원하는 크기로 변경하는 자동화 프로그램 을 만드...