DERMA:CODE
AI 피부 분석 기반 상담 및 시술 추천 플랫폼
얼굴 촬영 기반 AI 분석으로 피부 상태를 점수화하고 맞춤 시술 및 제품을 추천하는 B2B SaaS 플랫폼. 클리닉 현장의 상담 과정에 실제 사용되며, 분석부터 시술 결정까지 이어지는 전체 경험을 설계했습니다.
The Challenge
기존 AI 피부 분석 장치는 방대한 데이터를 제공하지만, 환자가 이를 자신의 피부 상태와 연결해 실질적인 인사이트로 받아들이기에는 간극이 컸습니다. 이 수치적 데이터를 직관적인 언어로 번역하고, 상담사의 설득력을 극대화하여 시술 전환율을 높이는 통합적 경험 설계가 필요했습니다.
- 데이터 과부하와 낮은 해석력: 복잡한 AI 분석 데이터가 텍스트와 수치 위주로 나열되어 있어, 상담사가 환자에게 단시간에 핵심을 전달하기 어려움.
- 단절된 사용자 여정: 분석 결과를 확인한 후 다음 행동(시술 결정)으로 자연스럽게 유도하는 UX 장치가 부족하여 높은 이탈률 발생
- 제품의 시각적 변별력 부족: 급증하는 경쟁 제품들 사이에서 DERMA:CODE만의 고유한 정체성을 보여줄 수 있는 핵심 인터페이스 및 시각 모델 부재.
- 신뢰도와 직결된 인터랙션 품질: 분석 결과의 렌더링 성능과 애니메이션의 완성도가 사용자가 체감하는 기술적 신뢰도에 직접적인 영향을 미치는 구조.
Approach & Key Contributions
DERMA:CODE의 분석 결과 화면은 상담과 시술 결정에 직접적인 영향을 주는 핵심 프로그램입니다. 단순한 기능 구현을 넘어서, 상담사와 환자가 각자의 목적과 맥락에서 직관적으로 이해할 수 있는 UX 구조를 설계하고, 상담 몰입도를 높이는 경험을 제공하는 데 집중했습니다.
제품 핵심 시각 구조는 어떻게 정의했나요?
초기에는 6개 피부 지표를 리스트로 나열하는 구조였으나, 지표 간 관계와 전체 피부 상태를 한눈에 보여주는 Hexa 시각 모델을 제안하고 구현했습니다. 이 구조를 결과 화면, 상담 UI, 리포트, 디자인 시스템 전반에 적용하여 제품의 핵심 아이덴티티로 정착시켰습니다.
Branding 영상 바로 보기
제품의 초기 단계부터 고도화까지, 기여 범위가 어떻게 확장되었나요?
단순 구현을 넘어 제품의 생애 주기 전반에 참여했습니다. 초기 버전의 UX 리뷰를 시작으로, V3에 이르러서는 직접 비즈니스 요구사항을 분석하고 명세화하며 제품의 로드맵을 정의하는 역할을 수행했습니다.
복잡한 시술 프로세스를 사용자에게 어떻게 직관적으로 전달했나요?
모든 환자에게 동일한 결과를 보여주던 일방향 구조에서 벗어나, 시술별 맞춤 대응이 가능한 유연한 화면 분기 구조를 도입했습니다. 이를 통해 상담의 맥락에 맞는 정보를 단계적으로 노출하여, 상담 효율성을 높이고 시술 확정까지의 흐름을 유기적으로 연결했습니다.
상담사의 원활한 설득과 환자의 직관적 이해, 두 타겟의 서로 다른 목적을 어떻게 UI에 녹여냈나요?
빠른 회전율과 매출 전환이 중요한 상담사의 효율성과, 심리적 확신이 필요한 환자의 가독성 사이의 접점을 설계했습니다. 단계적 정보 노출(Progressive Disclosure) 전략을 통해, 상담사가 상담 흐름에 맞춰 핵심 지표를 먼저 제시하며 라포(Rapport)를 형성하고, 시술 결정이 필요한 시점에 상세 데이터를 순차적으로 노출하여 자연스럽게 결제로 이어지는 상담 최적화 인터페이스를 구현했습니다.
KPIs & Impact
- Hexa 구조 도입 후 평균 상담 시간 5~10% 단축
- 결과 화면 리디자인 후 상담 중 추가 질문 빈도 5% 감소 (상담진 피드백)
- 시술 분기 화면이 클리닉 SNS 콘텐츠의 주요 소재로 활용 — 테이아 클리닉에서 마케팅 자산으로 사용 중
- 프론트엔드 단독 운영으로 기획 → 개발 → 배포 사이클을 평균 1~2주 단위로 유지
클리닉으로 부터 AI 피부과 라는 브랜드 가치를 확고하게 지키는 프로그램이라는 피드백을 받았으며, Hexa 구조는 현재 제품 소개서와 영업 자료의 대표 시각 요소로 활용되고 있습니다.
Err Response: LCP 17.4s → 5s 성능 개선
프로덕션 환경에서 초기 로딩 지연으로 인해 상담 현장의 사용성이 저하되는 문제를 발견하고, 체계적인 분석과 최적화를 통해 해결했습니다.
Discovery
실제 상담 현장에서 AI 분석 결과 화면이 로딩되기까지 약 17.4초가 소요되며, 상담사가 대기 시간 동안 환자의 집중력을 유지하기 어렵다는 피드백이 발생했습니다. Lighthouse 및 Chrome DevTools Performance 탭 분석 결과, 초기 JS 번들 크기 과대와 불필요한 렌더링 사이클이 주요 병목으로 확인되었습니다.
Response
React.lazy와 dynamic import를 활용한 코드 스플리팅으로 초기 번들을 분리하고, 무거운 Canvas 차트 컴포넌트의 지연 로딩을 적용했습니다. React Query의 캐싱 전략을 재설계하여 중복 API 호출을 40% 절감하고, 불필요한 리렌더링을 제거하여 렌더링 사이클을 최적화했습니다.
Result
LCP가 17.4초에서 5초로 71% 개선되어 상담 현장에서의 체감 대기 시간이 대폭 단축되었습니다. 로딩 대기 중 상담사가 별도로 설명을 이어가야 했던 불필요한 스텝이 제거되어, 상담 흐름이 자연스럽게 이어지게 되었습니다.
Lessons Learned
번들 분석과 렌더링 프로파일링을 통한 병목 추적의 중요성을 체감했습니다. 성능 최적화는 단순한 기술적 개선이 아니라 사용자 경험과 비즈니스 전환율에 직접적인 영향을 미치며, 특히 실시간 대면 환경에서는 초 단위의 지연도 제품 신뢰도를 좌우한다는 것을 배웠습니다.