https://ui-patterns.com/patterns

모달 (Modal)

기존에 이용하던 화면 위에 오버레이 되는 창
닫기 버튼, 모달 범위 밖을 클릭하면 모달이 닫히는 것이 일반적
모달을 닫기 전에는 기존 화면과 상호작용할 수 없음

또 다른 브라우저 페이지를 여는 팝업창과는 구분되는 개념
팝업은 브라우저에 의해 강제로 막힐 수 있지만,
모달은 브라우저 설정에 영향을 받지 않는다.

토글 (Toggle)

On / Off 를 설정할 때 사용하는 스위치 버튼
보통 On / Off 두개의 옵션이 있을 때 사용하지만
여러개 옵션이 있을 때도 사용

현재 설정이 어떤지 직관적으로 확인할 수 있어야함
(색상, 스위치의 위치, 그림자 등의 시각적 효과를 사용)

탭 (Tab)

탭은 콘텐츠를 분리해서 보여주고 싶을 때 사용하는 패턴
가로 한줄로 배열된 형태가 가장 흔함
세로로 배열하거나 여러 줄로 배열 가능

각 센션의 이름은 길면 안 되며, 구분이 명확, 현재 섹션을 확인할 수 있도록
표시해야함

태그 (Tag)

태그는 콘텐츠를 설명하는 키워드를 사용해서 라벨을 붙이는 역할
사용자들은 자신이 작성한 콘텐츠에 태그를 붙임으로써 콘텐츠를 분류할 수 있고
태그를 사용해 관련 콘텐츠만 검색가능

키워드는 사용자가 직접 작성할 수 있게 하거나, 종류를 정해놓을 수 있다
어떤 방식을 선택하든 태그의 추가와 제거는 자유로워야함

자동완성 (Autocomplete)

사용자가 내용을 입력 중 일대 사용자가 입력하고자 하는 내용과 일치할 가능성이
높은 항목을 보여주는 것

항목이 너무 많이 나오지 않도록 갯수를 제한, 키보드 방향키 키나 클릭으로
접근하여 사용할 수 있도록 함

드롭다운 (Dropdown)

선택할 수 있는 항목들을 숨겨놓았다가 펼쳐지면서 선택할 수 있게 해주는 패턴
객관식 문제의 선택지와 비슷한 개념]

아코디언 (Accordion)

접었다 폈다 할 수 있는 컴포넌트
트리 구조의 콘텐츠를 렌더링 할 때 사용하거나, 메뉴바로 사용할 수 도 있음

화면을 깔끔하게 구성하기 위해서 사용하며, 트리 구조나 메뉴바의 경우로 사용할 때는
상하 관계를 표현하기 위해서 사용하는 경우가 많다

케러셀 (Carousel)

공항의 수하물 컨베이어 벨트, 또는 회전목마라는 뜻
돌아가며 콘텐츠를 표시해주는 디자인 패턴

사용자가 직접 넘기는 경우에는 콘텐츠가 넘어갈 수 있음을 직관적으로 알 수 있어야 함
다음 콘텐츠를 옆에 보이게 배치하거나, 넘길 수 있는 버튼을 배치함

페이지네이션 (Pagination)

정보가 한 페이지에 띄우기에 너무 많은 경우 책 페이지를 넘기듯
번호를 붙여 페이지를 구분해는 것
원하는 페이지에 바로 접근 가능하다는 장점이 있지만 매끄러운 사용자 경험과는 거리가 멀 수 있다

무한 스크롤 (Infinite Scroll)

모든 컨텐츠를 불러올 때까지 무한으로 스크롤을 내릴 수 있는 것을 말하며
페이지네이션과 마찬가지로 한 번에 띄우기에 정보가 너무 많은 경우에 사용
페이지네이션보다는 좀 더 매끄러운 사용자 경험, 하지만 끝과 지나친 콘텐츠를 확인하기 어렵다는 점이 단점

맨 아래 도달하면 추가 콘텐츠를 로드해오는 방식으로 만듦
모든 콘텐츠를 로드해온 후 조금씩 보여주는 방식은 무한 스크롤이 아님

GNB (Global Navigation Bar)

어느 페이지에 들어가든 사용할 수 있는 최상위 메뉴

어느 페이지에 있든 사용할 수 있도록 항상 동일한 위치에 있어야 함

LNB (Local Navigation Bar)

GNB에 종속되는 서브메뉴 혹은 특정 페이지에서만 볼 수 있는 메뉴