UI 요소 간격 어떻게 맞춰요?(8point Grid)
『버려지는 디자인 통과되는 디자인』요약 정리 - 그리드2
들어가는 말.
최근 컴포넌트와 페이지를 따라 만들어보고 있다. 강의를 들으면서 따라 만들고 있긴 한데... 왜 이런 그리드를 썼을까? 이 간격과 레이아웃에는 의미가 있을까? 이런 의문이 든다. 직접 만들어야 할 때, '도대체 기준을 어떻게 잡아야 하지?' 막막할 수 있기에 오늘은 레이아웃과 그리드에 대해 정리해보고자 한다.
Part 2. 그리드 - 이론
레이아웃과 그리드 시스템
콘텐츠의 중요도에 따라 크기를 결정해야 한다. 이미지 중심의 콘텐츠 사이트라면? 당연히 썸네일이 가장 중요하다. 그런데 갑자기 제목에 힘을 준다거나 하는 일은 없어야겠지.
다단 그리드
: 화면을 세로로 나눈 후 정보의 덩어리를 수직으로 정렬.
1단(나누지 않음) / 2단 / 3단 등이 있고, 정비율이 아닌 2:1 비율 등 조절이 가능하다.
계층 그리드
: 화면을 가로로 나눈 후 정보의 덩어리를 수평으로 정렬한다. 쇼핑몰하면 떠오르는 웹사이트가 가장 대표적.
12단 그리드
: 페이지를 12단으로 나누고, 레이아웃을 만들면 복잡했던 화면이 깔끔하게 정리된다. 12단은 2단, 3단, 4단, 6단 모두 사용할 수 있어 자유로운 화면 구성 안에서도 질서를 부여할 수 있다. 단, 화면이 넓은 웹페이지에서 사용 가능하다.
레이아웃을 그리는 순서
레이아웃을 그리는 순서는 그림을 그리는 것과 같다. 전체적인 형태를 잡고, 모듈를 간략하게 배치하고, 화면의 리듬감을 주고, 메타포를 표현한다.
1️⃣ 전체 레이아웃(Global Layout)
1) 헤더(Header), 바디(Body), 푸터(Footer) 영역을 잡는다.
2) 콘텐츠 배치 순서
3) 모듈 크기, 노출 영역 설정(이때, 콘텐츠의 중요도에 따라 제목, 설명, 이미지를 구성해야 한다)
2️⃣모듈 레이아웃(Module Layout)
1) 제목, 소제목 설정
2) 설명+이미지 구성(이때, 모두가 이해할 수 있는 가이드가 있어야 한다. 이미지 공간은 도형 안에 X를 넣는다거나, 제목은 박스처리를 한다거나 하는 식으로.)
3️⃣화면의 리듬감
1) 강-약-중강-약
2) 크기, 굴기, 색상(메인 컬러, 포인트 컬러)+여백
3) 포지티브 - 네거티브 기법을 통한 강약 조절
4️⃣메타포 표현
1) 이미지(사진, 일러스트, 아이콘, 영상)
2) 메인 컬러
3) 톤 앤 매너
Part 2. 그리드 - 실전 팁
✅아래 내용부터는 책에 없는 이야기다. 책에는 레이아웃 변주를 통해 활기를 나타내거나 / 정돈되지 않은 레이아웃을 깔끔하게 정돈하는 내용이 주라서 따로 정리하진 않았다.
8point Grid
8point Grid는 앱 UI에서 가장 대표적으로 쓰이고 있는 시스템이다. 현재는 4point Grid로 바뀌는 추세다.
1️⃣ 포인트(pt)? px이 아니고요?
우선, px(픽셀)이 무엇인지부터 짚고 넘어가겠다.
px
: 이미지를 이루는 가장 작은 단위의 사각형 모양의 점
- FHD 해상도: 1080X1920 = 픽셀의 개수가 1080X1920개가 존재한다는 뜻.
- ppi(pixel per inch): 72ppi = 1인치 안에 72개의 픽셀이 존재한다는 뜻.
- dpi(dot per inch): 1인치 당 점의 개수(최근엔 ppi와 거의 동일하게 쓰이고 있음)
point(pt)
: 아이폰 4세대가 발매될 때 처음 나타난 개념. 이전까지는 px로 개발자에게 크기를 알려주는 경우가 많았다. 하지만 디스플레이 기술의 발전에 따라 같은 면적 안에 픽셀을 더 많이 추가해 매끄러운 화면을 만들 수 있게 되면서 디자이너가 기존에 의도했던 사이즈가 어떤 모니터에서는 구현이 안 되기 시작했다.
ex) 20X10px 아이콘을 디자인했는데, 만약 기존보다 해상도가 높다면? 면적에 픽셀 수가 더 늘어나기 때문에 디자이너가 의도했던 것보다 작게 보일 수밖에 없다.
pt는 1인치를 72로 나눈 값이다. 아이폰 4세대 이전까지는 1포인트 당 1픽셀로 동일했기 때문에 포인트 개념이 필요 없었지만, 4세대 부터는 1포인트 당 4픽셀이 들어가기 시작했다. 그게 위 이미지에서 보여주는 @2X다. 아이폰 4, 5, 6은 2X를 사용했고, 아이폰 6plus부터는 무려 1포인트 당 9픽셀이 들어가게 된다. 똑같은 사이즈의 화면이더라도 픽셀이 들어가는 개수가 차이나게 되니, 더 이상 디자이너가 px로 개발자에게 사이즈를 알려주지 못하게 된 것.
png파일을 IOS에서 Image set으로 사용하고자 할때, 왜 1X / 2X / 3X 세 가지를 넣어야 할까.
이유는 단순하다. 고해상도 디스플레이에는 고해상도 사진이 들어가야만 이미지가 깨지지 않는다. 1X를 사용하는 표준 디스플레이에 3X 이미지를 넣으면 어떻게 될까? 어차피 출력을 1X만 할 수 있기 때문에 3X 이미지처럼 보이지 않는다.(현재 1X를 사용하는 기기는 거의 없다)
IOS 개발자 / 디자이너는 유저가 어떤 기기를 사용할 지 모르기 때문에 모든 유저에게 알맞응ㄴ 이미지를 제공하기 위해 1X, 2X, 3X를 모두 준비해 image set으로 사용한다.
2️⃣ 그래서 8point Grid가 뭔데?
오케이, point가 뭔진 알았다. 어떤 화면에서도 사이즈를 동일하게 만들어주는 규격 정도로 이해했다. 그런데 8point Grid는 도대체 뭘까? 8point Grid는 8point의 배수로 모든 간격을 맞추는 것이다. 그 이유는,
1) 모든 화면 디스플레이에서 완벽하게 확장할 수 있다.
: 8point는 거의 모든 디스플레이가 커버 가능하다. 자세한 수치는 아래 표에서 확인할 수 있다.
2) 작업하기 좋은 기본 단위다.
: 4와 8은 쉽게 곱할 수 있어 유연하고 일관되게 작업할 수 있다.
2️⃣ 하드 그리드? 소프트 그리드?
8point Grid를 사용하는 방법에는 2가지가 있다.
1) 하드 그리드
: 8의 배수로 정의된 그리드에 요소를 배치한다. 이미 4point Grid로 디자인된 Material Design은 자연스럽게 이 방법을 따르고 있다.
2) 소프트 그리드
: 개별 요소 사이를 8의 배수로 설정한다. IOS의 경우, UI요소가 별도로 짝수로 설정되어 있지 않기 떄문에 IOS 디자인에 유리할 수 있다.
중요한 건 그리드가 빡빡하게 정의되어 있고, 그 안에서만 디자인하느냐 아니면 유연하게 디자인하느냐!3️⃣ 이걸 왜 써야 해?
8point Grid의 개념을 알자마자, 유레카를 외쳤다. 도무지 UI요소들 사이의 간격을 어떻게 잡아야 할지 감이 안왔는데, 8의 배수로만 맞추면 된다고? 그야말로 희소식. 그렇다면 이걸 왜 써야 하는지에 대해 조금 더 구체적으로 알아보고자 한다.
1) 일관된 UI 시스템 개발
: 모든 측정이 같은 규칙을 따르면 자동으로 일관된 UI를 얻을 수 있게 된다. 이러한 일관성은 사용자에게 안정감을 주며, 더욱 선명한 디자인이 가능하다.
2) 결정하는 데 시간이 적게 든다.
: 간격 설정할 때, 8만 기억하면 된다. 요소 간 퀄리티 저하도 없고, 일정한 리듬을 유지하면서 의사 결정을 최소화할 수 있다. 또한 디자이너와 개발자 간의 쉬운 의사소통 시스템으로 매번 측정하지 않고도 8포인트 단위로 쉽게 생각할 수 있다.
4️⃣ 이걸 무조건 지켜야 해?
이제는 4point Grid도 나오고 있다. 그렇다면 4, 8의 배수가 아니면 무조건 쓰지 말아야 할까? 그건 아니다. 만약 높이가 40px인 표 안에 14px의 텍스트와 20px의 줄 높이를 사용하면 텍스트 위아래 각각 10px의 간격이 생긴다. 4의 배수는 아니지만 문제가 되진 않는다.
구글 매터리얼 디자인에서는 이렇게 말하고 있다.
글자는 그 중심이 버튼이나 리스트 아이템과 같은 컴포넌트의 내부에 있을 때에는 4point 그리드 바깥에 위치할 수도 있다.(벗어날 수 있다는 뜻) 그리드 바깥에 있지만 중심은 컴포넌트 안에 있다면 텍스트는 여전히 세로 방향에서는 중앙에 정렬된 것처럼 보일 수 있다.
결국엔 가이드에만 딱딱 맞추는 기계적인 디자인은 할 수 없다는 것.
