AI 코딩 도구로 하루 만에 웹앱 만들기: 축구선수형 개발자 테스트 제작기

본문에서는 Claude Code를 활용하여 React 컴포넌트 생성, 코드 구조 파악, 버그 분석, 리팩터링을 수행했다. Antigravity는 화면 구성, 작업 흐름 정리, 공유 카드 제작 등 여러 단계가 필요한 작업에 활용되었으며, Codex는 점수 계산 알고리즘과 같은 로직을 정리하는 데 사용되었다.

초기에는 단순 점수 합산 방식으로 인해 특정 선수 유형이 자주 등장하는 문제가 발생했다. 이를 해결하기 위해 Codex를 활용하여 정규화(Normalization) 방식을 도입했다. 각 선수가 얻은 점수를 해당 선수가 얻을 수 있는 최대 점수로 나누어, 상대적인 점수 비교(Relative Score Comparison)를 가능하게 했다.

본문에서는 한국어와 일본어를 모두 지원하는 다국어 웹앱을 제작하기 위해 i18n 구조를 적용했다. 문구를 코드 안에 직접 작성하는 대신, 언어별 리소스로 분리하여 관리했다. 이를 통해 문구 수정, 다른 언어 추가, 컴포넌트 코드의 가독성(Readability) 유지, 일본어 표현의 자연스러움(Naturalness) 확보 등 다양한 이점을 얻었다.

iOS Safari에서 position: sticky가 작동하지 않는 문제, 이스터에그 유형이 나오지 않는 문제, 원형 의존성 문제, 일본어 문구 길이 문제 등 다양한 삽질(Troubleshooting) 경험을 공유했다. 각 문제의 원인을 분석하고, 해결 방법을 제시하여 실제 개발 과정에서 발생할 수 있는 문제에 대한 이해를 높였다.

AI 코딩 도구는 개발 생산성을 높이는 데 기여하지만, 최종적인 결정은 여전히 개발자의 몫임을 강조한다. 어떤 서비스를 만들지, 어떤 기능을 넣을지, 점수 계산 방식이 공정한지, 버그 수정 방향이 맞는지 등 핵심적인 판단(Critical Judgement)은 개발자가 해야 한다. AI는 아이디어를 빠르게 검증하는 프로토타입 제작에 유용하며, 개발자가 AI와 함께 작은 팀처럼 움직일 수 있도록 돕는 도구로 활용될 수 있다.