비디자이너의 얕은 지식 쌓기: 디자인 용어 20

디자이너와 함께 일하시나요?

저는 디자이너와 함께 일하는 비디자이너입니다. 디자인 중심의 기업인 슬로워크에는 저와 같은 사람보다는 디자이너가 훨씬 많은데요. 예를 들어 제가 속한 팀에는 네 명 중 저를 제외한 세 명이 디자이너고요. 점심시간에 도시락을 함께 먹는 멤버들 8명 중 7명이 디자이너입니다.

디자이너들은 각자의 프로젝트를 맡아 작업하는 경우가 대부분이지만 간혹 2-3명, 많으면 5명이 넘는 디자이너가 한 프로젝트를 공동으로 수행하는 경우도 있습니다. 최근에 이렇게 큰 프로젝트에 합류한 저는 이들의 치열한 회의와 작업열(?)을 실시간으로 목도할 수 있었는데요. 문제는 제가 간혹 이들의 말을 알아듣지 못한다는 데에 있었습니다.

“그러면 여기에 커닝을 조금 더 하고…”

“그 사진 dpi가 몇이에요?"

대충은 알겠는데 그래도 잘 모르겠고 불쑥 물어보기도 좀 그렇고… 난감합니다. via GIPHY

그래서 정리해보고 싶었습니다.

디자이너는 당연하게 알고 있는데

비디자이너는 모르거나 애매하게 아는 개념들

비단 저같은 에디터가 아니더라도 클라이언트, 기획자, 마케터 등 디자이너와 함께 밀접하게 일하는 당신이라면, 이번 기회에 저와 함께 정리해보시죠.

1. 세리프(Serif)

세리프와 산세리프는 폰트명에서 종종 볼 수 있는데요. 세리프는 글자의 끝에 있는 돌출된 부분이나 커브를 의미합니다. 대표적으로 명조체가 여기에 해당되며, 글이 아주 많은 경우의 가독성이 산세리프보다 좋은 편입니다.

2. 산세리프(Sans-serif)

“Sans”는 ‘~가 없는’을 의미합니다. 따라서 산세리프 폰트는 글자 끝에 모난 부분이 없습니다. 대표적으로 고딕체가 여기에 해당됩니다.

3. 하이어라키(위계, Hierarchy)

디자인 요소들을 중요도에 따라 시각적으로 배열하는 것을 의미합니다. 쉽게 말해 제목은 크게, 부제는 그보다 작고 덜 눈에 띄게, 본문은 그보다도 더 작고 읽기 편하게 배치하고 디자인하는 겁니다. 누구나 제목에 볼드(bold) 처리하는 그런 거요. 쉬운 개념인데 말이 괜히 어렵죠? 하이어라키라니.

4. 커닝(kerning)

두 글자의 공간을 조정하는 것을 의미합니다. 커닝은 주로 각각의 글자 사이의 공간을 조정해서 시각적인 균형과 비율을 맞추기 위해 합니다. 예를 보면 이해가 가실 겁니다.

5. 트래킹(tracking)

트래킹은 커닝과 비슷하지만 ‘글자’ 단위가 아닌 글 덩어리, 즉 문장이나 문단 째로 자간을 조정한다는 점이 다릅니다. 그러니까 그동안 한글이나 워드를 통해 자간을 조정했다면, 트래킹을 한 것입니다.

6. 리딩(leading)

리딩은 쉽게 말해 줄 사이의 간격을 의미합니다. 통상적으로 리딩이라고 하지만, 공식적으로는 레딩이라고 읽습니다.

7. 그리드(Grid)

그리드는 디자인 요소들을 더 빠르고 깔끔하게, 일관성 있게 배열하기 위한 수단입니다. 균등하게 나뉘어진 행과 열로 이루어져 있습니다.

8. DPI

프린트물의 해상도(resolution)를 측정하는 단위로 ‘dots per inch’, 즉 1인치 안에 들어가는 점의 수를 의미합니다. 점의 수가 많을수록 입자가 작아지기 때문에 디테일한 표현이 가능합니다. 따라서 dpi 값(수치)이 높을수록 이미지 품질이 좋습니다. 스크린 용도에서는 dpi 대신 ppi(pixel per inch)라는 단위를 씁니다.

9. RGB

RGB(Red, Green, Blue)는 스크린을 위한 용도의 컬러 시스템입니다. 색을 혼합할수록 더 밝아지는(흰색에 가까워지는) 특성이 있습니다. 실제로 값(수치)이 낮을수록 색깔이 더 어둡습니다.

10. CMYK

사이안(Cyan), 마젠타(Magenta), 옐로우(Yellow), 키(Key)로 이루어진, 인쇄물을 위한 용도의 컬러 시스템을 말합니다. 색을 혼합할수록 더 어두워집니다. 값이 낮을수록 밝은 색입니다.

11. 팬톤 Pantone

팬톤의 Pantone Matching System(PMS)는 표준화된 컬러 시스템입니다. 모든 색조에 고유 넘버가 부여되며, 이에 따라 누구든 쉽게 특정 컬러를 활용할 수 있습니다. 간혹 CMYK로 충분히 표현되지 않는 색깔을 팬톤으로 별색 지정하여 인쇄하기도 합니다.

이미지 출처: pantone.com

12. HEX

HEX(Hexademical color) 스크린용 컬러 시스템 중에서도 웹디자인에 쓰이는 값입니다. RGB의 ‘RRGGBB’의 값을 나타내는 여섯 개의 문자조합으로 이루어져 있습니다.

같은 색상의 HEX 값(FF007F)과 RGB 값(255, 0, 127) 사진 출처: rapidtables.com

13. 팔레트 Palette

컬러 팔레트는 특정 디자인에 따라 지정한 여러 색상의 조합으로 이루어져 있습니다. 색상의 조화를 고려하여 팔레트를 구성해야 하며, 선택된 색상들은 작업물 안에서 조화롭게 디자인 되어야 합니다.

14. 그라디언트(gradient)

‘그라데이션’이라고 생각하면 됩니다. A색이 B색(또는 투명)으로 점진적으로 변화하는 것을 의미합니다. 보통 radial 그리고 linear, 이 두 가지가 많이 쓰입니다.

15. 불투명도(opacity)

불투명도는 디자인 요소를 그야말로 투명하게 하는 기능입니다. 값(수치)이 낮을수록 특정 오브젝트의 투명도가 높아집니다.

16. 로고타입(logotype)

브랜드 네임(문자)이 디자인된 로고를 의미합니다. IBM, Disney, Cocacola의 로고를 떠올려 보세요.

17. 브랜드마크(brandmark) 또는 로고마크(logomark)

브랜드를 나타내는 상징(symbol)을 의미합니다. 대표적으로 애플의 사과모양 로고가 있습니다. 로고타입과 동반되어 쓰이는 경우가 많지만, 늘 그렇진 않습니다.

18. 벡터(vector)

벡터 이미지는 점과 선, 곡선으로 이루어져 있습니다. 벡터 이미지의 형태는 수학적 공식에 의해 계산되기 때문에 이미지가 아무리 커져도 해상도 등 품질이 떨어지지 않는다는 특징이 있습니다. 하지만 세밀하고 자연스러운 표현에는 한계가 있습니다. 벡터 방식을 사용하는 프로그램으로 일러스트레이터가 대표적입니다.

19. 래스터(raster)

벡터와 대조되는 개념인 래스터 이미지는 픽셀의 그리드셋으로 이루어져 있습니다. 따라서 크기를 키울 경우 깨져보일 수 있습니다. 대표적인 예가 사진입니다. 포토샵이 래스터 방식을 사용하는 대표적인 프로그램입니다.

20. 플랫(flat)

플랫 디자인은 단순성, 사용성에 초점을 맞춘 디자인 방식입니다. 밝은 컬러의 사용, 간결함, 2차원 일러스트 등을 특징으로 합니다. 반대로 사실적인 묘사를 하는 개념으로 스큐어모피즘(Skeuomorphism)이 있습니다. -> 플랫 디자인에 대해 더 알아보기

참고

Buffer Social

Canva Design School