본문 바로가기
디자인/UXUI

UI·UX 디자인에서 자주 쓰는 핵심 용어 10가지 정리

by Guidefolio 2025. 12. 23.
반응형

디자인 초보부터 실무자까지 꼭 알아야 할 개념 완전 해설

UI/UX 디자이너 또는 디지털 제품을 만드는 사람이라면, 단순히 용어를 아는 것을 넘어 실제 의미와 쓰임을 이해하는 것이 중요하다.
해외 문서를 읽거나 글로벌 팀과 소통할 때도 이 용어들은 반복해서 등장한다. 이 글에서는 영어권에서도 자주 쓰이는 UI/UX 관련 핵심 용어 10가지를 꼼꼼하게 풀어서 설명했다.


1. Accessibility (접근성)

접근성은 모든 사용자가 디지털 서비스를 이용할 수 있게 설계하는 개념이다.
시각, 운동, 청각 등의 장애가 있는 사용자도 포함되죠. 예를 들어 스크린 리더가 읽을 수 있도록 이미지마다 설명을 달거나, 키보드만으로도 이용할 수 있게 만드는 것이 접근성 설계다.
이런 접근성 설계가 기본이 되면 사용자 만족도는 물론 법적 규제에도 대응할 수 있다. 


2. Design Thinking (디자인 씽킹)

디자인 씽킹은 문제 해결의 철학적 접근 방식이다.
사용자의 필요를 깊이 이해하고, 아이디어를 다양하게 내고, 프로토타입을 만들고, 테스트하는 과정을 반복한다.
단순히 보기 좋은 화면을 만드는 것이 아니라 사용자 중심의 문제 해결 과정 전체를 의미한다. 


3. Responsive Design (반응형 디자인)

오늘날 웹/앱은 다양한 화면 크기에서 일관된 경험을 제공해야 한다.
반응형 디자인이란 PC, 태블릿, 모바일 등 서로 다른 디바이스에서 레이아웃과 콘텐츠가 자동으로 조정되는 설계 방식이다.
이를 위해 유연한 그리드, 이미지 크기 조절, CSS 미디어 쿼리 등을 활용해야 한다. 
반응형 웹을 위한 그리드 시스템

 

반응형 웹을 위한 그리드 시스템 완전 정리

그리드 시스템(Grid System)이란?그리드는 사전적 의미로 격자, 즉 일정한 간격으로 나뉜 선의 구조를 의미한다. 디자인에서 말하는 **그리드 시스템(Grid System)**은 단순히 선을 긋는 행위가 아니라,

guidefolio.co.kr

 


4. Breakpoint (브레이크포인트)

브레이크포인트는 “화면 크기가 바뀌는 시점”이다.
예를 들어 모바일에서는 사이드바가 사라지고 메뉴가 축약되어야 할 때, 그 경계값을 브레이크포인트라고 부른다.
반응형 디자인에서 매우 중요한 개념이다. 


5. Above the Fold (상단 화면)

웹 페이지에서 스크롤 없이 처음 보이는 부분을 의미한다.
신문 인쇄에서 유래된 이 표현은, 중요한 정보나 사용자 행동을 유도할 콘텐츠를 여기에 배치해야 한다는 의미로 쓰인다.
사용자가 스크롤을 시작하기 전 관심을 끌 수 있느냐가 중요하다. 


6. Viewport (뷰포트)

뷰포트는 사용자가 현재 보고 있는 화면의 ‘보이는 영역’ 자체이다.
모바일과 데스크톱은 뷰포트 크기가 다르기 때문에, 이 차이에 맞게 텍스트 크기나 이미지 비율을 조정해야 좋은 경험을 제공한다. 

 

7. Material Design (머티리얼 디자인)

구글이 발표한 디자인 언어로, 계층 구조, 색상, 애니메이션 등을 체계화한 가이드라인이다.
일관성 있고 직관적인 UI를 만들기 위해 현재 많은 서비스에서 참고하고 있다.

머티리얼 디자인 자세히 알아보기

 

안드로이드 머티리얼 디자인, iOS 휴먼 인터페이스 가이드라인 한 번에 이해하기

플랫폼별 UI 설계 기준을 이해하고 싶은 디자이너·기획자를 위한 가이드입니다.안드로이드 머티리얼 디자인과 iOS 휴먼 인터페이스 가이드라인의 차이를 디자인 철학, 시각적 표현, UX 관점에서

guidefolio.co.kr

 

liquidglass
Liquid Glass

8. Liquid Glass (리퀴드 글래스)

리퀴드 글래스는 애플이 대중화한 UI 스타일이다.
반투명, 블러 효과, 반사광 등을 활용해 깊이감 있고 부드러운 인터페이스를 표현한다.
미니멀리즘과는 다른 고급스러운 입체감이 특징이다.

 

9. Motion-Responsive (모션 반응형 인터페이스)

사용자의 움직임에 따라 인터페이스가 반응하는 디자인이다.
예: 기기 기울기, 제스처, VR/AR 환경에서의 반응형 시각 요소 등.


이 개념은 단지 예쁘게 움직이는 것이 아니라 사용자 행동을 더 직관적으로 유도하기 위한 수단이다. 

반응형 웹을 위한 그리드 시스템

 

반응형 웹을 위한 그리드 시스템 완전 정리

그리드 시스템(Grid System)이란?그리드는 사전적 의미로 격자, 즉 일정한 간격으로 나뉜 선의 구조를 의미한다. 디자인에서 말하는 **그리드 시스템(Grid System)**은 단순히 선을 긋는 행위가 아니라,

guidefolio.co.kr

 

10. Flat Design (플랫 디자인)

평면적이고 단순한 시각 요소로 구성된 디자인 스타일이다.
그림자, 복잡한 질감, 장식 효과를 최소화하고 색상과 타이포그래피로 정보 구조를 강화한다.
심플한 인터페이스는 사용자로 하여금 정보에 집중하게 돕는다. 


마치며 — 용어 이상의 의미

단어 하나하나가 그냥 용어가 아니라, 사용자를 이해하고 더 나은 경험을 설계하기 위한 사고의 틀이라는 걸 기억하세요.
이 용어들에 익숙해지면 해외 자료 읽기, 실무 회의, 글로벌 협업 모두 훨씬 자연스럽고 전문적으로 진행될 것입니다.

반응형