Board

의뢰받은 사이트를 점검할 때, 화면 폭만 확인하고 넘어가기 쉬운 부분이 있습니다. 최근에 자주 걸린 것 세 가지만 적어 둡니다.

1. 가장 긴 단어
좁은 화면에서 제목이 화면을 뚫고 나가는 경우는 대부분 긴 영문 단어나 URL 때문입니다. overflow-wrap: break-word 한 줄로 대부분 해결됩니다.

2. 표와 이미지의 최소 폭
표는 모바일에서 가로 스크롤이 생기는 게 정상이지만, 컨테이너에 overflow-x: auto가 없으면 페이지 전체가 밀립니다. 이미지는 max-width: 100%만으로는 부족하고 height: auto를 함께 줘야 비율이 유지됩니다.

3. 터치 영역
버튼을 40px로 잡아도 실제로 눌리는 영역이 좁은 경우가 많습니다. 아이콘만 있는 버튼은 최소 44px, 서로 붙은 버튼은 사이 간격 8px을 기준으로 보고 있습니다.

검수할 때는 실제 기기 폭(360px, 390px, 768px)에서 한 번씩 열어 보는 것이 가장 빠릅니다.