규격에 맞게 한 거지?
- 문과생의 스마트빌딩 만들기 (8) -
내가 의도한 색이 화면에 나오지 않았고 원인을 찾기 위해 색과 디스플레이에 대한 공부를 아주 살짝 했다. 원인은 대충 알아냈지만 해결방법까지는 알 수 없어서 그냥 삼성 노트북을 기준으로 색감을 맞추기로 했다. 프로토파이에서 Splash Screen를 만든 후 첫 번째 기능인 도어벨을 만들고 개발자에게 보여줬다.
어때? 색깔 괜찮지! 구성 괜찮지!!! 할 수 있지?!!
쫌... 잘한거 같아!뭐, 색은 괜찮은 것 같아. 근데, 너 규격에 맞게 한 거지? px나 dp 표시가 안돼 있는데? 나한테 넘겨줄 때는 표시해서 줘. 그리고 또...
아니 잠깐만. px가 뭔데? 뭘 표시하라고...?
구글에 쳐보자. 'px dp android'. 촤르르륵 많은 포스팅 중에서 참고해서 추린 정리이다.
안드로이드 UI 치수를 다룬다면 꼭 알아야 할 용어는 크게 px, dp, sp로 정리할 수 있다. px는 pixel 즉, 화소의 기본 단위이다. 화소란 이미지, 영상 등 화면을 구성하는 최소 단위의 점을 말하며 점들이 많을수록 px의 숫자 크기는 커지고 해상도가 높다라고 표현한다.
dp와 dpi는 화면 밀도(Screen density)와 관련 있는데, 화면 밀도란 화면의 물리적 영역 내의 화소의 양을 의미한다. dpi는 dot per inch로 1인치에 들어가는 픽셀을 나타내는 단위이다. 숫자가 클수록 고밀도이며, 안드로이드에서 주요 dpi는 다음 사진과 같다.
mreadyblog 중 Designer’s Guide – Graphical Assets for Multiple DPIs. Why Android is not the iPhone예전에는 대부분의 디바이스 해상도가 mdpi(160 dip)이어서 1dp = 1px로 정의해도 됐다. 하지만 레티나 디스플레이 등 점점 높은 해상도의 화면이 나오게 되자 1px = 1dp라는 공식이 아닌 ‘계산기’를 사용해 값을 정의해야만 하게 된다. 여러 계산기 사이트 중에 여기가 한 번에 다양한 단위로 계산해 보여 주는 것 같아 추천한다. 혹은 Material Design에서 제공하는 Device Metrics(디바이스 수치 표)를 참고해도 좋다.
dp는 density independent pixel의 줄임말로, 직역하자면 픽셀 독립 단위이다. 화면의 크기가 달라도 동일한 비율을 보여주기 위해 안드로이드에서 정의한 단위로, 다양한 디바이스에서 일정한 크기의 이미지, 영상 등을 보여주기 위해 등장한 단위이다.
마지막으로 sp는 scale independent pixel의 줄임말로, dp와 비슷한 개념이지만 글꼴 크기의 범주에서 해당되는 단위이다. 기기의 시스템 설정에 있는 글꼴의 크기를 반영한다.
(아이폰의 수치가 궁금하다면 (http://leipiel.tistory.com/11)을 참고해도 좋을 것 같다.)
용어를 검색하고 포스팅 내용을 정리하다 보니 대부분의 글이 material design를 참고했다고, 저 사이트에 들어가서 자세히 살펴보라고 빠짐없이 말해서 나도 들어가 봤고 신세계를 만났다. 안드로이드의 틀, 뼈대, 기본 규격을 만나게 된 것이다.
안드로이드 운영체제를 사용하는 유저라면 어플들의 구성이 비슷비슷하다는 것을 느낄 것이다. 새로 나온 어플을 설치하더라도 바로 알아챌 수 있다. 예를 들어 톱니바퀴를 누르면 환경설정이라는 것, 햄버거 아이콘을 누르면 메뉴라는 것, 이 정도 높이라면 카드 탭이라는 것 등 우리는 앞서 많은 어플로부터 경험을 했고 눈에 익혔기 때문에 새로 익힐 것 없이 바로 무엇을 의미하는지 인식할 수 있다. 비슷비슷하다는 것은 어떤 기준이 있다는 것인데, 안드로이드 즉, 구글에서는 material design이라는 이름의 디자인 가이드라인을 만들어두었다.
썸네일의 사진 또한 material design에서 캡처했다. 이렇게 아이콘과 버튼의 크기 또한 가이드라인을 제시한다...!위에 사진과 같이 탭, 메뉴, 아이콘 등 모든 치수를 다 정해두었기 때문에 안드로이드 어플 디자인을 하려 한다면, 사용자에게 익숙함을 주기 위해서는 이 치수를 참고해서 만드는 것을 추천한다. 사용자는 이미 material design에 길들여져 있기 때문이다.
배우는 것은 끝났다고 생각했는데 한걸음을 내딛을 때마다 개념부터 시작하고 있는 현실을 마주하면서 배움에는 끝이 없다는 것을, 그리고 여전히 많이 부족하다는 것을 느꼈다. 더불어, material design 그러니까 가이드라인이 존재한다는 것을 알고 난 후에는 왠지 나의 상상력과 창의력에 제한을 두는 기분이었다. 나는 48dp가 아니라 50, 70dp로 하고 싶은데 유저(user)의 익숙함을 위해서는 48dp로 해야 하는 사실이 뭔가 착잡했다. 구글이 무료로 서비스를 제공함으로써 모두가 구글을 사용하도록 유도하더니 이제는 역으로 구글의 서비스에 맞춰서 디자인을 해야 하는 현실에도 씁쓸한 마음이 들었다.
프로토파이는 치수 표시가 불가능했다. px든 dp든 뭐라도 알아볼 수 있는 게 있어야 하는데 디자인까지만 가능해 치수를 알 수 있는 방법이 없었다. 프로토파이의 애니메이션 즉, object에 trigger를 설치해 response를 얻어내는 과정은 정말 참신했고 웬만한 화면 구현이 다 가능했다. 하지만 나는 개발자와 일을 하고 있었다. 내가 디자인한 것을 넘겨줘야 했기 때문에, 치수는 정말 필요한 부분이었다.
낯선 수치들과 material design이라는 신세계까지 만나서 스트레스에 스트레스가 배가 되고 있을 때, 옆에 다른 프로젝트를 하고 있는 팀원의 도움을 받았다. 바로 Adobe의 XD 설치였다.
https://www.adobe.com/products/xd.htmlAdobe XD의 정식 명칭은 Adobe Experience Design으로, 이름에서 드러나듯이 경험 디자인을 중점적으로 다룬다. 2016년 하반기에 베타 버전이 나왔고 2017년 10월 25일에 정식 론칭이 된, 정말 따끈따끈한 툴이다. Adobe의 다른 프로그램과 연동이 된다는 점이 가장 큰 장점이며 위의 gif에서 보듯이, 디자인뿐만 아니라 프로토타입 즉, 선을 이어 화면의 전환을 직관적으로 보여준다는 점이 xd만의 특별한 점이라고 볼 수 있다. 무엇보다 수치가 표시된다는 점에 나는 어서 갈아탔다.
Copyright 2018. newnha. All rights reserved.정말. 정말 단순하게 생각해도, 이 오브젝트가 어떤 크기의 대지에서 어느 정도를 차지하고 어느 위치에 있는지를 알려줘야 하는 데, 왜 나는 그 생각을 못했을까. 너무 바보 같았다. 프로젝트가 시작하던 9월. 미국에 발을 디뎠을 때부터 했던 걱정과 우려가 현실이 되어버려서 더 속상하고 힘들었다.
내가 내 몫을 못하면 어떻게 하지. 아는 척을 하는 게 들키면 어떻게 하지. 프로젝트의 속도를 따라가지 못하면 어쩌지. 그래서 내가, 팀에 피해를 주면 어떻게 하지. 내가 잘 모른다는 것을 나도 알고 그들도 알고 있었지만 입 밖으로 내뱉지 않은, 암묵적으로 알고 있던 사실이 수면 위로 드러났다는 생각이 들자 그 생각에만 사로잡혔다.
간간이 들던 불안하고 스스로를 힘들게 하는 생각을 다른 것으로 덮어보려고 했지만 의식하지 않겠다고 생각한 순간부터 의식하게 되었고 지속된 스트레스 탓에 불면증과 소화불량이 나타났다.
나의 부족함과 무지함이 준비되지 않은 상황에서, 날 것으로 마주한 순간, 앞서 들었던 9월에 들었던 생각과 감정이 한 번에 밀려와 하루 종일 울기만 했다.
