운영체제(OS)에 따라 디자인하기
UXUI 디자이너는 Android와 iOS의 가이드라인까지 알아야 한다
여러분은 어떤 OS를 쓰고 계신가요? 안드로이드? 아이폰?
안드로이드 하면 한국에선 갤럭시라고 이야기하면 이해가 빠르실 겁니다. 이 둘의 사용성은 매우 다르죠. 그렇기 때문에 아이폰을 쓰다가 갤럭시를 쓰는 게 불편하고 어렵다고 이야기합니다. 그럼 여기서 질문 하나 하겠습니다.
Q 그렇다면 UXUI 측면에서 이 둘 중 어떤 것이 좋은 것일까요?
정답은 사실 없습니다. 사용자가 익숙한 쪽으로 대답을 할 수는 있을 겁니다. 이 둘의 운영체제는 비슷하지만 다릅니다. 이 두 개의 운영체제는 각자의 가이드라인이 있기 때문에 안드로이드와 iOS 운영체제에 대한 디자인을 알아야 앱의 디자인을 할 수 있습니다.
오늘은 OS의 특징과 UI디자인적으로 어떤 게 다른지 알아보는 시간을 갖도록 하겠습니다.
OS란 무엇인가?
OS(Operating System 운영체제)는 컴퓨터 시스템에서 하드웨어와 응용 프로그램 간의 상호작용을 관리하고 제어하는 소프트웨어입니다. 컴퓨터나 모바일 장치 등 다양한 플랫폼에서 동작하며, 사용자와 하드웨어 간의 인터페이스 역할을 합니다. 쉽게 Android와 iOS로 나뉩니다. 이를 이해하고 차이점에 대해 알아보겠습니다.
이를 이해하는 이유는 기획하고 디자인하는 단계에서 UI를 설정할 때, 어떤 OS를 디자인할지에 따라 어떤 디바이스의 해상도로 디자인할지 서로 논의가 되어야 하기 때문에 사전적 이해가 필요합니다.
또한 프로젝트 규모, 기간, 개발 환경에 따라 디자인 방식이 달라지기 때문에 해당 OS에 대한 특징에 대해 알아두면 유용합니다. 예를 들어 IOS를 디자인한다고 할 경우, 그에 맞는 가이드라인, 컴포넌트, 해상도, 단위에 맞춰 디자인해야 하고 이에 개발하여 앱 스토어에 앱 배포까지 이루어져야 합니다. 이것은 독답적으로 설정하는 것이 아니라 각 파트마다 정해진 목표설정을 위해 긴밀한 커뮤니케이션을 통해 이루어집니다.
UXUI 디자인 프로세스와 커뮤니케이션해당 앱이 두 개의 운영체제로 개발될 수 도 있지만 목표 타깃에 맞춘 운영체제를 먼저 개발하는 경우가 있기 때문입니다. 이유는 운영체계는 사용성이 다르고 동작 및 디바이스가 다르며 UI 컴포넌트 종류, OS마다의 디자인 가이드라인이 다르기 때문입니다. 아래의 그림과 같이 숫자 패드와 키보드만 봐도 다름을 느끼 실 수 있습니다. 단순한 디자인의 차이가 아니라 사용성이 다르기 때문에 진행 시 해당 제품이 원하는 목표와 부합하게 선택 및 디자인해야 합니다.
[출처] Android & iOS Keyboard library by Denis OnchukovAndroid & iOS Keyboard library https://www.figma.com/community/file/905201170279837394/android-ios-keyboard-library
Android & iOS 이해하고 UI 가이드라인 알아보기
iOS 생태계는 Apple 기기 전용인 반면, Android 생태계는 오픈 소스이며 단편화되어 있습니다.
시각적 디자인(UI디자인)은 차이점들을 나열해 보도록 하겠습니다. 첫 번째, 서체의 차이입니다. iOS의 기본 시스템 폰트는 SF: San Francisco와 산돌 고딕 네오 1을 이용하며 17pt 크기입니다. 반면에 안드로이드의 기본 시스템 폰트는 Roboto를 사용하며 16sp 크기입니다.
Android와 ios의 차이그 이외에 UI 컨트롤, 버튼, 아이콘의 크기들도 차이점을 두고 있습니다.
[출처] 비주얼 디자인 차이점 by designflyoverAndroid 및 iOS의 그리드 사양에서도 차이점을 나타냅니다. iOS UI는 포인트(pt) 단위로 개발됩니다. 머티리얼 디자인 지침을 갖춘 Android 앱은 밀도 독립적 픽셀(dp)을 사용하여 개발되었습니다.
iOS 디자인 가이드라인에 따르면 375pt가 디자인에 적합한 화면 크기(너비)로 간주됩니다. Android의 경우 360dp입니다. 단, 화면 크기를 고려할 때 높이는 제한사항이 아닙니다. 내비게이션바/앱바, 탭바/하단 내비게이션바의 크기는 아래와 같습니다.
[출처] 그리드 사양 by designflyover내비게이션은 Android 앱 UI 디자인은 하단에 뒤로 버튼이 있는 반면, iOS에서는 화면 왼쪽 상단에 있습니다. iOS의 기본 탐색 기능을 탭바라고 하며 하단에 위치합니다. Android 앱 UI 디자인에서 기본 탐색 모음은 하단에 위치하며 하단 탐색 모음이라고 합니다. Android 앱 UI 디자인에는 최상위 탐색을 위한 탭도 있습니다. Android의 탭은 동일한 수준 탐색을 위한 것이며, iOS의 분할된 컨트롤은 동일한 페이지의 콘텐츠를 제어합니다. iOS UI 디자인에는 보조 탐색의 탭 표시줄에 '자세히' 버튼이 있습니다. Android 앱에서는 왼쪽 상단에 햄버거 메뉴가 있습니다.
[출처] 내비게이션 사양 by designflyover컨트롤은 시용자가 앱의 기본 창 영역에서 상호작용하는 UI요소이다. iOS 앱 UI 디자인에서 기본 클릭 유도 버튼은 오른쪽 상단에 있습니다. 이와 대조적으로 Android의 플로팅 작업 버튼(주로 오른쪽 하단에 있음)은 기본 클릭 유도 버튼입니다. iOS에서는 검색 아이콘이 일반적으로 탭 표시줄에 표시되는 반면 Android에서는 오른쪽 상단에 표시됩니다.
[출처] UI 컨트롤 by designflyover이 외 검색을 작동하는 데 사용되는 컨트롤과 시각적 스타일도 다양합니다. 다른 차이점이 더 있는지 이야기한다면, iOS 경고 상자에는 작업 버튼과 문장을 구분하는 구분선이 있습니다. Android에는 스낵바, 배너, 대화 상자라는 세 가지 종류의 경고 상자가 있으며 모두 여러 수준의 상호 작용 우선순위를 갖습니다.
전반적으로 Android의 머티리얼 디자인과 iOS의 휴먼 인터페이스 디자인은 모두 차이점과 고유한 기능에도 불구하고 더 나은 경험을 위해 우리에게 익숙한 패턴을 유지합니다.
Android & iOS에서 더 알아야 하는 UI 디자인 요소?
안드로이드와 iOS 간에는 일부 UI/UX 디자인 요소 및 해상도 관련 평준화가 있습니다.
1. 포맷(Formats)
iOS: Swift 또는 Objective-C를 사용하여 iOS 앱을 개발합니다.
안드로이드: Java 또는 Kotlin을 사용하여 안드로이드 앱을 개발합니다.
2. 레이아웃 가이드라인(Layout Guidelines)
iOS: Human Interface Guidelines를 준수하여 UI 요소의 디자인 및 배치를 조정합니다. iOS의 가이드라인은 일관된 디자인, 탐색 및 상호 작용을 제공하기 위해 개발되었습니다.
> iOS Human Interface Guidelines 사이트
Apple의 공식 문서로, iOS 앱을 디자인할 때 따라야 할 디자인 원칙, 레이아웃 가이드, UI 요소 및 상호 작용에 대한 세부 사항을 제공
안드로이드: Material Design을 기반으로 한 디자인 가이드라인을 따릅니다. Material Design은 머티리얼이라는 특정한 디자인 요소와 애니메이션을 포함하여 일관된 사용자 경험을 제공합니다.
> Android Developers - Material Design Guidelines
Google의 Material Design 가이드라인은 안드로이드 앱을 위한 디자인 시스템으로, 일관된 사용자 경험을 제공하기 위해 디자인 원칙, 구성 요소, 패턴 및 테마를 제공
3. 해상도(Resolution)
화면의 정밀도를 나타내는 지표로 시장 트렌드나 요구로 인한 해상도의 최대와 최소 기준을 찾는 것이 좋다. 해상도는 회사에서 기준을 가지고 있는 곳도 있지만, 아닌 경우도 있을 경우에는 이 부분에 대한 기준을 알아야 UI 디자인을 기획할 수 있다. 이때 statcounter사이트의 통계자료를 통해 현재 스크린 점유율을 파악하고 제시할 수 있다. 즉 아래로 검색해 봤을 경우, 최근 1년 동안 한국에서 가장 많이 사용된 해상도는 1920*1080px(PC)라는 것을 알 수 있습니다.
(모바일은 360*460px (Andriod), 375*667 기준으로 디자인하는 것을 추천합니다.)
출처: statcounter 검색 결과iOS: Retina 디스플레이를 포함한 다양한 디바이스 해상도를 고려하여 이미지 및 UI 요소를 준비합니다.
안드로이드: 다양한 디바이스 제조업체 및 화면 크기에 맞게 해상도를 조정합니다. 안드로이드는 다양한 해상도와 비율을 가진 디바이스를 지원하기 위해 다양한 해상도에 대응할 수 있도록 유연한 레이아웃을 제공합니다.
평준화된 요소는 개발자가 특정 플랫폼에 맞게 앱을 설계하고 구축할 때 편리하게 사용할 수 있도록 도와줍니다. 이는 사용자가 iOS와 안드로이드에서 일관된 디자인 및 사용자 경험을 경험할 수 있도록 합니다.
오늘은 OS의 정의와 이해를 통해 UXUI 디자인을 할 때 도움을 줄 수 있는 내용들을 정리해 보았습니다.
여러분께 도움이 되길 바라며 긴 글을 마칩니다.
감사합니다.
[자료출처]
by Claudia Jeff / ANDROID VS. IOS: THE UPDATED GUI COMPARISON OF TWO TECH GIANTS
by designflyover/ Understanding the iOS and Android UI Guidelines
Brunch / 김자유 / iOS vs Andriod 어떻게 디자인해야 할까?
Brunch / Henry lee / 모바일 기본 단위 DP, PT
Brunch / 플러스엑스 / 해상도의 기준이 있어야 UI 디자인을 할 수 있다
[글쓴이 소개]
현재 기획자이자 문제해결 디자이너입니다. 문제를 읽고 방향을 잡고 문제해결을 목적으로 눈으로 보이는 것들을 구현하는 것에 재미를 느끼고 있습니다. 좋은 기회로 UXUI 인터렉션 디자인 포지션으로 독일에서 일한 경력과 대학 및 기업을 대상으로 UX/ UI을 교육을 하고 있습니다. 현재 알고 있는 것들을 저만의 관점으로 풀어 기록하고 공유하려 합니다.
