청소클라쓰

Problem

고객사인 전주 청소업체 '청소클라쓰' 업체 의뢰를 맡아 진행한 업체 마케팅 홍보용 웹사이트 개발 프로젝트입니다. Next.js ISR 기반 서버 렌더링과 정적 캐싱을 적용하고, Supabase(PostgreSQL + RLS + Auth + Storage)를 BaaS로 활용했습니다. Docker 컨테이너로 패키징하여 AWS LightSail에 배포하며, GitHub Actions + Jenkins를 통한 CI/CD 파이프라인을 구축했습니다. 주요 기능으로는 네이버 블로그 후기 링크 연동 및 바로가기, 견적 문의 폼(Gmail SMTP), 관리자 페이지 CRUD, SEO 구조(robots, sitemap, JSON-LD)가 있습니다.

Stack

Next.js

ISR 기반 서버 렌더링, Metadata API, 이미지 최적화(/_next/image + 디스크 캐시)

React

컴포넌트 기반 마케팅 페이지 UI 구성

Supabase

PostgreSQL(RLS) + Auth + Storage — BaaS로 백엔드 인프라 비용 최소화

Gmail SMTP

Nodemailer 기반 견적 문의 이메일 발송

GitHub Actions

CI/CD 파이프라인 자동화

Docker

Next.js standalone 모드 컨테이너화 배포

AWS LightSail

경량 VPS 호스팅

Key Contributions

• 이미지 중심 마케팅 페이지 설계 및 렌더링 최적화

  업체 대표 요구사항을 정리하여 UI/UX 방향을 정의하고, 이미지 중심의 마케팅 랜딩 페이지를 설계했습니다. Hero 애니메이션을 CSS @keyframes로 전환하고, 하단 섹션을 next/dynamic으로 분리하여 초기 번들을 경량화했습니다.