Compagnie l'Entr'Axes
성능 98점: 극단에는 느린 사이트에 쓸 예산이 없습니다.
- 연도
- 2026
- 제작 기간
- 3주
- 기술 스택
- Next.js · React · Tailwind · TypeScript · Vercel
- 디자인
- 개발
- 로컬 SEO
- 카피라이팅
- Lighthouse 성능
- 98/100
- 연간 호스팅 비용
- 0유로
- 극단 창단 연도
- 2009
해결해야 했던 과제.
배경
Compagnie l'Entr'Axes는 2009년부터 Agnès Faye가 이끌어 온 리옹의 아마추어 극단입니다. 공연, 연기 워크숍, 레퍼토리를 운영합니다.
제약
아마추어 극단에는 유지보수 예산도, 웹 관리자도 없습니다. 사이트는 몇 달 동안 스스로 돌아가야 하고, 바뀌는 공연 일정을 최신 상태로 유지하면서 예매 욕구를 불러일으켜야 합니다. 그것도 반복 비용 없이 말입니다.
해법
정적 렌더링, 무료 호스팅, 읽기 쉬운 데이터 파일에 담긴 콘텐츠. 공연 일정에는 실제 날짜가 들어 있어, 지난 공연은 “예정” 상태로 남지 않고 자동으로 레퍼토리로 넘어갑니다. 누가 손대지 않아도 사이트가 낡을 수 없는 구조입니다.
납품 시점에 측정한 점수.
운영 중인 사이트의 Lighthouse 점수입니다. 있는 그대로 공개합니다. 낮은 점수가 있으면 그 원인과 개선 계획을 아래에 적어 두었으며, 감추지 않습니다.
모든 선택에는 이유가 있습니다.
연극적인 톤
대비가 강한 세리프, 깊은 검정, 막(幕)의 붉은색. 연극에는 뚜렷한 시각 언어가 있습니다. 이를 무시하고 무난한 디자인을 택했다면 극단의 정체성을 잃었을 것입니다.
공연 일정이 먼저
극단 소개보다 다음 공연 일정을 먼저 보여 줍니다. 극단 사이트를 찾는 방문자는 무엇이 언제 공연되는지를 알고 싶어 하며, 극단의 역사는 그다음입니다.
워크숍을 두 번째 기둥으로
워크숍은 공연만큼이나 극단을 살아 있게 합니다. 그래서 시간대, 요금, 신청 방법을 담은 전용 페이지를 두었습니다. “소개” 페이지의 한 줄로 끝내지 않았습니다.
프로젝트 색상 팔레트
무대 블랙
#141013
배경
막 레드
#A32639
아이덴티티, 강조
아이보리
#F3EEE7
텍스트
조명 골드
#C9A24B
디테일
타이포그래피 체계
제목용 서체
Playfair Display 700
본문용 서체
Inter 400
포스터에는 디돈 서체를, 공연 일정에는 산세리프를 썼습니다. 날짜는 캘린더에서 정렬이 흐트러지지 않도록 고정폭 숫자로 표시합니다.
보이지 않는 곳의 기술.
- Next.js
- React
- Tailwind
- TypeScript
- Vercel
날짜에 따른 자동 전환
각 공연에는 날짜가 들어 있습니다. 마지막 공연일이 지나면 별도 작업 없이 공연 일정에서 빠져 레퍼토리로 옮겨 갑니다. 웹 관리자가 없는 사이트가 정확함을 유지할 수 있는 이유입니다.
성능 98점
정적 사이트, 자체 호스팅 폰트 두 개, 애니메이션 라이브러리 없음, 크기가 지정된 이미지. 가장 적은 예산으로 포트폴리오 최고의 성능 점수를 기록했습니다.
운영 비용 0
애플리케이션 서버도, 데이터베이스도 없고 호스팅은 무료입니다. 비영리 단체에게 사이트의 지속성은 무엇보다 비용에 달려 있습니다.
사이트가 검색되는 방식.
날짜가 들어간 Event 마크업
각 공연에는 날짜, 장소, 예매 링크가 포함된 Event 노드가 있습니다. 이것이 검색 결과의 이벤트 영역에 노출될 수 있게 해 줍니다.
문화생활 검색어
“리옹 아마추어 연극”, “이번 주말 리옹 공연”, “리옹 성인 연기 워크숍”. 서로 다른 세 가지 검색 의도에 세 개의 페이지로 대응합니다.
누구나 사용할 수 있도록.
2025년 6월부터 유럽 접근성법(European Accessibility Act)에 따라 상당수 온라인 서비스에 디지털 접근성이 의무화되었습니다. 저희는 사후 보완이 아니라 설계 단계에서부터 접근성을 다룹니다.
검은 배경에서 검증한 명도 대비
94점: 깊은 검정 위의 막 붉은색은 본문 텍스트에서 4.5:1을 확보하도록 밝게 조정했습니다. 남은 감점 항목은 식별된 장식 요소에 관한 것입니다.
납품한 결과물.
- 홈
- 공연 일정
- 레퍼토리
- 워크숍
- 극단 소개
- 예매
- 문의
프로젝트 진행 과정.
제약 조건
유지보수 예산 없음: 사이트가 스스로 최신 상태를 유지해야 합니다.
디자인
연극적인 톤, 공연 일정을 맨 앞에.
개발
정적 사이트, 날짜에 따른 자동 전환, 무료 호스팅.
SEO
Event 마크업, 세 가지 검색어군.
