Ryu Clinic 웹사이트 리디자인 제안서

사용자님은 12년 차 소프트웨어 엔지니어이자 13년 차 한의사라는 매우 독보적인 배경(Unique Value Proposition)을 가지고 계십니다. 따라서 웹사이트는 일반적인 로컬 클리닉 홈페이지를 넘어, “데이터와 기술 기반의 신뢰할 수 있는 현대적 의료 서비스”라는 브랜딩이 필요합니다.

기존 Jekyll 및 Github Pages 구조를 유지하면서, 향후 AI 서비스 확장을 고려한 모던한 리디자인 전략입니다.

1. 브랜드 아이덴티티 & 디자인 컨셉 (UI/UX)

컨셉: “Rational Healing (이성적 치유)” 따뜻한 감성의 한의학(TCM)에 차가운 이성의 기술(Tech)을 결합하여 ‘신뢰감’을 주는 디자인입니다.

2. 사이트 아키텍처 (Sitemap Structure)

기존 클리닉 정보와 미래의 테크 서비스를 자연스럽게 연결하는 구조입니다.

  1. Home:
    • Hero Section: “Engineering Better Health” (가제). 한의사이자 개발자가 운영하는 데이터 기반 클리닉임을 한 줄로 명시.
    • Hybrid Feature: [진료 예약하기] 버튼과 [Ryu Lab/Projects] 버튼의 듀얼 액션.
  2. About (The Hybrid Practitioner):
    • 한의사로서의 경력 + 소프트웨어 엔지니어로서의 경력 스토리텔링.
    • 마라톤 러너로서의 경험을 녹여 ‘스포츠 의학/퍼포먼스 향상’ 전문성 강조.
  3. Services (Clinical):
    • 통증 치료, 내과 질환 등 기존 진료 과목.
    • SEO 포인트: 밴쿠버 지역명 + 증상 키워드 최적화.
  4. R-Lab (또는 Tech & AI): (신설)
    • 향후 개발할 AI 툴, 헬스케어 앱, 데이터 분석 도구를 소개하는 섹션.
    • 현재는 “Coming Soon” 또는 개발 철학(Vision)을 담고, 추후 각 서비스의 랜딩 페이지로 연결.
  5. Blog/Insights:
    • 건강 정보(TCM) + 헬스 테크(Tech) 관련 글을 혼합하여 발행.
    • 구글 검색 상위 노출(SEO)을 위한 핵심 엔진 역할.
  6. Contact/Booking:
    • Janeapp 연동 예약, 위치(Google Maps), 진료 시간.

3. 기술 스택 및 구현 전략 (Jekyll + Github Pages)

기존 Github Pages 호스팅을 유지하면서 디자인과 확장성을 현대화합니다.

4. SEO (검색 엔진 최적화) 전략

구글 검색 상위 노출을 위한 기술적 SEO를 적용합니다.

5. 구현 예시 (디렉토리 및 코드 구조)

기존 Jekyll 구조에 projects 컬렉션을 추가하는 것이 핵심입니다.

_config.yml 설정 추가:

collections:
  projects:
    output: true
    permalink: /lab/:path/

# SEO 설정
title: Ryu Clinic & Lab
description: Evidence-based Acupuncture and AI-driven Healthcare Solutions in Vancouver.
plugins:
  - jekyll-seo-tag
  - jekyll-sitemap

_data/projects.yml (미래의 앱 서비스 관리):

- name: "ChartAI (가칭)"
  status: "In Development"
  description: "AI-powered SOAP note generator for TCM practitioners."
  tech_stack: ["Python", "OpenAI API", "JaneApp Integration"]
  image: "/assets/img/project-ai.jpg"

메인 페이지 (index.html) 섹션 구성안:

<section class="bg-white dark:bg-slate-900">
  <div class="container px-6 py-16 mx-auto text-center">
    <h1 class="text-4xl font-bold text-gray-800 dark:text-white">
      Traditional Healing, <span class="text-blue-500">Enhanced by Technology</span>
    </h1>
    <p class="mt-4 text-gray-500">
      소프트웨어 엔지니어링의 정밀함으로 완성하는 류 클리닉의 맞춤형 한방 치료
    </p>
    <div class="flex justify-center mt-8 gap-4">
        <a href="https://ryu.clinic/booking" class="px-6 py-2 text-white bg-teal-600 rounded-lg hover:bg-teal-500">진료 예약하기</a>
        <a href="/lab" class="px-6 py-2 text-gray-700 border border-gray-300 rounded-lg hover:bg-gray-100">R-Lab 프로젝트</a>
    </div>
  </div>
</section>

6. 실행 로드맵

  1. Backup & Branch: 현재 리포지토리에서 dev-2026-renew 브랜치 생성.
  2. Clean Up: 기존 테마 의존성 제거 및 Tailwind CSS 설치.
  3. Layout Refactoring:
    • Header: 로고, 네비게이션 (Clinic / Lab / Blog / Contact).
    • Body: 위에서 제안한 섹션별 컴포넌트화.
  4. New Content: ‘About Me’ 페이지를 엔지니어+한의사 융합 관점으로 재작성.