Pitched and Built a Postpartum Care Center Site Renewal

When my wife checked into the postpartum care center, I took a look through their website. The facility itself was clearly a nice place, but the site wasn't capturing that atmosphere. The design felt dated, and on mobile there were spots where the layout was breaking.

I figured that just saying "a renewal would be a good idea" wouldn't really land, so I built a UI sample on my own and showed it to the center. The response to the sample was positive right away, and it moved straight into actual development.

• Site quality lagged behind the actual facility

  The facility itself was polished, but the website wasn't living up to that impression. For expecting mothers, this website is the first thing they see when searching, and if the first impression is underwhelming it's hard to turn that into an on-site consultation.

• Weak mobile support

  Most expecting mothers researching postpartum care centers are searching on mobile. But the existing site had places where the layout broke on mobile.

• No foundation for search visibility (SEO)

  Basic SEO setup — Schema.org markup, OG tags — wasn't in place, so search engines had no good way to pick up proper information about the center.

I put myself in the shoes of an expecting mother choosing a postpartum center. When they search and land on the website, the first impression needs to say "this place looks good" for it to lead to an on-site consultation. So I set the concept as a premium feel on par with a hotel website.

For the color palette, I went with a cream/espresso/gold combination to get a warm yet upscale tone, and kept typography clean using the Pretendard font. Overall, I designed it in a direction that conveys the sense of "this is a center that takes care of the details."

1. 01

   Astro 6 static site — why Astro?

   A postpartum care center website doesn't need a CMS or logins. Since it's a static site where content barely changes, Astro — which builds all the HTML at build time and serves from a CDN — was a perfect fit. The JavaScript bundle is almost non-existent so loading is fast, and being SSG-based, SEO comes along naturally. Combined with Tailwind CSS 4, I could nail down a consistent style quickly without setting up a design system.

2. 02

   192-frame scroll animation — Canvas + lerp

   In the hero section, I wanted to give the feeling of walking through the center's interior as you scroll. I preload 192 WebP frames and draw the appropriate frame on a Canvas based on scroll progress. If you simply swap frames, it stutters — so I applied lerp interpolation to make the current frame smoothly chase the target frame. I also handled cover-fit logic so that the Canvas fills the screen at any resolution.

   hero-scroll-animation.js

   javascript

   const TOTAL_FRAMES = 192;
   const canvas = document.getElementById('hero-canvas');
   const ctx = canvas.getContext('2d', { alpha: false });
    
   // Preload 192 WebP frames in order
   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;
     }
   }
    
   // Smooth interpolation (lerp) — transition frames based on scroll position
   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);
   }
    
   // Map scroll progress to target frame
   function onScroll() {
     const progress = Math.max(0, Math.min(1, scrolled / scrollRange));
     targetFrame = Math.round(progress * (TOTAL_FRAMES - 1));
   }

3. 03

   Kakao Map integration + fallback UI

   I added Kakao Map to the directions page, but if the map fails to load — expired API key, network error, etc. — it would be a problem, so I built a fallback UI alongside it. If the map fails to load, the address text and a Kakao Map link button appear in its place, so users can still check the location information no matter what.

4. 04

   SEO — Schema.org, sitemap, GA4, Search Console

   Local search is critical for postpartum care centers. I added structured data with Schema.org JSON-LD using the MedicalBusiness type so search engines can properly pick up the business category, address, and phone number, and set up OG tags so previews render cleanly when shared on KakaoTalk or social media. Automatic sitemap.xml generation, GA4 integration, and Naver/Google Search Console verification — all the basic SEO infrastructure is in place.

• grandbaie.co.kr live in production

  Deployed to Vercel with a custom domain connected, and handed over as the live production site. Handover was completed so the center could take it over and run with it directly.

• A project that started from a proactive pitch

  This wasn't a client request — I spotted the opportunity myself, built a UI sample, and pitched it. The experience went beyond raw development skill: it included the work of first showing and convincing someone "why this needs to happen."

• Solo end-to-end, from planning through deployment

  Design concept, page structure, scroll animation implementation, SEO setup, Vercel deployment, domain connection, handover — I did all of it on my own.

• Foundation for later B2B outbound pitches

  This experience became the starting point for a pattern of "creating projects by pitching directly." It became the foundation that led to outbound pitches for sites in other industries as well.