Android , IOS UI 명칭 비교

alison bang

15 2월 2025 • 11 min read

IOS, AND OS별 다른 특징과 용어들Android와 iOS의 디자인에는 각각 가이드라인이 있으며 몇 가지 주요한 차이점이 있습니다.

보통 디자이너들은 아이폰을 많이 쓰기 때문에 대부분의 가이드를 아이폰 기준에 맞춰서 작업하고 있습니다. 하지만 한국은 Android를 많이 쓰기도 하고, 주요 타겟에 맞춰 안드로이드 개발이 우선시 되야 할 때도 있고, 앱 심사 통과가 Android가 좀더 유연하기 때문에 안드로이드에 친숙해져야 합니다.

또한 경우에 따라 앱스토어의 정책으로 인해 가이드 라인에 맞춰야 할 필요가 있고, 안드로이드에서 구현이 힘든 경우도 있습니다.

일루미나리안 디자이너 중혁님이 GVW 앱 디자인 당시 더 나은 디자인 시스템에 대한 고민을 했고, 그 스터디 결과를 공유드립니다.

위 두개의 사이트는 디자이너라면 틈틈이 들어가서 내용을 보시면 좋을 것 같습니다.

디자인 철학과 사용자 경험:

Android: 안드로이드는 간결하고 선명한 디자인을 추구합니다. Material Design이라는 디자인 시스템을 통해 사용자에게 일관된 경험을 제공하고자 합니다. 실제 세계의 재질과 표면을 모방하여 사용자 경험을 향상시키는 데 초점을 두고 있으며 그림자, 깊이, 움직임 등을 강조합니다.
iOS: iOS는 간결하고 직관적인 디자인을 추구합니다. Human Interface Guidelines를 따르며 사용자가 쉽게 이해하고 사용할 수 있는 직관적인 경험을 제공하는 것에 중점을 두고 있습니다. 평평한 디자인, 미묘한 애니메이션 및 직관적인 제스처를 강조합니다.

화면 구성:

Android: 위젯을 홈 화면에 자유롭게 배치할 수 있고, 앱 아이콘과 위젯을 섞어서 배치할 수 있습니다.
iOS: 앱 아이콘은 그리드 형식으로 자동 정렬되며, 위젯은 iOS 14부터 홈 화면에 추가 가능해졌습니다.

색상:

Android: 머티리얼 디자인은 생동감 있고 대조가 강한 색상을 선호합니다.
iOS: iOS는 더 조용하고 차분한 색상을 사용하여 안정감을 주는 경향이 있습니다.

애니메이션:

Android: 자연스럽고 유기적인 애니메이션, 물리적인 속성과 움직임을 강조합니다.
iOS: 부드럽고 섬세한 애니메이션, 빠르고 응답성있는 사용자 경험을 중요시합니다.

폰트:

Android: Roboto 폰트를 기본으로 사용하며 삼성 갤럭시 폰은 기본적으로 삼성고딕(SamsungOne)을 기본 폰트로 사용합니다. 다양한 디바이스 크기와 해상도에 대응하기 위해 텍스트 크기와 간격을 자동으로 조정합니다.
iOS: San Francisco 폰트를 기본으로 사용하고 한글은 산돌 고딕 네오를 사용합니다. 텍스트 크기와 간격이 미리 정의되어 있습니다.

네비게이션 바(Navigation Bar):

iOS: iOS에서는 Navigation Bar 안에 다양한 네이밍이 있습니다. 하단 바는 Tab Bars 라고 명칭합니다.
Android: Navigation Bar로 명칭하며 다른 액션을 취하는 바입니다.

Navigation Bar & App Bar:

iOS: Navigation bars는 상단에 위치하며 뒤로가기 버튼과 레이블이 있고 중앙에 타이틀이 있고 오른쪽에 보통 한 가지 액션 아이콘을 배치합니다.
Android: Top app bars는 상단에 위치하며 뒤로가기 버튼과 타이틀, 오른쪽에 여러 액션 아이콘을 배치합니다.

Tool bar & Bottom app bars:

iOS: Tool bars는 하단에 위치하며 주로 액션을 위한 기능을 제공합니다. 더 간결한 아이콘만을 사용하여 탐색을 제공하는 경향이 있습니다.
Android: Bottom app bars는 하단바에 위치하며 액션 아이콘과 텍스트를 함께 표시하는 경우가 많습니다. M2에서 M3가 달라진 점은 Floating bars(FAB)를 앱바 안에 같이 쓰기를 권장합니다.

글로벌 인디케이터(Global Indicator - 공식 명칭은 자료가 없다고 합니다)

iOS: Home Indicator라고 하며 최신 iPhone을 포함한 많은 디바이스에서 제스처를 사용하여 네비게이션을 합니다. 이전 모델에서는 홈 버튼을 사용했습니다.
Android: Soft Keys라고 하며 뒤로가기(back), 홈(home), 최근 앱 목록(recent apps) 버튼으로 구성되어 있으며 최근 버전에서는 제스처 기반 네비게이션도 가능합니다.

그림자:

Android: elevation 속성을 사용해서 깊이감을 주며 제공된 것 외에 그림자를 따로 커스텀할 수 있는 방법이 없습니다. 커스텀 그림자를 표현하기 위해서는 9-patch로 이미지를 만들어서 사용해야합니다.
iOS: 그림자의 색상을 추가하는 방법이 더 유연합니다. shadowColor 속성을 사용하여 그림자의 색상을 직접 지정할 수 있습니다.
그림자 관련된 정보는 해당 링크에서 더 자세히 읽을 수 있습니다. https://m1nzi.tistory.com/3

시트(Sheet):

시트는 디자인과 개발에 용어 차이가 좀 있습니다. AOS에서는 Bottom Sheet, iOS에서는 Sheet로 불립니다. iOS개발툴에서 제공하는 사이즈로 Large, Medium이 존재하며 화면 비율에 맞춰 조절이 가능하고 내부 indicator를 쉽게 넣고 뺄 수 있습니다. 그 외의 값은 모두 커스텀하여 제작해야 합니다.
커스텀으로 제작하면 고정값으로 지정하여 디바이스 비율과 상관없이 작은 화면에서는 덮는 영역이 더 많아질 수 있으나 걱정할 만큼 크게 차이 안나도록 조절이 가능합니다.

비밀번호 표기(Passwords):

비밀번호 사이즈가 식별 가능할 만큼 큽니다.
Android는 기본 제공 UI의 비밀번호 표기가 작게 표기되어 개발 커스텀으로 크기 조절을 해야합니다. 기본 제공 UI를 사용하면 크기가 매우 작고 협소하게 붙어있기 때문에 변경하는게 좋습니다. 검수할 때 디자인과 다를 경우 개발자에게 요청해야 하며 유니코드 방식(다른 방식도 있을겁니다)을 통해 가능합니다.

피커와 데이트 피커 (Pickers & Date pickers):

iOS: Pickers라고 명칭하며 돌아가는 Spiner 형태의 UI를 기본으로 제공합니다.
Android: Date pickers라고 명칭하며 평평한 형태의 달력이나 시간 선택 UI를 기본으로 제공합니다.
두 OS 모두 커스텀으로 맞출 수 있고, 보통은 IOS에 맞춰서 초기 개발을 하는 편입니다.

보통 Spinner로 하지만 MVP에서는 기본 속성으로 써도 무방할 것 같아요. 다만 정리를 잘하자.

키보드 인앤아웃 (Key board in & out):

키보드를 화면에 노출시키고 내리는 방식의 차이입니다. 키보드에 완료 버튼을 추가하는 방법도 있습니다.
iOS: 기본 제공 툴을 이용하여 따로 설정하지 않아도 키보드 이외의 영역을 선택하면 자동으로 키보드가 내려갑니다.
Android: Soft Key의 내리기(뒤로가기)버튼을 통해 내릴 수 있으며 보편적으로 사용합니다. iOS처럼 키보드 이외의 영역을 선택했을 때 키보드를 내려가게 하려면 따로 설정에 대한 정의를 내리거나 개발자에게 요청해야합니다.

And는 개발자에게 요청해서 키보드 이외 영역 탭 시 내려가게 하는게 좋겠네요.

Toast bars & Snack bars

우리가 흔히 토스트 바라고 부르는 UI의 가이드라인 공식 명칭은 없으며 iOS에서는 Alert형태가 유사한 개념입니다.

iOS: 개발 커스텀으로 만들 수 있습니다.
Android: 머티리얼 디자인 가이드에서는 Snack bar라고 명칭하지만 개발에서는 토스트바로 쓰이고, 커스텀 개발을 할 경우에 스낵바로 변경돼서 불립니다(정말 헷갈리게 이상하죠?). 기본으로 앱 icon이 같이 포함되는데 제거하고 싶으면 커스텀으로 가능하니 개발자에게 요청해야합니다.

검색(Search)

iOS: 기본 가이드라인은 검색창과 오른쪽에 취소 버튼을 배치합니다
Android: 기본 가이드라인은 뒤로가기 버튼과 검색창, 오른쪽에 X아이콘으로 취소를 배치합니다.