프론트엔드
모바일 UI, 웹과는 다르다
두줄요약
모바일 UI는 웹과 달라 입력 방식, 화면 높이, 스크롤, 접근성까지 함께 고려해야 했습니다. Safe Area, dvh, rem, Bottom Sheet 등 모바일에 맞는 구조와 상태 설계가 중요했습니다.
핵심 내용
- 모바일 UI는 웹의 축소판이 아니라 입력 방식, 레이아웃, 화면 높이, 스크롤, 접근성까지 함께 고려해야 하는 별도 환경
- hover 대신 active 중심 상태 설계, 체크박스와 라벨의 클릭 영역 확장, Bottom Sheet 활용 등 모바일 UX에 맞는 구성 필요
- Safe Area, dvh, iOS 관성 스크롤, rem 변환 함수, 고정 높이 대신 유연한 레이아웃으로 모바일 대응
적용해볼 점
- 모바일에서는 터치 정확도와 손가락 접근성을 기준으로 인터랙션 영역 재설계
- 화면 높이와 스크롤 처리에서 브라우저 UI 변화를 반영하는 단위와 속성 검토
- 디자인 토큰과 접근성을 고려한 상대 단위 및 유연한 레이아웃 적용