[사이드프로젝트][DeskFlow] 캔버스 기반 웹앱 모바일 반응형으로 뜯어고치며 겪은 터치 이벤트 삽질기

안녕하세요. 퇴근 후 밤마다 사이드 프로젝트를 깎고 있는 로켓다람쥐입니다.

제가 만들고 있는 데스크 셋업 시뮬레이터(DeskFlow)가 그동안 데스크톱 전용이었습니다. 좌우로 패널이 고정된 3단 레이아웃이라, 폰으로 접속하면 가운데 캔버스 영역이 아예 찌그러져서 아무것도 할 수 없는 상태였죠.

이번 연휴를 빌려 모바일에서도 쾌적하게 캔버스를 만질 수 있도록 v1.1.8 업데이트를 진행하면서 겪은 소소한 프론트엔드 삽질기를 공유해 봅니다.

1. 레이아웃 분리 (650px 기준) 처음엔 CSS로 패널 width만 폰에 맞게 줄여보려고 했는데, 가로폭 375px 모바일 기기에서는 답이 안 나오더군요. 결국 650px를 기준으로 레이아웃 트리를 완전히 분리했습니다. 장비 라이브러리는 좌측 햄버거 메뉴(Drawer)로 빼고, 케이블 쇼핑 리스트는 우측 상단 장바구니 아이콘을 누르면 올라오는 바텀 시트(Bottom Sheet)로 숨겨서 모바일에서는 캔버스가 화면 100%를 쓰도록 만들었습니다.

2. 터치 이벤트 삽질 1: 줌인/아웃 튕김 현상 마우스 휠 대신 모바일에서는 두 손가락 핀치(Pinch) 줌을 구현해야 했습니다. 그런데 두 손가락으로 줌을 당기는 순간 캔버스가 화면 밖으로 미친 듯이 날아가 버리는 버그가 터졌습니다. 원인을 찾아보니, 두 손가락이 화면에 닿아서 움직일 때 각각의 손가락이 별개의 'Pan(화면 이동)' 이벤트를 트리거하고 있더라고요. 즉, 줌 배율을 계산하는 동시에 캔버스 XY 좌표도 이중으로 움직이면서 튀어버린 겁니다. 터치 배열 길이를 체크해서 손가락이 2개 이상(touches.length > 1)일 때는 아예 Pan 이동 로직을 return 시켜버리는 식으로 해결했습니다.

3. 터치 이벤트 삽질 2: 탭 먹통 현상 모바일에서 장비 노드를 터치해도 아무 반응이 없었습니다. 데스크톱 환경에서는 드래그 시 텍스트 블록 지정 등을 막기 위해 최상단에 이벤트를 전역으로 빨아들이는 투명 레이어를 깔아뒀었는데, 모바일에서는 이 녀석이 터치 이벤트를 모조리 흡수해버리고 있었습니다. 모바일 접속을 감지하면 이 레이어 렌더링을 끄고, 노드 자체에 터치/드래그 이벤트가 온전히 꽂히도록 수정했습니다.

이렇게 우여곡절 끝에 1손가락 패닝, 2손가락 줌, 노드 터치 및 드래그가 모바일에서도 자연스럽게 돌아가게 되었습니다. 데스크톱으로 보실 땐 예전과 똑같고, 모바일로 접속하시면 바뀐 UI를 보실 수 있습니다.

혹시 마트나 전자상가 가셔서 새 장비 구성 짜보실 때 폰으로 접속해서 가볍게 써보시면 좋을 것 같습니다!

하기 네이버 블로그와 인스타 글에 데모 영상 있으니 사용하기 전에 보시는 것도 추천드립니다 🙂

앱 링크: deskflow.vercel.app

네이버 블로그 링크 : https://blog.naver.com/hjinha2/224271889181

인스타 링크 : https://www.instagram.com/reel/DXy_MUvK_sJ/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA==

캔버스나 WebGL 기반으로 모바일 터치 대응해 보신 분들은 이런 이벤트 충돌 났을 때 보통 어떻게 우아하게 해결하시는지 궁금하네요. 조언이나 피드백은 언제든 환영합니다!