성형외과 웹사이트 전환율을 3배 높이는 UX 설계 전략

// 성형외과 히어로 섹션 구조
function ClinicHero() {
  return (
    <section className="relative h-[600px]">
      {/* 의료기관 인증 마크 - 좌상단 */}
      <div className="absolute top-4 left-4 flex gap-2 z-10">
        <Badge variant="trust">보건복지부 인증</Badge>
        <Badge variant="trust">대한성형외과학회 정회원</Badge>
      </div>

      {/* 메인 메시지 - 시술 결과 중심 */}
      <div className="flex flex-col items-center justify-center h-full">
        <h1 className="text-4xl font-bold text-center">
          자연스러움을 완성하는<br />
          <span className="text-accent">15년 경력 전문의</span>
        </h1>
        <p className="mt-4 text-lg text-gray-600">
          1만 2천+ 수술 경험 | 재수술율 0.8%
        </p>

        {/* CTA - 시선이 자연스럽게 향하는 위치 */}
        <div className="mt-8 flex gap-4">
          <Button variant="primary" size="lg">
            무료 상담 예약
          </Button>
          <Button variant="outline" size="lg">
            Before/After 보기
          </Button>
        </div>
      </div>
    </section>
  );
}

'use client';
import { useState, useRef, useCallback } from 'react';

interface BeforeAfterProps {
  before: string;
  after: string;
  alt: string;
}

export function BeforeAfterSlider({ before, after, alt }: BeforeAfterProps) {
  const [position, setPosition] = useState(50);
  const containerRef = useRef<HTMLDivElement>(null);
  const isDragging = useRef(false);

  const handleMove = useCallback((clientX: number) => {
    if (!containerRef.current || !isDragging.current) return;
    const rect = containerRef.current.getBoundingClientRect();
    const x = Math.max(0, Math.min(clientX - rect.left, rect.width));
    setPosition((x / rect.width) * 100);
  }, []);

  return (
    <div
      ref={containerRef}
      className="relative w-full aspect-[4/3] overflow-hidden rounded-xl cursor-col-resize select-none"
      onMouseDown={() => { isDragging.current = true; }}
      onMouseUp={() => { isDragging.current = false; }}
      onMouseMove={(e) => handleMove(e.clientX)}
      onTouchMove={(e) => {
        isDragging.current = true;
        handleMove(e.touches[0].clientX);
      }}
      onTouchEnd={() => { isDragging.current = false; }}
    >
      {/* After 이미지 (전체 표시) */}
      <img src={after} alt={`${alt} - After`} className="absolute inset-0 w-full h-full object-cover" />

      {/* Before 이미지 (클리핑) */}
      <div className="absolute inset-0 overflow-hidden" style={{ width: `${position}%` }}>
        <img src={before} alt={`${alt} - Before`} className="absolute inset-0 w-full h-full object-cover" style={{ minWidth: containerRef.current?.offsetWidth }} />
      </div>

      {/* 드래그 핸들 */}
      <div className="absolute top-0 bottom-0 w-0.5 bg-white shadow-lg" style={{ left: `${position}%` }}>
        <div className="absolute top-1/2 -translate-x-1/2 -translate-y-1/2 w-10 h-10 bg-white rounded-full shadow-lg flex items-center justify-center">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
            <path d="M7 4L3 10L7 16M13 4L17 10L13 16" stroke="#1a1a2e" strokeWidth="2" strokeLinecap="round" />
          </svg>
        </div>
      </div>

      {/* 라벨 */}
      <span className="absolute top-3 left-3 px-2 py-1 bg-black/60 text-white text-xs rounded">Before</span>
      <span className="absolute top-3 right-3 px-2 py-1 bg-black/60 text-white text-xs rounded">After</span>
    </div>
  );
}

function FloatingCTA() {
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => setIsVisible(!entry.isIntersecting),
      { threshold: 0 }
    );
    const hero = document.getElementById('hero-cta');
    if (hero) observer.observe(hero);
    return () => observer.disconnect();
  }, []);

  if (!isVisible) return null;

  return (
    <div className="fixed bottom-0 left-0 right-0 z-50 p-4 bg-white/95 backdrop-blur border-t shadow-lg">
      <div className="max-w-lg mx-auto flex gap-3">
        <a href="tel:02-1234-5678"
           className="flex-1 py-3 bg-navy text-white text-center rounded-lg font-medium">
          전화 상담
        </a>
        <button className="flex-1 py-3 bg-accent text-white text-center rounded-lg font-medium">
          온라인 예약
        </button>
      </div>
    </div>
  );
}

1. 시술 히어로 (시술명 + 핵심 메시지 + 대표 Before/After)
2. 시술 개요 (방법, 소요시간, 마취방법, 회복기간)
3. 이런 분께 추천 (타겟 증상/고민 목록)
4. 시술 과정 (단계별 설명 + 일러스트)
5. Before/After 갤러리 (해당 시술만 필터링)
6. 비용 안내 (투명한 가격 정보 or 맞춤 상담 유도)
7. 자주 묻는 질문 (FAQ)
8. 의료진 소개 (해당 시술 전문의)
9. 후기/리뷰
10. CTA (상담 예약)