How I Revamped a Local Cram School Website Using AI (Claude, Gemini, and Codex)

개요

시골 일본의 학원 웹사이트를 현대화하기 위해 AI를 활용한 개발 과정과 Claude, Gemini, Codex 등 AI 모델의 역할 및 효율성에 대한 내용을 다룬다.

주요 내용

* AI 모델 역할 분담: Gemini는 사이트 구조 구상 및 아이디어 정리 등 '전략 컨설턴트' 역할을, Claude는 코드 생성 등 '리드 개발자' 역할을, Codex는 타겟 고객(젊은 엄마)에게 어필하는 UI/UX 디자인을 담당했다.
* 개발 단계:
* 1단계: Claude가 단일 페이지 사이트를 빠르게 생성했다.
* 2단계: Codex가 젊은 부모에게 더 친근하고 현대적인 디자인으로 개선했다.
* 3단계: 7개의 HTML 페이지로 나누고 구조화하는 멀티 페이지 작업이 가장 어려운 과제였으며, Codex가 이를 완료하지 못했다.
* 성공적인 멀티 페이지 구현: Claude와 Gemini의 조합을 통해 Claude의 뛰어난 코딩 효율성으로 멀티 페이지 로직을 문제없이 구현했다.
* AI 모델별 강점: 순수 코딩 속도와 로직 처리에서는 Claude가 가장 뛰어나 개발 시간 단축에 크게 기여했다.
* 향후 계획 및 개선점:
* 학원 운영진의 "사이트 변경에 대한 불안감" 해소를 위해 블루/그린 배포 또는 두 버전 동시 호스팅 고려. AWS, Google Cloud를 활용한 정적 사이트 호스팅 최적화 검토.
* "AI 생성 예술처럼 보이는" 디자인을 개선하기 위해 폰트 및 CSS를 VS Code에서 수동으로 조정하여 인간적인 터치 추가.
* "직접 편집 어려움" 문제를 해결하기 위해 헤드리스 CMS 또는 Git 기반 설정으로 간소화된 워크플로우 구축.

시사점

AI는 강력한 개발 도구이지만, 복잡한 사이트 아키텍처 처리 및 최종 조정에는 여전히 사람의 개입(human in the loop)이 필수적임을 보여준다.