모바일 UX는 이렇게 설계합니다 — 엄지 중심 설계

왜 데스크톱이 아니라 모바일부터 그리나요?

이유는 단순합니다. 우리가 만드는 중소기업 사이트에 들어오는 사람 대부분이 폰으로 들어오기 때문입니다. 검색에서 누른 사람, 지도에서 넘어온 사람, 인스타 프로필 링크를 누른 사람 — 거의 다 한 손에 폰을 쥔 상태입니다. 그런데도 큰 모니터 기준으로 먼저 디자인하면, 정작 다수인 모바일 사용자가 '줄여서 욱여넣은' 화면을 보게 됩니다. 글자가 작아지고, 버튼이 붙고, 3단 메뉴가 깨집니다.

그래서 우리 UX 파트는 순서를 뒤집습니다. 가장 좁은 화면에서 "한 손으로 끝까지 갈 수 있는가"를 먼저 풀고, 그게 되면 넓은 화면에는 여백과 정보를 '더합니다'. 빼는 설계가 아니라 더하는 설계입니다. 이 모바일 우선 원칙은 디자인 단계만이 아니라 화면 구조 전체에 적용하는데, 그 전체 절차는 우리 UX 설계 방법에 정리해 두었습니다.

'엄지존'이 정확히 뭔가요?

한 손으로 폰을 쥐고 화면을 조작할 때, 엄지가 무리 없이 닿는 영역과 억지로 뻗어야 닿는 영역이 갈립니다. 편하게 닿는 곳은 보통 화면 아래쪽과 가운데, 멀어서 손을 고쳐 쥐어야 하는 곳은 위쪽 모서리입니다. 우리는 이 차이를 설계의 기준으로 씁니다.

그래서 자주 누르는 버튼(다음·전화·메뉴)은 닿기 쉬운 아래쪽에 두고, 잘 안 누르거나 실수하면 곤란한 것(닫기·삭제)은 위쪽이나 떨어진 곳에 둡니다. 화면 위쪽에는 '읽는 것'(제목·이미지)을, 아래쪽에는 '누르는 것'을 배치하는 식입니다. 손이 가야 할 거리를 줄이는 것만으로도 사용자는 덜 피곤하고 덜 실수합니다.

버튼은 얼마나 커야 하고, 왜 그런가요?

우리는 탭 가능한 요소를 최소 44×44px, 권장 48px 이상으로 잡고, 버튼 사이를 최소 8px 띄웁니다. 마우스 포인터는 1픽셀짜리 점이지만, 손가락 끝은 그보다 훨씬 넓은 면적으로 화면을 누릅니다. 작은 글자 링크를 다닥다닥 붙여 놓으면 옆 버튼이 같이 눌리는 오탭이 납니다.

특히 결제·문의 전송처럼 되돌리기 어려운 버튼은 더 크게, 다른 요소와 떨어뜨려 둡니다. 반대로 '취소' 옆에 '삭제'를 딱 붙여 두는 배치는 피합니다. 버튼 크기는 미감의 문제가 아니라 오작동률의 문제라서, 우리는 디자인이 예뻐 보여도 이 기준은 양보하지 않습니다.

핵심 버튼을 화면 아래에 고정하는 이유는요?

중소기업 사이트의 목적은 대개 하나로 모입니다 — 전화하거나, 문의를 남기게 하는 것. 그런데 이 버튼이 페이지 맨 위나 맨 아래에만 있으면, 사용자는 마음이 동한 순간에 버튼을 찾아 헤매야 합니다. 그사이 마음이 식습니다.

그래서 우리는 핵심 행동 버튼을 화면 하단에 고정(sticky)합니다. 사용자가 소개를 읽든 사진을 보든 후기를 내리든, 다음 행동 버튼은 늘 엄지 거리 안에 떠 있습니다. 다만 본문을 가리지 않게 높이를 낮게 잡고, 입력창에 키보드가 뜰 때는 겹치지 않도록 처리합니다. '언제든 한 번에 연결'이 목표입니다.

모바일에서 입력은 어떻게 줄이나요?

작은 화면에서 작은 키보드로 타자를 치는 일은, 사용자가 가장 쉽게 포기하는 지점입니다. 그래서 우리의 첫 원칙은 "안 받아도 되는 건 안 받는다"입니다. 문의는 이름과 연락처 두 칸이면 시작되게 하고, 나머지는 선택으로 둡니다.

받아야 하는 칸은 타자를 덜 치게 돕습니다. 전화번호 칸에서는 숫자 키패드가 뜨고(inputmode·type), 이메일 칸에서는 @가 있는 이메일 키보드가 뜨고, 브라우저 자동완성을 켭니다. 선택지가 정해진 항목은 타자 대신 라디오·드롭다운으로 받습니다. 단계가 길면 한 화면에 다 몰지 않고 짧게 나눠, '거의 다 왔다'는 느낌을 줍니다. 폼 설계의 세부는 전환을 만드는 폼 UX에서 더 다룹니다.

느린 네트워크와 가로·세로는 어떻게 챙기나요?

방문자는 책상 앞 광랜이 아니라, 이동 중 LTE나 약한 와이파이에 있을 때가 많습니다. 그래서 우리는 느린 회선을 기준으로 잡습니다. 이미지는 화면 크기에 맞게 줄여 내보내고(WebP·반응형 이미지), 화면 밖 이미지는 보일 때 불러오고(지연 로딩), 첫 화면에 필요한 것만 먼저 그립니다. 본문 글자는 폰트가 다 받아지기 전에도 바로 보이게 해, 느린 회선에서 빈 화면을 보는 시간을 줄입니다.

방향도 챙깁니다. 대부분 세로로 보지만 동영상·표·지도는 가로로 보는 사람이 있어, 가로로 돌려도 레이아웃이 깨지지 않게 설계합니다. 또 노치·홈바가 있는 기기에서 고정 버튼이 가려지지 않도록 안전 영역(safe-area)을 비워 둡니다. 이런 모바일 기준은 디자인이 끝난 뒤 손보는 게 아니라, 처음부터 홈페이지 제작 설계에 넣어야 비용과 일관성에서 유리합니다.

그래서 데스크톱과 무엇이 가장 다른가요?

데스크톱은 화면이 넓고 마우스가 정확하고 회선이 빠릅니다. 정보를 펼쳐 놓아도 사용자가 눈으로 훑고 정확히 클릭합니다. 모바일은 정반대입니다 — 화면이 좁고, 손가락은 둔하고, 회선은 흔들리고, 사용자는 걸으면서 한 손으로 봅니다. 그래서 데스크톱에서 통하던 '많이 보여주고 알아서 고르게 하는' 방식이 모바일에서는 곧장 이탈로 이어집니다.

우리가 모바일에서 지키는 한 문장은 이것입니다 — "읽기 쉽게, 누르기 쉽게, 다음 행동을 한 번에." 이 원칙을 어떻게 팀 전체가 공유하는지는 우리는 이렇게 합니다에서 볼 수 있고, 지금 사이트가 모바일에서 얼마나 쉽게 연결되는지 궁금하다면 무료 진단으로 확인해 드립니다.

제가 한 손으로 폰을 쥐고 시안을 점검할 때 따라가는 엄지 동선은 이렇습니다. 엄지가 닿는 순서대로 화면을 쌓습니다.

그리고 손가락이 화면 위에서 멈칫하는 자리는 정해져 있습니다. 어디가 닿기 어렵고, 그걸 무엇으로 푸는지 정리해 두었습니다.

이 두 장이 모바일 설계의 출발점입니다. 데스크톱을 줄이는 게 아니라, 엄지가 멈추지 않는 길부터 그립니다.