UI
사람들이 컴퓨터와 상호작용하는 시스템
화면상의 그래픽 요소를 포함하여 키보드, 마우스 등의 물리적 요소도 컴퓨터와 상호작용하기 위한 시스템이므로 UI이다.
GUI
사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업환경
윈도우, 맥OS의 화면, 애플리케이션 화면
UX
사용자가 어떤 시스템, 제품, 서비스를 직간접적으로 이용하면서 느끼고 생각하는 총제적 경험
-
UI 디자인 패턴
Modal : 기존에 이용하던 화면 위에 오버레이 되는 창
Toggle : on/off를 설정할 때 사용하는 스위치버튼
Tab : 콘텐츠를 분리해서 보여주고 싶을 때 사용하는 UI디자인 패턴
Tag : 콘텐츠를 설명하는 키워드를 사용해서 라벨을 붙이는 역할
자동완성 : 사용자가 내용을 입력 중일 때 사용자가 입력하고자 하는 내용과 일치할 가능성이 높은 항목을 보여주는 것
드롭다운 : 선택할 수 있는 항목들을 숨겨놓았다가 펼치면서 선택할 수 있게 해주는 디자인패턴
아코디언 : 접었다폈다 할 수 있는 컴포넌트로 여러개 연속해서 배치한다.
캐러셀 : 빙글빙글 돌아가면서 콘텐츠를 표시해주는 디자인패턴
페이지네이션 : 페이지를 구분해주는 것
무한 스크롤 : 모든 콘텐츠를 불러올 때까지 무한으로 스크롤을 내리는 것
GNB, LNB : GNB는 최상위 메뉴 LNB는 종속되는 메뉴
*항상 동일한 위치에 있어야한다.
그리드 시스템
질서 있는 구조의 UI를 구성할 수 있게 도와주는 시스템
컬럼그리드시스템을 사용하며 margin , column, gutter라는 세 요소로 구성된다.
-margin
양쪽의 여백
px같은 절대 단위를 사용해 고정값으로 사용 vw, %같은 상대단위를 사용해도 좋다
-column
세로로 나뉘어진 영역
휴대폰에서 4개, 태블릿에서 8개, PC에서 12개의 컬럼으로 나뉜다.
column은 상대단위를 사용하여 콘텐츠가 창 크기에 맞춰서 크기가 변하도록 설정하는 것이 좋다. 화면의 크기가 다르고 브라우저의 크기를 사용자가 마음대로 바꿀 수 있기 때문에
-gutter
column사이의 공간으로 콘텐츠를 구분하는데 좋다.
간격이 좁을수록 콘텐츠들이 연관성이 있어보이고 넓을수록 각 콘텐츠가 독립적인 느낌을 준다.
gutter는 아무리 넓어도 컬럼너비보다는 작게 설정해야한다.
좋은 UX를 만드는 요소
피터모빌의 벌집모형 - UX평가에 사용된다
유용성 , 사용성, 매력성, 신뢰성, 접근성, 가치성
User Flow
사용자가 제품에 진입한 시점을 시작으로 취할 수 있는 모든 행동
다이어그램
1. 직사각형: 사용자가 보게될 화면( 회원가입페이지,로그인페이지 …)
2. 다이아몬드 : 사용자가 취하게 될 행동(로그인, 버튼클릭,업로드 …)
3. 화살표 : 직사각형(화면)과 다이아몬드(행동)을 연결시켜주는 화살표
-장점
사용자흐름 상 어색하거나 매끄럽지 않은 부분을 발견하여 수정가능하다.
있으면 좋은 기능을 발견하여 추가하거나 없어도 상관없는 기능을 발견하고 삭제가능
UI / UX 사용성평가
제이콥닐슨의 10가지 사용성 평가 기준 ( 사용성 : 사용하기 쉬운가?)
-사용성과 효율성을 크게 높인다.
1 시스템 상태의 가시성
합리적인 시간 내에 적절한 피드백을 통해 사용자에게 진행상황에 대한 정보를 항상 제공해야한다. || 피드백이 존재하나, 피드백이 즉시 제공되나, 피드백이 명확한가
2 시스템과 현실 세계의 일치
내부 전문용어가 아닌 사용자에게 친숙한 단어, 구문 및 개념을 사용해야한다.
3 사용자 제어 및 자유
현재 진행 중인 작업에서 벗어날 수 있는 방법, 혹은 실수로 수행한 작업을 취소할 수 있는 방법, 탈출구를 명확하게 제공해야한다.
4 일관성 및 표준
외부 일관성: 사용자에게 익숙한 UI제공(일관적인 사용자 경험을 제공하기위해 업계관습을 따름)
내부일관성: 한 제품 내에서 같은 인터페이스를 유지(사용자가 혼란스럽지않도록 제품의 인터페이스나 정보제공에 일관성이 있어야한다)
5 오류방지
오류가 발생하기 쉬운 상황을 제거하여 사용자의 실수를 방지
(삭제 버튼을 눌렀을 때 정말로 삭제할것인지 이용자의 의사를 확인하기 위해 물어본다)
6 기억보다는 직관
사용자가 기억해야하는 정보를 줄인다. (최근 검색 했던 단어목록을 확인할 수 있다)
7 사용의 유연성과 효율성
초보자와 전문가 모두에게 개별 맞춤 기능을 제공
프로그램의 단축키를 직접 설정하여 사용할 수 있다)
8 미학적이고 미니멀한 디자인
인터페이스에는 관련이 없거나 불필요한 정보가 포함되지 않도록 한다.콘텐츠와 기능의 우선순위를 정하고 우선순위가 높은 것을 잘 제공한다
(사용 빈도가 적은 메뉴를 다 보여줄 필요는 없다. 필요할 때에만 볼 수 있게 숨겨놓는 것도 좋은 방법)
9 오류의 인식,진단,복구를 지원
사용자가 이해할 수 있는 언어를 사용하여 문제가 무엇인지 정확하게 표시하고 해결방법을 제안
(영문 성을 입력해야하는 폼에서 한글이 아닌 영어를 입력해야함을 알려줘야한다)
10 도움말 및 설명 문서
추가 설명이 필요없는 것이 가장 좋지만 상황에 따라 이해하는 데 도움이 되는 문서를 제공해야한다. (간단한 안내를 통해 검색에 도움을 준다)
Figma
UI디자인 & 프로토타이핑툴
와이어프레임, 프로토타입 제작
브레인스토밍 , 아이디에이션, 다이어그램제작, 디자인 시스템구축 등
실시간협업기능 , 다양한 환경지원, 자동저장 및 버전관리, 다양한 무료폰트지원, 오토레이아웃기능( 요소들 사이에 간격과 정렬에 규칙을 부여할 수 있고 요소들의 크기가 변해도 부여한 규칙에 맞게 간격과 정렬을 유지한다), 프로토타이핑
