[9월 TIL #5] 사용자를 생각하지 않게 하는 Result-Oriented UI

규영 님께서 형광펜 컬러에 hover만 해도 실제로 어떤 색으로 하이라이트될지 미리 보여주는 작업을 하셨다. 작업을 보여주시면서 옆에 ‘Microsoft의 Result-Oriented UI’라는 메모를 남겨두셨는데, 처음 보는 개념이라 찾아봤다.

---

Result-Oriented UI란?
Microsoft의 Result-Oriented UI(결과 지향적 UI)는 사용자가 원하는 결과를 만들기 위해 어떤 명령을 사용해야 하는지(How) 찾아가게 하기보다, 어떤 결과가 만들어질지(What) 더 직접적으로 보고 선택할 수 있도록 하는 UI 접근 방식이다.

이런 방향성이 대표적으로 드러난 제품이 Office 2007이다. 이전의 Office에서는 사용자가 메뉴와 툴바를 돌아다니며 원하는 기능을 직접 찾아야 했다. 그런데 기능이 계속 많아지면서 메뉴 구조 역시 점점 복잡해졌고, 내가 원하는 결과를 만들기 위해 어떤 명령을 사용해야 하는지를 알아내는 것 자체가 하나의 일이 되었다.

Office 2007에서는 이를 해결하기 위해 기존 메뉴 구조를 크게 바꾸고, 사용자가 하려는 작업과 결과를 더 직접적으로 보여주는 인터페이스를 도입했다.

대표적인 사례가 Ribbon, Gallery, Live Preview다.

1. 리본 인터페이스 (Ribbon UI)
기존의 드롭다운 메뉴 방식을 탈피하고, 사용자의 맥락(Context)에 맞는 탭과 큰 아이콘을 제공하는 상단 바이다.

Home, Insert, Layout처럼 사용자가 하려는 작업을 기준으로 기능을 묶고, 각 탭 안에 관련 명령들을 한 번에 보여준다. 또 표나 이미지처럼 특정 객체를 선택하면 그 객체와 관련된 기능이 추가로 나타나는 Contextual Tab도 제공한다.

기존 방식에서는 사용자가 여러 메뉴를 돌아다니며 기능의 위치를 기억해야 했다면, Ribbon은 현재 작업에서 사용할 가능성이 높은 기능을 화면 위에 드러내는 방식이라고 볼 수 있다.


2. 갤러리 (Galleries)
Gallery에서는 Result-Oriented UI의 특징이 조금 더 명확하게 드러난다.

예를 들어 문서의 스타일을 바꿀 때 단순히 Style 1, Style 2 같은 명령 이름만 보여주는 것이 아니라, 실제로 적용되었을 때의 모습을 작은 샘플로 만들어 나열한다.

사용자는 각 기능의 이름이나 설정값을 이해한 뒤 결과를 상상할 필요가 없다. 그냥 여러 결과를 눈으로 비교한 다음 원하는 것을 고르면 된다.

즉,

명령을 이해하고 → 결과를 상상하고 → 적용하는 것

에서

결과를 보고 → 선택하는 것

으로 바뀐다.

3. 실시간 미리보기 (Live Preview)
Live Preview는 Gallery나 스타일 등의 옵션에 마우스를 올리기만 해도 실제 문서에 적용될 결과를 즉시 보여주는 기능이다.

예를 들어 글자 스타일을 바꾼다고 하면 기존에는

옵션 선택 → 적용 → 결과 확인 → 마음에 들지 않으면 취소

하는 과정을 반복해야 했다.

Live Preview에서는

옵션에 hover → 실제 결과 확인 → 마음에 들면 선택

으로 바뀐다.

즉, ‘선택 → 결과 확인’이 아니라 ‘결과 확인 → 선택’이 되는 것이다. 규영 님께서 작업하신 형광펜 컬러 hover preview도 같은 구조였다.

컬러 칩의 색만 보고 실제 텍스트에서 어떻게 보일지 사용자가 머릿속으로 예상하게 하지 않고, hover하는 순간 실제 하이라이트 결과를 보여준다.

작은 interaction이지만 사용자가 결과를 상상해야 하는 부담과, 적용했다가 다시 되돌리는 시행착오를 UI가 대신 줄여주는 것이다.

Result-Oriented UI가 흥미로웠던 이유
처음에는 Result-Oriented UI가 꽤 거창한 UI 철학일 것이라고 생각했는데, 찾아보고 나니 작은 interaction에서도 발견할 수 있는 개념이었다.

반대 개념으로 언급되는 Command-Oriented UI에서는 사용자가 “어떤 기능을 눌러야 내가 원하는 결과가 나오지?”를 생각해야한다.

반면 Result-Oriented UI에서는 “내가 원하는 결과가 이거구나. 그럼 이걸 선택하면 되겠다.”에 가까워진다.

결국 두 방식의 차이는 사용자가 결과를 얼마나 직접적으로 보고 판단할 수 있느냐에 있는 것 같다. 특히 Live Preview는 아주 작은 기능이지만 사용자가 결과를 상상해야 하는 비용을 UI가 대신 가져간다는 점에서 인상적이었다. ‘사용자를 생각하게 하지 말라!‘는 것이 이 작은 인터랙션에도 녹아드는구나. 재밌다!

그리고 지금은 Generative UI로
흥미로운 점은 이 사고방식이 최근 AI 인터페이스에서도 다시 확장되고 있다는 것이다.

과거 Result-Oriented UI가 미리 준비된 여러 결과 중 하나를 선택할 수 있게 했다면, Generative UI에서는 사용자가 원하는 목적을 말하면 AI가 그 목적에 맞는 결과물과 인터페이스 자체를 동적으로 만들어내는 방향으로 발전하고 있다.

Microsoft Research에서도 Generative UI가 기존의 고정된 인터페이스를 넘어 사용자의 맥락과 목적에 따라 UI를 생성하는 방식에 대해 연구하고 있다.

결국 오래전 Office의 Gallery나 Live Preview부터 최근의 Generative UI까지 이어지는 공통점은 비슷해 보인다. 사용자에게 기능을 이해시키는 것보다, 원하는 결과에 더 빠르게 도달하게 만드는 것이다. 굿!