Zion Dental: 환자 교육용 3D

Client: Zion Ics Services: 인터랙티브 3D, 의료 교육, 환자 커뮤니케이션 Duration: 8주 Tech: Three.js, Verge3D

문제 정의

Zion Ics는 정밀 치과 임플란트를 만듭니다. 두 사람에게 동시에 팔아야 하는 제품입니다. 시술을 진행하는 치과와, 의자에 앉아 시술 여부를 결정하는 긴장한 환자.

치과의 환자 교육 콘텐츠는 전통적으로 스톡 영상 수준에 머물러 있습니다. 의료 콘텐츠 라이브러리에서 구독 형태로 라이선스되는 일반적인 애니메이션. 콘텐츠 자체에는 문제가 없지만, 모든 치과가 같은 콘텐츠를 씁니다. Zion은 자기네 파트너 치과들이 브랜드가 들어간 Zion 전용 3D 설명 도구를 갖기를 원했습니다. 컨설팅 자리에서 치과의 태블릿에 띄웠을 때 구별되는 것, Zion 임플란트 시술 자체를 보여 주는 것, 긴장한 환자가 치료에 예라고 답하도록 돕는 것.

만든 것

치과 진료실 태블릿에서 컨설팅용으로 쓰도록 설계한 브라우저 기반 3D 환자 교육 도구입니다.

• Zion 임플란트, 분해된 형태. 티타늄 바디와 골드 어버트먼트 크라운을, 환자가 트레이에서 보게 될 모습으로 펼친 다음, 치과가 식립 단계를 설명하는 동안 3D에서 조립합니다. 환자가 부품과 먼저 만나고, 그다음에 그것이 환자와 만납니다
• 치료실 스케일에 맞춘 시술 순서. 드릴, 임플란트 바디, 어버트먼트, 최종 크라운을 치과가 작업하는 순서대로 시퀀싱. 각 컴포넌트는 단독으로 회전 가능하고, 자동 진행은 없습니다
• 임플란트 식립이 적용된 턱뼈 3D 단면. 사용자(치과 또는 환자)가 모델을 회전하고 확대합니다
• 단계별 시술 가이드. 초기 평가부터 골유착, 최종 크라운까지 식립 시술의 가이드 시퀀스
• 사후 케어 모듈. 회복 기간 동안 환자가 해야 할 일과 하지 말아야 할 일을 별도 모듈로 분리, 치과가 따로 보여 줄 수 있도록 구성
• 어노테이션 레이어. 해부학적 라벨, 디바이스 콜아웃, 타임라인 인디케이터
• Zion 브랜드 통합. 스톡 의료 콘텐츠와 구별되도록 Zion 브랜딩의 미묘하지만 일관된 존재감
• 치과 페이스 인터랙션. 치과가 세션을 컨트롤하고, 질문이 들어오면 멈춥니다. 자동 재생되는 콘텐츠는 없습니다

작업 방식

1주차–2주차. 킥오프, Zion 치과 자문진과 임상 정합성 리뷰. 모든 단계에서 임상 사인오프 없이 의료 콘텐츠를 만들지 않았습니다.

3주차–4주차. 3D 에셋 빌드. 턱뼈 해부, 임플란트 하드웨어, 주변 조직. 4주차 말에 의료 정합성 리뷰.

5주차–6주차. 시술 시퀀싱과 어노테이션 레이어. 치과 대상 UI 디자인. 1차 임상 리뷰.

7주차. 브랜드 통합, 사후 케어 모듈, 성능 튜닝.

8주차. 태블릿 배포 테스트, 치과용 트레이닝 자료, 런칭.

어디에 배포됐는가

Zion의 파트너 치과들은 임플란트 컨설팅 중 체어사이드 iPad에서 이 도구를 씁니다. 같은 기기에서 재생되던 라이선스 스톡 영상 라이브러리를 대체했습니다. 치과는 이제 모든 클리닉에서 일관된 하나의 비주얼 에셋으로 환자에게 Zion 임플란트의 구체적인 형상, 식립 순서, 골유착 타임라인을 설명합니다.

이 도구는 치과 스태프 온보딩에도 사용됩니다. 신규 직원이 환자의 시술 관련 질문에 답할 수 있게 되기까지의 시간을 줄였습니다.

배운 것

iPad WebGL은 본 밀도 셰이더에 명확한 상한선이 있습니다. 첫 턱뼈 모델은 체어사이드 조명 아래에서 진짜 뼈처럼 읽히도록 서브서피스 스캐터링 패스를 썼습니다. 카메라가 움직이는 순간 2020 iPad가 22fps로 떨어졌습니다. 본 셰이더를 베이크된 노멀 맵 + 단일 스페큘러 텀으로 다시 만들었습니다. 체어사이드 시청 거리에서 시각적으로 거의 동일했고, 60fps 예산 안에 들어왔습니다. 임상 환경은 디바이스 타깃이 제한적인 곳입니다. 일찍 예산을 잡으십시오.

치과 페이스 인터랙션은 자동 재생을 이깁니다. 초기 빌드에는 시간 트랜지션이 걸린 자동 진행 콘텐츠가 있었습니다. 치과들은 즉시 자동 재생을 껐습니다. 환자 질문에 대응하려고 각 단계에서 멈추고 싶어 합니다. 인터랙션 모델을 치과가 진행을 컨트롤하는 방식으로 뒤집었습니다. 참여도가 올라갔고, 치과 채택률도 올라갔고, 환자는 치과가 실시간으로 자기에게 응답하기 때문에 더 집중했습니다.

사후 케어를 별도 모듈로 둔 데에는 이유가 있습니다. 첫 버전은 시술과 사후 케어를 하나의 연속된 흐름으로 합쳐 두었습니다. 치과들은 그걸 원하지 않았습니다. 시술 콘텐츠는 진료 전에, 사후 케어는 진료 끝에 보여 줍니다. 두 모듈로 분리해 각각 독립적으로 띄울 수 있게 했습니다. 그 즉시 훨씬 쓸 만해졌습니다.

스택

• 런타임: Three.js + Verge3D. Three.js로 본과 조직 패스의 셰이더 단위 제어가 가능했고, Verge3D는 시술 단계 오서링을 맡아 Zion 임상 자문진이 개발자 없이 시퀀싱을 검토할 수 있게 해 주었습니다.
• UI: 바닐라 TypeScript와 HTML/CSS 오버레이. 단일 목적의 체어사이드 도구는 프레임워크의 번들 무게를 정당화하지 않고, 작은 번들이 콜드 iPad에서 더 빨리 시작됩니다.
• 에셋: Draco 압축 GLTF, 전체 세트 약 6MB. Draco가 턱뼈 지오메트리 기준 로우 GLTF 대비 약 4배 축소를 제공했고, 콜드 스타트 3초 이하가 가능했던 이유입니다.
• 성능 기준: 2020 iPad에서 60fps, 구형 안드로이드 태블릿에서 30fps. iPad 타깃은 Zion 파트너 클리닉에 실제로 놓인 하드웨어를 기준으로 잡았습니다.
• 배포: Zion 서브도메인에 호스팅, Service Worker로 오프라인 가능하게 만들어 WiFi가 약한 진료실에서도 컨설팅을 진행할 수 있습니다.

비슷한 작업이 필요하신가요

환자 교육, 의료 기기 마케팅, 임상 트레이닝. 패턴은 치과 외 영역으로도 일반화됩니다. 환자나 임상의가 이해해야 하는 의료 기기나 시술을 만드신다면 이 도구의 모양이 통합니다.

두 문장짜리 메일을 info@cclemang.com 으로 보내 주십시오.

전체 작업 보기 →