UI/UX

UI/UX 개념

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

• 사람들이 컴퓨터와 상호 작용하는 시스템
• 그래픽 요소 외에 키보드, 마우스 등의 물리적 요소도 컴퓨터와 상호작용하기 위한 시스템이므로 UI라고 볼 수 있음.
• 스마트폰이 대중화되면서 모바일 디바이스에서 그래픽 UI가 중요해짐
• 현대 사회에서는 그래픽 UI, 즉 GUI(Graphical User Interface)가 굉장히 중요한 역할을 하게 되었음.

GUI (Graphical User Interface, 그래픽 사용자 인터페이스

• 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업 환경
• ex) 운영체제(Window, Mac OS)의 화면, 애플리케이션 화면
• 프론트엔드 개발자로서의 UI는 대부분 GUI를 의미

UX (User Experience, 사용자 경험)

• 사용자가 어떤 시스템, 제품, 서비스를 직,간접적으로 이용하면서 느끼고 생각하는 총체적 경험
• UI ⊂ UX (UX는 UI를 포함한다)
• 좋은 UX가 좋은 UI를 의미하거나, 좋은 UI가 항상 좋은 UX를 보장하지는 않는다.
• 하지만 나쁜 UI는 보통 나쁜 UX를 유발

UI 디자인

UI 디자인 패턴

• 프로그래밍 시 자주 반복되어 나타나는 문제점을 해결하고자 과거의 다른 사람이 해결한 결과물을 재사용하기 좋은 형태로 만든 패턴(자주 사용되는 UI 컴포넌트라 할 수 있음)

UI 디자인 종류

모달 (Modal)

• 기존에 이용하던 화면 위에 오버레이 되는 창

• 닫기버튼, 혹은 모달 범위 밖을 클릭할때 닫히고, 닫기전에는 기존 화면과 상호작용할 수 없다

• 팝업과의 차이점: 팝업은 브라우저에 의해 강제로 막힐 수 있지만, 모달은 브라우저 설정에 영향을 받지 않아, 꼭 보여주고 싶은 내용이 있다면 모달을 사용하는 것이 좋음.

토글 (Toggle)

• 토글은 On/Off를 설정할 때 사용하는 스위치 버튼
• 색상, 스위치의 위치, 그림자 등의 시각적 효과를 주어 사용자가 토글의 상태를 직관적으로 알 수 있게 만들어야 함.
• 보통 On/Off처럼 두개의 옵션이 있을때 사용하지만, 여러개 옵션이 있을때도 사용 가능(단, 어떤 옵션이 선택되어 있는지 직관적으로 알 수 있어야 하고, 옵션의 개수가 너무 많다면 탭을 사용할 것)

탭 (Tab)

• 탭은 콘텐츠를 분리해서 보여주고 싶을 때 사용하는 UI 디자인 패턴
• 가로로 한 줄로 배열된 형태가 가장 흔하지만, 세로로 배열하거나 여러줄로 배열할 수도 있음.
• 탭을 사용하려면 각 섹션의 이름이 너무 길지 않아야 하고, 섹션의 구분이 명확해야 하며, 현재 어떤 섹션을 보고 있는지 표시해주어야 함

태그 (Tag)

• 태그는 콘텐츠를 설명하는 키워드를 사용해서 라벨을 붙이는 역할
• 태그로 사용될 키워드는 사용자가 직접 작성하게 만들 수 있고, 개발자가 종류를 아예 정해놓을 수도 있음. 어떤 방식이든 태그의 추가와 제거는 자유롭게 할 수 있어야함!

자동완성 (Autocomplete)

• 말 그대로 사용자가 내용을 입력 중일 때 사용자가 입력하고자 하는 내용과 일치할 가능성이 높은 항목을 보여주는 것
• 사용자가 정보를 직접 입력하는 시간을 줄여주고, 정보를 검색할 때 많이 사용
• 자동 완성 항목은 너무 많이 나오는 것보다 개수를 제한하는 것이 좋고, 키보드 방향 키나 클릭 등으로 접근해 사용할 수 있는 것이 좋음

드롭다운 (Dropdown)

• 선택할 수 있는 항목들을 숨겨놓았다가, 펼쳐지면서 선택할 수 있게 해주는 UI 디자인 패턴
• 보통 화살표를 누르면 펼쳐지게 만들지만, 마우스만 올려놔도 펼쳐지게 만들 수 있음.
• 펼쳐지는 방식보다 중요한 건 사용자가 자신이 선택한 항목을 정확히 알 수 있게 만드는 것

아코디언 (Accordion)

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

캐러셀 (Carousel)

• Carousel = 공항의 수하물 컨베이어 벨트, 또는 회전목마
• 컨베이어 벨트나 회전목마처럼 빙글빙글 돌아가며 콘텐츠를 표시해 주는 UI 디자인 패턴
• 자동으로 돌아가거나, 사용자가 옆으로 넘겨야만 넘어가거나 아니면 둘 중 선택할 수 있도록 만들 수 있음
• 캐러셀을 사용자가 넘겨야만 넘어가도록 만드는 경우, 콘텐츠가 넘어갈 수 있음을 직관적으로 알 수 있어야 함. 따라서 다음 콘텐츠의 일부를 옆에 배치하거나, 콘텐츠를 넘길 수 있는 버튼을 배치하기도 함

페이지네이션(Pagination)

• 한 page에 띄우기에 정보가 너무 많은 경우, 책 페이지를 넘기듯이 번호롤 붙여 페이지를 구분해 주는 것을 말함.
• 사용자가 원하는 페이지로 바로바로 접근할 수 있는 장점이 있지만, 페이지를 넘기기 위해서는 잠시 멈춰야 하기 때문에 매끄러운 사용자 경험과는 거리가 멀 수 있다는 단점

무한스크롤 (Infinite Scroll, Continuous Scroll)

• 말 그대로 모든 콘텐츠를 불러올 때까지 무한으로 스크롤을 내릴 수 있는 것
• 페이지네이션과 같이 잠시 멈춰서 페이지를 선택할 필요가 없기 때문에 보다 더 매끄러운 사용자 경험을 제공함.
• 하지만 콘텐츠의 끝이 어딘지 알 수 없다는 점, 지나친 콘텐츠를 찾기 힘들다는 점이 단점
• 보통 페이지 맨 아래에 도달하면 추가 콘텐츠를 로드해오는 방식으로 만듦.
• 처음부터 모든 콘텐츠를 로드해온 후 조금씩 보여주는 방식으로 구현하는 것은 진정한 으미ㅣ의 무한스크롤이라고 할 수 없음

GNB (Global Navigation Bar), LNB (Local Navigation Bar)

• GNB = 어느 페이지에 들어가든 사용할 수 있는 최상위 메뉴

• LNB = GNB에 종속되는 서브메뉴 혹은 특정 페이지에서만 볼 수 있는 메뉴

• GNB는 어느 페이지에 있던 사용할 수 있도록 항상 동일한 위치에 있어야 함. GNB가 있다 없다 한다거나 위치가 자꾸 변하면 사용자 경험에 악영향을 줄 수 있음