참고: 모바일 UI 구조

학습목표 : 모바일 앱 UI 구조의 이해

• 모바일 앱의 주요 UI 구조(탭 내비게이션, 드로어 내비게이션, 스택 내비게이션 등)를 학습하여 각각의 특징과 사용 사례를 이해한다.

---

1. 태스크 기반의 스택 내비게이션(Stack Navigation)

태스크 기반 화면 설계는 특정 작업(Task)을 중심으로 화면을 구성하는 방식이다. 이 설계 방식은 사용자가 앱에서 수행해야 할 특정 작업을 중심으로 UI를 구성하기 때문에, 일반적으로 아래의 구조에 속하거나 이들과 결합하여 사용된다.

• 첫화면을 사용자가 원하는 기능 중심으로 직관적으로 보여줌
• 화면을 사용자가 직접 실행할 수 있는 화면으로 구성

1. 스택 내비게이션(Stack Navigation)

• 태스크 기반 설계에서 자주 사용된다. 사용자가 단계별로 작업을 수행해야 하는 경우, 스택 내비게이션을 통해 화면이 계층적으로 쌓이며 작업 흐름을 명확히 제공한다.
• 예시: 쇼핑몰 앱의 구매 과정(상품 선택 → 결제 → 주문 확인)처럼 단계별 작업이 필요한 프로세스.

---

2. Tap UI 구조

 

• 구조: 화면 하단에 여러 개의 탭이 배치되어 있으며, 각 탭을 클릭하면 서로 다른 페이지로 전환된다.
• 예시: 인스타그램: 하단에 홈, 검색, 리엘스, 알림, 프로필 탭이 있다.
• 특징:
  • 직관적이며 사용자가 빠르게 원하는 페이지로 이동 가능하다.
  • 주로 3~5개의 주요 기능을 제공하는 앱에 적합하다.
  • 모바일 UI의 가장 주요한 구조 – 이동 편리
  • 상, 하단 탭으로 구성 (사용자 접근성 향상을 통해 하단탭을 많이 사용)
  • One depth 구조를 사용하면 여러 개의 메인 설계 가능

---

3. 드로어 내비게이션(Drawer Navigation)

• 구조: 화면 왼쪽 또는 오른쪽에서 슬라이드로 나타나는 메뉴를 통해 다른 화면으로 이동한다.
• 예시: Gmail: 왼쪽 드로어 메뉴를 열어 다른 메일함으로 전환.
• 특징:
  • 많은 메뉴 항목을 포함할 수 있어 기능이 많은 앱에 적합하다. 서비스의 주요 기능 외에 기타 내용이나 설정, 마이페이지 등에 활용.
  • 기본적으로 숨겨져 있어 화면 공간을 절약한다. 메뉴가 펼쳐졌을 때 이전 화면을 어둡게 오버레이하고 다시 메인 기능으로 돌아와 집중하도록 유도
  •  
  • 버튼을 클릭(탭)하기 전까지는 버튼의 기능과 의도를 파악하기 어려움

---

4.순차적 GUI 구조-카드 기반 레이아웃(Card-Based Layout)

• 구조: 콘텐츠가 카드 형태로 나열되어 있으며, 각 카드가 하나의 정보를 나타낸다.
• 예시:구글 뉴스: 뉴스 기사가 카드 형태로 표시됨.
• 특징:
  • 콘텐츠가 구분되어 있어 시각적으로 명확하다.
  • 각 카드는 독립적으로 클릭하여 상세 정보를 볼 수 있다.
  • 앱 서비스의 메인 기능을 확실히 노출
  • 순차적인 흐름을 통해 사용자가 자연스럽게 서비스를 사용하도록 유도-단계별 수행
  • 하나의 정보 또는 기능을 수행하고 그 다음 서비스로 이동하기 위해 사용자의 스와이프 제스처를 유도.
  • 화면 전체에 하나의 주제를 보여주기 때문에 추가 기능이나 다른 화면으로 이동하기 어려움.

---

5.플로팅(Floating) UI 구조

플로팅 UI는 Android의 머티리얼 디자인(Material Design) 테마에서 유래된 UI 설계 방식으로, 사용자 인터페이스의 입체감과 상호작용성을 강조하는 구조이다.

구조 및 특징

1. 입체감 있는 디자인
   • 플랫 디자인을 기반으로 하면서도, 그림자 효과를 추가하여 UI 요소에 입체감을 부여한다.
   • 이로 인해 중요한 UI 요소가 사용자의 시선을 끌도록 돕는다.
2. 중요한 요소의 배치
   • 사용성이 많은 버튼이나 메뉴를 화면의 가장 높은 뎁스(Depth)에 배치한다.
   • 정보나 콘텐츠는 가장 낮은 뎁스(아래)에 배치하여 계층적인 구조를 형성한다.
   • 예를 들어, **Floating Action Button(FAB)**은 화면 하단에 고정되거나 떠 있는 형태로 표시되며, 사용자가 손쉽게 액션을 실행할 수 있게 한다.
3. 숨김 메뉴로 응용
   • 플로팅 UI는 사용자가 필요할 때만 나타나도록 설계된 숨김 메뉴로도 응용 가능하다.
   • 예를 들어, 특정 버튼을 클릭(탭)하면 추가 액션이 포함된 메뉴가 나타나는 방식이다.
4. 단점
   • 버튼의 기능이나 의도를 직관적으로 이해하기 어려울 수 있다.
   • 사용자가 버튼을 클릭(탭)하기 전까지, 버튼의 목적을 파악하기 어렵다는 단점이 있다.

예시

1. Floating Action Button (FAB):
   • 머티리얼 디자인의 대표적인 예로, 사용자가 가장 많이 사용하는 주요 액션을 실행하기 위해 화면 하단에 배치된 버튼이다.
   • 예: Google Gmail 앱의 "새 메일 작성" 버튼.
2. 숨김 메뉴:
   • 특정 액션이나 버튼을 클릭했을 때 확장되는 메뉴 형태로, 플로팅 UI에서 자주 사용된다.
   • 예: YouTube의 더보기 메뉴 버튼(⋮)을 클릭하면 추가 액션(저장, 공유 등)이 나타나는 구조.

장점

1. 사용성 강화:
   • 플로팅 UI는 중요한 기능을 눈에 띄게 배치하여 사용자가 쉽게 액세스할 수 있도록 돕는다.
2. 시각적 계층 구조:
   • UI 요소 간의 깊이감을 통해 시각적 계층 구조를 명확히 전달한다.
3. 공간 절약:
   • 플로팅 버튼은 화면 일부를 차지하지만, 필요할 때만 나타나는 숨김 메뉴로 응용하면 공간 활용이 효율적이다.

단점

1. 기능의 직관성 부족:
   • 플로팅 버튼은 디자인적으로 심플하지만, 직관적으로 버튼의 기능을 이해하기 어려울 수 있다.
   • 사용자 경험(UX)을 고려해 적절한 아이콘과 애니메이션으로 의도를 명확히 해야 한다.
2. 작업 중단 가능성:
   • 플로팅 UI가 화면 위에 떠 있는 경우, 콘텐츠와의 상호작용을 방해할 가능성이 있다.

---

6. 갤러리 UI 구조

이미지나 동영상과 같은 시각적 콘텐츠를 효과적으로 보여주기 위해 설계된 UI 구조로  이미지 중심의 앱이나 서비스(사진 관리, 소셜 미디어, 전자 상거래 등)에서 특히 효과적이다. 콘텐츠를 정리된 형태로 제공하고 사용자가 직관적으로 탐색할 수 있도록 돕는다. 이러한 설계 방식은 구글 포토, 인스타그램, 기본 갤러리 앱과 같은 앱에서 효과적으로 구현되고 있다.

 

• 구조: 화면에 그리드 형태로 콘텐츠가 배치되어 있으며, 각 항목이 클릭 가능하다.
• 예시:갤러리 앱: 사진이 격자 형태로 배치되어 있어 직관적으로 탐색 가능.
• 특징:
  • 시각적 콘텐츠(사진, 동영상 등)를 다루는 앱에 적합하다.
  • 콘텐츠의 연속성을 위해 의도적으로 섬네일을 크롭(Thumbnail Crop)하여 적용,
    많은 콘텐츠를 효율적으로 배치할 수 있다.
  • 디자인 및 메뉴 구조가 단순해서 디자인에 변화를 주거나 기능을 추가하기 어려움
  • 다른 메뉴와 함께 사용하여 부족한 정보를 보충 할 수 있다.

장점

• 시각적 명확성: 격자 기반 디자인으로 콘텐츠가 잘 정리되어 사용자들이 시각적으로 빠르게 탐색 가능.
• 사용자 친화적: 스크롤, 클릭, 스와이프 같은 직관적인 동작으로 콘텐츠를 감상하거나 선택할 수 있다.
• 반응형 레이아웃: 다양한 디바이스에서 콘텐츠가 최적의 배열로 표시된

단점

• 제한된 콘텐츠 표현: 작은 격자에서는 세부 정보를 모두 표시할 수 없어, 클릭하거나 확대해야만 확인 가능.
• 많은 콘텐츠의 관리 어려움: 콘텐츠가 많을 경우 사용자들이 특정 항목을 찾기 어려울 수 있다.

---