📌 MIRA (miraOS): 몰입형 인터랙티브 디지털 환경 웹사이트
🔹 프로젝트 개요
- 작업 기간: 2026.03 ~ 2026.04
- 작업 범위: 몰입형 인터랙티브 웹 디자인 및 풀스택 개발, WebGL 셰이더 기반 환경(Environment) 비주얼 구현, GSAP 시퀀스 인터랙션 설계, 행동 신호 기반 상태 시스템 구축
- 사용 도구:
- Frontend: Next.js 16 (App Router), React 19, TypeScript, Tailwind CSS
- Creative / Graphics: WebGL · GLSL Shader, Canvas
- Animation: GSAP
- Backend: Supabase (상태·데이터 관리), Resend (메일), pdf.js
- Deployment: Vercel
🔹 프로젝트 목적
"A contained system. An environment for quiet encounter (하나의 닫힌 시스템, 고요한 마주침을 위한 환경)."
miraOS는 사용자를 분석하거나 조언하지 않으면서, 사람이 자기 자신의 행동 패턴을 스스로 알아차릴 수 있는 작은 일상의 공간을 제공하는 디지털 환경입니다. AI 시대에 점점 희소해지는 '주의(Attention)와 명료한 사고'를 하나의 자산으로 보고, 사용자를 빠르게 만드는 대신 천천히 머무르게 하여 그 내적 자원을 보호하는 것을 핵심 목표로 삼았습니다.
🔹 핵심 기술 및 구현 기능 (Key Technical Features)
- WebGL Shader Environment (셰이더 기반 환경 레이어)
- GLSL 셰이더로 유동적인 환경 비주얼을 실시간 렌더링하여, 화면 전체가 정적인 이미지가 아닌 미세하게 호흡하는 '환경(Environment layer)'으로 작동하도록 구현했습니다.
- 색·빛·모션·공간감이 급격하지 않고 점진적으로 변화하도록 셰이더 파라미터를 설계했습니다.
- Daily Ritual Sequence (일일 리추얼 시퀀스)
- Presence → Recognition → Orientation → Five Options → Mirror → Writing → Exit 의 고정된 흐름을 GSAP로 시네마틱하게 전환하여, 인터페이스가 아닌 사용자 자신의 인식으로 주의가 이동하도록 설계했습니다.
- Behavioural State System (행동 신호 기반 상태 시스템)
- pacing(속도), stillness(정지), consistency(일관성) 등 상호작용 신호를 수집해 사용자의 현재 행동 리듬을 나타내는 단일 내부 상태값으로 변환합니다.
- 개별 세션에 즉각 반응하지 않고 여러 날에 걸쳐 평활화(smoothing)하여, 느리고 믿을 수 있는 점진적 변화를 환경에 반영합니다.
- Ambient Sound & Atmosphere (앰비언트 사운드·분위기)
- 상태값에 따라 색 변화, 모션, 공간의 개폐(openness/contraction), 앰비언트 사운드 톤이 미세하게 조정되어 날마다 조금씩 다른 환경을 경험하게 됩니다.
🔹 디자인 포인트
- Quiet Minimalism: 오프화이트 배경과 절제된 세리프 타이포그래피("miraOS — ENVIRONMENT layer")를 사용해 정적이고 명상적인 무드를 연출하여, 브랜드 슬로건 그대로 '고요한 마주침'의 감각을 시각화했습니다.
- Slow Motion & Negative Space: 빠른 피드백 대신 느린 전환과 극단적인 여백(Negative Space)을 채택하여, 사용자를 가속시키는 일반적인 UI와 반대로 의도적으로 감속시키는 인터랙션을 구성했습니다.
- Living Environment: 사용자의 리듬에 따라 색·빛·사운드가 미세하게 진화하는 '살아있는 환경'으로서, 매 방문이 동일하지 않은 유기적인 경험을 제공합니다.
🔹 담당 역할
- Web Designer & Full-Stack Developer:
- 시스템 컨셉과 브랜드 정체성에 기반한 전반적인 UI/UX 디자인 및 비주얼 아트 디렉션.
- Next.js 16 / React 19 기반 풀스택 환경 구축 및 컴포넌트 최적화.
- WebGL/GLSL 셰이더 및 GSAP를 활용한 몰입형 환경 비주얼·시퀀스 인터랙션 구현.
- Supabase를 연동한 행동 신호 수집 및 상태(State) 시스템 설계.
🔹 주요 화면