Quiet Window

한 줄 소개

다양한 풍경을 감상하며 여러 가지의 백색소음을 섞어 힐링하는 앱입니다.

만든 이유

저는 요즘 해야할 것이 산더미처럼 쌓여 휴식도 필요하고, 좋은 소리도 듣고 싶었습니다. 또, 인터넷(유튜브나 인스타 등과 같은 텔레그램 포함)의 채팅들을 보다보니, 저와 같이 지치고 힘든 사람이 많아보였습니다. 이런 문제점을 해결하는데에 무엇이 좋을까 생각해보다가 이런 아이디어가 떠올랐습니다. 한 가지 이유를 더 설명하라고 하신다면, 만들기가 어렵지도 쉽지도 않고, 딱 적당한 것 같기 때문도 있습니다

주요 기능

• 시작 화면
  • 중앙 Quiet Window 로고
  • 하단 시작하기/설정/나가기 버튼
  • Deep Navy 기반 배경 + 별/야경 느낌의 가벼운 장식
• 풍경 선택 화면
  • 단일 카드(이미지 + 풍경 이름 + 한 줄 분위기 설명)
  • 좌우 화살표로 카드 이동
  • 현재 위치(예: 2/5) 표시
  • 하단 선택 버튼
• 메인 화면
  • 상단: 현재 풍경 이름 + 날씨/시간대 버튼
  • 중앙: 풍경 배경
  • 하단: 사운드 믹서 버튼
• 사운드 믹서 패널
  • 버튼으로 열고 닫는 방식
  • 기본 4개 항목 우선 노출, 가로 스크롤로 나머지 접근
  • 각 항목은 아이콘 + 텍스트 + 슬라이더 + 값(0~100) 표시
• 5가지 풍경 선택 가능(출시 이후 추가될 가능성도 있습니다.)
  • 다락방의 창문
  • 카페 창가
  • 우주정거장의 창밖
  • 숲속 오두막의 창문
  • 열차 침대칸의 창문
• 8가지 백색소음의 볼륨을 0~100으로 개별 조절하여 원하는 소리 만들기 가능
  • 빗소리
  • 바람소리
  • 천둥소리
  • 장작 타는 소리
  • 사람들이 웅성거리는 소리
  • 연필 소리(자주) / 책 넘기는 소리(가끔)
  • 기차소리
  • 화이트 노이즈
• 풍경을 선택하면 그 풍경의 기본 소리는 볼륨이 50%인 상태로, 나머지는 0%인 상태로 시작 (예를 들어, 다락방의 창문은 빗소리이고, 카페 창가는 사람들이 웅성거리는 소리.)
• 날씨(비/눈/안개)와 시간대(낮/노을/밤)를 직접 변경
• 스페이스바로 전체 소리 재생/일시정지 토글

현재 적용 정책 (중요)

• 풍경 이름에는 날씨/시간대 표현을 포함하지 않습니다.
• 앱 기본 시작 상태는 맑음 + 아침입니다.
• 날씨 표현 방식:
  • 1번 방법(풍경별 창문 마스크 이미지 기반)은 보류
  • 2번 방법(마스크 없이 좌표/영역 및 레이어 기반 초안)을 먼저 적용

사용 기술

• HTML5
• CSS3
• Vanilla JavaScript
• HTML5 Audio / JavaScript Audio API
• Azure Static Web Apps

배포 링크

• 준비 중 (배포 후 링크 추가 예정)

실행 방법 (로컬에서 먼저 보기)

1. 이 폴더를 VS Code로 엽니다.
2. 앱 시작 파일 index.html을 엽니다.
3. VS Code의 Live Server 확장 기능이 있다면, 파일에서 Open with Live Server를 눌러 실행합니다.
4. 확장 기능이 없다면, 브라우저에서 파일을 직접 열어 화면이 보이는지 먼저 확인합니다.

현재는 시작 화면(로고/버튼/배경)까지 구현된 상태이며, 풍경 선택/메인/믹서 동작은 단계별로 이어서 구현합니다.