[사용자 친화 웹] UI / UX

UI

User Interface, 사용자 인터페이스

사람들이 컴퓨터와 상호 작용하는 시스템을 의미한다

화면상의 그래픽 요소 외에도, 키보드, 마우스 등의 물리적 요소도 컴퓨터와 상호작용 하기 위한 시스템이기 때문에 UI 라고 볼수 있다.

GUI (Graphical User Interface, 그래픽 사용자 인터페이스)

현대 사회에서 스마트폰과 컴퓨터 뿐만 아니라 스마트워치, 키오스크, 대중교통 터치스크린 안내판 등 화면과의 상호 작용을 통해 사용하는 기기들이 많아졌고, 이 때문에 GUI의 중요성은 더욱 커져 가고 있다. 프론트엔드 개발자로서의 UI는 대부분 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업 환경을 말한다. 

 

 

UX 

User Experience, 사용자 경험

사전적 의미는 사용자가 어떤 시스템, 제품, 서비스를 직간접적으로 이용하면서 느끼고 생각하는 총체적 경험이다. 제품과 서비스 자체에 대한 경험은 물론 홍보와 접근성, 사후 차리 등 관련된 모든 경험을 포함한다. 

이처럼 제품과 관련된 모든 요소가 UX에 영향을 주는데, 프론트엔드 개발자에게 가장 중요한 요소는 UI라고 할 수 있다. 

 

 

UI와 UX의 관계

UX는 UI를 포함한다. 또한 좋은 UX가 좋은 UI를 의미하거나, 좋은 UI가 항상 좋은 UX를 보장하지는 않는다. 

하지만 나쁜 UI는 보통 나쁜 UX를 유발한다.

Bad ui => Bad ux..

 

UI 디자인 패턴

자주 사용되는 UI 컴포넌트 라고 할 수 있다. 자주 쓰이는 UI 디자인 패턴을 익혀두면 디자인 하기 보다 쉬워지고 협엽 효율도 높아진다.

 

1) 모달 (Modal)

 

기존 화면 위에 오버레이 되는 창. 닫기 버튼, 혹은 모달 범위 밖을 클릭하면 닫히는게 일반적이며 모달을 닫기 전에는 기존 화면과 상호작용 할 수 없다. 

팝업창과는 구분되는 개념. 팝업은 브라우저에 의해 강제로 막힐 수 있지만, 모달은 브라우저 설정에 영향을 받지 않는다. 따라서 꼭 보여주고 싶은 내용이 있는 경우 모달을 사용하면 좋다. 

 

2) 토글 (Toggle)

On/Off를 설정할 때 사용하는 스위치 버튼. 색상, 스위치의 위치, 그림자 등에 시각적 효과를 줘 사용자가 토글의 상태를 직관적으로 알 수 있게 만들어야 한다. 

 

 

3) 탭 (Tab)

콘텐츠를 분리해서 보여주고 싶을때 사용한다. 

각 섹션의 이름이 너무 길지 않고, 섹션의 구분이 명확해야 하며, 현재 어떤 섹션을 보고 있는지 표시해줘야 한다.

 

 

4) 드롭다운 (Dropdown)

선택할 수 있는 항목들을 숨겨놓았다가, 펼쳐지면서 선택할 수 있게 해준다. 

화살표 버튼을 누르거나 마우스를 올려놓아도 펼쳐지게 만들 수 있다. 중요한 것은 사용자가 자신이 선택한 항목을 정확히 알 수 있게 만드는 것.

 

 

5) 아코디언 (Accordion)

접었다 펼다 할 수 있는 컴포넌트. 주로 같은 분류의 아코디언을 연속해 배치한다. 

트리 구조의 콘텐르르 렌더링 할 때 사용하거나 메뉴바로 사용할 수도 있지만 단순히 콘텐츠를 담아놓기 위한 용도로도 사용할 수 있다. 

기본적으로 화면을 깔끔하게 구성하기 위해 사용한다.

 

 

6) 캐러셀 (Carousel)

 

컨베이어 벨트나 회전목마처럼 빙글빙글 돌아가면서 콘텐츠를 표시해주는 패턴. 자동으로 돌아가거나, 사용자가 옆으로 넘겨야만 넘어가거나, 둘 중 하나만 선택하도록 만들 수 있다. 

사용자가 넘겨야만 넘어가도록 만드는 경우, 콘텐츠가 넘어갈 수 있음을 직관적으로 알 수 있어야 한다. 때문에 다음 컨텐츠 일부를 옆에 배치해 보여주거나 콘텐츠를 넘길 수 있는 버튼을 배치하기도 한다.

 

 

7) 페이지네이션(Pagination)

한 페이지에 띄우기에 정보가 너무 많은 경우 번호를 붙여 페이지를 구분해 주는 것.

사용자가 원하는 페이지에 바로 접근할 수 있는 장점이 있지만, 페이지를 넘기기 위해서는 잠시 멈춰야 하기 때문에 매끄러운 UX와는 거리가 멀 수도 있다.

 

 

8) 무한스크롤 (Infinite Scroll, Continuous Scroll)

페이지네이션과 마찬가지로 한 번에 띄우기엔 정보가 너무 많을때 사용하는 패턴이다. 

잠시 멈출 필요가 없기 때문에 보다 매끄러운 ux를 제공하지만, 콘텐츠 끝을 알 수 없고 한번 지나친 콘텐츠를 다시 찾기 힘들다는 단점도 있다.

보통 페이지의 맨 아래에 도달하면 추가 콘텐츠를 로드해온다. 처음부터 모든 콘텐츠를 로드해오는 것은 진정한 의미의 무한 스크롤이라고 할 수 없으므로 주의해야 한다.