첫 외주 개발 과정

삼천리 자전거 중동역점 웹사이트

서론

친구 부모님이 운영하시는 삼천리 자전거 직영점 웹사이트를 새로 만들어 달라는 요청을 받았습니다.
기존 사용하던 네이버의 무료 호스팅 서비스 'modoo!'가 서비스 종료로 더 이상 유지가 불가능해졌다고 합니다.
아임웹·카페24 등 빌더형 호스팅도 검토했으나 손쉬운 제작과 배포라는 장점에도 불구하고 월 비용 부담과 디자인 커스텀 한계 때문에 도입을 망설이고 있었습니다.

이에 따라 이번 프로젝트의 핵심 요구사항은 다음과 같이 정리했습니다.

• 운영 비용이 거의 발생하지 않을 것
• 페이지 레이아웃·텍스트·이미지를 자유롭게 수정 가능할 것
• 비개발자도 관리하기 쉬운 백오피스/관리 UI를 갖출 것

---

일단 먼저 어떻게 개발을 해야 될지에 대해서 고민을 했습니다.

• 이미지 사용 및 도메인 선택
• 방문자 월 평균 40명 기준, 호스팅 비용 최소화
• 정적 웹이 아닌 서버 기능 필요
• 웹 디자인 구현 전략
• 전체 개발 방향

이미지 사용 및 도메인 선택

사이트에 사용할 자전거 이미지와 도메인을 결정하면서 저작권/상표 사용 가능 여부를 우선 확인했습니다.
삼천리 자전거 본사에 정식 문의한 결과 이미지의 저작권은 본사있고 가맹점 홍보 및 홈페이지 제작 용도로 사용하는 것은 무방하다는 답변을 받았습니다. 실제로 본사 공식 이미지 파일도 제공받았습니다.
다만, 저작권은 본사에 귀속되므로 재배포·2차적 상업 이용 등은 본사 가이드라인을 준수했습니다.

도메인 역시 사전 승인을 받았습니다.
본사 공식 도메인은 samchuly.co.kr으로 가맹점 도메인에 브랜드명 samchuly(상표) 를 사용해도 되는지 문의했습니다.
저는 삼천리 자전거 중동역점을 의미하는 samchuly-jdy 도메인을 문의했고 사용해도 무방하다는 승인을 받았습니다.
상표권에 대한 오해를 피하기 위해 도메인 및 사이트 표기에는 매장명과 지역명을 함께 명시했습니다.

---

호스팅 및 데이터베이스 선택

호스팅은 AWS vs Vercel을 비교했고 규모·비용을 고려해 Vercel을 선택했습니다. EC2/Lambda는 기본 비용이 발생하는 반면, 소규모 트래픽(월 평균 ~40명)에는 Vercel 무료 플랜으로도 충분하다 판단하여 Vercel로 진행하게 되었습니다.

데이터베이스는 Vercel Storage와 Supabase를 비교해 Supabase로 결정했습니다.
Auth(인증)·스토리지·대시보드 UX가 잘 갖춰져 있어 관리자 페이지 구현에 유리했고 개인적으로도 직접 써보고 싶었습니다.

---

서버 구성 방향

단순한 정적 페이지가 아닌 서버 기능이 필요한 구조이기 때문에 별도의 서버를 분리하기보다는 Next.js의 서버 기능(SSR, API Routes 등) 을 적극적으로 활용하는 방향으로 기술 스택을 구성했습니다.
Vercel 배포 환경과도 잘 맞기 때문에 진행했습니다.

기술 스택

언어 : TypeScript
프레임워크 : Next.js
라이브러리 : React
스타일 : TailwindCSS, Shadcn/UI
상태 관리 : Zustand, Tanstack Query, Tanstack Table
타입 관리 : Zod
에디터 : React-Quill, quill-delta-to-html
지도 : react-naver-maps
데이터베이스 : Supabase

---

웹 디자인

웹 개발자이지만 디자인 감각이 많이 부족하기 때문에 정말 고민을 많이 했던 부분이었습니다.
요즘 생성형 AI가 워낙 잘 되기 때문에 "잘하는 건 도구에게 맡기자!" 라는 생각으로 Vercel의 v0를 최대한 활용했습니다.
만들 페이지의 레이아웃 구조, 메인 컬러, 반응형 규칙 등을 프롬프트에 적었고 그걸로 UI 뼈대를 만들었습니다.
이후 결과물을 html.to.design 확장 프로그램으로 캡쳐해 Figma 플러그인으로 연동 후 가져왔더니 피그마에 디자인 패턴과 UI까지 자동으로 그려주는 걸 보고 감탄을 했습니다...

그 다음 위와 같이 생성된 피그마를 원하는 방향으로 적절히 수정해서 웹 페이지 디자인을 마무리했습니다.
마지막으로 완성된 디자인을 Cursor의 Figma MCP로 디자인 패턴과 페이지 UI를 코드로 변환까지 해보니 막막했던 "디자인 구조 → Figma 작성 → 코드 구현" 구간이 짧은 시간 내로 끝내서 어려웠던 디자인 작업까지 쉽게 할 수 있었습니다.

---

개발 방향

런칭 이후에도 텍스트·이미지·레이아웃(섹션·내비게이션 순서) 을 관리자가 즉시 변경할 수 있어야 한다는 점을 최우선 요구사항으로 두었습니다. 사소한 문구나 색상, 상품(자전거) 정렬 변경 요청이 반복되는 상황을 줄이기 위해 관리자 페이지에서 섹션 순서·문구·노출 여부를 즉시 수정할 수 있도록 구현했습니다.

텍스트 편집은 React-Quill을 도입하여 글자 크기와 색상 등을 쉽게 조정할 수 있도록 했으며 저장 형식은 HTML 대신 Delta(JSON) 를 채택했습니다. 이를 통해 DB에 구조화된 포맷으로 보관하여 XSS 위험을 낮추었고 이후 버전 관리와 병합에도 유리한 형태를 확보했습니다. 참고 자료는 다음 글을 기반으로 검토했습니다. React-Quill 게시물 저장 방식 개선하기: HTML에서 Delta로

또한, 관리자가 저장한 변경 사항이 즉시 사용자 화면에 반영되도록 캐시와 무효화 전략을 구성했습니다.
각 페이지 DB의 경우 pages, page_layouts, page_sections를 중심으로 설계했습니다. 레이아웃은 섹션의 순서를 저장, 섹션에는 섹션 별 content를 정리하였고 JSONB를 사용해서 레이아웃과 콘텐츠를 데이터로 제어하도록 했습니다.
서버는 Edge 캐싱(태그 기반 캐시)과 경로/태그 무효화를 적용했고, 클라이언트는 TanStack Query로 조회 캐시를 구성해 저장 시 무효화 및 동기화가 즉시 일어나도록 구현했습니다.
결과적으로 콘텐츠는 데이터로 관리하고 변경은 무효화로 즉시 반영되도록 했습니다.

---

Before / After

Before의 경우 'modoo!' 서비스가 종료 되면서 기존 사이트에 접근할 수가 없어서 해당 프로젝트를 시작하기 전 간단하게 캡쳐를 했던 이미지를 사용했습니다.
(모든 페이지를 캡쳐하지 않아서 없는 페이지도 있고 화질도 좋진 않습니다...)

큰 특징으로는 아래와 같습니다.

• 색상의 경우 삼천리 자전거의 red 컬러를 사용했습니다.
• 페이지의 각 섹션을 구분지어서 이해하기 쉽게 구성하였습니다.

메인 페이지

Before	After

자전거 목록 페이지

Before	After

공지사항 페이지

• 관리자가 작성하는 공간이랑 사용자가 작성하는 공간이 하나로 되어 있어 분리하였습니다.
• 공지사항 등록 부분은 관리자 페이지로, 문의사항 등록 부분은 사용자 페이지로 구분지었습니다.

Before	After

후기 페이지

• 이전에는 사용자가 리뷰를 남길 수 있는 공간이 따로 있었습니다.
• 현재는 리뷰 페이지를 삼천리 자전거 중동역점에 대한 네이버 블로그를 크롤링하여 가져왔습니다.

Before	After

---

운영 계획

도메인

https://samchuly-jdy.vercel.app
현재는 Vercel 기본 도메인으로 배포 중이며 매장 이전으로 최종 상호/지역명이 확정되면 커스텀 도메인을 구매해 연결할 예정입니다.

SEO

현재는 네이버 웹마스터 도구에만 등록된 상태입니다.

이후 Google Search Console 등록 및 sitemap 제출해서 구글 검색 결과에도 노출될 수 있게 할 예정입니다.
다만, 검색 상단 노출이나 키워드 기반 노출 최적화 방법은 잘 알지 못해서 관련 내용 학습한 뒤 적용할 예정입니다.

Analytics

Vercel이나 Firebase Analytics의 Analytics를 사용해서 방문자 수는 어떻게 되는지, 어느 페이지에서 체류를 가장 많이 하는지 등은 해당 사이트를 가면 확인할 수 있습니다.

다만, 사이트에 직접 접속하지 않아도 관리자 페이지에서 요약 지표를 볼 수 있게 해달라는 요청이 있었습니다. 물론 친구가 시간 되면 해달라고 부탁을 한 거라 천천히 할 생각이지만 도표 같은 걸 어떻게 보여줘야 될지 어떤 분석이 필요한지 등은 더 생각을 해봐야 될 것 같습니다.
아래와 같이 정리는 해봤지만 가능한지에 대한 여부도 모르고 시간을 너무 투자하고 싶지도 않습니다... (돈을 더줘..!!)

• 방문 요약 : 일 / 주간 방문자, 페이지뷰, 평균 체류시간
• 인기 페이지 : 상위 유입 페이지 / 이탈 페이지
• 유입 경로 : 검색 / 직접 / 소셜 등의 비율
• 디바이스 / 지역 : 모바일·데스크탑 비중, 지역 분포

---

후기

외주를 받으려면 크몽이나 위시켓 등에 프로필 등록 후 간택 받아야 되는데, 이번엔 우연히 친구 부탁으로 시작하게 됐습니다.
기획·디자인·개발을 전부 맡아 달라는 요청에 처음엔 살짝 당황했지만 막히는 지점을 하나씩 풀어가며 배우는 재미가 있었고 어느 정도 형태가 갖춰졌을 때 친구 부모님이 "이 정도면 정말 만족한다."라고 해주셨을 때, 속으로 정말 안도했습니다.

아직 방문자가 많지 않은 사이트라 무료 플랜 + 적절한 캐싱으로 운영 중이고 상황이 커지면 AWS 이전도 고려하고 있습니다. 처음부터 완벽을 노리기보다 필요한 것부터 빠르게 만들고 검증하면서 키워가는 흐름이 제일 현실적이라는 걸 다시 한 번 체감했습니다.

물론 버그가 발생할 수도 있고 갑자기 사람이 몰리면 서버가 터질 수도 있습니다. 이런 것도 다~ 경험이다 생각하고 겸허하게 받아드릴 생각입니다. (돈만 많이 안 나온다면...)

다시 한 번 친구에게 고맙고 더 좋은 기회로 다양한 도메인을 접해보고 싶습니다~