알아두면 좋은 디자인 용어 35가지

디자이너는 동료 및 고객과 전문적인 대화를 진행하면서 공통된 디자인 용어를 사용할 수 있어야 합니다. 이를 통해 아이디어를 효과적으로 전달하고 디자인 스킬에 대한 명령을 보여줄 수 있습니다. 다음은 디자인에 대해 커뮤니케이션 할때 도움이 되는 일반적인 디자인 용어입니다.

 

접근성  

접근성은 장애가 있는 사용자를 포함하여 사용자가 제품을 사용할 수 있는 용이성을 정의합니다. 모든 사용자가 동일하게 쉽게 제품을 사용할 수 있도록 모든 사용자의 요구를 고려한 디자인입니다.

 

Ratio (종횡비)

요소의 종횡비는 너비와 높이 사이의 비율입니다. 이미지의 종횡비를 측정하려면 너비를 높이로 나눕니다. 종횡비는 x:y로 표시되며 여기서 x는 이미지의 너비이고 y는 높이입니다.

 

Alignment

정렬은 개체가 가로 또는 세로로 정렬된 상위 페이지 또는 패널에 배치되는 방식입니다. 객체의 테두리는 서로 간의 관계를 정의합니다. Alignment는 디자인에 전반적으로 균형 잡히고 매력적인 모양을 제공합니다.

 

Balance

디자인의 균형은 텍스트와 디자인 요소가 사용 가능한 공간에 균등하게 퍼지도록 페이지에 항목을 정렬하는 방법을 나타냅니다.

 

Baseline

디자인에서 텍스트를 작성하는 데 사용되는 보이지 않는 선을 기준선 격자라고 합니다. 화면에서 개체와 텍스트를 정렬하는 데 도움이 됩니다.

 

Beta Launch

베타 출시는 특징과 기능이 적은 소프트웨어 제품의 초기 릴리즈입니다. 제품을 테스트하고 최종 릴리즈 전에 해결해야 할 문제를 찾는 데 사용됩니다.

 

Breadcrumbs

이동 경로는 사이트 또는 앱의 페이지 사이를 탐색하는 방법을 제공합니다. 사용자는 작업을 수행하기 위해 사이트의 계층 수준 사이를 이동합니다. 이동 경로를 통해 사용자는 사이트 위치를 추적하고 사용 가능한 링크를 사용하여 원하는 수준으로 이동할 수 있습니다.

 

CMYK

CMYK는 Cyan, Magenta, Yellow, Black의 4가지 색상의 약자입니다. RGB 색상과 유사하게 이 4가지 색상을 다양한 방법으로 결합하여 여러 색상 음영을 만들 수 있습니다.

 

콘텐츠 감사

여기에는 디자인에서 콘텐츠를 검토하고 콘텐츠를 보다 사용자 친화적으로 만들기 위해 수행할 수 있는 필요한 개선 사항을 식별하는 작업이 포함됩니다.

 

Contrast

외관상 서로 눈에 띄게 구별되는 구성 요소를 디자인에 통합하여 대비를 만듭니다. 디자이너는 색상, 모양, 질감, 크기 또는 서체를 변경하여 대비를 사용할 수 있습니다.

 

Design

디자인이라는 용어는 정렬, 균형, 근접성, 대비, 디자인 구성 요소, 계층 구조, 반복 및 여백을 포함하는 제품 디자인을 말합니다. 이 모든 요소의 조합을 사용하여 디자인은 사용자의 문제를 해결하는 데 도움이 됩니다.

 

Flat

플랫 디자인은 단순하면서도 사용 가능한 요소를 사용합니다. 플랫 디자인은 넓은 여백, 생생한 색상 및 2차원 도면을 사용하는 경향이 있습니다.

 

Font Size

타이포그래피의 글자 크기와 관련이 있습니다. 종류에 따라 10, 12, 14 등이 될 수 있습니다. 글꼴 크기는 UI에서 콘텐츠의 계층 구조를 정의하는 데 도움이 됩니다. 제목은 글꼴 크기가 큰 반면 일반 텍스트는 글꼴 크기가 작습니다.

 

Font Weight

글꼴의 두께와 관련이 있습니다. 예를 들어 굵은 글꼴 . 숫자 값을 사용하여 글꼴의 강도를 변경할 수 있습니다. 웹 페이지의 헤드라인으로 사용자의 관심을 끌고 싶다면 UI에 무거운 글꼴을 사용할 수 있습니다.

 

Gradient

그라데이션이라는 용어는 색상 간의 점진적 전환을 나타냅니다. 예를 들어 노란색과 주황색을 점진적으로 혼합하여 그라디언트라고 하는 새로운 혼합 색상을 형성할 수 있습니다.

 

Grayscale

그레이 스케일로 알려진 색 구성표는 검정색, 흰색 및 다양한 회색 음영만을 사용합니다. 회색조 UI는 이러한 색상을 사용하여 UI의 모든 요소를 ​​표시합니다.

 

Grid

교차하는 수직, 수평, 각도 또는 곡선의 배열을 그리드라고 합니다. 그리드는 페이지의 시각적 요소를 정렬하고 다른 요소와의 관계를 정의하는 데 사용됩니다.

 

Header

가장 중요한 디자인 요소는 헤더라고 하는 반복 방식으로 모든 페이지 위에 유지됩니다. 헤더에는 사용자가 UI와 상호 작용하는 동안 가장 자주 액세스하는 디자인 요소가 포함되어 있습니다.

 

Hex

Hex는 6자리 코드를 사용하여 색상을 정의하는 색상 시스템입니다. 많은 디자인 응용 프로그램에서 RGB 및 CMYK와 함께 16진수 코드를 찾을 수 있습니다.

 

Hierarchy

계층 구조는 UI에 대한 중요도에 따라 디자인 요소를 구성하고 배열하는 것입니다. 가장 중요한 요소가 맨 위에 배치되고 덜 중요한 요소가 내림차순으로 아래에 배치됩니다.

 

Icon

아이콘은 일반적으로 사용자의 작업과 관련된 개체의 시각적 표현입니다. 예를 들어, 검색 액션에 돋보기를 사용하고, 홈 아이콘은 애플리케이션의 홈 페이지를 나타내고, 오른쪽 화살표와 왼쪽 화살표는 사용자가 가야 할 방향을 나타냅니다. 작업 외에도 아이콘은 진행 중, 완료 등과 같은 프로세스 상태를 나타내는 데 사용됩니다.

 

Italics

이탤릭체는 단락 내의 특정 단어나 문장에 사용자의 관심을 끌기 위해 사용되는 텍스트 스타일입니다. 문자가 오른쪽(예: 오른쪽)으로 기울어질 때 사용됩니다 .

 

Leading

선행은 단일 단어의 두 줄 사이의 간격을 정의합니다. 그래서 선 높이라고도 합니다.

 

Logo

로고는 브랜드를 대표하는 중요한 비주얼입니다. 조직이나 비즈니스는 로고로 인식됩니다. 로고는 사업의 목적과 아이디어를 반영하여 사람들이 회사와 연관시킬 수 있어야 합니다.

 

Lorem ipsum

더미 텍스트라고도 하는 Lorem ipsum은 실제 복사본이 정의될 때까지 자리 표시자 텍스트 역할을 합니다.

 

Mockup

목업은 제품의 디자인과 레이아웃을 나타냅니다. 종이를 사용하여 스케치하거나 디지털 앱에서 만들 수 있습니다. 목업은 초기 디자인 개념을 평가하고 UI가 최종 디자인에서 어떻게 보일지에 대한 아이디어를 제공하는 데 도움이 됩니다.

 

Navigation

앱 또는 사이트의 탐색은 앱의 다른 섹션으로 경로를 지정하는 지도입니다. 사용자가 앱과 상호 작용하는 동안 따라가는 경로를 보여줍니다.

 

Navigation Bar

탐색 모음에는 사용자가 앱의 다른 페이지로 이동할 수 있는 옵션 집합이 표시됩니다. 이러한 탐색 옵션은 링크, 탭, 버튼 또는 기타 디자인 요소가 될 수 있습니다.

 

Personas

사용자 페르소나는 제품을 사용할 사용자를 나타냅니다. 사용자 조사의 결과로 사용자 와 사용자의 요구 사항을 파악하여 사용자 페르소나를 생성합니다. 사용자 페르소나는 사용자의 요구 사항에 집중하는 데 도움이 됩니다. 사용자 페르소나는 사용자 그룹의 이름, 이미지, 행동, 동기, 과제 및 목표를 포함합니다.

 

Prototype

프로토타입은 애플리케이션 의 디자인과 흐름을 나타내며 실제 제품이 작동하는 방식에 대한 아이디어를 제공합니다. 프로토타입을 사용하면 코딩에 비용을 들이지 않고도 초기 피드백을 더 쉽게 얻을 수 있습니다.

 

RGB

다른 색상 음영을 정의하는 데 일반적으로 사용되는 세 가지 빛의 색상을 RGB라고 합니다. RGB는 빨강, 녹색 및 파랑을 나타냅니다. Red, Green, Blue를 다양한 비율로 혼합하여 디자인의 모든 색상을 만들 수 있습니다. 

 

반응형 디자인

반응형 디자인은 크기와 방향이 다른 여러 장치에서 디자인이 제대로 작동하도록 하는 접근 방식입니다. 반응형 디자인은 모든 장치에서 열 때 구성 요소 및 동작의 일관성과 균일성을 잃지 않고 자체적으로 조정됩니다.

 

사용자 경험(UX)

사용자 경험(UX)은 사용자가 제품과 상호 작용할 때 느끼는 경험입니다. 사용 용이성은 의미 있고 즐거운 경험을 정의하는 데 도움이 되며 사용자가 작업을 쉽고 효율적으로 수행할 수 있도록 합니다.

 

Whitespace

화면에서 UI 구성 요소 사이의 빈 공간을 공백이라고 합니다. 여백은 깔끔하고 깔끔한 디자인을 제공하며 사용자가 UI를 어지럽히지 않고 보다 효과적으로 작업할 수 있도록 도와줍니다.

 

와이어프레임

와이어프레임은 웹사이트의 기본 레이아웃과 주요 기능을 단순하게 시각적으로 표현한 것입니다. 페이지나 웹 사이트가 어떻게 작동하는지 설명하기 위해 디자이너는 와이어프레임을 사용합니다. 와이어프레임은 간단하고 빠른 방법으로 제품의 빌딩 블록을 정의합니다