디바이스별 최적화를 위해
어쩌면 멈추지 않고 지속되어야 할 공부
공간 디자이너로 활동했던 나는
UXUI디자이너로 전향하기 위해 여러 공부와 리서치를 진행했었다.
'이 정도면 일할 수 있겠어'라는 생각이 들 때 나는 새로운 입사를 결정했다.
하지만,
막상 UXUI업무를 진행하다 보니 리서치와 서적, 여러 강의 등에서
미리 알지 못했던 이슈들을 마주했다. 여러 가지가 있지만 그중 가장 번거롭고 어려웠던 건
디바이스별 최적화, 즉 디자인 해상도 문제였다.
어떤 디바이스를 사용하든지 화면이 일그러지거나 균형이 깨지지 않게 하는 작업이었다.
개발자와의 소통, 여러 가지 리서치를 진행하다가 내가 내린 결론은
꾸준히 디바이스별 최적화를 위해 강구해야 한다라는 결론을 내렸고
해결책을 강구하는 방법에 대해 정리를 하기 시작했다.
디바이스별 최적화가 왜 안될까?
이유는 디바이스별 환경이 모두 다르기 때문
이유는 간단했다. 디바이스별 환경이 다르기 때문이다.
여기서 환경은 해상도와 OS별 개발환경을 얘기한다.
실제로 이슈는 대게 개발과정과 디자인 리뷰에서 발견되었다.
"A 디자인이 갤럭시에서는 000 게 보여요~"
"아 그래요? 아이폰에서는 잘 나와요"
"웹 디자인이 사이즈가 너무 큰 거 같아요~"
"저는 삼성 노트북을 쓰는데 여기선 규격이 잘 맞게 나오네요?"
"태블릿 PC 사이즈의 기준을 0000px로 잡으면 될까요?"
등 디바이스별 이슈는 꾸준했고 이를 해결하기 위해 데이터를 수집하며
해결책을 강구하기 시작했다.
Desktop - 데스크톱
해상도 점유율을 확인해야 한다
해상도 점유율을 확인해야 하는 이유는 효율적인 디자인을 하기 위해서이다.
전 세계적으로 사용되는 해상도는 약 10가지가 넘는다. 이 모두를 만족시키면 좋겠지만
어렵고 적지 않은 시간이 필요하다. 따라서 가장 많이 사용되는 해상도 1~3순위를 체크하는 것이 좋다.
해상도 점유율은 statcounter라는 사이트를 참고하면 좋다.
해당 사이트에 Screen Resolution이라는 부분에 들어가면 디바이스별 점유율을 확인할 수 있다.
출처 : Statcounter-Desktop Screen Resolution Stats Worldwide위 데이터를 보면 앞도적으로 1366x768과 1920x1080 이 많다는 걸 알 수 있으며
가장 작은 데스크톱 해상도는 1024x768인 것을 확인할 수 있다.
이 과정에선 '아~ 사용자가 이 해상도를 주로 사용하는구나'라는 정도만 알아두면 좋다.
두 사이즈로만 디자인했을 땐 그밖에 해상도를 대응하기 어렵기 때문이다.
기준이 되는 Container 영역을 찾아야 한다
업무 진행 중 1366x768과 1920x1080 이외에 작은 모니터로 보는
사람들에 불편함을 알게 되었고 보완할 수 있는 해결책을 찾기 시작했다.
디자인 작업 기준 규격 변경이 시급한 상황이었다.
리서치 끝에 나는 대표적인 IT회사에 디자인 규격을 살펴보기 시작했다.
*웹에 개발도구를 사용해 체크했음
<네이버>
네이버는 1190px에 container(필수 콘텐츠를 포함하는 공간)을 가지고 있었다.
<구글>
구글은 1280px에 container(필수 콘텐츠를 포함하는 공간)을 가지고 있었다.
왜 1024px에 맞추지 않았을까?
나의 추측으론 해상도 인지도에 이유가 있을 거 같았다. 가장 작은 사이즈인
1024x768 사용자수는 적다. 모든 해상도 사용자들을 만족시키기 위해 디자인을 하다 보면
균형이 깨질 거 같단 생각이 들었고, 나는 필수 콘텐츠가 포함할 사이즈를 1200x975 px로
결정하고 디자인을 진행했다.
영역을 벗어날 수밖에 없는 요소들은 스크롤을 감안하고 유연하게 대처했다.
OS별 환경이 다르다는 걸 인지하자
무엇보다 기기별, OS별 환경이 다르다는 걸 인지 하는 게 중요하다.
가장 좋은 방법은 디바이스를 종류별로 가지고 있으면서 확인하면 좋겠지만,
시간적, 물리적으로 노력 소비가 크니 합의점을 찾는 게 중요하다.
Tablet - 태블릿 PC
웹에서 반응형 쿼리로 넘어가는 기준 px를 결정하자
내가 디자인하는 서비스는 앱을 가지고 있지 않는 웹앱 형식의 서비스였다.
사용자의 디바이스에 따라, 확대 축소에 따라 반응형이 되거나 데스크톱 형식이 되는 구조였다.
이슈 발견은 버튼 클릭 시 작은 창이 등장하는 UI에서 나타났다.
개발자 : 버튼 클릭 시 작은 창이 나오시길 원하시는 건가요?
디자이너 : 네, 000는 사용자가 가지고 있으면서 자주 봐야 해서 작은 창으로 전달했습니다.
개발자 : 음.. 크기가 태블릿 PC과 겹치네요. 이 사이즈의 창은 보통 반응형으로 나오게 코딩을 해놔서요..
처음 UI를 진행하며 이런 이슈를 겪던 나는 개발자와 합의점을 찾기 위해 대화를 했다.
그 결과 태블릿 PC로 넘어가는 즉, 반응형으로 넘어가는 기준 px, 분기점을 잡기로 했다.
<전체 태블릿 PC 해상도>
출처 : statcounter-Tablet Screen Resolution Stats Worldwide태블릿 PC의 해상도는
- 768x1024 (가장 많이 사용)
- 1280x800 (가로 사이즈가 가장 큰 태블릿)
- 800x1280
- 601x962
- 962x601
- 600x1024 (가로 사이즈 가장 작은 태블릿)
- 834x1112
- 1024x768
- 1024x1366
순으로 많이 사용된다. 이 부분에서 768x1024가 다른 해상도에 비해
현저히 많이 사용되는 것을 볼 수 있다.
따라서, 개발자와 논의 끝에 Desktop : 1201 ~ | Tablet : 601 ~ 1200 | Mobile : ~ 600
로 진행하기로 결정했다.
*여기 나오는 px은 Contain 영역이 아닌 디바이스의 가로 사이즈를 말한다.
아직까진 이슈가 발견되지 않았지만, 완벽한 분기점이 아니므로 계속 리서치가 필요하다.
모바일과 통일성 있는 구조의 디자인을 하는 것이 좋다
태블릿과 모바일 모두 터치를 이용하는 디바이스로
통일성 있는 구조로 디자인하는 게 좋다고 생각한다.
태블릿이 크다는 이유로 세세한 버튼을 하나 더 만드는 디자인은 비효율적이다.
내가 현재 담당하고 있는 서비스는 태블릿의 사용량이 모바일 사용량보다 많이 적어
거의 동일한 구조이며 팝업창이나 모달 디자인만 다르게 진행된다.
이 부분은 서비스별 사용자들의 디바이스 점유율 차이를 보고 판단하는 게 좋다고 생각한다.
Mobile - 모바일
그리드 시스템을 참고하자
우연히 그리드 시스템이 반응형 웹앱에 대응하기 좋다는 글을 발견했다.
아마도 디바이스별 규칙적인 콜롬을 가지고 있으면
일관성과 통일성이 있기 때문인 거 같다.
나의 경우, 그리드 시스템을 100% 활용하지 않는다. 대신 디자인의 통일성과 일관성을
지키기 위해 그리드를 참고하며 디자인한다.
양옆에 마진은 반드시 가져간다. 모바일은 양옆 20px, 태블릿 pc는 40px을 지킨다.
그리드에 관련해서는 디자인 강좌 사이트인 Designbase에 유용한 강의가 있어
그리드에 대해 이해할 수 있었다.
http://designbase.co.kr/sketch-4/
갤럭시와 아이폰에 환경은 다르다.
OS별로도 디자인 구현이 다르다는 걸 알게 되었다.
플로팅 버튼 구현 시 애플에선 키보드 화면이 나올 때 뒤에 배치되지만,
갤럭시에 경우 키보드를 따라 위로 올라가는 걸 발견했다.
갤럭시와 아이폰의 액션 버튼 구현이 다른 거 같았다.
이 부분에 대해선 현재 리서치 중이다.
위 경험을 통해 디자인을 완료하여 개발자에게 전달할 때 내가 가진 디바이스뿐만 아니라
여러 디바이스로 Text QA를 진행하면 좋다는 걸 알게 되었다.
새로운 제품 출시를 그냥 지나치지 말자
다른 직종에 비해 디자이너는 장비의 영향을 많이 받는 직군이라고 생각한다.
실제로 모니터 구매 하나로, 신제품 기기 하나로 디자인 속도가 빨라지거나
퀄이 높아지기도 한다.
기기별 해상도 최적화에서도 이 부분이 적용된다는 걸 알게 되었다.
나는 아이폰6s를 4년 넘게 사용 후 아이폰 12를 구매했다.
구매와 동시에 나는 내가 지금껏 구버전에 디자인을 해온 게 아닌가 라는 충격을 받았다.
물론, 모든 사용자가 신제품을 사용하진 않으며 신제품을 계속 사들이는 건 비추천이다.
그렇지만 신제품의 존재에 대해 인식해야 한다는 걸 강하게 깨닫는 중이다.
신제품 출시 때 가까운 애플 전문 스토어나 삼성디지털프라자를 방문해 구경을 하는 과정도
도움이 되며 인터넷을 통해 정보 습득이 가능하니 유튜브나 공식 홈페이지를 통해
간접 체험하는 것도 좋은 방법이라고 생각한다.
<최적화를 확인할 때 유용한 사이트>
https://www.responsivedesignchecker.com/
https://bluetree.ai/screenfly/
할 수 있는 최적화는 모두 하자.
정리하다 보니 아직 더 많은 리처시와 시도가 필요하다는 걸 깨달았다.
동시에 디자이너란 직업, 참 쉽지 않구나 라는 생각도 들었다.
디자이너는 다각도로 보는 시선이 필요하다.
사용자가 겪는 문제에 공감해야 하며, 이를 해결하기 위해 사용자와 서비스를 연구한다.
동시에 여러 리서치과 시도 끝에 해결책을 정립하고
해결책이 반영될 수 있는지 기술적 고민도 필요하다.
이 과정에서 해결책이 담긴 디자인이 어떤 환경에 세워질지 연구해야 한다는 걸
이번 기회로 깨닫게 되었다.
때론 이 과정이 지치지만, 나는 언젠가 더 많은 시각을 가지고
사용자들을 문제가 사라진 경로로 안내할 거란 기대와
더 많은 기술과 사용자들을 연결할 거란 기대를 가지며 오늘도 고민하며 디자인한다.
