brunch

라이킷 1,041 댓글 10

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 플러스엑스 May 23. 2018

해상도의 기준이 있어야 UI디자인을 시작할 수 있다

author - 파워포인트러버│UX 디자이너

Plus X UI팀의 입문자를 위한 피그마 디자인 메뉴얼

“000백화점 모바일앱을 리뉴얼 하고 싶습니다. "

“000 멤버스 모바일앱/웹과 PC 웹사이트를 리뉴얼 하고 싶어요”

위와 같이 업무 의뢰를 받게 되면 기본적으로 현재의 사용 환경을 먼저 파악하고 시장 트렌드에 맞다고 판단되는 해상도를 최대와 최소 기준을 찾는 것이 가장 좋다.

* 해상도
화면의 정밀도를 나타내는 지표이다. 모니터나 스크린에서 시각요소를 표현하는데 수많은 점(이하 픽셀;Pixel로 칭한다.)이 필요한데, 가로 한 줄에 들어가는 픽셀 수 X 세로 한 줄에 들어가는 픽셀의 수로 해상도에 대해 커뮤니케이션한다. (e.g. 1920*1080px, 1366*768px 등)

해상도는 (1) 클라이언트가 명확한 해상도의 기준을 제시하는 경우가 있고, 어떤 경우에는 (2) “그냥 플러스엑스에서 알아서 해주세요~”라고 하는 분도 더러 있다. (1)의 경우, 트렌드에 맞는 해상도를 제시한다면 고민 없이 진행을 하지만, 터무니없이 낮은 해상도를 제시한다면 설득이 필요하다.

이때 필요한 것이 현재의 스크린 점유율이다. 다행히도 스크린 점유율은 아주 쉽게 StatCounter (gs.statcounter.com : 브라우저 사용 현황을 통해 유저의 컴퓨터 환경을 파악하는 웹 트래픽 분석 기업)에서 확인할 수 있다. 아래 StatCounter의 통계조회 자료를 살펴보자.

최근 1년간의 통계자료를 보면 모바일은 360*640px, PC의 경우 1920*1080px이 40%대의 높은 비율을 차지하고 있다. 그렇다면 위의 통계에 의해 모바일은 360*640px, PC는 1920*1080px을 기준으로 잡으면 되는 걸까?

모바일의 경우, 스마트폰이 등장하기 시작했을 때에는 Adobe Photoshop을 이용해 Pixel 기반으로 작업하여 디바이스마다 대응을 최대한 했지만 지금은 Sketch(디자인 툴)나 Zeplin(가이드 플러그인)을 쓰면서 Vector 기반으로 작업을 하기 때문에 여러 해상도를 대응할 필요가 없어졌다. 기본원리에 의하여 다시 말하면, Pixel 기반으로 작업을 했을 때는 작업된 컴포넌트를 확대하거나 과하게 축소하면 픽셀이 뭉개지는 현상이 있었다. 하지만 지금은 Vector 기반으로 디자인을 하기 때문에 어떤 사이즈로 하던, 컴포넌트가 뭉개질 염려는 하지 않아도 된다.

그래서 플러스엑스에서는

모바일은 안드로이드 기준으로 360*640px, iOS는 375* 667px 기준으로 디자인을 한다. 안드로이드를 먼저 할지, iOS를 먼저 할지는 클라이언트의 요구에 따라 진행한다. 안드로이드(360*640)를 먼저 작업하는 경우에는 아래와 같이 안드로이드 기준으로 먼저 제작하고, iOS(375*664px)의 늘어난 여백(375px-360px=15px)만큼 우측과 하단으로 늘려서 대응을 하고 있다.

앞서 말한 안드로이드와 iOS의 가로 픽셀 수치 x 세로 픽셀 수치로 제공하는 해상도 기준은 제조업체가 제공하는 픽셀 밀도의 기본값 정도로 이해를 하면 된다.

안드로이드의 경우 화면에 표시될 아이콘은 총 6개(0.5 배수, 1 배수, 1.5 배수, 2 배수, 3 배수, 4 배수)의 사이즈의 이미지가 필요하다. 이때 Sketch(디자인 툴)를 이용하여 위에서 말한 기본값으로 디자인을 시작하게 되면, 에셋(개발에 사용될 소스)을 추출할 때 원하는 크기로 확장하여 사용할 수 있다.

iOS도 마찬가지로 375*667px로 작업을 하면 필요한 아이콘 개수를 원하는 배수로 추출할 수 있다. 추출하려는 아이콘의 확장 배수가 소수점 두 자리까지 나오는 경우 경계선이 흐릿하게 나올 수 있기 때문에, 현재(2018.03.) 기준에서는 안드로이드는 360*640, iOS는 375*667를 기준으로 디자인을 하고 있다. 스케치에서 객체를 선택하고 우측 하단에 ‘Make Exportable’을 선택하면 컴포넌트를 원하는 사이즈와 포맷으로 추출할 수 있다.

PC 웹사이트의 경우에는 점유율이 높은 해상도를 기준으로 작업하는 경우가 많다.

Statcounter의 통계에 의하면, 1920*1080px 해상도의 모니터 점유율이 45.29%로 가장 많기 때문에 플러스엑스에서는 1920*1080px을 기준으로 진행을 하는 경우가 많다. 그런데 다시 한번 아래의 표를 살펴보자. 1366*768px이 6개의 점유 항목 중 최소 해상도이며 점유율 순위로는 2위를 차지하고 있다.

다시 말하면 1366*768px을 최소 해상도 기준으로 잡게 되면 사용자 환경의 70% 이상은 대응을 할 수 있다는 말이 된다.

웹사이트는 작업 시 주의해야 할 점이 있다.

대부분의 사용의 웹브라우저 화면에는 타이틀바 영역, 주소 검색바 영역, 윈도우 PC의 경우 하단에는 시작표시줄, 우측에는 스크롤바가 표시되기 때문에 이 영역을 모두 고려하여 작업해야 한다. 1920px 해상도를 기준으로 실제 웹사이트를 캡쳐해 보았다.

위의 경우에는 1920*1080px 모니터를 사용하는 실제 웹 영역은 1903*975px, 1366px 모니터를 사용하는 유저의 경우 스크롤바 영역을 제외하면 가로폭이 1350px이 된다. 하지만 사용자마다 디스플레이 설정 환경이 다르기 때문에 절대적인 값이 아님을 유의하고 비교적 표준인 화면을 기준으로 판단하여 작업하는 것이 좋다.

지금까지 해상도의 기준에 대해서 알아봤다.

오늘 일했던 대로 내일을 맞이하기가 낯설 만큼 시장이 빠르게 변화하고 있다. 그래서 이 분야에서 만큼은 트렌드에 민감해져야 하는 것이 이 업계에서 일하는 사람들의 숙명인 것 같다. 이후 또 다른 해상도가 등장하고 업데이트된 개발 가이드에 따라 작업 기준은 계속해서 맞춰가야 할 것이다.