I Have a Dream 오디오 그림책

# 인터랙티브 HTML 제작 및 배포: 사실적인 흑백 사진 스타일 + 남성 음성 내레이션 "I Have a Dream" 인터랙티브 오디오북 (영문 페이지)  


## 1. 전체 목표  
마틴 루터 킹 주니어의 1963년 8월 28일 연설 전문("I Have a Dream" 텍스트)을 가로형 전체 화면 오디오북으로 제작합니다.  
1. 초사실적인 흑백 사진 일러스트 16개(1920×1080, 고대비, 필름 그레인, 50 mm 단렌즈 시점)  
2. 오디오 내레이션 클립 16개(독창적인 남성 바리톤, 클립당 15~25초, 44.1 kHz, MP3, 강당 잔향)  
3. 영문 웹페이지: 가로 스크롤, 자동/수동 페이지 넘김, 자막 동기화 강조 표시, PC 및 모바일 반응형  
4. 원클릭 배포 패키지(index.html / assets / README.md)  

---

## 2. 전체 텍스트 스토리보드 및 타임라인(총 16페이지)  
| 페이지 | 시작 문장(영문 원문) | 시각적 장면 | 구도 및 조명 | 주요 사운드 |
|---|---|---|---|---|
| 1 | I am happy to join with you today... | 멀리서 바라본 링컨 기념관, 모여드는 군중, 역광 실루엣 | 로우 앵글, 하늘 하이라이트, 인물 실루엣 | "I am happy to join with you..."로 시작, 강당 울림 |
| 2 | ...will go down as the greatest demonstration... | 빽빽한 군중을 내려다본 모습, "We Demand Equal Rights" 배너 | 항공 흑백 사진, 고대비 | 계속 고조되는 분위기, 배경의 먼 박수 소리 |
| 3 | But one hundred years later... | 노예 해방 선언 기념비 클로즈업, 녹슨 사슬이 감겨 있음 | 중간 초점거리, 기념비를 부각하는 어두운 배경 | 느려진 연설 속도, "one hundred years later" 강조 |
| 4 | the Negro lives on a lonely island... | 폐허에 앉아 먼 도시를 바라보는 고립된 흑인 남성 | 광각, 짙은 검은 전경, 빛을 받은 먼 고층 빌딩 | 고독한 주변 소리 |
| 5 | ...the manacles of segregation... | 수갑 찬 손의 클로즈업, 일부 끊어진 사슬 | 매크로, 손에 강한 빛, 두드러지게 강조된 사슬 고리 | 수갑 부딪히는 소리 + 남성 목소리의 낮은 읊조림 |
| 6 | ...chains of discrimination. | 문 앞에서 거부당하는 흑인 청년, "WHITES ONLY" 표지판 | 문틈 시점, 과다 노출된 표지판 | 문이 "쾅" 닫히는 소리 |
| 7 | We have come to cash this check... | 은행 창구에서 백지 수표를 건네는 흑인 | 대칭 구도, 창구 조명이 비춤 | 종이 미끄러지는 소리 |
| 8 | It would be fatal for the nation... | 공중에 멈춘 판사의 망치, 배경에는 흐릿한 군중 | 로우 앵글, 망치 실루엣 | 지연되어 울리는 망치 소리 |
| 9 | We cannot walk alone. | 서로 겹친 흑인과 백인의 손, 다양한 피부색 | 소프트박스 상단 조명, 선명한 손 질감 | 낮은 주파수의 심장 박동 |
|10| We cannot turn back. | 역광 속 행진 군중, 앞쪽의 빛의 통로 | 역광, 인물 가장자리의 후광 | 동기화된 발걸음, 저주파 북소리 |
|11| I have a dream today! (1st) | 빛을 올려다보는 아이, 눈에 비친 반사광 | 눈 클로즈업, 바늘처럼 날카로운 하이라이트 | 메아리와 함께 처음 외치는 "I have a dream!" |
|12| I have a dream that one day... | 어깨를 나란히 하고 달리는 백인과 흑인 청소년 | 역동적인 트래킹 샷, 필름 그레인 | 숨소리 + 바람 |
|13| ...sons of former slaves... sit together... | 대학 벤치에서 함께 책을 읽는 두 학생 | 가로 대칭, 흐릿한 배경 | 책장 넘기는 소리 |
|14| I have a dream today! (2nd) | 입을 벌린 연사의 옆모습, 빛점 배경 | 35 mm 렌즈, 역광에 떠다니는 먼지 입자 | 두 번째 외침, 군중이 일제히 화답 |
|15| Let freedom ring... | 선명한 균열이 보이는 자유의 종 클로즈업 | 상단 조명, 밝게 비친 종 몸체, 검은 배경 | 길게 울리는 종소리 |
|16| Free at last! Free at last! | 위로 날아오르는 새들, 손을 들어 올린 군중 | 고속 셔터, 멈춰 있는 날갯짓 | "Free at last!" 세 차례, 우레 같은 박수 |

---

## 3. 통합 이미지 생성 프롬프트  
초사실적인 흑백 사진, 50 mm 렌즈, 고대비, 필름 그레인, 얕은 DOF, [Page-X Scene], 1960년대 시민권 집회, 링컨 기념관 배경, 결정적 순간, --ar 16:9 --v 5 --q 2  

`Page-X Scene`을 각 페이지에 해당하는 장면으로 바꾸고, 그레인과 대비 수준은 일관되게 유지합니다.  

---

## 4. 통합 오디오 생성 프롬프트  
남성 바리톤, MLK 스타일 전달, 느린 운율, 국회의사당 홀 잔향, 44.1 kHz, 128 kbps MP3, 15~25초, [Starting Sentence] "I have a dream" 강조, -3 dB 피크  

각 클립은 해당 페이지의 시작 문장을 내레이션 내용으로 사용하며, 끝부분에 1초간 박수 소리가 페이드아웃됩니다.  

---

## 5. 웹 기술 스택 및 디렉터리  
dream-web/  
├─ index.html  
├─ css/dream.css  
├─ js/dream.js  
├─ assets/  
│  ├─ img/  page-01.jpg ~ page-16.jpg  
│  └─ audio/ 01.mp3 ~ 16.mp3  
└─ README.md  

- 의존성 없음, 바닐라 JS  
- 가로 스크롤 스트립, 페이지당 100 vw/vh  
- 오디오와 동기화된 자막 강조 표시  
- 컨트롤: 재생 / 일시 정지 / 다음 / 이전 / 음소거  

---

## 6. 핵심 코드(필수)  
```html
<!-- index.html snip -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>I Have a Dream – Audio Picture Book</title>
<link href="https://fonts.googleapis.com/css2?family=Crimson+Text:ital ,wght@0,400;1,600&display=swap" rel="stylesheet">
<body>
<div class="viewport">
  <div class="strip" id="strip"><!-- 16 pages --></div>
</div>
<div class="controls">
  <button id="play">▶</button>
  <button id="mute">🔊</button>
  <div class="progress"><div id="bar"></div></div>
</div>
<audio id="voice"></audio>
<script src="js/dream.js"></script>
</body>
```
JavaScript  

```javascript
// dream.js core
const PAGES=[/* 16 entries of {img, audio, text} */];
let idx=0, voice=document.getElementById('voice');
function loadPage(n){
  strip.style.transform=`translateX(-${n*100}vw)`;
  voice.src=PAGES[n].audio; voice.play();
}
voice.addEventListener('ended',()=>{idx++; loadPage(idx);});
document.getElementById('play').onclick=()=>voice.paused?voice.play():voice.pause();
```

## 7. 원클릭 배포  

README에는 링크와 오디오 효과 토글 안내를 포함합니다.  

## 8. 결과물 자체 점검  
[ ] 흑백 JPG 16개, 파일명 page-01 ~ page-16, 각 600 KB 이하  
[ ] MP3 16개, 파일명 01.mp3 ~ 16.mp3, 각 400 KB 이하  
[ ] 빈 화면 없이 웹페이지 가로 스와이프 가능, 오디오와 함께 자막 강조 표시  
[ ] 모바일 가로 방향 안내가 자동으로 표시됨

# 인터랙티브 HTML 제작 및 배포: 사실적인 흑백 사진 스타일 + 남성 내레이션 "I Have a Dream" 인터랙티브 오디오북(영문 페이지)  


## 1. 전체 목표  
1963년 8월 28일 마틴 루서 킹 주니어의 연설 전문("I Have a Dream" 텍스트)을 가로형 전체 화면 오디오북:  
1. 초현실적인 흑백 사진 일러스트 16장(1920×1080, 높은 대비, 필름 그레인, 50 mm 단렌즈 시점)  
2. 오디오 내레이션 클립 16개(독창적인 남성 바리톤, 클립당 15~25초, 44.1 kHz, MP3, 강당 리버브)  
3. 영문 웹페이지: 가로 스크롤, 자동/수동 페이지 전환, 자막 동기화 하이라이트, PC 및 모바일 반응형  
4. 원클릭 배포 패키지(index.html / assets / README.md)  

---

## 2. 전체 텍스트 스토리보드 및 타임라인(총 16페이지)  
| 페이지 | 시작 문장(영문 원문) | 시각적 장면 | 구도 및 조명 | 주요 사운드 |
|---|---|---|---|---|
| 1 | I am happy to join with you today... | 멀리 보이는 링컨 기념관, 모여드는 군중, 역광 실루엣 | 로우 앵글, 하늘 하이라이트, 인물 실루엣 | "I am happy to join with you..." 도입부, 강당 메아리 |
| 2 | ...will go down as the greatest demonstration... | 빽빽한 군중의 항공 뷰, "We Demand Equal Rights" 배너 | 항공 흑백, 높은 대비 | 고조되는 분위기 지속, 배경의 먼 박수 소리 |
| 3 | But one hundred years later... | 노예해방선언 기념비 클로즈업, 녹슨 사슬이 감긴 모습 | 중간 초점거리, 기념비를 부각하는 어두운 배경 | 느린 말 속도, "one hundred years later" 강조 |
| 4 | the Negro lives on a lonely island... | 폐허에 홀로 앉아 먼 도시를 바라보는 흑인 남성 | 광각, 짙은 검정 전경, 조명 받은 먼 고층 건물 | 고독한 주변 소리 |
| 5 | ...the manacles of segregation... | 수갑 찬 손 클로즈업, 일부 끊어진 사슬 | 매크로, 손에 강한 빛, 사슬 고리가 선명하게 부각됨 | 수갑 부딪히는 소리 + 남성의 낮은 목소리 |
| 6 | ...chains of discrimination. | 문 앞에서 거절당하는 흑인 청년, "WHITES ONLY" 표지판 | 문틈 시점, 과다 노출된 표지판 | 문이 쾅 닫히는 소리 |
| 7 | We have come to cash this check... | 은행 창구에서 백지 수표를 건네는 흑인 | 대칭 구도, 창구 조명이 비춤 | 종이 미끄러지는 소리 |
| 8 | It would be fatal for the nation... | 공중에 멈춘 판사의 망치, 배경에는 흐릿한 군중 | 로우 앵글, 망치 실루엣 | 망치 소리의 지연된 메아리 |
| 9 | We cannot walk alone. | 서로 포개진 흑인과 백인의 손, 서로 다른 피부색 | 소프트박스 상단 조명, 선명한 손 질감 | 낮은 주파수의 심장 박동 |
|10| We cannot turn back. | 역광의 행진 군중, 앞에 있는 빛의 통로 | 역광, 인물 윤곽의 후광 | 동기화된 발걸음, 저주파 북소리 |
|11| I have a dream today! (1st) | 빛을 올려다보는 아이, 눈동자에 비친 빛 | 눈 클로즈업, 바늘처럼 가는 하이라이트 | 메아리와 함께하는 첫 "I have a dream!" 외침 |
|12| I have a dream that one day... | 나란히 달리는 백인과 흑인 청소년 | 역동적인 트래킹 숏, 필름 그레인 | 숨소리 + 바람 |
|13| ...sons of former slaves... sit together... | 함께 책을 읽는 두 학생이 앉은 대학 벤치 | 수평 대칭, 흐릿한 배경 | 책장 넘기는 소리 |
|14| I have a dream today! (2nd) | 입을 벌린 연사의 옆모습, 빛 반점 배경 | 35 mm 렌즈, 역광 속에 떠다니는 먼지 입자 | 두 번째 외침, 군중의 일제 응답 |
|15| Let freedom ring... | 균열이 선명한 자유의 종 클로즈업 | 상단 조명, 밝게 비친 종 몸체, 검은 배경 | 길게 울리는 종소리 |
|16| Free at last! Free at last! | 위로 날아오르는 새들, 손을 들어 올리는 군중 | 고속 셔터, 멈춰 선 날갯짓 | "Free at last!" 세 번 반복, 우레 같은 박수 |

---

## 3. 통합 이미지 생성 프롬프트  
초현실적인 흑백 사진, 50 mm 렌즈, 높은 대비, 필름 그레인, 얕은 심도, [Page-X Scene], 1960년대 시민권 집회, 링컨 기념관 배경, 결정적 순간, --ar 16:9 --v 5 --q 2  

`Page-X Scene`을 각 페이지의 해당 장면으로 바꾸고, 그레인과 대비 수준을 일관되게 유지합니다.  

---

## 4. 통합 오디오 생성 프롬프트  
남성 바리톤, MLK 스타일의 전달, 느린 운율, Capitol Hall 리버브, 44.1 kHz, 128 kbps MP3, 15~25초, [Starting Sentence], "I have a dream" 강조, -3 dB 피크  

각 클립은 페이지의 시작 문장을 내레이션 내용으로 사용하며, 끝부분에 1초간 박수 소리가 페이드아웃됩니다.  

---

## 5. 웹 기술 스택 및 디렉터리  
dream-web/  
├─ index.html  
├─ css/dream.css  
├─ js/dream.js  
├─ assets/  
│  ├─ img/  page-01.jpg ~ page-16.jpg  
│  └─ audio/ 01.mp3 ~ 16.mp3  
└─ README.md  

- 종속성 없음, 바닐라 JS  
- 가로 스크롤 스트립, 페이지당 100 vw/vh  
- 오디오와 동기화된 자막 하이라이트  
- 컨트롤: 재생 / 일시 정지 / 다음 / 이전 / 음소거  

---

## 6. 주요 코드(필수)  
```html
<!-- index.html snip -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>I Have a Dream – Audio Picture Book</title>
<link href="https://fonts.googleapis.com/css2?family=Crimson+Text:ital ,wght@0,400;1,600&display=swap" rel="stylesheet">
<body>
<div class="viewport">
  <div class="strip" id="strip"><!-- 16 pages --></div>
</div>
<div class="controls">
  <button id="play">▶</button>
  <button id="mute">🔊</button>
  <div class="progress"><div id="bar"></div></div>
</div>
<audio id="voice"></audio>
<script src="js/dream.js"></script>
</body>
```
JavaScript  

```javascript
// dream.js core
const PAGES=[/* 16 entries of {img, audio, text} */];
let idx=0, voice=document.getElementById('voice');
function loadPage(n){
  strip.style.transform=`translateX(-${n*100}vw)`;
  voice.src=PAGES[n].audio; voice.play();
}
voice.addEventListener('ended',()=>{idx++; loadPage(idx);});
document.getElementById('play').onclick=()=>voice.paused?voice.play():voice.pause();
```

## 7. 원클릭 배포  

README에 링크와 오디오 효과 전환 방법을 안내합니다.  

## 8. 배포 전 자체 점검  
[ ] 흑백 JPG 16개, 파일명 page-01 ~ page-16, 각 600 KB 이하  
[ ] MP3 16개, 파일명 01.mp3 ~ 16.mp3, 각 400 KB 이하  
[ ] 빈 화면 없이 웹페이지 가로로 스와이프, 오디오에 맞춰 자막 하이라이트  
[ ] 모바일 가로 방향 전환 안내 자동 표시