안드로이드 UI가이드, figma

안녕하세요.

오늘은 플랫폼 별 UI가이드 중 안드로이드 UI 가이드에 대해 스터디한 내용을 쓰려고 합니다.

Android 기초와  Google Material Design, Material 에셋 활용하는 법에 대해 알아보도록 하겠습니다.

 

안드로이드 UI가이드

안드로이드 Pie 9.0까지는 알파벳순의 디저트의 이름으로 정하였으나, 그 이후의 버전들은 그냥 안드로이드 10, 11 숫자로 표기

 

https://www.figma.com/design/vAyHiG5Ey2VQ5MxeH4jHOb/QY-Theme-Builder-playground--Copy-?node-id=1732&t=b39JMQduC0kiUUc4-1

Figma

 

안드로이드(Android)는 구글(Google)이 개발한 모바일 운영체제(OS)로, 스마트폰, 태블릿, 웨어러블, TV, 자동차 등 다양한 기기에서 사용됩니다. 기본적으로 리눅스 커널 기반이며, 오픈소스로 제공되어 전 세계 제조사들이 자유롭게 사용하고 커스터마이징 할 수 있습니다.

안드로이드 기초

1. 플랫폼 가이드라인(Material Design)을 준수하라

Material Design 3 기준에 따라 UI 구성 요소를 사용해 일관성을 유지하세요. 

예: 버튼, 카드, FAB, TopAppBar등은 Android Native 스타일 사용

 

2. 적응형 레이아웃을 설계하라 (Responsive UI) 

다양한 해상도/화면 크기를 고려해 ConstraintLayout, Compose 등 유연한 UI 도구 사용

예: 폴더블폰, 태블릿, TV 지원 시 화면 구성 다르게 설계

 

3. 간결하고 직관적인 탐색 구조 제공

Bottom Navigation, Navigation Drawer, Tab Layout 사용해 앱 내 이동을 단순하게

뒤로가기 버튼 동작을 명확히 처리 (예: 이중 백 버튼 방지) 

 

4. 속도감 있는 첫 화면 (Splash + Skeleton Loading) 

앱 실행 시 로딩이 느릴 경우 Skeleton UI 또는 진입 애니메이션 제공

사용자에게 “앱이 작동 중이다”는 피드백 제공

 

5. 모션과 애니메이션은 자연스럽게과하지 않으면서도 맥락 있는 애니메이션 

제공예: 페이지 전환, FAB 클릭 시 확장 모션

 

6. 오프라인 상태와 에러 처리 고려네트워크 오류, 인증 실패, 앱 충돌 시 사용자 친화적 메시지 제공

예: “오류가 발생했습니다. 다시 시도해주세요.” + 재시도 버튼

 

7. 접근성과 포용성 강화TalkBack, 고대비 모드, 글자 크기 조절 등 접근성 서비스 대응컬러 대비, 아이콘 텍스트 병행 표기

 

8. 프라이버시와 권한은 ‘상황에 따라’ 요청앱 실행 시 바로 전체 권한 요구  → 사용 시점에 필요한 권한만 안내예: 카메라 버튼을 

누를 때만 카메라 권한 요청

 

9. AI/ML 기반 UX 기능 통합 고려사용자 행동 기반 추천, 자동 입력, 예측 입력 등으로 사용성 향상

예: Google Keyboard의 맞춤 제안, 사진 자동 분류 등10. 테스트와 피드백 기반 지속 개선Firebase, UXCam, A/B 테스트 도구로 사용자 행동 분석주기적으로 UI 개선, 기능 재설계 반복

 

DP (Density-independent Pixel)

기기의 화면 밀도(DPI)에 따라 실제 픽셀(px) 크기가 자동으로 변환되어, 저해상도 폰이든 고해상도 태블릿이든 동일한 물리적 크기로 보이게 만듭니다.

 

SP (Scale-independent Pixel)

글자 크기(Font size)에만 사용되는 단위

 

8dp 그리드 시스템 (8dp Grid System)

UI의 모든 요소를 8dp 단위의 보이지 않는 격자에 맞춰 배치하는 규칙입니다. 모든 간격(Margin, Padding)과 대부분의 컴포넌트 크기를 8의 배수(8, 16, 24, 32dp...)로 설정하여, 디자인에 시각적인 안정감과 리듬감을 부여합니다.

 

컴포넌트(Component) –UI 구성요소 이해와 활용

앱 바 (App Bars), 버튼 (Buttons), 네비게이션 (Navigation), 다이얼로그 (Dialogs), 탭 (Tabs), 칩 (Chips), 스낵바 (Snackbar), 텍스트 필드 (Text Field)

 

Material Design 커스터마이징 & 디자인 토큰

Android 디자인은 브랜드만의 정체성을 담아내는 '커스터마이징(Customization)'과, 디자인과 개발의 언어를 통일하는 '디자인 토큰(Design Tokens)'이라는 두 가지 중요한 개념을 중심으로 발전하고 있습니다.

 

머티리얼 커스터마이징 (Material Customization) 

핵심 도구: 머티리얼 테마 빌더 (Material Theme Builder)

 

디자인 토큰 (Design Tokens) 

디자인 토큰은 디자이너와 개발자가 사용하는 '언어'를 통일시켜줍니다. 이는 사소한 오해를 줄이고, 디자인의 일관성을 완벽하게 유지하며, 향후 유지보수 비용을 획기적으로 절감시키는 현대 디자인 시스템의 가장 핵심적인 개념입니다

 

제스처의 주요 기능과 원칙

제스처는 터치스크린 환경에서 사용자가 손가락의 움직임을 통해 기기와 직접적으로 소통하는 핵심적인 상호작용 방식입니다. 

 

마치며

안드로이드에 관한 기본개념과 유저의 일관된 경험을 위하여 안드로이드의 UI가이드에 알아볼 수 있었습니다.