💡 30초 핵심 요약
매일 아침 마음을 채우는 따뜻한 말씀과 인문학적 지혜 구절을 직접 검색하고, 모바일 맞춤형 감성 카드 뉴스로 즉시 제작할 수 있는 웹앱을 만들어 보세요! API 키 없이 무료로 제공되는 Bible-api를 활용해 '성경 구절 검색 & 말씀 카드 생성기'를 바이브 코딩으로 5분 만에 완성하는 실전 프롬프트와 가이드를 공유합니다.
📖 Bible-api란 무엇일까요?
Bible-api는 성경 66권의 모든 장·절을 URL 호출 하나로 깔끔한 JSON 데이터 형태로 반환해 주는 오픈소스 성경 API 서비스예요. 회원가입이나 복잡한 API Key 발급 없이 누구나 즉시 무료로 사용할 수 있습니다.
특정 구절 검색(예: john 3:16, psalm 23, proverbs 3:5-6)뿐만 아니라 랜덤 구절 호출(?random=verse), 다양한 영문 번역본(WEB, KJV 등) 선택 기능을 지원하여, 묵상·영어 성경 학습·감성 말씀 카드 뉴스 제작용 웹앱을 개발하기에 최적화되어 있답니다.
📊 성경 구절 검색 & 카드 생성 웹앱 핵심 기능 한눈에 보기
| 무엇이 바뀌었나요? / 영역 | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 실시간 성경 구절 검색 & 랜덤 추천 | 책 이름과 장·절을 입력해 원하는 구절을 즉시 찾거나, '오늘의 추천 구절' 버튼으로 랜덤 묵상을 시작합니다. | 매일 아침 새로운 지혜 구절을 뽑아 하루를 시작하는 묵상 루틴으로 활용해요. |
| 감성 카드 뉴스 즉시 제작 (Canvas) | 검색된 구절을 따뜻한 그라데이션 배경과 감성 폰트가 적용된 모바일 카드(3:4 비율)로 즉시 변환합니다. | '이미지로 저장' 버튼을 눌러 메신저나 SNS에 공유할 고화질 카드 뉴스를 만들어요. |
| 영문 낭독 (Web Speech API) | 브라우저 자체 TTS 음성을 이용해 차분하고 정돈된 억양으로 영어 성경 본문을 들려줍니다. | 듣기 버튼을 눌러 말씀 묵상과 함께 자연스러운 영어 듣기 학습을 병행해요. |
| 주제별 퀵 태그 (위로·평안·지혜) | '지혜(잠언)', '위로(시편)', '사랑(고린도전서)' 등 상황별 추천 칩을 클릭해 맞춤 구절을 바로 조회합니다. | 마음의 안식이나 격려가 필요할 때 주제별 버튼 하나로 알맞은 구절을 찾아요. |
| 나만의 말씀 보관함 (LocalStorage) | 마음에 와닿는 구절을 즐겨찾기에 등록하고 언제든 다시 꺼내볼 수 있도록 브라우저에 안전하게 저장합니다. | 기억하고 싶은 구절들을 나만의 묵상 노트처럼 차곡차곡 모아 관리해요. |
💡 초보자를 위한 바이브 코딩 실전 사용 예시
✨ [에러 제로 & 거꾸로 질문] 추천 바이브 코딩 프롬프트
너는 웹 프론트엔드 전문 개발자이자 인문학적 감성을 담아내는 UX/UI 디자이너야.
API 키가 필요 없는 무료 Bible-api를 연동하여 누구나 쉽게 성경 구절을 검색하고 모바일 카드 뉴스로 내려받을 수 있는 단일 파일 '오늘의 성경 구절 & 감성 카드 생성기(Daily Scripture Card Studio)' 웹앱을 만들어 줘.
[1. 에러 방지 기본 안전장치 (Zero-Error Baseline)]
1. Single-file Standalone HTML: HTML5, CSS3, Vanilla JS를 단 하나의 완성형 HTML 파일 내부에 작성하고, 코드 생략(// TODO) 없이 완전하게 작동하는 코드를 출력해 줘.
2. 안전한 API 호출 및 URL 인코딩:
- 엔드포인트: 'https://bible-api.com/{query}' (예: 'https://bible-api.com/john+3:16' 또는 'https://bible-api.com/proverbs+3:5-6')
- 공백이나 특수문자가 포함된 책 이름(예: '1 John 1:9', 'Song of Solomon') 입력 시 'encodeURIComponent'를 적용해 400/404 오류를 방지해 줘.
- 검색 결과가 없거나 오타 발생 시 친절한 안내 메시지와 예시 검색어(예: 'Genesis 1:1', 'Psalm 23:1')를 제공해 줘.
3. Canvas 이미지 렌더링 보안 & 고화질 다운로드:
- 외부 이미지 URL 의존 없이 CSS 그라데이션 및 HTML5 Canvas 2D 그래픽으로 카드를 직접 렌더링하여 CORS 오류 없이 'PNG 다운로드'가 즉시 작동하도록 보장해 줘.
- 긴 성경 본문 텍스트가 카드 밖으로 벗어나지 않도록 Canvas 자동 줄바꿈(Word Wrap) 알고리즘을 완벽하게 구현해 줘.
4. 브라우저 내장 TTS: 외부 라이브러리 없이 Web Speech API(speechSynthesis)를 활용해 원어민 억양의 차분한 낭독 음성 재생 버튼을 제공해 줘.
5. 모바일 최적화 반응형 UI: 모바일과 태블릿, PC 화면 모두에서 정갈하고 가독성 높은 카드 뷰 레이아웃과 깨지지 않는 인라인 SVG 아이콘을 사용해 줘.
[2. 핵심 기능 명세 (Core Logic)]
1. 상단 검색 및 퀵 큐레이션 바:
- 구절 직접 검색창(예: 'Romans 12:2', 'Psalm 121').
- '🎲 오늘의 추천 구절': 버튼 클릭 시 잠언/시편/복음서 등의 대표 명구절 중 하나를 랜덤으로 호출.
- 주제별 퀵 버튼 칩: 🌿 평안(Psalm 23), 💡 지혜(Proverbs 3), ❤️ 사랑(1 Corinthians 13), 💪 용기(Joshua 1:9).
2. 성경 구절 본문 뷰어 & 감성 카드 미리보기:
- 장·절 참조(Reference), 본문 텍스트, 번역본 명칭(KJV/WEB)을 우아한 타이포그래피로 표시.
- 카드 테마 선택기: 따뜻한 선셋(Sunset Glow), 차분한 세이지 그린(Sage Green), 클래식 모던 네이비(Modern Navy), 미니멀 베이지(Warm Beige).
3. 원클릭 공유 & 편의 도구:
- 🖼️ '감성 카드 이미지(PNG) 다운로드': 3:4 세로형 모바일 최적화 카드 이미지 생성 및 즉시 저장.
- 📋 '본문 텍스트 복사': 클릭 시 클립보드 복사 및 부드러운 토스트 알림.
- 🔊 '말씀 낭독 듣기': 차분한 템포의 영어 낭독.
- ⭐ '즐겨찾기 보관함': LocalStorage에 저장하여 나만의 묵상 구절 모아보기.
[3. 거꾸로 질문하기 (Reverse Prompting)]
- 코드를 바로 작성하지 말고, 먼저 아래의 3가지 질문을 나에게 던진 후 나의 답변을 확인하고 나서 최종 코드를 완성해 줘:
1. 웹앱의 주요 활용 대상(개인 아침 묵상용, 교회/학급 나눔 카드 뉴스 제작용, 영어 성경 학습용)과 선호하는 카드 비율(3:4 모바일 세로형, 1:1 인스타그램 정사각형)은 무엇인가요?
2. 기본 WEB(World English Bible) 번역본 외에 KJV(King James Version) 등 번역본 선택 드롭다운이 필요한가요?
3. 카드 이미지 생성 시 사용자 맞춤 문구(예: '2026년 8월 31일 아침 묵상' 또는 짧은 메모)를 덧붙여 함께 저장하는 기능이 포함되기를 원하시나요?
📋 3단계 실천 가이드
- 1단계 (프롬프트 복사): 위의 추천 프롬프트를 복사하여 Google Gemini, Gemini Gems, 또는 Gemini Spark 대화창에 입력합니다.
- 2단계 (거꾸로 질문 답변): AI가 제시하는 3가지 맞춤 질문(카드 비율, 번역본 옵션, 맞춤 서명 추가 등)에 원하는 설정을 간단히 답변합니다.
- 3단계 (원클릭 실행): AI가 완성해 준 단일 HTML 코드를 복사하여
bible_card.html로 저장한 후 더블 클릭하거나 Google Sites/Blogger에 삽입하여 바로 활용합니다!
🎯 에디터 한줄평
"간결한 Bible-api와 제미나이의 거꾸로 프롬프트가 만나면, 텍스트 검색을 넘어 감성적인 말씀 카드 뉴스까지 뚝딱 만들어내는 멋진 창작 스튜디오가 완성됩니다!"
