류기현

대형 Form과 Filter 구현이 화면마다 반복되었고, 검증/에러 처리 방식이 분산될 수 있었습니다.

→ 사내 디자인 시스템 위에 react-hook-form 래퍼와 제네릭 Form Field 컴포넌트를 설계했습니다.

✓ 폼 구현의 재사용성과 타입 안정성을 높이고, 화면 간 검증/에러 처리 방식의 일관성을 확보했습니다.

대용량 파일 다운로드와 암호화 처리 과정에서 서버 부하와 운영 환경 차이를 고려해야 했습니다.

→ 스트리밍 다운로드 로직을 구현하고, zip 파일 암호화를 클라이언트에서 수행하도록 설계했습니다.

✓ 서버 부하를 일부 클라이언트로 분산하고, 윈도우/맥에서 동작하는 다운로드 흐름을 구현했습니다.

변경이 잦은 개발 환경에서 API 상태에 따라 프론트엔드 개발과 코드 리뷰가 자주 끊길 수 있었습니다.

→ API mocking coverage를 높은 수준으로 유지해 프론트엔드 검증 경로를 확보했습니다.

✓ 백엔드 변경과 무관하게 개발과 코드 리뷰를 이어갈 수 있는 환경을 유지했습니다.

고객용/직원용, 모바일/데스크톱용 인터페이스를 하나의 제품 안에서 함께 관리해야 했습니다.

→ 하나의 레포에서 여러 인터페이스를 관리할 수 있도록 공통 구조와 분리 기준을 설계했습니다.

✓ 제품 변형을 별도 프로젝트로 분리하지 않고도 일관된 개발 구조를 유지할 수 있었습니다.

직원용 기능에는 조직 정보 기반 접근 제어가 필요했고, 별도 조직관리 시스템과의 연동이 요구되었습니다.

→ RBAC를 구현하며 기획/Auth/Backend 팀과 권한 정책 및 조직관리 시스템 연동 방식을 조율했습니다.

✓ 조직 정보 기반 접근 제어가 가능한 직원용 기능 구조를 마련했습니다.

변경 요구사항이 늘어나면서 개발 범위와 일정의 불확실성이 커졌습니다.

→ v1.1 개선 단계에서 요구사항을 개발 단위로 구체화하고 일정 산정에 참여했습니다.

✓ 개선 요구사항을 우선순위와 구현 범위 중심으로 정리할 수 있었습니다.

빠른 모바일 프로토타이핑을 위한 적절한 UI 기반이 필요했습니다.

→ Headless UI 라이브러리를 검토하고 Vaul 기반 Drawer 도입 가능성을 리서치·공유했습니다.

✓ 모바일 UI 프로토타입 제작 속도를 높이고, 동시에 탁월한 Drawer UX를 제공했습니다.

태블릿에서는 모든 입력이 손가락 터치 하나로 시작되어, 점 생성 / 줌 이동 / 정밀 측정의 의도를 시작 시점에 구분할 수 없었습니다.

→ 터치 시작 시 타이머(800ms)와 시작 좌표를 기록하고, 이후 이벤트의 시간·이동량으로 의도를 판별하는 구조를 설계했습니다.

✓ 서로 다른 동작이 간섭하지 않는 터치 기반 측정 경험을 구현했습니다.

d3-zoom이 자체 이벤트 시스템으로 핀치 줌과 팬을 처리하고 있어 커스텀 인터랙션과 충돌이 발생했습니다.

→ d3-zoom filter에 현재 상태를 주입해 커스텀 인터랙션 중에는 d3가 이벤트를 소비하지 않도록 제어했습니다. 또한 정밀 측정 중 d3 View Point가 밀리는 문제를 발견해 측정 후 좌표를 기존 상태로 복원하여 충돌을 해소했습니다.

✓ 줌/팬과 정밀 측정 기능을 동시에 유지하면서도 입력 충돌을 줄였습니다.

사용자가 파형이 아닌 영역을 터치해 오입력이 발생할 수 있었습니다.

→ 파형 근방에만 유효한 터치 범위를 두는 hit testing 로직을 적용했습니다.

✓ 사용자 입력이 의도한 요소에 더 정확히 반응하도록 개선했습니다.

드래그 가능한 측정 요소들이 늘어나면서 동일한 동작 패턴을 여러 곳에서 반복 구현할 위험이 있었습니다.

→ 드래그 라이프사이클을 훅으로 모듈화해 캘리퍼와 버튼 그룹 등 여러 요소가 재사용할 수 있도록 했습니다.

✓ 드래그 처리 방식의 일관성을 높이고 재사용 가능한 인터랙션 패턴을 만들었습니다.