사용자를 사로잡는 UXUI 실전가이드
Chapter2
2-1
해상도 이해하기
해상도: ‘화질’ 스크린의 선명도
해상도를 제대로 이해하기 위해서는 먼저 픽셀이라는 개념을 알아야 한다. 픽셀은 Picture Element의 준말로 화면 또는 이미지에 쓰인 최소 단위를 뜻한다. (화소는 픽셀과 동의어이다.)
픽셀 수는 그대로인 상태에서 크기만 커지고 공간이 생겨 픽셀의 가장자리가 거칠어지는 현상: 계단 현상
깨짐 현상을 최소화하기 위해 곡선이나 사선 경계에 중간 색상 픽셀을 첨가해 매끄럽게 만드는 기술: 안티 앨리어싱
포토샵이나 페인터 같은 그래픽 프로그램으로 제작한 파일들은 비트맵 방식으로 계단 현상이 생길 수 있는 반면, 확대와 축소를 해도 경계가 거칠어지지 않은 벡터 방식도 있다.
벡터는 수학적 연산으로 선분과 면을 만들기 때문에 확대해도 깨지지 않으며 크기를 키워도 용량이 변하지 않는다는 특성이 있어 크기 변화가 자유롭고 이미지 손실이 없어야 하는 로고, 캐릭터, UI 디자인 등에 많이 활용된다.
•
목적에 맞는 해상도 설정
디지털을 다루는 디자이너에게 해상도란, 출판 편집 디자이너의 종이 규격과도 같다.
보편적으로 사용하는 해상도가 존재하는데, 실무에서는 이 보편적인 해상도를 파악하기 위해 ‘스탯카운더’라는 웹 트래픽 분석 사이트를 이용한다.
최근 3년간 한국에서 가장 많이 사용한 데스크톱 해상도를 집계했더니 1920X1080이 압도적으로 높게 나왔다. 다음으로 많이 사용한 해상도는 1366X768이 나왔는데, 이와 같은 자료를 기준으로 삼아 디자인하는 웹 화면 최소 해상도를 1366X768 이하로 설정하면 70%에 가까운 사용자의 모니터 환경을 고려할 수 있다.
만약 일평균 이용자 수가 높은 대형 포털의 메인 화면을 디자인한다면 그보다 더 낮은 해상도, 즉 저사양 모니터까지 고려해야 할 것이다. 같은 1%라도 ㅂ이용자 수에 따라 무시할 수 없는 수치가 되기도 하기 때문이다.
사용자를 고려하지 않고 ‘요즘 많이 쓰인다’는 이유로 해상도를 결정한다면 문제가 발생한다. 중장년 또는 노년층을 대상으로 한 서비스의 해상도에 최신 기기만 고려하면 문제가 생길 수 있고, 반대로 MZ 세대가 대상인 서비스에선 지나치게 낮은 해상도까지 고려할 필요가 없을 것이다.
2-2
픽셀 밀도와 선명도의 상관관계
픽셀의 많고 적음을 가리켜 ‘픽셀 밀도’라고 하는데, 픽셀 밀도는 같은 면적 안에 픽셀이 얼마나 있느냐에 따라 달라진다.
들쑥날쑥한 선명도에 이용자는 혼란과 불편을 겪을 수 있어, 픽셀이 들어가는 최소 면적을 1인치(2.54cm)로 정했다. 이 최소 면적을 단위로 만들었는데 이 단위를 가리켜 픽셀 밀도 혹은 ppi라고 한다. 같은 면적이라도 ppi가 높을수록, 즉 픽셀이 더 많을수록 세밀한 표현을 할 수 있다.
72ppi 는 육안으로 모니터를 봤을 때 선명함을 식별할 수 있는 경계선이다. 따라서 기준 ppi에서 픽셀을 더해도 우리 눈은 ‘더 선명해졌다’.는 걸 인식하지 못하기 때문에 웹에서는 72ppi보다 굳이 픽셀 밀도를 높일 필요가 없는 것이다.
•
화면 크기에 따른 픽셀 밀도 차이
같은 면적이라도 픽셀 밀도가 높으면 픽셀이 압축돼 크기가 작아지는 속성이 있다.
•
픽셀의 다양한 표현 방식
1단계 논리적 해상도
논리적 해상도는 순수한 픽셀 밀도를 말한다. 보통 스케치나 피그마 같은 프로토타이핑 툴에서 모바일 화면을 디자인할 때 기준 단위가 된다. 운영체제에 따라 논리적 해상도, 즉 기준 단위를 다르게 칭하는데 iOS에서는 PT라고 하며 안드로이드는 DP라고 한다. 즉, 논리적 해상도로 디자인을 하면 해상도가 다른 기기라도 디자이너가 생각한 비율과 동일하게 출력할 수 있다.
2단계 물리적 해상도
물리적 해상도는 레티나 디스플레이(x2, x3) 기술이 적용되는 단계다. PT나 DP 같은 논리적 해상도로 디자인을 했다면 이 단계에서 기기에 정해진 배율을 곱해 픽셀을 얻는 것이다. 이 단계를 다른 말로 래스터화라고도 하는데, 쉽게 말해 논리적 해상도의 벡터 속성이 픽셀화되는 것이다. 물리적 해상도의 배율은 기기마다 정해져있기 때문에 디자이너는 논리적 해상도(x1)로만 디자인해 두면 기기마다 다른 배율을 일일이 신경 쓸 필요가 없다.
3단계 다운 샘플링
늘어난 픽셀을 줄여 기기에 맞는 해상도로 조절하는 걸 다운 샘플링이라고 한다.
4단계 기기 표현
마지막 단계는 실제로 기기에 표현되는 시점이다. 이 단계에서는 기기별 ppi가 다르다는 것을 이해해야 한다.
같은 화면이라도 ppi에 따라 밀도가 달라지며 이는 선명도에 영향을 미친다.
•
iOS의 PT와 안드로이드의 DP/SP
OS는 대표적으로 iOS와 안드로이드가 있다.
먼저 iOS의 논리적 해상도를 Points, 줄여서 PT라고 부른다. PT는 1인치를 72로 나눈 값이다. 아이폰은 3가지 픽셀 밀도를 가지고 있으며 디자인 기준은 1pt = 1px에 맞추면 된다.
안드로이드의 기준 단위에는 DP와 SP가 있다. DP는 Device independent pixel의 약자로, 픽셀 밀도로부터 독립된 단위다. SP는 Scale independent pixel의 약자로, 글자 크기와 폰트만 독립적으로 변환이 가능하다는 뜻이다.
안드로이드의 픽셀 밀도는 6가지가 존재하는데, 디자인은 1배율인 mdpi에 맞추면 된다. mdpi를 이용하면 1dp = 1px로 맞출 수 있기 때문이다.
2-3
모바일 서비스를 위한 앱 개발 과정 이해하기
앱은 개발 방식에 따라 크게 네이티브 앱, 모바일 웹앱, 하이브리드 앱으로 나눌 수 있다.
•
네이티브 앱
네이티브 앱은 우리가 보통 앱이라고 부르는 모바일 서비스로, 하나의 운영체제에서만 동작한다. 가령 안드로이드 버전으로 개발하면 iOS에서는 동작하지 않는 식이다. 모든 운영체제에서 동작하게 하려면 각 운영체제에 맞는 언어로 각각 개발해야만 한다. 또한 사용자가 직접 앱을 다운로드해야 하기 때문에 실시간 업데이트가 어렵다. 운영체제에 관계없이 모든 사용자를 고려한다면 개발 리소스가 2배 이상이 든다는 단점이 있지만, 각 운영체제에서 제공하는 강력한 기능을 활용할 수 있다는 장점이 있다. 높은 사양의 그래픽을 구현할 수 있고 빠른 속도를 자랑한다. 네이티브 앱은 고성능 게임이나 카메라, GPS 등 센서를 활용한 앱 제작에 많이 활용된다.
•
모바일 웹앱
모바일웹앱은 사파리나 크롬 같은 인터넷 브라우저에서 실행되는 웹사이트다. 대표적으로 ‘네이버’나 ‘다음’ 같은 포털 사이트가 있다. 사용자가 스토어에서 앱을 다운로드하지 않아도 되는 데다 브라우저에 접속만 하면 연결되기 때문에 실시간으로 업데이트된다. 단, 웹앱은 말 그대로 웹 기반으로, 모바일 기기에 최적화되어 있지 않기 때문에 네이티브 앱에 비해 속도가 느리고 성능도 다소 떨어진다.
•
하이브리드 앱
하이브리드 앱은 네이티브 앱과 웹앱의 장점을 모두 가진 형태다. 겉으로 보기에는 네이티브 앱 같지만 실제로는 웹을 기반으로 하고 있다. 콘텐츠는 HTML 방식으로 제작하며 최종 앱 배포에 필요한 패키징 처리는 안드로이드, iOS에서 개발한다.
하이브리드 앱은 앱 안에서 웹 페이지를 불러오는 방식이므로 한 번 설치하면 네이티브 앱이 가지고 있는 업데이트의 번거로움이 해결된다. 하지만 사용자의 네트워크 환경에 따라 속도가 일정하지 않다는 단점이 있다.
2-4
와이어프레임과 프로토타입의 이해
와이어프레임과 프로토타입은 웹/앱 서비스의 기능과 디자인을 검증하고 개선하기 위한 단계로, 출시 전 반드시 거쳐야 하는 관문이기도 하다. 둘은 제작 시기와 용도 그리고 의미에서 큰 차이가 있어 정확히 구별할 필요가 있다.
•
와이어 프레임
와이어프레임이란 ‘선으로 틀을 잡는다’는 뜻이다. 건축 설계 도면을 떠올리면 쉽게 이해할 수 있다. 이미지만으로 웹/앱의 구조와 용도를 파악하는 것이 와이어프레임의 목표다. 와이어프레임은 이해 관계자들이 화면의 기능과 구조 등을 대략적으로 이해할 수 있으면 성공이다.
와이어프레임은 화면 간 흐름을 쉽게 파악할 수 있도록 각 페이지를 따로 설계하는 것이 원칙이다. 협업을 위한 공유 문서의 일종이므로 누가 봐도 이해할 수 있는 구조를 지향해야 한다.
와이어프레임에는 애용, 구조, 흐름, 기능 등이 포함된다. 실무에서는 손그림이나 PPT를 이용한 가벼운 형식을 선호한다. 와이어프레임은 새로운 서비스 출시 전에도 유용하지만, 기존 서비스를 보완할 때도 유용하다.
•
프로토타입
와이어프레임이 설계 도면에 가까웠다면 프로토타입은 실제와 비슷하게 입체적으로 구현한 모형에 가깝다. 이때 구현 단계에 따라 피델리티 레벨을 나눌 수 있다. 피델리티란, ‘성실도’ 또는 ‘충실도’라는 뜻으로, 말 그대로 구현한 프로토타입의 기능과 디자인을 얼마나 출실하게 구현했느냐를 뜻한다. 구현한 수준에 따라 로우 피델리티와 하이 피델리티로 구분한다.
로우 피델리티는 간단한 인터랙션을 테스트할 수 있는 수준이다. 화려한 모션이나 세세한 기능보다 페이지와 페이지의 상관관계를 파악하는 것이 중점이다. 이를 통해 페이지 간 어색한 흐름을 잡아내는 것이 목표다.
하이 피델리티는 실제 출시할 서비스와 거의 유사할 정도로 대부분 기능을 구현한 수준이다. 하이 피델리티 프로토타입을 제작하는 이유는 개발 비용을 낮추고 높은 수준의 피드백을 얻기 위함이다.
제작자는 참여자가 프로토타입을 사용할 때 느끼는 어려움이나 답답한 부분들을 관찰한다.
•
프로토타입 제작 툴
현업에서 많이 쓰는 프로토타입 툴로는 피그마, 스케치, 오리가미와 프로토파이 등이 있는데, 툴마다 특징과 장단점이 다르므로 하나씩 살펴보며 팀과 서비스할 제품의 특성에 맞는 것을 선택해 보도록 하자.
•
스케치
리사이징에 제한이 있는 비트맵 기반의 포토샵과 달리 벡터 기반의 스케치는 1 배율로 작업할 수 있다. 스케치는 여러 프로토타입 툴 중 현재 가장 많은 사용자를 보유하고 있다. 그만큼 커뮤니티 규모도 크고 활성화돼 있어 초보자도 관련 정보를 쉽게 얻을 수 있다. 다만 맥 OS만 정식 지원하고 있어 윈도우 사용자에겐 제한이 있다.
•
피그마
피그마는 현재 가장 각광받고 있는 프로토타입 툴로, 웹을 기반으로 해 앱 설치를 하지 않아도 사용할 수 있다. 피그마의 가장 큰 장점은 실시간 협업 시스템이다. 협업자와 링크를 공유하는 것만으로 하나의 아트보드에 여러 명이 접속해 실시간으로 공동 작업을 할 수 있다.
•
오리가미
오리가미는 페이스북이 만든 프로토타입 툴로, 디자이너가 각 요소와 효과를 배치한 다음 선으로 연결해 인터랙션과 애니메이션을 구현하면 개발자가 이를 수치로 확인할 수 있는 툴이다. 무료라는 장점이 있으나 쿼츠 컴포저라는 개발 방식을 기반으로, 진입 장벽이 다소 높은 편이라 국내 보급률은 낮은 편이다.
•
프로토파이
프로토파이는 지금까지 소개한 프로토타입 툴 중 유일하게 국내에서 제작한 툴로, 현실적 물리성을 반영한 인터랙션 모델 덕분에 진입 문턱이 비교적 낮아 활용도가 높은 편이다. 프로토파이의 가장 큰 특징은 디자인 요소(Object) + 작용(Trigger) + 반응(Response)이라는 3가지 개념으로 코드 없이 인터랙션을 구현할 수 있다는 것이다.
•
효과적인 유저 스토리 작성법
와이어 프레임 제작이 끝났다면 이를 개발자에게 효과적으로 전달할 필요가 있다. 이때 ‘유저 스토리’라는 설명 방식을 알아 두면 용이하다. 유저 스토리란 개발에서 ‘요구 사항’이라고 부르는 시스템의 기능 설명을 ‘사용자 관점에서 이야기하는 것’을 말한다. 서비스를 만들다 보면 다양한 태스크(Task)가 생기는데 이를 각각 유저 스토리로 작성해 두면 개발자와 완성도 높은 커뮤니케이션을 할 수 있다.
a.
좋았던 점
디지털 디자인에 대해 꼭 필요한 픽셀과 해상도에 대한 지식을 알 수 있어 좋았다. 흔히 말하는 1920X1080 해상도가 무엇인지, 픽셀 밀도에 따라 선명도는 어떻게 되는지 등을 제대로 알 수 있게 되었다. 그리고 앱을 개발하는 과정에서 개발자와 협업할 때 앱에 어떤 종류가 있는지, 프로토타입 툴에는 또 어떤 종류가 있는지도 알 수 있었다. 책이 입문자의 눈높이에 맞게 쉽게 설명되어 있었고, 이해를 돕기 위해 사진이 많이 첨부되어 있어서 비전공자로서 읽어도 큰 부담이 없었다.
b. 아쉬웠던 점
책에 관하여 아쉬운 점이라기보다는 개인적으로 2-2 챕터에서 픽셀에 관한 이야기를 다루는데, 숫자가 많이 나와서 읽고 이해하는 데 꽤 많은 시간이 소요되었다…
c. 알게 된 개념
픽셀과 해상도, ppi, 모바일 서비스 앱의 종류, 와이어프레임과 프로토타입 툴의 종류… 등 UXUI 디자이너의 실무 용어와 관련된 많은 개념들을 알게 되었다.
