글: Patryk Adaś
2000년대 초반 이후 데스크톱 환경에서는 탭(tab) 기반 브라우징이라는 메타포가 웹 탐색 방식을 지배해 왔습니다. Servo의 나이틀리 빌드를 위한 HTML 기반 브라우저 UI를 만드는 Mozilla Research의 프로젝트인 Browser.html을 통해 우리는 기존의 탭 방식 브라우저를 트레일(trail) 기반 모델로 발전시키는 실험을 진행하고 있습니다.
트레일의 목표는 단순히 웹 콘텐츠를 비춰주는 창을 넘어, 사용자의 활동 전체를 하나의 서사(narrative)로 구성하는 것입니다. 인지 부하를 늘리는 대신 인지 과정 자체를 보조하고 강화하는 도구라는 이상에 한 걸음 더 다가가는 것이 우리의 희망입니다.
어떤 시나리오를 염두에 두고 있는지 보여드리기 위해, 우리의 친구 '날라(Nala)'를 소개하겠습니다.
완벽한 피자집 찾기
날라는 피자 가게를 알아보고 있습니다. 기존의 탭 기반 브라우저에서 그녀는 검색(1)으로 시작해 검색 결과 페이지(2)에 도착합니다.
그녀는 링크를 따라 Yelp의 레스토랑 목록(3)으로 이동하고, 눈에 띄는 피자 가게 하나를 살펴봅니다(4).
Yelp의 외부 링크는 별도의 탭에서 열리므로, 날라가 레스토랑 웹사이트 링크를 클릭하면 새로운 탭(5)이 열립니다.
새 탭에는 아무런 방문 기록도 없고, 처음 탭과의 연결고리도 없습니다. 날라가 어떻게 그 레스토랑 웹사이트에 도달했는지에 대한 모든 이력이 사라져 버립니다!
더 많은 후보를 살펴보면서 이 브라우저의 '기억 상실'은 반복됩니다. 첫 번째 탭으로 돌아가고(6), 다시 Yelp 검색 결과로 되돌아간 뒤(7), 또 다른 레스토랑을 찾습니다.
이번에 새 레스토랑을 선택하면(8), 현재 탭의 탐색 이력 역시 일부 유실됩니다:
다음 레스토랑 웹사이트로 향하는 외부 링크를 클릭하면 또다시 새 탭(9)이 열리고, 앞선 이력과의 연결은 다시 끊어집니다.
처음 검색 결과를 다시 확인하기 위해 날라는 첫 번째 탭의 이력을 몇 단계 거슬러 올라가, 그곳에서 직접 또 다른 피자 가게 페이지를 열어 봅니다(10).
흔히 벌어지는 이 검색 시나리오에서 무려 1/3 이상의 탐색 이력이 유실되었습니다!
물론 브라우저에는 방문 기록 화면이나 '최근 탭' 메뉴 같은 도구가 있지만, 어느 것도 날라가 실제로 걸어온 경로 그대로의 서사를 보여주지는 못합니다.
탭에서 트레일로
Browser.html로 우리는 날라의 이력 중 탭 브라우저가 보존하는 일부 단편만 보여주는 방식(버전 1)이 아니라, 전체 이력을 보여주는 UI 프로토타입(버전 2)을 만들고 있습니다:
하지만 이렇게 나타난 트리 구조는 순식간에 복잡해질 수 있습니다. 중요한 것은 각 탐색 분기가 어디서 갈라졌느냐가 아니라, 결과에 이르는 완전한 경로라고 생각합니다. 그래서 우리는 바로 그것을 사용자에게 보여줍니다(버전 3):
각 행은 탐색 트리의 뿌리에서 결과까지 이르는 하나의 트레일을 의미합니다. 트레일은 왼쪽에서 오른쪽으로 스스로 완결된 이야기를 전달한다는 장점이 있습니다. 반면 중복된 경로들은 시각적으로 거슬리는 노이즈가 될 수 있는데, 다행히 하나의 트레일에 집중하고 나머지를 접어 두면 이를 정리할 수 있습니다.
날라가 실제로 마주하게 될 화면은 다음과 같습니다.
탭과 트레일: 같으면서도 다르다
각 주제로 뻗어 나간 경로를 무시한다면, 트레일은 기존의 탭과 다를 바 없습니다. 이는 의도된 설계입니다. 우리의 목표는 기존 사용자 경험을 대체하는 것이 아니라 향상시키는 것이기 때문입니다. 사용자는 언제든 지금처럼 브라우저를 사용할 수 있습니다. 그러면서도 모든 탐색 트레일은 시작부터 끝까지 완전한 이야기를 담고 있는 하나의 탭입니다. 덕분에 사용자 경험을 한층 더 발전시킬 기회들이 열립니다. 현재 고려 중인 아이디어는 다음과 같습니다:
- URL뿐 아니라 트레일 전체를 공유하기
- 관련성이 사라진 트레일은 점차 흐리게 처리한 뒤 화면 밖으로 옮기기
- 방문 당시의 모습 그대로 트레일을 저장해 오프라인에서도 다시 열람할 수 있게 하기
- 트레일에 주석을 달 수 있게 하여, 주제를 조사하는 동안 사용자의 생각을 기록할 수 있게 하기
- 여럿이 함께 참여하는 협업형 주제 조사 지원
- 원할 경우 페이지를 새 트레일에서 열도록 허용
트레일로 가는 길
웹을 오간 사용자의 여정을 '트레일'로 시각화한다는 아이디어는 결코 새롭지 않습니다. 이미 70여 년 전, 하이퍼링크 데이터 개념을 널리 알린 기념비적인 에세이 「As We May Think」에서 버니바 부시(Vannevar Bush)는 '멤렉스(memex)'라는 기계를 묘사했습니다. 그는 이 기계가 개인 서재를 통해 데이터를 수집·공유하도록 돕고, 연구 과정 전체에 걸친 흔적(trail)을 남길 수 있게 해줄 것이라고 상상했습니다.
이후 제록스(Xerox)의 Trailmeme을 시작으로 여러 시도가 이어졌고, 2004년에는 MacWarriors의 Trailblazer가 이 개념을 계승했으며, 현재는 Trailblazer.io가 그 흐름을 잇고 있습니다. 익숙한 탭 방식의 관습과 트레일 아이디어를 연결함으로써 기존 작업 흐름 위에 자연스럽게 얹고, 이 개념을 폭넓은 사용자에게 매력적으로 다가가게 할 수 있기를 바랍니다. 그리고 Browser.html은 이러한 아이디어를 실험하기에 더없이 좋은 시험대입니다.
공간적 모델(Spatial Model)
필자는 다양한 사용자 인터랙션과 애니메이션을 활용한 공간적 모델을 연구하고 있습니다. 이를 통해 사용자가 지금 무슨 일이 일어나고 있는지, 그리고 어떻게 하면 가장 효율적으로 웹을 탐색할 수 있는지 더 잘 이해하도록 돕고자 합니다.
자세한 내용은 여기에서 확인하실 수 있습니다.
함께해 주세요!
현재 우리는 첫 번째 실동작 프로토타입을 만들고 있습니다. 이 프로젝트가 재미있어 보인다면 꼭 Browser.html 프로젝트를 방문해 주세요! GitHub에서 열려 있는 이슈 목록을 확인하거나, Slack 채널에서 함께 이야기를 나눌 수 있습니다.
무료로 코딩을 배워보세요. freeCodeCamp의 오픈소스 커리큘럼은 이미 4만 명 이상이 개발자로 취업하는 데 큰 도움이 되었습니다. 지금 시작해 보세요!