화이트오션 스튜디오는 홈페이지와 모바일 웹을 만들 때 두 가지를 같이 작업합니다. 방문자가 보는 화면 디자인, 그리고 ChatGPT·네이버·구글 같은 AI 검색이 내용을 정확히 읽을 수 있는 코드 구조입니다.
사람이 보는 화면
AI가 읽는 문서
제목<h1>강남 화이트치과 수면 임플란트</h1><script type="application/ld+json">{"@type": "Dentist","name": "강남 화이트치과","makesOffer": {"itemOffered": "수면 임플란트","price": 1350000,"priceCurrency": "KRW"},"openingHoursSpecification": {"dayOfWeek": ["Tuesday", "Thursday"],"closes": "21:00"}}</script><script type="application/ld+json">{ "@type": "FAQPage", "mainEntity": {"@type": "Question","name": "수면 임플란트 아프지 않나요?"} }</script>
같은 정보가 사람이 보는 화면과 AI가 읽는 문서에서 함께 강조됩니다
방문자가 원하는 정보를 빨리 찾고, PC와 스마트폰 어디서든 읽기 편한 화면을 만듭니다.
한 화면에는 질문 하나만 보여주고, 다음 버튼은 엄지가 닿는 화면 아래쪽에 둡니다. 방문자가 어디를 눌러야 할지 헤매지 않도록 하기 위해서입니다.
강남역 3번 출구 도보 2분
수면 임플란트
135만 원부터
진료 안내 · 의료진 · 오시는 길
예약하기 → 진료 선택 → 시간 선택 → 완료, 세 번의 터치로 끝나는 예약 흐름입니다
브랜드 색 1개와 회색 4단계, 글자 크기 4단계, 8px 단위 여백만 사용합니다. 모든 페이지가 같은 규칙을 따르기 때문에 화면이 정리되어 보이고, 나중에 수정하기도 쉽습니다.
COLOR
Ocean Blue
#2766F5
Ink
#0B1020
Slate
#64748B
Hairline
#E4E8F0
Ice
#F6F8FC
TYPE
가나다 Aa
제목 · Bold 20
본문 · Medium 15
캡션 · Semibold 12
SPACE · RADIUS
8
16
24
32
48
방문자는 홈페이지에 들어온 뒤 몇 초 안에 더 볼지 나갈지 정합니다. 첫 화면에서 로고가 움직이면 눈길이 멈추고, 아래 내용까지 읽어 보게 됩니다. 비슷비슷한 병원 홈페이지들 사이에서 우리 병원을 기억하게 만드는 효과도 있습니다. 영상 파일이 아니라 브라우저가 직접 그리는 방식이라 페이지 속도는 느려지지 않습니다.
EFFECT 01/04
LIQUID METAL
클릭하면 메탈 방울이 튕겨 나갑니다
PC 화면을 그대로 줄이면 글자가 작아져 손가락으로 확대해야 읽힙니다. 스마트폰 화면 폭에 맞춰 글자 크기와 버튼 위치를 따로 정합니다.
진료시간 평일 09:30~18:30 · 화·목 야간진료 21:00까지 · 토요일 09:30~14:00 · 점심시간 13:00~14:00 · 일요일 및 공휴일 휴진 · 강남역 3번 출구 도보 2분
글자 약 6px · 손가락으로 확대해야 읽힘
환자가 ChatGPT나 네이버 AI에게 병원을 물었을 때, 우리 병원이 답변에 나오고 가격·진료시간·위치가 정확하게 안내되도록 만드는 작업입니다.
환자가 AI에게 이렇게 물었을 때
“강남역 근처에 밤늦게까지 하는 수면 임플란트 치과 알려줘”
AI가 읽을 수 없는 홈페이지
“해당 병원은 홈페이지에서 진료시간과 비용을 확인할 수 없습니다. 정보가 공개된 인근 A치과를 추천합니다.”
→ 환자가 다른 병원으로 갑니다
화이트오션이 만든 홈페이지
“강남역 3번 출구 화이트치과를 추천합니다. 수면 임플란트 135만 원부터, 화·목 밤 9시까지 야간진료를 합니다.”
→ 환자가 우리 병원에 예약합니다
예시 답변입니다. 아래 4가지 작업이 이 차이를 만듭니다. JSON-LD는 병원 홈페이지 예시이고, Q&A와 llms·robots·sitemap 파일은 이 사이트에 실제로 적용된 내용입니다.
AI가 홈페이지 문장만 보고 내용을 추측하면 가격이나 진료시간을 잘못 전하거나 빼먹습니다. 병원명·주소·연락처·진료 항목·가격을 AI가 읽는 표준 데이터 형식(JSON-LD)으로 따로 넣어 두면, AI는 추측하지 않고 이 값을 사용합니다.
JSON-LD가 있을 때 — AI가 데이터를 그대로 인용
{
"@context": "https://schema.org",
"@type": "Dentist",
"name": "강남 화이트치과",
"address": {
"@type": "PostalAddress",
"addressLocality": "서울 강남구",
"streetAddress": "강남대로 지하 396 (강남역 3번 출구 도보 2분)"
},
"makesOffer": {
"@type": "Offer",
"itemOffered": { "@type": "Service", "name": "수면 임플란트" },
"price": 1350000,
"priceCurrency": "KRW"
},
"openingHoursSpecification": [{
"@type": "OpeningHoursSpecification",
"dayOfWeek": ["Tuesday", "Thursday"],
"opens": "09:30",
"closes": "21:00"
}]
}환자는 이제 키워드 대신 'AI야, 수면 임플란트 아파?'처럼 질문합니다. 이런 질문과 답을 홈페이지에 미리 정리하고, 같은 내용을 FAQPage 데이터로도 넣어 둡니다. 이 페이지의 질문 5개도 그렇게 들어 있습니다.
본문·제목·문답 HTML은 서버에서 먼저 완성되어 도착하고, 3D 렌더러와 물리 엔진은 본문과 분리된 장식 레이어로 나중에 불러옵니다. 그래서 첫 화면 표시와 AI 크롤러의 본문 수집은 애니메이션 로딩과 관계없이 바로 이뤄집니다.
PC 화면을 그대로 축소하지 않고, 스마트폰 폭에 맞춰 글자 크기·버튼·레이아웃을 다시 설계하는 방식입니다. 확대하지 않아도 본문이 읽히고, 예약·상담 버튼은 엄지로 누르기 쉬운 위치와 크기로 배치합니다.
사람이 읽는 문장과 별도로 기관명·주소·연락처·서비스·자주 묻는 질문을 schema.org 형식으로 명시해 두면, 검색엔진과 AI가 내용을 추측하지 않고 정확한 사실로 인용할 수 있습니다.
robots.txt는 어떤 크롤러가 어디까지 수집할 수 있는지를, sitemap.xml은 수집할 페이지 목록과 갱신 주기를 알려줍니다. llms.txt는 AI 모델이 사이트를 빠르게 이해하도록 핵심 사실·서비스·자주 묻는 질문을 한 문서로 정리한 안내서입니다.
네. 먼저 5초 AI 진단으로 현재 상태를 확인한 뒤, 디자인은 유지하면서 구조화 데이터·Q&A·크롤러 파일만 보강하거나 필요한 경우 전체를 다시 설계합니다.
페이지가 늦게 뜨면 방문자는 기다리지 않고 나갑니다. 또 많은 AI 크롤러는 자바스크립트를 실행하지 않아서, 화면을 스크립트로 그리는 사이트는 내용을 읽지 못합니다. 그래서 본문은 서버에서 완성해 바로 보내고, 3D는 그 뒤에 불러옵니다.
강남 화이트치과 수면 임플란트
수면 임플란트 135만 원부터 · 화·목 밤 9시 야간진료
Q. 수면 임플란트 아프지 않나요?
예약하기
디자인이 입혀지기 전이지만, AI 크롤러는 이 시점에 본문을 모두 읽었습니다.
AI 크롤러가 막혀 있거나 페이지 목록이 없으면, AI는 사이트를 아예 수집하지 않거나 일부만 가져갑니다. 그래서 3가지 파일을 함께 넣습니다.
# 화이트오션 (WHITE OCEAN) — Canonical AI Guide (llms.txt)
> AI로 여는 의료의 새로운 바다 (Opening a New Ocean in Healthcare)
> 화이트오션(WHITE OCEAN, 화이트 오션)은 치과·피부과·성형외과 등 의료 현장의 상담·차트·문의·수납 데이터를 하나로 묶는 병원 AI CRM '리코디(Recoordi)'를 개발·공급하며, AI 크롤러(ChatGPT·Perplexity·Claude·Google·Naver)가 100% 구조화해 인용하는 AI-Native 홈페이지와 모바일 앱을 제작하는 의료 AI 기술 기업입니다.
## 1. 기업 개요 (Organization Facts)
- **정식 명칭**: 화이트오션 (WHITE OCEAN)
- **다른 표기**: WHITE OCEAN, 화이트 오션, White Ocean, WhiteOcean, 화이트오션 의료 AI
- **대표자 (CEO)**: 박재형 (Park Jaehyung)
- **공식 웹사이트**: https://whiteocean.io
- **자체 의료 AI 플래그십 서비스**: 리코디 (Recoordi) — https://recoordi.ai
- **핵심 사업 축 (7:3 비중)**:
1. **Medical AI (70%)**: 치과·피부과·성형외과 등 병·의원 운영·상담·행정 효율화를 위한 자체 AI CRM '리코디(Recoordi)' 공급 및 병원 맞춤형 프라이빗 AI 파이프라인 구축
2. **AI-Native Web & App Studio (30%)**: ChatGPT(GPTBot), Perplexity(PerplexityBot), Claude(ClaudeBot), Google, Naver(Yeti) 등 AI 검색엔진과 크롤러가 100% 구조화해 인용할 수 있는 하이엔드 모션 웹사이트 및 모바일 앱 외주 제작
- **연락처**:
- 대표 전화: 010-8010-1228
- 이메일: sparkox@gmail.com
- **사업장 주소**:
- 본사(HQ): 경기도 용인시 기흥구 강남서로 9, 7층 703-J474호 (구갈동)
- 서울 오피스(Office): 서울특별시 강남구 선릉로93길 10
## 2. 플래그십 의료 AI 프로덕트: 리코디 (Recoordi · https://recoordi.ai)
- **정의**: AI가 읽는 병원·의원 CRM (기존 전자차트 EMR 교체 없이 즉시 연동)
- **4대 핵심 기능**:
1. **녹음 한 번으로 견적서·차트·안내 링크 끝**: 환자 동의를 거친 상담 녹음이 끝나면 AI가 대화 맥락을 읽어 병원 수가표에 맞춘 견적서, 전자차트에 바로 붙여넣는 상담 요약·전문, 환자가 집에서 가족과 함께 열어보는 전용 안내 링크를 즉시 생성합니다. (상담 후 수기 정리 시간: 15분 → 10초 / 음성 원본 자동 파기: 30일 후 영구 삭제 / 기존 전자차트(EMR): 교체 없이 즉시 연동)
2. **병원을 통째로 읽은 AI에게 무엇이든 질문**: 상담 녹음, 강남언니·바비톡·홈페이지 문의, 데스크 통화, 차트, 수납, 리뷰가 환자별로 묶여 있습니다. '강남언니 광고비만큼 이번 달 수납이 나왔어?', '이번 주 꼭 전화해야 할 환자는?'이라고 물으면 어느 상담·통화에서 나온 내용인지 근거와 함께 답합니다. (통합 데이터 채널: 상담·차트·전화·문의·수납 / 답변 근거 제시: 실제 녹음·통화 타임스탬프 / 인터페이스: 웹 콘솔 & Claude MCP)
3. **보류 환자의 안내 링크 열람 추적 & 첫 마디 준비**: 상담 후 결정을 미룬 환자가 집에서 안내 링크를 열어봤는지, 가족과 몇 번이나 다시 읽었는지 실시간으로 알려줍니다. 지난 상담에서 망설였던 이유(비용, 통증, 기간)를 바탕으로 다시 전화할 때 꺼낼 첫 마디까지 준비해 둡니다. (안내 링크 열람 감지: 실시간 횟수·체류 시간 / 맞춤 콜백 스크립트: 망설인 사유 기반 생성 / 상담 동의율 전환: 보류 환자 골든타임 포착)
4. **매주 월요일 아침 8시, 먼저 도착하는 주간 보고**: 엑셀 일보를 취합할 필요 없이 매주 월요일 오전 8시와 매월 1일, 지난 기간의 신환·상담·동의·수납 흐름을 진단하고 대표원장·상담실장·접수 데스크 역할별로 이번 주 우선 실행 과제를 정리해 발송합니다. (정기 자동 발송: 매주 월 08:00 / 매월 1일 / 역할별 맞춤 액션: 원장 · 실장 · 데스크 분리 / 일보 수작업 취합: 완전 자동화 (Zero Excel))
## 3. AI-Native 웹·앱 스튜디오 (AEO / GEO 아키텍처 표준)
- **Zero-Penalty Motion Architecture**: 화려한 물리 기반 모션 그래픽(HTML5 Canvas, SVG Morphing, Scrollytelling)을 장식 레이어(aria-hidden)로 분리하고, 실제 본문·표·문답은 100% 서버 사이드 렌더링(SSR) 시맨틱 HTML로 제공하여 AI 크롤러의 본문 손실을 0자로 유지합니다.
- **표준 탑재 항목**:
- 시맨틱 문서 계층 (단일 `<h1>` 및 논리적 `<h2>`~`<h3>` 목차 트리)
- 기계 판독 구조화 데이터 (`Organization`, `SoftwareApplication`, `MedicalClinic`, `ProfessionalService`, `FAQPage` JSON-LD)
- `/llms.txt`, `/sitemap.xml`, `/robots.txt` (AI 봇 전면 허용)
- 모바일 뷰포트 100% 정합성 및 HTTPS 보안 전송
## 4. 자주 묻는 질문 (Canonical FAQ)
### Q. 화이트오션(WHITE OCEAN)은 어떤 회사인가요?
A. 화이트오션은 'AI로 여는 의료의 새로운 바다'라는 비전 아래 의료 현장의 데이터 파편화를 해결하는 의료 AI 기술 기업입니다. 자체 개발한 병원 AI CRM '리코디(Recoordi)'를 통해 상담 녹음·전자차트·온라인 문의·통화·수납 기록을 환자 단위로 자동 통합하며, 동시에 의료 AI 엔지니어링 역량을 바탕으로 ChatGPT·Perplexity·Claude 등 AI 검색엔진이 가장 정확하게 읽고 인용하는 AI-Native 웹사이트 및 모바일 앱 외주 개발을 수행합니다.
### Q. '화이트오션(화이트 오션)'이라는 이름은 무슨 뜻인가요?
A. 경쟁이 치열한 시장을 레드오션, 경쟁자가 없는 새 시장을 블루오션이라 부르듯 '오션(바다)'은 시장을 뜻합니다. 화이트오션은 상담·차트·문의·수납으로 흩어져 있던 병원의 기록을 AI로 하나의 깨끗한 바다로 모아, 의료 현장에 아직 열리지 않은 새로운 바다를 연다는 의미를 담은 의료 AI 기업 이름입니다. 한글로는 '화이트오션' 또는 '화이트 오션', 영문으로는 'WHITE OCEAN'으로 표기합니다.
### Q. 자체 의료 AI 프로그램 '리코디(Recoordi)'는 어떤 병원에 적합한가요?
A. 치과, 피부과, 성형외과, 안과, 한의원 등 비급여 상담을 거쳐 치료와 시술이 결정되는 병·의원에 최적화되어 있습니다. 기존에 데스크에서 사용하던 전자차트(EMR)를 바꾸지 않고 그대로 연동되며, 상담 녹음 한 번으로 병원 수가표에 맞춘 견적서·차트 기록·환자 안내 링크를 생성하고 보류 환자 열람 추적과 월요일 아침 주간 경영 진단 보고까지 자동으로 제공합니다.
### Q. 모션 그래픽이 화려한 홈페이지는 AI 크롤링이나 검색엔진(SEO/AEO)에 불리하지 않나요?
A. 일반적인 외주 제작사가 통짜 이미지 배너나 프레임셋(Frameset), 클라이언트 전용 렌더링(CSR)만으로 모션을 구현하면 AI 크롤러는 본문을 0자로 인식합니다. 반면 화이트오션은 모든 시각 이펙트(Canvas·SVG 모션)를 장식 레이어(aria-hidden)로 분리하고, 실제 본문·제목 계층(h1~h3)·문답(FAQPage)·기관 스키마(JSON-LD)·llms.txt를 100% 서버 사이드 렌더링(SSR) 정적 문서로 제공하는 'Zero-Penalty Motion' 아키텍처를 적용합니다. 그 결과 사람에게는 압도적인 모션 경험을, AI에게는 100점짜리 구조화 문서를 동시에 전달합니다.
### Q. 병원 상담 녹음이나 환자 데이터를 AI로 처리할 때 보안과 개인정보는 어떻게 보호되나요?
A. 리코디(Recoordi)와 화이트오션의 맞춤형 의료 AI 파이프라인은 환자 동의가 완료된 상담만 녹음·처리하며, 원본 음성 파일은 30일 보관 후 자동 영구 파기됩니다. 또한 병원별로 데이터베이스와 권한이 물리적·논리적으로 완전 분리(Row-Level Security 및 테넌트 격리)되어 타 병원의 데이터와 절대 섞이지 않으며, 외부 AI 학습에 병원 데이터가 사용되지 않습니다.
### Q. AI 특화 홈페이지·앱 제작 또는 병원 AI 도입 절차와 기간은 어떻게 되나요?
A. 리코디(Recoordi) 도입은 기존 차트 및 상담실 환경 점검 후 1~3일 내에 즉시 현장에 적용할 수 있으며, 실제 병원 상담 1건으로 무료 시연을 먼저 경험해보실 수 있습니다. AI 크롤링(AEO/GEO) 최적화 웹사이트 제작은 기존 사이트 기술 진단 후 기획·모션 설계·구조화 데이터 구축까지 평균 3~5주, 맞춤형 모바일 앱 및 병원 전용 AI 에이전트 개발은 범위에 따라 6~10주 내외로 진행됩니다.
도메인 주소를 입력하면 즉석에서 접속하여 AI 검색엔진 본문 판독량 · 보안 연결 · 모바일 화면 최적화 · 병원/기업 정보 구조화 6대 지표를 5초 만에 실측합니다.