모바일 환경 이해하기
스마트폰 종류만큼 다양한 모바일 환경
2010년 이후 안드로이드와 아이폰을 중심으로 본격적인 스마트폰 시대가 도래했습니다. 그 후로 구글, 삼성, 애플 등 여러 회사가 다양한 스마트폰을 출시했고, 그 종류만큼 디자이너가 신경 써야 할 모바일 환경과 특징도 다양해졌습니다. 이번에는 2022년 기준 널리 쓰이는 해상도와 디바이스 크기 등 모바일 환경의 대략적인 특징을 이해하고 우리가 디자인할 때 어떤 고민을 하면 좋을지 알아보겠습니다.
구글, 삼성, 애플... 여러 스마트폰 제조사에서는 1년이 멀다 하고 새로운 스마트폰을 출시하고 있습니다. 그런데 세상에는 얼마나 다양한 스마트폰이 있을까요? 어떤 폰은 선명하고, 어떤 폰은 넓적하고, 어떤 폰은 반으로 접히기도 합니다. 이렇게 디바이스 특성이 다양한 만큼 보이는 화면이나 색상, 화질도 각각 다릅니다.
해상도란?
해상도는 이렇게 다양한 정보 중 화면 크기와 화질을 ‘픽셀'이라는 화면의 세포와 비슷한 형태로 표현할 수 있는 용어로, 주로 모니터나 핸드폰 화면, 사진, 영상 등 디지털 산출물의 비율과 선명도를 나타냅니다. 똑같은 크기의 모니터라도 4K 모니터가 다른 모니터 대비 훨씬 선명하고 차지하는 용량도 큰데요, 이는 표준 4K 모니터의 해상도가 3840*2160으로 매우 높기 때문입니다.
해상도 기준과 예외 상황 구분하기
디지털 화면을 디자인하는 디자이너라면 사용자의 디바이스별 해상도가 다양하다는 사실을 알고 있어야 합니다. 우리가 디자인한 서비스를 접하는 사람들이 한 가지 해상도의 디바이스만 사용할 리 없기 때문입니다. 이런 상황 속에서 일단 화면을 디자인해야 하는 디자이너는, 어떤 해상도로 디자인해야 할지 고민하게 됩니다.
결론부터 말씀드리면, 일반적으로 안드로이드는 360*740, iOS는 375*812로 작업하면 좋습니다. (상황마다 차이가 있을 수 있습니다)
여기서 잠깐, 4K는 3840*2160이라는 큰 숫자인데 왜 모바일 해상도는 거의 1/10으로 줄어들었을까요? 그만큼 화질이 떨어지는 걸까요? 그건 아닙니다. 스마트폰 종류나 스펙이 다양한 만큼, 물리적으로 똑같은 액정 크기의 화면이라도 일반 모니터와 4K 모니터의 화질이 다르듯 표현할 수 있는 화질이 다를 수 있습니다. 그런데 그렇다고 어떤 화면은 720*1480, 어떤 화면은 1080*2220... 이런 식으로 픽셀 단위로 다르게 인식해 각각 디자인하면 매우 비효율적입니다. 따라서 모바일 OS에서는 하나를 잘 디자인해 다양한 상황에 적용할 수 있도록, pt, dp, sp 등의 화면 단위가 등장했고, 이에 기준 디자인 해상도를 1 배수로 통일하게 됩니다. 이는 디자인 작업량이나 디바이스에 불필요한 리소스 용량을 획기적으로 줄여 주고, 안 좋은 인터넷 상황이나 액정 화질이 낮은 디바이스 등 고화질 리소스를 출력하기 힘든 상황에서도 최적화된 이미지를 보여줄 수 있기 때문에 매우 효과적입니다.
상황별로 다르겠지만, 모바일 디자인 해상도 기준을 결정하려면 잠재 고객의 모바일 기기의 OS비율을 함께 살펴보는 것도 좋습니다. 현재 모바일 환경을 양분하는 OS는 안드로이드와 iOS이고, 이 둘의 모바일 환경과 표준 해상도가 다르기 때문입니다.
Statcounter에서 디바이스, OS 사용량 등 커다란 데이터를 옵션별로 손쉽게 확인해볼 수 있습니다.프로젝트 시작 시점에 참고할 만한 내부 데이터가 있다면 이를 활용하는 것도 좋습니다. 예를 들어 이미 서비스를 운영 중인 회사에 입사했을 경우, 이 서비스의 실제 유저가 가장 많이 사용하는 디바이스를 표준으로 지정할 수도 있을 것 같습니다. 만약 아무런 데이터도 없다면, 웹사이트에서 검색해볼 수도 있습니다. 예시의 스탯카운터(https://gs.statcounter.com/)라는 웹사이트에서는 디지털 환경과 관련된 다양한 데이터를 제공하는데요, 여기에서 전 세계 OS나 국가별 디바이스 비중 등 일반적인 디지털 환경 데이터를 확인할 수 있습니다.
아이폰 X, 아이폰 6 환경 둘 다 고려한 디자인
기준 해상도를 설정했다면 이제 예외 상황에 대해서도 생각해볼 차례입니다. 디자이너로서 유저의 디바이스에 구애받지 않고 최대한 비슷한 서비스 경험을 주기 위해 노력해야 하기 때문입니다.
그런데 유저가 많아질수록 사용하는 해상도 종류도 기하급수적으로 늘어납니다. 디자이너는 이 모든 디바이스를 대응해 디자인 시안을 만들어야 할까요? 그렇지 않습니다. 처음부터 모든 예외 상황을 고민하는 것은 매우 비효율적이기 때문인데요, 효과적으로 작업하려면 1~2명이 사용하는 디바이스보다 10만 명이 사용하는 디바이스를 우선적으로 고려해야 합니다. 따라서 표준 해상도를 선정해 디자인했다면 그 후 다양한 디바이스 크기에 따라 UI 요소가 어떻게 변화할지 규칙을 설정하고 개발, 배포하는 것도 좋습니다. 규칙까지 설정했다면 내 디자인이 실제로 다양한 디바이스에 적용 가능한 규칙으로 개발되었는지 검증하는 것도 중요한데요, 이를 위해 디자인 시안을 초기에 빠르게 공유하고 담당 개발자와 논의할 수 있다면 작업 시간을 더욱 효율적으로 사용할 수 있습니다.
앞서 설명한 것처럼 모바일 환경은 크게 안드로이드(갤럭시, 픽셀 등)와 iOS(아이폰)로 양분되어 있습니다. 우리가 흔히 접하는 삼성 One UI도 안드로이드 OS를 변형한 것이기 때문입니다. OS별로 대응해야 하는 해상도와 UI 규칙 기본 인터랙션이 다르기 때문에 디자인할 서비스의 타겟과 그들이 사용하는 디바이스를 조사하고, 가장 보편적인 디바이스의 해상도와 환경을 기준으로 디자인하는 것이 좋습니다.
한 가지 예를 들어보겠습니다. 농어촌의 시니어가 주요 타겟인 서비스를 디자인해야 하는 상황입니다. 이 경우 일반적인 인구 사용 데이터와 달리, 다수의 유저는 구형 안드로이드 디바이스의 보편적 해상도인 360*640을 사용할 것이라는 가설을 세울 수 있고, 이것이 검증되면 해당 값을 기준으로 디자인할 수도 있을 것입니다.
1배수로 작업하고 환경별 n배수 추출하기
모바일 해상도는 대개 360*640, 375*812 같은 숫자로 표현됩니다. 이것이 앞서 말씀드린 1 배수 단위로, 일반적인 경우라면 이 상태에서 모바일 디자인을 시작하게 됩니다. 이 경우 다양한 디바이스의 해상도에 대응할 수 있다는 장점이 있습니다. 여기서 주의할 점은 픽셀 단위와 1 배수 단위를 꼭 구분해야 한다는 것입니다. 픽셀 실제 단위로 이해하고 에셋을 추출(Export) 하면 어떻게 될까요? 예시의 왼쪽 a처럼 화질이 떨어지게 됩니다. 대다수의 모바일 디바이스는 2~4 배수 사이의 밀도를 지원하고 있는데요, 이는 이렇게 실제 환경에서 화질이 떨어져 보이는 현상을 방지하기 위해서입니다. 따라서 우리도 1 배수를 기준으로 디자인하되 내가 작업할 메인 디바이스 환경에 맞는 해상도를 이해하고 그에 맞게 에셋을 추출할 수 있어야 합니다.
기기별로 다른 해상도가 적용되었을 때의 예시 (https://developer.android.com/training/multiscreen/screendensities)
1 배수와 3 배수의 차이. 1 배수가 깨져 보이는 것을 확인할 수 있습니다.
모바일 해상도의 비율도 살펴보면 240*320px부터 1600*2560px까지 다양합니다. 그런데 이런 다양한 해상도에 에셋의 크기가 똑같이 적용되면 어떻게 될까요? 극단적으로는 아래처럼 보일 것입니다.
해상도를 고려하지 않고 작업한 경우, 화면과 같이 UI가 잘리거나 필요 이상으로 여백이 많아질 수 있습니다.이런 상황을 미연에 방지하고 유저에게 디바이스 비율에 맞는 UI를 보여주기 위해, iOS와 안드로이드는 자체적인 사이즈 표기법을 사용하고 있습니다. 이미 각 OS에 맞게 디자인한 이후에도 왜 디바이스나 OS 특성에 맞춰 에셋을 배수별로 추출(Export) 해야 하는지 알고 있어야 합니다. 아래에서 더 자세히 알아보겠습니다.
iOS의 해상도 이해하기
애플이 출시한 아이폰은 모두 iOS를 사용하고 있는데요, 주요 해상도 종류가 상대적으로 적어 안정적으로 UI를 구현할 수 있습니다. 스마트폰에서 클릭할 수 있는 버튼의 수가 적으며, 대신 제스처 위주의 인터랙션이 많습니다. iOS 디자인에 대한 자세한 내용은 애플의 Human Interface Guidelines(HIG)에서 확인하실 수 있습니다.
iOS에서는 pt라는 단위를 사용합니다. 디자인 작업 후 에셋 추출 시, 일반적으로 3배 해상도로 Export 합니다. (예를 들어 24pt의 아이콘이라면 iOS 개발자는 24, 48, 72px로 1~3배수로 추출해 사용합니다)
아래는 주요 iOS 디바이스의 1x 해상도입니다.
iPhone 12 - 390*844
iPhone X - 375*812
iPhone 8 - 375*667
iPhone 5 - 320*568
https://developer.apple.com/design/human-interface-guidelines/foundations/layout위 화면이 애플의 디자인 가이드라인인 HIG인데요, Foundation > Layout에서 iOS 디바이스별 해상도 단위를 확인할 수 있습니다.
안드로이드 해상도 이해하기
안드로이드는 단일 회사 제품인 iOS와는 상황이 다릅니다. 애플을 제외한 거의 대부분의 스마트폰 제조사에서 OS로 안드로이드를 사용 중인데요, 구글과 삼성 두 회사가 대표적입니다. 다양한 회사에서 사용하는 만큼 여러 해상도 케이스가 있고, 스와이프 등의 손가락 제스처 기반으로 동작하는 아이폰과 달리 하단 내비게이션 바 등 버튼을 실제로 눌러 조작하는 경우가 많다는 특징도 있습니다.
AOS에서는 dp와 sp라는 사이즈 단위를 사용합니다. 1~4배수로 추출해 사용합니다.
픽셀 등 구글의 디바이스는 자신들이 처음부터 설계한 Android OS를 그대로 사용하고 있고, 갤럭시 등 삼성의 경우 AOS 기반 OS인 One UI를 사용하고 있습니다. 여러 차이점이 있습니다만, 기본적으로 동일한 스토어(구글 플레이스토어)를 사용하며 버튼 기반으로 동작하는 등의 공통점이 있습니다.
아래는 주요 안드로이드 디바이스의 1x 해상도입니다.
360*640
360*740
360*800
https://developer.android.com/training/multiscreen/screendensities위 화면은 안드로이드 개발자 가이드 페이지입니다. HIG처럼 이곳에서 DPI 단위와 해상도 기준에 대한 설명을 확인할 수 있습니다.
피그마에서 해상도 적용하기
디자인 툴 피그마에서는 어떤 식으로 이런 해상도 관련 고민을 할 수 있을까요? 일단 피그마에 들어가 새 파일을 생성해 봅니다.
1. [F]를 눌러 프레임 툴을 활성화해 보세요.
2. 마우스 커서가 십자 모양으로 바뀌는 것을 확인할 수 있습니다.
3. 우측 디자인 패널에 해상도 관련 프리셋이 뜨는데요, 여기에서 다양한 종류의 디바이스명을 확인할 수 있어요. 프레임 툴이 활성화된 상태로 마우스를 드래그하면, 원하는 크기의 프레임을 만들 수도 있습니다.
4. 원하는 종류의 디바이스를 선택하면 완료!
이번에는 모바일 환경의 다양성, 해상도 등에 대해 대략적으로 알아보았습니다. 중간중간 애플과 구글의 해상도 가이드를 소개해 드렸지만 가이드 문서를 처음부터 정독하는 것은 추천드리지 않습니다. 입문 단계에서는 양이 너무 많기도 하고, 영어로 되어 있어 초반에 흥미를 잃어버릴 수 있기 때문입니다. 그래서 처음에는 ‘이런 가이드도 있다' 정도로 참고해 주시고 이후 디자인하며 애매한 부분이 있을 때 부분 부분 참고하는 것을 추천드립니다.
