FRONT-END인핸드플러스
B2B2C 헬스케어, 2022.06 ~ 2025.11, 프론트엔드
담당자가 참여자를 관리하고 싶게 만들기
웹뷰 초기 진입의 다중 API 왕복을 BFF로 집약하고 정적 영역을 SSG로 전환해 화면 로딩(LCP) 8초 → 1.7초(78%) 단축
- 8초 → 1.7초
- 첫 화면 (78% 단축)
- 4회 → 1회
- 진입 시 API 왕복
- Poor → Good
- 구글이 정한 웹 성능 기준 통과 (LCP 등급)
이 구조가 만들던 사업적 문제
대학병원 임상시험 담당자 한 명이 참여자 100~200명의 복약 순응도를 관리합니다. 참여자 목록과 투약 기록을 하루에도 여러 번 오가야 하는데 화면 하나 여는 데 8초가 걸렸습니다. 바쁜 담당자는 매번 기다리느니 확인을 미뤘고, 도구를 다시 열지 않으면서 리텐션이 떨어졌습니다. 열지 않는 도구는 고객에게 아무 가치도 만들지 못합니다.
바꿔서 가능해진 것
참여자를 확인할 때마다 붙던 대기가 사라져, 담당자가 100명이 넘는 목록을 끊김 없이 훑을 수 있게 됐습니다. 미루지 않고 바로 확인하는 도구가 되면서 리텐션이 떨어지던 원인 자체가 없어졌고, 브리지 문제로 로그인이 막히던 경로도 함께 사라졌습니다.
해결한 방법 더보기
원인
토큰이 sessionStorage와 URL에 있어 JS 실행이 끝나야 첫 요청이 나갈 수 있었습니다. 그 뒤로도 인증, 사용자, 목록, 상세를 순차로 네 번 왕복했고, 응답에는 화면이 쓰지 않는 필드까지 실려 왔습니다. 왕복마다 붙는 지연이 그대로 쌓이는 구조였습니다.
해결
왕복 네 번을 BFF 한 번으로 묶고, 응답 필드를 화면이 쓰는 것만 남기도록 다시 정의했습니다. 정적인 영역은 빌드 때 만들어 CDN에서 즉시 내보내고, 토큰을 httpOnly 쿠키로 옮겨 JS 실행을 기다리지 않고 첫 요청이 나가게 했습니다.
로그인 보고서 대시보드 참여자 목록 투약 기록 추가
트리피누
B2C 여행, 2021.05 ~ 2022.04, 프론트엔드
적은 인력으로 더 많은 화면을 내놓기
220개국 여행지 검색과 경로 시각화, 예약, 결제, 환불 시스템 개발, 디자인 시스템 구축
- 220개국
- 여행지 검색과 경로 시각화
- 3개월
- 디자인 시스템을 다시 세운 리팩토링
- 예약 → 결제 → 환불
- 거래 흐름 전 구간
이 구조가 만들던 사업적 문제
내놓아야 할 화면은 계속 늘어나는데 제작 시간과 인력은 부족했습니다. 입사 시점에 디자인 시스템이 이미 무너져 스타일이 여기저기 오염돼 있었고, 화면 하나를 새로 만들 때마다 같은 요소를 다시 그리고 어긋난 스타일을 찾아다녀야 했습니다. 변화에 유연하게 대응하지 못하는 코드는 곧 내놓을 수 있는 제품의 수를 줄입니다.
바꿔서 가능해진 것
3개월 계획을 잡고 오염된 스타일을 걷어내 디자인 시스템을 다시 세웠습니다. 같은 요소를 매번 만들지 않게 되면서 화면을 붙이는 속도를 되찾았고, 부족한 인력으로도 220개국 경로 시각화와 예약, 결제, 환불까지 이어지는 흐름을 만들 수 있었습니다. 서비스는 이 기간에 투자 유치와 수상으로 이어졌습니다.
해결한 방법 더보기
원인
디자인 시스템이 무너진 채로 기능이 먼저 붙으면서 스타일이 컴포넌트마다 제각기 오염됐습니다. 공통 요소를 믿고 쓸 수 없으니 화면마다 다시 만들었고, 한 곳을 고치면 다른 화면이 어긋나 손댈 수 있는 범위가 계속 좁아졌습니다.
해결
3개월 계획을 세워 오염된 스타일을 걷어내고 공통 컴포넌트와 스타일 기준을 다시 정의했습니다. 화면은 그 위에 조립하는 방식으로 바꿔, 이후 기능은 새로 그리지 않고 붙일 수 있게 했습니다.
경로 시각화 - 일자별 동선을 지도에 그리고 구간 거리를 함께 표시 
메인 - 기획전 배너와 자유여행 상품 목록 
장소 상세 - 지도를 벗어나지 않고 여는 장소 정보 
상품 상세 - 일정, 모집 인원, 금액과 예약 진입 
예약, 결제 - 예약자 정보 입력과 약관 동의