ATC21.space는 왜 이렇게 복잡하지?
(1) ATC21.space의 위계와 배열
- 시작하며
내가 졸업한 서강대학교 아트앤테크놀로지 학과(이하 아텍)에서는 매년 재학생 및 졸업생들의 작품으로 이루어진 ATC (Art and Technology Conference)를 개최한다. 원래는 계속 전공관인 하비에르관에서 개최를 했으나 전 세계적 역병의 시대가 도래함에 따라 ATC의 베뉴는 디지털 세상으로 옮겨왔다. 2020 ATC도 웹 전시로 진행했고, 2021 ATC 역시 요즘 핫한 '메타버스'를 컨셉으로 웹 전시로 진행되었다. 2021 ATC는 전시뿐만 아닌, 10주년을 맞은 아텍의 역사를 톺아보기 위한 다양한 콘텐츠도 함께 준비되었다.
ATC는 졸업반만 참여하는 졸업전시의 형태가 아니라 학년과 나이 상관없이 모두가 참여하여 작품을 만들어내고 이를 하나의 전시로 꾸려내는 일이기에 엄청난 인력의 정성과 힘이 들어간다. 이런 사례는 다른 예술대학에서도 찾기 어렵다. 그리고 이 위대한 일을 한 학년당 꼴랑 서른 명밖에 없는 학과 내에서 전부 처리한다는 것이 이 학과 재학생들의 역량을 증명한다. 다만 이 구조의 한 가지 치명적인 단점은 일단 만들어내는 것이 목표이기 때문에 창작 자체에 대한 의심과 좌절, 그리고 비판의 시간이 극히 적다는 것이다. 나도 재학 중일 땐 늘 데드라인에 쫓겨 '이걸 왜 해야 하고 이것이 어떤 의미를 지니지? 이것은 어떤 의미에서 모방이고, 창작이며, 왜 없었으며, 왜 있어야 하고, 어떻게 확장할 수 있지?' 같은 수많은 질문을 곱씹을 여유를 부릴 수 없었다. 일단 작품을 그럴듯하게 만들어내고, 만들어낸 나 자신에게 적절한 칭찬을 곁들이며 과거라는 창고에 처박아놓고 다시 꺼내보지 않았기 때문이다.
내가 창작에 대한 의심과 좌절, 그리고 비판의 시간을 달게 받기 시작한 건 광고회사에서 아트로 근무할 때부터였다. 내 뒤에 서서 내가 그리는 선과 도형 그리고 써 내려가는 글자 하나하나의 이유를 묻던 모 CD님 덕분에 타당성을 부여한 아트와 디자인을 할 수 있었다. 또 대학원에 진학한 후 다양한 장애를 가진 대상자를 만나며 디자인의 본질은 프로덕트의 미감(aesthetics)이 아닌 대상자(target)에 대한 정확한 이해라는 걸 깨달았다. 이 역시도 아주 짧은 시간 내에 수많은 완벽한 작업물들을 찍어내야 하는 업계에서는 익힐 수 없는 것이었다. 이런 경험들로 구성된 나는 디자인을 하는 사람으로서 눈이 즐거운 디자인보다 쉬운 디자인, 그리고 꼭 필요한 디자인에 대해 탐구한다. 물론 모든 디자이너들이 나와 같은 가치를 추구하지도 않고, 할 필요도 없다. 이렇게 혀가 길어진 이유는 예술과 공학을 융합하고자 하는 아텍이라는 학과에서 현재 웹/모바일 디자인에 대해 제대로 가르치는 코스와 인력이 없기 때문에 재학생들이 적절한 크리틱을 받을 수 없다는 사실을 누구보다 잘 알고, 나보다 훨씬 훌륭한 스킬셋을 가진 후배들이 다음 ATC 때는 조금이라도 효율적인 방식으로 웹앱을 구축하길 바라는 마음에서다. 나 역시 진리도 정답도 없는 디자인이라는 분야의 꼬꼬마일 뿐이지만 함께 이야기하는 과정을 통해 우리는 더 나은 프로덕트를 만들 수 있으리라 굳게 믿는다.
이 글은 ATC21.space의 디자인을 (1) 콘텐츠 위계 구조와 내비게이션 (2) Norman의 디자인 원칙으로 바라본 인터페이스와 사용자 경험으로 나눠서 기술하고자 한다.
- 타깃 분석: ATC21.space는 누굴 위한 웹페이지인가?
누가 ATC21.space에 접속할까? 꿈은 크게, 전 세계 사람들! 이면 참 좋겠지만 현실적으로 그렇지 않다. 역대 ATC를 보러 온 관객은 대략 1) 아텍에 진학하고자 하는 수험생 2) 1의 학부모 3) 아텍 및 ATC 이해관계자 4) 서강대학교 구성원으로 분류할 수 있다.
그렇다면 1~4 관객(타깃 사용자)을 위해 ATC 스탭과 참여작가, 그리고 학과가 보여주고자 하는 것은 무엇인가?
1) ATC가 지향하는 가치 (아텍 내에서는 시각적인 작품과 프로덕트만큼 지향하는 가치가 중요함)
2) 1을 직간접적으로 담은 기깔난 작품들
3) 큐레이션, 웹, 디스플레이, 홍보 역량
이 정도로 정리할 수 있다.
- 콘텐츠 구성: atc21.space에는 무엇이 들어있는가?
1. 하비에르관 공간을 360도 구축해놓은 VR 콘텐츠 (메타버스)*
2. 졸업생의 멘토링 및 강연, 외부 인사 강연 (이벤트)
3. 참여 작가들이 출품한 작품 (쇼케이스)*
4. 10주년 기념 콘텐츠 (10주년)*
5. 인사말 및 스탭 현황 (소개)
*아텍 10주년 ATC라 메타버스, 쇼케이스, 그리고 10주년 기념 이렇게 세 가지 콘텐츠가 '전시'의 큰 축을 이룬다. 메타버스, 쇼케이스, 10주년 세 요소를 잘 기억해두자.
- 콘텐츠 구조: atc21.space의 내용물이 어떤 그릇에 담겨있는가?
1. 홈 화면
홈 화면 구조
1. 인터랙션 콘텐츠 or 메타버스 버튼홈의 첫 화면은 웹페이지의 얼굴이다. atc21.space의 홈은 어떤 얼굴을 가지고 메시지를 전하는가?
보라색 공을 끌어당기는 인터랙션을 통해 사용자는 다음 블록으로 스크롤 다운하게 된다. 혹은 좌하단에 위치한 검은색 버튼을 누르면 'Now' 페이지로 이동하게 된다. 홈 화면의 얼굴이 되는 1번 페이지에서 두 가지의 독립적인 기능과 각각의 행동을 촉구하는 장치를 심어놓았다. 사용자는 atc21.space에 접속하자 마자 등장하는 두 행동의 명령 사이에서 헷갈린다. 그리고 '<metaverse'로 되어있는 fixed floating button은 2번 블록부터는 사라지며 버튼의 존재에 대해 더욱 혼란을 겪게 된다. 즉, 이 홈 화면은 사용자에게 행동의 선택지를 주어서는 안 되는 곳에서 선택지를 던지고 있다.
1번 인터랙션을 선택하고 이행하여 2번 블록으로 이동하면 한 장의 사진과 주제 소개 텍스트가 담겨있다. (클릭 가능 여부에 따른 인터랙션은 두 번째 글에서 다루겠다.) 다음 블록에는 이벤트, 컬렉션 쇼케이스 콘텐츠가 각각 좌우 스크롤 형태로 나열되어있고, 병렬적으로 전시되어 있다. 마지막 10주년 기념 이미지는 연회색 배경에 구분되어 자리하고 있다.
전시의 세 축인 메타버스, 쇼케이스, 10주년 중 메타버스는 어디에 위치하는가? 1번 인터랙션 화면의 곁다리 버튼으로만 존재한다. 2021 ATC의 컨셉을 '메타버스'로 정한 만큼 사용자는 이 웹 전시에 접속하는 순간 메타버스 콘텐츠를 보길 희망한다. 따라서 이 웹 전시의 얼굴은 메타버스가 되어야 한다. 메타버스, 쇼케이스, 10주년 콘텐츠가 전시된 방식이 콘텐츠의 지위와 위계를 드러내는 데에 실패했다.
헤더 우측 햄버거 메뉴 클릭 시 등장하는 메뉴헤더에 두 개의 햄버거 메뉴가 자리하고 있다. (관련 문제점은 두 번째 글에서 다룰 예정) 햄버거 메뉴를 클릭해서 등장하는 메뉴는 웹페이지를 7가지 항목으로 분류해놓았다. 테마, 쇼케이스, 컬렉션, 이벤트가 같은 위계에 놓여있다. 사용자는 각각의 항목이 무엇을 의미하고 무엇을 담고 있는지 호기심을 품게 된다. 사용자는 이 웹 전시관 속에서 어떻게 길을 찾아야 할까?
- 콘텐츠 내비게이션: 수직적 위계, 수평적 메뉴 구성
콘텐츠 내비게이션은 마치 백화점에서 쇼핑을 하는 것과 같다. 20대 후반 직장인 여성 A 씨가 출근용 슬랙스와 테니스화를 사기 위해 백화점에 입장했다. A 씨는 여성복 층에 가서 다양한 브랜드를 훑어보며 적절한 슬랙스를 구매한 후 스포츠 용품 층으로 올라가 비슷한 과정을 거쳐 테니스화를 구매할 것이다. 모든 백화점은 비슷한 구조로 이루어져 있어 다른 브랜드의 백화점을 가더라도 큰 혼란 없이 대분류(2/3층에 위치한 여성복)-중분류(브랜드S)-소분류(슬랙스)를 거치는 과정을 경험한다. 웹 콘텐츠 내비게이션도 마찬가지다. 다양한 웹/모바일 경험에 노출된 사용자는 과업을 달성하기 위해 이행하는 행동의 기대치와 패턴이 있다.
ATC 웹 전시에 접속한 사람들은 참여 작가들이 전시하는 작품들을 보고자 한다. 그렇다면 특정한 작품을 어떻게 찾을 수 있을까? 혹은 어떤 순서로 작품들을 전부 둘러볼 수 있을까? ATC의 콘텐츠 구조는 아래와 같이 이루어져 있다.
콘텐츠 위계 구조개인적으로 이 구조를 깨닫기까지 열 번이 넘는 반복적 내비게이션 과정을 거쳤다. 테마, 컬렉션, 쇼케이스, 그리고 각각의 작품이 어떻게 위치해있는지 파악하는 과정이 꽤 어려웠다.
1. 주제: 2021 ATC는 미래로의 도약이라는 대주제로 이루어져 있고 이 아래 3가지 세부 주제(테마)가 있다.
2. 테마: 각각의 테마 안에는 큐레이션 된 작품들이 모여있는 컬렉션과 이벤트들이 있다.
3. 컬렉션: 컬렉션 안에 작가들이 제출한 작품과 세부 분류가 되어있는 이벤트들이 있다.
그러니 주제 > 테마 > 컬렉션 > 작품 의 위계로 이루어져 있는 것이다. 그렇다면 메뉴 구성은 어떻게 되어있을까? 아래 그림과 같다.
수직적 콘텐츠 구조, 수평적 메뉴 배열콘텐츠가 수직적 위계로 이루어져 있는 것과 달리 모든 층위의 분류가 메뉴 속에서 같은 위계로 놓여 있다.
실제 분류는 주제 > 테마 > 컬렉션 > 작품이지만 메뉴 속에서는 주제 > 테마 = 컬렉션 = 작품 (쇼케이스)이다. 이렇게 콘텐츠의 수직적 위계를 반영하지 못한 채 수평적이게 메뉴를 배열함으로 인해 사용자는 헷갈릴 수밖에 없다. 테마, 컬렉션, 쇼케이스 전부 다 depth의 차이만 있을 뿐 결국 '작품'과 '이벤트'를 보여주는 메뉴이기 때문이다. 메뉴의 Depth 구성은 아래와 같다.
Depth별 콘텐츠수직 위계의 구조 속에 담긴 개별 작품을 수평 메뉴 속에 담으려니 하위 Depth의 수는 필요 이상으로 늘어나고 사용자는 각 하위 메뉴의 기능과 의미를 인지하기 어렵다. 그리고 이벤트 (졸업생 멘토링 + 외부 강연)가 직관적으로 테마와 컬렉션으로 연결되지 않아 전시 작품과 동일한 그릇에 담기는 것이 사용자에게 쉽게 받아들여지지 않는다.
- 그럼 메타버스는 어딨나요?
메타버스, 쇼케이스, 10주년 중 쇼케이스의 구조에 대해 알아보았다. 그러면 2021 ATC의 컨셉인 메타버스 콘텐츠는 어디서 볼 수 있을까? 메타버스는 헤더의 왼쪽 햄버거 메뉴(인 줄 알았는데 다른 페이지로 넘어가는) 아이콘을 누르면 새로운 'NOW'라는 제목의 페이지로 넘어가게 된다. 이곳에서 메타버스 콘텐츠에 입장할 수 있다.
좌, 우 햄버거 버튼이 존재하는 헤더메타버스 콘텐츠 위에는 현재 진행 중인 강연들이 나열되어 있다. 다시 말해 메타버스 콘텐츠를 위한 단일 페이지는 없는 것이다. NOW 페이지는 우측 햄버거 메뉴 클릭 후 NOW > 를 통해 접근할 수도 있다. 다시 말해 헤더의 좌, 우에 놓인 독립적인 햄버거 아이콘은 독립적인 기능을 수행하는 것이 아니다. 좌측 햄버거 메뉴가 우측 햄버거 메뉴의 기능 일부를 반복적으로 수행하는 것이다. 좌, 우의 햄버거 버튼은 시각적으로 같은 위계에 놓여있지만 좌측 햄버거는 우측 햄버거에 종속되어 있다. 이 역시 수직적 구조의 수평적 배열이라 이야기할 수 있다.
메타버스 콘텐츠가 들어있는 'NOW' 페이지이번 글에서는 홈 화면에서 드러나지 않는 웹 전시의 위계, 그리고 수직 구조 속 콘텐츠가 수평적으로 배열됨에 따라 사용자가 겪는 혼란에 대해 이야기했다. 2021 ATC에서는 1) 메타버스, 2) 쇼케이스, 3) 10주년, 4) 이벤트, 5) 소개 다섯 가지의 콘텐츠를 보여주기 위해 8가지의 선택지를 제공한다. 이런 수직 구조 속 위치한 콘텐츠를 수평적인 메뉴 배열을 통해 사용자에게 제시함으로 인해 사용자는 큰 혼란을 겪게 된다. 웹의 구조는 사용자가 받아들이는 콘텐츠의 구조를 그대로 따라가야 한다. 따라서 1) 메타버스 2) 테마 3) 이벤트(진행 중 포함) 4) 10주년 을 같은 층위에 배치하고 하위 메뉴를 구성해야 사용자가 전시의 흐름을 따라갈 수 있다.
다음 글에서는 Norman의 디자인 원칙에 의거한 인터페이스 디자인과 사용자 경험에 대해 이야기할 예정이다.
