Art Scénic
무료 체험 수업이 곧 상품이었습니다: 사이트 전체를 그곳으로 이끌도록 구성했습니다.
- 연도
- 2026
- 제작 기간
- 3주
- 기술 스택
- React · Vite · Tailwind · Framer Motion · Vercel
- 디자인
- 개발
- 전환 퍼널
- 로컬 SEO
Kayzen Web이 Vercel 주소에 공개한 데모 버전입니다. 정식 도메인은 고객 소유입니다.

- Lighthouse 성능
- 97/100
- 단 하나의 CTA
- 1
- 체험 예약에 필요한 필드 수
- 4
해결해야 했던 과제.
배경
L'Art-Scénic은 Anne Kravz-Tarnavsky가 설립한 에퀼리(Écully)의 극단으로, 공연과 함께 어린이·성인 대상 연기 워크숍을 운영합니다.
제약
워크숍 등록은 9월의 3주 동안 결정됩니다. 나머지 기간에 사이트는 인지도를 유지해야 합니다. 실제로 등록을 이끄는 것은 요금도 커리큘럼도 아닌 체험 수업입니다. 무대에 오르는 두려움을 덜어 주기 때문입니다.
해법
무료 체험 수업을 사이트의 유일한 행동 유도로 삼았습니다. 홈, 각 워크숍 페이지, 갤러리 등 모든 페이지가 그곳으로 이어집니다. 신청 양식은 짧고, 가능한 시간대를 바로 제시합니다. 공연 일정은 유지하되 뒤쪽에 배치했습니다.
납품 시점에 측정한 점수.
운영 중인 사이트의 Lighthouse 점수입니다. 있는 그대로 공개합니다. 낮은 점수가 있으면 그 원인과 개선 계획을 아래에 적어 두었으며, 감추지 않습니다.
모든 선택에는 이유가 있습니다.
어디서나 하나의 행동
“무료 체험 수업 예약”이 사이트의 유일한 CTA입니다. 경쟁하는 버튼을 늘리면 주의가 분산되고, 전환율도 함께 떨어집니다.
어린이 워크숍과 성인 워크숍을 분리
두 대상, 두 가지 망설임, 두 가지 설득 논리. 부모는 자녀를 등록시키고, 성인은 자신을 등록합니다. 후자가 훨씬 어려운 결정이며 다른 언어가 필요합니다.
아마추어를 보여 주는 갤러리
사진에는 전문 배우가 아니라 워크숍에 참여한 수강생이 담겨 있습니다. “나도 할 수 있겠다”는 상상이 등록으로 이어집니다.
프로젝트 색상 팔레트
벨벳
#5B2233
아이덴티티
샌드
#F4EDE3
배경
잉크
#1E1A1B
텍스트
황동
#B08D4A
강조
타이포그래피 체계
제목용 서체
Cormorant Garamond 600
본문용 서체
Inter 400
과장 없는 연극적 톤입니다. 극단이 말을 거는 대상은 평론가가 아니라 아마추어입니다.
보이지 않는 곳의 기술.
- React
- Vite
- Tailwind
- Framer Motion
- Vercel
애니메이션이 있어도 성능 97점
Framer Motion은 애니메이션이 있는 페이지에서만 로드되며, 사용자가 동작 줄이기를 설정한 경우 모든 애니메이션이 꺼집니다.
최소한의 체험 신청 양식
이름, 연락처, 희망 시간대, 워크숍. 필드는 네 개뿐입니다. 나이, 수준, 동기까지 물었다면 신청이 서류 심사처럼 느껴졌을 것입니다.
사이트가 검색되는 방식.
“에퀼리 연기 수업”, “리옹 서부 어린이 연극 워크숍”
지역 기반 검색어로, 8~9월에 수요가 뚜렷하게 치솟습니다. 페이지는 시즌이 오기 훨씬 전에 준비되어 있습니다.
Course 및 Event 마크업
워크숍은 일정이 포함된 Course로, 공연은 날짜가 들어간 Event로 표시합니다. 서로 다른 두 현실에 서로 다른 두 유형을 적용했습니다.
납품한 결과물.
- 홈 — 체험 수업
- 어린이 워크숍
- 성인 워크숍
- 공연
- 갤러리
- 극단 소개
- 체험 수업 예약
프로젝트 진행 과정.
분석
체험 수업을 유일한 등록 계기로 확인.
디자인
단일 행동, 두 워크숍 대상, 아마추어 갤러리.
개발
조건부 애니메이션, 네 개 필드의 신청 양식.
SEO
지역 검색어, Course 및 Event 마크업.


