프로젝트 목록
🌬️
wind-down
WebLIVE
멍때림 비주얼라이저 + 호흡 가이드 PWA
Period:2026.05 - 현재
Role:기획·개발 (1인)
의존성 0의 단일 HTML로 만든 멍때림·호흡 도구. 캔버스 비주얼과 Web Audio로 생성한 환경음, 호흡 가이드를 제공하며 모바일 설치형 PWA로 확장했다. 평소엔 비주얼만 풀스크린, 화면을 탭하면 컨트롤이 나타나는 미니멀 UX.
TECH STACK
Frontend
Vanilla JSCanvasWeb Audio APIPWA / Service Worker
Infrastructure
DockerNginx
KEY FEATURES
비주얼 씬 12종
물결·안개·입자·별·오로라·눈·반딧불 등 캔버스 애니메이션
테마 9종
밤하늘·노을·심해·설원 등 분위기 팔레트
환경음 6종
드론·비·파도·새소리·모닥불·풀벌레를 Web Audio로 실시간 생성
호흡 가이드
4·7·8, 박스, 코히어런트(5·5) 패턴 시각 안내
프리셋 9종
분위기 조합을 원터치로 적용
멍타이머
오늘 누적 시간과 카운트다운 종료 알림
취침 페이드
15·30·45분 뒤 화면과 소리가 서서히 꺼짐
공유 링크
현재 조합을 URL 해시로 복사·복원
모바일 PWA
설치형, 탭하면 컨트롤이 뜨는 미니멀 UX, network-first 오프라인 동작
ACHIEVEMENTS
무의존 단일 파일
외부 라이브러리 0, 단일 HTML로 구현
설치형 PWA
iOS·Android 홈 화면 설치와 오프라인 동작
모바일 검증
iOS 시뮬레이터로 탭토글·레이아웃 실측
SCREENSHOTS
PROJECT LINKS
더 많은 프로젝트가 궁금하신가요?
모든 프로젝트 보기→