문화 & 공연 예술

Acte 2 Théâtre

한 공연장에서 다섯 가지 활동: 정보 구조가 프로젝트의 전부였습니다.

연도
2026
제작 기간
4주
기술 스택
Next.js · React · Tailwind · Vercel
  • 정보 구조 설계
  • 디자인
  • 개발
  • 티켓 예매
  • SEO

Kayzen Web이 Vercel 주소에 공개한 데모 버전입니다. 정식 도메인은 고객 소유입니다.

https://acte2theatre.vercel.app/
Acte 2 Théâtre 웹사이트 메인 페이지 — 문화 & 공연 예술, Kayzen Web 제작
관객층, 다섯 개의 동선
5
Lighthouse 성능
91/100
Lighthouse SEO
100/100
출발점

해결해야 했던 과제.

배경

Acte 2 Théâtre는 리옹 9구 베즈(Vaise)에 있는 동네 극장입니다. 어린이 공연, 성인 연극, 학교 단체 공연, 워크숍을 운영하며 외부 대관도 합니다.

제약

다섯 가지 활동, 다섯 부류의 관객: 가족, 성인 관객, 교사, 워크숍 수강생, 행사 주최자. 저마다 찾는 정보가 다르며, 시간순으로 구성된 사이트에서는 모두가 길을 잃습니다.

해법

캘린더가 아니라 관객별로 구성했습니다. 활동마다 고유한 입구, 어휘, 예매 흐름이 있습니다. 캘린더도 존재하지만 기본 구조가 아닌 가로지르는 보조 보기로 제공합니다.

주장이 아닌 측정

납품 시점에 측정한 점수.

운영 중인 사이트의 Lighthouse 점수입니다. 있는 그대로 공개합니다. 낮은 점수가 있으면 그 원인과 개선 계획을 아래에 적어 두었으며, 감추지 않습니다.

PageSpeed
91
성능: 100점 만점에 91점
93
접근성: 100점 만점에 93점
100
권장사항: 100점 만점에 100점
100
검색엔진 최적화: 100점 만점에 100점
디자인 & 아트 디렉션

모든 선택에는 이유가 있습니다.

  1. 관객별 입구

    가족, 성인, 학교 단체, 워크숍, 대관. 방문자는 한눈에 자신에게 맞는 입구를 알아봅니다. 다섯 가지가 뒤섞인 캘린더라면 직접 골라내야 했을 것입니다.

  2. 학교 단체 관람을 진지하게

    교사는 교육 자료, 대상 학년, 공연 시간, 단체 요금을 찾습니다. 이 정보는 전용 페이지에 모았습니다. 다른 곳에 두었다면 일반 관객에게 방해가 되었을 것입니다.

  3. 대관을 하나의 상품으로

    수용 인원, 기술 장비, 요금, 가능 일정. 꾸준한 수입원인데도 거의 언제나 문의 페이지 하단으로 밀려나는 항목입니다.

프로젝트 색상 팔레트

  • 미드나이트 블루

    #1C2A45

    아이덴티티

  • 코럴

    #D65A4A

    어린이 공연

  • 크림

    #F6F2EA

    배경

  • 잉크

    #1B1D22

    텍스트

타이포그래피 체계

제목용 서체

Outfit 700

본문용 서체

Inter 400

일부러 “연극적”이지 않은 현대적인 서체를 골랐습니다. 이 극장의 관객은 주로 어린이이며, 지나치게 엄숙한 톤은 가족 관객을 멀어지게 했을 것입니다.

엔지니어링

보이지 않는 곳의 기술.

  • Next.js
  • React
  • Tailwind
  • Vercel
  1. 외부 예매 시스템, 필요할 때만 로드

    티켓 예매 모듈은 클릭했을 때만 로드됩니다. 모든 페이지에 외부 위젯을 심었다면 가끔 일어나는 행동 하나 때문에 사이트 전체가 무거워졌을 것입니다.

  2. 타입이 지정된 공연 데이터

    공연, 날짜, 대상, 요금, 러닝타임을 하나의 공통 데이터 파일에 담았습니다. 다섯 개의 입구와 전체 캘린더가 모두 여기서 생성됩니다.

검색엔진 최적화

사이트가 검색되는 방식.

  1. 관객별 검색어군

    “리옹 어린이 공연”, “베즈 극장”, “리옹 학교 연극 관람”, “리옹 9구 공연장 대관”. 어느 것도 하나의 페이지로는 충족할 수 없었습니다.

  2. Event 및 Place 마크업

    각 공연은 공연장과 수용 인원, 찾아오는 길을 설명하는 Place 노드에 연결된 Event입니다.

사이트 구조

납품한 결과물.

  • 홈 — 다섯 개의 입구
  • 어린이 공연
  • 성인 연극
  • 학교 단체 공연
  • 워크숍
  • 공연장 대관
  • 캘린더(전체 보기)
방법론

프로젝트 진행 과정.

  1. 구조 설계

    다섯 관객층을 확인하고 날짜가 아닌 관객별 구조로 설계.

  2. 디자인

    구분된 입구, 가족 친화적인 톤.

  3. 개발

    타입이 지정된 공연 데이터, 지연 로드되는 예매 모듈.

  4. SEO

    관객별 검색어군.

질문

자주 받는 질문.

방문자는 날짜가 아니라 어떤 종류의 공연을 볼지 찾기 때문입니다. 캘린더는 전체 보기로는 유용하지만, 기본 구조로 쓰면 모든 관객이 자신과 무관한 정보를 걸러 내야 합니다.

같은 수준의 기준을, 귀하의 사이트에도.

현재 사이트 무료 진단, 24시간 이내 견적, 그리고 방금 읽으신 것과 같은 서면 분석을 제공합니다. 3회 무이자 분할 결제가 가능하며, 이용 가능한 지역 지원금은 계약 전에 확인합니다.

공유