UI 디자인 패턴
-자주사용되는 UI 컴포넌트
프로그래밍시 자주 반복되어 나타나는 문제점을 해결하고자 과거 다른사람이 해결한 결과물을 재사용하기 좋은 형태로 만든 패턴
*자주 쓰이는 UI 디자인 패턴을 익혀두면 UI를 디자인하기도 보다 쉬워지고, 프론트엔트 개발자, 디자이너, PM과의 의사소통도 원활해져 협업 효율이 높아짐
모달(Modal)
기존 화면위에 오버레이 되는 창
(다른 브라우저 페이지를 여는 팝업창과는 구분이 되는 개념. 팝업은 브라우저에 의해 강제로 막힐 수 있지만 모달은 브라우저 설정에 영향을 받지 않아, 꼭 보여주고 싶은 내용이 있다면 모달을 사용하는것이 좋음)
토글(Toggle)
On/Off 설정할때 사용하는 스위치 버튼
탭(Tab)
콘텐츠를 분지하고 싶을때 사용하는 UI 디자인 패턴
태그(Tag)
콘텐츠를 설명하는 키워드를 사용해서 라벨을 붙이는 역할
자동완성(Autocomplete)
사용자가 입력하고자 하는 내용과 일치할 가능성이 높은 항목을 보여주는 것
너무 많은 항목이 나오지 않도록 갯수를 제한하는것이 좋고, 키보드 방향키나 클릭으로 접근하여 사용할 수 있는것이 좋음
드롭다운(Dropdown)
선택할 수 있는 항목들을 숨겨놓았다가, 펼치면서 선택할 수 있게 해주는 UI디자인 패턴
아코디언(Accordion)
접었다 폈다 할수 있는 컴포넌트
캐러셀(Carousel)
빙글빙글 돌아가면서 콘텐츠를 표시해주는 UI 디자인 패턴
페이지네이션(Pagenation)
한 페이지에 띄우기에 정보가 너무 많은 경우, 책 페이지를 넘기듯이 번호를 붙여 페이지를 구분
무한스크롤(Infinite Scroll, Continuous Scroll)
모든 콘텐츠를 불러올 때까지 무한으로 스크롤을 내릴수 있는 것
페이지네이션과 같이 잠시 멈춰서 페이지를 선택할 필요가 없기 때문에 보다 더 매끄러운 사용자 경험을 제공하지만 콘텐츠의 끝이 어딘지 알 수 없다는 점, 지나친 콘텐츠를 찾기 힘들다는 점이 단점이 있음
GNB(Global Navigation Bar),LNB(Local Navigation Bar)
GNB_ 어느 페이지에 들어가든 사용할 수 있는 최상위 메뉴, 항상 동일한 위치 에 있어야함.
LNB_GNB에 종속되는 서브메뉴 혹은 특정페이지에서만 볼수 있는 메뉴
UI 레이아웃
그리드시스템(Grid System)
질서 있는 UI를 구성할 수 있게 도와줌
화면을 격자로 나눈 다음 그격자에 맞춰 콘텐츠를 배치하는 방법
웹 디자인 분야에서는 화면을 세로로 몇 개의 영역으로 나눌 것인가에 초점을 맞춘 컬럼 그리드 시스템(Column Grid System)을 사용
Margin Grid Gutter 로 구성됨
Margin
화면 양쪽의 여백, 절대단위, 상대단위
Column
콘텐츠가 위치 하게 될, 세로로 나누어진 영역
표준적으로 휴대폰에서 4개, 태블릿에서 8개, PC에서 12개 컬럼으로 나눔
Gutter
Column사이의 공간, 콘텐츠를 구분하는데 도움
Gutter간격이 좁을수록 콘텐츠들이 연관성 있어 보이고, 넓을 수록 독립적인 느낌을 줌(너무 좁으면 콘텐츠를 구분하기 힘들어지고, 답답한 느낌을 주고, 그렇다고 너무 넓으면 따로노는 느낌을 주면서 UI가 어수선해짐, Gutter는 아무리 넓어도 컬럼 너비보다는 작게 설정해줄 것)
