UI/UX, UI 디자인 패턴

1. UI(User Interface, 사용자 인터페이스)

• 사람들이 컴퓨터와 상호 작용하는 시스템
• GUI(Graphical User Interface, 그래픽 사용자 인터페이스): 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업 환경
• 대부분의 UI는 GUI를 의미함

2. UX(User Experience)

• 사용자가 어떤 시스템, 제품, 서비스를 직•간접적으로 이용하면서 느끼고 생각하는 총체적 경험
• 제품, 서비스 그 자체에 대한 경험을 포함해 홍보, 접근성, 사후 처리 등, 직간접적으로 관련된 모든 경험을 나타냄
• UX에 영향을 주는 요소들 중, 프론트엔드 개발자에게 있어 가장 중요한 것은 UI

 

3. 디자인 패턴

모달

• 모달(Modal): 기존에 이용하던 화면 위에 오버레이 되는 창

토글

• 토글(Toggle): On/Off 설정할 때 사용하는 스위치 버튼. 토글의 상태를 직관적으로 알 수 있게 만들어야 함.

태그

• 태그(Tag): 콘텐츠를 설명하는 키워드를 사용해 라벨을 붙이는 역할

자동완성

• 자동완성(Autocomplete): 사용자가 내용을 입력 중일 때 사용자가 입력하고자 하는 내용과 일치할 가능성이 높은 항목을 보여주는 것

드롭아웃

• 드롭다운(Dropdown): 선택할 수 있는 항목들을 숨겨 놓았다가, 펼쳐지면서 선택할 수 있게 하는 디자인

아코디언

• 아코디언(Accordion): 접었다 폈다 할 수 있는 컴포넌트. 보통 같은 분류의 아코디언을 여러 개 연속해서 배치함

캐러셀

• 캐러셀(Carousel): 컨베이어 벨트나 회전목마처럼 빙글빙글 돌아가면서 콘텐츠를 표시하는 디자인 패턴

페이지네이션

• 페이지네이션(Pagination): 한 페이지에 듸우기에 정보가 너무 많은 경우, 책 페이지를 넘기듯이 번호를 붙여 페이지를 구분해주는 것

무한스크롤

• 무한스크롤(Infinite Scroll, Continuous Scroll): 모든 콘텐츠를 불러올 때까지 무한으로 스크롤을 내릴 수 있는 것

GNB, LNB

• GNB(Global Navigation Bar), LNB(Local Navigation Bar): GNB는 어느 페이지에 들어가든 사용할 수 있는 최상위 메뉴를, LNB는 GNB에 종속되는 서브 메뉴 혹은 특정 페이지에서만 볼 수 있는 메뉴를 의미함. GNB는 어느 페이지에 있든 사용할 수 있게 항상 동일한 위치에 있어야 함.