모바일에서는 왜 정보 우선순위를 다시 정해야 할까? 반응형 설계 기준

모바일에서는 화면이 한 줄로 세로로 쌓이기 때문에, 데스크톱에서 나란히 보이던 정보가 모두 앞뒤 순서를 갖게 돼요. 그래서 무엇을 먼저 보여 줄지 다시 정하지 않으면, 중요한 정보가 스크롤 아래로 밀려나요. 화면을 줄이는 게 아니라 순서를 정하는 일이에요.

반응형 작업을 하다 보면 "데스크톱 시안을 모바일 폭에 맞게 줄여 주세요"라는 요청을 자주 받아요. 그런데 줄이기만 하면 이상하게 쓰기 불편한 화면이 나와요. 왜 그런지, 어떻게 다시 정하는지 정리해 볼게요.

---

모바일에서는 무엇이 달라지나요?

왜 나란히 있던 게 순서가 되나요?

데스크톱은 가로로 넓어서 본문 옆에 사이드바, 상품 사진 옆에 가격과 구매 버튼을 나란히 둘 수 있어요. 사용자는 한눈에 여러 영역을 같이 봐요.

모바일은 보통 한 열이에요. 나란히 있던 영역이 위에서 아래로 한 줄로 쌓여요. 그러면 원래는 동등했던 정보에 1등, 2등, 3등이 생겨요. 아래로 갈수록 보는 사람이 줄어드니까 순서가 곧 중요도가 돼요.

데스크톱                     모바일
┌─────────┬──────┐          ┌─────────┐
│  본문   │사이드│          │  본문   │
│         │ 바   │    →     ├─────────┤
└─────────┴──────┘          │ 사이드바 │  ← 맨 아래로
                            └─────────┘

사이드바에 둔 정보는 모바일에서 사실상 본문을 다 읽은 사람만 보게 돼요.

손가락으로 누르면 무엇이 달라지나요?

마우스는 작은 링크도 정확히 누를 수 있지만 손가락은 아니에요. 애플은 터치 영역을 최소 44×44pt로, 구글 머티리얼 디자인은 48×48dp로 권장해요. 버튼이 커지면 한 화면에 들어가는 개수가 줄어요. 그래서 모든 기능을 다 보여 줄 수 없고, 고를 수밖에 없어요.

모바일에는 마우스를 올리는 동작(hover)도 없어요. 데스크톱에서 마우스를 올리면 나오던 설명이나 하위 메뉴는 모바일에서 다른 방법으로 보여 줘야 해요.

쓰는 상황도 다른가요?

네. 모바일은 이동 중에, 짧게, 한 손으로 쓰는 경우가 많아요. 자세히 비교하기보다 지금 필요한 한 가지를 빨리 찾으려고 해요. 같은 사이트라도 데스크톱 방문자와 모바일 방문자가 원하는 게 다를 수 있어요.

---

모바일 정보 우선순위는 어떻게 다시 정하나요?

저는 이 순서로 정해요.

1. 이 화면에서 사용자가 할 일 하나를 정해요. 글 페이지면 '읽기', 상품 페이지면 '사기'예요.
2. 그 일에 꼭 필요한 정보만 위로 올려요. 상품 페이지라면 사진, 이름, 가격, 구매 버튼이에요.
3. 나머지는 아래로 내리거나 접어 둬요. 상세 스펙, 리뷰 전체, 관련 상품은 펼치기나 탭으로 넣어요.
4. 아예 빼도 되는 건 빼요. 모바일에서 아무도 안 누르는 기능이면 데스크톱에만 둬요.

내용을 숨기면 안 좋은 거 아닌가요?

숨기는 것과 접어 두는 건 달라요. 펼치기나 탭으로 찾을 수 있게 남겨 두는 건 괜찮아요. 문제는 모바일에서 아예 볼 방법이 없게 지워 버리는 거예요. 사용자는 모바일에서도 같은 정보를 기대하고, 구글도 모바일 화면을 기준으로 페이지를 평가해요.

처리 방법	언제 쓰나요	예
위로 올리기	이 화면의 핵심 행동에 꼭 필요할 때	가격, 구매 버튼
아래로 내리기	필요하지만 먼저 볼 필요는 없을 때	관련 글, 작성자 소개
접어 두기	일부만 찾는 자세한 정보일 때	상세 스펙, 배송 안내
고정하기	스크롤해도 늘 필요할 때	하단 구매 버튼 바
빼기	모바일에서 거의 안 쓰일 때	복잡한 비교표 편집 기능

---

그럼 처음부터 모바일로 디자인하면 되나요?

그게 모바일 퍼스트(Mobile First) 라는 방법이에요. 루크 로블르스키(Luke Wroblewski)가 2009년 무렵부터 이야기했고, 2011년 같은 이름의 책으로 정리했어요. 작은 화면부터 그리면 처음부터 우선순위를 정할 수밖에 없어서, 데스크톱 화면도 덩달아 깔끔해진다는 생각이에요.

실무에서는 데스크톱 시안이 먼저 나오는 경우가 여전히 많아요. 그럴 때는 데스크톱 시안을 받자마자 "이 화면을 한 줄로 세우면 무엇이 1번인가?" 를 먼저 물어보는 것만으로도 모바일 작업이 훨씬 쉬워져요. 이 블로그도 글 목록 카드의 썸네일 위치와 크기를 몇 번 바꿨어요. 이럴 때 "모바일에서 제목이 먼저 읽히나?"를 기준으로 삼으면 고민이 훨씬 짧아져요.

---

자주 묻는 질문

---

정리