프로젝트 개요
- 개발 형태: 웹 인터랙티브 페이지
- 개발 인원: 1인(외주 단독 개발)
- 기술 스택
- 프론트엔드: HTML, CSS, JavaScript
- 개발 환경: VS Code, FileZlia
- 배포: dothome 호스팅
프로젝트 설명
공포 분위기를 연출하기 위한 웹 인터랙티브 페이지로, 사용자 클릭을 중심으로 다양한 상호작용이 발생하도록 설계되었습니다. 페이지에 처음 접속해 클릭하면 배경음이 재생되며, 이후 클릭할 때마다 효과음이 출력되고 메인 이미지가 교체됩니다. 동시에 준비된 문구 배열에서 무작위로 선택된 메시지가 팝업 창으로 열리는데, 팝업은 × 버튼이나 obey 버튼으로 닫을 수 있습니다.
비주얼 측면에서는
기술적으로는 HTML/CSS/JavaScript(바닐라)를 기반으로 구현했으며, window.open과 postMessage API를 활용해 부모 창에서 자식 팝업으로 메시지를 전달하고, Audio API를 통해 배경음과 효과음 재생을 제어했습니다. 이벤트 처리는 DOMContentLoaded, click, resize, message 등 브라우저 이벤트 리스너를 활용해 사용자 상호작용과 UI 변화를 실시간으로 반영했습니다.