Triadic Ballet Web Experience

오스카 슐레머의 '트라이아딕 발레'에서 영감을 받은 인터랙티브 웹 경험입니다. 사용자는 동작, 의상, 음악, 무대를 선택하여 자신만의 공연을 구성할 수 있습니다.

Interaction Visual Motion 3D Modeling Web Engine

실시간 체험하기

01 / Context

프로젝트 배경

Background

트라이아딕 발레를 웹상에서 조합 가능한 인터랙티브 공연으로 재해석했습니다.

User Goal

수동적인 관람에서 벗어나 구성을 통해 자신만의 공연을 만듭니다.

02 / My Scope

수행 역할

account_tree

인터랙션 흐름 설계

Form → Movement → Costume → Music → Stage 단계 설정

dashboard

UI 시스템 구축

일관된 선택 인터페이스(상태, 아이콘, 미리보기) 제작

videocam

비주얼/모션 가이드

카메라 워킹, 이징, 화면 전환 규칙 수립

code

프론트엔드 협업

디자인 시스템 구현 및 경험 최적화

03 / Constraints

제약 사항

warning
조합의 복잡성: 너무 많은 옵션이 사용자에게 혼란을 줄 수 있음
warning
웹 환경의 성능/호환성 제약
warning
인터랙티브 요소를 추가하면서도 원작의 예술적 스타일 유지

04 / Key Solutions

주요 솔루션

Solution 01 — 위저드 흐름(Wizard Flow)

Problem

한꺼번에 너무 많은 선택지가 주어지면 사용자는 압도당합니다.

Solution

한 번에 하나의 차원만 결정하도록 안내하는 단계별 위저드 인터페이스를 도입했습니다.

Solution 02 — 통합 시각 언어(Unified Visual Language)

Problem

텍스트 위주의 선택 목록은 시각적 피로를 유발합니다.

Solution

실루엣, 아이콘, 프리뷰 위주의 컴포넌트를 사용하여 직관적인 선택이 가능하게 했습니다.

Solution 03 — 공연과 같은 결과 연출

Problem

일반적인 미리보기는 실제 공연의 생동감이 부족합니다.

Solution

무대 색상, 조명, 카메라 프레이밍을 조율하여 최종 결과물을 실제 공연처럼 연출했습니다.

05 / Outcome

프로젝트 성과

3m 20s Avg Session

평균 체류 시간 (Placeholder)

68% Completion

흐름 완료율 (Placeholder)

Positive Feedback

전반적인 긍정 반응 (Placeholder)

06 / Learnings

배운 점

단계별 의사결정 방식이 사용자의 인지 부하를 줄이는 데 큰 역할을 한다는 것을 배웠습니다.
모션과 3D 요소는 설계 단계부터 성능 제약을 고려해야 함을 깨달았습니다.
향후 사용자가 직접 만든 공연을 저장하고 공유할 수 있는 기능을 추가해보고 싶습니다.