나에게는 꿈이 있습니다 오디오 그림책
킹 목사의 1963년 연설을 흑백 사진 장면 16개, 바리톤 내레이션, 음성과 동기화되어 강조 표시되는 자막으로 구성한 가로형 오디오북으로 재구성했습니다.
Loading preview...
12969 views
이 프롬프트로 시작하기
킹의 1963년 연설 전문을 가로형 전체 화면 오디오북으로 재구성했습니다. 고대비 흑백 사진 장면 16개, 바리톤 내레이션 클립, 페이지가 자동으로 넘어갈 때 자막이 동기화되어 강조 표시되는 기능을 담았습니다.
Websites Agent 사용해 보기# 인터랙티브 HTML 제작 및 배포: 사실적인 흑백 사진 스타일 + 남성 음성 내레이션 "나에게는 꿈이 있습니다" 인터랙티브 오디오북(영문 페이지)
## 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! | 위로 날아오르는 새들, 손을 들어 올리는 군중 | HighSpeed 셔터, 멈춘 날갯짓 | "Free at last!" 세 번 반복, 우레 같은 박수 |
---
## 3. 통합 이미지 생성 프롬프트
사실적인 흑백 사진, 50 mm 렌즈, 고대비, 필름 그레인, 얕은 심도, [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. 제공물 자체 점검
[ ] page-01 ~ page-16 নামে 지정된 흑백 JPG 16개, 각 600 KB 이하
[ ] 01.mp3 ~ 16.mp3 নামে 지정된 MP3 16개, 각 400 KB 이하
[ ] 빈 화면 없이 웹페이지 가로 스와이프 가능, 오디오와 함께 자막 강조 표시
[ ] 모바일 가로 방향 전환 안내가 자동으로 표시됨다른 연설로 바꾸기
킹의 연설을 링컨의 게티즈버그 연설로 바꾸되, 16개 장면 오디오북 형식은 유지하고 1863년 연설문과 게티즈버그 배경에 맞춰 스토리보드를 새로 구성합니다.
Websites Agent에서 리믹스# 인터랙티브 HTML 제작 및 배포: 사실적인 "나에게는 꿈이 있습니다" 인터랙티브 오디오북 (영문 페이지) ## 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! | 위로 날아오르는 새들, 손을 들어 올리는 군중 | HighSpeed 셔터, 멈춘 날갯짓 | "Free at last!" 세 번 반복, 우레 같은 박수 | --- ## 3. 통합 이미지 생성 프롬프트 사실적인 흑백 사진, 50 mm 렌즈, 고대비, 필름 그레인, 얕은 심도, [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. 제공물 자체 점검 [ ] page-01 ~ page-16 নামে 지정된 흑백 JPG 16개, 각 600 KB 이하 [ ] 01.mp3 ~ 16.mp3 নামে 지정된 MP3 16개, 각 400 KB 이하 [ ] 빈 화면 없이 웹페이지 가로 스와이프 가능, 오디오와 함께 자막 강조 표시 [ ] 모바일 가로 방향 전환 안내가 자동으로 표시됨
컬러 필름으로 렌더링하세요
16개의 흑백 사진 장면을 따뜻한 1960년대 컬러 필름 분위기로 바꾸되, 강한 그레인과 결정적 순간의 프레이밍은 유지합니다.
Websites Agent에서 리믹스# 인터랙티브 HTML 제작 및 배포: 사실적인 흑백 사진 스타일 + 남성 내레이션의 "I Have a Dream" 인터랙티브 오디오북(영문 페이지) ## 1. 전체 목표 마틴 루서 킹 주니어의 1963년 8월 28일 연설 전문("I Have a Dream" 텍스트)을 가로형 전체 화면 오디오북으로 구현합니다. 1. 초현실적인 흑백 사진 일러스트(1920×1080, 높은 대비, 필름 그레인, 50 mm 단렌즈 시점) 2. 오디오 내레이션 클립 16개(독창적인 남성 바리톤, 클립당 15~25초, 44.1 kHz, MP3, 강당 리버브) 3. 영문 웹페이지: 가로 스크롤, 자동/수동 페이지 넘김, 자막 동기화 하이라이트, PC 및 모바일 반응형 4. 원클릭 배포 패키지(index.html / assets / README.md) --- ## 2. 전체 텍스트 스토리보드 및 타임라인(총 16페이지) | 페이지 | 시작 문장(원문 영어) | 시각 이벤트 | 구도 및 조명 | 주요 사운드 | |---|---|---|---|---| | 1 | 오늘 여러분과 함께하게 되어 기쁩니다... | 링컨 기념관 원경, 모여드는 군중, 역광 실루엣 | 로우 앵글, 하늘의 하이라이트, 실루엣으로 표현한 인물 | "오늘 여러분과 함께하게 되어 기쁩니다..."로 시작, 강당 에코 | | 2 | ...역사상 가장 위대한 시위로 기록될 것입니다... | 빽빽한 군중의 상공 दृश्य, "우리는 동등한 권리를 요구한다" 현수막 | 항공 흑백, 높은 대비 | 지속적으로 고조되는 분위기, 멀리서 들리는 박수 | | 3 | 그러나 100년이 지난 지금도... | 노예 해방 선언 기념물 클로즈업, 녹슨 사슬이 감겨 있음 | 중간 초점거리, 기념물을 부각하는 어두운 배경 | 느린 연설 속도, "100년이 지난 지금도" 강조 | | 4 | 흑인은 외로운 섬에서 살고 있습니다... | 폐허에 앉아 먼 도시를 바라보는 고립된 흑인 남성 | 광각, 짙은 검은 전경, 빛을 받은 먼 고층 빌딩 | 고독한 주변 소음 | | 5 | ...분리 정책의 수갑... | 수갑에 채워진 손 클로즈업, 일부 끊어진 사슬 | 매크로, 손에 강한 조명, 사슬 고리를 강하게 강조 | 수갑 부딪히는 소리 + 남성의 낮은 목소리 | | 6 | ...차별의 사슬입니다. | 문 앞에서 거절당한 흑인 청년, "백인 전용" 표지판 | 문틈 시점, 과다 노출된 표지판 | 문이 "쾅" 닫히는 소리 | | 7 | 우리는 이 수표를 현금으로 바꾸러 왔습니다... | 은행 창구에서 백지 수표를 건네는 흑인 | 대칭 구도, 창구 조명이 비춤 | 종이가 미끄러지는 소리 | | 8 | 국가에 치명적인 일이 될 것입니다... | 공중에 멈춘 판사의 망치, 배경에는 흐릿한 군중 | 로우 앵글, 망치 실루엣 | 늦게 울려 퍼지는 망치 소리의 메아리 | | 9 | 우리는 혼자 걸을 수 없습니다. | 서로 포개진 흑인과 백인의 손, 서로 다른 피부색 | 소프트박스 탑라이트, 선명한 손 질감 | 저주파 심장 박동 | |10| 우리는 되돌아갈 수 없습니다. | 역광 속 행진 군중, 앞쪽의 빛의 통로 | 역광, 인물 가장자리의 헤일로 | 일치된 발걸음, 저주파 북소리 | |11| 오늘 나는 꿈을 꿉니다! (1회) | 빛을 올려다보는 아이, 눈동자에 비친 빛 | 눈 클로즈업, 바늘처럼 가는 하이라이트 | "나는 꿈을 꿉니다!" 첫 외침과 메아리 | |12| 언젠가 나는 꿈을 꿉니다... | 나란히 달리는 백인과 흑인 청소년 | 역동적인 트래킹 샷, 필름 그레인 | 숨소리 + 바람 | |13| ...옛 노예의 아들들이... 함께 앉는... | 대학교 벤치에서 함께 책을 읽는 두 학생 | 수평 대칭, 흐릿한 배경 | 책장 넘기는 소리 | |14| 오늘 나는 꿈을 꿉니다! (2회) | 입을 벌린 연설자의 옆모습, 빛무늬 배경 | 35 mm 렌즈, 역광 속 떠다니는 먼지 입자 | 두 번째 외침, 군중의 일제히 화답 | |15| 자유가 울려 퍼지게 하라... | 선명한 균열이 보이는 자유의 종 클로즈업 | 탑라이트, 밝게 빛나는 종 몸체, 검은 배경 | 길게 이어지는 종소리 | |16| 마침내 자유입니다! 마침내 자유입니다! | 위로 날아오르는 새들, 손을 들어 올린 군중 | 고속 셔터, 멈춘 날갯짓 | "마침내 자유입니다!" 세 번, 우레 같은 박수 | --- ## 3. 통합 이미지 생성 프롬프트 초현실적인 흑백 사진, 50 mm 렌즈, 높은 대비, 필름 그레인, 얕은 심도, [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. 납품 자체 점검 [ ] 16 흑백 JPG 16개, 파일명 page-01 ~ page-16, 각 ≤ 600 KB [ ] MP3 16개, 파일명 01.mp3 ~ 16.mp3, 각 ≤ 400 KB [ ] 빈 화면 없이 웹페이지 가로 스와이프, 오디오에 맞춘 자막 하이라이트 [ ] 모바일 가로 방향 전환 안내 자동 표시
세로형 모바일용으로 다시 만들기
가로 스트립을 세로형 스크롤로 재구성하여, 똑바로 든 휴대폰에서 16개 장면의 오디오북이 자연스럽게 재생되도록 합니다.
Websites Agent에서 리믹스# 인터랙티브 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 | 오늘 여러분과 함께하게 되어 기쁩니다... | 링컨 기념관 원경, 모여드는 군중, 역광 실루엣 | 로우 앵글, 하늘의 하이라이트, 실루엣으로 표현한 인물 | "오늘 여러분과 함께하게 되어 기쁩니다..."로 시작, 강당 에코 | | 2 | ...역사상 가장 위대한 시위로 기록될 것입니다... | 빽빽한 군중의 상공 दृश्य, "우리는 동등한 권리를 요구한다" 현수막 | 항공 흑백, 높은 대비 | 지속적으로 고조되는 분위기, 멀리서 들리는 박수 | | 3 | 그러나 100년이 지난 지금도... | 노예 해방 선언 기념물 클로즈업, 녹슨 사슬이 감겨 있음 | 중간 초점거리, 기념물을 부각하는 어두운 배경 | 느린 연설 속도, "100년이 지난 지금도" 강조 | | 4 | 흑인은 외로운 섬에서 살고 있습니다... | 폐허에 앉아 먼 도시를 바라보는 고립된 흑인 남성 | 광각, 짙은 검은 전경, 빛을 받은 먼 고층 빌딩 | 고독한 주변 소음 | | 5 | ...분리 정책의 수갑... | 수갑에 채워진 손 클로즈업, 일부 끊어진 사슬 | 매크로, 손에 강한 조명, 사슬 고리를 강하게 강조 | 수갑 부딪히는 소리 + 남성의 낮은 목소리 | | 6 | ...차별의 사슬입니다. | 문 앞에서 거절당한 흑인 청년, "백인 전용" 표지판 | 문틈 시점, 과다 노출된 표지판 | 문이 "쾅" 닫히는 소리 | | 7 | 우리는 이 수표를 현금으로 바꾸러 왔습니다... | 은행 창구에서 백지 수표를 건네는 흑인 | 대칭 구도, 창구 조명이 비춤 | 종이가 미끄러지는 소리 | | 8 | 국가에 치명적인 일이 될 것입니다... | 공중에 멈춘 판사의 망치, 배경에는 흐릿한 군중 | 로우 앵글, 망치 실루엣 | 늦게 울려 퍼지는 망치 소리의 메아리 | | 9 | 우리는 혼자 걸을 수 없습니다. | 서로 포개진 흑인과 백인의 손, 서로 다른 피부색 | 소프트박스 탑라이트, 선명한 손 질감 | 저주파 심장 박동 | |10| 우리는 되돌아갈 수 없습니다. | 역광 속 행진 군중, 앞쪽의 빛의 통로 | 역광, 인물 가장자리의 헤일로 | 일치된 발걸음, 저주파 북소리 | |11| 오늘 나는 꿈을 꿉니다! (1회) | 빛을 올려다보는 아이, 눈동자에 비친 빛 | 눈 클로즈업, 바늘처럼 가는 하이라이트 | "나는 꿈을 꿉니다!" 첫 외침과 메아리 | |12| 언젠가 나는 꿈을 꿉니다... | 나란히 달리는 백인과 흑인 청소년 | 역동적인 트래킹 샷, 필름 그레인 | 숨소리 + 바람 | |13| ...옛 노예의 아들들이... 함께 앉는... | 대학교 벤치에서 함께 책을 읽는 두 학생 | 수평 대칭, 흐릿한 배경 | 책장 넘기는 소리 | |14| 오늘 나는 꿈을 꿉니다! (2회) | 입을 벌린 연설자의 옆모습, 빛무늬 배경 | 35 mm 렌즈, 역광 속 떠다니는 먼지 입자 | 두 번째 외침, 군중의 일제히 화답 | |15| 자유가 울려 퍼지게 하라... | 선명한 균열이 보이는 자유의 종 클로즈업 | 탑라이트, 밝게 빛나는 종 몸체, 검은 배경 | 길게 이어지는 종소리 | |16| 마침내 자유입니다! 마침내 자유입니다! | 위로 날아오르는 새들, 손을 들어 올린 군중 | 고속 셔터, 멈춘 날갯짓 | "마침내 자유입니다!" 세 번, 우레 같은 박수 | --- ## 3. 통합 이미지 생성 프롬프트 초현실적인 흑백 사진, 50 mm 렌즈, 높은 대비, 필름 그레인, 얕은 심도, [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, 각 600KB 이하 [ ] MP3 16개, 파일명 01.mp3 ~ 16.mp3, 각 400KB 이하 [ ] 빈 화면 없이 웹페이지 가로로 넘기기, 오디오에 맞춘 자막 하이라이트 [ ] 모바일 가로 방향 전환 안내 자동 표시
다음도 마음에 드실 수 있습니다