UX

• UX(User Experience, 사용자 경험)의 사전적 의미는 사용자가 어떤 시스템, 제품, 서비스를 직•간접적으로 이용하면서 느끼고 생각하는 총체적 경험입니다.
• UI를 포함하는 의미

UI

• UI(User interface)사용자에게 보이는 화면을 구성, 사람들과 컴퓨터가 상호작용하는 시스템
  • 보여지는 화면 뿐만아니라 키보드, 마우스등 물리적 요소도 포함.
  • 보여지는 화면은 크게 두개로 나뉨 CLI(Command Line Interface), GUI(Graphical User Interface)

UI와 UX의 차이점

• 좋은 UX는 좋은 UI다 (대부분 o)
• 좋은 UI는 좋은 UX를 제공한다. (x)
• UX를 좋게 한다는건 기획단계에서 의미가 있다.
• UI를 좋게 한다는건 typography나 글자색상등 시각적 인터페이스 요소에 초점을 맞추는것을 의미한다.
• UX는 상품 검색이라는 행위 전체를 관통하는 사용자 경험에 대한 것이고, UI는 사용자가 경험하는 검색창이나 검색 결과 페이지 같은 이용 수단이나 대상에 대한 부분에 해당한다
• 여행으로 생각하면 UI는 목적지로 가는 도로, 자동차로 생각하면되고 UX는 여행하면서 보는 풍경, 추억, 기분, 등을 아우르는 말로 이해하면 된다.

UI 디자인 패턴

Modal, Modaless

• Modal은 기존에 사용하던 창위에 오버레이되는 창을 말함.
• Modal은 새 다이얼로그창이 열렸을 때 새로운 다이얼로그창이 종료될때 까지 기존에 있던창을 사용하지 못하는 방식을 뜻한다.
• Modaless는 하나이상의 다이얼로그창이 있어도 기존에 열린 창을 사용이 가능하다. 프로그램의 제어권을 독점하지 않으므로 다른 작업을 같이 할 수 있다.

Toggle (토글)

• 보통 on/off형식을 이용할때 사용한다. boolean형태의 변수와 같이 사용하고 2개이상일 때도 사용이 가능하지만 탭사용이 권장된다.

Tab(탭)

• 콘텐츠를 분리해서 보여주고 싶을 때 사용하는 디자인패턴
• 각 섹션의 이름은 보여주고자 하는 내용의 대표적인 제목으로 해야한다.

Tag (태그)

• 콘텐츠를 설명하는 키워드를 사용해서 라벨을 붙이는 역할

Autocomplete (자동완성)

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

Dropdown

• 선택할 수 있는 항목들을 숨겨놓았다가, 펼쳐지면서 선택할 수 있게 해주는 UI 디자인 패턴

Accordion

• 접었다 폈다 할 수 있는 컴포넌트로, 보통 같은 분류의 아코디언을 여러 개 연속해서 배치한다.
• 트리 구조의 콘텐츠를 렌더링 할 때 사용하거나, 메뉴바로 사용할 수도 있지만, 위 예시처럼 단순히 콘텐츠를 담아놓기 위한 용도로도 사용할 수 있다

Carousel

• 개발자가 지정해 놓은 콘텐츠를 순서대로 표시해 주는 UI 디자인 패턴.
• 자동으로 돌아가거나, 사용자가 옆으로 넘겨야만 넘어가거나, 아니면 둘 중 선택할 수 있도록 만드는 패턴

Pagination

• 한 페이지에 띄우기에 정보가 너무 많은 경우, 책 페이지를 넘기듯이 번호를 붙여 페이지를 구분해주는 것을 말한다.
• 페이지를 넘길때 화면 깜빡임이나 데이터를 받아오는 시간이 있기 때문에 좋은 UX와는 거리가 있다.

Infinite Scroll , continuous Scroll

• 모든 컨텐츠를 불러올 때 까지 무한으로 내릴 수 있는 스크롤
• pagination과 마찬가지로 한번에 많은 정보를 띄우기 어려울 때 사용
• 화면 깜빡임이 없어서 좋은 UX를 제공하나, 콘텐츠의 끝이 어딘지모르고 지나간 콘텐츠를 찾기 어려움
• 한번에 모든 데이터를 받고 구현하는 무한스크롤은 무한스크롤이라 불릴수 없다.

GNB (Global Navigation Bar)

• 어느 페이지에 들어가든 사용할 수 있는 최상위 메뉴
• 어디에서든 같은 곳에 있어야 좋은 UX를 제공한다.

LNB (Local Navigation Bar)

• GNB에 종속되는 서브 메뉴 혹은 특정 페이지에서만 볼 수 있는 메뉴를 뜻한다.
• 보통 탭 형식으로 최상단에 위치한 메뉴가 GNB, 마우스를 올렸을 때 드롭다운 형식으로 내려오는 서브 메뉴가 LNB이다.

다양한 디자인패턴을 소개하는 사이트

https://ui-patterns.com/patterns

---

좋은 UX를 만드는 요소

<피터 모빌(Peter Morville)의 벌집 모형 - UX평가에 사용>

• 유용성은 제품이나 서비스가 목적에 맞는, 사용 가능한 기능을 제공하고 있는가에 관한 요소
• 사용성은 제품이 본연의 기능을 제공하는 것을 넘어서 사용하기 쉬운가에 관한 요소
• 매력성은 말 그대로 제품이 사용자들에게 매력적인가에 대한 요소입니다
• 신뢰성은 사용자가 제품이나 서비스를 믿고 사용할 수 있는가에 관한 요소입니다.
• 접근성은 나이, 성별, 장애 여부를 떠나서 누구든지 제품이나 서비스에 접근할 수 있는가에 관한 요소
• 검색 가능성은 사용자가 원하는 기능이나 정보를 쉽게 찾을 수 있는가에 관한 요소
• 가치성은 위에서 언급된 모든 요소들을 총합하여 고객에게 가치를 제공하고 있는가에 관한 요소 <제이콥 닐슨의 10가지 사용성 평가 기준 (Jakob’s Ten Usability Heuristics)>