모바일 화면에서 레이아웃이 깨질 때

모바일 화면에서만 문제가 생기면, 반응형 디자인 설정부터 이벤트 처리까지 확인해야 할 게 많다. 하지만 작은 이상 신호도 빨리 분리해서 보면 문제를 빠르게 찾을 수 있다.

운영 중에는 사소한 레이아웃 버그도 사용자에게 큰 불편을 준다. 그래서 작은 신호도 빠르게 감지하고 기록해두는 게 중요하다.

프론트엔드 빌드 후 실제로 확인해보기

코드는 맞는데 화면이 깨져 보일 수 있다. 먼저 빌드를 다시 해서 최신 코드가 반영됐는지 확인한다.

npm run build
# 브라우저에서 모바일 폭으로 창을 줄여서 확인한다

브라우저 개발자 도구의 반응형 디자인 모드로 모바일 화면을 시뮬레이션할 수 있다. 실제 모바일 기기와는 다를 수 있으니 나중에는 실제 폰에서도 확인해야 한다.

이벤트 흐름이 모바일에서 다를 수 있다

데스크톱에서는 잘 동작하지만 모바일에서 이벤트가 다르게 작동할 수 있다. 특히 터치와 클릭의 차이, 키보드 입력 방식 등이 다르다.

• 터치 이벤트와 마우스 이벤트
• 가상 키보드가 뜨면서 뷰포트 높이 변화
• 모바일 브라우저의 자동 줌

정상 상태와 비정상 상태 비교하기

정상 상태가 뭔지 미리 정해두면 디버깅이 훨씬 쉽다. 어느 정도까지는 정상인지, 어디부터 비정상인지 기준을 정한다.

• 정상: 모바일에서 텍스트가 한 줄씩 보임
• 비정상: 텍스트가 밀려서 화면 밖으로 나감

이 기준을 정해두고 각 수정마다 확인한다.

작은 스타일 변경부터 시작하기

한 번에 여러 css를 바꾸면 어느 것이 원인인지 알 수 없다. 항상 한 가지 스타일만 수정한다.

1. 한 가지 css 속성 수정
2. npm run build
3. 브라우저에서 모바일 폭으로 확인
4. 결과를 기록

이 과정을 반복하면서 정상적인 상태에 가까워진다. 남겨진 기록이 있으면 다음에 비슷한 버그가 생겼을 때 훨씬 빠르게 처리할 수 있다.