그래픽 디자인 가이드
오늘의 글 : Graphic Guide
이 글은 sunghye kim님의 'Graphic Guide'를 읽고 내용을 간단하게 요약 및 제 생각을 적은 글입니다.
Summary
1. Aligh은 디자인의 기본
2. Spacing system
- 8의 배수 (4px 예외로 쓰이기도 함)
- 디자인에 따라 5의 배수, 4의 배수 사용 가능
3. Grid
- 양끝 Margin 제외하고 만들어서 사용
- 6 column 가장 많이 사용
4. Color line
- 다양하게 사용하지 않도록 하며 최소한의 기준 세워 일관되게 사용 권장
5. Font size
- 최소 14pt 이상 사용
- 가급적 12pt 사용하지 않도록 권장
- 12/14/16/20/24/32/40
6. Font weight
- 폰트 굵기 역시 다양하게 사용하기보다 가이드를 만들어 기준 되는 굵기 정해 사용하기
7. Button
- Active / Disabled / Pressed
- 텍스트형 버튼일 경우 최소한의 터치 영역 확보 (세로 36px 등)
8.System forms
- 터치 영역 및 텍스트 입력을 고려한 최소 높이 사용
9. Icon system multiple
- 1배수 기준을 정하고 24px / 36px / 48px 같이 규칙적 배수로 디자인
10. Icon system clearance area
- 모바일에서는 터치 영역 고려해 아이콘 둘러싼 충분한 여백 필요
11. Optical Adjustment shapes
- 가로, 세로 크기가 모두 같은 도형 그리면 일부 도형은 도형 여백으로 인해 각 도형 무게 달라 보이기 때문에 디자이너가 임의로 시각적 무게감을 조절해야 함
- 간격 또한 수치에 의존하지 않고 시각적 조절 통해 밸런스 맞춤
- 시각적으로 조절이 힘든 경우 수치상 약 112% 적용
12. Optical adjustment line
- 수치상 같은 두께의 라인이어도 수직보다 수평이 더 두꺼워 보이기 때문에 교정 필요
- 라인이 겹쳐질수록 더 두꺼워 보이거나 길이가 길수록 굵어 보이는 현상 또한 교정 필요
13. Optical adjustment alignment + Visual weight
- Align과 X, Y 좌표 등의 수치를 맞춰 디자인하는 것도 중요하지만 시각적으로 불편함 없이 밸런스를 맞춰 나가는 것 더욱 중요
- 무게, 크기 등은 Align과 함께 반드시 무게 중심을 고려하여 시각적 보정 필요
- 가장 쉬운 예는 재생 아이콘 (원형 안에 세모 모양)
14. Optical adjustment kerning
- 글자와 글자 사이의 간격을 일정하게 두면 글자마다의 여백 공간으로 안정감 줄 수 없기 때문에 시각적 보정의 커닝 작업이 필요
- 로고 제작에서 매우 중요함
- 커닝이란 글자 모양 때문에 활자가 고르게 배열되지 않은 것처럼 보이는 것을 글자 모양에 따라 적당한 간격을 두게 조정하여 시각적으로 매끄럽게 보이게 하는 것
15. Optical adjustment colour
- Solid icon과 텍스트가 같이 사용되면 컬러의 무게감이 아이콘이 좀 더 무거워 보이기 때문에 아이콘의 컬러나 텍스트 컬러의 명도 조절로 시각적 무게 맞춤
Note
- 그래픽 디자인의 기본을 다시 공부해봤다. 비핸스 주소로 들어가면 예시와 함께 더 자세히 볼 수 있으니 디자인을 처음 공부하려는 분들에게도 매우 좋은 가이드가 될 것이라 생각된다. 나는 아예 프린트해서 보관 중이다.
- 우리 서비스의 디자인이 아직 이런 기본들이 잘 갖춰져 있지 않아서(..) 부끄럽고 많이 속상하지만, 최근에 여러 변화를 틈타 재탄생시킬 기회를 호시탐탐 노리고 있다. 뜯어고쳐야 할 부분이 너무 많은데 그렇게 하지 못하고 있어 답답하긴 하지만 디자인도 결국은 비즈니스의 한 부분이고 전체에서 보면 이보다 더 중요한 게 너무 많아서...라고 생각하며 위안하고 있다.(흑)
