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