CASE STUDY
성북도큐멘타
성북구 문화예술 아카이브 웹사이트
Overview
프로젝트 개요
성북구의 문화예술 자원을 리서치·기록·아카이빙하는 성북도큐멘타 7·8회 공식 아카이브 사이트.
Background
흩어진 채 휘발되던 성북의 기록물
성북도큐멘타는 성북문화재단·문화도시성북이 2014년부터 이어온 지역 리서치·아카이빙 사업으로, 시각예술을 기반으로 성북 지역의 다양한 이슈를 리서치하고 아카이브합니다. 최근 10여 년간 성북에서는 도록·자료집·보고서·영상 등 많은 기록물이 생산되었지만, 이들이 체계적으로 아카이브되지 못한 채 흩어지고 휘발된다는 문제의식에서 이 프로젝트가 출발했습니다.
매 회차 다루는 주제와 접근 방식이 달라 웹사이트 역시 회차별로 완전히 다른 설계를 요구했습니다. O2O Mate는 발간물을 데이터베이스로 정리한 7회(성북 기록물)와, 지역 재개발과 기억을 예술적 인터랙션으로 풀어낸 8회(길음동·미아리 일대) 두 사이트를 각각의 기획 의도에 맞춰 구축했습니다.
Approach
두 회차, 두 개의 편집디자인
회차 성격에 맞춘 서로 다른 설계
7회 — DB형 아카이브
방대한 발간물 목록을 사람이 매번 수정하는 정적 페이지로 두면 유지관리가 불가능하므로, 아카이브 데이터를 DB로 관리하고 상세 모달을 데이터로 조립하는 구조를 택했습니다. 발행처·판형·쪽수·보유현황·키워드를 정형 데이터로 다룹니다.
8회 — 웹 아트 인터랙션
콘텐츠 관리 부담보다 웹 아트 인터랙션의 자유도가 핵심이라, 프런트엔드 중심으로 표현을 극대화했습니다. 도트 구분자, 무작위 문장 생성기 같은 클라이언트 인터랙션으로 아카이브를 감각적 경험으로 확장했습니다.
Chapter 01
7회 — 성북 기록물 DB 아카이브
7회는 다크 그레이 배경에 형광 그린을 세로 바(bar) 형태로 반복 배치한 대담한 편집디자인이 특징입니다. 좌측 고정 사이드 내비게이션(지역을 기억하는 방법 / 성북 발간물 들여다보기 / 성북 기록자들)으로 방대한 아카이브를 분류하고, '성북 발간물 들여다보기'는 시각예술·문학·공연예술·역사지리·공동체 등 분야별 하위 메뉴로 세분화했습니다. 발간물은 표지 이미지 그리드로 진열되며, 항목을 클릭하면 그린 톤의 상세 모달이 열립니다.
모달 안에는 소개글·표지·발행사항(발행처·발간 연도)·형태사항(판형·쪽수)·발간물 보유현황·연계 자료가 정리되고, 하단에는 참여 작가와 전시명이 키워드 태그 형태로 붙어 검색·연결이 가능한 DB형 아카이브 구조를 이룹니다.
다크 그레이 배경에 형광 그린 세로 바를 반복 배치한 7회 인트로 — 좌측 고정 사이드 내비게이션으로 아카이브를 분류합니다 (sbd.sbculture.or.kr/sbd7)
시각예술 관련 기록물을 표지 이미지 그리드로 진열 — 항목별 소개글과 함께 발간물을 한눈에 훑어봅니다
그린 톤 상세 모달 — 발행사항·형태사항·보유현황·연계 자료를 정리하고, 하단에 참여 작가와 전시명을 키워드 태그로 연결
Chapter 02
8회 — 길음·미아리, 기억의 인터랙션
8회는 베이지 톤의 차분한 지면으로 전환됩니다. 재개발을 앞둔 길음역 일대(미아리텍사스촌 등)의 '기억'을 다루는 주제에 맞춰, 표지 격의 인트로에는 점선 원(도트) 구분자로 참여 작가(김다은·김수화·신민준·오세린)를 리듬감 있게 나열합니다. 재개발이 지역의 기억을 균질성으로 대체하기 전에, 그 '기억함'을 예술을 통해 질문하려는 기획 의도를 지면 전체에 담았습니다.
백미는 <미아리 무작위 문장 생성기>라는 웹 베이스 아트 인터랙션으로, "언젠가 비가 많이 온 해에, 미싱사는 둔탁한 응접실을 천천히 고여있다"처럼 지역의 단어를 무작위로 조합해 문장을 생성하고, 하단에 골목 풍경 사진 스트립을 함께 배치해 아카이브를 감각적 경험으로 확장했습니다.
베이지 톤으로 전환한 8회 인트로 — 2년 만에 진행한 회차로, 여러 분야 예술가가 참여작가로 함께했습니다 (sbd.sbculture.or.kr/sbd8)
길음동·하월곡동의 도시 빈민 정착지 역사와 재개발을 다룬 '성북도큐멘타8의 배경' 소개 지면
점선 원(도트) 구분자로 참여 작가(김다은·김수화·신민준·오세린)를 리듬감 있게 나열한 목차
<미아리 무작위 문장 생성기>(웹 베이스 아트, 2022) — 지역의 단어를 무작위로 조합해 문장을 만들고 골목 풍경 사진 스트립을 함께 배치
Design System
관찰된 컬러 팔레트
7회의 다크 그레이와 형광 그린 대비, 8회의 베이지 지면이 두 회차의 서로 다른 편집디자인을 각각 규정합니다. 아래 스와치는 실제 구축된 화면에서 관찰한 대표 색상입니다.
브랜드 컬러 (화면 관찰 기준)
Result
흩어지던 기록을 검색 가능한 아카이브로
O2O Mate는 두 회차의 기획 의도를 각기 다른 디자인·데이터 구조로 번역해 웹사이트로 구현하는 전 과정을 담당했습니다. 편집디자인 해석, 아카이브 데이터 모델링, 상세 모달·태그 시스템, 무작위 문장 생성기 같은 인터랙션 개발까지 회차 성격에 맞춰 설계를 달리 했습니다. 두 사이트 모두 성북문화재단 도메인(sbculture.or.kr) 하위에 안정적으로 운영됩니다.
이 프로젝트는 흩어지던 지역 기록물을 검색 가능한 디지털 아카이브로 남기고, 공공 문화 사업의 성과를 시민에게 지속적으로 공개하는 플랫폼을 마련했습니다. 서로 다른 두 회차를 연달아 구축하며 성북문화재단과의 지속적 협업 관계를 이어가고 있다는 점 또한 O2O Mate가 공공 문화 아카이빙 영역에서 쌓아온 신뢰를 보여줍니다.