[디자인] 8그리드 시스템

개발자로서 디자인을 하는 것은 맨땅에 헤딩하는 느낌이 듭니다.

 

디자인을 시작하는데 있어서 하얀 빈 화면을 보고 있자면, 어디서부터 시작해야하는지 혼란스럽기만 합니다.

 

어떻게 시작해야할지, 어떻게 그려나가야할지 애매한데 있어서 기준으로 사용할 수 있는 것 중 8 그리드 시스템이 있습니다.

 

기본 사용법

기본적인 사용법은 높이, 너비, 여백, 마진 등 수치를 8의 배수로 정하는 것입니다.

 

8인 이유

일단 여러가지 화면에서 픽셀을 맞출 수 있기 때문입니다.

5의 배수는 3/4, 1.5배 하면 깨집니다. 그러나 8은 깨끗하게 만들어집니다.

아이폰 기기들의 사이즈를 보시면 알겠지만 8의 배수나 8로 조합할 수 있는 수가 많습니다.

 

장점

일관성과 안정감

같은 수치를 적용하여 만들어진 UI는 일관적이고 안정적인 느낌을 주어 앱에서 신뢰감을 느끼게 해줍니다.

 

결정에 적은 시간

수치를 정하는데 있어서 고민할 시간을 적게해줍니다. 고민되어도 8의 배수나 약수로 조절하다보면 어떤 게 좋은 느낌을 주는 지 선택지를 제시해줍니다.

 

사용하며 느낀 점

저는 UI를 만드는데 있어서 많은 도움을 받고 있습니다. 물론 8 그리드 시스템이 절대적인 것은 아니지만, 사용하지 않으면 수치 정하는 것에서부터 애먹을만큼 UI 디자인하는 것은 정말 망망대해 한가운데 있는 것 같습니다. 본인이 디자인에 대한 지식이 아무것도 없다면 적용해보시길 추천합니다.