UI/UX 용어 정리

 

UI/UX 디자인 용어

1. 스플래시 스크린 (Splash Screen): 앱이나 웹사이트를 처음 열 때 나타나는 초기 화면.
2. GNB (Global Navigation Bar): 주요 메뉴와 전체 사이트 구조를 나타내는 상단 네비게이션 바.
3. LNB (Local Navigation Bar): 특정 페이지나 섹션 내에서의 네비게이션을 위한 바.
4. 와이어프레임 (Wireframe): 페이지 레이아웃의 기본 구조를 시각적으로 표현한 설계도.
5. 모크업 (Mockup): 디자인의 정밀한 시각적 표현으로, 실제 화면과 유사한 정적 시안.
6. 프로토타입 (Prototype): 인터랙티브한 기능을 포함한 시제품으로, 사용자 테스트에 사용.
7. GUI (Graphic User Interface): 그래픽 요소를 통해 사용자와 시스템이 상호작용하는 인터페이스.
8. 디자인 시스템 (Design System): 일관된 디자인을 위한 구성 요소와 지침의 모음.
9. 스타일 가이드 (Style Guide): 브랜드 일관성을 유지하기 위한 시각적 스타일 지침.
10. 반응형 디자인 (Responsive Design): 다양한 디바이스와 화면 크기에 적응하는 디자인.
11. 카드 기반 디자인 (Card-Based Design): 정보를 카드 형태로 분할하여 시각적으로 표현하는 디자인 방식.
12. 모달 윈도우 (Modal Window): 사용자 인터랙션을 요구하는 팝업 창.
13. 툴팁 (Tooltip): 특정 요소 위에 마우스를 올리면 나타나는 작은 팝업 정보.
14. 드롭다운 메뉴 (Dropdown Menu): 클릭 시 펼쳐지는 선택형 메뉴.
15. 플랫 디자인 (Flat Design): 단순하고 미니멀한 스타일의 디자인 접근법.
16. 스켈레톤 스크린 (Skeleton Screen): 콘텐츠 로딩 중에 빈 틀을 표시하여 로딩 시간을 줄이는 기법.
17. 네비게이션 바 (Navigation Bar): 웹사이트의 주요 메뉴를 표시하는 바.
18. 브레드크럼 (Breadcrumb): 사용자가 현재 위치를 추적할 수 있게 하는 탐색 경로.
19. 아이콘 (Icon): 작은 그래픽 이미지로 기능이나 내용을 나타냄.
20. 비주얼 하이어라키 (Visual Hierarchy): 요소의 중요도에 따라 시각적 우선순위를 부여하는 방법.
21. 카드 소팅 (Card Sorting): 정보 구조를 정의하기 위해 사용자가 카드를 분류하게 하는 방법.
22. 그리드 시스템 (Grid System): 레이아웃을 구성하는 격자 구조.
23. 픽셀 퍼펙트 (Pixel Perfect): 디자인과 구현이 픽셀 단위로 일치하도록 하는 것.
24. 반응형 이미지 (Responsive Image): 다양한 화면 크기에 맞게 자동으로 조정되는 이미지.
25. 컬러 팔레트 (Color Palette): 디자인에 사용되는 색상의 모음.
26. 폰트 페어링 (Font Pairing): 서로 어울리는 폰트를 함께 사용하는 것.
27. 오버레이 (Overlay): 콘텐츠 위에 겹쳐서 표시되는 화면.
28. 모바일 퍼스트 디자인 (Mobile First Design): 모바일 디바이스를 우선으로 고려한 디자인 접근법.
29. 인터랙티브 요소 (Interactive Elements): 사용자와 상호작용할 수 있는 디자인 요소.
30. 오프 캔버스 메뉴 (Off-Canvas Menu): 화면 밖에 위치해 있다가 트리거에 의해 나타나는 메뉴.
31. 플루이드 레이아웃 (Fluid Layout): 화면 크기에 따라 유동적으로 변화하는 레이아웃.
32. 타이포그래피 (Typography): 글꼴, 글자 크기, 줄 간격 등을 디자인하는 방법.
33. 브랜드 일관성 (Brand Consistency): 브랜드 아이덴티티를 일관되게 유지하는 것.
34. 사용자 여정 맵 (User Journey Map): 사용자가 서비스를 이용하면서 겪는 경험을 시각적으로 표현한 맵.
35. 페르소나 (Persona): 타겟 사용자 그룹의 대표적인 특징을 갖춘 가상 인물.
36. 사용성 테스트 (Usability Testing): 사용자가 제품을 사용하는 과정을 관찰하고 평가하여 문제점을 찾아내는 테스트.
37. A/B 테스트 (A/B Testing): 두 가지 버전의 디자인을 비교하여 어느 것이 더 효과적인지 테스트.
38. 정보 구조 (Information Architecture): 정보의 조직, 구조화 및 명명에 관한 기술.
39. 와이어플로우 (Wireflow): 와이어프레임과 사용자 흐름을 결합한 도식.
40. 상호작용 디자인 (Interaction Design, IxD): 사용자와 시스템 간의 상호작용을 설계하는 분야.
41. 휴리스틱 평가 (Heuristic Evaluation): 전문가들이 사용자 인터페이스를 평가하는 방법.
42. 컨텍스트 인터뷰 (Contextual Interview): 사용자의 자연스러운 환경에서 수행되는 인터뷰.
43. 사용자 시나리오 (User Scenario): 특정 사용자 상황을 설명하는 이야기 형식의 문서.
44. 사용자 흐름 (User Flow): 사용자가 특정 목표를 달성하기 위해 웹사이트나 앱에서 거치는 경로.
45. 히트맵 (Heatmap): 사용자가 웹 페이지에서 많이 상호작용하는 영역을 시각적으로 표시한 지도.
46. 심플리파이드 유저 인터페이스 (Simplified User Interface, SUI): 단순화된 사용자 인터페이스.
47. 에셋 (Asset): 디자인에 사용되는 모든 그래픽 요소.
48. 프로토타이핑 툴 (Prototyping Tool): 프로토타입을 만들기 위한 도구.
49. 온보딩 (Onboarding): 사용자가 제품을 처음 사용할 때 도움을 주는 일련의 과정.
50. 오프보딩 (Offboarding): 사용자가 제품을 그만 사용할 때 도움을 주는 과정.
51. 피드백 루프 (Feedback Loop): 사용자로부터 받은 피드백을 제품 개선에 반영하는 과정.
52. 인포그래픽 (Infographic): 정보를 시각적으로 표현한 그래픽.
53. 사용성 히어리틱스 (Usability Heuristics): 일반적인 사용성 원칙.
54. 콜 투 액션 (Call to Action, CTA): 사용자에게 특정 행동을 유도하는 요소.
55. 플로우차트 (Flowchart): 시스템 또는 프로세스의 흐름을 시각적으로 나타낸 도식.
56. 엠파시 맵 (Empathy Map): 사용자의 감정, 행동, 생각, 그리고 느끼는 것을 시각적으로 정리한 도구.
57. 애니메이션 (Animation): 시각적 요소의 움직임.
58. 트랜지션 (Transition): 화면이나 요소 간의 변환 효과.
59. 제스처 (Gesture): 터치스크린에서 사용하는 손가락 동작.
60. 스프린트 (Sprint): 일정 기간 동안 집중적으로 진행되는 작업.
61. 스크럼 (Scrum): 애자일 개발 방법론의 한 유형.
62. 데이터 시각화 (Data Visualization): 데이터를 시각적으로 표현하는 방법.
63. 파라랙스 스크롤링 (Parallax Scrolling): 배경과 전경이 다른 속도로 움직이는 스크롤링 효과.
64. 마이크로 인터랙션 (Microinteraction): 작은 상호작용 요소로, 사용자가 특정 작업을 완료하는 데 도움.
65. 인피니트 스크롤 (Infinite Scroll): 페이지를 계속 아래로 스크롤할 수 있게 하는 기능.
66. 페이징 (Paging): 콘텐츠를 여러 페이지로 나누는 방식.
67. 카르셀 (Carousel): 슬라이드 쇼 형태로 콘텐츠를 보여주는 요소.
68. 시각적 메타포 (Visual Metaphor): 직관적 이해를 돕기 위해 사용되는 시각적 비유.
69. 프로그레시브 디스크로저 (Progressive Disclosure): 필요한 정보만 단계적으로 제공하는 방법.
70. 시맨틱 HTML (Semantic HTML): 의미를 부여하는 HTML 태그 사용.
71. 사용자 인터뷰 (User Interview): 사용자의 요구와 경험을 이해하기 위해 수행되는 인터뷰.
72. 고유 식별자 (Unique Identifier, UID): 각 사용자를 식별하는 고유한 코드.
73. 제이쿼리 (jQuery): 자바스크립트 라이브러리 중 하나.
74. 앵귤러 (Angular): 프론트엔드 웹 애플리케이션 프레임워크.
75. 리액트 (React): 사용자 인터페이스를 구축하기 위한 자바스크립트 라이브러리.
76. 뷰 (Vue.js): 진보적인 자바스크립트 프레임워크.
77. 플러그인 (Plugin): 기능 확장을 위한 소프트웨어 추가 모듈.
78. API (Application Programming Interface): 응용 프로그램 간의 상호 작용을 위한 도구.
79. 서버사이드 렌더링 (Server-Side Rendering, SSR): 서버에서 HTML을 렌더링하는 방법.
80. 클라이언트사이드 렌더링 (Client-Side Rendering, CSR): 클라이언트에서 HTML을 렌더링하는 방법.
81. 싱글 페이지 애플리케이션 (Single Page Application, SPA): 하나의 페이지로 구성된 웹 애플리케이션.
82. 다중 페이지 애플리케이션 (Multi-Page Application, MPA): 여러 페이지로 구성된 웹 애플리케이션.
83. 프로그레시브 웹 애플리케이션 (Progressive Web Application, PWA): 웹과 네이티브 앱의 장점을 결합한 애플리케이션.
84. 컨텐츠 관리 시스템 (Content Management System, CMS): 콘텐츠를 관리하는 시스템.
85. SEO (Search Engine Optimization): 검색 엔진 최적화.
86. SEM (Search Engine Marketing): 검색 엔진 마케팅.
87. 로딩 스피너 (Loading Spinner): 로딩 중임을 나타내는 애니메이션.
88. 디자인 패턴 (Design Pattern): 반복 가능한 디자인 문제에 대한 해결책.
89. 푸터 (Footer): 웹 페이지의 하단 영역.
90. 헤더 (Header): 웹 페이지의 상단 영역.
91. 앵커 링크 (Anchor Link): 페이지 내 특정 위치로 이동할 수 있는 링크.
92. 배경 이미지 (Background Image): 페이지 또는 요소의 배경에 사용되는 이미지.
93. 백엔드 (Backend): 서버 측의 로직과 데이터베이스 관리.
94. 프론트엔드 (Frontend): 사용자 인터페이스와 관련된 클라이언트 측의 개발.
95. CSS (Cascading Style Sheets): 웹 페이지의 스타일을 정의하는 언어.
96. HTML (Hypertext Markup Language): 웹 페이지의 구조를 정의하는 언어.
97. 자바스크립트 (JavaScript): 웹 페이지에 인터랙티브한 기능을 추가하는 프로그래밍 언어.
98. UI 프레임워크 (UI Framework): 사용자 인터페이스를 구축하는 데 도움을 주는 라이브러리나 프레임워크.
99. UX 리서치 (UX Research): 사용자 경험을 이해하기 위해 수행되는 연구.
100. 핀치 인터랙션 (Pinch Interaction): 두 손가락을 사용하여 화면을 확대하거나 축소하는 제스처.

스플래시 스크린 (Splash Screen)

• 정의: 애플리케이션을 처음 실행할 때 잠깐 동안 표시되는 화면. 주로 로고, 앱 이름, 로딩 애니메이션 등을 포함합니다.
• 목적:
  • 브랜드 인지도: 로고와 브랜드 이미지를 통해 사용자가 앱과 브랜드를 인식할 수 있도록 합니다.
  • 로딩 시간: 앱이 초기 로딩을 하는 동안 사용자에게 대기 시간을 인식시키기 위해 사용됩니다.
  • 첫인상: 시각적으로 매력적인 화면을 제공하여 사용자가 긍정적인 첫인상을 받을 수 있게 합니다.

 

 

 

참고

https://lily-im.tistory.com/122