ch04_3_모바일운영체제의 이해

학습목표
- UI구조에대하여알아보자
- 모바일운영체제에따른UI 컴포넌트을알아보자.
- 모바일환경에따른UI 디자인특징을알아보자.

---

UI 구조

UI 구조란 사용자 인터페이스를 구성하는 기본적인 화면 배치(Layout) 체계를 의미한다. 이는 정보의 위계와 시각적 흐름을 결정하는 중요한 요소로, 사용자가 콘텐츠를 쉽게 탐색하고 인식하도록 돕는 설계의 골격이라 할 수 있다. 웹사이트의 UI 구조는 일반적으로 가로형(Horizontal Layout) 과 세로형(Vertical Layout) 으로 구분된다. 이 두 가지 구조는 콘텐츠 배치 방향과 메뉴의 위치에 따라 달라지며, 정보의 성격과 사용자 행동 패턴에 따라 선택된다.

• 웹사이트구조 : 가로형과세로형
  • 가로구조형: header, contents, footer area
    뉴스 포털, 쇼핑몰, 블로그 등 스크롤 중심의 콘텐츠형 웹사이트에서 주로 사용
  • 세로구조형: left:header, right_top:contents, right_bottom:footer
    관리 시스템(Admin Page), 포털 관리자 도구, 기업용 대시보드 등 메뉴 탐색이 빈번한 구조에서 주로 사용

웹사이트 레이아웃

모바일사이트구조

• 모바일 환경에서는 화면 크기가 제한적이므로, 정보의 위계보다는 사용 흐름(Flow)과 조작의 단순성(Simplicity) 이 우선시된다. 따라서 모바일 UI 구조는 상단 내비게이션(Top Navigation) 과 하단 탭바(Tab Bar) 중심으로 설계된다.  
  • Top : navigation
    - 일반적으로 앱 이름, 로고, 검색 아이콘, 설정 버튼 등을 포함
    - 일부 앱에서는 스크롤 시 자동 숨김 기능(Auto-hide)을 적용해 공간 활용을 최적화함
  • Bottom: tab_bar – 핵심메뉴, 기능 등 표시
    - 사용자의 엄지손가락(Tumb Zone)에 맞춘 위치로 접근성과 사용성(Usability) 을 높임

---

모바일UI 디자인패턴

“모바일 애플리케이션이나 시스템을 설계하는 과정에서 자주 발생하는 공통적인 문제를 효율적으로 해결하기 위한 최적의 설계 가이드 또는 템플릿” 을 의미한다.

즉, 사용자 인터페이스를 구축할 때 반복적으로 등장하는 사용성 문제(Usability Issue) 에 대해 이미 검증된 형태의 해결책을 제시하는 ‘재사용 가능한 디자인 솔루션’이다. 디자인 패턴을 활용하면 개발자와 디자이너는 매번 새롭게 화면 구조를 설계할 필요 없이,
표준화된 인터랙션 구조를 기반으로 일관된 사용자 경험을 제공할 수 있다.

UI Component란?

• 사용자를 위한 온스크린인터페이스On-screen Interface를 구성하는 기본단위, 즉 앱의 구성요소를 말한다
• 즉, 앱 화면을 구성하는 시각적·기능적 최소 단위로서, 버튼(Button), 입력창(Input Field), 아이콘(Icon), 슬라이더(Slider), 체크박스(Checkbox), 탭(Tab), 리스트(List) 등과 같은 구성 요소를 말한다.
• UI 컴포넌트는 개별적으로 존재하는 것이 아니라, 디자인 패턴의 구성 요소로 함께 작동한다. 예를 들어, ‘탭 내비게이션 패턴’은 여러 개의 탭 컴포넌트(Tab Component) 로 구성되며, ‘검색 패턴’은 입력창(Input Field) 과 검색 아이콘(Icon) 이 결합된 형태로 구현된다.

---

환경에 맞춘 모바일 UI 디자인

외부환경 : 동적 사용성 고려

• 스마트폰은 사용 환경이 수시로 변하므로 디자인, 색상, 타이포그래피 등을 구성할 때 동적 사용성을 고려
• 밝은 환경, 어두운 환경, 움직이는 환경에서도 잘 인식할 수 있도록 컬러 대비를 일정 이상 유지
• 버튼이나 타이포그래피는 움직이는 환경에서도 잘 사용할 수 있는 크기로 설정

예 : 넷플릭스의 다크 테마 : 사용시간대에 맞춘 모바일 기기 화면

---

iOS와 안드로이드의 차이

모바일 앱 개발 시장은 크게 iOS와 안드로이드 두 플랫폼으로 나뉘며, 각각의 플랫폼은 독특한 개발 환경과 언어, 디자인 가이드라인을 가지고 있으며, 이는 개발자가 앱을 개발할 때 고려해야 할 중요한 요소입니다. iOS와 안드로이드의 UI 디자인은 플랫폼의 철학과 사용자 경험 목표에 따라 많은 차이가 있다.

iOS	안드로이드
Swift와 Objective-C 언어 -Xcode라는 통합 개발 환경(IDE)	Java와 Kotlin 언어를 사용 - Android Studio라는 IDE에서 개발
iOS는 Human Interface Guidelines	Material Design
앱은 일관된 디자인과 직관적인 사용자 경험을 제공	다양한 디바이스 호환성과 유연성을 강조
애플의 앱 스토어를 통해 배포(  엄격한 심사 과정)	구글 플레이 스토어( 다양한 마켓플레이스에 배포할 수 있으며, 심사 과정이 상대적으로 빠름)
	안드로이드는 다양한 디바이스와 호환되어야 하기 때문에, 개발 시 다양한 화면 크기와 해상도를 고려

1. 기본 구조 및 화면 구성

iOS	안드로이드
iOS는 계층적이고 일관된 방식으로 설계되어 있으며, 주로 Bars, Views, Controls로 구성된다.	안드로이드는 계층적 화면 구성을 통해 유연한 구조를 제공하며, 주로 최상위 뷰, 카테고리 뷰, 세부 뷰로 구분된다.
iOS 앱은 화면 상단에 탐색 바를 배치하여 사용자가 앱의 현재 위치를 파악하고 탐색할 수 있게 한다. 또한 탭 바를 사용하여 주요 기능에 빠르게 접근하도록 돕는다.	사용자가 앱을 실행하면 홈 화면이나 콘텐츠가 강조된 최상위 뷰를 먼저 보게 되며, 필요한 경우 카테고리 뷰를 통해 세부 뷰로 이동할 수 있다.

• iOS 앱의 구조 : iOS 앱의 기본 구조는 사용자 경험을 단순하고 직관적으로 제공하기 위해 계층적이고 일관된 방식으로 설계되어 있다. iOS의 UI Component는 크게 세가지로(Bars, Views, Controls) 분류 된다.
  • Bar : 사용자가 현재 앱의 어느 위치에 있는지 알려주고, 탐색 기능을 제공하며, 다른 화면으로 이동하거나 액션을 수행하는 컨트롤을 넣을 수 있다. 
  • Views : 텍스트, 그래픽, 애니메이션, 상호작용 요소와 같이 앱에 표시되는 기본 콘텐츠를 보여준다. 또한 여기에서 아이템을 스크롤하거나 추가, 삭제, 정렬을 할 수 있다.
  • Controls :  사용자가 특정 동작을 수행하도록 돕는 요소로, 버튼, 스위치, 텍스트 필드 등이 있다. 이러한 컨트롤은 사용자가 정보를 입력하거나 설정을 변경할 수 있게 해준다.
    

    

    
    
    
• 안드로이드 앱의 구조
  • 최상위 뷰 : 앱 시작 화면 레이아웃으로, 앱을 시작한 후 사용자가 보는 첫 화면, 콘텐츠 표시에 집중해야 한다.
  • 카테고리 뷰 : 정보계층구조가 있는 앱에서는 카테고리 뷰를 통해 세부 뷰로 이동
  • 세부 뷰 : 세부 뷰에서는 사용자가 데이터를 보거나 사용하고 직접 정의할 수 있다.

2. 탐색과 내비게이션 패턴 : 뒤로가기 버튼의 유무 안드로이드 앱의 구조

iOS	안드로이드
iOS는 고정된 내비게이션 구조를 제공하여 사용자 경험의 일관성을 높인다. 예를 들어, 화면 상단에 내비게이션 바를 배치하고, 하단의 탭 바를 통해 주요 기능에 접근할 수 있다.	안드로이드는 좀 더 자유로운 내비게이션 방식을 제공한다. 사용자는 햄버거 메뉴나 하단 내비게이션 바를 통해 앱 내 다양한 카테고리로 접근할 수 있으며, 안드로이드의 ‘뒤로 가기’ 버튼을 사용하여 쉽게 이전 화면으로 돌아갈 수 있다.
iOS에는 글로벌 내비게이션이 없으므로 화면 왼쪽 상단에 ‘뒤로 가기’ 버튼이 있는 기본 탐색 모음을 둔다.	안드로이드에는 하드웨어 탐색 바 또는 디지털 탐색 바를 이용해 ‘뒤로 가기’ 버튼으로 이전 화면이나 이전 단계로 돌아갈 수 있다
iOS의 휴먼 인터페이스 가이드라인에는 드로어와 비슷한 표준 탐색 컨트롤이 없는 대신 탭 바에 글로벌 내비게이션을 사용할 것을 권장한다	앱에서 자주 사용되는 탐색 패턴 중 하나는 탐색 창과 탭을 결합한 내비게이션 드로어다.
	안드로이드의 머티리얼 디자인에는 하단 내비게이션이라는 구성 요소가 있다.
항상 왼쪽 상단에 뒤로 가기 버튼을 배치하고 중앙에 현재 페이지 위치를 표시하며, 오른쪽에는 편집, 완료 등 제어 옵션 버튼이 배치	왼쪽 상단에 햄버거 메뉴 버튼을 배치하고 현재 페이지 위치를 왼쪽 정렬로 표시하며, 오른쪽에 검색, 즐겨찾기, 더 보기 등 제어 옵션 버튼을 하나 이상 배치

iOS 상단 세그먼트 컨트롤과 하단 탭 바

3. 표준 컨트롤의 차이 : 상호작용의 차이

• 가장 크게 다른 디자인 요소는 라디오 버튼, 체크 박스, 스위치 등의 기본 컨트롤.
• 컨트롤은 iOS와 안드로이드에서 유사하게 보이게 하기 위한 맞춤 구현 과정이 필요.

iOS	안드로이드
사용자가 특정 작업을 수행할 수 있도록 컨트롤(Controls) 요소를 제공하며, 버튼, 스위치, 텍스트 필드 등이 포함된다. 이러한 요소들은 사용자가 쉽게 탐색하고 상호작용할 수 있도록 설계되어 있다.	안드로이드는 다양한 상호작용 요소를 제공하며, 특히 머티리얼 디자인의 Floating Action Button (FAB)을 활용하여 주요 액션을 수행할 수 있도록 한다. 이는 특정 작업을 수행할 때 사용자가 앱의 어디에 있든 접근할 수 있게 해준다

 

• iOS (왼쪽): iOS의 날짜 선택기는 휠(picker) 스타일로 되어 있다. 사용자는 스크롤을 통해 날짜와 시간을 선택할 수 있으며, 시간 설정 시 손가락으로 간단히 스와이프하여 각 항목을 조정할 수 있다. 이 방식은 깔끔하고 직관적인 경험을 제공하며, iOS의 모던하고 간결한 디자인 철학을 반영한다.
• 안드로이드 (오른쪽): 안드로이드의 날짜 선택기는 캘린더 스타일로 되어 있어 한 번에 더 많은 날짜를 볼 수 있도록 한다. 사용자는 원하는 날짜를 탭하여 선택하며, 더 큰 화면에서의 사용이 용이하다. 또한, 연도와 월을 쉽게 전환할 수 있는 드롭다운 메뉴가 포함되어 있어 캘린더 탐색이 더 직관적이다. 이는 안드로이드가 사용자에게 더 많은 시각적 정보와 선택 옵션을 제공하는 데 중점을 두는 특징을 보여준다.

4. 버튼 스타일의 차이

• 안드로이드에서는 버튼 텍스트에 대문자를 사용하고, iOS에서는 대부분 첫 글자만 대문자를 사용한다.
• 안드로이드에는 일반 버튼과 구분되는 플로팅 액션 버튼이 있다

 

iOS와 Android의 차이는 단순히 운영체제의 기술적 구조에 그치지 않는다. 이는 ‘디자인 철학’과 ‘사용자 경험에 대한 해석의 차이’를 반영한다. 

• iOS는 정제된 단순함과 감성적 일관성을 중시하며,
• Android는 개방성과 사용자 주도성을 강조한다.

따라서 UX 디자이너는 두 플랫폼의 디자인 언어와 철학적 차이를 정확히 이해하고, 사용자의 기대와 플랫폼의 규칙을 조화롭게 설계해야 한다.