소리를 보다

## 눈에 보이는 소리 — 프로덕션 프롬프트

**Three.js**로 구축한 완성도 높은 공개용 인터랙티브 과학 경험 **“눈에 보이는 소리”**를 만드세요. 음악이나 과학 지식이 없는 사람도 탐색할 수 있도록 소리를 아름답고 반응성 높은 3D 형태로 바꾸세요. **배포된 웹사이트**와 **영화 같은 MP4 사례 영상**을 제공하세요.

이 경험은 고급 인터랙티브 과학 박물관처럼 시각적으로 인상적이고, 즉시 이해되며, 재미있고, 과학적으로 정직해야 합니다. 데스크톱과 모바일의 폭넓은 사용자를 위해 설계하세요.

### 첫 화면

짙은 한밤의 배경 위에 빛나며 천천히 움직이는 사운드 조형물로 시작하세요. 따뜻한 아이보리 타이포그래피와 전기 청록색, 보라색, 절제된 코럴 포인트를 사용하세요. 구성은 우아하게, 인터페이스는 미니멀하게 유지하세요.

헤드라인 **“소리로 무엇을 할 수 있는지 확인하세요.”**를 표시하세요. 세 가지 명확한 진입점을 제공하세요.

- **사운드 재생** — 엄선한 오디오 예시와 시각화를 즉시 시작합니다.
- **내 마이크 사용** — 사용자의 목소리 또는 주변 소리를 시각화합니다.
- **오디오 업로드** — 로컬 오디오 파일을 탐색합니다.

방문자가 한 번의 클릭으로 흥미로운 경험을 할 수 있게 하세요. 마이크 접근과 파일 업로드는 선택 사항이 되도록 내장 예시를 제공하세요. 재생 전에는 명확히 식별되는 무음 미리보기를 실행하세요.

### 세 가지 탐색 방식

**1. 사운드 조형물 — 예술적 오디오 시각화**

실시간 오디오 분석에 부드럽게 반응하는 입자와 흐르는 리본의 조형적 장을 만드세요. 저주파는 넓은 움직임에, 중주파는 구조적 디테일에, 고주파는 미세하게 반짝이는 포인트에 매핑하세요. 갑작스러운 변화 없이 음량이 크기와 에너지에 영향을 주게 하세요.

말소리, 박수, 허밍, 음악에 눈에 띄게 서로 다른 반응을 부여하세요. 이 모드는 소리를 예술적으로 해석한 것임을 표시하세요.

**2. 파형 탐색기 — 신호 이해하기**

애니메이션 파형과 주파수 스펙트럼을 함께 표시하고, 선택 사항으로 공간적 표현을 제공하세요. 간단히 설명하세요. 파형은 신호가 시간에 따라 어떻게 변하는지 보여 주고, 스펙트럼은 주파수 성분을 보여 줍니다.

주파수 및 볼륨 컨트롤이 명확히 표시된 인터랙티브 톤 생성기를 포함하세요. 사용자가 순음과 더 풍부한 음색을 비교하고 차이를 볼 수 있게 하세요. 낮은 기본 볼륨, 부드러운 오디오 전환, 명확한 중지 컨트롤을 사용하세요. 시각적 진폭은 보정된 물리적 음량이 아니라 입력 신호 레벨을 나타낸다고 설명하세요.

**3. 공명 패턴 — 진동 탐색하기**

모래 같은 입자가 마디 패턴을 이루는 가상의 진동판을 보여 주세요. 사용자가 가진 주파수를 바꾸며 탐색할 수 있도록 여러 진동 모드를 신중하게 구현하세요.

정의된 형상과 경계 조건을 갖춘 문서화된 판 모델을 바탕으로 패턴을 만드세요. 입자는 진동이 최소인 영역 근처에 모인다고 설명하세요. 이 경험이 교육용 시뮬레이션임을 표시하고 단순화한 내용을 설명하세요. 장식 효과는 과학 모델과 시각적으로 뚜렷이 구분하세요.

### 발견을 쉽게 만들기

**“일정한 음으로 허밍해 보세요,” “한 번 박수 쳐 보세요,”** 및 **“낮은 음과 높은 음을 비교해 보세요.”**와 같은 짧고 맥락에 맞는 안내를 제공하세요. 각 안내에는 즉시 확인할 수 있는 반응을 연결하세요.

고급 컨트롤은 접어 두세요. 일시 정지, 재설정, 전체 화면, 감도, 움직임 강도 컨트롤을 제공하세요. 모드를 전환할 때 오디오 소스와 재생 상태를 명확하게 유지하세요. 장면을 가리지 않도록 각 모드에 짧고 접근 가능한 설명을 제공하세요.

### 오디오 및 개인정보 보호

재생과 분석에는 안정적인 평활화와 적절한 정규화를 적용한 **Web Audio API**를 사용하세요. 사용자가 선택한 후에만 마이크 접근 권한을 요청하세요. 마이크 입력과 업로드한 파일은 로컬에서 처리하고, 오디오를 업로드, 저장 또는 전송하지 마세요. 세 모드를 모두 오로라 테마로 다시 꾸미세요. 한밤의 배경에 천천히 흘러가는 녹색-보라색 오로라 그라데이션을 추가하고, 사운드 조형물의 입자와 리본은 청록색과 보라색으로 바꾸며, 공명 패턴의 알갱이에는 은은하고 차가운 빛을 더하세요. 아이보리 텍스트는 유지하고, 밤하늘을 바라보는 분위기가 나도록 전체 밝기를 낮추며, 모든 상호작용은 그대로 두세요. 항상 표시되는 마이크 표시기와 마이크를 해제하는 명확한 **“마이크 중지”** 컨트롤을 제공하세요. 피드백을 방지하기 위해 스피커를 통한 마이크 모니터링을 비활성화하세요. 권한 거부, 사용 불가 장치, 지원하지 않는 파일, 무음, 오디오 중단을 적절히 처리하세요.

검증된 CC0 또는 적절한 라이선스의 내장 오디오를 사용하고, 에셋 라이선스 목록을 포함하세요.

### 시각 및 기술 품질

정교한 입자 렌더링, 설득력 있는 깊이감, 제어된 블룸, 부드러운 애니메이션, 절제된 카메라 움직임을 사용하세요. 텍스트는 선명하게, 컨트롤은 읽기 쉽게 유지하세요. 과도한 깜빡임과 시각적 노이즈를 피하세요.

GPU 효율적인 지오메트리와 셰이더, 재사용 가능한 버퍼, 제한된 픽셀 밀도, 적응형 입자 수, 품질 프리셋을 갖춘 유지 관리 가능한 Three.js 애플리케이션을 구축하세요. 동시 방문자가 서버 측 오디오 처리를 필요로 하지 않도록 오디오는 로컬에서 분석하세요. CDN 호환 호스팅을 통해 최적화된 정적 에셋을 제공하세요.

부드러운 데스크톱 성능과 중급 스마트폰에서 사용 가능한 성능을 목표로 하세요. 테스트한 기기에서 실제 프레임 속도, 메모리 사용량, 로딩 동작을 측정하세요. 페이지가 숨겨졌을 때 불필요한 렌더링을 멈추고 오디오 및 GPU 리소스를 올바르게 해제하세요.

터치, 키보드 탐색, 눈에 보이는 포커스 상태, 스크린 리더로 접근 가능한 컨트롤, 움직임 감소를 지원하세요. WebGL을 사용할 수 없을 때는 가벼운 2D 대체 기능을 제공하세요. 색상이나 오디오만으로도 필수 정보를 이해할 수 있게 하세요.

### 제공물

완성된 웹사이트를 작동하는 공개 **HTTPS URL**에 배포하세요.

실제 애플리케이션에서 렌더링한 동기화된 라이선스 오디오 포함 다운로드 가능한 **30~45초, 1920 × 1080 H.264 MP4**를 제작하세요. 순음이 파형이 되는 모습, 더 풍부한 소리가 조형물을 변화시키는 모습, 일련의 공명 패턴을 보여 주세요. 깔끔한 결과를 위해 결정론적 재생과 안정적인 프레임 캡처를 사용하세요.

소스 프로젝트, 로컬 에셋, 라이선스 목록, 문서화된 과학 모델과 시각화 매핑, 배포 안내, 간결한 검증 보고서를 제공하세요. 배포된 경험을 데스크톱 및 모바일 레이아웃, 마이크 권한 흐름, 오디오 재생, 업로드, 모드 전환, 접근성, 동영상 재생 전반에서 테스트하세요. 테스트 환경과 남은 제한 사항을 정확하게 보고하세요.

**포함하지 마세요:** 물리 시뮬레이션처럼 제시되는 장식 효과, 페이지 로드 시 마이크 권한 요청, 서버로의 오디오 업로드, 자동 재생 사운드, 스피커 피드백, 과도한 컨트롤, 빠른 깜빡임, 읽기 어려운 라벨, 자리 표시자 기능, 깨진 모바일 레이아웃, 워터마크 또는 프로덕션 준비가 되었다는 근거 없는 주장.

## 눈에 보이는 소리 — 프로덕션 프롬프트

**Three.js**로 구축한 완성도 높은 공개용 인터랙티브 과학 경험 **“눈에 보이는 소리”**를 만드세요. 음악이나 과학 지식이 없는 사람도 탐색할 수 있도록 소리를 아름답고 반응성 높은 3D 형태로 바꾸세요. **배포된 웹사이트**와 **영화 같은 MP4 사례 영상**을 제공하세요.

이 경험은 고급 인터랙티브 과학 박물관처럼 시각적으로 인상적이고, 즉시 이해되며, 재미있고, 과학적으로 정직해야 합니다. 데스크톱과 모바일의 폭넓은 사용자를 위해 설계하세요.

### 첫 화면

짙은 한밤의 배경 위에 빛나며 천천히 움직이는 사운드 조형물로 시작하세요. 따뜻한 아이보리 타이포그래피와 전기 청록색, 보라색, 절제된 코럴 포인트를 사용하세요. 구성은 우아하게, 인터페이스는 미니멀하게 유지하세요.

헤드라인 **“소리로 무엇을 할 수 있는지 확인하세요.”**를 표시하세요. 세 가지 명확한 진입점을 제공하세요.

- **사운드 재생** — 엄선한 오디오 예시와 시각화를 즉시 시작합니다.
- **내 마이크 사용** — 사용자의 목소리 또는 주변 소리를 시각화합니다.
- **오디오 업로드** — 로컬 오디오 파일을 탐색합니다.

방문자가 한 번의 클릭으로 흥미로운 경험을 할 수 있게 하세요. 마이크 접근과 파일 업로드는 선택 사항이 되도록 내장 예시를 제공하세요. 재생 전에는 명확히 식별되는 무음 미리보기를 실행하세요.

### 세 가지 탐색 방식

**1. 사운드 조형물 — 예술적 오디오 시각화**

실시간 오디오 분석에 부드럽게 반응하는 입자와 흐르는 리본의 조형적 장을 만드세요. 저주파는 넓은 움직임에, 중주파는 구조적 디테일에, 고주파는 미세하게 반짝이는 포인트에 매핑하세요. 갑작스러운 변화 없이 음량이 크기와 에너지에 영향을 주게 하세요.

말소리, 박수, 허밍, 음악에 눈에 띄게 서로 다른 반응을 부여하세요. 이 모드는 소리를 예술적으로 해석한 것임을 표시하세요.

**2. 파형 탐색기 — 신호 이해하기**

애니메이션 파형과 주파수 스펙트럼을 함께 표시하고, 선택 사항으로 공간적 표현을 제공하세요. 간단히 설명하세요. 파형은 신호가 시간에 따라 어떻게 변하는지 보여 주고, 스펙트럼은 주파수 성분을 보여 줍니다.

주파수 및 볼륨 컨트롤이 명확히 표시된 인터랙티브 톤 생성기를 포함하세요. 사용자가 순음과 더 풍부한 음색을 비교하고 차이를 볼 수 있게 하세요. 낮은 기본 볼륨, 부드러운 오디오 전환, 명확한 중지 컨트롤을 사용하세요. 시각적 진폭은 보정된 물리적 음량이 아니라 입력 신호 레벨을 나타낸다고 설명하세요.

**3. 공명 패턴 — 진동 탐색하기**

모래 같은 입자가 마디 패턴을 이루는 가상의 진동판을 보여 주세요. 사용자가 가진 주파수를 바꾸며 탐색할 수 있도록 여러 진동 모드를 신중하게 구현하세요.

정의된 형상과 경계 조건을 갖춘 문서화된 판 모델을 바탕으로 패턴을 만드세요. 입자는 진동이 최소인 영역 근처에 모인다고 설명하세요. 이 경험이 교육용 시뮬레이션임을 표시하고 단순화한 내용을 설명하세요. 장식 효과는 과학 모델과 시각적으로 뚜렷이 구분하세요.

### 발견을 쉽게 만들기

**“일정한 음으로 허밍해 보세요,” “한 번 박수 쳐 보세요,”** 및 **“낮은 음과 높은 음을 비교해 보세요.”**와 같은 짧고 맥락에 맞는 안내를 제공하세요. 각 안내에는 즉시 확인할 수 있는 반응을 연결하세요.

고급 컨트롤은 접어 두세요. 일시 정지, 재설정, 전체 화면, 감도, 움직임 강도 컨트롤을 제공하세요. 모드를 전환할 때 오디오 소스와 재생 상태를 명확하게 유지하세요. 장면을 가리지 않도록 각 모드에 짧고 접근 가능한 설명을 제공하세요.

### 오디오 및 개인정보 보호

재생과 분석에는 안정적인 평활화와 적절한 정규화를 적용한 **Web Audio API**를 사용하세요. 사용자가 선택한 후에만 마이크 접근 권한을 요청하세요. 마이크 입력과 업로드한 파일은 로컬에서 처리하고, 오디오를 업로드, 저장 또는 전송하지 마세요. 이 경험을 중학교 물리 수업 보조 자료로 바꾸세요. 파형 및 스펙트럼 모드에서 파장, 진폭, 주파수를 중국어 용어와 단위로 표시하고, 공명 모드에서는 짧은 다이어그램으로 정상파와 마디를 설명하세요. 각 모드는 최대 중국어 60자로 된 수업 소개로 시작하고, 페이지에서 바로 답할 수 있는 객관식 문제로 끝내세요. 정답을 맞히면 다음 진동 모드가 잠금 해제되게 하세요. 항상 표시되는 마이크 표시기와 마이크를 해제하는 명확한 **“마이크 중지”** 컨트롤을 제공하세요. 피드백을 방지하기 위해 스피커를 통한 마이크 모니터링을 비활성화하세요. 권한 거부, 사용 불가 장치, 지원하지 않는 파일, 무음, 오디오 중단을 적절히 처리하세요.

검증된 CC0 또는 적절한 라이선스의 내장 오디오를 사용하고, 에셋 라이선스 목록을 포함하세요.

### 시각 및 기술 품질

정교한 입자 렌더링, 설득력 있는 깊이감, 제어된 블룸, 부드러운 애니메이션, 절제된 카메라 움직임을 사용하세요. 텍스트는 선명하게, 컨트롤은 읽기 쉽게 유지하세요. 과도한 깜빡임과 시각적 노이즈를 피하세요.

GPU 효율적인 지오메트리와 셰이더, 재사용 가능한 버퍼, 제한된 픽셀 밀도, 적응형 입자 수, 품질 프리셋을 갖춘 유지 관리 가능한 Three.js 애플리케이션을 구축하세요. 동시 방문자가 서버 측 오디오 처리를 필요로 하지 않도록 오디오는 로컬에서 분석하세요. CDN 호환 호스팅을 통해 최적화된 정적 에셋을 제공하세요.

부드러운 데스크톱 성능과 중급 스마트폰에서 사용 가능한 성능을 목표로 하세요. 테스트한 기기에서 실제 프레임 속도, 메모리 사용량, 로딩 동작을 측정하세요. 페이지가 숨겨졌을 때 불필요한 렌더링을 멈추고 오디오 및 GPU 리소스를 올바르게 해제하세요.

터치, 키보드 탐색, 눈에 보이는 포커스 상태, 스크린 리더로 접근 가능한 컨트롤, 움직임 감소를 지원하세요. WebGL을 사용할 수 없을 때는 가벼운 2D 대체 기능을 제공하세요. 색상이나 오디오만으로도 필수 정보를 이해할 수 있게 하세요.

### 제공물

완성된 웹사이트를 작동하는 공개 **HTTPS URL**에 배포하세요.

실제 애플리케이션에서 렌더링한 동기화된 라이선스 오디오 포함 다운로드 가능한 **30~45초, 1920 × 1080 H.264 MP4**를 제작하세요. 순음이 파형이 되는 모습, 더 풍부한 소리가 조형물을 변화시키는 모습, 일련의 공명 패턴을 보여 주세요. 깔끔한 결과를 위해 결정론적 재생과 안정적인 프레임 캡처를 사용하세요.

소스 프로젝트, 로컬 에셋, 라이선스 목록, 문서화된 과학 모델과 시각화 매핑, 배포 안내, 간결한 검증 보고서를 제공하세요. 배포된 경험을 데스크톱 및 모바일 레이아웃, 마이크 권한 흐름, 오디오 재생, 업로드, 모드 전환, 접근성, 동영상 재생 전반에서 테스트하세요. 테스트 환경과 남은 제한 사항을 정확하게 보고하세요.

**포함하지 마세요:** 물리 시뮬레이션처럼 제시되는 장식 효과, 페이지 로드 시 마이크 권한 요청, 서버로의 오디오 업로드, 자동 재생 사운드, 스피커 피드백, 과도한 컨트롤, 빠른 깜빡임, 읽기 어려운 라벨, 자리 표시자 기능, 깨진 모바일 레이아웃, 워터마크 또는 프로덕션 준비가 되었다는 근거 없는 주장.