TheiA Clinic Website
5개 국어 SEO 최적화로 해외 유입을 창출하고, 커스텀 CMS로 콘텐츠 운영 공수를 제로화한 글로벌 클리닉 웹사이트
테이아 클리닉 강남의 공식 웹사이트로, 5개 언어 다국어 지원과 SEO 최적화, 비개발자도 콘텐츠를 직접 관리할 수 있는 어드민 패널까지 프론트엔드 전반을 설계하고 개발했습니다.
The Challenge
테이아 클리닉은 해외 환자를 대상으로 한 글로벌 마케팅 강화를 위해 5개 언어를 지원하는 웹사이트가 필요했으며, 콘텐츠 업데이트 시 개발자 개입이 필요한 운영 병목도 해소해야 했습니다.
- 언어별로 단순 번역이 아닌 문화·의료 맥락에 맞는 콘텐츠 구성이 필요하나, 이를 관리할 구조가 부재
- 프로모션·후기·시술 정보 업데이트마다 개발자 배포가 필요해 콘텐츠 반영까지 수일 소요
- 5개 언어 각각에 대해 검색 엔진 노출이 되지 않아 해외 환자의 자연 유입이 거의 없는 상황
- 클리닉 운영팀이 이미지, 문의, SNS 콘텐츠를 직접 관리할 수 있는 도구가 없어 모든 요청이 개발팀으로 집중
Technical Decisions & Approach
Next.js 15 App Router 기반 SSR/ISR 구조를 적용해 SEO와 초기 로딩 성능을 개선했습니다. 5개 언어 로케일 기반 라우팅을 구현하고, 운영팀이 개발자 개입 없이 프로모션, 후기, 이미지, 문의를 관리할 수 있는 커스텀 어드민 패널을 설계·개발했습니다.
5개 언어 로케일 기반 라우팅 설계
next-intl을 활용해 [locale] 세그먼트 기반 라우팅을 구성하고, 언어별 메시지 파일을 분리하여 번역 관리를 독립시켰습니다. 각 페이지는 5개 로케일에 대해 generateStaticParams로 빌드 타임에 생성되며, ISR을 병행해 콘텐츠 업데이트 시에도 재배포 없이 반영됩니다.
헤드리스 CMS 검토 후 커스텀 어드민 패널 직접 설계
Contentful, Strapi 등 헤드리스 CMS를 먼저 검토했습니다. Contentful은 다국어 지원은 우수하지만, 이미지 배치 업로드 시 언어·페이지·카테고리 태깅을 자동화하기 어려웠고, 월 비용도 고려 대상이었습니다. Strapi는 셀프호스팅이 가능하지만, 인스타그램 포스트 연동이나 CS 메모가 붙는 문의 관리 같은 클리닉 특수 워크플로우를 플러그인만으로 구현하기에 한계가 있었습니다.
범용 CMS를 클리닉 워크플로우에 맞추는 커스터마이징 비용이, 처음부터 맞춤형으로 만드는 비용보다 클 것으로 판단하여 커스텀 어드민 패널을 직접 설계했습니다.
다국어 SEO 구조 설계
next-sitemap으로 5개 언어별 동적 사이트맵을 자동 생성하고, 각 페이지에 hreflang 태그와 언어별 최적화된 메타데이터를 적용했습니다. 프로모션 페이지에는 JSON-LD 구조화 데이터를 추가하여 검색 결과에서의 노출 품질을 높였습니다.
ISR + On-demand Revalidation 이중 구조 설계
프로모션, 후기 등 콘텐츠는 하루에도 여러 번 변경될 수 있지만, 매 요청마다 서버 렌더링하면 응답 속도가 느려집니다.
SSR(매 요청마다 새로 렌더링)은 항상 최신 데이터를 보여주지만 응답이 느리고, SSG(빌드 시 고정)는 빠르지만 콘텐츠 반영에 재배포가 필요합니다. ISR로 1시간 캐시를 적용하면 대부분의 요청에서 빠른 응답을 유지하면서, 최대 1시간의 지연만 허용하는 균형을 잡을 수 있었습니다. 프로모션 시작처럼 즉각 반영이 필요한 경우를 대비해 on-demand revalidation도 구현하여, 어드민 패널에서 특정 페이지의 캐시를 수동으로 갱신할 수 있게 했습니다.
사용자에게는 SSG급 응답 속도를 제공하면서, 운영자에게는 실시간 업데이트 권한을 부여하는 하이브리드 캐싱 전략을 확보했습니다. 이미지는 next/image를 통해 WebP 자동 변환 및 반응형 사이즈를 제공하고, Google Cloud Storage CDN을 통해 전역 캐시 전달합니다. 랜딩 페이지는 [page_name]/[section]/[sort_order] 구조의 동적 라우팅으로 어드민에서 페이지 구성을 자유롭게 변경할 수 있도록 했습니다.
Results & Impact
- 5개 언어 대응 웹사이트 런칭 후 해외 환자 온라인 문의 증가 (런칭 전 대비)
- 어드민 패널 도입 후 콘텐츠 업데이트에 개발자 개입 제로 — 운영팀이 프로모션·후기·이미지를 독립적으로 관리 중
- 5개 국어별 hreflang · 동적 사이트맵 · JSON-LD 구조화 데이터 적용 → 비영어권(일본어·중국어·인도네시아어) 검색 유입 확보
- ISR 기반 콘텐츠 전달로 프로모션 반영 속도 수일 → 즉시로 개선
런칭 이후 일본·인도네시아 등 비영어권 환자의 온라인 문의가 새롭게 유입되기 시작했으며, 운영팀은 어드민 패널을 통해 프로모션·후기·이미지를 개발자 개입 없이 직접 관리하고 있습니다.