개요
핵심 요약
- 아트파이(주식회사 아트파이, 대표 전상진)는 2022년 설립된 기업·공공 행사 기획, 공연 섭외, 공간 대관 전문 업체다.
- 사이트는 붉은 커튼이 걷히는 ‘필름’ 오프닝으로 시작해 포스터·매거진·공간·피날레 순서로 장면이 전환되는 내러티브 구조다.
- 서울 마포구의 ARTPIE 스튜디오(24시간 A·B·C홀 연습실)와 관악구의 ARTPIE 라이브하우스(최대 50석)를 별도 LocalBusiness로 구조화 데이터에 등록했다.
- 한국어·영어·일본어·중국어 4개 언어 전환과 브라우저 자동번역을 끄라는 안내 문구를 함께 제공한다.
- iPhone·Android 홈 화면 추가 안내, BGM 플레이리스트, ‘파이에게 물어봐’ 채팅 버튼까지 갖춘 SPA다.
아트파이는 기업·관공서 행사 기획, 공연 섭외, 문화예술교육, 공간 대관을 함께 하는 회사다. 사이트에 접속하면 붉은 극장 커튼이 배경으로 깔리고 ‘평범한 하루의 바깥으로.’라는 문장과 함께 ARTPIE 로고가 나타난 뒤, ‘예술이 많아지면, 세상은 더 재밌어지니까.’라는 슬로건이 이어진다. 스크롤을 내리면 ‘발길이 멈추는 순간, 이야기가 시작돼.’, ‘무대는, 어디에나 있어.’ 같은 짧은 문장이 장면을 넘길 때마다 등장한다.
구조는 영화 필름을 넘기는 비유로 일관돼 있다. 모니터를 눌러 아티스트 이야기를 만나고, 포스터를 눌러 이벤트·섭외 정보를 보고, 포토북을 눌러 취향을 확인하고, 공간의 문을 눌러 스튜디오·라이브하우스로 들어가는 순서다. 이번 리뷰에서는 행사기획사가 흔히 나열식으로 보여주는 서비스 목록을 내러티브형 장면 전환으로 재구성한 방식과, 두 개의 실제 공간을 구조화 데이터로 명시한 설계를 살펴본다.
브랜드 & 메시지
브랜드 화법의 중심은 ‘예술의 파이가 커지면, 즐거운 세상도 커진다’는 은유다. 회사명 ARTPIE 자체가 이 문장에서 나온 것으로 읽히며, 슬로건과 장면 전환 카피가 전부 이 은유를 변주한다. ‘좋아하는 마음이 모이는 곳’, ‘이 즐거운 순간의 주인공은, 당신’ 같은 문장은 행사·공연을 소비하는 관객과 행사를 만드는 아티스트 양쪽 모두를 화자로 부른다.
시각 톤은 극장 커튼의 짙은 레드에서 시작해 장면마다 포스터, 매거진 화보, 공간 사진으로 바뀐다. 같은 톤을 유지하는 대신 장면마다 완전히 다른 이미지 분위기를 배치해 ‘다음 장면은 무엇일까’라는 호기심을 이어가는 구조다. 우측 하단 채팅 버튼의 이름을 ‘파이에게 물어봐’로 지어, 브랜드명을 캐릭터화한 고객 응대 창구로 쓰고 있다.
UX/UI 관점
강점은 다섯 가지다. 첫째, 오프닝의 붉은 커튼과 ARTPIE 타이포 등장 연출이다. 서비스 나열 대신 ‘극장에 입장한다’는 감각을 먼저 준 뒤 본문으로 들어간다. 둘째, 모니터·포스터·매거진·공간 문이라는 네 개의 은유적 클릭 지점을 순서대로 배치해, 방문자가 다음에 무엇을 눌러야 할지 항상 하나의 선택지로 안내한다.
셋째, ARTPIE 스튜디오와 라이브하우스를 각각 독립된 LocalBusiness로 구조화 데이터에 담아, 주소·운영시간·좌석 규모 같은 사실을 기계가 읽을 수 있는 형태로 명시했다. 행사기획사 사이트에서는 흔치 않은 수준이다. 넷째, 4개 언어 전환 버튼과 함께 ‘브라우저·구글 번역 확장 프로그램을 끄면 언어가 정확히 표시된다’는 안내를 붙여, 자동번역과 충돌할 수 있는 상황을 미리 알려준다. 다섯째, BGM 플레이어에 7곡 재생목록과 볼륨 슬라이더를 갖춰 사운드 경험까지 제어권을 방문자에게 넘겼다. 여섯째, iPhone·Android 각각에 맞춘 홈 화면 추가 안내를 브라우저별로 다르게 제공해 PWA 설치 장벽을 낮췄다.
IA·SEO 전략
구조화 데이터는 이번에 살펴본 사례 가운데 가장 촘촘한 축에 속한다. Organization에 설립일·연락처·서비스 카탈로그(OfferCatalog)·knowsAbout까지 담겨 있고, WebSite에는 4개 언어(inLanguage)가 명시돼 있다. 여기에 ARTPIE 스튜디오와 라이브하우스가 각각 DanceStudio, PerformingArtsTheater 타입의 LocalBusiness로 별도 등록돼 주소와 운영시간까지 기계가 읽을 수 있다. ‘홍대 댄스 연습실’, ‘관악구 공연장 대관’ 같은 지역+시설 검색에 대응할 수 있는 기반이다.
다만 사이트 자체는 React 기반 SPA로 구성돼 있어, 장면 전환 콘텐츠 상당수가 클라이언트 라우팅과 애니메이션에 의존한다. 초기 HTML에 JSON-LD와 히어로 카피는 포함돼 있지만, 스튜디오·라이브하우스 각 서브페이지의 상세 콘텐츠까지 크롤러가 동일한 깊이로 읽는지는 별도 확인이 필요하다. 행사·공연 후기나 아티스트 소개처럼 롱테일 검색을 받을 수 있는 콘텐츠를 정적 텍스트로도 노출하면 검색 유입 폭을 넓힐 수 있다.
성능·접근성
오프닝부터 다섯 개의 필름 클립과 다수의 배경 이미지를 preload로 지정해 초기 로딩 우선순위를 세밀하게 관리하고 있다. WebP 포맷을 기본으로 쓰는 점도 긍정적이다. 다만 영상 클립 5개를 동시에 preload as="image"로 걸어둔 포스터 이미지와 함께 로드하는 구조라, 저속 네트워크에서는 오프닝 커튼이 걷히기까지 대기 시간이 체감될 수 있다.
BGM 자동재생을 강제하지 않고 버튼으로 열게 한 점, 사운드 트리거에 aria-label을 붙인 점은 접근성 기본을 지켰다. 언어 전환·오디오 패널 등 인터랙션 요소가 많은 만큼, 키보드만으로 이 메뉴들을 순서대로 탐색할 수 있는지와 포커스 트랩이 걸리지 않는지는 별도 점검이 필요하다. 채팅 버튼과 오디오 패널이 화면 하단에 겹치는 구간이 있는지도 모바일 폭에서 확인해볼 만하다.
자주 묻는 질문
아트파이는 어떤 일을 하는 회사인가요?
기업·공공 행사 기획과 운영, 공연 기획과 아티스트 섭외, 문화예술교육, 음향·조명 대여, 댄스 연습실과 라이브하우스 대관을 함께 하는 문화예술 기획사입니다. 2022년 설립됐고 서울 마포구와 관악구에 각각 실제 공간을 운영합니다.
행사기획사 홈페이지에 공연장·연습실 대관 정보를 어떻게 보여줘야 문의로 이어지나요?
주소, 운영시간, 수용 인원처럼 대관 담당자가 실제로 확인하는 정보를 구조화된 형태로 명시하는 것이 효과적입니다. 아트파이처럼 공간별로 별도 페이지와 구조화 데이터를 두면 지역+시설 검색에서 발견될 확률이 높아집니다.
연습실·공연장 같은 공간 대관 사업에 LocalBusiness 구조화 데이터를 적용하면 어떤 효과가 있나요?
주소와 운영시간이 검색 결과와 지도에 정확히 반영될 가능성이 높아지고, AI 답변 엔진이 ‘○○동 연습실 대관’ 같은 질문에 해당 공간을 근거로 제시하기 쉬워집니다. 다만 정보가 실제와 일치하도록 꾸준히 갱신해야 효과가 유지됩니다.
문화예술 기획사나 공연 대관 홈페이지 제작은 비용과 기간이 어떻게 되나요?
공간 페이지 수, 예약·문의 시스템 연동 범위, 다국어 지원 여부에 따라 달라집니다. 정확한 범위는 상담을 통해 확인하는 것이 일반적입니다.
디지털 파트너 더블루캔버스
행사·공연 기획사는 서비스가 눈에 보이는 상품이 아니라 특정 시점의 경험이기 때문에, 홈페이지가 과거 레퍼런스와 실제 공간에 대한 신뢰를 동시에 보여줘야 한다. 대관 문의는 주소·규모·운영시간 같은 실무 정보에서 시작되는 경우가 많아, 브랜드 서사와 실용 정보를 한 사이트 안에서 함께 설계하는 일이 관건이 된다.
The Blue Canvas(더블루캔버스)는 공연·행사 기획사의 홈페이지를 만들 때 브랜드 스토리텔링과 공간별 구조화 데이터를 함께 다룬다. 어떤 공간을 독립 페이지로 열지, 어떤 정보를 LocalBusiness로 명시할지, 다국어를 어디까지 지원할지를 정하는 일이 이 작업의 초반 순서다.
마무리와 다음 스텝
아트파이의 사이트는 극장 커튼에서 시작하는 오프닝 연출부터 공간별 구조화 데이터까지, 서사와 실무 정보를 모두 챙긴 사례다. 4개 언어 전환과 PWA 설치 안내처럼 세부 배려도 눈에 띈다. 다만 SPA 구조 특성상 서브페이지 콘텐츠의 크롤링 깊이는 별도로 확인할 부분이다.
실행 제안은 셋이다. 첫째, 공연·행사 후기나 아티스트 소개처럼 롱테일 검색을 받을 수 있는 콘텐츠를 정적 텍스트로도 노출한다. 둘째, 언어·오디오 패널 등 인터랙션 요소의 키보드 탐색과 포커스 흐름을 점검한다. 셋째, 오프닝 필름 클립의 저속 네트워크 로딩 체감을 낮출 압축·지연 로드 옵션을 검토한다.
