UI/UX

UI

• UI (User Interface, 사용자 인터페이스)
  • 사람들이 컴퓨터와 상호 작용하는 시스템
  • 예시 : 화면상의 그래픽 요소, 물리적요소 (키보드, 마우스) → 컴퓨터와 상호 작용하기 위한 시스템이므로 UI라고 볼 수 있다.

• GUI(Graphical User Interface, 그래픽 사용자 인터페이스)
  • 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업 환경
  • 예시 : 운영체제(Window, Mac OS), 애플리케이션 화면

UX

• UX (User Experience, 사용자 경험)
  • 사용자가 어떤 시스템, 제품, 서비스를 직·간접적으로 이용하면서 느끼고 생각하는 총체적 경험 (제품, 서비스 그 자체에 대한 경험은 물론, 홍보, 접근성, 사후 처리 등)

UI와 UX의 관계

UX는 UI를 포함합니다. 또한 좋은 UX가 좋은 UI를 의미하거나, 좋은 UI가 항상 좋은 UX를 보장하지는 않습니다.

---

UI 디자인 패턴

• 모달 (Modal)
  • 기존에 이용하던 화면 위에 오버레이 되는 창
  • 닫기 버튼, 모달 범위 밖을 클릭하면 모달이 닫히는 것이 일반적 (닫기 전에는 기존 화면과 상호 작용할 수 없음) → 꼭 보여주고 싶은 내용이 있다면 모달을 사용!
  

• 팝업 (Popup)
  • 기존에 이용하던 화면 위에 다른 브라우저 페이지는 띄우는 방식
  • 브라우저에 의해 강제로 막힐 수 있음

• 토글 (Toggle)
  • On/Off를 설정할 때 사용하는 스위치 버튼
  

• 탭 (Tab)
  • 콘텐츠를 분리해서 보여주고 싶을 때 사용하는 UI 디자인 패턴
  

• 태그 (Tag)
  • 콘텐츠를 설명하는 키워드를 사용해서 라벨을 붙이는 역할
  • 태그로 사용될 키워드는 사용자가 직접 작성하게 만들 수 도 있고, 개발자가 종류를 정해놓을 수 있음
  

• 자동완성 (Autocomplete)
  • 사용자가 내용을 입력 중일 때 사용자가 입력하고자 하는 내용과 일치할 가능성이 높은 항목을 보여주는 것
  • 자동 완성 항목은 개수 제한하는 것이 좋고, 키보드 방향 키나 클릭 등으로 접근하여 사용할 수 있는 것이 좋음

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

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

• 캐러셀 (Carousel)
  • 항의 수하물 컨베이어 벨트, 또는 회전목마라는 뜻의 영단어로, 컨베이어 벨트나 회전목마처럼 빙글빙글 돌아가면서 콘텐츠를 표시해 주는 UI 디자인 패턴
  • 자동으로 돌아가거나, 사용자가 옆으로 넘겨야만 넘어가거나, 둘 중 선택할 수 있도록 만들어야함
  

• 페이지네이션 (Pagination)
  • 한 페이지에 띄울 정보가 많은 경우, 책 페이지를 넘기듯이 번호를 붙여 페이지는 구분해주는 것 (페이지를 넘기기 위해서는 잠시 멈춰야해서 매끄러운 사용자 경험과는 거리가 멂)

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

• GNB (Global Navigation Bar), LNB (Local Navigation Bar)
  • GNB(Global Navigation Bar) : 어느 페이지에 들어가든 사용할 수 있는 최상위 메뉴
  • LNB(Local Navigation Bar) : GNB에 종속되는 서브 메뉴 혹은 특정 페이지에서만 볼 수 있는 메뉴
  

다양한 종류의 UI 디자인 패턴 : ui-patterens.com

 

UI 레이아웃

• 그리드 시스템 (Grid System)
  • 리드(grid)는 수직, 수평으로 분할된 격자무늬를 뜻하며, 화면을 격자로 나눈 다음 그 격자에 맞춰 콘텐츠를 배치하는 방법

• 컬럼 그리드 시스템(Column Grid System)
  • 웹 디자인 분야에서는 화면을 세로로 몇 개의 영역으로 나눌 것인가에 초점을 맞춘 컬럼 그리드 시스템을 사용
    • Margin
      • 화면 양쪽의 여백
      • 절대 단위 : px , 상대 단위(유동성) : vw , %
    • Column
      • 콘텐츠가 위치하게 될, 세로로 나누어진 영역
      • 컬럼 개수를 임의로 나눌 수 있음 (표준 : 휴대폰에서 4개, 태블릿에서 8개, PC에서는 12개의 컬럼)
      
      • Column은 상대 단위를 사용하여 콘텐츠가 창 크기에 맞춰서 크기가 변하도록 설정하는 것이 좋음 (기기마다 화면의 크기가 다르고, 브라우저 크기를 사용자가 마음대로 바꿀 수 있기 때문)
    • Gutter
      • Column 사이의 공간, 콘텐츠를 구분하는데 도움을 줌 (컬럼 너비보다는 작게 설정)
      

• 컬럼 그리드 시스템 예시
  • 네이버
    • 많은 웹 사이트들이 컬럼 그리드 시스템을 사용합니다. 아래는 네이버의 메인 페이지입니다. 화면이 12개의 컬럼으로 나누어져 있고 컬럼에 맞춰서 콘텐츠가 배열되어 있음을 알 수 있습니다.
    
    

• 컬럼 그리드 시스템 더 알아보기 : material.io

---

좋은 UX를 만드는 요소

1. 유용성(Useful) : 사용 가능한가?
   1. 제품이나 서비스가 목적에 맞는, 사용 가능한 기능을 제공하고 있는가
   2. 예시 : 계산기 (맞는 결과값 인지, 디자인의 계산기의 기능 자체에 영향을 주지 않지만 심미적 기능 제공)

2. 사용성(Usable) : 사용하기 쉬운가?
   1. 제품이 본연의 기능을 제공하는 것을 넘어서 사용하기 쉬운가
   2. 가능한 단순하면서 직관적이고 사용하기 쉬운 제품이나 서비스를 만들어야함

3. 매력성(Desirable) : 매력적인가?
   1. 디자인이 보기에 좋은지, 여러 요소 (이미지, 브랜딩 등)들이 사용자에게 긍정적인 감정을 불어일으킬 수 있는지, 해당 제품이나 서비스를 이용하고 싶어하는지

4. 신뢰성(Credible) : 신뢰할 수 있는가?
   1. 사용자가 제품이나 서비스를 믿고 사용할 수 있는가에 관한 요소입니다. 결함이 있는 제품을 정상 제품인 것처럼 속여서 판매하거나, 실제 제품이나 서비스를 통해 얻을 수 있는 가치를 과장하여 홍보한다거나, 사용자의 개인 정보를 유출하는 등 사용자의 신뢰성을 떨어뜨리는 일이 없어야 합니다. 장기적으로는 믿을 수 있는 브랜드 이미지를 구축하는 것이 좋습니다.

5. 접근성(Accessible) : 접근하기 쉬운가?
   1. 나이, 성별, 장애 여부를 떠나서 제품이나 서비스에 접근할 수 있는가에 관한 요소
   2. 시력이 좋지 않은 고 연령대 사용자들을 위한 글자 키우기나 돋보기 기능, 혹은 시각 장애인을 위한 음성 안내 기능 등 누구라도 비슷한 수준의 정보를 얻을 수 있도록 장치를 구비해 놓는 노력 등이 접근성을 높여줌 (접근성을 갖추는 방법 - unit5)

6. 검색 가능성(Findable) : 찾기 쉬운가?
   1. 사용자가 원하는 기능이나 정보를 쉽게 찾을 수 있는지
   2. 웹 사이트의 경우, 특정 페이지에 접근하기 힘들다면 좋은 UX를 주기 어려움
   3. 검색 가능성 높이기 : 내비게이션 바, 정보 검색 기능 등 콘텐츠를 직관적으로 배치

7. 가치성(Valuable) : 가치를 제공하는가?
   1. 위의 모든 요소를 총합하여 고객에게 가치를 제공하는가
   2. 사용자마다 가치판단과 기준이 다르다 → 따라서 가능한 모든 요소를 고려하는게 좋다.
   3. 사용자마다 가치판단과 기준이 다르다 → 따라서 가능한 모든 요소를 고려하는게 좋다.

 

User Flow (사용자 흐름)

• 직사각형 : 사용자가 보게 될 화면 (회원 가입 페이지, 로그인 페이지 등)

• 다이아몬드 : 사용자가 취하게될 행동 (로그인, 버튼 클릭, 업로드 등)

• 화살표 : 직사각형 (화면)과 다이아몬드(행동)을 연결시켜주는 화살

 

• 다이어그램 장점
  1. 사용자 흐름 상 어색하거나 매끄럽지 않은 부분을 발견하여 수정할 수 있음
  2. 있으면 좋은 기능을 발견하여 추가하거나 없어도 상관없는 기능을 발견하고 삭제할 수 있음

 

• User Flow 다이어그램 도구
  • Miro
  • FigJam