[UI DESIGN] Grid styles, Columns를 활용한 기초공사 과정

[티끌] Grid stylws을 기반으로 티끌 제작 과정 알아보기

안녕하세요. 티플의 디자이너 나태진입니다.

합류 초반 티끌에서 Grid styles을 통한 UI 기초공사 과정을 보여드리려 합니다.

🖌️ Grid styles

디자인의 시작이자 뼈대 역할을 하는 Grid styles에 대해 알고 계신가요?
피그마로 웹 혹은 앱을 설계할 때 필수적으로 활용되는 기능으로 피그마에 저장하고

라이브러리를 통해 모든 UI에 디자인 통일성을 주는 기능입니다.

위 이미지처럼 크게 Grid, Columns, Rows로 나뉘는데

티끌에서 적용했던 것은 흔하게 사용되는 Columns이였습니다.
모바일에서는 2분할, 3분할을 사용할 수 있는 4, 6의 Columns를 권장하지만

초기 티끌의 와이어 프레임을 보니 몇몇 페이지 안에 기능이 많고 버튼도 많다는 생각이 들어

12 Columns으로 룰을 정해 주어진 페이지를 배치했습니다.

비하인드로 당시 진행중이던 웹 리디자인 프로젝트에서는

웹에서 거의 정석이라고 들었던 12 Column - 12 Gutter를 사용중이었는데
Column이 많으니 중간중간 요소를 촘촘히 넣을 수 있어 그대로 티끌에도 적용해 보았습니다.

(개인적으로 쪼개서 배치하는 것을 선호하기도 하고..)

그리드 설정 시, 그리드와 함께 Margin 또한 함께 정해져야 합니다.

정해진 마진을 제외한 공간에서 디자인이 정해지며 충분한 공간이 확보되지 않는다면 오히려 시선이 분산되고

애써 기획/개발된 기능들이 정돈되지 않은 것처럼 느껴질 수 있습니다.

그리드는 레이아웃 내부에서 어떻게 배치할지에 대한 규칙이라면

좌우 마진은 어디를 비워 놓을지에 대한 규칙이라고 생각하면 이해하기 편합니다.

아주 아주 간단한 작업이지만 넘기면 안되는 요소로 꼭 초기에 설정을 해야합니다!

1. 마진 사이즈를 정한다.

2. 마진을 벗어나지 않는 공간에서 대략적인 UI 디자인을 한다.

타 서비스들을 예로 들면
인스타그램, 유튜브, 네이버는 일반적으로 쓰이는 15, 16을 활용하고 있고
네이버 블로그, 네이버 카페는 20의 공간을 활용하고 있습니다.

tmi: 티끌은 18의 마진을 쓰고 있다.

우측 Grid styles에서 눈 아이콘을 꺼버리면 끝!

눈을 꺼도 그리드는 지속적으로 동작하니 껐다 켰다 반복하며 배치를 확인하면 됩니다.
* 단축키 ( 맥: control + G / 윈도우: ctrl + shift + 4)

하지만 위는 참고 사항일 뿐,

그리드, 마진 모두 권장 사항은 있지만 정답은 없습니다.

타 서비스들도 4의 배수나 5의 배수처럼 흔히 쓰이는 수치를 사용하지만 이에 따라가지 않는 서비스도 많습니다.
서비스의 핵심적인 기능이나 이후 출시되는 기기들의 변화에 따라서도 언제든지 바뀔 수 있기 때문에 여러 스타일을 사용해보고

본인에게 잘 맞는 것을 찾아야 합니다.

개인적으로 글 작성을 하면서 지금까지 한 작업들을 참고했는데.. 돌아보는 시간을 가진 것 같아 즐거웠습니다.
(UI 디자인을 처음 시작할 때 그리드 스타일 없이 제작하던 시절도 보고..)

감사합니다!