류기현

터치 의도를 즉시 판정하지 않는 지연 평가 설계

데스크톱에서는 마우스와 키보드로 줌과 측정을 구분할 수 있었지만, 태블릿에서는 줌·측정·정밀측정이 모두 한 손가락 터치였습니다. 터치 시작만으로는 사용자의 의도를 알 수 없었습니다.

→ 터치 시작 시 의도를 즉시 결정하지 않고, 후속 이벤트에서 홀드 시간(800ms)·이동량·터치 수를 기준으로 의도를 판별하는 상태 흐름을 설계했습니다.

✓ 단일 터치 입력에서도 줌·측정·정밀측정 의도를 높은 정확도로 구분하여 오작동을 줄였습니다.

여러 기능 레이어가 공유하는 상태를 '트랜잭션'처럼 관리

줌 레이어와 측정 레이어가 같은 pointer 이벤트를 동시에 수신하는 구조에서, 한쪽이 활성인 동안 다른 쪽이 반응하면 화면이 의도치 않게 움직이거나 측정이 끊기는 문제가 있었습니다.

→ 5개 상태(Ruler, Zoom, PreciseMeasurement, ButtonDragging, RulerOff)를 갖는 Ref 기반 공유 제어 상태를 도입하고, 줌·측정 레이어 양쪽이 이 상태를 읽어 자기 동작의 실행 여부를 결정하도록 전환했습니다. 드래그처럼 짧은 행동은 진입 시 이전 상태를 저장하고 종료 시 복원하는 트랜잭션 방식으로 분리했습니다.

✓ 여러 인터랙션 레이어가 같은 이벤트를 두고 경쟁하는 환경에서도, 각 행동이 서로를 침범하지 않는 구조를 만들었습니다.

플랫폼별 인터랙션 정책을 분리한 드래그 훅 설계

태블릿 특성 상 드래그 가능한 요소가 늘어나면서, 드래그 자체의 메커니즘과 '드래그 중 다른 인터랙션을 어떻게 제어할 것인가'라는 플랫폼별(데스크톱·태블릿) 로직이 뒤섞일 수 있었습니다.

→ 드래그 메커니즘만 다루는 base 훅과, 모바일 고유 로직(상태 전환, 드래그 가능 여부 판단)을 주입하는 mobile 래퍼로 분리했습니다.

✓ 데스크톱 환경에서는 base 훅을 그대로, 태블릿에서는 mobile 래퍼를 통해 동일한 드래그 요소를 다른 인터랙션 정책으로 동작시킬 수 있는 구조를 만들었습니다.

팀의 문제 정의와 해결방안 제시

디자인 시스템의 Modal 컴포넌트를 변경할 때, 12개 프로덕트에 퍼져 있는 사용처의 영향 범위를 파악하기 어려웠습니다.

→ 레포별 소스를 자동 수집하고, 모달 사용처를 분석하여 커스텀 유형·위험도·진입 난이도를 분류하는 파이프라인과 대시보드를 구축했습니다.

✓ 변경 전 영향 범위를 한눈에 파악할 수 있게 되어, 리뷰와 셀프 QA에 활용할 수 있는 기반을 마련했습니다.

AI의 일관된 분석을 위한 프롬프트 설계

LLM에게 '모달을 찾아달라'고만 지시하면 레포마다 추출 기준이 달라지고, useModal 훅을 래핑한 커스텀 훅(useAlert, useConfirm 등)을 통한 간접 사용은 누락되기 쉬웠습니다.

→ 15개 필드 스키마, useModal 훅 체인 추적 규칙, 위험도·진입 난이도 분류 기준을 정의한 분석 프롬프트를 설계하고, 첫 레포 결과를 품질 체크리스트로 검증한 뒤 나머지에 적용했습니다.

✓ 12개 레포에서 일관된 기준으로 모달 사용처를 추출할 수 있었고, confidence 필드로 불확실한 항목을 별도 관리하는 구조를 만들었습니다.