brunch

You can make anything
by writing

C.S.Lewis

by 매미 Apr 09. 2019

그래픽 디자인 가이드

오늘의 글 : 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


- 그래픽 디자인의 기본을 다시 공부해봤다. 비핸스 주소로 들어가면 예시와 함께 더 자세히 볼 수 있으니 디자인을 처음 공부하려는 분들에게도 매우 좋은 가이드가 될 것이라 생각된다. 나는 아예 프린트해서 보관 중이다.


- 우리 서비스의 디자인이 아직 이런 기본들이 잘 갖춰져 있지 않아서(..) 부끄럽고 많이 속상하지만, 최근에 여러 변화를 틈타 재탄생시킬 기회를 호시탐탐 노리고 있다. 뜯어고쳐야 할 부분이 너무 많은데 그렇게 하지 못하고 있어 답답하긴 하지만 디자인도 결국은 비즈니스의 한 부분이고 전체에서 보면 이보다 더 중요한 게 너무 많아서...라고 생각하며 위안하고 있다.(흑)


매거진의 이전글 그라디언트 컬러의 매력

작품 선택

키워드 선택 0 / 3 0

댓글여부

afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari