이번에 배울 것

• UI가 무엇인지 배웁니다.
• UX와 UI의 관계를 배웁니다.
• 좋은 UI를 만들기 위해 필요한 것을 배웁니다.

UI 사용자 인터페이스

우리는 하루 종일 스마트폰을 사용합니다. 집중해서 처리해야하는 복잡한 작업은 컴퓨터를 이용하고 쉴 때는 리모콘으로 TV를 조작해 다양한 프로그램을 봅니다. 스마트폰, 컴퓨터, TV를 사용할 때는 우리는 ‘어떻게’ 쓸까요? 이 ‘사용자’가 ‘어떻게’ 도구를 쓰는지를 정의한 것이 바로 사용자 인터페이스입니다.

엄밀하게 UI(User Interface)는 사용자와 컴퓨터가 상호 작용할 수 있게 돕는 시스템으로 사용자가 시스템을 조작하면 결과를 확인할 수 있는 것을 뜻합니다. 주로 그래픽 Graphic 즉 시각 요소를 이용한 인터페이스를 사용합니다. 컴퓨터를 조작하는 데 필요한 기능들을 사용자가 마우스, 키보드 등을 이용하여 그림, 아이콘, 버튼, 메뉴 등의 시각적 요소들을 통해 직관적으로 조작할 수 있도록 해줍니다.

기술이 발달하면서 여러 도구를 사용자가 선택할 수 있게 되면서 사용자가 도구를 쓰는 법도 중요해졌습니다. 특히 오랜 시간 반복해서 사용하는 스마트폰과 같은 도구 안에서의 경험은 작은 UI의 1초도 안 되는 경험조차 사용자의 전체 경험에 영향을 끼치기 때문에 원칙에 기반해 인터페이스를 설계합니다.

UX 사용자 경험

UI와 UX의 차이가 무엇인가요? 라는 질문을 지겹게 보았을겁니다. UX 사용자 경험은 서비스나 제품의 전체 경험의 합을 뜻합니다. UX를 식당에 비유해보면 사용자가 자리에 앉는다. > 물을 마신다. > 식사를 한다. > 화장실을 다녀온다. 와 같이 식당에서 사용자의 행동 중심으로 경험을 분석하고 설계하는 것이라 볼 수 있습니다.

UI는 각 경험에서 사용자가 오감으로 인지하는 매개체를 설계하는 것을 뜻합니다. 빈 의자가 보이게 설계하면 사용자가 자리에 앉을 것이며 물컵을 배치하면 물을 먹을 것입니다. 화장실이 어디에 있는지 안내하는 표지판이 보이면 원할 때 화장실에 다녀올 수 있을 것입니다.

UI 종류

인간은 도구를 사용하면서 발전했고 자연스럽게 새로운 도구와 도구 사용법도 끊임 없이 변해왔습니다. 나뭇가지나 도끼 같이 쓰면서 쉽게 배울 수 있는 도구와 다르게 컴퓨터나 스마트폰은 물리적인 실체가 없는 도구로 더 복잡한 도구 사용법이 필요했습니다.

주로 GUI 그래픽 사용자 인터페이스가 유용하게 쓰이고 최근 VUI 음성 사용자 인터페이스가 등장했습니다. ChatGPT의 등장으로 다시 최초의 컴퓨터 사용할 때로 회귀해 TUI 텍스트기반 사용자 인터페이스가 쓰이기 시작했습니다. UI가 사람이 도구를 배울 필요가 없게 되는 방향으로 진화하면서 사용자가 자신의 신체를 원래 사용하는 방식으로 사용하는 NUI 자연스러운 사용자 인터페이스라는 용어가 등장하기도 했습니다.

• GUI: 스마트폰을 손가락으로 조작하는 것
• VUI: 아이폰의 Siri를 이용해 명령 내리는 것
• TUI: ChatGPT에 텍스트를 입력해 정보를 찾는 것
• NUI: ‘도서관 가줘’라고 말하면 자동차가 알아서 도서관을 가는 것

좋은 UI를 만들기 위해 필요한 것

예전에는 좋은 무언가를 만들기 위해서는 오랜 시간을 들여 스승에게 기술을 전수 받아야만 했습니다. 누구나 배우기 힘든 과정을 거쳐 한번 배운 기술로 평생 사용할 수 있었습니다.

하지만 시간이 흘러 기술의 발전 속도가 너무 빨라 개인이 기술을 배워 사용할 수 있는 기간이 점차 짧아지고 있습니다. 디자인에서도 그래픽 툴을 한 번 배워두면 거의 평생 사용할 수 있었지만 이제는 새로운 기법과 도구가 쏟아지고 있습니다.

더 좋은 UI를 만들기 위해서 우리는 어떻게 해야할까요? 빠르게 변하는 것 전부를 따라갈 수는 없습니다. 그 중에서 무엇을 골라 적용할 것인지가 우리의 숙제가 될 것입니다. 올바른 선택을 하기 위해서는 변하는 것과 변하지 않는 것을 구분하고 변하지 않는 것에 집중해 대체 불가능한 가치를 만들어야 할 것입니다.

본질을 알아내기 위해서는 먼저 현상부터 이해해야 합니다. 현재 가장 널리 쓰이는 UI는 모바일 스마트폰을 이용한 GUI 그래픽 유저 인터페이스입니다. 우리에게 익숙한 모바일 경험을 설계하는 것을 바탕으로 시간이 지나도 변하지 않을 UI의 본질에 대해서 알아보겠습니다.

첫번째는 모바일 GUI를 다루는데 가장 중요한 그래픽 디자인에 대해 배웁니다. 색, 문자, 아이콘, 글과 같이 우리가 눈으로 식별하는 여러 요소가 어떤 특징이 있는지 살펴봅니다.

두번째는 가상의 스크린에서 여러 시각 요소를 조합하거나 변형하는 컴포지션을 배웁니다. 재료가 되는 레이어, 시간의 변화에 따른 움직임, 배치하는 레이아웃에 대해 배웁니다.

세번째는 인터페이스의 가장 중요한 성질인 인터랙션에 대해 배우겠습니다. 인터랙션은 단순히 화려하게 움직이는 모션을 뜻하는 것이 아닙니다. 정보와 사용자 사이의 관계를 설계하는데 꼭 알아야 하는 정보 구조, 입력과 출력, 컴포넌트에 대해 배웁니다.