코드스테이츠/section3

UI/UX

호팍이네 2022. 6. 27. 15:09

UI

  • User Interface, 사용자 인터페이스
  • 사람들이 컴퓨터와 상호 작용하는 시스템
  • 그래픽 요소 외에 키보드, 마우스도 컴퓨터와 상호작용하기 때문에 UI로 볼 수 있음
  •  GUI : 그래픽 사용자 인터페이스, 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업 환경
  • 프론트엔드 개발자로서의 UI는 대부분 GUI를 의미한다.

UI 디자인 패턴

  • 모달 : 기존에 이용하던 화면 위에 오버레이 되는 창 모달을 닫기 전에는 기존 화면과 상호작용 할 수 없음.
  • 토글 : On/Off를 설정할 때 사용하는 스위치 버튼. On/Off 뿐만 아니라 여러 개의 옵션이 있을 때도 토글을 사용할 수 있음.
  • 탭 : 콘텐츠를 분리해서 보여주고 싶을 때 사용하는 UI 디자인 패턴.
  • 태그 : 콘텐츠를 설명하는 키워드를 사용해서 라벨을 붙이는 역할
  • 자동완성 : 사용자가 내용을 입력 중일 때 사용자가 입력하고자 하는 내용과 일치할 가능성이 높은 항목을 보여줌
  • 드롭다운 : 선택할 수 있는 항목들을 숨겨놓았다가 펼쳐지면서 선택할 수 있게 해주는 UI 디자인 패턴.
  • 아코디언 : 접었다 폈다 할 수 있는 컴포넌트로, 보통 같은 아코디언을 여러 개 연속해서 배치한다. 트리 구조나 메뉴바로 사용할 경우에는 상하 관계를 표현하기 위해 사용하는 경우가 많고, 핵심 내용을 먼저 전달하려는 목적을 가질 때가 많다.
  • 캐러셀(Carousel) : 공항의 수하물 컨베이어 벨트, 또는 회전목마라는 뜻의 영단어다. 뜻 그대로 빙글빙글 돌아가면서 콘테츠를 표시해준다.
  • 페이지네이션 : 책 페이지를 넘기듯 번호를 붙여 페이지를 구분해준다. 정보가 많을 때 사용
  • 무한스크롤 : 모든 콘텐츠를 불러올 때까지 무한으로 스크롤을 내릴 수 있는 것. 콘텐츠의 끝이 어딘지 알 수 없다는 점, 지나친 콘텐츠를 찾기 힘들다는 단점이 있다.
  • GNB : 어느 페이지에 들어가는 사용할 수 있는 최상위 메뉴
  • LNB : GNB에 종속되는 서브 메뉴 혹은 특정 페이지에서만 볼 수 있는 메뉴

UI 레이아웃

  • 그리드 시스템
  • 그리드(grid)는 수직, 수평으로 분할된 격자무늬를 뜻하며, 화면을 격자로 나눈 다음 그 격자에 맞춰 콘텐츠를 배치하는 방법
  • 웹 디자인 분야에서는 화념을 세로로 몇 개의 영역으로 나눌 것인가에 초점을 맞춘 컬럼 그리드 시스템을 이용한다.
  • Margin : 화면 양쪽의 여백
  • Column : 콘텐츠가 위치하게 될 세로로 나누어진 영역. 휴대폰 4개, 태블릿 8개, PC는 12개의 컬럼으로 나눈다. 상대 단위를 사용하여 콘텐츠가 창 크기에 맞춰서 크기가 변하도록 설정하는 것이 좋다.
  • Gutter : Column 사이의 공간으로 콘텐츠를 구분하는데 도움을 준다. 간격이 좁을수록 연관성이 있어 보이고 넓을수록 독립적인 느낌을 준다. 컬럼 너비보다는 작게 설정한다.

UX

  • User Experience, 사용자 경험
  • 사용자가 어떤 시스템, 제품, 서비스를 직간접적으로 이용하면서 느끼고 생각하는 총체적 경험
  • 제품 그 자체뿐만 아니라, 제품과 관련된 모든 요소가 UX에 영향을 준다.
  • UX에 영향을 주는 많은 요소 중 프론트엔드 개발자에게 가장 중요한 요소는 바로 UI다.
  • UX는 UI를 포함한다. 

좋은 UX를 만드는법

피터 모빌의 벌집 모형

  • 유용성(Useful) : 제품이나 서비스가 목적에 맞는, 사용 가능한 기능을 제공하고 있는가
  • 사용성(Usable) : 제품이 본연의 기능을 제공하는 것을 넘어 사용하기 쉬운가에 관한 요소. 직관적이고 사용하기 쉽게 만들 것
  • 매력성(Desirable) : 제품이 사용자들에게 매력적인가에 대한 요소.
  • 신뢰성(Credible) : 사용자가 제품이나 서비스를 믿고 사용할 수 있는가에 대한 요소.
  • 접근성(Accessible) : 나이, 성별, 장애 여부를 떠나 누구든 제품이나 서비스에 접근할 수 있는가에 관한 요소.
  • 검색 가능성(Findable) : 사용자가 원하는 기능이나 정보를 쉽게 찾을 수 있는가에 관한 요소.
  • 가치성(Valuable) : 가치성은 위에서 언급된 모든 요소들을 총합하여 고객에게 가치를 제공하고 있는가에 관한 요소.

User Flow

  • 사용자가 제품에 진입한 시점을 시작으로 취할 수 있는 모든 행동

User Flow 다이어그램 작성법

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

UI/UX 사용성 평가

  • 시스템 상태의 가시성 (Visibility of system status)
    • 합리적인 시간 내에 적절한 피드백을 통해 사용자에게 진행 상황에 대한 정보를 항상 제공해야한다. (업로딩 상황 표시)
  • 시스템과 현실 세계의 일치 (Match between system and the real world)
    • 내부 전문용어가 아닌 사용자에게 친숙한 단어, 구문 및 개념을 사용한다. (연주 애플리케이션의 모습이 실제 악기의 생김새와 유사)
  • 사용자 제어 및 자유 (User control and freedom)
    • 사용자는 종종 실수는 한다. 현재 진행 중인 작업에서 벗어날 수 있는 방법, 혹은 실수로 수행한 작업을 취소할 수 있는 방법, '탈출구'를 명확하게 제공해야 한다. (삭제 직후 취소할 수 있는 버튼 나타남)
  • 일관성 및 표준 (Consistency and standards)
    • 외부 일관성 : 일관적인 사용자 경험을 제공하기 위해 플랫폼 및 업계의 관습을 따른다. (잘 알려진 UI 디자인 패턴 사용)
    • 내부 일관성 : 사용자가 혼란스럽지 않도록 제품의 인터페이스나 정보 제공에 일관성이 있어야 한다. (한 제품 내 같은 인터페이스 사용)
  • 오류 방지 (Error prevention)
    • 오류가 발생하기 쉬운 상황을 제거해 사용자의 실수를 방지해야 한다. (삭제 버튼 눌렀을 때 확인 메세지 띄워주기 )
  • 기억보다는 직관 (Recognition rather than recall)
    • 사용자가 기억해야 하는 정보를 줄인다. (최근 검색했던 단어 목록을 확인할 수 있다.)
  • 사용의 유연성과 효율성 (Flexibility and efficiency of use)
    • 초보자와 전문가 모두에게 개별 맞춤 기능을 제공하도록 한다. (프로그램 단축키를 직접 설정하여 사용 가능)
  • 미학적이고 미니멀한 디자인 (Aesthetic and minimalist design)
    • 인터페이스에는 관련이 없거나 불필요한 정보가 포함되지 않도록 한다. 우선순위를 정하고 높은 것을 제공
  • 오류의 인식, 진단, 복구를 지원 (Help users recognize, diagnose, and recover from errors)
  • 도움말 및 설명 문서 (Help and documentation)