UI - 사람들이 컴퓨터와 상호 작용하는 시스템
UX - 사용자가 어떤 시스템, 제품, 서비스를 직•간접적으로 이용하면서 느끼고 생각하는 총체적 경험
UX는 UI를 포함합니다
모달 (Modal) - 기존에 이용하던 화면 위에 오버레이 되는 창
토글 (Toggle) - On/Off를 설정할 때 사용하는 스위치 버튼
탭 (Tab) - 콘텐츠를 분리해서 보여주고 싶을 때 사용하는 UI 디자인 패턴
태그 (Tag) - 콘텐츠를 설명하는 키워드를 사용해서 라벨을 붙이는 역할
자동완성 (Autocomplete) - 사용자가 내용을 입력 중일 때 사용자가 입력하고자 하는 내용과 일치할 가능성이 높은 항목을 보여주는 것
드롭다운 (Dropdown) - 선택할 수 있는 항목들을 숨겨놓았다가, 펼쳐지면서 선택할 수 있게 해주는 UI 디자인 패턴
아코디언 (Accordion) - 접었다 폈다 할 수 있는 컴포넌트
캐러셀 (Carousel) - 컨베이어 벨트나 회전목마처럼 빙글빙글 돌아가면서 콘텐츠를 표시해 주는 UI 디자인 패턴
웹 디자인 분야에서는 화면을 세로로 몇 개의 영역으로 나눌 것인가에 초점을 맞춘 컬럼 그리드 시스템(Column Grid System)을 사용하며, Margin, Column, Gutter라는 세 가지 요소로 구성됩니다
사용자가 제품에 진입한 시점을 시작으로 취할 수 있는 모든 행동을 뜻하며 다이어그램을 그려서 정리합니다.
직사각형 : 사용자가 보게 될 화면 ( ex. 회원 가입 페이지, 로그인 페이지 … )
다이아몬드 : 사용자가 취하게 될 행동 ( ex. 로그인, 버튼 클릭, 업로드 … )
화살표 : 직사각형(화면)과 다이아몬드(행동)를 연결시켜주는 화살표
다이어그램 도구로는 Miro, FigJam 가 있다.