💡 30초 핵심 요약
셰익스피어, 에밀리 디킨슨, 로버트 프로스트 등 시대를 초월한 고전 영미 명시를 매일 한 편씩 감상하고 원어민 발음으로 낭독을 들을 수 있는 웹앱을 만들어 보세요! API 키 없이 무료로 제공되는 PoetryDB API를 활용해 '오늘의 시(Daily Poem) 감성 리더 & 낭독 웹앱'을 바이브 코딩으로 5분 만에 완성하는 실전 프롬프트와 가이드를 소개합니다.
📜 PoetryDB API란 무엇일까요?
PoetryDB는 전 세계 고전 시인들의 명시 수만 편을 개발자들이 손쉽게 활용할 수 있도록 정리한 세계 최초의 오픈소스 시(Poetry) 데이터베이스 API예요. 복잡한 가입 절차나 API 인증키(Key) 발급 없이 누구나 즉시 무료로 호출할 수 있습니다.
'랜덤 시 한 편 불러오기(/random)', '특정 시인 작품 모아보기(/author/Emily Dickinson)', '시 구절 수(Linecount)로 검색하기' 등 다채로운 엔드포인트를 제공하여 영어 문학 수업, 인문학 감성 힐링, 아침 조례 낭독 웹앱을 제작하기에 완벽한 데이터를 제공한답니다.
📊 오늘의 시 웹앱 핵심 기능 한눈에 보기
| 무엇이 바뀌었나요? / 영역 | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 실시간 명시 추천 & 시인별 탐색 | 버튼 클릭 한 번으로 무작위 고전 명시를 불러오거나 좋아하는 작가의 대표작을 검색합니다. | "오늘의 추천 시" 버튼을 눌러 매일 아침 새로운 문학적 영감을 얻어요. |
| 원어민 시 낭독 (Web Speech API) | 브라우저 내장 음성 합성 엔진으로 운율과 호흡을 살려 차분하게 시를 낭독해 줍니다. | 눈으로 읽고 귀로 들으며 영시 특유의 리듬감과 영어 발음을 함께 익혀요. |
| 감성 리더 테마 (종이·세리프·다크) | 고서 느낌의 양장본 양식, 부드러운 양피지 테마, 편안한 야간 다크 모드로 글꼴과 배경을 바꿉니다. | 집중하기 좋은 나만의 맞춤 독서 환경에서 시를 음미해요. |
| 감성 시 카드 이미지 다운로드 | 마음에 드는 구절을 선택해 인스타그램/모바일 카드 뉴스 형태의 고화질 이미지(PNG)로 저장합니다. | 아름다운 시 구절을 예쁜 카드 이미지로 만들어 소중한 사람에게 공유해요. |
| 나만의 시집 보관함 (LocalStorage) | 감동을 준 시를 북마크해 두고 언제든 오프라인에서도 다시 열어볼 수 있도록 저장합니다. | 차곡차곡 모인 나만의 디지털 애송시집을 완성해요. |
💡 초보자를 위한 바이브 코딩 실전 사용 예시
✨ [에러 제로 & 거꾸로 질문] 추천 바이브 코딩 프롬프트
너는 웹 프론트엔드 전문 개발자이자 문학적 감수성을 담아내는 감성 에디토리얼 디자이너야.
API 키가 필요 없는 무료 PoetryDB API를 연동하여 누구나 쉽게 영미 명시를 감상하고 원어민 낭독을 들을 수 있는 단일 파일 '오늘의 시 감성 리더 & 낭독 스튜디오(Daily Poem Lounge)' 웹앱을 만들어 줘.
[1. 에러 방지 기본 안전장치 (Zero-Error Baseline)]
1. Single-file Standalone HTML: HTML5, CSS3, Vanilla JS를 단 하나의 완성형 HTML 파일 내부에 작성하고, 코드 생략(// TODO) 없이 100% 온전하게 작동하는 코드를 출력해 줘.
2. 안전한 API 호출 및 배열 데이터 방어:
- 엔드포인트: 랜덤 호출 시 'https://poetrydb.org/random/1', 시인별 호출 시 'https://poetrydb.org/author/{author_name}'
- API가 반환하는 lines(시 행들의 배열) 데이터를 안전하게 합쳐(join('\n')) 렌더링하고, 빈 행이나 특수 기호가 있을 때도 레이아웃이 어긋나지 않도록 방어해 줘.
- 검색 결과가 없거나 네트워크 오류 시 감성적인 안내 문구와 추천 시인(Emily Dickinson, William Shakespeare, Edgar Allan Poe, John Keats 등) 바로가기 버튼을 제공해 줘.
3. Canvas 카드 렌더링 보안 & 고화질 다운로드:
- 외부 폰트/이미지 로딩 지연으로 인한 다운로드 오류가 없도록, HTML5 Canvas로 명시 카드(3:4 또는 1:1)를 직접 그려서 '이미지로 저장' 버튼 클릭 시 즉시 PNG 파일로 내려받을 수 있게 구현해 줘.
4. 브라우저 내장 Web Speech API:
- 시 낭독 재생(Play), 일시 정지(Pause), 정지(Stop) 컨트롤러를 제공하고, 낭독 중인 행(Line)을 시각적으로 은은하게 하이라이트해 주는 사용자 경험(UX)을 적용해 줘.
5. 반응형 에디토리얼 UI & 내장 SVG:
- 명조/세리프(Serif) 계열의 정갈한 서체를 적용하고, 모바일과 데스크톱 화면 모두에서 책을 읽는 듯한 편안한 여백과 SVG 아이콘을 사용해 줘.
[2. 핵심 기능 명세 (Core Logic)]
1. 상단 컨트롤 바:
- '🎲 오늘의 랜덤 명시': 원클릭으로 새로운 영미 명시 1편 로드.
- 시인별 퀵 필터 칩: 🌸 Emily Dickinson, 👑 Shakespeare, 🌙 Edgar Allan Poe, 🍂 John Keats.
- 시인/제목 직접 검색창.
2. 메인 시 감상 리더:
- 시 제목(Title), 시인 이름(Author), 행 수(Line Count), 시 본문(Lines)을 아름다운 에디토리얼 레이아웃으로 표시.
- 독서 테마 모드: 📜 양장본 양피지(Vintage Parchment), ☕ 따뜻한 라떼(Warm Latte), 🌙 야간 독서(Dark Velvet), ⚪ 미니멀 화이트(Clean White).
- 글자 크기 조절 슬라이더(A- / A+).
3. 낭독 및 공유 도구:
- 🔊 '원어민 낭독 듣기': 차분하고 서정적인 템포의 TTS 음성 재생.
- 🖼️ '감성 시 카드 저장': 제목과 대표 구절이 담긴 세로형 카드 뉴스 이미지(PNG) 자동 생성 및 다운로드.
- 📋 '시 전문 복사': 클립보드 복사 및 부드러운 토스트 알림.
- ⭐ '나만의 애송시 보관함': LocalStorage를 활용한 즐겨찾기 저장 및 목록 관리.
[3. 거꾸로 질문하기 (Reverse Prompting)]
- 코드를 바로 작성하지 말고, 먼저 아래의 3가지 질문을 나에게 던진 후 나의 답변을 확인하고 나서 최종 코드를 완성해 줘:
1. 웹앱의 주요 활용 대상(개인 감성 힐링용, 중·고교 영어 문학 수업용, 인스타그램 시 카드 제작용)과 선호하는 기본 테마는 무엇인가요?
2. 낭독 재생 시 전체 낭독 외에 특정 연(Stanza)이나 행만 선택해서 반복 청취하는 기능이 필요한가요?
3. 시 본문 옆에 간단한 영단어 메모장이나 나의 감상평(한 줄 일기)을 기록하여 로컬에 함께 저장하는 기능이 포함되기를 원하시나요?
📋 3단계 실천 가이드
- 1단계 (프롬프트 복사): 위의 추천 프롬프트를 복사하여 Google Gemini, Gemini Gems, 또는 Gemini Spark 대화창에 입력합니다.
- 2단계 (거꾸로 질문 답변): AI가 제시하는 3가지 맞춤 질문(사용 목적, 낭독 옵션, 감상 메모 기능 등)에 원하는 설정을 간단히 답변합니다.
- 3단계 (원클릭 실행): AI가 완성해 준 단일 HTML 코드를 복사하여
poem_lounge.html로 저장한 후 더블 클릭하거나 Google Sites/Blogger에 삽입하여 바로 활용합니다!
🎯 에디터 한줄평
"방대한 고전 영미 명시를 담은 PoetryDB와 제미나이의 거꾸로 프롬프트가 만나면, 텍스트를 넘어 낭독과 감성 카드까지 겸비한 멋진 디지털 시 라운지가 완성됩니다!"
