코덱스로 클로드 토큰 아끼기 - 브런치
[AI] 클로드 코드
|
|
📰 뉴스
#claude
#codex
#브런치
#비용 절감
#토큰 절약
요약
토큰 소모가 잦은 작업에서 비용을 절약하기 위해 오픈AI가 공개한 코덱스를 활용한 코드 수정 방법이 소개되었습니다. ChatGPT 계정만 있어도 바로 사용 가능하고 현재 무료 플랜이 지원되어 진입 장벽이 낮은 편입니다. 하지만 디자인 툴과의 직접 연동 기능이 부족하고 디자인적인 측면에서는 아쉬운 점이 남아 있습니다.
왜 중요한가
개발자 관점
검토중입니다
연구자 관점
검토중입니다
비즈니스 관점
검토중입니다
본문
토큰 아끼는 똑똑한 청년 아니고 디자이너. 오픈AI가 2025년 5월에 공개한 소프트웨어 엔지니어링 에이전트다. 이전 글에서 Claude 코드로 바이브 코딩하는 방법을 정리했었다. 글을 올리고 이틀 뒤, 클로드 디자인이 나왔다. 속도가 빠르다는 건 알고 있었지만, 이 정도일 줄은 몰랐다.. 클로드 디자인을 써본 사람이라면 공감할 것이다. 디자인을 만들고 수정하는 과정 확실히 편하다. 그런데 쓰다 보면 금방 느낀다. “토큰이 너무 빨리 닳는다” 특히 여러 번 수정하거나, 컨텍스트가 길어질수록 체감이 더 크다. 그래서 별도 결제 없이도 쓸 수 있는 코덱스로 수정하면서 코드를 수정하는 방법을 소개한다. (이미 개발자라면 많이 사용하고 있는 프로세스이지만, 디자이너 작업용으로 작성합니다.) 코덱스는 우리가 알고 있는 오픈AI가 2025년 5월에 공개한 소프트웨어 엔지니어링 에이전트다. ChatGPT 계정만 있으면(현재 무료) 바로 쓸 수 있어서 진입장벽이 낮은 편이다. (데스크톱 다운 링크) 클로드 코드는 짧은 요청을 받아도 이전 대화, 파일 구조, 수정 맥락을 끌어오면서 설명까지 붙여 응답한다. 그게 쌓이면서 토큰이 계속 늘어난다. 코덱스는 주로 현재 코드와 요청 범위 중심으로 동작한다. 설명 없이 결과만 실행하는 경우가 많아서 상대적으로 가볍게 느껴진다. 별도 툴 없이 "이렇게 생긴 UI 만들어줘" 가 가능한 셈. 클로드 코드는 처음 세팅할 때 터미널이 익숙하지 않으면 벽이 느껴지는데, 코덱스는 ChatGPT 계정만 있으면 된다. 현재 한시적으로 무료 플랜도 지원하고 있어서 일단 써보는 데 부담이 없다. (이미지 생성 기능은 Plus 이상부터) 그리고 단점은 클로드 코드 + 피그마 MCP처럼 디자인 토큰, 컴포넌트를 직접 주고받는 쉬운 방식이 코덱스에는 아직없고, 디자인이 아쉽다.. 코덱스는 디자인 맥락을 해석하기보다 주어진 정보만으로 빠르게 결과를 만든다. 그래서 토큰이나 명확한 제약이 없으면 색상, 여백, 타이포 등 시각적 디테일이 단순화되는 경우가 많다. 작업은 아주 단순하지만, css, 스타일에 대한 어느정도 지식이 있어야한다. 우선 코덱스 데스크톱에서 아래 경로를 통해 클로드로 작업한 폴더를 연결 그리고 만들어진 .html과 같은 페이지를 크롬을 통해 작업자 도구(Cmd + Option + I)로 열어서 내가 수정하고 싶은 부분을 눌러본다. 아래와 같이 코덱스에 요청하면, 작업 폴더 내 design-system.html의 page-desc의 하단 마진의 값을 48에서 32으로 변경 이렇게 보면 그냥 .html 열어서 코드 수정하면 되는거아닌가? 라고 생각할 수 있지만.. 하지만 아래와 같은 명령어도 실행된다. tier-row의 tier-box들이 각 tier-box를 hover상태 일때만 border: 1px solid var(--border-brand);가 되도록 변경도록 변경 위와 같은 명령어를 요청하면, 위와 같이 인터랙션도 가능하게 변경된다. 이러게 되면 조금은 난이도가 있는 개발을 코덱스를 통해 반영할 수 있게된다. 이외에도 텍스트 문구 일괄 변경(Replace all "회원가입" with "시작하기"), 색상 토큰으로 강제 변환(Replace all hardcoded colors with design tokens), 디자인 토큰 정리 (Make all h2 elements font-size 20px and font-weight 600), 반응형 빠르게 추가(Make this layout responsive for mobile (max-width 768px)) 등등이 가능하다. 클로드 코드 토큰 소비가 부담됐다면, Figma로 기준을 잡고 > Claude는 구조를 만들고 > Codex는 작은 디테일을 고치는 과정을 통해 해당 방법이 조금이라도 도움이 됐으면 한다. 요즘 클로드 코드와 코덱스를 많이 비교하는데, 꼭 하나를 골라야 하는 건 아니다. 상황에 맞게 번갈아 쓰는 것만으로도 충분히 효율적이고, 복잡한 작업은 각 에이전트 특성에 맞게 나눠서 쓰면 된다. 지금은 AI 춘추전국시대다. 클로드 코드가 초나라인지, 코덱스가 한나라인지 아직 모른다. 근데 살짝 두려운 건, 어느 쪽이 이기든 우리 사용자가 한신처럼 토사구팽 당하는 거 아닐까 싶어서다. 경쟁이 사라지고 나면 구독료만 올라가고 사용자는 뒷전이 될 수도 있으니까.. 마지막으로 AI가 빠르게 발전하면서 디자인 영역도 많이 바뀌고 있다. 솔직히 너무 빠르게 바뀌다 보니 조금은 두렵기도 하다. 그렇지만 아직까지는 섬세한 부분은 디자이너가 직접 봐야 한다. 좋은 결과물을 위해 수정하고 책임지는 것, 그게 결국 사람으로서 디자이너의 역할이라고 생각한다.