모바일 UI 로 첫 나들이

들어가며

입사 후 계속 웹 화면을 기준으로 디자인을 해왔습니다. 그러다 비젠드 프로젝트에 투입되며 비젠드 디자인 시스템을 기반으로 웹 화면 디자인을 이어갔으며, 1년이 넘는 시간 동안 자연스럽게 웹 중심의 감각이 쌓였습니다. 여백이 얼마나 있어야 숨이 트이는지, 폰트가 몇이어야 읽히는지, 버튼은 어디에 두어야 손이 가는지…

그러다 반장노트 모바일 앱 프로젝트가 새로 시작되며 감사하게도 담당 디자이너로 배정받았습니다. 비젠드 컴포넌트에 익숙해진 채로 모바일 플랫폼을 마주했을 때, 단순히 화면이 작아진 게 아니었습니다. 웹과 모바일, 두 플랫폼을 비교하면서 실제로 이건 다르다 싶었던 순간들을 정리했습니다.

폰트

본격적인 화면 작업 전에 디자인 토큰과 타이포그래피를 먼저 정리했습니다. 웹 작업을 할 때는 본문에 12px도 사용했는데, 반장노트 모바일 작업에서는 라벨·칩을 제외하고 13px을 최소 크기로 잡았습니다.

얼핏 보면 이상합니다. 스마트폰은 눈과의 거리가 30~40cm로 모니터(50~70cm)보다 가깝습니다. 가까이 보면 더 잘 보이는 거 아닐까요?

원칙적으로는 맞습니다. 하지만 모바일에서 텍스트가 더 작아 보이는 이유는 해상도 때문입니다. 모니터의 1px과 스마트폰의 1px은 물리적 크기가 다릅니다. 스마트폰은 화면이 작은데 해상도가 극단적으로 높아서 1px이 실제로 차지하는 면적이 훨씬 작습니다. 즉, px 숫자가 같아도 모바일에서 훨씬 작은 점으로 렌더링됩니다. 이를 보정하기 위해 모바일은 sp(Android), pt(iOS) 단위를 써서 기기 해상도에 맞게 자동으로 스케일링합니다.

가이드라인 기준으로는 iOS Human Interface Guidelines가 최소 17pt, Android Material Design이 최소 12sp를 권장하며, 실무에서는 본문 14~16sp가 가장 많이 쓰입니다. 플랫폼 가이드라인은 최솟값일 뿐, 실제 타깃 연령대가 높다면 기준을 더 올려 잡아야 합니다. 즉, 기준은 누가 읽느냐에서 출발해야 합니다.

Safe Area

웹 화면을 디자인할 때 레이아웃의 기준은 브라우저 뷰포트입니다. 스크롤이나 화면 크기에 따라 달라지지만, 기본적으로 뷰포트 영역 안에 콘텐츠를 배치하면 됩니다.

모바일은 화면이 있다고 하여 그 영역을 전부 쓸 수 있는 게 아닙니다. 노치(Notch), 다이나믹 아일랜드, 상태바, 홈 인디케이터 등 이 영역들은 디자이너가 직접 제어할 수 없는 부분입니다. 시스템이 가지는 공간으로, 여기에 콘텐츠가 올라가면 가려지거나 터치가 되지 않는 문제가 생깁니다. 이처럼 콘텐츠 배치 시 피해야 하는 영역을 Safe Area라고 하며, 모바일 디자인에서는 이를 반드시 고려해야 합니다.

디자이너는 모바일 화면을 디자인할 때 Status Bar, Home Indicator 영역을 미리 확보해야 합니다. 특히 하단 고정 버튼(Fixed Footer)을 설계할 때 홈 인디케이터 영역을 무시하면 실기기에서 버튼이 인디케이터와 겹쳐 보이거나 잘려 사용에 불편함을 줄 수 있습니다. 웹에서는 뷰포트 안에만 넣으면 된다는 감각이 통했지만, 모바일에서는 Safe Area 안에 넣어야 한다로 사고방식을 바꿔야 합니다.

실제 작업에서도 이 부분을 명확하게 규칙으로 잡았습니다. 하단 내비게이션 바가 없는 디테일 페이지의 경우, 하단 Safe Area를 48px로 고정 지정하고 그 위에 콘텐츠와 버튼을 배치하는 것을 기준으로 삼았습니다.

모바일 기기는 제조사와 모델마다 노치 크기, 홈 인디케이터 높이 등 환경이 제각각입니다. 기기에 딱 맞춰 작업하기보다 Safe Area를 여유 있게 잡고 시작하는 것도 다양한 환경에 안전하게 대응하는 방법입니다.

내비게이션 위치

웹에서 GNB(Global Navigation Bar)는 상단에, LNB(Local Navigation Bar)는 왼쪽 사이드바에 위치하는 것이 일반적입니다. 오랫동안 쌓인 패턴이라 사용자들도 당연하게 여깁니다.

하지만 모바일 앱은 다릅니다. 주로 엄지손가락으로 조작하기 때문에 주요 메뉴를 화면 하단에 배치하며, 이를 Bottom Navigation(바텀 내비게이션)이라고 부릅니다. 스마트폰을 한 손으로 쥐었을 때 엄지가 자연스럽게 닿는 영역은 화면 하단입니다. 반대로 상단 모서리는 한 손 조작 시 가장 닿기 어려운 영역입니다.

자주 쓰는 내비게이션을 상단에 두면 사용자는 매번 손을 움직이거나 폰을 고쳐 잡아야 합니다. 이 개념을 Thumb Zone(엄지 존)이라고 하며, 모바일 UX에서는 레이아웃 전반에 영향을 미칩니다. 자주 쓰는 액션은 하단에, 덜 중요한 정보는 상단에 배치하는 것이 일반적입니다. CTA 버튼을 화면 하단에 고정하는 것도 같은 이유입니다. 웹의 상단 중심 내비게이션 패턴을 모바일에 그대로 적용하면 사용성이 떨어집니다. 플랫폼마다 사용자의 물리적 조작 방식이 다르다는 걸 항상 고려해야 합니다.

Hover

웹 화면을 디자인할 때 hover는 필수로 작업해야 하는 요소입니다. 버튼에 마우스를 올리면 색이 바뀌고, 링크에 올리면 밑줄이 생기고, 카드에 올리면 그림자가 진해지는 것처럼, 사용자에게 여기 클릭할 수 있어요를 전달하는 가장 쉬운 방법입니다.

하지만 모바일 환경에는 마우스 커서 자체가 없기 때문에 hover가 존재하지 않습니다. 손가락으로 터치하는 순간 이미 pressed(눌림) 상태로 넘어가며, hover를 거칠 타이밍이 없습니다. 모바일에서는 다른 방식으로 인터랙티브 요소를 표현합니다.

• Pressed 상태: 터치 시 배경색이나 투명도 변화로 피드백

• Ripple 효과(Android): 터치 지점에서 물결이 퍼지는 시각 피드백

• Haptic Feedback: 진동으로 터치를 물리적으로 알려줌

웹에서 hover로 해결하던 것들을 모바일에서는 다른 인터랙션 언어로 번역해야 합니다. 더 나아가 hover 자체가 없는 환경인 만큼, 이게 누를 수 있는 요소라는 것을 UI 자체로 명확하게 보여줘야 합니다. 배경색이나 테두리로 탭 가능한 영역을 시각화하거나, 아이콘만 단독으로 쓰기보다 텍스트 레이블을 함께 배치하는 것도 그 방법 중 하나입니다.

정보의 흐름

웹 화면은 넓습니다. 2단, 3단 레이아웃을 쓰면 한 화면에 꽤 많은 정보를 담을 수 있습니다. 예를 들어 테이블 옆에 디테일 패널을 추가하는 식으로 정보를 옆으로 펼칠 수 있는 구조입니다.

모바일은 세로로 길고 가로가 좁으며, 옆으로 펼칠 공간이 없습니다. 그래서 모바일에서의 정보는 깊이(depth)로 설계됩니다. 목록 화면 → 상세 화면 → 세부 설정 화면처럼, 계층을 따라 안으로 들어가는 구조입니다. 웹에서 한 화면에 다 보여주던 것들이 모바일에서는 2~3단계로 나뉠 수 있습니다.

한 화면에 담을 수 있는 정보의 양이 제한되니, 무엇을 먼저 보여주고 무엇을 숨길지 우선순위 결정이 훨씬 중요해집니다. 웹에서는 어떻게 배치하느냐의 문제였다면, 모바일에서는 무엇을 먼저 보여줄 것이냐가 중요한 문제가 됩니다.

다만 정보를 지나치게 잘게 나누면 depth가 깊어져 오히려 사용자가 현재 위치를 잃기 쉽습니다. 일반적으로 3depth 이내로 설계하는 것을 권장하는 이유도 여기에 있습니다. 정보를 나누되, 사용자가 길을 잃지 않도록 구조를 의심하며 작업하는 것도 모바일 설계의 중요한 감각입니다.

버튼 위치

웹에서는 버튼이 대부분 콘텐츠의 흐름 안에 있습니다. 폼을 작성하고 맨 아래에 제출 버튼이 있거나, 액션이 필요한 영역 타이틀 옆에 수정 버튼이 있습니다. 페이지를 스크롤하면 버튼도 같이 올라가며, 대부분의 버튼을 숨기지 않고 모두 노출합니다.

모바일에서는 이와 다른 패턴이 자주 등장합니다.

• Fixed Footer Button : 화면 최하단에 고정된 CTA 버튼으로, 스크롤과 무관하게 항상 같은 자리에 있습니다. 사용자가 어디를 보고 있든 주요 액션에 바로 접근할 수 있습니다.

• Floating Action Button(FAB) : 화면 위에 떠 있는 원형 버튼입니다. 콘텐츠 위에 겹쳐서 항상 보이는 구조입니다.

이 패턴들은 웹에서도 쓸 수 있지만, 모바일에서 훨씬 자연스럽게 동작합니다. 앞서 말한 Thumb Zone과 연결되는 이유입니다. 하단 고정 버튼은 엄지가 가장 편하게 닿는 위치에 있기 때문입니다.

실제로 작업하면서 이 버튼을 고정할 것이냐, 콘텐츠 흐름 안에 둘 것이냐는 화면마다 반복적으로 고민하게 되는 결정이었습니다. 콘텐츠가 짧으면 고정 버튼이 오히려 어색하고, 스크롤이 길어지면 고정 버튼이 있어야 사용성이 살아납니다. 공고 상세 화면처럼 스크롤이 긴 화면은 하단에 고정하고, 내용이 짧은 화면은 흐름 안에 두는 방식으로 화면마다 다르게 적용했습니다.

한 가지 더 고려한 것은 버튼의 위험도입니다. 공간이 좁거나 실수로 눌렸을 때 문제가 생길 수 있는 버튼은 Thumb Zone에서 의도적으로 멀리 배치하고, 더보기(more) 버튼을 통해 한 단계를 더 거치도록 설계했습니다(오류 방지를 위해).

마무리

지금까지 웹과 모바일의 차이를 하나씩 살펴봤는데, 결국 두 플랫폼은 사고방식 자체가 꽤 달랐습니다. 웹은 공간을 어떻게 배치하느냐의 문제라면, 모바일은 무엇을 선택하느냐의 문제에 가까웠습니다.

플랫폼이 달라지면 사용자의 물리적 조작 방식도, 정보를 소비하는 방식도, 화면을 보는 거리도 달라집니다. 그 차이를 이해하지 않으면 웹에서 잘 통하던 패턴을 그대로 가져다 쓰게 됩니다. 이번 작업을 통해 플랫폼을 바꿀 때는 감각도 함께 바꿔야 한다는 것을 직접 느꼈습니다.

참고 및 출처

eykim