디지인할 때 알아두어야 할 각 플랫폼의 차이점에 대한 정리입니다. 모바일 디자인이 고도화되면서 점점 비슷한 UX로 발전하고 있지만, 그 안에서도 디테일한 차이가 있습니다. 서비스를 디자인 할 때 목적에 따라 패턴을 디자인하고 각 플랫폼에 동일하게 적용하는 편이지만 OS에서 권장하는 UI 가이드라인을 살펴보면 적합한 패턴을 선택하는데 도움이 될 것입니다.
Navigation
iOS는 하단에 뒤로가기 버튼이 없기 때문에 뒤로가기Hierarchy Back를 위해서 왼쪽 상단에 뒤로가기를 넣습니다. Android는 하단에 History Back 버튼이 있기 때문에 왼쪽 상단에 뒤로가기를 넣지 않는 방향으로 디자인되고 있습니다.
![](https://designcompass162885993.files.wordpress.com/2020/03/thumnail_gui_platform_back.png?w=1024&resize=800%2C681)
Navigation Bar & App Bar
iOS는 네비게이션 바라고 부르며 좌우로 2개씩 아이콘을 배치하는 편이며 뒤로가기의 경우 어떤 페이지로 이동하는지 라벨을 함께 사용하는 경우가 많습니다. 안드로이드는 앱 바 혹은 액션 바라고 부르며2~3개의 액션 아이콘이 오른쪽에 위치하며 그 이상의 액션들은 더보기에 넣어둡니다.
![](https://designcompass162885993.files.wordpress.com/2020/03/thumnail_gui_platform_bar.png?w=1024&resize=800%2C320)
Tool bar & Floating Action Button
iOS는 툴바를 사용해 페이지 내에서의 액션 목록을 아이콘으로 표시합니다. 안드로이드는 플로팅 액션 바라는 동그란 버튼을 이용해 페이지 내에서의 주요 액션을 표시합니다.
![](https://designcompass162885993.files.wordpress.com/2020/03/thumnail_gui_platform_tool.png?w=1024&resize=800%2C320)
앱 아이콘
iOS와 Android의 앱 아이콘 디자인이 다릅니다. 제네레이터를 이용해 각 해상도에 대응하는 아이콘을 제작합니다.
![](https://designcompass162885993.files.wordpress.com/2020/03/thumnail_gui_platform_appicon-1.png?w=1024&resize=800%2C434)
해상도
iOS는 사용하는 디바이스가 정해져있기 때문에 해상도가 고정됩니다. Android 는 제조사별로 디바이스와 스펙이 다르기 때문에 레이아웃을 고려할 필요가 있습니다.
![](https://designcompass162885993.files.wordpress.com/2020/03/screen-sizes.jpg?w=1024&resize=800%2C533)
서체
iOS는 San Francisco와 산돌 고딕 네오1를 사용합니다. 안드로이드는 Roboto가 기본이며 Galaxy는 삼성 고딕, LG는 LG 스마트체를 사용합니다. 또한 안드로이드는 커스텀 서체를 적용할 수 있습니다. 안드로이드 개발 시에는 의도한 사용성을 유지하기 위해 사용자가 OS에서 사용하는 서체가 적용되지 않게 처리할 수 있습니다.
https://developer.apple.com/fonts/
https://fonts.google.com/specimen/Roboto
![](https://designcompass162885993.files.wordpress.com/2020/03/thumnail_gui_platform_font-1.png?w=1024&resize=800%2C318)
그림자
Android는 머티리얼 디자인에 포함된 Elevation 기본 UI로만 그림자를 구성할 수 있습니다. 안드로이드에서 커스텀 그림자를 표현하기 위해서는 9-patch로 에셋을 전달해야합니다.
![](https://designcompass162885993.files.wordpress.com/2020/03/thumnail_gui_platform_shadow.png?w=1024&resize=800%2C380)