AI를 적극적으로 활용하여 학원 홈페이지 리뉴얼하기

영어학원 홈페이지 리뉴얼을 담당하게 되었습니다. 이번 프로젝트는 기획 → 디자인 → 기능 구현까지 전 과정을 직접 맡아야 하는 상황이라, 혼자서 모든 걸 해결하기에는 쉽지 않았습니다.

그래서 저는 AI를 프로젝트 전 과정에서 적극적으로 활용하기로 했습니다. 단순히 참고 자료를 얻는 수준을 넘어서, 실제 기획과 디자인 시안 제작, 코드 생성까지 AI를 함께 활용하는 방식입니다. 앞으로 이 과정을 차례차례 기록해 보려 합니다.

---

초기 기획: 다양한 이해관계자의 의견 조율

프로젝트를 시작하면서 먼저 대표님과 선생님들의 의견을 모으는 회의를 진행했습니다.

• 공통 의견: 세부 페이지(학원 소개, 강사 소개, 시간표, 공지 등)는 크게 이견 없이 정리됨
• 차이점: 메인 페이지 구성에 대한 생각이 달랐음
  • 대표님: 기존 홈페이지의 감성과 분위기를 유지하고 싶음
  • 선생님들: 실용적으로 필요한 정보와 버튼 중심으로 단순하고 직관적인 구성을 원함

즉, 메인 페이지 방향을 확정하기 위해서는 즉각적인 시안 공유와 피드백 반영이 필수적이었습니다.

---

AI 툴 활용: 러버블(Lovable)로 빠른 프로토타입 제작

이 과정에서 큰 도움이 된 툴이 러버블(Lovable) 입니다.

러버블은 AI 기반 웹 제작 툴로, 간단히 프롬프트를 입력하면 다양한 시안을 빠르게 생성할 수 있습니다. 저는 회의 자리에서 직접 의견을 반영해 대표님과 선생님들이 원하는 레이아웃을 즉시 시각화해 보여드렸습니다.

이후에는 다른 AI 서비스들을 이용해 시안을 고도화하고, 실제 구현 가능한 페이지로 다듬어 가기로 했습니다.

---

프로젝트 진행 프로세스

이번 홈페이지 리뉴얼 프로젝트는 아래와 같은 단계로 진행될 예정입니다.

1. 아이디어 브레인스토밍

   • 러버블을 이용해 다양한 프롬프트를 입력해 시안 뽑아보기

2. 방향성 확정

   • 가장 괜찮았던 시안을 골라 프롬프트를 정리
   • 이를 기반으로 Gemini-cli를 통해 프로젝트 생성

3. 디테일 수정

   • AI가 반영하지 못한 세부 사항이나 학원 특성에 맞는 부분은 직접 보완

4. MVP 제작 & 회의

   • 두 가지 정도의 MVP를 제작해 다시 대표님과 선생님들의 의견을 수렴
   • 최종 방향 확정

5. 정식 프로젝트 구현 시작

   • 확정된 기획을 바탕으로 디자인과 기능을 본격적으로 개발

---

앞으로의 계획

정식 구현 단계에서도 AI를 계속 활용해볼 생각입니다.

• 기획 단계 → 와이어프레임이나 레이아웃 제안 받기
• 디자인 단계 → 색상 팔레트, UI 요소 추천 받기
• 개발 단계 → 기본 코드 구조나 반복적인 코드 자동화
• 문서화 단계 → README나 블로그 초안 작성 도움받기

물론 AI가 모든 걸 대신해줄 수는 없습니다. 하지만 시안을 빠르게 만들어보고, 아이디어를 넓히고, 반복작업을 줄이는 데는 정말 큰 도움이 됩니다.

---

마무리

이번 프로젝트는 단순히 홈페이지를 리뉴얼하는 게 아니라, AI를 실제 업무에 어떻게 적용할 수 있을지 실험하는 과정이기도 합니다.
앞으로도 시행착오를 겪으면서 얻은 경험과 팁들을 정리해 공유해 보려고 합니다.