UI/UX
UI(User Interface)
사람들이 컴퓨터와 상호 작용 하는 시스템을 의미한다.
GUI(Graphical User Interface)
사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업 환경
UX(User Experience)
사용자가 어떤 시스템, 제품, 서비스를 직·간 접적으로 이용하면서 느끼고 생각하는 총체적 경험
좋은 UX를 만드는 요소
- 유용성(Useful) : 사용 가능한가?
- 사용성(Usable) : 사용하기 쉬운가?
- 매력성(Desirable) : 매력적인가?
- 신뢰성(Credible) : 신뢰할 수 있는가?
- 접근성(Accessible) : 접근하기 쉬운가?
- 검색 가능성(Findable) : 찾기 쉬운가?
- 가치성(Valuable) : 가치를 제공하는가?
UI와 UX의 관계
UX는 UI를 포함한다. 또한 좋은 UX가 좋은 UI를 의미하거나, 좋은 UI가 항상 좋은 UX를 보장하지는 않는다.
UI 디자인 패턴
모달(Modal)
모달은 기존에 이용하던 화면 위에 오버레이 되는 창을 뜻한다.
닫기 버튼 혹은 모달 범위 밖을 클릭하면 모달이 닫히는게 일반적이며, 모달을 닫기 전에는 기존 화면과 상화작용할 수 없다.
토글(Toggle)
토글은 On/Off를 설정할 때 사용하는 스위치다.
색상, 스위치의 위치, 그림자 등의 시각적인 효과를 주어 사용자가 토글의 상태를 직관적으로 알 수 있게 만들어야한다.
탭(Tab)
탭은 콘텐츠를 분리해서 보여주고 싶을 때 사용하는 디자인 패턴이다.
태그(Tag)
태그는 콘텐츠르 설명하는 키워드를 사용해서 라벨을 붙이는 역할을 한다.
자동완성(Autocomplete)
자동완성은 말 그대로 사용자가 입력 중일 때 사용자가 입력하고자 하는 내용과 일치할 가능성이 높은 항목을 보여주는 것이다.
드롭다운(Dropdown)
드롭다운은 선택 항목을 숨겼다가 펼치면 선택할 수 있게 해주는 UI디자인 패턴이다.
아코디언(Accordian)
아코디언은 접었다 폈다 할 수 있는 컴포넌트로, 보통 같은 분류의 아코디언을 여러개 연속해서 패치한다.
캐러셀(Carousel)
캐러셀은 회전목마처럼 빙글빙글 돌아가면서 콘텐츠를 표시해 주는 UI 디자인 패턴이다.
자동으로 돌아가거나, 사용자가 옆으로 넘겨야 넘어갈 수 있다.
페이지네이션(Pagination)
페이지네이션은 한 페이지에 띄우기에 정보가 너무 많은 경우, 번호를 붙여 페이지를 구분해 주는 것이다.
무한 스크롤(Infinite Scroll)
무한 스크롤은 모든 콘텐츠를 불러올 때까지 무한으로 스크롤을 내릴 수 있는 것을 말한다.
GNB(Global Navigation Bar), LNB(Local Navigation Bar)
GNB는 어느 페이지에 들어가든 사용할 수 있는 최상위 메뉴,
LNB는 GNB에 종속되는 서브 메뉴 혹은 특정 페이지에서만 볼 수 있는 메뉴이다.
UserFlow
UserFLow는 사용자가 제품에 진입한 시점을 시작으로 취할 수 있는 모든 행동을 뜻하며, 다이어그램을 그려 정리한다.
UserFlow 작성법
- 직사각형 : 사용자가 보게 될 화면
- 다이아몬드 : 사용자가 취하게 될 행동
- 화살표 : 직사각형과 다이아몬드를 연결시켜 주는 화살표
UserFlow의 장점
- 사용자 흐름 상 어색하거나 매끄럽지 않은 부분을 발견하여 수정항 수 있다
- 있으면 좋은 기능을 발견하여 추가하거나 없어도 상관없는 기능을 발견하고 삭제할 수 있다
