그동안 주로 웹 환경에서 퍼블리싱 업무를 진행해 왔습니다. 반응형 웹 작업 경험은 있었지만 모바일 환경에서 본격적으로 UI를 구성하고 동작을 구현한 것은 이번이 처음이었습니다. 처음에는 모바일도 결국 웹 기술 기반이기 때문에 기존 방식과 크게 다르지 않을 것이라고 생각했습니다. 하지만 실제로 작업을 진행하면서 모바일은 단순히 화면 크기가 작은 웹이 아니라는 점을 여러 측면에서 체감하게 되었습니다.
모바일 환경에서는 레이아웃 구조뿐만 아니라 사용자 입력 방식, 화면 높이 계산 방식, 스크롤 처리 방식, 접근성 대응 방식 등 다양한 요소들이 함께 고려되어야 했습니다. 특히 웹에서 자연스럽게 사용하던 방식들이 모바일에서는 그대로 적용되지 않는 경우가 많아 새로운 기준을 계속해서 학습하는 과정이었습니다.
모바일에서 가장 먼저 체감한 차이는 사용자 입력 방식이었습니다. 웹 환경에서는 마우스를 기반으로 하기 때문에 hover 상태를 활용한 인터랙션이 매우 일반적입니다.
.button:hover{
background-color: #f5f5f5;
}hover 상태는 사용자가 요소 위에 마우스를 올렸을 때 시각적인 피드백을 제공하는 방식으로, 데스크톱 UI에서는 중요한 인터랙션 요소 중 하나입니다. 하지만 모바일 환경에서는 마우스 자체가 존재하지 않으며 모든 입력이 터치를 기반으로 이루어집니다. 이로 인해 hover 상태는 모바일에서 사실상 동작하지 않거나 제한적으로만 동작하게 됩니다. 따라서 모바일에서는 hover 중심의 인터랙션이 아니라 active 상태나 선택 상태 중심으로 UI를 구성하는 방식이 일반적입니다.
.button:active{
background-color: #f5f5f5;
}이러한 차이를 통해 동일한 UI라도 입력 방식에 따라 상태 설계가 완전히 달라질 수 있다는 점을 확인할 수 있었습니다. 단순히 스타일을 변경하는 수준이 아니라, 사용자 행동 자체를 기준으로 UI 상태를 다시 정의해야 한다는 점이 중요했습니다.
체크박스와 라디오 버튼에서도 유사한 차이를 경험할 수 있었습니다. 웹 환경에서는 작은 컨트롤 요소를 직접 클릭하는 방식으로도 충분히 사용이 가능하지만, 모바일에서는 터치 정확도가 중요한 요소로 작용합니다. 모바일에서는 손가락으로 조작하기 때문에 클릭 가능한 영역이 충분하지 않으면 사용성이 급격히 떨어질 수 있습니다. 특히 체크박스처럼 작은 UI 요소만 클릭 가능하게 되어 있을 경우 오작동 가능성이 높아집니다. 이러한 문제를 해결하기 위해 체크박스와 라벨을 하나의 클릭 영역으로 구성하는 방식이 사용됩니다.
<FormControlLabel
control={<Checkbox />}
label="자동 로그인"
/>이 구조는 체크박스뿐 아니라 텍스트 영역까지 함께 선택 가능하게 만들어 터치 영역을 확장하는 효과가 있습니다. 결과적으로 사용자는 더 넓은 영역을 통해 동일한 동작을 수행할 수 있으며, UI 정확도와 사용성이 함께 향상됩니다.
모바일 UI를 다루면서 Bottom Sheet 구조도 중요한 패턴 중 하나였습니다. Bottom Sheet는 화면 하단에서 위로 올라오는 형태의 패널 UI로, 모바일 환경에서 자주 사용되는 인터페이스입니다.
웹에서는 일반적으로 중앙에 표시되는 Modal을 많이 사용하지만 모바일에서는 화면 하단이 손가락 접근성이 가장 좋은 영역으로 평가됩니다. 이러한 이유로 옵션 선택, 필터, 입력 폼, 파일 업로드 등의 기능은 Bottom Sheet 형태로 제공되는 경우가 많습니다.
또한 Bottom Sheet는 전체 화면 전환 없이 기능을 제공할 수 있기 때문에 사용자가 현재 맥락을 유지한 상태에서 추가 동작을 수행할 수 있다는 장점이 있습니다. 이는 모바일 UX에서 매우 중요한 요소로 작용합니다.
<반장노트 프로젝트에서 사용 중인 Bottom Sheet 이미지>
레이아웃 구현 과정에서는 Safe Area 개념도 중요한 요소로 작용했습니다. 최근 모바일 기기들은 화면 전체를 사용하는 형태가 일반적이며, 이에 따라 상단과 하단에 물리적인 UI 영역이 존재합니다.
상단에는 카메라 및 센서가 위치한 노치(Notch) 영역이 있으며, 하단에는 홈 제스처를 위한 홈 인디케이터(Home Indicator)가 존재합니다. 이 영역들은 콘텐츠가 직접 침범해서는 안 되는 영역으로 분류됩니다.
따라서 모바일 UI에서는 Safe Area를 고려한 여백 처리가 필수적으로 필요합니다.
.mobile-layout{
padding-top: var(--safe-area-top);
}Safe Area를 고려하지 않을 경우 콘텐츠가 기기 UI와 겹쳐 가독성이 떨어지거나 일부 내용이 가려지는 문제가 발생할 수 있습니다. 특히 iOS 환경에서는 이 영향이 더욱 명확하게 나타납니다.
화면 높이를 처리하는 방식 역시 웹과 모바일에서 중요한 차이 중 하나였습니다.
웹에서는 일반적으로 다음과 같은 방식으로 전체 화면 높이를 구성합니다.
html,
body,
#root{
height: 100%; // 또는 height: 100vh;
}height: 100%는 부모 요소의 높이를 기준으로 계산되는 방식이며, 100vh는 뷰포트(Viewport) 높이를 기준으로 계산됩니다. 뷰포트란 사용자가 현재 보고 있는 화면 영역을 의미합니다. 즉, 화면에 실제로 보이는 영역의 기준이 됩니다. 하지만 모바일 환경에서는 주소창, 하단 바 등이 동적으로 나타났다 사라지면서 실제 사용 가능한 화면 높이가 지속적으로 변합니다. 이로 인해 100vh가 실제 화면과 정확하게 일치하지 않는 문제가 발생할 수 있습니다. 이 문제를 해결하기 위해 현재는 dvh(Dynamic Viewport Height) 단위를 사용하는 방식이 일반적입니다.
html,
body,
#root{
height: 100dvh;
}dvh는 브라우저 UI 변화까지 반영하여 실제 사용 가능한 화면 높이를 기준으로 계산되기 때문에 모바일 환경에서 보다 안정적인 레이아웃 구성이 가능합니다. 특히 스크롤이 포함된 레이아웃에서는 레이아웃 흔들림을 줄이는 데 중요한 역할을 합니다.
스크롤 동작 또한 모바일 환경에서는 중요한 요소 중 하나였습니다.
.mobile-content{
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}특히 -webkit-overflow-scrolling: touch는 iOS 환경에서 관성 스크롤을 적용하기 위한 속성입니다. 이 설정이 적용되면 사용자가 빠르게 스크롤한 후 손을 떼더라도 자연스럽게 스크롤이 이어지는 효과가 발생합니다. 네이티브 앱에서 느껴지는 스크롤 경험과 유사한 동작을 웹 환경에서도 구현하기 위한 중요한 설정입니다. 모바일 UX에서 스크롤의 부드러움은 사용 경험에 직접적인 영향을 주기 때문에 단순한 스타일 속성 이상의 의미를 갖습니다.
폰트 단위 역시 모바일 환경을 고려하면서 구조적으로 변경된 부분입니다. 초기에는 디자인 토큰이 정의된 대로 코드에서도 폰트를 px 단위로 정의했었습니다.
$fz-10: 10px;
$fz-11: 11px;
$fz-12: 12px;
…px는 직관적이고 사용하기 쉬운 단위이지만 절대 단위입니다. 모바일 환경에서는 접근성 설정에 따라 사용자의 글자 크기가 변경될 수 있기 때문에 상대 단위를 사용하는 것이 더 적합합니다.
프로젝트에서는 디자인 토큰에 정의된 다양한 폰트 사이즈를 일관되게 rem으로 변환하여 사용할 수 있도록 유틸 함수를 구성하였습니다.
// rem 변환 함수 정의(Base size: 16px 기준)
@function rem($px) {
@return math.div($px, 16px) * 1rem;
}
$fz-10: rem(10px);
$fz-11: rem(11px);
$fz-12: rem(12px);
$fz-13: rem(13px);
…단순한 단위 변환이 아니라 디자인 토큰 기반 스타일 시스템에서 일관성을 유지하기 위한 구조적인 접근입니다.
장점은 다음과 같습니다.
첫째, 디자인 토큰을 px 기준으로 유지하면서도 실제 코드에서는 rem 단위로 통일된 사용이 가능합니다.
둘째, 단위 변환 로직이 하나의 함수로 집중되어 유지보수성이 향상됩니다.
셋째, 실수로 잘못된 단위 계산을 직접 작성하는 문제를 줄일 수 있습니다.
넷째, 향후 접근성 설정이나 기준 폰트 변경에도 유연하게 대응할 수 있습니다.
레이아웃 구성 방식에서도 중요한 변화가 있었습니다.
웹에서는 카드나 리스트 요소의 높이를 고정값으로 설정하는 경우가 많습니다.
.card{
height: 120px;
}하지만 모바일 환경에서는 사용자 설정에 따라 폰트 크기나 콘텐츠 길이가 달라질 수 있습니다. 고정된 높이는 텍스트가 잘리거나 레이아웃이 깨지는 원인이 될 수 있습니다. 따라서 모바일에서는 높이를 고정하는 대신 padding과 콘텐츠 흐름을 기반으로 자연스럽게 확장되는 구조가 더 적합합니다.
.card{
padding: 16px;
}이 방식은 다양한 화면 크기와 콘텐츠 변화에 더 유연하게 대응할 수 있으며 유지보수 측면에서도 안정적인 구조를 제공합니다.
이번 모바일 퍼블리싱 경험을 통해 가장 크게 느낀 점은 모바일 환경이 단순히 웹의 축소판이 아니라는 점이었습니다. 입력 방식, 레이아웃 구조, 화면 높이 계산 방식, 스크롤 동작, 접근성 대응 방식 등 여러 요소가 함께 고려되어야 하며, 각각의 요소가 사용자 경험에 직접적인 영향을 미친다는 점을 확인할 수 있었습니다.
앞으로도 다양한 디바이스 환경을 고려하여 보다 안정적이고 일관된 UI를 구현할 수 있도록 경험을 확장해 나가고자 합니다.
KKAMJJING