홈페이지 디자인, 왜 휴대폰 화면부터 그릴까요?

시안 미팅에서 큰 모니터 화면 대신 휴대폰을 먼저 건네 드리면 다들 조금 놀라세요. 그런데 손님 대부분이 처음 만나는 우리 홈페이지는 바로 그 손바닥만 한 화면입니다.

홈페이지를 의뢰하시는 분들은 대개 PC 화면을 떠올리며 이야기를 시작하십니다. 넓은 화면에 큰 사진, 여러 칸으로 나뉜 메뉴. 그런데 막상 손님이 우리 홈페이지를 처음 여는 곳은 버스 안, 점심시간, 소파 위의 휴대폰인 경우가 훨씬 많아요. 그래서 한걸음은 시안을 휴대폰 화면부터 그립니다.

1. 좁은 화면은 "무엇이 가장 중요한가"를 묻습니다

PC 화면은 넓어서 이것저것 다 넣어도 그럭저럭 자리가 납니다. 휴대폰은 다릅니다. 첫 화면에 들어가는 건 한 문장, 사진 한 장, 버튼 하나 정도예요. 휴대폰 화면부터 그리면 자연스럽게 우선순위를 정하는 대화가 시작됩니다. "손님이 이 페이지에서 딱 하나만 알고 간다면 무엇이어야 할까요?"

이 질문에 답이 정해지면 PC 화면은 오히려 쉬워집니다. 정해진 순서를 넓은 공간에 여유 있게 펼치기만 하면 되니까요. 반대로 PC부터 그리고 휴대폰으로 줄이면, 넣어 둔 것들을 억지로 쌓아 올리느라 길고 복잡한 화면이 되기 쉽습니다.

2. 검색엔진도 휴대폰 화면을 기준으로 봅니다

구글은 사이트를 색인하고 순위를 매길 때 모바일 버전의 내용을 기준으로 삼습니다. 이를 모바일 우선 색인이라고 해요. PC 화면에만 있고 휴대폰 화면에서는 빠진 글이나 정보는 검색에서도 제대로 평가받기 어렵다는 뜻입니다. 휴대폰 화면에서 내용을 숨기거나 줄일 때는 꼭 필요한 정보까지 빠지지 않았는지 확인해야 합니다.

3. 손가락은 마우스보다 크고, 엄지는 아래에 있습니다

마우스 커서는 아주 작은 글자 링크도 정확히 누를 수 있지만 손가락은 그렇지 않습니다. 휴대폰 화면에서는 버튼을 충분히 크게, 버튼 사이 간격도 넉넉하게 잡아야 해요. 한 손으로 휴대폰을 쥐었을 때 엄지가 편하게 닿는 곳은 화면 아래쪽이라서, 전화 걸기나 문의 같은 자주 쓰는 버튼은 아래쪽에 두는 편이 좋습니다. 버튼 크기 이야기는 문의 버튼 글에서 더 자세히 다뤘어요.

4. 사진은 "잘려도 괜찮은" 사진을 고릅니다

PC에서는 가로로 긴 사진이 시원해 보이지만, 같은 사진을 휴대폰에 넣으면 양옆이 잘리거나 아주 작아집니다. 그래서 대표 사진을 고를 때는 가운데에 핵심이 모여 있는 사진을 우선합니다. 꼭 써야 하는 가로 사진이 있다면 휴대폰용으로 따로 잘라 둔 사진을 준비해요.

5. 시안을 받으면 이렇게 확인해 보세요

• 시안을 휴대폰으로 직접 열어 보세요. PC 모니터로 축소해 보는 것과는 느낌이 전혀 다릅니다.
• 첫 화면만 보고 "어떤 곳인지, 무엇을 하면 되는지" 알 수 있는지 주변 사람에게 물어보세요.
• 한 손으로 쥔 채 엄지로 주요 버튼을 눌러 보세요.
• 글을 읽으려고 화면을 확대해야 하는 곳이 있는지 살펴보세요.

CHECKLIST오늘 바로 점검해 보세요

• 휴대폰 첫 화면에 핵심 문장과 버튼이 함께 보이나요?
• PC에만 있고 휴대폰에서는 빠진 정보가 없나요?
• 엄지로 누르기 편한 크기와 위치에 버튼이 있나요?
• 대표 사진이 휴대폰에서 잘려도 내용이 전달되나요?
• 글을 읽기 위해 화면을 확대할 필요가 없나요?