📝[Section3_Unit2] UI/UX
📌 UI (User Interface)
UI(사용자 인터페이스)는 사람들이 컴퓨터와 상호 작용하는 시스템을 의미한다.
✔️GUI (Graphical User Interface)
GUI는 그래픽을 이용해 컴퓨터와 상호작용하는 인터페이스이다. 일반적으로 프론트엔드 개발자에게 UI라 함은 GUI를 의미한다.
📌 UX (User Experience)
UX(사용자 경험)은 사용자가 시스템이나 서비스를 이용하며 느끼는 모든 경험을 의미한다. 제품, 서비스 그 자체에 대한 경험은 물론, 홍보, 접근성, 사후 처리 등 직간접적으로 관련된 모든 경험을 사용자 경험이라고 할 수 있다.
UX에 영향을 끼치는 요소는 많지만 프론트엔드 개발자에게 가장 중요한 요소는 UI이다.
✔️ UI와 UX
좋은 UI를 가졌어도 기능을 제대로 하지 않거나, 나쁜 UI를 가졌어도 기능에 충실하거나, 예외는 있지만 대체로 좋은 UI는 좋은 UX로 이어진다.
UI와 UX는 서로 다르지만 떼려야 뗄 수 없는 관계이며, 서로를 보완하는 역할을 한다. UX가 좋지 않은 곳을 찾아냄으로써 UI 개선점을 찾아낼 수 있고, UI를 개선함으로써 UX가 좋아지기도 한다. 이렇게 UX와 UI는 서로를 계속해서 발전시킬 수 있다.
📌 UI 디자인 패턴
✔️ 모달 (Modal): 기존에 이용하던 화면 위에 오버레이 되는 창. 모달을 닫기 전엔 기존 화면과 상호작용 할 수 없음. 주로 꼭 보여주고 싶은 내용을 모달로 설정함.
✔️ 토글 (toggle) : on/off에 이용하는 스위치 버튼. 옵션이 여러개일 경우에도 토글을 사용할 수는 있지만 개수가 많아지면 직관적이지 않으므로 탭을 사용하는 것을 고려해야 함.
✔️ 탭 (Tab) : 콘텐츠를 분리해서 보여주고 싶을 때 사용하는 UI 디자인 패턴. 각 섹션의 이름이 너무 길지 않아야 하고, 섹션의 구분이 명확해야 하며, 현재 어떤 섹션을 보고 있는지 표시해 주어야 함.
✔️ 태그 (Tag) : 콘텐츠를 설명하는 키워드를 사용해서 라벨을 붙이는 역할을 함. 태그로 사용될 키워드는 사용자가 직접 작성하게 할 수도 있고, 개발자가 미리 정해놓을 수도 있음.
✔️ 자동완성 (Autocomplete) : 사용자가 내용을 입력 중일 때 사용자가 입력하고자 하는 내용과 일치할 가능성이 높은 항목을 보여주는 것.
✔️ 드롭다운 (Dropdown) : 선택할 수 있는 항목들을 숨겨놓았다가, 펼쳐지면서 선택할 수 있게 해주는 UI 디자인 패턴. 보통 화살표 버튼을 누르면 펼쳐지게 만들지만, 그냥 마우스를 올려놓아도 펼쳐지게 만들 수도 있음.
✔️ 아코디언 (Accordion) : 접었다 폈다 할 수 있는 컴포넌트. 보통 같은 분류의 아코디언을 여러 개 연속해서 배치함. 메뉴바로 사용할 수도 있고, 단순히 콘텐츠를 담아놓기 위한 용도로도 사용할 수 있음.
✔️ 캐러셀 (Carousel) : 컨베이어 벨트나 회전목마처럼 빙글빙글 돌아가면서 콘텐츠를 표시해 주는 UI 디자인 패턴. 자동으로 돌아가거나, 사용자가 옆으로 넘겨야만 넘어가거나, 아니면 둘 중 선택할 수 있도록 만들 수 있음.
✔️ 페이지네이션 (Pagination) : 한 페이지에 띄우기에 정보가 너무 많은 경우, 책 페이지를 넘기듯이 번호를 붙여 페이지를 구분해 주는 것.
✔️ 무한 스크롤 (Infinite Scroll) : 무한 스크롤은 말 그대로 모든 콘텐츠를 불러올 때까지 무한으로 스크롤을 내릴 수 있는 것. 페이지네이션과 마찬가지로 한 번에 띄우기엔 정보가 너무 많을 때 사용함.
✔️ GNB (Global Navigation Bar), LNB (Local Navigation Bar)
: GNB(Global Navigation Bar)는 어느 페이지에 들어가든 사용할 수 있는 최상위 메뉴, LNB(Local Navigation Bar)는 GNB에 종속되는 서브 메뉴 혹은 특정 페이지에서만 볼 수 있는 메뉴.
보통 GNB는 항상 보이고 GNB에 마우스를 올리면 LNB가 내려오는 식으로 만들고, GNB가 있다가 없다가 하거나 위치가 계속 변하거나 하면 좋은 UX라고 할 수 없기 때문에 일관적이게 적용시켜야 함.
