디자인 용어사전
팔레트·타이포그래피·그리드·UI 컴포넌트 등 디자인 실무 용어를 쉬운 한국어로 풀이했습니다.
용어 30개
색·비주얼
- 팔레트Palette
- 한 디자인에서 함께 쓰는 색의 묶음. 주색·보조색·강조색으로 구성한다.
- HEX / RGB / HSL
- 색을 표현하는 코드 방식. HEX는 #6B3EF5, RGB는 빛의 삼원색, HSL은 색상·채도·명도로 지정.
- 그라디언트Gradient
- 두 개 이상의 색이 자연스럽게 이어지는 그러데이션.
- 대비Contrast
- 요소 간 밝기·색 차이. 가독성과 접근성의 핵심이다.
- 채도 / 명도
- 채도는 색의 선명함, 명도는 색의 밝기. 둘을 조절해 톤을 만든다.
- 톤앤매너Tone & Manner
- 브랜드가 일관되게 유지하는 색·서체·분위기의 전반적 인상.
타이포그래피
- 세리프 / 산세리프
- 획 끝에 삐침(세리프)이 있는 글꼴과 없는(산세리프) 글꼴. 인상과 가독성이 다르다.
- 커닝Kerning
- 특정 두 글자 사이의 간격을 개별적으로 조정하는 것.
- 자간 / 행간
- 자간은 글자 사이 간격(트래킹), 행간은 줄 사이 간격(레딩).
- 위계Hierarchy
- 크기·굵기·색으로 정보의 중요도 순서를 시각적으로 나타내는 것.
- 베이스라인Baseline
- 글자가 놓이는 기준선. 여러 요소를 이 선에 맞춰 정렬한다.
- 가변 폰트Variable Font
- 하나의 폰트 파일로 굵기·너비 등을 연속적으로 조절하는 글꼴.
레이아웃·간격
- 그리드 시스템Grid System
- 화면을 열·행으로 나눠 요소를 규칙적으로 배치하는 뼈대.
- 여백Whitespace
- 요소 사이의 빈 공간. 가독성과 집중을 만드는 적극적 디자인 요소.
- 마진 / 패딩
- 마진은 요소 바깥 여백, 패딩은 요소 안쪽 여백.
- 정렬Alignment
- 요소의 가장자리·중심을 가상의 선에 맞추는 것. 질서를 만든다.
- 반응형Responsive
- 화면 크기에 따라 레이아웃이 유연하게 바뀌는 설계.
- 8pt 그리드
- 간격·크기를 8의 배수로 맞춰 일관성을 확보하는 스페이싱 규칙.
UI 컴포넌트·산출물
- 와이어프레임Wireframe
- 색·이미지 없이 구조와 배치만 잡은 저해상도 설계도.
- 목업Mockup
- 실제 색·이미지·서체를 적용한 고해상도 시안.
- 프로토타입Prototype
- 클릭·전환 등 상호작용을 붙여 실제처럼 시연하는 시안.
- 컴포넌트Component
- 버튼·카드처럼 반복 사용하는 재사용 가능한 UI 조각.
- 디자인 시스템Design System
- 색·타이포·컴포넌트·규칙을 하나로 묶은 일관성의 원천.
- 모달 / 토스트
- 모달은 화면 위에 뜨는 집중 창, 토스트는 잠깐 나타났다 사라지는 알림.
- CTACall To Action
- 사용자의 행동을 유도하는 핵심 버튼·문구(예: ‘시작하기’).
원칙·이론
- 어피던스Affordance
- 생김새만으로 사용법을 짐작하게 하는 성질(버튼은 눌러 보이게).
- 게슈탈트 원리
- 근접·유사·연속 등으로 사람이 요소를 묶어 인식하는 시지각 법칙.
- 접근성a11y
- 장애·환경과 무관하게 누구나 쓸 수 있게 만드는 설계 원칙.
- 시각적 무게Visual Weight
- 크기·색·대비로 특정 요소가 눈길을 끄는 정도.
- 황금비Golden Ratio
- 약 1:1.618의 비율. 균형 잡힌 구성의 참고 기준으로 쓴다.
