모바일은 줄인 화면이 아니라,
다시 정한 순서입니다

결론부터 말씀드리면 — 휴대폰 화면은 컴퓨터 화면을 줄인 것이 아니라 순서를 다시 정한 것입니다. 넓은 화면에서 나란히 놓였던 것들이 세로 한 줄로 쌓이는 순간, 무엇이 먼저 보이고 무엇이 한참 아래로 밀리는지가 새로 정해집니다. 그래서 리뉴얼의 우선순위는 컴퓨터가 아니라 휴대폰에서 먼저 무너지는 자리부터 잡는 편이 맞습니다.

시안은 컴퓨터로 보고, 사이트는 휴대폰으로 열립니다

사이트를 만드는 동안 대표님이 보는 화면은 대개 컴퓨터입니다. 시안도 넓은 화면으로 받고, 회의에서도 큰 모니터에 띄워 봅니다. 그 화면에서 문제가 없으면 사이트는 완성된 것처럼 보입니다.

그런데 사이트 주소가 실제로 전달되는 길을 떠올려 보면 사정이 다릅니다. 소개받은 사람에게 카톡으로 보낸 링크, 인스타그램 프로필의 링크, 메일 서명, 명함의 QR. 처음 온 사람은 이 길을 따라 들어오고, 그 길의 상당수는 휴대폰에서 끝납니다. 대표님이 가장 오래 본 화면과 처음 온 사람이 가장 먼저 보는 화면이 다를 수 있다는 뜻입니다.

휴대폰에서도 사이트는 깨지지 않고 열립니다. 요즘 제작 방식이라면 화면 크기에 맞춰 알아서 줄어듭니다. 문제는 깨지는 것이 아니라 순서가 바뀐다는 데 있습니다.

나란히 있던 것이, 한 줄로 쌓일 때

나란히 놓은 비교. 컴퓨터에서는 세 가지 상품이나 세 가지 서비스가 한 줄에 나란히 보입니다. 방문자는 눈을 좌우로 움직이며 한 번에 비교합니다. 휴대폰에서는 이 셋이 위아래로 쌓입니다. 세 번째를 볼 때쯤 첫 번째의 조건은 화면 밖에 있고, 비교는 기억력 싸움이 됩니다. 결정 전에 비교가 일어나는 업종일수록 이 자리가 먼저 무너집니다.

표. 가격표, 사양표, 과정표는 넓은 화면을 전제로 짜인 경우가 많습니다. 휴대폰에서는 글자가 작아지거나, 옆으로 밀어야 나머지 칸이 보입니다. 옆으로 밀 수 있다는 사실을 모르는 방문자에게 그 칸들은 없는 것과 같습니다.

첫 화면의 높이. 컴퓨터에서는 큰 사진 옆에 핵심 문장과 버튼이 함께 들어옵니다. 휴대폰에서는 사진이 첫 화면을 다 차지하고, 문장과 버튼은 한 번 내려야 보입니다. 첫 화면에 무엇이 들어오는지는 완성된 시안 한 장은, 마감부터 읽힙니다에서 실제 기기로 확인하는 법을 적었습니다.

화면을 덮는 것들. 아래에 고정된 상담 버튼, 처음 들어오면 뜨는 안내 창, 쿠키 안내 띠. 컴퓨터에서는 구석에 있던 것들이 휴대폰에서는 본문을 가립니다. 닫는 버튼이 작으면 방문자는 내용보다 닫기와 먼저 씨름합니다.

순서를 정하지 않으면, 코드가 정합니다

넓은 화면을 휴대폰에 맞춰 쌓는 순서는 따로 정하지 않으면 화면을 짠 순서를 그대로 따릅니다. 왼쪽에 있던 것이 위로, 오른쪽에 있던 것이 아래로 갑니다. 컴퓨터에서 사진을 왼쪽에, 설명을 오른쪽에 두었다면 휴대폰에서는 사진이 먼저 나옵니다. 그 순서가 방문자에게 맞는지는 아무도 판단하지 않았습니다.

이건 디자인 실력의 문제가 아닙니다. 컴퓨터 화면을 먼저 확정하고 휴대폰은 "알아서 맞춰지는 것"으로 넘기는 작업 순서의 문제입니다. 메인에 무엇을 먼저 둘지 정하는 기준은 메인에 다 넣으면, 아무것도 안 보입니다와 같습니다. 다만 휴대폰에서는 그 기준이 훨씬 빨리, 훨씬 가혹하게 적용됩니다. 한 줄로 쌓이면 두 번째 자리부터는 내려야 보이기 때문입니다.

리뉴얼이라면, 이 순서로 손봅니다

1. 지금 사이트를 휴대폰으로 처음부터 끝까지 내려 봅니다. 대표님 휴대폰 말고, 화면이 작은 다른 사람의 휴대폰이면 더 좋습니다. 카톡에 링크를 보내 그 안에서 열어 보십시오. 처음 온 사람이 실제로 들어오는 길과 같은 조건입니다.
2. 첫 화면에 무엇이 들어오는지 적습니다. 내리지 않은 상태에서 이 회사가 무엇을 하는지, 누구를 위한 곳인지, 어디를 누르면 되는지가 보이는지 확인합니다. 셋 중 빠진 것이 있다면 그게 첫 번째 수정 대상입니다.
3. 비교와 표가 있는 자리를 따로 표시합니다. 가격, 상품 구성, 진행 과정처럼 방문자가 견주어 보는 자리입니다. 휴대폰에서 한 화면 안에 비교가 끝나는지, 옆으로 밀어야 하는 칸이 있는지 봅니다. 끝나지 않는다면 표를 그대로 줄이지 말고, 휴대폰용으로 비교의 축을 하나로 좁혀 다시 짜는 편이 낫습니다.
4. 쌓이는 순서를 직접 정합니다. 사진과 문장, 설명과 버튼이 나란히 있던 자리마다 휴대폰에서 무엇이 먼저 나와야 하는지를 정해 제작 쪽에 전달합니다. 대부분은 판단에 필요한 문장이 먼저이고, 장식에 가까운 사진은 뒤로 가도 됩니다.
5. 화면을 덮는 것을 하나씩 걷어 냅니다. 고정 버튼, 안내 창, 띠 배너가 본문을 얼마나 가리는지 보고, 꼭 필요한 하나만 남깁니다. 휴대폰에서 무엇이 먼저 사람을 잃게 하는지는 사이트가 느릴 때 먼저 잃는 건, 처음 온 사람입니다에도 이어서 적었습니다.

컴퓨터 화면을 버리라는 말은 아닙니다

휴대폰을 먼저 보라는 말이 컴퓨터 화면을 대충 만들라는 뜻은 아닙니다. 고단가 서비스나 B2B라면 처음엔 휴대폰으로 보고, 비교하고 검토하는 단계에서 컴퓨터로 다시 여는 일이 흔합니다. 처음 보는 사람과 결정하는 사람이 다를 수 있다는 이야기는 B2B 사이트에서 방문자는, 결정하는 사람이 아닙니다에 정리했습니다.

그래서 순서는 이렇습니다. 휴대폰에서는 계속 읽을 이유가 먼저 보여야 하고, 컴퓨터에서는 비교하고 확인할 재료가 한눈에 펼쳐져야 합니다. 두 화면의 역할이 다르니, 같은 내용이라도 놓는 순서가 달라지는 게 자연스럽습니다. 한 화면만 보고 확정하면 다른 한쪽은 남는 자리에 끼워 맞춰집니다.

휴대폰으로 열고, 확인해 보세요

지금 사이트 주소를 카톡으로 대표님께 보내고, 그 링크를 눌러 열어 둔 채 답해 보세요.

• 내리지 않은 첫 화면에서 무엇을 하는 곳인지 한 문장으로 말할 수 있는가?
• 첫 화면에서 문의로 가는 버튼이 보이는가?
• 가격·구성·과정을 견주는 자리에서 옆으로 밀어야 보이는 칸이 없는가?
• 고정 버튼이나 안내 창이 본문을 가리지 않는가?
• 사진과 문장이 쌓이는 순서를 누군가 정한 적이 있는가?

마지막 줄에 "모르겠다"고 답하셨다면, 그 순서는 아직 아무도 정하지 않은 것입니다. 리뉴얼 범위를 정하기 전에, 휴대폰에서 각 자리의 순서부터 적어 보세요.