THE VISTA MOVEMENT LAB — 댄스 아카데미 시네마틱 웹사이트

기획 의도

THE VISTA MOVEMENT LAB은 2023년 서울 송파구 가락동에 문을 연 댄스 아카데미로, 현역으로 활동하는 프로 댄서 6인이 직접 강습을 이끄는 크루형 학원입니다. 이 아카데미 홈페이지 제작의 목표는 분명했습니다. 화면을 여는 순간 팀의 에너지와 실력이 그대로 전해져야 한다는 것이었습니다.

그래서 전체 톤을 블랙과 옐로우·골드의 시네마틱 다크로 잡았습니다. 밝고 정돈된 학원 사이트 대신, 무대 조명 아래 댄서가 서 있는 듯한 고대비 화면을 택한 이유는 타깃에 있습니다. 케이팝 커버댄스를 즐기는 10~30대, 아이돌·실용무용 입시를 준비하는 학생, 자녀를 맡기려는 학부모까지 — 이들이 학원을 고를 때 가장 먼저 확인하는 것은 ‘분위기’와 ‘강사’입니다. 송파권에는 아직 뚜렷하게 각인된 댄스 스튜디오 브랜드가 없다는 점에 착안해, 지역에서 가장 먼저 떠오르는 스튜디오라는 자리를 시각적으로 선점하는 방향으로 설계했습니다.

클라이언트 과제

댄스학원 홈페이지 제작에는 다른 업종과 구분되는 고유한 어려움이 있었습니다.

• 전문성과 진입장벽의 균형 — 6인 크루의 실력을 강하게 보여주되, 취미 입문자가 위축되지 않도록 문턱은 낮춰야 했습니다.
• 복잡한 수업 체계의 정리 — 케이팝·힙합·안무·오디션·입시·대회까지 레벨과 목적이 제각각인 클래스를, 방문자가 몇 초 안에 자신에게 맞는 수업을 찾도록 구조화해야 했습니다.
• 상담 전환 — 전화가 부담스러운 세대를 위해 인스타그램·방문 상담·문의 폼 등 여러 경로를 자연스럽게 노출해야 했습니다.
• 자가 운영과 법적 요건 — 원장이 직접 사진과 문구를 교체할 수 있어야 했고, 회원제 커뮤니티와 개인정보 수집에 따른 법적 페이지도 갖춰야 했습니다.

접근

플랫폼은 아임웹(imweb)을 선택하되, 기성 템플릿의 한계를 넘기 위해 공통 헤더와 코드·텍스트 위젯을 직접 설계하는 아임웹 커스텀 코딩 방식으로 구축했습니다.

시네마틱 히어로와 브랜드 시스템

첫 화면은 6인 댄서의 퍼포먼스 컷을 콜라주로 배치하고, 그 위로 오버사이즈 타이포와 무한 루프 마퀴 띠(OFFICIAL TEAM THE VISTA)를 얹어 도입부부터 무대의 긴장감을 만들었습니다. 상단 메뉴는 ACADEMY·CEO·TEAM·TIMETABLE·STUDENTS·FAQ 6개로 재편하고, 국·영문 전환과 워드마크 색 분리로 브랜드 감도를 끌어올렸습니다.

콘텐츠를 구조로 번역

• TEAM — 6인 강사를 매거진 표지 같은 컬러 포트레이트 카드로 소개하고, 역할 배지와 개인 인스타그램 링크, 팀 활동 연혁 타임라인을 함께 담았습니다.
• TIMETABLE — 6종 클래스를 번호형 그리드로 정리하고, 주 횟수별 교습비를 시맨틱 표로 투명하게 공개했습니다. 강사 프로필 사진은 클릭 시 전체 화면으로 확대되는 라이트박스로 연결했습니다.
• CEO·STUDENTS·FAQ — 설립자 인사말과 이력, 회원제 수강생 커뮤니티 게시판, 그리고 아코디언 FAQ·지도·상담 폼을 각각 배치했습니다.

인터랙션과 운영 안정성

스크롤 등장 애니메이션, 숫자 카운터, 파트너 명패 자동 슬라이드, 카카오톡 플로팅 버튼 등 움직임을 더하되, 모바일에서는 무거운 효과를 조정하고 사용자의 ‘모션 최소화’ 설정까지 존중하도록 처리했습니다. 클라이언트가 안심하고 편집할 수 있도록 시맨틱 태그를 우선하고 코드 위젯의 면적을 최소화했으며, 환불규정·개인정보처리방침·이용약관과 상담 폼 동의 절차까지 갖춰 운영 리스크를 줄였습니다.

결과

thevistamovementlab.com으로 라이브 운영 중입니다. 홈을 포함한 7개 핵심 페이지와 6인 강사 프로필, 6종 클래스 안내가 하나의 다크 시네마틱 시스템으로 묶였고, 데스크톱과 모바일 모두에 대응합니다.

방문자는 첫 화면에서 팀의 무드를 감지하고, 수업·강사·시간표·교습비를 스스로 탐색한 뒤, 전화·인스타그램·방문 상담으로 이어지는 전환 동선을 따라가게 됩니다. 오픈 이후에도 라이브 피드백을 반영한 유지보수를 이어가고 있습니다.