스케치와 가이드
신입에게 알려주는 스케치, 가이드 잡기
Sketch 63
모바일보다 데스크탑에서 보는게 좋습니다.
시어머니 김장 김치 하듯이 대강~, 적당히 알려주면 이렇다.디자인을 하다가 보면 가끔 가이드를 어떻게 잡는지 물어보시는 분이 있습니다.
모바일의 경우는 선을 하나 긋고, 선에 맞춰서 오브젝트와 컴포넌트를 배치해 나가시면 됩니다.
스케치에서는 칼럼 그리드가 Layout,
모눈 종이 그리드는 Grid 입니다.
스케치는 Grid, Layout, Ruler, Guide를 잡을 수 있습니다. 스케치의 레이아웃 세팅을 꽤 정교해서 여러 가지로 도움이 됩니다. 하지만 문제는 여기서 끝나지 않습니다. 편집, 인쇄 디자인을 할 때는 칼럼 그리드가 유용해서 콘텐츠를 배치하기 쉽고, 다른 인쇄 매체로 내용을 옮길 때도 좋은데, 디지털 디자인에서는 칼럼 그리드가 변할 수 있습니다.
모바일 디자인은 화면의 크기가 변하기 때문입니다. 그래서 한가운데로 잡으라고 해도 문제가 생기고, 양 옆에 간격만 조절하라고 해도, 모호한 상황이 생깁니다.
당장 스케치를 실행하고 아이폰 아트보드를 보면, 375pt입니다. 그럼 가운데로 하면 0.5pt는 어떻게 하는지 궁금합니다. 그리고, 양 옆의 여백은 해상도마다 다른 건지, 아니면 고정 인지도 궁금해집니다.
대체 좌우를 몇 PT? DP? PX? 얼마나 여백을 주란 말이냐??
그런데 대부분의 사수에게 물어보면, 대수롭지 않게, 적당히 하라는 말을 듣는 경우가 많습니다.
이제부터 그 이유를 구체적으로 알려드리겠습니다.
먼저 아트보드 사이즈부터 봐야 합니다.
대표적인 그래픽 툴인 스케치와 포토샵에서 제공하는 아트보드 크기입니다. 숫자가 굉장히 많습니다. 웹디자인이나 모바일 디자인을 하려면, 이 크기 중 하나를 골라서 디자인을 시작해야 합니다. 웹디자인보다 모바일 디자인은 더 다이나믹합니다.
일단, 여백이나 간격은 대강 했다고 치고, 전체 과정을 알기 위해 개발자에게 전달하는 과정을 봅시다.
스케치의 Export 세팅은 1x, 2x, 500w... 가 기본으로 되어 있습니다. iOS를 선택하면, 1x, 2x, 3x라고 배수가 나옵니다. Android를 선택하면, 1x, 1.5x, 2x, 3x, 4x로 나옵니다. 아마 당신이 주니어 디자이너라면, 개발자에게 한 번쯤은 물어볼 겁니다.
"뭘로... 드려요?"
그러면 개발자는 대수롭지 않게, "5.5인치에..."라고 말할 겁니다. 그 뒤에 말은 잘 안 들릴 겁니다. 왜냐면, 디자인의 시작과 끝 그 어디에도 5.5인치라는 말이 없기 때문입니다.
"왜 처음부터 이야기해주지 않을까요?"
실제 기기에서 잘 나오나 보고 퇴근하면 된다.적당히 아트보드의 크기를 정하고 작업을 하고 개발자에게 Hand-off 하는 부분을 다시 보겠습니다.
이해를 편하기 위해서, 화면 크기(인치)와 제품 이름을 적었습니다.
브런치에서 글을 써도 '모바일 미리보기'가 있다.다시 정리된 이미지를 보시면, 5.5인치에 해당하는 아이폰 기종이 쓰여 있습니다.
당신이 기억해야 할 숫자이 숫자만 기억하면 헤매지 않습니다. 5.5인치는 16:9 비율의 1920x1080 pixel입니다. 아이폰, 안드로이드 폰에서 가장 많이 사용됩니다. 그런데 스케치의 모바일 아트보드에는 1920x1080 크기가 없습니다. 결과물이 1x, 2x, 3x로 나가기 때문입니다. 그래서 '1x' 크기인 360x960으로 하면, 3배 크기로 exprot 되어 1080x1920이 됩니다.
인치의 의미는 이렇습니다.
아이폰 5.5인치,
대표적으로 7 Plus 모델은 414x736pt입니다.
아이폰은 414pt를 3배로 랜더링 한 후에 1.15 비율로 다운 샘플링해서 Physical Pixels로 1080x1920px로 만들어,
5.5인치에 401 ppi로 보여줍니다.
결과적으로 640x360pt에 디자인을 하고 스케치에서 Resizing을 하면 됩니다.
왜 배율이 필요할까요?
예전에는 각 기기별로 디자인을 각각 했습니다. 지금도 아이폰은 높이가 달라서 목업을 만들 때, 따로 디자인을 해야 하지만, 기기에 들어가는 디자인은 디자인 소스로 자동으로 맞춰집니다. 배율이 해상도가 높은 기기에 들어가는 디자인을 할 때, 1080x1920 사이즈의 아트보드를 만들 필요 없이 1/3 크기인 360x640으로 작업하면 됩니다.
그래서 px가 아닌 pt 혹은 dp 단위로 디자인을 하면, 10개의 기기에 맞춘 10개의 디자인을 할 필요가 없이, 한 개만 디자인하고, 자동으로 각각 기기에 맞출 수 있게 됩니다. 예를 들어 8pt는 3x 크기에서는 24px이 됩니다.
스케치에서 iOS 디자인을 시작하면, https://brunch.co.kr/@pliossun/167 을 보면 됩니다.
8pt Grid
이제 좌우 여백에 대한 이야기로 다시 돌아갑니다.
이제 여러분은 8pt 그리드에 대한 이야기를 많이 들으셨을 겁니다.
이 8pt 그리드는 비트 그리드라고 부릅니다. 위에서 1080p를 설명할 때 이야기했던 그 Bit입니다. 8pt 그리드를 이야기하는 사람이 많은 이유는 아래 그림처럼 화면 전체가 조정될 수 있기 때문입니다.
8pt를 사용하면, 컨테이너의 크기와 오브젝트, 오브젝트의 크기를 쉽게 예측하고, 통제할 수 있습니다.
1x, 2x, 3x일 때는 '2', '5'가 문제가 없지만, 0.5x 배율이 생길 때는 문제가 생깁니다.
화면의 크기가 복잡하게 조정되는 이유는 제한된 기술적 상황에서 최고의 해상도와 화질을 보여주기 위해 기술자들이 노력하기 때문입니다. 그러면 그 스펙을 잘 알면 됩니다.
단순한 Export부터 시작해서 디자이너가 디자인한 화면은 여러 단계로 변하게 됩니다. 당장 디자이너끼리 일해도 여백을 몇으로 하는지 물어봅니다. 개발자도 물어봅니다. 프런트엔드 개발자는 수십 개의 디바이스에 앱을 맞춰야 하기 때문에 컴포넌트에 어떤 기준으로 얼마큼 움직여야 하는지 묻습니다.
보통은 숫자를 맘대로 정하거나 5의 배수, 2의 배수 같이 어림셈을 하기 쉬운 숫자로 생각합니다. 1x, 2x, 3x의 크기는 어떤 숫자라도 문제없지만, 0.5 단위가 들어가는 크기 변화가 일어나면, 소수점이 생기기 시작합니다. 이 소수점은 흐린 픽셀(Anti-Alias)로 표현되고, 개발자는 '화면이 깨져요'(그러므로 개발자에게 '이거 안돼요.'라고 말하지 맙시다. 역지사지.)라고 말합니다.
제 브런치를 자세히 보신 분은 2가지 사실을 알고 계실 겁니다. 0.5는 모니터에서는 보이지만, 실제 디스플레이에서 1px로 표시할 수 없기 때문에, 50% 투명도의 1px로 표시합니다. 모든 디자인은 기계의 성능에 제한을 받습니다.
그래서 8pt 그리드가 필요합니다.
출력되는 화면에서 디자인을 일관되게 유지하기 위해서 Bootstrap은 데스크톱과 모바일 웹디자인에 적합한 12 칼럼의 디자인 레이아웃을 만들었습니다.
대부분의 스크린은 8의 배수 단위로 픽셀이 배치되는 1비트가 1픽셀, 원자라고 생각하시면 쉽습니다. 1픽셀은 더 이상 나누어지지 않는 단위입니다.
그래서 8의 배수를 기본으로 한, 12 칼럼 그리드를 만들면, 마찬가지로 8의 배수로 디자인되는 대부분의 스크린에서 안정적으로 보여줄 수 있는 겁니다.
좌우 여백은 몇으로 해요?
디자인 상의 특별한 이유가 없다면,
8의 배수로 하면 됩니다.
양쪽을 16만큼 띄어달라고 하면, 나머지 부분을 100%로 계산해서 프론트 엔드 엔지니어가 작업합니다. 나중에 여백을 물어볼 때도, 8, 16, 24만 불러주면 편리합니다. 이걸 스페이싱(Spacing)이라고 하는데, 찾아보시면, 이것도 많은 이론과 팁이 있습니다.
디자인 상의 특별한 이유는 기준이 좌우 여백이 아니라 기준선(Key line)으로 하거나 다른 하드웨어 특성이 있을 때입니다. 제 글에서 굳이 영어로 쓴 부분들은 구글링을 해보시면 좋습니다. 디자인은 계속 변하니까, 항상 회의적으로 접근해야 합니다. 당신이 아는게 진짜 아는게 아닐 수도 있습니다.
8의 배수는 컴포넌트와 오브젝트의 배치이지, 모든 것을 다 8로 하라는 말은 아닙니다.
하지만 편리하긴 할 겁니다. 아마 외국의 누군가가 디자인한 아이콘의 크기가 왠지, 16, 24, 32, 144 이런 식일 테니까요. 또 유니티를 하거나 다른 그래픽 툴을 써도 이 규칙은 동일하게 적용됩니다. 왜냐하면, 스크린에 디자인 소스가 표시되니까요.
이제 다음에 필요한 것은 기준입니다. 아무리 640x960으로 디자인해도, 기기마다 잘 보이게 하는 것은 어렵습니다. 그래서 스크린의 크기에 따라 디자인이 변하게 만들어줘야 합니다.
그 이야기는 다음 글로 준비하겠습니다.
아니 그럼? 1366x768은?
그런데 이상한 숫자가 하나 있습니다.
1366x768인데, 이건 포토샵 웹 프리셋에서 가장 많이 쓰인다고 나옵니다. 왜 이렇게 이상한 숫자가 있을까요?
이 해상도는 주로 저가 노트북에 사용되는 해상도입니다. VRAM(비디오 메모리)에서 처리방식 때문에 생긴 해상도입니다. 1024x1024=1,048,576 이 숫자가 1메가 픽셀입니다. 그리고 우리가 보는 화면 비율은 보통 16:9입니다. 우리가 보는 화면의 표준 해상도는 720p, 1280 x 720입니다. 그러면, 921,600입니다. 1메가 픽셀에서 126,976픽셀이 남습니다. 제조 공정의 효율성을 위해서 1280 x 720에서 수직 표현 한계인 768로 올리면, 1365.33x768이 됩니다. 소수점을 올림 하면 1366x768이라는 해상도가 나옵니다.
요즘은 웹디자인도 모바일처럼 가로폭에 예전만큼 신경 쓰지 않기 때문에 일반적인 해상도 맞춰 디자인하면 됩니다.
참고 링크
https://brunch.co.kr/@pliossun/97
https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions
https://deviceatlas.com/blog/most-used-smartphone-screen-resolutions
https://medium.com/swlh/the-comprehensive-8pt-grid-guide-aa16ff402179
