2026디지털 환경 — 인터랙티브 프로덕트
MIRA (miraOS)
설명
디지털 환경 — 인터랙티브 프로덕트
기간
Mar 2026 - Apr 2026
역할
- 시스템 컨셉과 브랜드 정체성에 기반한 전반적인 UI/UX 디자인 및 비주얼 아트 디렉션.
- Next.js 16 / React 19 기반 풀스택 환경 구축 및 컴포넌트 최적화.
- WebGL/GLSL 셰이더 및 GSAP를 활용한 몰입형 환경 비주얼·시퀀스 인터랙션 구현.
- Supabase를 연동한 행동 신호 수집 및 상태 시스템 설계.
기술
Frontend
Next.js 16 (App Router) · React 19 · TypeScript · Tailwind CSS
Creative
WebGL · GLSL Shader · Canvas · GSAP
Backend
Supabase · Resend · pdf.js
Ops
Vercel
프로젝트 목적
"하나의 닫힌 시스템, 고요한 마주침을 위한 환경." miraOS는 사용자를 분석하지 않겠다고 선언하는 디지털 환경입니다. AI 시대에 점점 희소해지는 주의(Attention)와 명료한 사고를 하나의 자산으로 보고, 사람이 자기 자신의 행동 패턴을 스스로 알아차릴 수 있는 작은 일상의 공간을 제공합니다. 사용자를 빠르게 만드는 대신 머무르게 하고, 그 내적 자원을 보호하기 위해 가속을 유발하는 모든 관습을 거부했습니다.
범위
- · 몰입형 인터랙티브 웹 디자인 및 풀스택 개발
- · WebGL 셰이더 기반 환경(Environment) 레이어 구현
- · GSAP 시퀀스 인터랙션 설계
- · 행동 신호 기반 상태 시스템 구축
주요 기술 특징
WebGL 셰이더 환경 레이어
- · GLSL 셰이더로 유동적인 환경 비주얼을 실시간 렌더링해, 화면 전체가 정적인 이미지가 아니라 미세하게 호흡하는 환경 레이어로 작동합니다.
- · 색·빛·모션·공간감이 급격하지 않고 점진적으로만 변화하도록 셰이더 파라미터를 설계했습니다.
일일 리추얼 시퀀스
- · Presence → Recognition → Orientation → Five Options → Mirror → Writing → Exit의 고정된 흐름을 GSAP로 시네마틱하게 전환합니다.
- · 인터페이스가 아니라 사용자 자신의 인식으로 주의가 이동하도록 설계한 시퀀스입니다.
행동 신호 기반 상태 시스템
- · pacing(속도)·stillness(정지)·consistency(일관성) 등 상호작용 신호를 수집해 현재 행동 리듬을 나타내는 단일 내부 상태값으로 변환합니다.
- · 개별 세션에 즉각 반응하지 않고 여러 날에 걸쳐 평활화하여, 변화가 느리게 오고 그래서 믿을 수 있게 만들었습니다.
앰비언트 사운드·분위기
- · 상태값에 따라 색 변화, 모션, 공간의 개폐(openness/contraction), 앰비언트 사운드 톤이 미세하게 조정됩니다.
- · 매 방문이 조금씩 다르지만, 그 사실을 한 번도 공지하지 않습니다.
디자인 포인트
고요한 미니멀리즘
오프화이트 배경과 절제된 세리프 타이포그래피("miraOS — ENVIRONMENT layer")로 정적이고 명상적인 무드를 만들어, 슬로건을 장식이 아니라 문자 그대로의 감각으로 옮겼습니다.
슬로 모션과 여백
빠른 피드백 대신 느린 전환과 극단적인 여백을 택했습니다. 일반적인 인터페이스가 사용자를 가속시킨다면, 이 인터페이스는 의도적으로 감속시키도록 구성되었습니다.
살아있는 환경
사용자의 리듬에 따라 색·빛·사운드가 미세하게 진화합니다. 스크립트된 것이 아니라 유기적이라, 같은 방문이 두 번 나오지 않습니다.
프로젝트 보기웹사이트 방문 →