Home UI 디자인 패턴
Post
X

UI 디자인 패턴

Modal은 기존에 화면 위에 오버레이 되는 창을 말합니다.

팝업 창과는 다른 개념으로 팝업은 브라우저에 의해 강제로 막힐 수 있으므로, 꼭 보여줄 내용은 Modal을 사용하는 것이 좋습니다.

닫기 버튼을 따로 두거나 Modal의 범위 밖을 클릭하면 닫히는 식으로 구현합니다.

TIP
토글의 상태를 직관적

Modal


토글 Toggle

토글은 On/Off를 설정할 때 사용하는 옵션 스위치 버튼을 말합니다.

보통 2가지 옵션이 있을 때 사용하며, 여러 옵션이 있을 때는 탭(Tap)을 사용합니다.

TIP
토글의 상태를 직관적으로 보여주기 위해 색상, 스위치의 위치 등의 시각적인 효과 사용

toggle


탭 Tap

탭은 컨텐츠를 분리하여 보여주는 디자인 패턴을 말합니다.

TIP
각 섹션의 이름은 간단명료하게 섹션의 구분은 명확하게 선택된 섹션 표시는 확실하게

tap


드롭다운 Dropdown

드롭다운은 선택할 수 있는 항목들을 숨겨놓고 펼쳐지면 선택할 수 있는 디자인 패턴을 말합니다.

TIP
사용자가 자신이 선택한 항목을 정확히 알 수 있게


GNB (Global Navigation Bar), LNB (Local Navigation Bar)

GNB는 어느 페이지에 들어가든 사용할 수 있는 최상위 메뉴를 말합니다. LNB(Local Navigation Bar)는 GNB에 종속되는 서브 메뉴 혹은 특정 페이지에서만 볼 수 있는 메뉴를 말합니다.

아래 예시에서는 탭 형식으로 최상단에 위치한 메뉴가 GNB, 마우스를 올렸을 때 드롭다운 형식으로 내려오는 서브 메뉴가 LNB이다.

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

gnb-lnb

이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.