"원래 그런 거야"를

못 견디는

프론트엔드 개발자입니다

누적 다운로드 300만 건, 제휴 렌터카사 600여 개 규모의 렌트카 예약 플랫폼 카모아의 유지보수와 신규 기획 개발을 담당했습니다.

Vanilla JS와 Pug 템플릿으로 운영되던 코드베이스를 React로 점진적으로 전환하는 작업을 맡았습니다. 기본 컴포넌트 10여 개를 시작으로 숙박페스타 필터링, 렌트 상품 할인율 계산까지 커스텀 훅으로 상태를 관리하고 배럴 파일로 진입점을 단일화하는 구조를 일관되게 적용했습니다.

숙박페스타 필터는 이벤트 기간에만 활성화되는 임시 기능이라 언제든 켜고 끌 수 있어야 했습니다. 전용 훅을 분리해 활성화 여부를 플래그 하나로 제어하고, 조건 변경 시 연관 필터 초기화도 훅 내부에서 처리하도록 정리했습니다. 조건이 바뀌어도 외부 코드를 건드리지 않고 훅과 컴포넌트만 교체하면 되는 구조였습니다.

기존 시스템 오류도 여러 건 분석해 수정했습니다. 그 중 하나로, 홈 화면에 표시되는 렌트카 가격이 목록에서 봤던 가격과 달라지는 문제가 있었는데, 홈은 Pug, 목록은 React로 구성돼 있어 각자 다른 로직으로 가격을 계산하고 있었습니다. Pug는 React 상태를 참조할 수 없어 별도 구현이 유지되던 상황에서 비즈니스 정책이 바뀌며 두 화면이 서로 다른 시점의 정책을 참조하게 된 게 원인이었습니다. 현재 정책을 기준으로 Pug 쪽 계산 로직을 맞추는 방식으로 해결했습니다.

영양사 관리 웹이 아예 없는 상태에서 시작했습니다. Remix를 선택하고 아키텍처를 설계해, 1인으로 3개월 만에 10+ 화면을 0→1 구축했습니다. 저칼로리 맞춤 영양소 분석, 환자 식사 기록 뷰어부터 사용자 설문·관리자 기능까지 15+ 화면을 설계·구현했고, 영양사분들이 실제로 쓰는 서비스로 운영됐습니다.

운영 중 가장 큰 병목은 UI 수정마다 앱 스토어 심사를 다시 받아야 한다는 것이었습니다. CodePush를 도입해 네이티브 심사 없이 배포 가능한 구조로 전환했고, 반영 시간을 3일 → 5분, 핫픽스 대응 주기를 주 단위 → 당일로 단축했습니다.

외부 AI 서비스를 자사 AI로 전환하면서 외부 API 의존성을 제거하고 운영 비용을 줄였습니다. React Native 기반 Android/iOS 앱도 설계부터 구축하고 30+ QA 항목을 관리하며 유지보수했습니다.

영양사 관리 웹 필터링이 5초씩 걸리는 문제도 있었습니다. Remix action 함수가 form 내 모든 필드 변경을 일괄 처리하는 구조 탓에 검색 로직이 중복 실행되는 게 원인이었습니다. sessionStorage로 이전 상태를 캐싱해 중복 실행을 차단했고, 2.5초로 단축했습니다.

자식 컴포넌트에서 서버와 직접 통신해야 하는 케이스도 있었습니다. Remix routes에 경량 API 파일을 분리하고 axios로 요청을 라우팅하는 패턴을 정립해, 컴포넌트 구조를 손상시키지 않고 해결했습니다.

앱과 관리 웹을 동시에 개발하며 동일한 컴포넌트가 두 플랫폼에 반복되는 문제도 있었습니다. Storybook을 도입해 버튼, 인풋, 카드 등 핵심 컴포넌트를 독립적으로 개발하고 각 상태(기본·비활성·에러 등)를 Story로 정의했습니다. 디자이너와 UI 기준을 문서로 공유할 수 있게 됐고, 스타일 회귀도 시각적으로 바로 확인할 수 있어 QA 부담이 줄었습니다.

납품마다 유사한 구조를 처음부터 다시 구현하는 비효율을 해소하기 위해 CSV 기반 트리 구조 공통 템플릿을 설계했습니다. CSV 파일에 부모·자식 노드 관계를 정의하면 키오스크 네비게이션 전체에 자동 적용되는 구조로, 고객사별 메뉴 구성이 달라져도 코드 수정 없이 설정만으로 대응 가능하게 해 납품 속도를 약 50% 단축했습니다.

화면 중앙에서 재생되는 AI 휴먼 안내 영상은 네트워크 의존 없이 기기 내부에 저장하고 Blob URL로 로드해, 오프라인 환경의 키오스크에서도 안정적으로 재생되도록 했습니다. 다국어 지원도 CSV에 언어별 텍스트를 정의하면 UI 전체에 즉시 반영되는 구조로, 코드 수정 없이 한국어·영어 전환을 지원했습니다.

고객 시연 현장에서 태블릿이나 스마트폰으로도 동작해야 하는 요구가 있었습니다. 뷰포트 크기에 따라 레이아웃과 터치 인터랙션이 자연스럽게 조정되도록 반응형 처리를 적용해, 별도 기기를 준비하지 않고도 현장에서 실기기 시연이 가능했습니다.

8만 명 이상이 이용하는 플랫폼의 유지보수를 담당하며 여러 구조적 문제를 발견하고 수정했습니다.

추첨 시스템 개편 요청을 받아 백엔드 구조를 함께 분석했습니다. 유저를 외래키로 갖는 별도 테이블에 당첨 횟수가 누적되고, 그 숫자가 높을수록 추첨에서 불리해지는 레거시 정책이 그대로 남아 있었습니다. 반복 구매 사용자일수록 오히려 불이익을 받는 구조였고, 모든 티켓 구매자를 동등한 조건으로 추첨하는 방식으로 재설계하고 프론트엔드 API 연동도 함께 업데이트했습니다.

추첨 명단을 관리자가 백엔드에 수작업으로 입력하던 운영도 바꿨습니다. 엑셀 파일을 업로드하면 데이터를 파싱해 백엔드 서버에 자동 전송하는 기능을 구현해, 이틀씩 소요되던 명단 관리 작업을 한 시간 안에 완료할 수 있게 됐습니다. 야구 플랫폼 관계자로부터 직접 긍정적인 피드백을 받았습니다.

멤버십 코드를 관리자가 직접 입력하고 수동으로 발급하던 구조도 자동화했습니다. 가입 시 코드가 자동 생성·발송되도록 전환해 관리자 개입을 없앴습니다.

아이핀·PASS 인증이 특정 시점부터 실패하는 오류도 있었습니다. 오류 로그와 응답 코드를 분석해 외부 API 측 문제로 범위를 좁혔고, 동작했던 시점과 비교해 협업사 내부 인증서 만료가 원인임을 특정한 뒤 협업사에 직접 이슈를 공유해 해결했습니다.

티켓 사이트 정보와 플랫폼 데이터가 불일치하던 문제와 포인트가 정상 지급되지 않던 로직 오류도 파악해 수정했습니다. 기존 쿠폰 추첨 외 신규 이벤트 참여 시스템 요구사항을 받아 JSP 화면 구현 및 API 연동으로 기능을 출시했습니다.

Google Play 정책 위반으로 앱이 스토어에서 내려간 이슈도 대응했습니다. 개인정보 처리방침 미비가 원인임을 파악하고 수집 항목 명시, UI 접근성 개선, 데이터 보안 설문지 재작성으로 복구했습니다.