광진 클래스 모아

프로젝트 소개 및 개발 배경

광진 클래스 모아는 광진구 내 여러 공공기관에서 제공하는 교육 프로그램 정보를 한곳에서 검색하고 확인할 수 있는 웹 서비스입니다. 도서관, 문화센터, 주민센터 등 다양한 기관의 프로그램을 일일이 검색해야 하는 불편함을 해소하고자 만들어졌습니다.

이 프로젝트의 시작점은 개인적인 불편함이었습니다. 광진구에 거주하면서 다양한 공공 교육 프로그램에 관심을 가지고 있었는데, 각 기관 웹사이트를 개별적으로 방문하여 정보를 확인하는 것이 매우 번거로웠습니다. 특히 아이 교육 프로그램을 찾을 때, 도서관, 문화센터, 청소년센터 등을 모두 확인해야 했습니다.

이런 문제를 해결하기 위해 공공기관 웹사이트의 정보를 수집하여 통합 검색 플랫폼을 기획하게 되었습니다. 동시에 이 프로젝트는 바이브 코딩의 실무 적용 가능성을 검증하는 테스트베드 역할도 수행했습니다. AI와 협업하여 얼마나 빠르게 실용적인 웹 서비스를 만들 수 있는지 직접 경험해보고 싶었습니다.

바이브 코딩이란?

저는 수도권 ICT의 "AI Fit-T 프로젝트: 바이브코딩 1기" 교육을 수료하면서 바이브 코딩의 실무 적용 가능성을 확인했습니다. 광진 클래스 모아는 이 교육에서 배운 내용을 실제 프로젝트에 적용한 사례입니다.

바이브 코딩의 핵심은 AI를 단순한 코드 생성기가 아닌 "페어 프로그래밍 파트너"로 활용하는 것입니다. 명확한 요구사항 정의, 적절한 프롬프트 작성, AI 출력물에 대한 비판적 검토가 성공적인 바이브 코딩의 핵심입니다.

기술 스택 상세 설명

광진 클래스 모아는 프론트엔드 중심의 웹 애플리케이션으로, 수집한 데이터를 Supabase에 저장하여 관리합니다.

데이터 수집 및 활용: 등록해둔 광진구 공공기관 웹사이트의 정보를 주기적으로 수집하여 교육 프로그램 정보를 제공합니다. 수집한 데이터는 Supabase에 저장하여 관리합니다.

반응형 웹 디자인: 모바일, 태블릿, 데스크탑 등 다양한 기기에서 최적의 사용자 경험을 제공하도록 반응형으로 설계했습니다. 특히 모바일 사용자를 고려하여 터치 친화적인 UI를 구현했습니다.

Vercel 배포: Vercel을 통해 정적 사이트로 배포하여 빠른 로딩 속도와 안정적인 서비스를 제공합니다. CI/CD 파이프라인을 통해 코드 변경 시 자동으로 배포됩니다.

주요 기능

• 통합 검색: 광진구 내 여러 공공기관의 교육 프로그램을 키워드로 통합 검색할 수 있습니다. 접수상태, 기관별, 요일별 필터링도 지원합니다.
• 간략한 정보 제공: 각 프로그램의 일정, 장소, 수강료 등 간략한 정보를 한눈에 확인할 수 있습니다.
• 신청 링크 연결: 프로그램 상세 페이지에서 해당 기관의 신청 페이지로 바로 이동할 수 있습니다.
• 반응형 UI: 스마트폰에서도 편리하게 이용할 수 있도록 모바일 최적화된 인터페이스를 제공합니다.
• 실시간 업데이트: 주기적인 데이터 수집을 통해 최신 프로그램 정보를 반영합니다.

개발 과정의 도전과 해결

바이브 코딩으로 웹 서비스를 개발하면서 몇 가지 도전에 직면했습니다. 가장 큰 도전은 AI가 생성한 코드의 품질을 검증하고 프로젝트 전체의 일관성을 유지하는 것이었습니다.

AI는 개별 기능에 대해서는 훌륭한 코드를 제안하지만, 프로젝트 전체의 아키텍처나 코드 스타일 일관성은 개발자가 직접 관리해야 합니다. 이를 위해 프로젝트 초기에 명확한 코딩 컨벤션을 정의하고, AI에게 이 규칙을 따르도록 명시적으로 요청했습니다.

사용자 경험 측면에서는 데이터 로딩 시간이 문제가 되었습니다. 여러 기관의 데이터를 가져오는 동안 사용자가 기다려야 했는데, 이를 해결하기 위해 로딩 상태 표시, 데이터 캐싱, 부분적 결과 표시 등의 기법을 적용했습니다.

바이브 코딩 적용 경험

이 프로젝트를 통해 바이브 코딩의 장점과 한계를 실감할 수 있었습니다. AI와 협업하여 개발하면서 느낀 점들을 공유합니다.

• 빠른 프로토타이핑: 초기 MVP를 매우 빠르게 만들 수 있었습니다. 기본적인 기능이 동작하는 프로토타입을 하루 만에 완성했습니다.
• 학습 가속화: 웹 개발은 제 주 분야가 아니었지만, AI의 도움으로 CSS, JavaScript 관련 지식을 빠르게 습득할 수 있었습니다.
• 코드 품질 유지 필요: AI가 생성한 코드를 무비판적으로 수용하면 기술 부채가 쌓일 수 있습니다. 항상 검토하고 리팩토링하는 과정이 필요합니다.
• 도메인 지식의 중요성: AI는 코드 작성을 도와주지만, 무엇을 만들어야 하는지는 개발자가 결정해야 합니다. 명확한 요구사항 정의와 도메인 이해가 여전히 핵심입니다.