UI 디자인 패턴

UI 디자인 패턴:  화면에 배치할수있는 자주 쓰이는 컴포넌트

 

#모달(Modal)
-기존에 이용하던 화면 위에 오버레이 되는 창 (새로운 브라우저창을 띄우는것 아니다)
-모달을 닫기 전에는 기존 화면과 상호작용할수없다.
-닫기버튼, 혹은 모달 범위 밖을 클릭하면 모달이 닫히는 것이 일반적이다.
-팝업은 브라우저에 의해 강제로 막힐수있지만, 모달은 브라우저 설정에 영향을 받지 않아 꼭 보여주고싶은 내용은 모달을 사용하는게 좋다.

#토글(Toggle)
-on/off시 사용하는 스위치버튼
-시각적효과로 사용자가 토글의 상태를 직관적으로 알수있게 만들어야한다.
-on/off처럼 옵션이 두개인경우 말고 여러개의 옵션으로도 가능하다.
단, 옵션의 개수가 너무 많다면 탭을 사용하는것을 고려해라.

#탭(tab)
-콘텐츠를 분리해서 보여주고싶을때 사용하는 ui 디자인 패턴이다.
-가로배열이 흔하지만, 세로나 여러줄로 배열할수도있다.
-사용하려면 
*각섹션의 이름이 너무 길지 않아야한다
*섹션의 구분이 명확해야한다
*현재 어떤 섹션을 보고 있는지 표시해 주어야한다.

#태그(tag)
-설명하는 키워드를 사용해서 라벨을 붙이는 역할
-콘텐츠를 분류할수있고, 태그를 사용하여 관련 콘텐츠들만 검색할수도있다.
-태그의 추가와 제거는 자유롭게 할수있어야한다.

#자동완성 (Autocomplete)
-사용자가 내용을 입력중일때 사용자가 입력하고자 하는 내용과 일치할 가능성이 높은 항목을 보여주는 것
-사용자가 정보를 입력하는 시간을 줄여주고, 정보를 검색할때 많이 사용한다.
-사용시유의사항
*너무많은 항목이 나오지 않도록 개수를 제한하는 것이 좋다.
*키보드 방향 키나 클릭 등으로 접근하여 사용할수있는것이 좋다.

#드롭다운(Dropdown)
-선택할수있는 항목들을 숨겨놓았다가, 펼쳐지면서 선택할수있게해주는 ui 디자인패턴이다.
-객관식 문제의 선택지랑 비슷하다고 생각하면된다.
-사용시 주의사항
*사용자가 자신이 선택한 항목을 정확히 알수있게 만드는것이 중요하다

#아코디언(Accordion)
-접었다 폈다 할수있는 컴포넌트
-보통 같은 분류의 아코디언을 여러개 연속해서 배치한다.
-트리 구조의 콘텐츠를 렌더링할때 사용하거나, 메뉴바로 사용할수도 있지만, 단순히 콘텐츠를 담아놓기 위한 용도로도 사용할수있다.
-기본적으로는 화면을 깔끔하게 구성하기 위해서 사용
-트리구조나 메뉴바로 사용할 경우에는 상하관계를 표현하기 위해서 사용하는 경우가 많다.
콘텐츠를 담는 용도로 사용할때에는 핵심 내용을 먼저 전달하려는 목적을 가질때가 많다.

#캐러셀 (Carousel)
-컨베이어벨트처럼 빙글빙글 돌아가면서 콘텐츠를 표시해주는 디자인 패턴
-자동으로 돌아가거나, 사용자가 옆으로 넘겨야만 넘어가거나, 아니면 둘중 선택할수있도록 만들수있다.

#페이지네이션 (Pagination)
-한페이지에 띄울 정보가 너무 많은 경우 페이지를 구분해주는것
-사용자가 원하는 페이지로 바로바로 접근할수있다는 장점이 있지만, 페이지를 넘기기 위해서는 잠시 멈춰야 하기 때문에 매끄러운 사용자 경험과는 거리가 멀수있다는 단점이있다.

#무한스크롤 (Infinite Scroll, Continuous Scroll)
-페이지네이션과 마찬가지로 한번에 띄우기엔 정보가 너무 많을때 사용하는 디자인 패턴.
-페이지네이션처럼 잠시 멈춰서 페이지를 선택할 필요가 없기 때문에 더 매끄러운 사용자 경험을 제공한다.
-콘텐츠의 끝이 어딘지 알수없다는점, 지나친 콘텐츠를 찾기 힘들다는 단점이 있다.
-보통 페이지의 맨 아래에 도달하면 추가 콘텐츠를 로드해오는 방식으로 만든다. (모든 콘텐츠를 한번에 받아온후 보여주는것 x)

#GNB, LNB
-global navigation bar
-local navigation bar
-GNB는 어느 페이지에 들어가든 사용할수있는 최상위메뉴
LNB는 GNB에 종속되는 서브메뉴 혹은 특정 페이지에서만 볼수있는 메뉴
-GNB는 어느 페이지에 있든 사용할수있도록 항상 동일한 위치에 있어야한다.