같은 웹인데, PC로 볼 때랑 폰으로 볼 때 뭔가 달라 보이지 않나요?
로고도 콘텐츠도 똑같은데, PC에서는 메뉴가 위에 쭉 펼쳐져 있고 폰에서는 아래에 있기도 하고 어딘가에 숨어 있기도 해요. 한 줄에 네 개씩 나란히 놓여 있던 박스가 두 개로 줄어 있고요.
비슷한데, 분명 다른 화면이죠. 같은 서비스인데 왜 굳이 다르게 만들었을까요?
그 이유를 따라가다 보면 모바일 UX가 보이기 시작해요.
PC화면을 작게 만들면 모바일이 되는 걸까?
PC 화면은 가로로 넓어요. 그래서 메뉴를 옆으로 쭉 늘어놓고, 본문 옆에 사이드바를 두고, 박스를 한 줄에 네 개씩 보여줄 수 있어요.
이걸 폰 크기 그대로 줄이면 어떻게 될까요?
글씨는 읽기 힘들 만큼 작아지고, 눌러야 할 버튼은 손가락보다 작아져요. 그래서 원하는 버튼을 못 누르기도 하고, 버튼 두 개를 한 번에 누르기도 하겠죠. 배치는 그대론데 크기만 줄어든 거예요.
그래서 나온 게 반응형 웹이에요.
화면 너비에 맞춰 배치를 바꿔주는 방식이죠. 한 줄에 세 개였던 박스는 두 개가 되고, 옆에 있던 사이드바는 본문 아래로 내려가요.
상단에 가로로 펼쳐져 있던 메뉴는 ‘≡’아이콘 하나로 바껴요. 빵 사이에 패티가 끼어 있는 모양 같다고 해서 ‘햄버거 메뉴’라고 불러요.
여기서 눈여겨볼 건, 크기만 줄어드는 게 아니라 구조 자체가 다시 짜인다는 거예요.
화면이 달라지면 무엇을 먼저 보여줄지, 어떻게 묶을지도 달라져야 하니까요.
그럼 아예 처음부터 작은 화면을 기준으로 만들면 더 쉽지 않았을까요?
작은 화면이 알려주는 우선순위
모바일 UX를 이야기할 때 빠지지 않는 말이 모바일 퍼스트(Mobile First)예요.
보통은 이렇게 생각해요. 모바일이 작으니까, 모바일 화면부터 만든다는 건가?
순서만 보면 맞는 말이에요. 그런데 진짜 핵심은 고르는 일에 있어요.
작은 화면에는 다 담을 수가 없어서, 이 서비스에서 진짜 중요한 게 뭔지 먼저 골라야 하거든요. 그렇게 핵심만 남긴 다음에, 화면이 넓어지면 하나씩 추가하는 거예요.
요즘 서비스들은 이런 식으로 모바일을 기준으로 접근하는 경우가 많아요. 그렇다고 PC를 버리는 건 아니에요.
인스타그램은 폰으로 사진을 찍고 바로 올리는 서비스로 시작했어요. 만약 PC 화면을 먼저 만들고 그걸 줄였다면 어땠을까요? 지금의 인스타그램과는 꽤 다른 모습이었을지도 몰라요.
폰에서 인스타그램을 사용할 때를 떠올려 봐요. 사진을 두 번 톡톡 쳐서 좋아요를 누르고, 위로 쓱 넘겨서 다음 릴스를 봐요. 이런 동작은 마우스가 아니라 손가락이 있어서 가능한 거예요.
클릭과 터치는 다르게 사용한다
PC에서는 마우스 커서로 화면 속 작은 텍스트 하나까지 정확히 콕 누를 수 있어요.
반면 손가락 끝은 뭉툭해서, 누르는 순간 내가 누른 곳이 손가락에 가려져요.
그래서 모바일 UX는 커서가 아니라 손가락을 기준으로 설계해요.
애플은 44pt, 구글의 머티리얼 디자인은 48dp 정도를 권장해요. 눈에 보이는 아이콘이 작더라도, 눌리는 영역은 그만큼 넉넉해야 해요.
또 하나, 모바일에는 ‘마우스를 올린다’는 동작이 없어요. PC에서는 메뉴에 커서만 올려도 하위 메뉴가 펼쳐지지만(mouse over 또는 hover), 폰에서는 올려둘 곳이 없으니 눌러서 열거나 아예 다른 방식으로 바뀌어요.
그리고 엄지가 있어요.
폰을 한 손으로 쥐면 엄지가 편하게 닿는 곳은 화면 아래쪽이에요.
위쪽 모서리는 손을 쭉 뻗어야 닿고요. 그래서 토스나 배민 같은 앱을 보면 주요 메뉴는 화면 하단 탭에 있고, 중요한 버튼도 아래쪽에 고정돼 있어요.
메뉴가 화면 맨 위에 있는 PC와는 정반대죠.
같은 서비스, 다른 화면, 다른 경험
마우스로 화면을 보는 사람과, 검지나 엄지로 빠르게 스크롤을 내리는 사람. 같은 서비스를 쓰고 있어도 화면 앞의 상황은 이렇게 달라요.
그래서 모바일 웹은 PC 웹을 작게 만든 게 아니에요. 다른 사람이, 다른 손으로, 다른 순간에 쓰는 화면이니까요.
다음에 폰으로 어떤 웹에 들어가게 된다면, 같은 서비스의 다른 화면을 찾아보세요. 그 차이 속에 모바일 UX가 있어요.
written by 디자이너이솔
