오배이안 🪙
UI (User Interface)
UI 란 사용자와 컴퓨터가 상호 작용하는 시스템을 의미 한다.
컴퓨터와 상호 작용하는 요소로는
- 보여지는 그래픽
- 키보드
- 마우스
- 스피커
등 물리적 요소 를 포함한 여러 요소들이 컴퓨터와 상호 작용하기 위한 시스템으로 UI 라고 볼 수 있다.
물리적인 요소로는 어떤게 있을까?
스마트폰이 없을 시적에 휴대폰의 자판? 버튼? 들이 물리적 UI 가 될 수 있겠고 계산기의 버튼 또한 동일하게 물리적인 UI 이다.
컴퓨터의 키보드, 마우스도 물리적인 UI 일 것이다. (추측)
UI 디자인 패턴
UI 디자인 패턴이란 자주 사용하는 UI 컴포넌트를 말한다.
종류로는
- 모달(Modal)
- 토글(Toggle)
스위치라 생각(on/off 버튼)
- 탭(tab)
- 태그 (tag)
- 자동완성(autocomplete)
- 드롭다운(dropdown)
선택할 수 있는 항목들을 숨겨놓았다가, 펼쳐지면서 선택할 수 있게 해주는 UI 디자인 패턴
- 아코디언(accordion)
접었다 폈다 할 수 있는 컴포넌트
- 캐러셀(carousel)
- 페이지네이션(pagination)
- 무한 스크롤 (infinite scroll)
-GNB & LNB
이외에도 다양한 UI 디자인 패턴이 있다.
궁금하면 확인해보시라 다양한 UI 디자인 패턴
UI 레이아웃
UI 구조를 설계할때는 명확하고 질서있게 설계하기 위해
그리드 중 컬럼 그리드 시스템(Cloumn Grid System) 을 사용한다.
그리드란 수직 수평으로 분할된 격자무늬를 말한다.
컬럼 그리드 시스템은 총 세가지 요소로 구성된다.
-
Margin
마진은 알다시피 걍 마진이다. 화면의 양쪽 여백을 뜻한다.
-
Column
콘텐츠가 위치하게될 세로로 나누어진 영역임.
보통 pc 는 12 개의 column으로 구성되고 태블릿은 8개 모바일은4개로 갯수가 정해져 있다. (물론 자기 맘대로 바꿔도 상관 없음) -
Gutter
나누어진 column 사이의 공간을 말한다. 콘텐츠 간의 구분하는데에 도움을 준다.
UX (User Experience)
UX 란 사용자의 경험을 말한다.
제품을 직접,간접적으로 이용하면서 느낀 총체적 경험을 UX 라고 한다.피터 모빌의 벌집 모형
좋은 UX를 만들 때 고려해야하는 7가지 사항들
-
유용성
제품 목적에 맞는 사용 가능한 기능 제공하고 있는지
-
사용성
쉽게 사용할 수 있는지
-
신뢰성
-
검색가능성
-
접근성
누구든지 제품에 접근할 수 있는지
-
매력성
-
가치성
나머지 사항들을 종합해서 고객에게 가치를 제공하고 있는지
User flow
사용자 흐름 ( User flow) 는 사용자가 제품을 사용하기 시작한 시점부터 취할 수 있는 모든 행동을 뜻하고 보통은 아래의 이미지 처럼 다이어그램을 그려 정리함.
위 의 그림처럼 사용자가 제품을 사용한 시점부터 어떤 행동을 할 수 있는지 모든 시나리오를 짜보는 것을 사용자 흐름이라고 한다.
User flow 다이어그램을 그리면 좋은 점
- 사용자 흐름 상 어색하거나 매끄럽지 않은 부분을 발견해 수정할 수 있음
- 없어도 상관없는 기능을 발견하거나 아이디어로 신규 기능을 새롭게 추가할 수 있음
다이어그램을 설계하기 쉽게 도와주는 사이트 miro , figjam
UI 와 UX 와의 관계
기본적으로 UX 가 UI 를 포함하고 있다 .
UX 가 좋다고 해서 UI 가 무조건 좋은 것은 아니며 ,
반대로 UI 가 좋다고 해서 UX 가 좋은 것도 아니다.
하지만 나쁜 UI 는 보통 나쁜 UX를 유발한다.
UI 디자인측면, 상호작용 측면
UX 실제 기능, 경험 측면
UI 와 UX 이 둘은 상호 보완적인 관계이다.
UX가 좋지 않은 곳을 찾아냄으로써 UI 개선점을 찾아낼 수 있고, UI를 개선함으로써 UX가 좋아지기도 한다.
사진 출처 : 코드스테이츠
