파워포인트 UI 템플릿 만들기 ver 0.1
파워포인트에서 Grid System을 적용하여 모바일 UI 디자인하기
앞의 글에서 이야기한 Grid System을 파워포인트에 적용을 해 보려고 한다.
많은 분들이 파워포인트를 이용하여 UI 디자인 - 용어에 대한 많은 혼동이 있는데, 여기에서 말하는 UI 디자인은 와이어프레임 수준의 디자인을 의미하며, Visual Design 또는 그래픽 디자인을 의미하지는 않는다 - 을 하고 있으며, 파워포인트에서 더욱 정교한 UI 디자인에 도움이 될 수 있는 방법을 소개하는 글이다. 포토샵이나 스케치 등의 그래픽 디자인 툴에 익숙한 분들이라면 Grid를 활용할 수 있는 수많은 템플릿을 쉽게 찾아서 적용할 수 있으므로 이 글을 읽는 수고를 하지 않아도 된다.
정교한 UI 디자인의 필요성에 대해서는 사람들마다 견해가 다를 수도 있겠지만, 큰 장점을 나열하자면 아래와 같다. 기회가 된다면 별도로 소개하고자 한다.
Visual Design과의 Gap을 줄일 수 있다.
기획자, 디자이너, 개발자와 커뮤니케이션의 오류를 조금이라도 줄일 수 있다.
Visual Designer가 더 좋은 디자인을 하도록 돕는다.
파워포인트의 눈금 단위와 1x 모바일 화면 해상도
그럼 작업을 시작해보기로 하자. Grid System을 파워포인트에 적용하기 위해서는 크게 두 가지의 파워포인트의 기능적인 특징을 이해해야 한다.
1. 파워포인트에서 도형 크기의 단위는 pixel이 아니라 cm이다. 물론 파워포인트 2013 버전부터는 슬라이드 크기 및 도형 크기를 pixel 단위로 지정할 수 있지만 cm로 다시 환산이 되어 버리므로 pixel를 기본으로 작업하기가 어렵기 때문에 cm 단위로 작업을 하는 것이 편리하다.
2. 파워포인트에서 최소 눈금의 단위는 0.1 cm이다. 단순히 눈금을 표시하는 단위가 아니라 도형을 선택한 상태에서 화살표를 선택했을 때 이동하는 단위가 0.1 cm라는 의미이다. 따라서 모든 도형 및 요소를 0.1 cm 단위의 크기로 디자인을 할 경우에는 훨씬 편리하게 작업을 할 수가 있다.
일반적으로 UI 디자인을 하는 모바일 화면의 기본 해상도는 360 x 640이다. 물론 최근의 디바이스들은 2x, 3x 이상의 해상도를 제공하지만, 1x를 기준으로 작업할 경우 효과적이다. 1x로 디자인을 하는 더 많은 이유를 알고 싶다면 구글에서 검색을 해 보자.
8-point Grid 만들기
결국 우리는 360 x 640 화면을 8 픽셀 단위로 쪼개어 45 x 80 단위의 Grid 환경을 파워포인트에서 만든다면 8-point Grid System을 활용하여 디자인 할 수 있다. 그리고 그리드의 한 칸의 크기를 0.1 cm 배수로 맞출 경우 도형의 크기를 편리하게 지정할 수 있고, 키보드 화살표 버튼만으로 도형을 편리하고 정교하게 이동할 수도 있다.
이를 종합하여 약간의 산수를 하면, 가로 4.50 cm, 세로 9.0 cm의 배수로 모바일 화면을 구성할 경우 위의 조건을 만족할 수 있는 Grid를 구성할 수 있다. 나는 4.5 x 9.0 cm의 화면은 너무 작을 뿐 아니라 많은 경우 조금 더 정교한 도형 또는 Font의 배열을 요구하는 경우들이 많이 발생하기 때문에 파워포인트에서 최소의 한 눈금 (0.1 cm)을 4 point로 만들 수 있는 9.0 x 16.0 cm의 도형을 모바일의 기본으로 설정하여 파워포인트 문서를 구성하여 활용한다.
Layout Grid 만들기
일단 8-point Grid 적용을 위한 화면을 만들었으니 다음에는 Layout Grid를 구성해보자. Layout Grid는 주로 Web 화면을 디자인하는 경우에 많이 활용하지만 모바일에서도 Grid를 고려한다면 화면을 채우는 요소의 구성이나 배치를 정하는데 도움이 된다. 모바일 화면에서는 일반적으로 4 column (가운데를 기준으로 좌우로 콘텐츠를 배치할 경우) 또는 6 column (화면의 좌우를 2분할 하거나 3분할 하여 활용이 가능)을 기준으로 화면을 구성한다.
구글 material design guideline를 기준으로 할 때 화면의 좌우 마진(margin)이 360 point를 기준으로 16 point이다 (이 역시 8의 배수로 구성됨을 눈치챘을 것이다). 따라서 4 column이든 6 column grid에서 margin은 16pt로 고정한 상태에서 gutter를 적절하게 정의하면 적당하게 활용할 수 있는 layout grid를 구성할 수 있다.
마무리하며
앞에서 정리한 두 가지의 Grid를 구글 화면에 맞추어 보면 아래와 같다. Grid에 잘 맞추어 진 화면 구성을 확인할 수 있다. (라인에 맞춰진 요소들을 보면 기분이 참 상쾌하다)
위에서 설명한 Grid와 예시로 맞추어본 화면들을 포함한 파워포인트 UI Template이 완성되었다. UI Template에서 필요로하는 화면이나 요소들이 더 많기 때문에 지금은 아주 기초적인 시작 단계이므로 일단 버전을 0.1로 하였다. 첨부한 파일을 참고하여 다양하게 응용하면 편리하게 작업을 시작할 수 있을 것으로 생각한다. 앞으로 기회가 되면 Template에서 필요한 요소들을 추가하여 계속 업데이트할 예정이다.
(참고로 UI 디자인을 위한 목적으로 이 글의 내용이나 첨부 파일을 실무에서 활용하는 것은 무방하나, 글이나 첨부 파일을 그대로 복제하여 다른 글이나 책, 강의자료 등에 활용할 경우에는 저작자의 허가를 받아야 함을 말씀드린다.)
