Aesthe CRM Next
도메인별 API 분리와 정수 기반 정산 로직으로 데이터 정합성을 확보하고, 접수 프로세스를 40% 단축시킨 의료 CRM
피부과 클리닉의 마케팅 분석과 운영 업무를 지원하는 B2B SaaS 플랫폼으로, V1 운영 이후 V2 리빌드 과정에서 기능 개발과 API 구조 개선 논의에 참여했습니다.
Business Impact
시술 접수 소요 시간 10분 → 6분 (40% 단축)
5단계 분산 접수 플로우를 단일 화면으로 통합하고, 실제 상담사들의 피드백을 바탕으로 입력 동선과 화면 구조를 개선하여 불필요한 화면 전환과 중복 입력을 획기적으로 줄였습니다.
결제 정산 오차율 0% 달성
정수 기반 부가세 계산 로직을 도입한 이후, 6개월간 단 한 건의 금액 불일치 사례도 발생하지 않았습니다. 해당 유틸리티가 V2 정산 정책 표준으로 채택되었습니다.
실제 운영 및 신규 지점 확장 도입
테이아 클리닉 강남점 전 직원이 매일 사용하는 핵심 운영 시스템으로 자리 잡았으며, 현재 다중 지점 확장을 염두에 둔 V2 리빌드가 진행 중입니다.
Engineering Impact
프론트엔드 성능 최적화
Pages Router 기반에서는 대시보드의 모든 데이터 패칭이 클라이언트에서 이루어져, 빈 화면 → 스피너 → 데이터 표시의 3단계 로딩을 거쳤습니다.
Tree shaking과 dynamic import는 이미 적용한 상태였습니다. 근본적으로 클라이언트에서 실행할 필요 없는 코드(데이터 패칭, 포맷팅 로직)가 번들에 포함되는 것이 문제라 판단했고, 이를 서버로 옮기는 것이 구조적으로 더 큰 효과를 줄 것으로 예상하여 App Router + RSC로 전환했습니다.
클라이언트 JS 번들 사이즈를 30% 이상 경량화하고, 대시보드 LCP를 약 1.2초 단축했습니다.
데이터 정합성 및 효율성 확보
클리닉에서는 접수 데스크, 상담실, 원장실 등 여러 위치에서 동시에 동일한 환자 데이터를 조회하고 수정합니다. 기존 시스템에서는 한 데스크에서 변경된 환자의 대기 상태나 담당 의사 배정이 다른 화면에 즉시 반영되지 않아, 환자 배치 혼선과 업무 지연이 발생했습니다.
주기적 폴링(5초 간격 등)으로도 해결은 가능했지만, 환자 대기 현황처럼 즉시 반영이 필요한 데이터에서 5초 지연도 의사별·시술실별 환자 배치 혼선 리스크가 있었습니다. 실시간성이 중요한 항목(결제, 환자 진료 상태)에 한정하여 WebSocket을 도입하고, 나머지는 React Query 캐싱으로 관리하는 방식으로 범위를 한정했습니다.
WebSocket을 통해 데이터 변경 이벤트를 실시간으로 전파하고, React Query의 invalidateQueries와 연동하여 관련 캐시를 즉시 갱신하는 구조를 구축했습니다. → 데이터 충돌 0건 달성. 불필요한 API 호출은 캐싱 전략 재설계로 45% 절감했습니다.
프론트엔드 주도 개발 표준 수립
V1에서는 환자 정보, 상담 이력, 결제 내역이 하나의 거대한 API 응답(약 50+ 필드)으로 내려와, 화면마다 필요 없는 데이터까지 로딩되고 있었습니다.
GraphQL을 도입하면 필드 선택이 가능하지만, 팀에 경험이 없고 백엔드 수정 범위가 커서 V2 일정에 맞지 않았습니다. 패턴을 도입하여, 오버패칭(Over-fetching) 문제 해결을 위한 인터페이스 규격을 제안하고 프론트엔드에서 필요한 데이터 구조를 정의하여 백엔드에 요청 명세로 전달했습니다.
V2에서는 도메인별 독립 엔드포인트를 제안하고(환자 기본정보 / 상담 이력 / 결제 내역 분리), 프론트엔드에서 필요한 화면에 필요한 엔드포인트만 호출하는 구조로 개선했습니다. 또한 시술 카테고리, 결제 수단 등 확장 가능성이 높은 필드는 하드코딩된 enum 대신 서버 관리 코드 테이블을 사용하도록 제안하여, 신규 시술 추가 시 프론트엔드 배포 없이 대응 가능하게 했습니다.
Domain Understanding
단순 CRM을 넘어 마케팅 유입부터 실제 시술 흐름(EMR)까지 연결되는 통합 시스템을 지향합니다. 상담, 결제, 시술, 사후 관리까지 데이터가 단절 없이 흐르도록 구조화했습니다.
통합 의료 워크플로우 UI 설계
상담 → 결제 → 시술 → 사후 관리까지, 사용자가 하나의 끊김 없는 화면 흐름으로 경험할 수 있도록 프론트엔드의 라우팅, 상태 관리, 화면 전환을 설계했습니다. 각 단계에서 필요한 데이터가 자연스럽게 다음 단계로 전달되어, 상담사가 별도의 화면 이동이나 데이터 재입력 없이 업무를 진행할 수 있습니다.
실무 최적화 인터페이스 구현
상담실장과 의료진이 환자 차트와 성과 지표를 동시에 확인하며 의사결정을 내릴 수 있도록 역할별 맞춤형 UI를 제공합니다.
비즈니스 가치 중심의 기능 설계
'재방문 주기 알림', '미결제 항목 추적' 등 실제 병원 매출 증대에 기여할 수 있는 기능들을 제품에 녹여냈습니다.
[Troubleshooting] 부가세(VAT) 계산 정합성 이슈 해결
프로덕션 환경에서 발생한 부가세(VAT) 계산 오류 로직을 발견하고, 단순 버그 수정을 넘어, 문제의 근본 원인을 추적하고 재발 방지 구조를 설계했습니다.
Discovery
정산 과정에서 실제 결제 금액과 화면에 표시되는 금액 사이에 VAT(10%) 계산으로 인한 수 원 단위의 오차가 발생하는 것을 발견했습니다. 최종 금액은 백엔드에서 계산되지만, 프론트엔드에서도 사용자에게 실시간 예상 금액(소계, 부가세, 할인 적용 후 금액)을 보여줘야 했고, 이 과정에서 표시 금액과 서버 확정 금액 간 불일치가 발생했습니다. 원인은 프론트엔드와 백엔드 간 부동소수점 처리 방식(반올림/내림)의 차이였습니다.
표시 금액을 제거하고 서버 응답만 노출하는 방법도 검토했지만, 상담사가 시술 항목을 조합하며 예상 금액을 즉시 확인해야 하는 워크플로우 특성상 프론트엔드 계산을 배제하기는 어려웠습니다. 따라서 프론트엔드와 백엔드가 동일한 계산 정책과 반올림 규칙을 적용하도록 정렬하는 것을 해결 방향으로 결정했습니다.
Response
모든 금액을 원 단위 정수(Integer)로 치환하여 연산하고, 백엔드와 반올림 정책을 동기화한 전역 유틸리티를 구축하여 로직을 단일화했습니다.
Result
이후 6개월 이상 정산 오차가 발생하지 않았으며, 해당 유틸리티가 V2 정산 정책 표준으로 채택되었습니다.
Insight
금융/정산 데이터 처리 시 부동소수점 연산의 위험성을 깊이 체감했습니다. 프론트엔드와 백엔드 간 비즈니스 로직 일관성 확보가 사용자 신뢰에 직결된다는 점을 학습했습니다.