Claude로 시작하고 Codex로 완성한 앱 개발기

실용적 조언

프로젝트 초기 단계에서는 Claude로 빠르게 뼈대를 잡고, 복잡한 버그 수정이나 UI 고도화 단계에서는 Codex로 전환하는 전략이 유효하다.
AI가 작성한 코드의 안정성을 확보하기 위해 Playwright와 같은 자동화 테스트 도구를 적극 활용해야 한다.

섹션별 상세

01

Claude Code는 초기 POC 단계에서 빠른 속도를 보여주었으나 복잡한 UI/UX 개선 단계에서 한계를 드러냈다. 사용자가 원하는 디자인을 구현하지 못하고 새로운 버그를 반복적으로 생성하며, 스스로 만든 버그를 수정하지 못하고 해결책 없이 맴도는 현상이 발생했다.

Claude Code를 사용하여 개발 중인 FlowPlan 앱의 초기 UI 스크린샷이다. — ScreenshotClaude가 생성한 초기 레이아웃과 카드 기반의 워크플로우 설계를 보여준다. 작성자가 언급한 UI 개선 전의 상태를 확인할 수 있으며, 기본적인 기능 구현에 집중된 모습을 띤다.

02

디버깅 접근 방식에서 Claude와 Codex의 명확한 차이가 확인됐다. Claude는 추측에 의존하여 코드를 수정하려 한 반면, Codex는 문제 해결이 불가능한 지점을 명시하고 로그를 추가하여 단계별로 분석하는 체계적인 디버깅 과정을 거쳤다.

Stitch와 Codex를 사용하여 개선된 FlowPlan 앱의 최종 UI 스크린샷이다. — ScreenshotPostgreSQL에서 ClickHouse로의 마이그레이션 계획 등 더 복잡한 데이터 구조와 정돈된 대시보드 형태의 UI를 보여준다. 도구 전환 후의 완성도와 세부적인 기능 구현 상태를 입증한다.

03

Codex는 명시적인 요청이 없었음에도 Playwright를 사용하여 전체 앱 흐름에 대한 테스트를 수행했다. 이는 단순 코드 작성을 넘어 품질 보증 단계까지 자율적으로 수행하는 에이전트의 능력을 보여주는 사례로 평가된다.

04

사용자는 최근 Claude의 성능이 대규모 트래픽이나 스케일링 문제로 인해 눈에 띄게 저하된 것 같다는 개인적인 체감을 공유했다. 초기 개발에는 여전히 유용하지만, 실제 제품 수준으로 완성도를 높이는 데는 Codex가 더 신뢰할 수 있는 도구임을 확인했다.

용어 해설

개념 증명(POC): — 아이디어나 기술의 실현 가능성을 증명하기 위해 제작하는 초기 단계의 모델이다. 본문에서는 Claude Code를 사용하여 앱의 핵심 기능을 빠르게 구현한 초기 결과물을 의미한다.
플레이라이트(Playwright): — 웹 브라우저 자동화 및 엔드 투 엔드(E2E) 테스트를 위한 오픈소스 라이브러리이다. 사용자 상호작용을 시뮬레이션하여 앱의 전체 흐름이 정상적으로 작동하는지 검증하는 데 사용된다.
코딩 에이전트(Coding Agent): — 사용자의 지시에 따라 코드를 작성, 수정, 디버깅하고 테스트까지 수행하는 자율형 AI 도구이다. 단순한 코드 완성을 넘어 프로젝트 구조를 이해하고 문제를 해결하는 능력을 갖추고 있다.

언급된 도구

Claude Code중립

초기 POC 개발 및 코드 작성

Stitch추천

UI 개선 및 디자인 구현

Codex추천

복잡한 코딩 및 버그 수정

Playwright추천

앱 흐름 자동 테스트