castad/o2o-infinith-demo
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
06a29fdf7c
o2o-infinith-demo/docs/reports/ai_discovery_landing.html
Haewon Kam 18740ca800 feat: AI Discovery 랜딩 /discovery 구현 (시안 ai_discovery_landing.html 기준) 
- 신규 라우트 /discovery → DiscoveryLandingPage, 기존 /discovery/:id 리포트와 공존
- 섹션 9종: Hero(ABMR 루프 + AI 답변 목업) / Why Now / How It Works / Sample Report / 8주 로드맵 / 정직성 스트립 / 최종 CTA
- ABMR 루프는 Solution.tsx 다이어그램 구조 복제, AGDP → ABMR 워딩 교체
- 점수·등급·카테고리 %·항목 수 전부 scoreDiscovery 계산값 파생, JSX 수치 하드코딩 없음
  (nextGradeTarget·scorePctColor 헬퍼를 discoveryScore에 추가)
- ScoreRing에 valueClassName·subLabel 옵션 prop 추가 (하위 호환)
- AI 답변 목업 "AEO / GEO 구축 후 목표 상태 예시" 라벨 유지, 연락처 o2oteam@o2o.kr 단일
- 시안 HTML·핸드오버 문서·POC 덱 산출물 포함

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WgWoJZAvvzMxTpWeenZSia
2026-08-31 16:17:25 +09:00

401 lines
40 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>INFINITH · AI Discovery AEO/GEO</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;0,800;0,900;1,600&family=Noto+Sans+KR:wght@400;500;600;700&display=swap">
<style>
body { margin: 0; background: #f8fafc; font-family: "Pretendard Variable", "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; color: #1e293b; -webkit-font-smoothing: antialiased; word-break: keep-all; }
a { color: #6C5CE7; text-decoration: none; }
a:hover { color: #4F1DA1; }
@keyframes if-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
</style>
</head>
<body>
<div style="width: 100%; background: #f8fafc;">
<!-- ── Nav ─────────────────────────────────────────────────────────── -->
<div style="display: flex; justify-content: center; background: rgba(255,255,255,0.95); backdrop-filter: blur(12px); border-bottom: 1px solid #f1f5f9;">
<div style="width: 100%; max-width: 1120px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; height: 80px; box-sizing: border-box;">
<div style="display: flex; align-items: baseline; gap: 10px;">
<span style="font-family: 'Playfair Display', Georgia, serif; font-weight: 900; font-size: 30px; letter-spacing: 0.05em; background: linear-gradient(to right, #4F1DA1, #021341); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;">INFINITH</span>
<span style="font-size: 13px; font-weight: 600; letter-spacing: 0.08em; color: #6C5CE7;">AI DISCOVERY</span>
</div>
<div style="display: flex; align-items: center; gap: 28px;">
<a href="#" style="font-size: 15px; font-weight: 500; color: #475569;">왜 지금인가</a>
<a href="#" style="font-size: 15px; font-weight: 500; color: #475569;">프로세스</a>
<a href="#" style="font-size: 15px; font-weight: 500; color: #475569;">샘플 리포트</a>
<div style="display: flex; align-items: center; height: 44px; padding: 0 22px; background: #0A1128; border-radius: 9999px;">
<span style="font-size: 15px; font-weight: 600; color: #ffffff;">무료 진단 받기</span>
</div>
</div>
</div>
</div>
<!-- ── Hero ────────────────────────────────────────────────────────── -->
<div style="position: relative; overflow: hidden; background: radial-gradient(ellipse at top, #e0e7ff 0%, #faf5ff 45%, #fdf2f8 100%);">
<div style="position: absolute; top: 120px; left: 60px; width: 256px; height: 256px; background: #d8b4fe; border-radius: 9999px; filter: blur(64px); opacity: 0.3;"></div>
<div style="position: absolute; top: 180px; right: 60px; width: 256px; height: 256px; background: #f9a8d4; border-radius: 9999px; filter: blur(64px); opacity: 0.3;"></div>
<div style="position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 104px 24px 88px;">
<div style="display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 9999px; background: rgba(255,255,255,0.6); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.4); box-shadow: 0 1px 2px rgba(0,0,0,0.05); margin-bottom: 32px;">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M4.5 8c0-1.4 1-2.5 2.2-2.5 1.6 0 2.6 5 4.2 5 1.2 0 2.2-1.1 2.2-2.5s-1-2.5-2.2-2.5c-1.6 0-2.6 5-4.2 5C5.5 10.5 4.5 9.4 4.5 8Z" stroke="#6C5CE7" stroke-width="1.4"/></svg>
<span style="font-size: 14px; font-weight: 500; color: #334155;">AI DISCOVERY · AEO / GEO for Clinics</span>
</div>
<div style="font-family: 'Playfair Display', 'Noto Sans KR', Georgia, serif; font-weight: 700; font-size: 72px; line-height: 1.1; letter-spacing: -0.02em; color: #0A1128; margin-bottom: 24px;">AI가 추천하는 병원은<br><span style="background: linear-gradient(to right, #0A1128, #3b5998); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;">따로 있습니다.</span></div>
<div style="font-size: 20px; line-height: 1.625; color: #475569; max-width: 768px; margin-bottom: 40px;">고객은 이제 ChatGPT와 Perplexity에게 병원을 묻습니다.<br>답변에 인용될 근거를 36개 항목으로 실측 진단하고, 8주 안에 구축합니다.</div>
<div style="display: flex; align-items: center; gap: 16px; margin-bottom: 72px;">
<div style="display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 40px; background: linear-gradient(to right, #4F1DA1, #021341); border-radius: 9999px; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);">
<span style="font-size: 18px; font-weight: 500; color: #ffffff;">무료 AEO / GEO 진단 받기</span>
<svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M5 12h14M13 6l6 6-6 6" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
<div style="display: inline-flex; align-items: center; justify-content: center; padding: 16px 40px; background: rgba(255,255,255,0.8); border: 1px solid #e2e8f0; border-radius: 9999px;">
<span style="font-size: 18px; font-weight: 500; color: #0A1128;">샘플 리포트 보기</span>
</div>
</div>
<!-- ABMR loop + AI answer output -->
<div style="width: 100%; max-width: 1120px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; text-align: left;">
<!-- Loop card (dark) -->
<div style="position: relative; overflow: hidden; background: #0A1128; border-radius: 16px; padding: 28px 32px; display: flex; flex-direction: column; align-items: center; box-sizing: border-box;">
<div style="position: absolute; top: 45%; left: 50%; transform: translate(-50%,-50%); width: 420px; height: 420px; background: rgba(108,92,231,0.2); border-radius: 9999px; filter: blur(80px);"></div>
<div style="position: relative; align-self: flex-start; font-size: 13px; font-weight: 700; letter-spacing: 0.2em; color: #AF90FF; margin-bottom: 8px;">THE ENGINE · ABMR CYCLE</div>
<div style="position: relative; width: 300px; height: 300px; margin: 44px 0 60px;">
<svg viewBox="0 0 100 100" style="position: absolute; inset: 0; width: 100%; height: 100%; animation: if-spin 20s linear infinite;">
<defs>
<linearGradient id="loopGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#a78bfa" stop-opacity="0.15"></stop>
<stop offset="50%" stop-color="#c084fc" stop-opacity="0.6"></stop>
<stop offset="100%" stop-color="#e879f9" stop-opacity="0.15"></stop>
</linearGradient>
</defs>
<circle cx="50" cy="50" r="30" fill="none" stroke="url(#loopGrad)" stroke-width="0.5" stroke-dasharray="2 2"></circle>
</svg>
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 148px; height: 148px; border-radius: 9999px; background: rgba(10,17,40,0.9); border: 1px solid rgba(255,255,255,0.05); box-shadow: 0 0 60px rgba(167,139,250,0.12); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; z-index: 2;">
<span style="font-size: 30px; font-weight: 700; background: linear-gradient(to right, #fff3eb, #e4cfff, #f5f9ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;">ABMR</span>
<span style="font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 16px; color: #ffffff; text-align: center; line-height: 1.25;">Discovery<br>Loop</span>
</div>
<div style="position: absolute; top: 0; left: 50%; transform: translate(-50%,-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 7px;">
<div style="width: 58px; height: 58px; border-radius: 9999px; border: 1px solid rgba(168,85,247,0.3); background: rgba(10,17,40,0.8); box-shadow: 0 0 20px rgba(168,85,247,0.15); display: flex; align-items: center; justify-content: center;"><span style="font-size: 25px; font-weight: 700; color: #d8b4fe;">A</span></div>
<span style="font-size: 14px; font-weight: 500; color: #e9d5ff;">Audit</span>
</div>
<div style="position: absolute; top: 50%; right: 0; transform: translate(50%,-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 7px;">
<div style="width: 58px; height: 58px; border-radius: 9999px; border: 1px solid rgba(168,85,247,0.3); background: rgba(10,17,40,0.8); box-shadow: 0 0 20px rgba(168,85,247,0.15); display: flex; align-items: center; justify-content: center;"><span style="font-size: 25px; font-weight: 700; color: #d8b4fe;">B</span></div>
<span style="font-size: 14px; font-weight: 500; color: #e9d5ff;">Build</span>
</div>
<div style="position: absolute; bottom: 0; left: 50%; transform: translate(-50%,50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 7px;">
<div style="width: 58px; height: 58px; border-radius: 9999px; border: 1px solid rgba(168,85,247,0.3); background: rgba(10,17,40,0.8); box-shadow: 0 0 20px rgba(168,85,247,0.15); display: flex; align-items: center; justify-content: center;"><span style="font-size: 25px; font-weight: 700; color: #d8b4fe;">M</span></div>
<span style="font-size: 14px; font-weight: 500; color: #e9d5ff;">Measure</span>
</div>
<div style="position: absolute; top: 50%; left: 0; transform: translate(-50%,-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 7px;">
<div style="width: 58px; height: 58px; border-radius: 9999px; border: 1px solid rgba(168,85,247,0.3); background: rgba(10,17,40,0.8); box-shadow: 0 0 20px rgba(168,85,247,0.15); display: flex; align-items: center; justify-content: center;"><span style="font-size: 25px; font-weight: 700; color: #d8b4fe;">R</span></div>
<span style="font-size: 14px; font-weight: 500; color: #e9d5ff;">Refine</span>
</div>
<svg viewBox="0 0 100 100" style="position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2;">
<defs><path id="citePath" d="M 10.6 56.9 A 40 40 0 0 0 43.1 89.4" fill="none"></path></defs>
<text font-size="3.5" font-weight="500" letter-spacing="0.6" fill="#d8b4fe" opacity="0.8"><textPath href="#citePath" startOffset="50%" text-anchor="middle">← CITATION FEEDBACK</textPath></text>
</svg>
</div>
<div style="position: relative; width: 100%; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 14px 18px; box-sizing: border-box;">
<div style="font-size: 13.5px; line-height: 1.75; color: #cbd5e1; text-align: center;"><span style="font-weight: 700; color: #d8b4fe;">ABMR Cycle:</span> 실측 진단(Audit) → 스키마·콘텐츠 구축(Build) → 언급률·AI 유입 측정(Measure) → 우선순위 재조정(Refine)의 무한 루프. 사이클이 돌 때마다 <span style="color: #ffffff; font-weight: 500;">측정된 언급률이 다음 구축의 입력</span>이 됩니다.</div>
</div>
<div style="position: relative; display: flex; justify-content: center; gap: 10px; margin-top: 12px; width: 100%;">
<div style="padding: 6px 14px; background: rgba(175,144,255,0.12); border: 1px solid rgba(175,144,255,0.3); border-radius: 9999px;"><span style="font-size: 13px; font-weight: 600; color: #d8b4fe;">점수 48 → 61+</span></div>
<div style="padding: 6px 14px; background: rgba(175,144,255,0.12); border: 1px solid rgba(175,144,255,0.3); border-radius: 9999px;"><span style="font-size: 13px; font-weight: 600; color: #d8b4fe;">등급 C → B</span></div>
<div style="padding: 6px 14px; background: rgba(175,144,255,0.12); border: 1px solid rgba(175,144,255,0.3); border-radius: 9999px;"><span style="font-size: 13px; font-weight: 600; color: #d8b4fe;">언급률 상승 추적</span></div>
</div>
</div>
<!-- AI answer mock (loop output) -->
<div style="background: rgba(255,255,255,0.7); backdrop-filter: blur(24px); border: 1px solid rgba(255,255,255,0.4); box-shadow: 0 8px 32px rgba(31,38,135,0.07); border-radius: 16px; padding: 28px 32px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center;">
<div style="font-size: 13px; font-weight: 700; letter-spacing: 0.2em; color: #6C5CE7; margin-bottom: 20px;">THE OUTPUT · AI 답변 인용</div>
<div style="display: flex; align-items: center; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid #eef0f7; margin-bottom: 16px;">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="9" cy="9" r="5.5" stroke="#64748b" stroke-width="1.5"></circle><path d="M13.5 13.5 17 17" stroke="#64748b" stroke-width="1.5" stroke-linecap="round"></path></svg>
<span style="font-size: 16px; font-weight: 500; color: #334155;">강남에서 안전하게 가슴성형 상담받을 수 있는 병원 추천해줘</span>
</div>
<div style="font-size: 15px; line-height: 1.8; color: #475569; margin-bottom: 16px;">모티바 공식 KOL 의료진이 있는 <span style="background: #F3F0FF; color: #4A3A7C; font-weight: 600; padding: 2px 6px; border-radius: 6px;">뷰성형외과</span>는 강남언니 후기 19,316건과 의료진 26명 정보가 공개되어 있으며, 시술별 FAQ와 비교표를 제공합니다.</div>
<div style="display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 24px;">
<div style="display: flex; align-items: center; gap: 6px; padding: 5px 12px; background: #EFF0FF; border: 1px solid #C5CBF5; border-radius: 9999px;"><span style="font-size: 12.5px; font-weight: 500; color: #3A3F7C;">viewclinic.com</span></div>
<div style="display: flex; align-items: center; gap: 6px; padding: 5px 12px; background: #EFF0FF; border: 1px solid #C5CBF5; border-radius: 9999px;"><span style="font-size: 12.5px; font-weight: 500; color: #3A3F7C;">gangnamunni.com</span></div>
<div style="display: flex; align-items: center; gap: 6px; padding: 5px 12px; background: #EFF0FF; border: 1px solid #C5CBF5; border-radius: 9999px;"><span style="font-size: 12.5px; font-weight: 500; color: #3A3F7C;">youtube.com</span></div>
<span style="font-size: 12.5px; color: #94a3b8; margin-left: 6px;">AEO / GEO 구축 후 목표 상태 예시</span>
</div>
<div style="border-top: 1px solid #eef0f7; padding-top: 18px; display: flex; flex-direction: column; gap: 10px;">
<div style="display: flex; align-items: center; gap: 10px;">
<span style="width: 7px; height: 7px; background: #9B8AD4; border-radius: 9999px;"></span>
<span style="font-size: 14px; color: #475569;">루프 1회전(8주)마다 36개 항목을 재측정해 점수를 갱신합니다.</span>
</div>
<div style="display: flex; align-items: center; gap: 10px;">
<span style="width: 7px; height: 7px; background: #9B8AD4; border-radius: 9999px;"></span>
<span style="font-size: 14px; color: #475569;">질의 10개 × 5회 스팟체크로 인용 여부를 신뢰구간과 함께 보고합니다.</span>
</div>
<div style="display: flex; align-items: center; gap: 10px;">
<span style="width: 7px; height: 7px; background: #9B8AD4; border-radius: 9999px;"></span>
<span style="font-size: 14px; color: #475569;">측정 결과가 다음 사이클의 구축 우선순위를 자동으로 정합니다.</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ── Why now (dark) ──────────────────────────────────────────────── -->
<div style="background: #0A1128; display: flex; justify-content: center;">
<div style="width: 100%; max-width: 1120px; padding: 88px 24px; box-sizing: border-box;">
<div style="font-size: 14px; font-weight: 700; letter-spacing: 0.24em; color: #AF90FF; margin-bottom: 16px;">WHY NOW</div>
<div style="font-family: 'Playfair Display', 'Noto Sans KR', Georgia, serif; font-weight: 700; font-size: 40px; line-height: 1.25; color: #ffffff; margin-bottom: 12px;">검색은 끝났고, 답변이 시작됐습니다.</div>
<div style="font-size: 17px; line-height: 1.7; color: #94a3b8; margin-bottom: 56px;">답변엔진은 광고 입찰이 아니라 크롤링 가능한 오픈웹 근거로 병원을 고릅니다. 인용되지 못하면 비교 대상에도 오르지 못합니다.</div>
<div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px;">
<div style="display: flex; flex-direction: column; gap: 10px; padding: 28px; background: #0F1B45; border: 1px solid #2A3A6B; border-radius: 16px;">
<div style="font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 46px; color: #AF90FF;">12종</div>
<div style="font-size: 16px; font-weight: 600; color: #ffffff;">AI 크롤러가 이미 읽는 중</div>
<div style="font-size: 14.5px; line-height: 1.7; color: #94a3b8;">GPTBot·OAI-SearchBot·PerplexityBot 등이 오늘도 병원 사이트를 수집합니다. 문제는 접근이 아니라 인용할 내용입니다.</div>
</div>
<div style="display: flex; flex-direction: column; gap: 10px; padding: 28px; background: #0F1B45; border: 1px solid #2A3A6B; border-radius: 16px;">
<div style="font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 46px; color: #AF90FF;">0건</div>
<div style="font-size: 16px; font-weight: 600; color: #ffffff;">네이버 자산의 AI 기여</div>
<div style="font-size: 14.5px; line-height: 1.7; color: #94a3b8;">네이버 블로그·플레이스는 robots.txt로 AI 크롤러를 전면 차단합니다(2026-08 실측). 지금까지의 네이버 마케팅은 AI 답변에 닿지 않습니다.</div>
</div>
<div style="display: flex; flex-direction: column; gap: 10px; padding: 28px; background: #0F1B45; border: 1px solid #2A3A6B; border-radius: 16px;">
<div style="font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 46px; color: #AF90FF;">35~70%</div>
<div style="font-size: 16px; font-weight: 600; color: #ffffff;">Direct로 숨는 AI 유입</div>
<div style="font-size: 14.5px; line-height: 1.7; color: #94a3b8;">AI가 보낸 방문의 상당수는 유입 경로 없이 도착합니다. 측정 인프라 없이는 이미 오는 환자도 세지 못합니다.</div>
</div>
</div>
</div>
</div>
<!-- ── How it works ────────────────────────────────────────────────── -->
<div style="display: flex; justify-content: center; background: #f8fafc;">
<div style="width: 100%; max-width: 1120px; padding: 96px 24px; box-sizing: border-box;">
<div style="text-align: center; margin-bottom: 56px;">
<div style="font-size: 14px; font-weight: 700; letter-spacing: 0.24em; color: #6C5CE7; margin-bottom: 16px;">HOW IT WORKS</div>
<div style="font-family: 'Playfair Display', 'Noto Sans KR', Georgia, serif; font-weight: 700; font-size: 40px; line-height: 1.25; color: #0A1128;">진단하고, 구축하고, 숫자로 증명합니다.</div>
</div>
<div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;">
<div style="display: flex; flex-direction: column; gap: 14px; background: rgba(255,255,255,0.7); backdrop-filter: blur(24px); border: 1px solid rgba(255,255,255,0.4); box-shadow: 0 8px 32px rgba(31,38,135,0.07); border-radius: 16px; padding: 32px;">
<div style="display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: #F3F0FF; border-radius: 12px;">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><circle cx="11" cy="11" r="6.5" stroke="#6C5CE7" stroke-width="1.6"/><path d="M16 16l4 4" stroke="#6C5CE7" stroke-width="1.6" stroke-linecap="round"/><path d="M8.5 11h5M11 8.5v5" stroke="#6C5CE7" stroke-width="1.6" stroke-linecap="round"/></svg>
</div>
<div style="display: flex; align-items: baseline; gap: 10px;">
<span style="font-size: 13px; font-weight: 700; letter-spacing: 0.12em; color: #6C5CE7;">STEP 01</span>
<span style="font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 24px; color: #0A1128;">Audit</span>
</div>
<div style="font-size: 15.5px; line-height: 1.75; color: #475569;">AEO/GEO 기준표 v1.0으로 36개 항목을 실측합니다. 크롤러 접근성부터 인용 가능 콘텐츠, 측정 인프라까지 6개 카테고리 100점 척도. 항목마다 근거 등급을 명시합니다.</div>
</div>
<div style="display: flex; flex-direction: column; gap: 14px; background: rgba(255,255,255,0.7); backdrop-filter: blur(24px); border: 1px solid rgba(255,255,255,0.4); box-shadow: 0 8px 32px rgba(31,38,135,0.07); border-radius: 16px; padding: 32px;">
<div style="display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: #F3F0FF; border-radius: 12px;">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M8 4H6a2 2 0 0 0-2 2v3c0 1-.6 2-1.6 2.4v1.2C3.4 13 4 14 4 15v3a2 2 0 0 0 2 2h2M16 4h2a2 2 0 0 1 2 2v3c0 1 .6 2 1.6 2.4v1.2C20.6 13 20 14 20 15v3a2 2 0 0 1-2 2h-2" stroke="#6C5CE7" stroke-width="1.6" stroke-linecap="round"/></svg>
</div>
<div style="display: flex; align-items: baseline; gap: 10px;">
<span style="font-size: 13px; font-weight: 700; letter-spacing: 0.12em; color: #6C5CE7;">STEP 02</span>
<span style="font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 24px; color: #0A1128;">Build</span>
</div>
<div style="font-size: 15.5px; line-height: 1.75; color: #475569;">MedicalClinic·Physician 스키마를 심고, 흩어진 표면의 NAP을 한 글자까지 통일합니다. 핵심 페이지에 정의문과 시술별 FAQ를 넣어 AI가 잘라 갈 단락을 만듭니다.</div>
</div>
<div style="display: flex; flex-direction: column; gap: 14px; background: rgba(255,255,255,0.7); backdrop-filter: blur(24px); border: 1px solid rgba(255,255,255,0.4); box-shadow: 0 8px 32px rgba(31,38,135,0.07); border-radius: 16px; padding: 32px;">
<div style="display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: #F3F0FF; border-radius: 12px;">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M4 20V10M10 20V4M16 20v-8M22 20H2" stroke="#6C5CE7" stroke-width="1.6" stroke-linecap="round"/></svg>
</div>
<div style="display: flex; align-items: baseline; gap: 10px;">
<span style="font-size: 13px; font-weight: 700; letter-spacing: 0.12em; color: #6C5CE7;">STEP 03</span>
<span style="font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 24px; color: #0A1128;">Prove</span>
</div>
<div style="font-size: 15.5px; line-height: 1.75; color: #475569;">GA4 AI 채널그룹과 서버로그 크롤러 검증을 설치하고, 질의 10개 × 5회 반복 스팟체크로 변화를 측정합니다. 단발 조회가 아니라 언급률과 신뢰구간으로만 보고합니다.</div>
</div>
</div>
</div>
</div>
<!-- ── Sample report ───────────────────────────────────────────────── -->
<div style="display: flex; justify-content: center; background: #F4F6FB;">
<div style="width: 100%; max-width: 1120px; padding: 96px 24px; box-sizing: border-box;">
<div style="font-size: 14px; font-weight: 700; letter-spacing: 0.24em; color: #6C5CE7; margin-bottom: 16px;">SAMPLE REPORT · 뷰성형외과 실측</div>
<div style="font-family: 'Playfair Display', 'Noto Sans KR', Georgia, serif; font-weight: 700; font-size: 40px; line-height: 1.25; color: #0A1128; margin-bottom: 12px;">읽을 수는 있지만, 인용할 근거가 없습니다.</div>
<div style="font-size: 17px; line-height: 1.7; color: #64748b; margin-bottom: 48px;">실제 1차 진단 결과입니다. 어디가 강하고 어디가 비어 있는지, 점수는 카테고리 단위로 드러납니다.</div>
<div style="display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 24px;">
<!-- Score ring card -->
<div style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 40px 32px; box-shadow: 0 8px 32px rgba(31,38,135,0.07);">
<div style="position: relative; width: 160px; height: 160px;">
<svg width="160" height="160" viewBox="0 0 160 160" style="transform: rotate(-90deg);">
<circle cx="80" cy="80" r="76" fill="none" stroke="#f1f5f9" stroke-width="8"></circle>
<circle cx="80" cy="80" r="76" fill="none" stroke="#8B9CF7" stroke-width="8" stroke-linecap="round" stroke-dasharray="477.5" stroke-dashoffset="248.3"></circle>
</svg>
<div style="position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;">
<span style="font-size: 40px; font-weight: 700; color: #0A1128;">48</span>
<span style="font-size: 13px; color: #94a3b8;">/ 100</span>
</div>
</div>
<div style="display: flex; align-items: center; gap: 10px;">
<div style="display: flex; align-items: center; padding: 5px 14px; background: #FFF6ED; border: 1px solid #F5E0C5; border-radius: 9999px;"><span style="font-size: 14px; font-weight: 700; color: #7C5C3A;">등급 C</span></div>
<span style="font-size: 14px; color: #64748b;">AI Answer Readiness</span>
</div>
<div style="font-size: 13.5px; line-height: 1.6; color: #94a3b8; text-align: center;">36개 항목 중 31개 실측.<br>미검증 5개는 분모에서 제외했습니다.</div>
</div>
<!-- Category bars -->
<div style="display: flex; flex-direction: column; justify-content: center; gap: 18px; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 36px 40px; box-shadow: 0 8px 32px rgba(31,38,135,0.07);">
<div style="display: flex; flex-direction: column; gap: 7px;">
<div style="display: flex; justify-content: space-between; align-items: baseline;">
<span style="font-size: 15px; font-weight: 600; color: #0A1128;">A · AI 크롤러 접근성</span>
<span style="font-size: 15px; font-weight: 700; color: #6C5CE7;">92%</span>
</div>
<div style="height: 8px; background: #f1f5f9; border-radius: 9999px;"><div style="width: 92%; height: 8px; background: #6C5CE7; border-radius: 9999px;"></div></div>
</div>
<div style="display: flex; flex-direction: column; gap: 7px;">
<div style="display: flex; justify-content: space-between; align-items: baseline;">
<span style="font-size: 15px; font-weight: 600; color: #0A1128;">B · 엔티티 식별·구조화</span>
<span style="font-size: 15px; font-weight: 700; color: #C084CF;">30%</span>
</div>
<div style="height: 8px; background: #f1f5f9; border-radius: 9999px;"><div style="width: 30%; height: 8px; background: #C084CF; border-radius: 9999px;"></div></div>
</div>
<div style="display: flex; flex-direction: column; gap: 7px;">
<div style="display: flex; justify-content: space-between; align-items: baseline;">
<span style="font-size: 15px; font-weight: 600; color: #0A1128;">C · 답변 인용 가능 콘텐츠</span>
<span style="font-size: 15px; font-weight: 700; color: #C084CF;">20%</span>
</div>
<div style="height: 8px; background: #f1f5f9; border-radius: 9999px;"><div style="width: 20%; height: 8px; background: #C084CF; border-radius: 9999px;"></div></div>
</div>
<div style="display: flex; flex-direction: column; gap: 7px;">
<div style="display: flex; justify-content: space-between; align-items: baseline;">
<span style="font-size: 15px; font-weight: 600; color: #0A1128;">D · AI 인용 표면 확보</span>
<span style="font-size: 15px; font-weight: 700; color: #7C6DD8;">72%</span>
</div>
<div style="height: 8px; background: #f1f5f9; border-radius: 9999px;"><div style="width: 72%; height: 8px; background: #7C6DD8; border-radius: 9999px;"></div></div>
</div>
<div style="display: flex; flex-direction: column; gap: 7px;">
<div style="display: flex; justify-content: space-between; align-items: baseline;">
<span style="font-size: 15px; font-weight: 600; color: #0A1128;">E · AI 가시성 측정 인프라</span>
<span style="font-size: 15px; font-weight: 700; color: #C084CF;">0%</span>
</div>
<div style="height: 8px; background: #f1f5f9; border-radius: 9999px;"><div style="width: 2%; height: 8px; background: #C084CF; border-radius: 9999px;"></div></div>
</div>
<div style="display: flex; flex-direction: column; gap: 7px;">
<div style="display: flex; justify-content: space-between; align-items: baseline;">
<span style="font-size: 15px; font-weight: 600; color: #0A1128;">F · 기술 위생</span>
<span style="font-size: 15px; font-weight: 700; color: #C084CF;">33%</span>
</div>
<div style="height: 8px; background: #f1f5f9; border-radius: 9999px;"><div style="width: 33%; height: 8px; background: #C084CF; border-radius: 9999px;"></div></div>
</div>
</div>
</div>
<!-- Findings chips row -->
<div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 24px;">
<div style="display: flex; flex-direction: column; gap: 10px; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 24px 28px;">
<div style="display: inline-flex; align-self: flex-start; align-items: center; gap: 7px; padding: 4px 12px; background: #FFF0F0; border: 1px solid #F5D5DC; border-radius: 9999px;"><span style="width: 7px; height: 7px; background: #D4889A; border-radius: 9999px;"></span><span style="font-size: 13px; font-weight: 700; color: #7C3A4B;">치명</span></div>
<div style="font-size: 15.5px; font-weight: 600; color: #0A1128;">AI가 누구인지 확정 못 함</div>
<div style="font-size: 14px; line-height: 1.7; color: #64748b;">MedicalClinic 스키마 없음. 시술 목록 JSON-LD는 문법 오류로 통째로 버려집니다.</div>
</div>
<div style="display: flex; flex-direction: column; gap: 10px; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 24px 28px;">
<div style="display: inline-flex; align-self: flex-start; align-items: center; gap: 7px; padding: 4px 12px; background: #FFF6ED; border: 1px solid #F5E0C5; border-radius: 9999px;"><span style="width: 7px; height: 7px; background: #D4A872; border-radius: 9999px;"></span><span style="font-size: 13px; font-weight: 700; color: #7C5C3A;">보완</span></div>
<div style="font-size: 15.5px; font-weight: 600; color: #0A1128;">인용할 문장이 없음</div>
<div style="font-size: 14px; line-height: 1.7; color: #64748b;">정의문 0개, FAQ 0개, HTML 표 0개. 답변엔진이 잘라 갈 단락이 없습니다.</div>
</div>
<div style="display: flex; flex-direction: column; gap: 10px; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 24px 28px;">
<div style="display: inline-flex; align-self: flex-start; align-items: center; gap: 7px; padding: 4px 12px; background: #F3F0FF; border: 1px solid #D5CDF5; border-radius: 9999px;"><span style="width: 7px; height: 7px; background: #9B8AD4; border-radius: 9999px;"></span><span style="font-size: 13px; font-weight: 700; color: #4A3A7C;">강점</span></div>
<div style="font-size: 15.5px; font-weight: 600; color: #0A1128;">표면 자산은 이미 강함</div>
<div style="font-size: 14px; line-height: 1.7; color: #64748b;">강남언니 후기 19,316건, GBP 4.9점. 홈페이지가 따라가면 바로 인용 근거가 됩니다.</div>
</div>
</div>
</div>
</div>
<!-- ── Roadmap ─────────────────────────────────────────────────────── -->
<div style="display: flex; justify-content: center; background: #f8fafc;">
<div style="width: 100%; max-width: 1120px; padding: 96px 24px; box-sizing: border-box;">
<div style="text-align: center; margin-bottom: 64px;">
<div style="font-size: 14px; font-weight: 700; letter-spacing: 0.24em; color: #6C5CE7; margin-bottom: 16px;">8-WEEK ROADMAP</div>
<div style="font-family: 'Playfair Display', 'Noto Sans KR', Georgia, serif; font-weight: 700; font-size: 40px; line-height: 1.25; color: #0A1128;">8주 안에, C에서 B로 올립니다.</div>
</div>
<div style="position: relative;">
<div style="position: absolute; top: 11px; left: 8%; right: 8%; height: 2px; background: #D5CDF5;"></div>
<div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px;">
<div style="display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px;">
<div style="position: relative; width: 24px; height: 24px; background: #6C5CE7; border: 5px solid #f8fafc; border-radius: 9999px; box-sizing: border-box;"></div>
<div style="font-size: 14px; font-weight: 700; letter-spacing: 0.1em; color: #6C5CE7;">W1–2</div>
<div style="font-size: 17px; font-weight: 700; color: #0A1128;">기반 설치</div>
<div style="font-size: 14.5px; line-height: 1.7; color: #64748b; max-width: 280px;">스키마·NAP·측정 인프라를 설치하고 기준선 스팟체크를 1회 측정합니다.</div>
</div>
<div style="display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px;">
<div style="position: relative; width: 24px; height: 24px; background: #6C5CE7; border: 5px solid #f8fafc; border-radius: 9999px; box-sizing: border-box;"></div>
<div style="font-size: 14px; font-weight: 700; letter-spacing: 0.1em; color: #6C5CE7;">W3–6</div>
<div style="font-size: 17px; font-weight: 700; color: #0A1128;">콘텐츠 구조</div>
<div style="font-size: 14.5px; line-height: 1.7; color: #64748b; max-width: 280px;">정의문·FAQ·H1 재설계와 HTML 비교표를 구축하고 WordPress를 업그레이드합니다.</div>
</div>
<div style="display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px;">
<div style="position: relative; width: 24px; height: 24px; background: #6C5CE7; border: 5px solid #f8fafc; border-radius: 9999px; box-sizing: border-box;"></div>
<div style="font-size: 14px; font-weight: 700; letter-spacing: 0.1em; color: #6C5CE7;">W7–8</div>
<div style="font-size: 17px; font-weight: 700; color: #0A1128;">재진단·보고</div>
<div style="font-size: 14.5px; line-height: 1.7; color: #64748b; max-width: 280px;">36개 항목을 재측정하고 미검증 5개를 반영해 총점을 다시 산정합니다.</div>
</div>
</div>
</div>
</div>
</div>
<!-- ── Honesty ─────────────────────────────────────────────────────── -->
<div style="display: flex; justify-content: center; background: #ffffff; border-top: 1px solid #eef0f7; border-bottom: 1px solid #eef0f7;">
<div style="width: 100%; max-width: 880px; padding: 72px 24px; box-sizing: border-box; text-align: center;">
<div style="font-family: 'Playfair Display', 'Noto Sans KR', Georgia, serif; font-style: italic; font-weight: 600; font-size: 27px; line-height: 1.5; color: #0A1128; margin-bottom: 28px;">"스키마를 넣으면 인용된다고 약속하지 않습니다.<br>인용될 수 없는 이유를 전부 제거하고, 결과를 반복 측정으로 증명합니다."</div>
<div style="display: flex; justify-content: center; gap: 12px;">
<div style="padding: 8px 18px; background: #F4F6FB; border: 1px solid #e2e8f0; border-radius: 9999px;"><span style="font-size: 14px; font-weight: 500; color: #475569;">효과 없는 llms.txt는 팔지 않습니다</span></div>
<div style="padding: 8px 18px; background: #F4F6FB; border: 1px solid #e2e8f0; border-radius: 9999px;"><span style="font-size: 14px; font-weight: 500; color: #475569;">순위·노출을 보장하지 않습니다</span></div>
<div style="padding: 8px 18px; background: #F4F6FB; border: 1px solid #e2e8f0; border-radius: 9999px;"><span style="font-size: 14px; font-weight: 500; color: #475569;">단발 측정으로 보고하지 않습니다</span></div>
</div>
</div>
</div>
<!-- ── Final CTA ───────────────────────────────────────────────────── -->
<div style="display: flex; justify-content: center; background: #0A1128;">
<div style="width: 100%; max-width: 1120px; padding: 96px 24px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; text-align: center;">
<div style="font-family: 'Playfair Display', 'Noto Sans KR', Georgia, serif; font-weight: 700; font-size: 44px; line-height: 1.25; color: #ffffff; margin-bottom: 18px;">AI가 당신의 병원을 인용하게 하세요.</div>
<div style="font-size: 18px; line-height: 1.7; color: #94a3b8; margin-bottom: 40px;">진단은 무료입니다. 36개 항목 실측 리포트를 받아보고 결정하세요.</div>
<div style="display: flex; align-items: center; gap: 14px;">
<div style="display: flex; align-items: center; height: 52px; padding: 0 30px; background: #ffffff; border-radius: 9999px;">
<span style="font-size: 16px; font-weight: 700; color: #0A1128;">무료 AEO / GEO 진단 받기</span>
</div>
<span style="font-size: 15px; color: #64748b;">o2oteam@o2o.kr</span>
</div>
</div>
</div>
<!-- ── Footer ──────────────────────────────────────────────────────── -->
<div style="display: flex; justify-content: center; background: #ffffff; border-top: 1px solid #f1f5f9;">
<div style="width: 100%; max-width: 1120px; padding: 48px 24px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between;">
<span style="font-family: 'Playfair Display', Georgia, serif; font-weight: 900; font-size: 30px; letter-spacing: 0.05em; background: linear-gradient(to right, #4F1DA1, #021341); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;">INFINITH</span>
<span style="font-size: 14px; line-height: 1.7; color: #64748b; text-align: right;">© 2026 INFINITH. All rights reserved.<br>Infinite Marketing for Premium Medical Business &amp; Marketing Agency</span>
</div>
</div>
</div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink