이 글은 2021년 11월 3일 70여 명의 관객과 함께 온라인으로 진행한 ‘세마 코랄 워크숍/강연 #1: 세마 코랄과 새로운 질서’의 간추린 내용을 담고 있습니다. 세마 코랄에 디자이너 및 개발자로 참여한 민구홍 매뉴팩처링 운영자 민구홍은 세마 코랄을 구축한 과정을 되돌아보고, 미술과 지식의 영역과 경계에서 웹사이트를 기획, 제작, 운영하며 떠올릴 수 있는 문제를 진솔하게 짚어냈습니다.

[「세마 코랄과 새로운 질서」(2021) 강의자료 바로가기]

1. 들어가며

내 경우에 웹사이트를 만드는 과정은 글쓰기를 통해 콘텐츠에 ‘새로운 질서를 부여하는 과정’과 다르지 않다. 비단 웹사이트뿐일까?

현재 웹상에는 19억여 개의 웹사이트가 있다. 2021년 9월 무렵 여기에 느닷없이 세마 코랄이 추가됐다. 세마 코랄은 지식 생산자와 사용자가 웹을 기반으로 서로 교차하며 다양한 형태의 미술에 관한 지식을 탐구하고, 연결하고, 확장하는 공간을 구현하려는 목적으로 기획되었다.

2. 아름다운 이야기를 시작하기에 앞서…

● 인터넷(Internet): 전 세계의 수많은 컴퓨터가 케이블을 통해 물리적으로 연결된 네트워크.

● 웹(World Wide Web): 인터넷을 기반으로 수많은 웹페이지가 거미줄처럼 엮인 공간. 인터넷이 이룩한 여러 기술 가운데 가장 큰 부피를 차지한다.

● 웹사이트(Website): 동일한 도메인에 속한 웹 페이지(Web Page)의 묶음.

● 홈페이지(Homepage): ‘웹사이트’와 혼용하곤 하지만, 웹사이트의 첫 번째 페이지를 가리킨다.

● HTML(HyperText Markup Language): 콘텐츠에 의미와 맥락, 구조를 부여하는 마크업 언어. ‘기초, 기본’ 같은 말이 항상 HTML을 따라다닌다. 모든 웹 기술의 피라미드 가장 밑바닥에서 다른 기술을 떠받친다. HTML 덕에 웹 브라우저는 콘텐츠의 구조적인 맥락을 파악할 수 있다.

● CSS(Cascading Style Sheets): 콘텐츠에 스타일을 부여하는 스타일 시트 언어. 여기서 스타일의 범위는 마이크로 타이포그래피(글자), 매크로 타이포그래피(레이아웃), 애니메이션(움직임)을 아우른다.

● 자바스크립트(JavaScript): 웹 브라우저만으로 동작하는 유일한 프로그래밍 언어. 콘텐츠에 기능을 부여한다.

● CMS(Content Management System): 1차 사용자(관리자)가 콘텐츠를 관리하는 데 사용하는 소프트웨어. 한국에서는 워드프레스(Wordpress)가 대표적이다.

● 코딩(Coding): 인간이 아닌 컴퓨터와 의사소통하는 실용적이고 개념적인 글쓰기. 글쓰기의 결과물은 일반적인 글뿐 아니라 웹사이트, 게임, 나아가 전혀 생각지 못한 무엇이 될 수 있다.

● 웹 브라우저(Web Browser): 글쓰기의 결과물을 동작하게 하는 환경. 아무리 신기한 기술일지라도 웹 브라우저가 없으면 아무런 일도 일어나지 않는다는 점에서 웹은 허약한 매체고, 태생적으로 비극성을 내포한다.

3. 질문들

민구홍 매뉴팩처링에서 파악하기에 미술 및 디자인계에서 생산되고 소비되는 웹사이트는 크게 ‘미술을 소개하는’ 웹사이트와 ‘미술로서의’ 웹사이트로 나뉜다. 세마 코랄을 비롯해 미술관과 갤러리의 웹사이트는 전자에 해당한다. ‘홈페이지(Homepage)’라는 어휘에서 미루어 볼 수 있듯 웹사이트는 흔히 ‘집’으로 은유되곤 한다. 그렇다면 웹사이트라는 집을 지을 때 생길 수 있는 의문 또는 질문을 세마 코랄을 통해 점검해보자.

방은 얼마나 필요할까? 각 방에 특정한 역할이 있을까?

이 단계에서 메뉴와 각 메뉴의 구조와 기능 등이 결정된다. 세마 코랄은 연결, 지식, 생산자, 캐비닛, 검색 등 다섯 가지 방으로 나뉘고, 방마다 수행하는 기능이 다르다.

각 방에는 어떤 집기를 어떻게 놓을까? 그 중에서 가장 중요한 집기는? 까닭 없이 두고 싶은 집기는 없을까?

집기를 이루는 요소를 세분화할 수 있을까? 각 요소에서 공통점과 차이점을 분석해 분류하고, 분류법을 규칙화할 수 있을까?

제목, 태그, 실재하는 콘텐츠로 세분화해 위계를 나누는 작업을 거친다. 세마 코랄에서는 웹사이트 제목 바로 아래에 ‘연결’의 태그를 두고, 연결을 통해 링크될 실재 콘텐츠인 ‘지식’을 그 아래에 배치해 관계를 상상하게 했다.

집에 찾아올 손님은 누구일까? 그들은 무엇을 원할까?

설정한 타깃에 따라 예컨대 텍스트의 길이, 어조, 이미지의 수위 등이 결정된다.

손님을 어떻게 즐겁게 해 줄까? 일부러 불쾌하게 할 필요는 없을까?

세마 코랄에는 연구자들에게 웹진이 아닌 ‘자료’로 활용되기 위해 메모장 기능을 추가했다.

집주인에게 필요한 것은 없을까? 집주인이 집기를 제어해야 할까? 얼마나 손쉽게?

세마 코랄의 집주인, 즉 1차 사용자는 서울시립미술관이다. 따라서 생산자는 집주인이 콘텐츠를 쉽게 추가하고, 편집하고, 삭제할 수 있는 과정 또한 고민해야 한다. 이 단계부터는 웹사이트 뒤에 자리한 콘텐츠 관리 차원의 이야기가 펼쳐진다.

언제까지 집을 완성해야 할까?

집 주소는 무엇이 적당할까?

URL, 타이틀을 결정한다.

집에 권위가 필요할까?

소비자의 측면에서 보면 로고(logo)의 유무는 사용자가 콘텐츠를 받아들이는 태도에 영향을 주게 된다. ISSN을 발급받은 세마 코랄은 온라인 출판물로 등록함으로써 권위를 배가한 셈이다. 그렇다면 “책과 웹사이트의 위계는?”

집을 주위에 어떻게 알려야 할까?

마케팅 측면에서 소셜 미디어를 활용하거나 외부 배너 같은 실물의 도구를 활용할 수도 있다.

보수할 점은 없을까?

웹사이트는 제작하고 배포한 뒤에도 지속해서 ‘사용’할 수 있어야 하고, 무리 없이 작동되어야 한다. 바로 이 점에서 웹사이트는 인쇄물과 큰 차이를 보이는데, 바로 언제든 수정 가능한 매체라는 점에서 그렇다.

4. 그 외 고려해 봄 직한 문제들

● 웹 접근성(Web Accessibility): 저시력자와 시각장애인들은 웹사이트를 어떻게 열람할까? 그들이 사용하는 스크린 리더는 이미지에 지정된 대체 텍스트(alt text)를 통해 웹사이트 이미지를 읽어준다. 모두가 동등하게 볼 수 있는 방법을 모색해 보자. 세마 코랄 역시 웹 접근성을 위해 이미지에 대체 텍스트 작업을 보완해 가고 있으며, 글자의 명도 대비를 맞춰 가독성을 개선할 수 있도록 디자인되었다.

● 하이퍼링크(Hyperlink): 각주에 링크된 URL을 통해 독자는 각주와 본문 사이를 쉽게 오갈 수 있으며, 이로써 각주 역시 가까운 ‘정보’가 된다. 이처럼 온라인 출판물로서 웹사이트에 접근하면, 우리는 단순히 책을 디지털화하는 차원을 넘어 콘텐츠를 소비자에게 더 효율적으로 도달시킬 방법에 대해 고민해 보는 등 조금 더 생산적인 이야기를 할 수 있다.

● 웹사이트는 콘텐츠 생산자의 취향에 따라 책의 지면을 대신할 뿐 아니라 무엇이든 될 수 있다! 웹은 태생적으로 언제든 수정할 수 있고, 어디서든 접근할 수 있기 때문이다.

● 그러나 무엇보다 가장 중요한 것은 생산자와 소비자가 지속적으로 관심을 두는 것이다. 웹사이트는 도메인이나 서버 운영 기간이 만료됐을 때가 아닌, 생산자와 소비자가 관심을 끊는 순간 죽어가기 시작한다. 이 명제는 앞으로도 세마 코랄 팀과 개발자, 그리고 방문자가 함께 생각해보아야 할 것이다.

5. 대화

김진주(학예연구사, 세마 코랄 기획/편집): 오프라인 출판의 경우 ISBN을 발급받는 것은 등록된 번호를 통해 유통된다는 의미가 큰데, 온라인 출판물에서 ISSN이 어떤 의미를 가진다고 보실지 궁금하다.

민구홍(강연자): 그간 만들었던 웹사이트 가운데 ISSN을 발급받은 웹사이트는 세마 코랄이 처음이라 신선했고, 오프라인 출판물이 지닌 일종의 권위를 웹사이트도 가질 수 있겠다는 생각도 들었다. 앞으로 세마 코랄과 비슷한 경험을 제공하는 웹사이트를 만들 때 제안해 볼 수 있겠다.

김진주: 기획 회의에서 포스트잇이나 하이라이트 표시 등 여러 기능을 제안했다. PDF 파일이나 전자책을 볼 수 있는 애플리케이션에 탑재된 기능을 웹에서 구현해달라고 요청하니 당황스러웠을 것 같다.

민구홍: 세마 코랄 팀이 제안한 기능들을 실제로 웹에서 구현하는 데는 한계가 존재한다. (근본적인 한계이거나 민구홍 매뉴팩처링의 한계일 수도 있겠다.) 저는 역으로 웹의 연결성에 집중한 위키피디아(Wikipedia)의 방식을 제안하기도 했다. 메모장은 웹진의 역할을 하는 기존의 웹사이트에서 보기 어려운 세마 코랄이 제공하는 독특한 기능이다. 사용자들에게 실제로 유용할지 궁금하다. 처음 세마 코랄 기획팀에서 말씀하셨던 것은 메모장 기능 그 자체라기보다는 사용자가 콘텐츠에 참여할 방법에 대한 모색의 차원에서였다. 그 질문을 조금 더 구체화하고 재규정하는 과정에서 떠오른 키워드는 ‘참여’였다. 그래서 회의에서 제시된 기능을 자료로 삼고, 미술계 안팎에서 비슷한 보기를 찾았다. 그 과정에서 웹 브라우저에 기본적으로 내장된 로컬 스토리지(LocalStorage) 기능을 사용해보면 좋겠다는 생각이 들었다. 기술적으로는 어처구니없을 만큼 단순하지만, 메모장이라는 결과에 도달하는 과정이 짧지는 않았다.

김진주: 현재 세마 코랄에는 대체 텍스트 기능이 있긴 하지만, 기능이 마련되었다고 바로 사용할 수 있는 문제가 아닌 것 같다.

민구홍: 책 외에 또 하나의 매체가 생긴 셈이기 때문에, 콘텐츠를 생산자 입장에서는 고려해야 할 일이 늘어난 것일 수도 있다. 현재 세마 코랄에 콘텐츠 측면에서 추가로 필요한 부분은 대체 텍스트다. 장애인 분들은 탭(Tab) 키를 사용해 정보 간 이동을 한다. 탭 키에 해당하는 항목이 선택되면, 그것을 스크린 리더(Screen Reader)가 읽어주는 것이다. 또 웹 사용성의 측면에서 웹사이트에는 컬러 콘트라스트(Color contrast)가 중요하다. 콘트라스트가 흐리면 저시력자들이 배경과 글자를 구분하는 데 어려움을 겪는다. 그 레벨이 수치적으로 나뉘어 있는데, 세마 코랄에서는 그 수치를 최대한 지키려 했다.

김진주: 언급하신 세마 코랄 팀의 기획 의도는 세마 코랄의 ‘연결’ 코너에서 “장애비장애”, “웹접근성”과 같은 연결어를 통해 풀어내었고, 또 ‘지식’ 코너에 게시된 정혜윤 작가의 웹 미술작업 「모두를 위한 웹 ‘web for all’」을 통해서도 확인하실 수 있다.

김진주: 질문이 들어왔다. “웹사이트를 디자인할 때 어떤 관점으로 접근하시나요? 또 개발 초기 단계에서 머릿속에 있는 것을 표현하기가 까다로운데, 선생님만의 접근 방식이 있으시면 공유해주세요.”

민구홍: 큰 얼개로 말해 이게 다룰 만한 콘텐츠인지 먼저 판단한다. 집으로 은유하면 뼈대부터 생각해 보고, 방과 집기의 차원에서 콘텐츠를 바라보게 된다. 그 과정에서 표현의 관점으로 미뤄두거나, 일종의 텍스트 측면에서 편집해 보기도 한다. 중요성을 기준으로 질서를 부여하다 보면 자연스럽게 얼개가 갖춰진다. 저 같은 경우 모든 작업이 두루뭉술하게 하나로 뭉쳐 있어서 딱 잘라 말씀드리기는 어렵다. 글을 쓰면서 구조와 맥락, 여기에 적절한 스타일과 기능까지 함께 고려하는 것이다. 따라서 디자인에 관해서만 여쭤보신다면 답하기 어렵다. 답하더라도 나도 모르게 거짓말을 하게 될 것 같다.

김진주: 한쪽에서는 언어를 구현하고, 또 다른 한쪽에서는 구현될 장면을 생각해야 한다는 점에서, 또 구조를 생각하는 과정 중에서 내용이 바뀌게 되는 등 이중적인 것이 동시에 이루어지는 언어의 글쓰기가 이루어지는 셈인데, 코딩이라는 언어가 그 과정을 보여주기에 적합한 언어라 보시는지 궁금하다. 코딩한 서브라임 텍스트(Sublime Text) 화면을 보여주는 것, 또는 코드가 노출된 깃허브(GitHub) 화면을 보여주는 방식 외에 다른 방법은 없을까?

민구홍: 그 과정을 퍼포먼스로 치환한다면, 특정 과제를 제시한 뒤 어떻게 구현해 나가는지를 관람하는 방식도 가능하지 않을까? 사실 작업하는 동안 내 안에 지나치게 함몰되기도 하고, 소비자로서 다른 작업을 감상할 때 ‘이 작업 어떻게 할까’ 하고 궁금한 측면도 있다. 그런 방법론들이 공유되어 있지는 않고 있다. 거기에는 일종의 영업비밀도 있을 테고, 코드를 공개하는 것이 크리티컬 한 영역도 분명히 있다. 어떠한 태도로서 그런 것들을 공유해보는 자리가 있으면 좋겠다는 생각이 들기도 한다.

이소임(SeMA 코디네이터): 세마 코랄 팀 내에서 저는 일종의 ‘정보 매개자’로서, 관리자 모드를 통해 정보를 업데이트하는 역할을 수행해왔다. 주로 세마 코랄의 뒷편에서 이뤄진 업무 과정을 통해 저는 이전까지 사용자로서 경험한 자동화된 웹 환경을 재고하게 되었다. 그러니까 정보와 소비자 간의 거리가 매우 가까워졌고, 빨라졌고, 사용하기 편리해졌다고 느꼈던 구조들이 알고 보면 자동화 기술에 의해 구동된 것이 아니라, 사람이 ‘데이터 노동자’로서, 노동에 가까운 과정을 수행함으로써 구현된 결과였다. 선생님 역시 개발 업무가 노동으로 느껴질 때도 많으셨을 텐데, 개발자로서 이런 부분들에 대해 어떻게 생각하시는지 궁금하다.

민구홍: 말씀하신 것처럼 아직 자동화할 수 없는 지점이 여전히 존재한다. 대체 텍스트 역시 인공지능이 자동으로 입력해줄 수 있는 단계인지 알아볼 필요가 있을 것 같은데, 어쨌든 컴퓨터 언어가 대신할 수 없는 부분은 여전히 인간의 영역으로 남는 것 같다. 그게 콘텐츠의 측면이다. 콘텐츠만 집어넣으면 AI가 타이포그래피, 그래픽 디자인 등의 규칙들을 데이터베이스 화해서 러닝머신으로 학습한 다음, 사용자가 선택한 옵션에 따라 조판해주는 단계까지 와있다는 얘기를 들었다. 이게 얼마나 실용성이 있을지 모르겠지만. 콘텐츠 측면에서는 단순히 재미있고 신기한 효과라고 생각하는 것 이전에, 그것을 관리하는 사람이 손쉽고 굉장히 세밀한 것까지 제어할 수 있도록 하는 것이 저의 또 다른 재미이기도 하다. 사실 겉으로 잘 드러나지 않고, 아는 사람만 아는 영역이긴 하지만. 앞으로 세마 코랄을 보완하는 과정에서 그 부분 또한 염두에 두고 있다.

김진주: 오늘 강연은 이쯤에서 마무리하려 한다. 세마 코랄이 태어날 수 있도록 백지 단계부터 모양새를 갖춰주시고, 튼튼하게 유지될 수 있도록 신경 써 주셔서 감사하다. 오늘 이 시간을 통해 지식을 공유해주신 점 또한 감사드린다.

민구홍: 웹사이트를 만들다 보면 자연스럽게 친구에게 줄 선물을 마련하는 듯한 느낌이 들 때가 있다. 세마 코랄 작업 또한 다르지 않았다. 의미 있는 자리에 초대해주셔서 감사드린다.

— 기록 및 편집 이소임