디자인 용어 40가지: 이미지·색상·글자·레이아웃의 기초

디자인 작업에서 쓰는 용어는 화면을 설명하고 팀의 의견을 맞추는 데 도움이 됩니다. 이 글은 이미지, 색상, 글자, 레이아웃과 브랜드에 관한 기본 용어 40가지를 정리합니다.

왜 디자인 용어를 배워야 할까요?

용어를 알면 작업에 필요한 요소를 구분할 수 있습니다. 예를 들어 커닝과 트래킹의 차이를 이해하면 어느 범위의 글자 간격을 조정할지 더 정확하게 정할 수 있습니다.

협업할 때는 용어와 함께 실제 화면을 가리켜 설명하세요. 같은 단어를 서로 다르게 이해하는 일을 줄이고, 수정할 위치와 이유를 명확하게 전달할 수 있습니다.

디자인 용어 40가지

1. 목업(Mock up)

완성된 디자인이 어떻게 보일지 보여 주는 시각적 모형입니다. 화면 디자인 자체를 뜻하기도 하고, 휴대전화나 포장지의 사용 장면에 디자인을 배치한 결과물을 뜻하기도 합니다.

2. 아이콘(Icon)

기능, 대상, 상태를 작은 기호로 표현한 것입니다. 검색의 돋보기처럼 익숙한 형태가 있지만, 의미가 모호하면 텍스트 레이블을 함께 제공하는 편이 좋습니다.

3. 픽토그램(Pictogram)

시설이나 행동, 안내 내용을 간결한 그림으로 전달하는 기호입니다. 화장실이나 비상구 표시가 대표적이며, 문화와 사용 맥락에 따라 이해되는 방식도 확인해야 합니다.

4. dpi(dots per inch)

인쇄 장치가 1인치에 표현하는 점의 수를 뜻합니다. 이미지 파일의 픽셀 밀도를 나타내는 ppi와 구분하며, 출력 크기와 인쇄 조건에 맞춰 확인합니다.

5. 비트맵(Bitmap)

픽셀을 격자 형태로 배열해 이미지를 표현하는 방식입니다. 흑백에 한정되지 않으며 사진처럼 다양한 색을 가진 이미지도 포함합니다. 크게 확대하면 픽셀의 경계가 드러날 수 있습니다.

6. 콜라주(Collage)

사진, 그림, 종이 조각 등 서로 다른 재료를 조합해 하나의 이미지를 만드는 표현 방식입니다.

7. 디자인 브리프(Design Brief)

프로젝트의 목적, 대상 사용자, 요구사항, 범위와 일정 등을 정리한 문서입니다. 제작을 시작하기 전에 팀과 의뢰인의 이해를 맞추는 데 사용합니다.

8. 플로차트(Flowchart)

작업의 순서와 조건에 따른 분기를 도형과 연결선으로 나타낸 도식입니다. 가입 절차나 승인 과정처럼 여러 단계로 이루어진 흐름을 설명할 때 활용합니다.

9. 포맷(Format)

제작물의 크기, 비율, 구성 또는 파일 형식을 뜻합니다. 문맥에 따라 의미가 달라지므로 “화면 비율”이나 “파일 형식”처럼 구체적으로 표현하면 오해를 줄일 수 있습니다.

10. 그레이스케일(Grayscale)

색상 정보 없이 밝기 차이로 이미지를 표현하는 방식입니다. 흑백 사진처럼 보이며, 색의 영향 없이 명암과 정보의 위계를 확인할 때도 활용합니다.

11. 인덱스 컬러(Indexed Color)

사용할 색을 팔레트에 정리하고, 각 픽셀을 팔레트의 번호로 저장하는 방식입니다. 색 수를 제한하면 파일 크기를 줄일 수 있지만 세밀한 색 변화는 손실될 수 있습니다.

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

정보의 중요도와 관계를 시각적으로 구분하는 방법입니다. 글자 크기, 굵기, 색, 간격과 위치를 조절해 먼저 읽을 내용과 관련된 항목을 알려 줍니다.

13. 커닝(kerning)

서로 이웃한 두 글자 사이의 간격을 조정하는 작업입니다. 글자 모양에 따라 생기는 시각적 빈틈을 맞추는 데 사용합니다.

14. 트래킹(tracking)

선택한 단어나 문장 등 일정 범위의 글자 간격을 함께 조정하는 작업입니다. 개별 글자 쌍을 다루는 커닝과 구분합니다.

15. 리딩(leading)

글줄 사이의 간격을 뜻하며, 보통 기준선과 기준선 사이의 거리로 다룹니다. 글자 크기와 한 줄의 길이에 맞춰 조정하면 본문을 읽기 편해집니다.

16. RGB

빨강(Red), 초록(Green), 파랑(Blue)의 빛을 조합해 색을 표현하는 방식입니다. 웹과 앱처럼 화면에서 보는 디자인에 사용합니다.

17. CMYK

시안(Cyan), 마젠타(Magenta), 노랑(Yellow), 검정(Key)의 인쇄 잉크로 색을 표현하는 방식입니다. 같은 색 값이라도 종이와 인쇄 조건에 따라 결과가 달라질 수 있습니다.

18. 팬톤(Pantone)

색에 번호를 부여해 지정하고 소통하는 색상 체계입니다. 색 견본과 번호를 기준으로 협의하되, 실제 결과는 재료와 인쇄 방식에 따라 확인해야 합니다.

19. 디자인 콘셉트(Design Concept)

디자인이 지향하는 핵심 방향과 생각입니다. 색, 글자, 이미지와 구조를 선택할 때 일관된 판단 기준으로 활용합니다.

20. 톤앤매너(Tone & Manner)

브랜드나 프로젝트가 일관되게 전달하려는 분위기와 표현 방식입니다. 시각 요소뿐 아니라 문장의 어조와 이미지 선택에도 적용합니다.

21. 오브젝트(Object)

디자인을 구성하는 개별 요소를 뜻합니다. 편집 도구에서는 텍스트, 도형, 이미지 등을 오브젝트로 다룹니다.

22. 여백(Margin)

요소 사이 또는 주변에 확보한 공간입니다. 관련 항목을 묶고 정보의 위계를 드러내며, 화면이 복잡해 보이지 않도록 조절합니다.

23. 일러스트레이션(illustration)

생각이나 정보, 분위기를 그림으로 전달하는 표현입니다. 손으로 그리거나 디지털 도구로 제작하며, 사진과는 다른 방식으로 특징을 강조할 수 있습니다.

24. 캘리그래피(Calligraphy) 

글자를 시각적으로 표현하는 서예·필기 기법입니다. 획의 형태와 리듬을 활용해 개성과 분위기를 전달합니다.

25. 타이포그래피(Typography)

글자를 선택하고 배치해 정보를 전달하는 작업입니다. 글꼴, 크기, 굵기, 행간, 자간과 정렬을 함께 다룹니다.

26. HEX

색 값을 16진수로 표기하는 방식입니다. 웹에서는 #RRGGBB 형태가 흔하며, 앞의 두 자리는 빨강, 다음은 초록, 마지막은 파랑의 값을 나타냅니다.

27. 그라디언트(gradient)

색이나 불투명도가 점진적으로 변하는 표현입니다. 방향과 중간 지점을 조절해 깊이, 강조, 분위기를 만들 수 있습니다.

28. 불투명도(opacity)

요소가 얼마나 불투명하게 보이는지 나타내는 값입니다. 0%는 완전히 투명하고 100%는 완전히 불투명합니다.

29. 로고타입(logotype)

브랜드명이나 회사명을 글자 중심으로 표현한 로고입니다. 글자의 형태와 간격을 통해 고유한 인상을 전달합니다.

30. 래스터(raster)

픽셀 격자로 이루어진 이미지 표현 방식입니다. 사진 편집에 적합하지만 원래 크기보다 크게 확대하면 선명도가 떨어질 수 있습니다.

31. BI (Brand Identity)

브랜드를 구분하게 하는 가치, 성격과 표현 체계입니다. 이름, 메시지, 색, 로고 등 여러 요소가 함께 브랜드의 정체성을 형성합니다.

32. CI(Corporate Identity)

기업의 이념과 정체성을 일관되게 표현하고 전달하는 체계입니다. 기업 전체의 이름, 메시지, 시각적 표현 등을 포함합니다.

33. 인포그래픽(Infographic)

데이터나 정보를 도표, 그림, 글자로 시각화한 표현입니다. 비교, 순서, 관계를 이해하기 쉽게 보여 주되, 수치의 기준과 출처도 명확히 해야 합니다.

34. 텍스처(Texture)

표면의 질감 또는 이를 시각적으로 표현한 효과입니다. 종이, 천, 금속 등의 느낌을 이미지와 패턴으로 전달할 수 있습니다.

35. 톤(Tone)

색의 밝기와 선명함 등이 만들어 내는 인상을 뜻합니다. 같은 색상이라도 톤에 따라 차분하거나 강렬한 분위기가 달라집니다.

36. 패턴(Pattern)

도형이나 무늬를 반복해 만든 시각적 구성입니다. 배경, 표면 장식, 브랜드 표현 등에 활용합니다.

37. 픽셀(Pixel)

디지털 이미지를 구성하는 가장 작은 단위입니다. 가로와 세로의 픽셀 수는 이미지의 크기를 나타내며, 실제 표시 크기와 함께 선명도에 영향을 줍니다.

38. 행동유도성, 어포던스(Affordance)

사람과 대상의 관계에서 가능한 행동을 뜻합니다. 손잡이는 잡는 행동을 가능하게 합니다. 버튼처럼 “누를 수 있다”는 사실을 알려 주는 시각적 단서는 시그니파이어와 구분해 이해하면 좋습니다.

39. 썸네일(Thumbnail)

큰 이미지나 콘텐츠를 작게 보여 주는 미리보기입니다. 디자인 과정에서 아이디어를 작게 그린 스케치를 가리키기도 하므로 문맥에 맞게 사용합니다.

40. 세리프체와 산세리프체(Serif & Sans-serif)

세리프체에는 획 끝의 작은 장식이 있고, 산세리프체에는 그 장식이 없습니다. 가독성은 장식의 유무만으로 결정되지 않으므로 실제 글자 크기, 굵기, 화면과 문장 길이로 비교해야 합니다.

용어는 실제 작업에 적용할 때 더 쉽게 익힐 수 있습니다. 화면의 어떤 요소를 말하는지 함께 보여 주고, 팀에서 사용하는 의미를 맞추면서 필요한 개념부터 활용해 보세요.