Back to Projects

Aesthe CRM Next

B2B SaaS 의료 클리닉 운영 플랫폼

회사
가이아랩스
역할
프론트엔드 개발자 & UX 디자이너
팀 구성
백엔드 3, 프론트엔드 2, 디자이너 1
기간
2025년 1월 - 현재
운영
V1 프로덕션 운영 중 · V2 개발 중

피부과 클리닉의 마켓팅 분석과 운영 업무를 지원하는 B2B SaaS 플랫폼으로, V1 운영 이후 V2 리빌드 과정에서 기능 개발과 API 구조 개선 논의에 참여했습니다.

Business Impact

환자 상담 기록 및 결제 프로세스 약 40% 단축

실제 상담사 피드백을 반영해 입력 흐름과 화면 구조를 재설계하여 업무 이동과 중복 입력을 줄였습니다.

결제 정산 오차율 0% 달성

정수 기반 부가세 계산 로직 도입 이후, 6개월간 단 한 건의 금액 불일치 사례도 발생하지 않아 V2 제작 시 해당 로직을 백엔드에 위임했습니다.

실제 운영 도입

테이아 클리닉 강남점 전 직원이 매일 사용하는 핵심 시스템으로 자리잡았으며, 신규 지점 확장 시에도 동일하게 도입 예정입니다.

Engineering Impact

프론트엔드 성능 최적화

Next.js App Router 전환 및 서버 컴포넌트(RSC) 도입을 통해 JS 번들 사이즈를 30% 이상 경량화하고, 대시보드 LCP(Largest Contentful Paint)를 약 1.2초 단축했습니다.

데이터 정합성 확보

React Query의 캐싱 전략을 재설계하여 불필요한 API 호출을 45% 줄였으며, 실시간 웹소켓 연동으로 여러 대스크에서 발생하는 데이터 충돌 문제를 해결했습니다.

개발 표준 수립

V2 리빌드에서 스키마 설계 논의에 참여해 프론트엔드 관점에서 데이터 구조 단순화 및 확장성을 제안.

Domain Understanding

단순한 CRM을 넘어, 마케팅 유입 경로와 실제 병원 시술 흐름(EMR)을 연결하는 통합 시스템을 구축했습니다. 피부과 특성상 성과 관리가 중요한 환경을 반영해, 상담·결제·시술·사후 관리까지 데이터가 끊김 없이 흐르도록 설계했습니다.

실무 중심의 인터페이스

상담실장과 의료진이 환자 차트와 성과 지표를 동시에 확인할 수 있도록 역할별 최적화된 UI 제공.

비즈니스 성과 지원

'재방문 주기 알림'이나 '미결제 항목 추적' 등 실제 매출 증대에 기여하는 기능적 가치를 제품에 투영했습니다.

Err Response: VAT Calculation Error

프로덕션 환경에서 발생한 부가세(VAT) 계산 오류 로직을 발견하고, 단순 버그 수정을 넘어, 문제의 근본 원인을 추적하고 재발 방지 구조를 설계했습니다.

Discovery

상담 후 상품 금액 정산 과정에서 실제 결제 금액과 화면 상 표시 금액 사이에 미세한 차이가 발생하는 것을 발견했습니다. 소수점 이하 반올림 처리가 프론트엔드와 백엔드 간에 일관되지 않아 부가세 계산 결과가 달라져 API 호출 오류까지 이어지는 문제였습니다.

Response

프론트엔드의 부동소수점 연산을 정수 기반 계산으로 전환하고, 백엔드와 동일한 반올림 정책을 적용했습니다. 금액 관련 모든 컴포넌트에 일관된 포맷팅 유틸리티를 구축하여 동일한 계산 로직이 적용되도록 했습니다.

Result

정산 오차가 완전히 해소되었고, 이후 6개월 이상 금액 관련 불일치가 발생하지 않았습니다. 해당 유틸리티는 프로젝트 전체의 금액 처리 표준으로 자리잡았습니다.

Insight

계산에서 부동소수점 연산의 위험성과, 프론트엔드-백엔드 간 비즈니스 로직 일관성 확보의 중요성을 체감했습니다. 이 경험을 바탕으로 이후 모든 금액 관련 기능에 정수 기반 연산을 우선 적용하는 원칙을 수립했습니다.

Tech Stack

Next.js 14 (App Router)TypeScriptReact QueryZustandTailwind CSSRESTful APIsWebSockets (실시간 업데이트)Figma (워크플로우 디자인)