AI(Claude, Gemini, Codex)를 활용해 지역 학원 웹사이트를 새롭게 개편한 방법

Source: Dev.to

소개

저는 최근에 시골 일본에 있는 부모님의 학원 웹사이트를 현대화하는 도전에 착수했습니다.

클라우드 인프라를 전문으로 하는 IT 전문가로서, AI를 주요 개발 파트너로 활용하여 얼마나 멀리 갈 수 있는지 확인하고 싶었습니다. 여기서는 Claude, Gemini, 그리고 Codex가 어떻게 구식 사이트를 현대적인 웹 존재감으로 변모시키는 데 도움을 주었는지에 대한 이야기를 전합니다.

AI 드림 팀

Gemini – 전략 컨설턴트

사이트 구조를 위한 리뉴얼 계획을 브레인스토밍하고 아이디어를 정리하는 데 사용했습니다.

Claude – 수석 개발자

코드 생성이 믿을 수 없을 정도로 빠르고 정확합니다.

Codex – UI/UX 디자이너

우리 타깃인 젊은 엄마들에게 완벽히 어필하는 디자인을 생성했습니다.

개발 과정

1단계: 원‑페이지

클로드는 처음에 몇 초 만에 고품질의 단일 페이지 사이트를 만들었습니다. 인상적이었지만, 저는 더 많은 것이 필요했습니다.

2단계: 청중을 위한 디자인

코덱스는 미학을 다듬어, 젊은 부모들에게 더 친근하고 현대적인 느낌을 주는 디자인을 만들었습니다.

3단계: 가장 큰 도전 (“멀티‑페이지” 장벽)

가장 어려운 부분은 사이트를 일곱 개의 개별 HTML 페이지로 나누는 것이었습니다. 저는 7 시간 동안 코덱스가 링크와 구조를 처리하도록 시도했으며, 처리되는 동안 잠깐 눈을 붙였지만 작업을 완수하지 못했습니다.

돌파구

저는 클로드와 제미니를 조합한 방식으로 다시 전환했습니다. 클로드의 코딩 효율성은 타의 추종을 불허하며, 멀티‑페이지 로직을 전혀 힘들어하지 않고 처리했습니다.

핵심 요점

순수한 코딩 속도와 논리 면에서 현재 클로드가 왕입니다. 이는 개발자들의 시간을 엄청나게 절약해 줍니다.

부모님 피드백 (및 다음 단계)

• “오래된 사이트를 바꾸는 게 무섭다.”
  Solution: 그들은 전환에 대해 걱정했습니다. 저는 블루‑그린 배포를 고려하거나 두 버전을 모두 호스팅하려고 합니다. 서버 비용을 낮게 유지하기 위해 AWS (EC2/S3) 또는 Google Cloud를 사용해 가벼운 정적 사이트를 구축하려고 합니다.

• “조금 AI‑생성 아트와 너무 비슷해 보여요.”
  Solution: 저는 VS Code에서 fonts and CSS를 수동으로 다듬어 보다 “인간적”이고 전문적인 느낌을 주고 있습니다.

• “우리가 직접 편집할 수 없을 것 같아요!”
  Solution: 저는 간소화된 워크플로우(예: 헤드리스 CMS 또는 Git‑based 설정)를 구축하여 원시 코드를 건드리지 않고도 정보를 업데이트할 수 있도록 할 예정입니다.

결론

이 작업을 수행하면서 AI가 강력한 도구라는 것을 다시 한 번 상기시켰지만, “루프 안의 인간”이 최종 조정 및 복잡한 사이트 구조를 탐색하는 데 필수적이라는 것을 알게 되었습니다.

가족을 위해 AI를 사용해 프로젝트를 만든 적이 있나요? 댓글로 여러분의 경험을 듣고 싶어요!