TheiA Clinic Website
다국어 의료 클리닉 웹사이트 및 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도 검토했으나, 클리닉 운영에는 범용 CMS로 커버하기 어려운 워크플로우가 있었습니다. 언어·페이지·카테고리 태깅이 포함된 이미지 배치 업로드, 인스타그램 포스트 연동, CS 메모가 붙는 문의 관리 등이 그 예입니다. 이러한 운영 요구사항에 정확히 맞추기 위해 커스텀 어드민 패널을 직접 설계했습니다.
다국어 의료 사이트의 SEO에 어떻게 접근했나요?
next-sitemap으로 5개 언어별 동적 사이트맵을 자동 생성하고, 각 페이지에 hreflang 태그와 언어별 최적화된 메타데이터를 적용했습니다. 프로모션 페이지에는 JSON-LD 구조화 데이터를 추가하여 검색 결과에서의 노출 품질을 높였습니다.
동적 콘텐츠 전달을 어떻게 설계했나요?
프로모션, 후기 등 자주 변경되는 콘텐츠는 서버 컴포넌트에서 백엔드 API를 호출하되 ISR(1시간 재검증)을 적용해 성능과 최신성을 균형 잡았습니다. 이미지는 Google Cloud Storage CDN을 통해 제공하고, 랜딩 페이지는 [page_name]/[section]/[sort_order] 구조의 동적 라우팅으로 어드민에서 페이지 구성을 자유롭게 변경할 수 있도록 했습니다.
Results & Impact
- 5개 언어 대응 웹사이트 런칭 후 해외 환자 온라인 문의 증가 (런칭 전 대비)
- 어드민 패널 도입 후 콘텐츠 업데이트에 개발자 개입 제로 — 운영팀이 프로모션·후기·이미지를 독립적으로 관리 중
- 다국어 SEO 적용 후 비영어권(일본어, 중국어, 인도네시아어) 검색 유입 확보
- ISR 기반 콘텐츠 전달로 프로모션 반영 속도 수일 → 즉시로 개선
런칭 이후 일본·인도네시아 등 비영어권 환자의 온라인 문의가 새롭게 유입되기 시작했으며, 운영팀은 어드민 패널을 통해 프로모션·후기·이미지를 개발자 개입 없이 직접 관리하고 있습니다.