류기현

데스크톱에서는 마우스와 키보드로 확대와 측정을 구분할 수 있었지만, 태블릿에서는 확대, 이동, 측정이 모두 손가락 터치로 시작되었습니다.

손가락이 화면에 닿은 순간 바로 기능을 정하지 않고, 800ms 유지 여부, 이동 거리, 터치 개수를 보고 사용자의 의도를 나중에 판단하도록 했습니다.

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

확대 기능과 측정 기능이 같은 pointer 이벤트를 동시에 받으면서, 한쪽이 동작하는 동안 다른 기능이 끼어들어 화면이 흔들리거나 측정이 끊기는 문제가 있었습니다.

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

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

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

드래그의 기본 동작은 공통 훅으로 분리하고, 태블릿에서 필요한 상태 전환과 실행 조건은 별도 래퍼에서 주입하도록 나눴습니다.

같은 드래그 요소를 데스크톱과 태블릿에서 서로 다른 기준으로 재사용할 수 있게 되었습니다.

기존 버전에서는 컴포넌트마다 스펙 해석과 코드 스타일이 달라서 잦은 마이너 업데이트가 필요했습니다.

개발 규칙을 Git으로 관리해서 AI가 일관된 코드 초안을 생성하는 게 중요하다고 생각했습니다. 파일럿 컴포넌트를 만들며 폴더 구조, 스토리 작성 방식, 테스트 기준, 리뷰 기준을 문서로 정리했습니다.

2명의 개발자가 동일한 수준의 컴포넌트를 작성해냈고, 리뷰가 설계와 사용성 검토에 더 집중될 수 있게 했습니다.

디자인 토큰 변경은 디자인 담당자에게 의존해, 소통 부재 시 실제 디자인과 코드가 불일치할 가능성이 있었습니다.

Git 변경 이력을 바탕으로 토큰의 추가, 수정, 삭제 내역을 Storybook changelog에서 확인할 수 있게하고, 크로스 체크를 협업 프로세스로 정착시켰습니다.

디자인 토큰 변경 내역을 디자이너도 직접 확인할 수 있게 되었고, 디자인과 개발 사이의 소통 비용을 줄였습니다.

프로덕트 단에서 교체해야할 컴포넌트가 산재했고, 리뷰에 오랜 시간이 걸릴 것으로 예상했습니다.

레포별 소스를 자동으로 모으고, 각 사용처를 유형과 위험도에 따라 나누는 대시보드를 만들었습니다.

해당 결과를 코드 리뷰어 뿐만 아니라 디자인 QA에 활용하여 리뷰 시간을 단축하였습니다.