비교하며 공부하는 <UX/UI용어> 모음집

오늘은 UI/UX 디자인을 하는데 있어서 비슷한 상황에 사용되는 다른 기능들에 대한 용어를 정리해 보았습니다.

피지네이션 (Pagination) vs 무한 스크롤 (Infinite Scroll)

좌) 알바몬 - 피지네이션 형태 우) 잡코리아 - 무한 스크롤 형태

• 피지네이션: 주로 페이지를 나누어 한 번에 일정량의 콘텐츠를 보여주는 방식입니다. 사용자는 '다음 페이지'를 클릭하거나 스와이프해서 추가 콘텐츠를 로드합니다. 주로 뉴스 웹사이트나 온라인 쇼핑몰에서 페이지를 넘길 때 자주 사용됩니다.
• 무한 스크롤: 사용자가 페이지 끝에 도달하면 자동으로 새로운 콘텐츠를 불러오는 방식입니다. SNS 피드나 이미지 갤러리처럼 콘텐츠를 계속해서 끊김 없이 보여주는 데 사용됩니다.

✅ 피지네이션은 페이지 전환이 명확한 반면, 무한 스크롤은 끊김 없이 콘텐츠가 계속 로드되어 사용자가 자연스럽게 스크롤을 이어갈 수 있습니다.

 

노치 (Notch) vs 다이나믹 아일랜드 (Dynamic Island)

좌) 아이폰13 - 노치 우) 아이폰17 - 다이나믹 아일랜드

• 노치: 스마트폰의 화면 상단에 카메라나 센서 등이 위치한 부분을 말합니다. 아이폰 X에서 처음 등장한 이후, 다양한 브랜드의 스마트폰에서 노치 디자인을 채택했습니다.
• 다이나믹 아일랜드: 아이폰 14 프로 모델에서 새롭게 도입된 개념으로, 카메라와 센서 영역을 인터랙티브하게 활용하여 다양한 기능을 제공하는 디자인입니다. 예를 들어, 알림이나 미디어 컨트롤 등을 표시하는 동적 요소로 바뀌는 특징이 있습니다.

✅ 노치는 단순히 화면 상단에 자리잡은 구멍처럼 고정된 형태라면, 다이나믹 아일랜드는 실시간으로 다양한 기능을 제공하면서 더욱 유동적이고 인터랙티브한 형태입니다.

 

칩 (Chip Style) vs 바텀시트 (Bottom Sheet)

좌) 칩 형태의 댓글 정렬 우) 바텀 시트 형태의 설정 값

• 칩 형태: 주로 선택한 항목을 작은 '칩' 형태로 표시하여 여러 선택을 한 번에 보여주는 UI 요소입니다. 예를 들어, 태그 시스템이나 선택된 필터를 표시하는 데 사용됩니다.
• 바텀시트: 화면 하단에서 슬라이드하여 나타나는 팝업 형태로, 보통 추가적인 옵션이나 상세 정보를 제공할 때 사용됩니다. 예시로는 모바일 앱에서 지도나 음악 플레이어의 하단 시트가 있습니다.

✅ 칩 형태는 작은 선택 항목을 나타내는 반면, 바텀시트는 더 많은 콘텐츠나 옵션을 제공하는 하단에서 올라오는 형태입니다.

 

레이어 팝업 (Layer Popup) vs 토스트 팝업 (Toast Popup)

좌) 레이어 팝업 우) 토스트 팝업

• 레이어 팝업: 화면 위에 떠서 사용자의 주의를 끌거나 선택을 요구하는 팝업입니다. 예시로는 로그인, 알림, 팝업 광고 등이 있습니다.
• 토스트 팝업: 화면 상단이나 하단에 잠시 나타났다 사라지는 작은 알림 형태의 팝업입니다. 예시로는 "저장되었습니다" 같은 짧은 메시지를 표시하는 데 사용됩니다.

✅ 레이어 팝업은 사용자가 반드시 상호작용해야 하는 반면, 토스트 팝업은 사용자가 아무런 반응 없이 자동으로 사라집니다.

 

툴팁 (Tooltip) vs 아코디언 (Accordion)

좌) 툴팁 우) 아코디언

• 툴팁: 특정 UI 요소 위에 마우스를 올리거나 클릭할 때 간단한 설명을 제공하는 작은 팝업입니다. 예를 들어, 아이콘 위에 마우스를 올리면 해당 아이콘의 기능에 대한 설명이 나타납니다.
• 아코디언: 여러 항목을 클릭하면 펼쳐지거나 접히는 방식으로, 정보를 그룹화하여 제공하는 UI 요소입니다. 예시로는 FAQ 페이지에서 자주 사용됩니다.

✅ 툴팁은 짧은 설명을 제공하는 반면, 아코디언은 여러 정보를 그룹화하여 동적으로 펼치고 접을 수 있는 UI 구성 요소입니다.

---

 

UX/UI 용어를 공부할 때 서로 비교되는 것들을 함께 살펴보면 훨씬 더 기억하기 쉬운 것 같습니다. 오늘 다룬 용어들처럼, 비슷해 보이지만 조금씩 다른 점들을 이해하고 실제로 서비스 되고 있는 래퍼런스를 찾으며 공부해 보세요!