UI 디자인 패턴
- UI 디자인은 왜 필요할까요?
- 자주 쓰이는 UI 패턴은 무엇일까요?
- 적재적소에 UI 패턴을 사용할 수 있나요?
모달 (Modal)
- 기존 화면 위에 오버레이 되는 창
- 일반적으로 모달 범위 밖을 클릭하면 모달이 닫힙니다.
- 모달을 닫기 전에는 기존 화면과 상호작용할 수 없습니다.
토글 (Toggle)
- On/Off 설정하는 스위치 버튼
- 색상, 스위치의 위치, 그림자 등의 시각적 효과를 토글에 주어 직관성을 제고할 수 있습니다.
탭 (Tab)
- 콘텐츠를 분리해서 보여주고 싶을 때 사용
- 가로 한줄이 가장 흔하지만, 세로로 배열하거나 여러 줄로 배열할 수 있습니다.
- 각 섹션의 이름이 길지 않아야 하고, 구분이 명확해야 하고, 현재 보고 있는 섹션을 표시해야합니다.
태그 (Tag)
- 키워드를 이용해 콘텐츠 라벨링
- 태그를 직접 사용자가 커스텀하는 방식과 정해준 태그만 사용하는 방식이 있습니다.
자동완성 (Autocomplete)
- 사용자 정보를 직접 입력하는 시간을 줄여줌
- 항목 갯수를 제한하고 방향키나 클릭으로 접근할 수 있어야합니다.
드롭다운 (Dropdown)
- 항목들이 펼쳐지면서 선택할 수 있게 해줌
- 정확도가 중요합니다.
아코디언 (Accordion)
- 접고피고 할 수 있는 컴포넌트, 보통 여러 개 연속 배치
- 화면이 깔끔해집니다.
- 트리 구조나 메뉴바로 사용할 경우 상화 관계를 표현합니다.
- 콘텐츠를 담을 때는 두괄식 내용전달 할 수 있습니다.
캐러셀 (Carousel)
- 컨베이어 벨트, 회전목마, 슬라이더와 비슷
- 수동으로 넘겨야하는 경우 버튼이나 전,후 컨텐츠를 살짝 보여줌으로써 유저가 직관적으로 알 수 있어야합니다.
페이지네이션 (Pagination)
- 페이지 단위로 컨텐츠 정렬
- 매끄러운 사용자 경험과는 거리가 멀 수 있습니다.
무한스크롤 (Infinite SCroll, Continuous Scroll)
- 모든 콘텐츠 불러올 때까지 스크롤
- 페이지네이션과 비슷하지만 각각 장단점이 있습니다.
- 페이지의 맨 아래 도달시 추가 콘텐츠를 로드하는 방식으로 만듭니다.
GNB (Global Navigation Bar)
LNB (Local Navigation Bar)
- GNB
- 최상위 메뉴
- 항상 동일한 위치에 있어야 합니다.
- LNB
- GNB 에 종속되는 서브 메뉴 혹은 특정 페이지 전용 메뉴
디자인패턴 레퍼런스 사이트
참조
코드스테이츠 프론트엔드 부트캠프
Aim for the TOP, Developer