[React] UI/UX

sywoo0109·2023년 8월 3일

목록 보기

7/7

1. UI/UX

UI나 UX라는 단어 자체는 개발자나 IT 업계 종사자가 아니더라도 알 수 있을 정도로 친숙한 단어이다. 이번 포스팅에서는 UI/UX의 개념을 설명하고 UI/UX를 설계하기 위해 어떤 디자인들이 활용되고 있는지를 알아보려고 한다.

우선 UI란 User Interface의 줄임말로 사용자가 상호 작용할 수 있는 시스템을 의미한다. 웹 페이지라고 친다면 화면 상의 그래픽 요소들이 이 UI에 해당할 것이고 PC라고 생각한다면 키보드나 마우도 UI라고 할 수 있는 것이다. 한편 UX는 User Experience의 줄임말로 사용자가 어떤 제품이나 서비스를 이용하면서 느끼고 생각하는 총체적인 경험을 의미한다. 최근에는 제품이나 서비스 그 자체에 대한 경험뿐만 아니라 홍보나 접근성, 사후처리 등 직간접적으로 관련된 모든 경험까지 그 의미가 확장되고 있다. 일단은 클라이언트를 개발하는 웹 프론트엔드 개발자로 한정해서 생각해보자면 주로 웹 사이트에 곳곳에 배치된 버튼들이나 상단에 여러 메뉴를 담고 있는 네비게이션 바 등이 UI에 해당할테고 웹 사이트에서 얼마나 쉽게 원하는 기능을 찾아서 사용할 수 있었는지 혹은 모바일과 PC 모두에서 불편함 없이 사용할 수 있었는지 등이 UX에 해당할 것이다.

따라서 UI는 보통 UX에 포함되는 개념으로 생각되는 경우가 많다. 여기서 착각하기 쉬운 것이 좋은 UX가 좋은 UI라는 의미도 아니고 반대로 좋은 UI가 좋은 UX를 항상 보장하는 것도 아니다. 예를 들어 컴포넌트들의 디자인은 정말 훌륭하고 레이아웃도 잘 짜여있어서 보기 좋지만 정작 필요한 기능을 찾기 어렵게 메뉴도 복잡하고 여러 단계를 거쳐야 접근할 수 있는 웹 사이트라면 UI는 좋아도 UX는 좋지 못할 것이다. 한편 디자인적인 요소는 많이 들어가 있지 않지만 직관적으로 기능들에 접근해서 바로 사용할 수 있는 웹 사이트라면 UI는 별로여도 UX는 좋을 수 있다는 것이다.

하지만 나쁜 UI는 보통 나쁜 UX로 이어지는 경우가 많다.

만약 이런 식으로 사용자의 전화번호를 입력받는 창을 구현한다면 키보드 입력 몇 번이면 가능한 것을 마우스 클릭과 이동 십 수번이 필요한 작업이 되어버린다. 따라서 나쁜 UI를 설계해서 나쁜 UX를 주는 것을 방지하기 위해서 일반적으로 많이 활용되는 UI 디자인 패턴들과 그것의 사용처가 있다.

2. UI 디자인 예시

1. 모달

모달이란 현재 이용하고 있는 화면 위에 오버레이 되는 창을 의미한다. 일반적으로 닫기 버튼이 존재하거나 혹은 모달 창 밖을 클릭해서 닫히도록 설계되어 있다. 모달은 팝업창과 달리 브라우저의 설정에 영향을 받지 않기 때문에 사용자에게 바로 꼭 보여줘야할 내용이 있다면 이런 식으로 모달 창으로 구현하는 편이다.

위의 코드는 간단한 모달창을 구현하는 예시이다. 모달 창을 따로 생성하기 보다는 display: none 속성을 이용해서 렌더링하지 않다가 특정 이벤트가 발생할 때 렌더링하도록 구현했다. 이를 위해서 모달 열기라는 버튼은 모달 상태를 true로 그래서 열린 모달 창 안에 모달 닫기 버튼에는 모달 상태를 false로 바꾸는 이벤트 핸들러가 연결되어 있다. 예시에서는 모달 창의 상태가 열림을 바뀌면 아예 기존 창 위의 그 크기만큼의 div인 ModalContainer를 생성하고 그 하위 엘리먼트를 상하, 좌우 정렬 시킴으로써 정 중앙에 배치하는 효과를 얻었다. 설명에서는 모달 창 바깥은 클릭해도 모달 창이 닫히게 설계한다고 했었는데 이는 useRef라는 리액트에서도 DOM을 선택하는 훅을 사용해야 하는데 아직 설명하지 않았음으로 이번 예시에서는 따로 구현하지 않았다.

2. 토글

토글이란 on/off와 같은 옵션을 선택할 때 사용하는 스위치 버튼을 의미한다. 일반적으로는 2개 정도의 옵션이 있을 때 사용하지만 여러 개가 있을 때도 사용할 수는 있다. 색상이나 스위치의 위치로 직관적으로 어떤 옵션이 선택되어 있는지 알 수 있게 만드는 것이 중요하며 옵션이 많아져서 구분이 힘들다면 토글보다는 탭으로 구현하는 편이 좋다.

위의 코드는 간단한 토글 스위치를 구현하는 예시이다. 옵션은 컴포넌트에서 상태로 관리하고 있으며 옵션에 따라 다른 모습으로 렌더링 하기 위해 속성으로 해당 데이터를 전달한다. 스타일드 컴포넌트에서는 그 속성에 따라 스위치의 배경 색상을 변경하고 버튼의 position 속성을 absolute로 설정한뒤 left 값을 바꿔서 버튼의 움직임을 구현했다.

3. 탭

탭이란 콘텐츠를 분리해서 보여줄 때 사용하기 좋은 디자인 패턴이다. 탭은 여러 버튼과 같은 컴포넌트에 내용을 출력하는 공간으로 나뉘어져 버튼을 클릭하면 알맞은 내용을 렌더링하도록 구현한다. 버튼들은 주로 가로로 한 줄로 배열된 형태가 많지만 세로로 하거나 혹은 여러 줄이어도 크게 상관 없다. 단 각 섹션의 이름은 너무 길지 않고 다른 섹션과 명확하게 구분되어야 하며 여기에 현재 어떤 섹션을 클릭한 결과인지도 표시해주면 좋다.

위의 코드는 간단한 탭 디자인 패턴을 구현하는 예시이다. 현재 클릭한 탭의 정보는 컴포넌트에서 상태로 관리하고 있으며 속성은 상태를 그대로 전달하는 것이 아니라 각 탭이 현재 클릭된 상태인지를 판별해서 boolean 타입의 값으로 전달하고 있다. 또한 탭의 내용도 && 연산자를 사용한 선택적 렌더링 기법을 통해서 현재 출력되야하는 내용만 출력되게 구현했다.

4. 태그

태그란 콘텐츠를 설명하는 키워드를 이용한 일종의 라벨을 의미한다. 사용자들이 직접 태그를 붙힐 수 있든 개발자가 종류를 정해놓든 추가 및 제거가 자유롭도록 구현하는 편이 좋다. 태그를 활용해서 콘텐츠 분류를 할 수도 있으며 사용자들이 태그를 사용해서 콘텐츠를 검색할 수 있도록 구현하는 것도 가능하다.

위의 코드는 간단한 태그 디자인 패턴을 구현하는 예시이다. 태그를 활용하는 기능까지는 구현하지 않고 태그 추가 및 삭제 기능만 구현했다. 태그들의 목록을 상태로 관리하고 있기 때문에 태그를 활용해야한다면 이 상태값을 활용할 수 있다. 우선 태그를 추가하는 버튼은 태그 창에 문자를 입력하고 엔터를 입력하는 것으로 설정했다. 따라서 이벤트 핸들러에서 엔터 키 입력을 감지할 경우 이벤트 객체의 타겟 값을 가져와서 불필요한 공백을 삭제한 뒤에 값이 빈 문자열이 아니라면 태그 목록에 추가하고 이벤트 객체의 타겟 값을 초기화 시킨다. 그 다음 태그를 삭제하는 이벤트 핸들러에서는 이벤트가 감지되면 해당 태그만 걸러내는 filter 함수의 값을 태그 목록의 값으로 수정하는 형태로 삭제를 구현했다.

5. 자동완성

자동완성이란 사용자가 내용을 입력하고 있는 중에 결과랑 일치할 가능성이 높은 항목을 미리 제안하는 것을 의미한다. 주로 검색 창이나 혹은 양식 입력 란에서 사용하기 좋으며 실시간으로 결과를 제공하고 사용자가 원하는 내용을 완성하는데 도움을 주기 때문에 사용자 편의성 면에서도 좋다.

위의 코드는 간단한 자동완성 기능을 구현하는 예시이다. 편의를 위해서 검색어 리스트는 미리 지정된 배열(["apple", "banana", "orange", "grape", "watermelon", "melon", "kiwi", "pear"])을 사용한다. 사용자가 입력한 검색어를 컴포넌트에서 상태로 관리하고 있으며 그 상태값을 조건으로 검색어 리스트 배열에 filter 메서드를 사용해서 값을 포함하고 있는 요소만 담긴 새로운 배열을 렌더링함으로써 자동 완성을 구현하고 있다. 또한 자동완성 결과를 렌더링 하는 요소에도 이벤트 핸들러를 추가해서 해당 컴포넌트가 마우스 클릭되는 경우 그것이 사용자가 원하는 값이라고 가정하고 input 창의 값도 그 값으로 갱신하고 있다.

6. 드롭다운

드롭다운은 선택할 수 있는 항목들을 숨겨놓았다가 버튼 클릭이나 마우스 오버 등의 상호작용을 하면 펼쳐지면서 항목을 선택할 수 있게 하는 컴포넌트를 의미한다. 보통 폼 요소라던가, 설정, 메뉴, 필터 등등의 다양한 상황에서 공간을 절약하면서도 직관적인 방식으로 옵션을 제공하고 싶을 때 쓰기 좋다.

위의 코드는 간단한 드롭다운 기능을 구현하는 예시이다. 자동완성과 비슷하지만 이번에는 드롭다운을 여는 버튼에 추가된 이벤트 핸들러를 통해 버튼이 마우스 클릭될 경우 가지고 있던 배열의 값을 렌더링하는 방식으로 구현되어 있다. 드롭다운의 값은 컴포넌트에서 상태로 관리하고 있으며 어떤 옵션을 선택하는 경우에는 그 값으로, 초기 값을 선택하는 경우는 다시 null로 초기화하게 구현했다.

7. 아코디언

아코디언은 마우스 클릭과 같은 상호작용을 통해 콘텐츠를 확장하거나 혹은 다시 접을 수도 있는 컴포넌트이다. 트리 구조의 콘텐츠를 렌더링하거나 메뉴바로 사용할 수도 있으며 드롭다운과 마찬가지로 화면을 깔끔하게 구성하면서 제한된 공간 안에 많은 정보를 최대한 효과적으로 표시하기 위해 사용된다.

위의 코드는 간단한 아코디언 패턴을 구현하는 예시이다. 각각의 제목과 내용은 정적인 데이터로 보관하고 있으며 각 아코디언 섹션의 확장 여부를 요소로 가지는 배열을 컴포넌트에서 상태로 관리한다. 각 아코디언의 제목에 해당하는 부분에 이벤트 핸들러를 연결했고 해당 컴포넌트의 인덱스값을 함께 넘겨준다. 이벤트 핸들러에서는 기존 상태값을 가져와서 map 메서드를 통해 상태값 배열의 인덱스와 넘겨받은 인덱스가 일치하는 경우, 즉 이벤트를 발생시킨 아코디언의 확장 상태만 반전시키고 나머지는 그대로 둔 새로운 배열로 상태값 배열을 업데이트함으로써 각 아코디언의 확장 상태를 반영해서 리렌더링하게 구현되어 있다.

8. 캐러셀

캐러셀은 원래는 회전목마 혹은 공항의 수하물 컨베이어 벨트를 의미하는 단어로 마치 그런 것들처럼 돌아가면서 콘텐츠를 표시해주는 컴포넌트를 의미한다. 자동으로 돌아가게 구현할 수도 있고 사용자가 직접 상호작용을 해야만 넘어가게 구현할 수도 있으며 만약 상호작용이 필요하다면 직관적으로 알 수 있게 다음 콘텐츠의 일부분을 일부로 보이게 구현하거나 아예 버튼 등을 구현할 수도 있다. 이런 컴포넌트는 주로 홈페이지의 헤더 부분에 제품이나 서비스 혹은 공지사항 배너 등을 보여주는데 활용하면 좋다.

위의 코드는 간단한 캐러셀 컴포넌트를 구현하는 예시이다. 예시에서는 사용자 상호작용 기능은 빼고 자동으로 콘텐츠가 계속 바뀌게 구현했다. 슬라이드들을 감싸고 있는 컨테이너를 만들고 넘치는 부분은 보이지 않게 설정한다. 실제 슬라이드들은 하나씩 구현되어 있는게 아니라 연속적으로 구현되어 있지만 앞의 저 설정 때문에 보이지 않는 것이다. 현재 보여야 할 콘텐츠의 인덱스 값을 상태로 관리하며 해당 값이 변할 때 콘텐츠들이 연속적으로 구현되어 있는 요소의 위치를 transform 속성의 translateX 옵션을 활용해서 바꿈으로써 마치 슬라이드가 넘어가는 듯한 효과를 구현했다.

9. 페이지네이션

페이지네이션이란 한 페이지에 띄워야 할 정보가 너무 많은 경우 마치 책에서 페이지를 넘기듯이 번호를 붙여 넘길 수 있는 페이지를 구현하는 방식이다. 주로 긴 목록이 있거나 게시판과 같은 콘텐츠에서 자주 사용되며 원하는 페이지로 바로 접근할 수 있다는 장점이 있다.

위의 코드는 간단한 페이지네이션을 구현하는 예시이다. 보통은 이런 데이터들을 서버에서 호출하는 경우가 많겠지만 예시에서는 Item 1 ~ Item 10까지를 요소로 가지고 있는 배열 더미 데이터를 활용한다. 크게 페이지네이션 기능을 구현하는 부분과 해당하는 데이터를 렌더링하고 큰 레이아웃을 잡아줄 컨테이너 부분으로 나눌 수 있다. 기능 구현 부분에서는 우선 현재 페이지와 전체 페이지 수, 그리고 페이지를 변경할 수 있는 함수를 속성으로 받는다. 버튼은 전체 페이지 수만큼 생성하고 만약 현재 페이지와 이벤트가 일어난 버튼이 다를 경우 해당 페이지로 현재 페이지를 바꾸는 이벤트 핸들러를 각 버튼에 연결한다. 바깥의 컴포넌트에서는 한 페이지 당 렌더링할 데이터의 개수, 전체 페이지, 현재 페이지, 페이지 변경 함수, 해당 페이지에서 렌더링할 데이터만 추려내는 함수 등을 구현해서 필요한 데이터를 페이지네이션 기능 구현 부분에 전달하고 데이터를 렌더링하는 기능을 하고 있다.

10. 무한 스크롤

무한 스크롤이란 모든 콘텐츠를 한번에 불러오는 것이 아니라 사용자가 스크롤을 내려서 끝에 도달하면 자동으로 추가 콘텐츠를 로드해서 계속해서 스크롤을 내릴 수 있도록 구현하는 방식을 의미한다. 이 역시 한번에 띄우기엔 정보가 너무 많을 때 유용하게 사용할 수 있으며 콘텐츠의 일부분만 로딩하기 때문에 초기 로딩 속도가 빠르긴 하지만 콘텐츠의 끝을 알 수가 없기도 하고 이미 지나친 콘텐츠를 다시 찾기도 어렵기 때문에 다른 검색 방법이나 페이지 맨 위로 돌아가기 등의 기능을 추가적으로 제공하는 편이 좋다.

위의 코드는 간단한 무한 스크롤을 구현하는 예시이다. 이 예시에서도 역시 편의를 위해 더미 데이터를 활용한다. 이번에는 스크롤에 이벤트 핸들러를 붙여서 스크롤이 맨 밑에 도달했다고 판단되면 그때 데이터를 불러온다. 모든 데이터를 한번에 로딩하고 조금씩 보여주도록 설계하는 것은 실제로 무한 스크롤은 아니기 때문에 실제 동작 환경과 비슷하게 구현하기 위해서 setTimout 함수를 활용해서 마치 비동기 요청을 하는 것처럼 보이게 만들었지만 실제로 해당 부분은 필요없으며 대신 서버와 통신하는 코드를 해당 부분에 작성할 수 있다. 예시에서는 1초 뒤에 더미 데이터로 10개의 요소를 가진 배열을 받아서 기존 더미 데이터 배열에 붙이는 방법으로 구현되어 있다. 더미 데이터 배열을 상태로 관리하고 있기 때문에 상태값의 변동으로 리렌더링되면서 콘텐츠가 밑에 추가된다.

11. 네비게이션 바

네비게이션 바란 보통 페이지의 여러 기능들과 연결된 메뉴를 보여줄 수 있는 바로 보통 최상위 메뉴인 GNB(Global Navigation Bar)와 거기에 종속된 서브 메뉴들을 볼 수 있는 LNB(Local Navigation Bar)로 구분할 수 있다. 보통 탭 형식으로 상단에 위치한 것들이 GNB이며 사용자가 그것과 상호작용을 할 때 드롭다운과 같은 방식으로 펼쳐지는 부분이 LNB라고 할 수 있다. 중요한 점은 GNB를 사용하려 한다면 어느 페이지에 있든 항상 동일한 위치에 구현해야 사용자가 편하게 사용할 수 있다.

위의 코드는 간단한 네비게이션 바를 구현하는 예시이다. LNB의 확장 여부를 상태로 관리하며 GNB의 각 메뉴에 이벤트 핸들러를 연결해서 클릭할 시의 해당 메뉴의 id를 받아와서 현재 상태 값과 같다면 이미 보고 있는 메뉴를 클릭한 것으로 간주하고 LNB를 닫으며 다를 경우 다른 메뉴를 누를 것을 보고 해당 메뉴의 LNB가 렌더링 될 수 있도록 구현했다.

위에서 예시로 보여준 UI 디자인 패턴 외에도 다양한 디자인 패턴이 있기 때문에 여러 사이트들을 보면서 편리하게 사용했던 UI를 보면서 어떤 구조로 디자인 되었고 왜 사용하기 좋았는지 고민해본다면 많은 공부가 될 것 같다.

3. UI 레이아웃

자주 사용되는 UI 디자인 패턴에 대해서 알아보았으니 다음으로는 그 UI들을 어디에 배치하는지, 즉 레이아웃에 관한 이야기를 하려고 한다. 여기부터는 코드로 직접 구현한다기 보다는 웹 디자인 영역에서 이런 개념들이 있다 정도를 소개하는 부분이다. 웹 디자인 분야에서 웹 페이지의 전체적인 영역을 설정할 때 주고 컬럼 그리드 시스템이라는 것을 활용한다. 컬럼이란 스타일링 속성 값으로도 활용되는 단어 column으로 열을 의미하고 그리드(grid)는 격자라는 의미로 페이지 자체를 여러 컬럼으로 나눠서 그 안에 콘텐츠를 배치한다는 개념이다.

위의 사진은 칼럼 그리드 시스템을 간단하게 시각화한 자료이다. 크게 3가지 구성 요소로 나눌 수 있는데 화면 양쪽의 여백을 의미하는 Margin, 콘텐츠를 위치시킬 세로로 나뉜 영역들인 Column, Column들 사이의 여백인 Gutter로 이루어져 있다. 이 중에서 Column의 경우 주로 PC용 페이지와 같은 경우는 사진처럼 12개의 칼럼을 설정하고 그 안에 콘텐츠 넣는다.

일반적으로 화면의 너비가 위의 그림과 같을 때 지금 페이지를 보고 있는 기기가 이것이라고 상정하는데 이를 보통 break point라고 한다. 기기의 종류에 따라 다른 화면을 구성하고 싶다면 이 너비값을 기준으로 CSS의 미디어 쿼리 기능을 사용해서 조건에 따라 다른 스타일링을 구현하기도 하며 아예 PC용 페이지도 휴대폰 사이즈에 맞게 양 옆에 여백을 많이 둠으로써 모든 기기에서 똑같이 사용할 수 있게 구현하기도 한다. 그래도 일단은 데스크탑보다 작은 타블렛의 경우 8개, 휴대폰의 경우는 4개의 Column으로 시스템을 구현한다.

4. UX 디자인

지금까지 UI에 대한 전반적인 사항을 살펴보았다. 그렇다면 UX를 디자인하는 것은 어떤 것일까?

1. 좋은 UX의 기준

우선 좋은 UX가 무엇인지에 대한 정의가 필요할 것 같다. 피터 모빌(Peter Morville)은 좋은 UX를 위해 고려해야하는 7가지 사항을 제시했는데 이 개념들을 구조화한 것이 마치 벌집을 닮았다고 해서 벌집 모형이라고도 불리는 The User Experience Honeycomb 모델이다.

7가지 요소에 대해서 간단히 설명하자면 다음과 같다.

1. 유용성이란 제품이나 서비스가 목적에 맞는 사용 가능한 기능을 제공하고 있는가의 여부이다. 예를 들어 계산기라면 계산만큼은 틀리지 않고 맞는 결과값을 도출해낼 수 있어야 한다는 것이다.

2. 사용성이란 제공하는 기능을 사용하기 쉬운가의 여부이다. 단순하면서도 직관적으로 제품이나 서비스를 이용할 수 있어야 사용성 기준을 충족한다고 볼 수 있다.

3. 매력성이란 사용자들에게 이 제품이나 서비스가 얼마나 매력적인가에 대한 기준이다. 디자인에서부터 제품 이미지나 브랜딩까지 포함하는 개념으로 제품 이용 경험이 사용자에게 긍정적인 감정을 줄 수 있고 계속 사용하도록 유도할 수 있어야 매력성이 있다고 평가할 수 있다.

4. 신뢰성이란 제품이나 서비스를 믿고 사용할 수 있는가의 여부이다. 서비스 이용에 보안 측면 결함이 있다던가 실제로 없는 기능을 과장해서 홍보하는 일 없이 믿고 사용할 수 있다는 이미지를 구축하는 일이 신뢰성의 핵심적인 요건이다.

5. 접근성이란 남녀노소, 장애 여부를 떠나서 누구나 쉽게 제품이나 서비스를 사용할 수 있는가의 여부이다. 예를 들어 저시력자를 위한 폰트 확대 기능이라던가 시각 장애인을 위한 음성 안내 기능 등을 구현하는 것이 접근성을 충족하기 위한 기능들이며 특히 접근성은 따로 WAI-ARIA와 같은 기술 규격 등이 있기 때문에 참고해서 접근성을 충족할 수 있다.

6. 검색 가능성이란 사용자가 원하는 기능 혹은 기능을 사용해서 원하는 정보등을 쉽게 얻을 수 있는가의 여부이다. 예를 들어 웹 포탈의 경우 다양한 기능들을 제공하고 있는데 특정 기능들은 네비게이션 바나 다른 컴포넌트들을 통해 안내되지도 않고 접근할 수도 없다면 검색 가능성이 떨어진다고 볼 수 있다.

7. 가치성이란 위의 6가지 요소들을 총합해서 사용자에게 가치를 제공할 수 있는가의 여부이다. 이 기준의 경우는 사용자마다 다를 수도 있는데 예를 들어 매우 다양한 기능을 손쉽게 사용할 수 있게 제공하는 서비스라고 해도 접근성을 고려하지 않아서 시각 장애인은 전혀 사용할 수 없을 경우 가치성이 없다고 판단할 수도 있기 때문이다. 그래서 위의 6가지 요소를 모두 고르게 충족할 수 있도록 하면서도 메인 타겟 유저층이 중요하게 생각하는 요소가 있다면 특히 그 요소에 더 많은 자원을 투자하는 것도 하나의 방법이 될 수 있다.

그러면 좋은 UX가 무엇인지 평가하는 기준에 대해서는 알았으니 더 보기 좋고 효율적인 UI, 그리고 그것을 기반으로 더 좋은 UX를 만들기 위해 숙지하면 좋을 가이드라인에 대해서 소개하려고 한다. 그것은 바로 제이콥 닐슨이 제시했던 10가지 사용성 평가 기준(Jakob’s Ten Usability Heuristics)이다.

시스템 상태의 가시성 (Visibility of system status)

합리적인 시간 내에 적절한 피드백을 통해 사용자에게 진행 상황에 대한 정보를 항상 제공

시스템과 현실 세계의 일치 (Match between system and the real world)

내부 전문용어가 아닌 사용자에게 친숙한 단어, 구문 및 개념을 사용

사용자 제어 및 자유 (User control and freedom)

현재 진행 중인 작업에서 벗어날 수 있는 방법, 혹은 실수로 수행한 작업을 취소할 수 있는 방법을 명확하게 제공

일관성 및 표준 (Consistency and standards)

외부 일관성 : 일관적인 사용자 경험을 제공하기 위해서 플랫폼 및 업계의 관습을 따름

내부 일관성 : 사용자가 혼란스럽지 않도록 제품의 인터페이스나 정보 제공의 일관성 유지

오류 방지 (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)

상황에 따라 이해하는 데 도움이 되는 문서를 제공

2. User Flow

좋은 UX를 기획하기 위해서 기획 및 개발 단계에서 먼저 사용자가 제품을 사용하면서 취할 수 있을 행동을 도식화해서 다이어그램으로 그리는 것은 사용자 흐름(User Flow)이라고 부른다.

위의 그림은 간단한 사용자 흐름 다이어그램의 예시이다. 사용자 흐름 다이어그램을 그리다보면 흐름상 어색하거나 매끄럽지 않은 부분을 발견해서 수정할 수 있으며 추가하면 좋을 기능이나 삭제해도 무방할 기능들을 발견하기 용이하다. 그리고 완성된 사용자 흐름 다이어그램은 기능 구현에 있어서 가이드라인으로 사용할 수도 있다.