네 줄 요약
- 아내가 운영하는 파티풍선 장식 브랜드 블랑벨루노(Blanc Belluno) 의 홈페이지를 런칭했다
- 스택: Next.js 16 (App Router, Turbopack) + React 19 + TypeScript + Tailwind CSS 4 + Supabase + Vercel
- 연동: 인스타그램 Graph API + 솔라피 카카오 알림톡
- 핵심은 “와이프가 직접 손쉽게 운영할 수 있는 사이트” — 관리자 페이지에서 포트폴리오 및 히어로 슬라이드를 드래그 앤 드롭으로 관리
1. 왜 만들었나
와이프는 파티풍선 장식 브랜드 블랑벨루노를 운영하고 있습니다. 돌잔치, 베이비샤워, 브랜드 팝업 등 행사 풍선장식이 주력입니다.
문제는 모든 문의가 인스타그램 DM을 비롯한 특정 채널로만 들어온다는 점이었습니다.
- 문의가 들어와도 검색되지 않음 → 신규 유입은 오직 해시태그 운, 인스타그램 알고리즘 운
- 견적 안내, 예약 가능일, 포트폴리오를 매번 DM으로 똑같이 설명
- 행사 사진은 인스타에 다 있지만, 정작 포트폴리오 페이지가 없음
- 무엇보다 브랜드 검색 시 인스타그램, 네이버 스마트스토어 외에는 노출되는 자산이 없음
소상공인에게 인스타그램은 훌륭한 채널이지만, 자산은 아닙니다. 그래서 결정했습니다. “만들자.”
2. “1주 안에 끝낸다”
“완벽한 사이트 6개월” 보다 “쓸 만한 사이트 1주”가 100배 낫다.
직장을 다니면서 만드는 사이드 프로젝트는 대체로 시간이 부족하기 마련입니다. 그래서 첫날 가장 먼저 한 일은 “이번 스프린트에 안 만들 것” 을 정하는 것이었습니다.
- ❌ 결제 시스템 → 어차피 행사 견적은 1:1 상담이 필수
- ❌ 회원가입/로그인 → 5페이지짜리 사이트에 불필요
- ❌ 블로그 시스템 → 별도 채널에서 운영 중
- ❌ 다국어 → 타깃은 국내 고객
MVP의 본질은 “지금 당장 안 만들어도 되는 것”을 가려내는 일입니다. 이렇게 1주 안에 런칭할 범위를 좁혔습니다.
3. 기술 스택과 선택 이유
단순합니다. 제가 익숙한 스택이기 때문입니다.
Next.js + Turbopack + Vercel
- Next.js: SSG/ISR로 SEO를 잡고, 이미지 최적화(
next/image)가 기본 — 풍선장식 사이트는 이미지가 생명 - Turbopack: 개발 중 빌드 속도가 체감상 다름
- Vercel: 배포·도메인 연결이 간단하고, 호스팅 비용 0원으로 시작 가능
Tailwind CSS 4
Tailwind 4의 @theme 디렉티브로 파스텔 톤 커스텀 팔레트 + 글래스모피즘을 디자인 시스템 토큰으로 잡았습니다. 파티풍선 장식 브랜드 톤(부드러움, 우아함)을 클래스 한 줄로 일관되게 적용할 수 있습니다.
Supabase — PostgreSQL + Storage
이번 작업의 숨은 주인공입니다.
- PostgreSQL: 포트폴리오, 히어로 슬라이드, 상담 문의 데이터 모두 저장
- Storage: 직접 업로드한 작업 이미지 호스팅
- Firebase보다 Supabase를 고른 이유: PostgreSQL이라서. 나중에 데이터 분석을 하거나 다른 시스템으로 옮길 때 표준 SQL로 다룰 수 있다는 점이 장기적으로 큽니다.
인스타그램 Graph API + <Suspense> 스트리밍
“와이프가 인스타그램에 올린 피드가 홈페이지에서도 보여야 한다.”
- Instagram Graph API로 최근 게시물 fetch
- React 19
<Suspense>로 스트리밍 렌더링 — 인스타그램 API가 느려도 페이지 나머지는 즉시 표시
이게 중요한 이유는, 인스타그램 API가 가끔 느릴 때가 있기 때문입니다. 그때마다 페이지 전체가 멈춰 보이면 사용자 경험이 크게 나빠집니다.
솔라피(Solapi) 카카오 알림톡 — 양방향 발송
상담 폼 제출 시 자동으로 발송됩니다.
- 고객에게: “상담 접수 확인” 알림톡
- 관리자에게: “신규 상담 알림” + 고객 정보 요약 알림톡
ISR — 홈페이지 5분 단위 재생성
revalidate = 300. 와이프가 관리자 페이지에서 포트폴리오나 히어로 슬라이드를 수정하면 최대 5분 안에 홈페이지에 반영됩니다.
- 매번 빌드를 트리거할 필요 없음
- 매 요청마다 SSR을 돌리지도 않음
- 정적 사이트의 속도와 동적 사이트의 신선도를 동시에 잡는 패턴
4. 핵심 기능 4가지
① 포트폴리오 — 8개 카테고리 + 라이트박스
각 카테고리별 페이지에서 작업물을 갤러리 형태로 보여주고, Swiper 기반 라이트박스 모달로 확대 감상이 가능합니다.
② 서비스 상세 페이지 — 정적 생성으로 SEO 극대화
/services/[slug] 패턴으로 카테고리별 서비스 상세 페이지를 빌드 타임에 정적 생성했습니다.
③ 상담 문의 — DB 저장 + 카카오 알림톡
- 문의 폼은 최소 필드로 구성
- 제출 즉시 다음이 실행됩니다.
- Supabase DB 저장
- 고객에게 접수 확인 알림톡 발송
- 관리자에게 신규 상담 알림톡 발송
④ 관리자 페이지 — 와이프가 직접 운영하는 페이지
핵심 기능입니다. /admin 경로에 들어가면 다음을 사용할 수 있습니다.
- 포트폴리오 관리: 사진 업로드(Supabase Storage 자동), 카테고리 지정,
@dnd-kit으로 드래그 앤 드롭 정렬 - 히어로 슬라이드 관리: 메인 페이지 상단 슬라이더 이미지/순서 변경
- 사이트 설정: 영업시간, 연락처 등 메타 정보
와이프가 새 작업물 사진을 추가하고 싶을 때, 저를 호출하지 않도록 한 것이죠ㅋㅋ.
이게 안 되면 사이트는 1년 안에 죽는다고 봅니다.
5. 런칭 후
런칭한 지 얼마 안 됐지만, 체감은 확실합니다.
- 상담 시간 단축: “가격이요?”, “포트폴리오 있어요?” 같은 질문이 사라짐
- 신뢰도 상승: 인스타만 보내던 예전과 “공식 홈페이지를 확인해 주세요”라고 안내하는 지금은 다른 비즈니스
- 검색 자산화 시작: 네이버·구글에 “블랑벨루노”를 검색하면 인스타 외의 자산이 노출되기 시작
- 운영 부담 0: 와이프가 관리자 페이지에서 직접 콘텐츠 업데이트