휴대폰 화면을 따로 설계한다는 말, 무엇이 달라지나요

「PC로 볼 땐 괜찮은데, 휴대폰으로 열면 글씨가 너무 작아요.」 홈페이지를 오래 쓰신 대표님들이 자주 하시는 말입니다. 요즘은 회사 홈페이지를 휴대폰으로 처음 여는 손님이 많습니다. 웹와이즈 홈페이지 제작 기준에는 「휴대폰 화면은 따로」라는 줄이 있습니다. 이 말이 실제로 무엇을 뜻하는지 쉽게 풀어 봤습니다.

줄여서 보여 주는 것과 따로 설계하는 것

PC 화면을 그대로 줄인 휴대폰 화면과 따로 설계한 휴대폰 화면 · 화면은 예시

PC 화면을 그대로 줄이면 글씨가 작아지고, 가로로 나란히 있던 칸이 좁게 눌립니다. 손가락으로 확대해야 읽을 수 있는 화면이 됩니다.

따로 설계한다는 것은 휴대폰에서 무엇을 먼저 보여 줄지, 어떤 순서로 내려가게 할지, 무엇을 누르게 할지를 휴대폰 화면 기준으로 다시 정한다는 뜻입니다.

엄지가 닿는 자리

한 손으로 잡았을 때 엄지가 편하게 닿는 자리

휴대폰은 대부분 한 손으로 잡고 엄지로 누릅니다. 화면 아래쪽은 엄지가 편하게 닿고, 위쪽 구석은 손을 고쳐 잡아야 닿습니다. 그래서 전화 · 상담 같은 버튼은 엄지가 닿는 자리에 둡니다. 버튼 크기도 손가락으로 누르기 쉬운 크기로 잡습니다.

순서를 다시 정합니다

PC에서는 왼쪽과 오른쪽에 나란히 둘 수 있던 것이, 휴대폰에서는 위아래 한 줄로 서야 합니다. 이때 무엇을 위에 둘지가 중요합니다. 병원이라면 진료시간과 위치, 카페라면 메뉴와 공간처럼 손님이 먼저 찾는 것을 위로 올립니다.

휴대폰에서만 보이는 것, 빼는 것

휴대폰 화면을 설계할 때 따로 보는 네 가지

휴대폰 화면에서는 아래에 따라다니는 상담 버튼처럼 휴대폰에서만 보이는 것을 넣기도 하고, PC에서는 좋았지만 휴대폰에서는 길기만 한 것을 줄이기도 합니다. 그림은 압축해서 데이터를 덜 쓰고 빨리 열리게 합니다.

웹와이즈는 첫 화면 시안을 보여 드릴 때부터 PC 판과 휴대폰 판을 함께 보여 드립니다. 지금 홈페이지를 휴대폰으로 한 번 열어 보시고, 불편한 곳이 보이면 알려 주세요.