휴대전화 화면 위의 카운터

현대 모바일 기기의 물리적 제약은 웹 배치가 어떻게 굴러가고 요소들이 어떻게 서로 작용하는지를 근본적으로 바꿉니다. 넓은 데스크톱 모니터에서 완벽히 균형 잡혀 보이는 배치 요소가, 스마트폰 화면의 좁은 테두리 안에 밀어 넣어지면 쉽게 심각한 구조 문제를 일으킬 수 있습니다.

크기가 고정된 외부 그림을 넣는 것은 본디 유연하고 흐르는 환경에 뻣뻣한 덩이를 들여놓는 일입니다.

그 덩이가 마침 쓸 수 있는 화면 너비보다 넓으면 배치 경계를 깨뜨립니다. 그러면 웹페이지 전체가 가로로 스크롤되고, 그 효과는 글 읽기를 몹시 성가시게 만듭니다.

페이지를 옆으로 미끄러지게 하는 막대

모바일 기기에서 어긋난 그림의 가장 흔한 증상은 브라우저 창 아래에 갑자기 나타나는 가로 스크롤 막대입니다. 너비가 고정된 그림이 줄어들기를 거부하면, 브라우저는 유리 화면의 물리적 가장자리 너머로 가상의 화폭을 넓혀 그것을 받아 줍니다.

독자가 글을 아래로 스크롤하려 하면 글이 끊임없이 좌우로 흔들립니다. 그 불안정이 읽기를 망치고 망가진, 어설픈 웹사이트라는 인상을 줍니다.

그것을 피하려면 고른 디자인의 최대 너비가 오래된 스마트폰 화면의 표준 너비보다 넉넉히 작아야 합니다. 카탈로그에서 작은 디자인을 고르면 뜻하지 않은 배치 확장의 위험이 완전히 사라집니다.

읽기에 너무 작은 숫자

또 하나의 중요한 문제는 그림에 확대하지 않고는 알아볼 수 없을 만큼 작은 글자나 숫자가 들어 있을 때 생깁니다. 데스크톱 모니터는 작은 글꼴을 편안히 읽게 해 주지만, 팔 길이만큼 떨어져 든 휴대전화 화면은 더 크고 또렷한 글자를 요구합니다.

그림 속 숫자가 보통의 모바일 크기에서 읽히지 않으면 그 요소는 목적을 통째로 잃습니다. 정보를 주는 도구에서 뜻 없는 픽셀 덩어리로 바뀝니다.

장식 테두리나 배경 그림보다 크고 대비 높은 숫자를 앞세우는 디자인을 고르는 것이 꼭 필요합니다. 숫자 값은 손가락으로 벌려 확대하지 않고도 한눈에 알아볼 수 있어야 합니다.

좁은 화면에서 어디에 놓이는가

모바일에 맞추어 다듬을 때는 요소의 자리도 다른 접근이 필요합니다. 앞서 이야기했듯 좁은 화면에서 옆칸은 대개 페이지 맨 아래로 밀려나 주된 내용 밑에 쌓입니다.

그러니 사이드바에 놓인 요소는 결국 바닥글에 놓인 요소 바로 옆에 놓입니다. 두 영역 다 뻣뻣한 그림이나 넓은 글 덩이를 담고 있으면, 그렇게 쌓인 배치에서 서로 부딪히고 어색하게 겹칠 수 있습니다.

바닥글 안에서 깔끔하게 가운데 맞춤을 하는 것이 대개 가장 튼튼한 해법입니다. 요소를 가운데 두면 화면 양쪽 가장자리에서 같은 거리를 지켜, 어떤 화면 방향에도 흠 없이 맞는 균형 잡히고 조화로운 모습이 됩니다.