환자 관리, 검진 기록 관리, AI 검진 리포트 생성, 검진 PDF 결과지 발급 등 건강검진 효율화 솔루션 A to Z 개발. 기여도 80%.

다국어, 다국적 포맷 지원

(문제) 병원 SaaS는 환자관리, 검진기록, AI리포트, 결과지 발급 등 복잡한 도메인이 얽혀있어, 코드가 여러 곳에 흩어지면 수정 시 영향 범위 파악이 어렵고 중복 코드가 증가하는 문제가 예상됐음. (해결) Feature-Sliced Design을 참고하되 덜 엄격한 방식으로 글로벌 모듈과 도메인 모듈을 분리. 각 도메인 내부를 `ui`[컴포넌트], `service`[데이터 페칭/변환], `logic`[비즈니스 로직] 3계층으로 구성. (성과) 참조 관계가 명확하고 응집도가 높은 코드 베이스로 신규 개발자 온보딩 시 어디에 무엇이 있는지 직관적으로 파악 가능했음. 기능 수정 시 영향 범위가 단일 도메인 내로 제한되어 사이드이펙트 감소. (레슨 런) 모듈 패턴을 더 잘 이해하고 활용할 수 있게 되었음. 그 과정에서 더 잘게 나눠 중복을 제거하고 재사용성을 개선했다고 생각했지만 실제로는 그 효과가 크지 않고 오히려 코드를 더 복잡하고 파악하기 어렵게 만든 실패 경험도 있음. 욕심내지 않고 단순함을 유지하는 게 더 나은 경우도 있었음. 이를 계기로 코드를 짤 때 항상 이게 정말 유지보수를 쉽게 만들고 더 단순하게 만드는 건지 더 고려하게 됨.

(문제) 건강검진 관련 데이터 구조가 복잡하고 방대해, 개발 중 백엔드 api 인터페이스 변경으로 프론트엔드에서 지속적으로 인터페이스 변경 여부를 체크하고 수정해야 했음. (해결) 백엔드팀에 협조를 구해 swagger에서 json을 받아 api.d.ts 파일을 생성하는 codegen 스크립트 사용. 이 인터페이스를 원천으로 삼아 프론트엔드는 파생 인터페이스를 만들거나 확장 타입을 만듦. 프론트엔드의 유연함을 챙기는 동시에 백엔드 - 프론트엔드 모두 단일한 인터페이스를 보도록 함. (성과) 기준으로 작용해 백엔드 - 프론트엔드 간 api 커뮤니케이션이 더 원활해짐. 프론트엔드에서 단독으로 만든 인터페이스가 없기에 휴먼 에러를 막고 불필요한 타입 디버깅에서 벗어나 개발 환경이 개선됨. 코딩 에이전트에 api 인터페이스를 제공할 수 있어, 단순한 신규 api 연동과 유지보수를 자동화하기에 용이했음. (레슨 런) 인터페이스를 기반으로 동작하는 시스템에 대한 이해 향상. 백엔드 인터페이스를 기반으로 데이터 페칭 모듈의 타입을 커스텀하고 프론트엔드 인터페이스를 파생시키며 타잶 추출, 유틸리티 타입을 다루며 타입 재사용 역량이 강화됨.

(문제) 다국어 지원으로 한국어 외 영어, 베트남어 번역이 변경, 추가될 때마다 수정 작업이 피로했고, 실수로 인해 누락도 잦았음. (해결) 번역 구글 스프레드시트에서 데이터를 csv 형태로 불러와 key-value 형식의 json을 생성하는 자동화 스크립트 작성. (성과) 개발자가 직접 번역을 수정하러 코드 베이스를 헤메는 수고를 덜고, 중복된 번역 키를 자동으로 제거하고 누락된 번역 내용을 감지하는 기능으로 개발자 - 번역 담당자 간 작업 흐름이 수월해짐. (레슨 런) 개발 비용 대비 생산성 향상 효과가 커서 만족스러웠음. 이를 계기로 자동화 스크립트를 더 많이 작성해서 비슷한 작업을 자동화하고 있음.

환자는 웹뷰 환경에서 문진을 작성하고, 병원이 웹으로 결과를 확인, 인쇄할 수 있는 서비스

(문제) 국가 표준 양식 및 디자인을 준수해야 하는 요구사항이 있었음. 리액트로 UI를 구현했을 때 많은 시간이 들어서 표준 양식이 바뀔 때마다 유지보수 비용이 많이 들었음. 문진표 디자인 관련된 병원의 클레임도 잦았음. (해결) 환자가 제출한 내용이 자동 기입되는 양식을 만드는 문진표 웹 에디터 개발. 팀에 건의하고 핵심 로직이 담긴 프로토타입을 시연한 뒤 개발 진행하게 됨. 스캔 이미지에 canvas api로 좌표를 찍고 pdf 라이브러리를 사용해서 acroform이 내장된 pdf 양식을 생성함과 동시에 문항과 제출 내용 타입이 unique key-value 형식을 가지는 인터페이스를 정의. (트러블슈팅) 체크박스 border를 투명하게 해야 하는데 사용한 pdf 라이브러리에 기능이 없었음. 구현 코드를 보니 인터페이스에는 정의되지 않았지만, undefined를 할당하면 투명하게 만들 수 있는 것을 발견한 경험. (성과) 모바일 폼과 양식 pdf가 같은 인터페이스를 사용할 수 있어 개발 효율 향상. 신규 문진표 추가 및 기존 문진표 유지보수 속도가 2배 이상 단축됨. 잘못된 문항을 매핑하는 휴먼 에러 원천 차단. (레슨 런) 언뜻 복잡해 보이는 데이터도 인터페이스로 추상화해서 다루면 한층 단순하게 만들 수 있고, 정적 분석을 십분 활용하면 휴먼 에러를 줄이는 데 탁월하다는 점을 몸소 체험하게 됨.

next.js 기반으로 다양한 웹뷰 서비스 A to Z 개발

사용자의 진료, 처방, 건강검진 내역을 모아볼 수 있는 서비스 출시

디자인 시스템을 토대로 웹뷰 공용 컴포넌트 개발

LCP 개선으로 유저 이탈율 방어 [7.8초 -> 1.4초]

android와 ios에서 호출하는 웹뷰가 가진 차이에 대한 이해

연속 혈당 측정기를 연동하고 혈당 데이터에 인사이트를 제공하는 서비스 출시

UX를 위해 단순 그래프 대신 상호작용이 가능한 그래프 개발을 제안

혈당 데이터 요청 및 파싱 로직을 모듈화로 회사별 측정기 대응이 가능해 추가 개발 비용 절감

기존 명령형 브릿지 코드를 타입 안전한 선언형 API로 재설계. iOS/Android 플랫폼 차이를 추상화해 비즈니스 로직에서는 플랫폼 분기를 제거하고 단일 인터페이스로 호출 가능하게 개선.

쇼핑, 결제, CS 등 샵 관련 모든 페이지 개발

결제 플로우 및 주문 관리 시스템 개발

고객 서비스 페이지 및 문의 처리 시스템 구축

결제 결과 수신과 후처리 요청을 위해 Next.js 라우트 핸들러를 활용해 서버 로직 개발

영업 이익 증대 및 커머스 도메인 이해 향상

WebSocket을 이용한 실시간 채팅 클라이언트 개발

혈당, 강의 진도율, 식사, 운동 등 유저가 앱에 기록한 정보를 조회할 수 있는 어드민 페이지 개발

사용자 건강 데이터 시각화 및 분석 대시보드 구현

강의 진도율 추적 및 학습 현황 모니터링 시스템 개발

식사 및 운동 기록 관리 및 통계 기능 제공

강북구 보건소에 납품, 서울대병원 협약 체결 등 영업 이익 증대에 기여

CMS 공용 컴포넌트 개발

포인트샵 카테고리, 상품 관리자 페이지 개발

주문 현황, 배송, 취소-환불 및 CS 등 물류 플로우 관련 관리자 페이지 개발

SSR을 활용해 데이터 조회 페이지 로드 속도 개선 [3초 -> 1초]