산후조리원 홈페이지 리뉴얼 제안 → 제작

아내가 조리원에 입소했을 때 홈페이지를 한번 훑어봤는데, 시설은 분명 괜찮은 곳인데 홈페이지가 그 분위기를 제대로 담고 있지 못하고 있었습니다. 디자인도 좀 오래된 느낌이었고, 모바일에서는 레이아웃이 깨지는 곳도 더러 있었고요.

말로만 "리뉴얼 하면 좋을 것 같다" 하면 와닿지 않을 거라 생각해서, UI 샘플을 직접 만들어서 조리원 측에 보여줬습니다. 샘플을 보고 바로 긍정적인 반응이 와서, 그대로 실제 개발로 이어졌습니다.

• 시설 대비 홈페이지 퀄리티가 낮았음

  실제 시설은 깔끔한데 홈페이지가 그 인상을 못 따라가고 있었습니다. 예비 맘이 검색해서 처음 보는 게 이 홈페이지인데, 첫인상이 아쉬우면 방문 상담까지 이어지기 어렵습니다.

• 모바일 대응 미흡

  산후조리원을 알아보는 예비 맘 대부분은 모바일로 검색합니다. 그런데 기존 사이트는 모바일에서 레이아웃이 깨지는 부분이 있었습니다.

• 검색 노출(SEO) 기반 없음

  Schema.org 마크업이나 OG 태그 같은 기본적인 SEO 세팅이 안 돼 있어서, 검색엔진에 제대로 된 정보가 노출되기 어려운 상태였습니다.

산후조리원을 고르는 예비 맘 입장에서 생각해봤습니다. 검색해서 홈페이지를 열었을 때 첫인상이 "여기 괜찮아 보인다"여야 방문 상담으로 이어집니다. 그래서 호텔 웹사이트 수준의 프리미엄 느낌을 컨셉으로 잡았습니다.

컬러 팔레트는 cream/espresso/gold 조합으로 따뜻하면서도 고급스러운 톤을 만들었고, Pretendard 폰트로 깔끔한 타이포그래피를 유지했습니다. 전체적으로 "이 조리원, 꼼꼼하게 관리하는 곳이구나"라는 신뢰감이 느껴지는 방향으로 디자인했습니다.

1. 01

   Astro 6 정적 사이트 — 왜 Astro?

   산후조리원 홈페이지에는 CMS도 로그인도 필요 없습니다. 콘텐츠가 바뀔 일이 거의 없는 정적 사이트인 만큼, 빌드 타임에 HTML을 다 만들어 두고 CDN에서 서빙하는 Astro가 딱 맞았습니다. JavaScript 번들이 거의 없어서 로딩이 빠르고, SSG 기반이라 SEO도 자연스럽게 좋습니다. Tailwind CSS 4와 조합해서 디자인 시스템 없이도 일관된 스타일을 빠르게 잡았습니다.

2. 02

   192프레임 스크롤 애니메이션 — Canvas + lerp

   히어로 섹션에서 스크롤하면 조리원 내부를 걸어 다니는 듯한 느낌을 주고 싶었습니다. 192개의 WebP 프레임을 미리 로드해 두고, 스크롤 진행률에 따라 Canvas에 프레임을 그리는 방식입니다. 단순히 프레임을 바꾸기만 하면 뚝뚝 끊기는데, lerp 보간을 걸어서 현재 프레임이 목표 프레임을 부드럽게 쫓아가도록 했습니다. cover-fit 로직으로 어떤 해상도에서든 Canvas가 화면을 꽉 채우게 처리했고요.

   hero-scroll-animation.js

   javascript

   const TOTAL_FRAMES = 192;
   const canvas = document.getElementById('hero-canvas');
   const ctx = canvas.getContext('2d', { alpha: false });
    
   // 192개 WebP 프레임을 순서대로 프리로드
   function preloadFrames() {
     for (let i = 0; i < TOTAL_FRAMES; i++) {
       const img = new Image();
       img.src = '/assets/frames/frame_' + String(i + 1).padStart(4, '0') + '.webp';
       frames[i] = img;
     }
   }
    
   // 부드러운 보간 (lerp) — 스크롤 위치에 따라 프레임 전환
   function animate() {
     if (Math.abs(currentFrame - targetFrame) < 0.5) {
       currentFrame = targetFrame;
       drawFrame(Math.round(currentFrame));
       return;
     }
     currentFrame += (targetFrame - currentFrame) * 0.15;
     drawFrame(Math.round(currentFrame));
     requestAnimationFrame(animate);
   }
    
   // 스크롤 진행률 → 목표 프레임 매핑
   function onScroll() {
     const progress = Math.max(0, Math.min(1, scrolled / scrollRange));
     targetFrame = Math.round(progress * (TOTAL_FRAMES - 1));
   }

3. 03

   카카오맵 연동 + fallback UI

   오시는 길 페이지에 카카오맵을 넣었는데, API 키 만료나 네트워크 오류 같은 상황에서 지도가 안 뜨면 난감하니까 fallback UI를 같이 만들었습니다. 지도 로드에 실패하면 주소 텍스트와 카카오맵 링크 버튼이 대신 보여서, 사용자가 어떤 상황에서든 위치 정보를 확인할 수 있도록 했습니다.

4. 04

   SEO — Schema.org, 사이트맵, GA4, Search Console

   산후조리원은 지역 검색이 핵심입니다. Schema.org JSON-LD로 MedicalBusiness 타입 구조화 데이터를 넣어서 검색엔진이 업종·주소·전화번호를 제대로 파악하도록 했고, OG 태그로 카카오톡이나 SNS 공유 시 미리보기도 깔끔하게 나오도록 세팅했습니다. sitemap.xml 자동 생성, GA4 연동, 네이버·구글 Search Console 인증까지 기본적인 SEO 인프라를 전부 갖췄습니다.

• grandbaie.co.kr 실제 운영중

  Vercel에 배포하고 커스텀 도메인을 연결해서 실제 운영 사이트로 전환했습니다. 조리원 측에서 바로 사용할 수 있도록 인수인계까지 완료.

• 능동적 제안으로 시작한 프로젝트

  클라이언트가 요청한 게 아니라 직접 기회를 발견하고, UI 샘플을 만들어서 제안한 프로젝트입니다. 단순 개발 실력이 아니라 "이걸 왜 해야 하는지"를 먼저 보여주고 설득하는 과정이 들어간 경험.

• 기획부터 배포까지 전 과정 1인 수행

  디자인 컨셉 잡기, 페이지 구조 설계, 스크롤 애니메이션 구현, SEO 세팅, Vercel 배포, 도메인 연결, 인수인계까지 전부 혼자 했습니다.

• 이후 B2B 외주 제안의 기반

  이 경험이 "직접 제안해서 프로젝트를 만들어내는" 패턴의 시작점이 됐습니다. 이후 다른 업종 사이트 외주 제안으로도 이어지는 기반이 된 프로젝트.