도키피디아 v1.2
API키 대백과
키 하나 붙이면 웹앱이 이렇게 달라진다
프롬프트만으로 만든 웹앱은 "그럴듯한 껍데기"에서 멈추기 쉽습니다. 진짜 데이터·AI·지도·알림을 연결하는 열쇠가 API 키입니다. 아래 .env 파일의 항목을 누르면 해당 분류로 이동합니다.
# 클릭하면 해당 분류로 이동합니다 KMA_SERVICE_KEY="공공데이터 · 기상청 / 나이스 / 에어코리아 / 천문연" ANTHROPIC_API_KEY="생성형 AI · 클로드 / GPT / 제미나이" KAKAO_MAP_KEY="지도·위치 · 카카오맵 / 구글맵" SOLAPI_API_KEY="소통·알림 · 문자 / 웹훅 / 메일" YOUTUBE_API_KEY="미디어·콘텐츠 · 유튜브 / 언스플래시 / 번역" FIREBASE_CONFIG="데이터 저장·로그인 · 파이어베이스 / 수파베이스 / 구글시트" TOSS_CLIENT_KEY="결제·생활 유틸 · 토스페이먼츠 / 도서 / 공휴일" KEY_SAFETY_RULES="⚠️ 키 관리 수칙 · 유출되기 전에 꼭 읽기"
🔐 API 키 관리 수칙
READ FIRSTAPI 키는 집 열쇠이자 신용카드입니다. 유출되면 남이 내 이름·내 요금으로 API를 쓰게 됩니다. 특히 종량제 키(GPT·클로드 등)는 하룻밤 사이 수십만 원 과금 사례가 실제로 있습니다. 붙이기 전에 아래만은 지켜주세요.
이렇게 하세요
- 키는 .env 파일에 두고 코드에서는 변수로만 불러오기
- .env를 .gitignore에 등록하고 나서 깃허브에 올리기 — 순서가 반대면 이미 늦습니다
- 공유용으로는 값 없는 .env.example(키 이름만) 만들기
- 발급 콘솔에서 도메인·IP 제한 걸기 (카카오·구글맵은 필수 설정)
- 사용량 한도·알림 설정하기 — 종량제 키의 안전벨트
- 프로젝트 끝난 키는 비활성화·삭제하기
절대 하지 마세요
- 코드 안에 키를 그대로 붙여넣기(하드코딩)
- 비밀 키(sk-…, 시크릿)를 프론트엔드에 노출 — 브라우저 개발자도구로 누구나 볼 수 있습니다
- 키가 든 코드를 공개 깃허브·블로그·단톡방에 공유 — 봇이 몇 분 만에 수집해 갑니다
- AI 채팅창에 실제 키를 붙여넣고 질문하기 — 예시 키(sk-xxxx)로 바꿔서 물어보세요
- 하나의 키를 여러 프로젝트에 돌려쓰기 — 유출 시 전부 뚫립니다
💡 키에도 등급이 있습니다 — 어디까지 노출해도 되나
💸 사용량만큼 과금 쓴 만큼 매달 청구됩니다. 한도 설정 없이 방치하면 위험해요.
⚠️ 무료 한도 초과 시 과금 개인 프로젝트 수준이면 대개 무료 범위 안이지만, 공개 배포하면 넘길 수 있습니다.
표시가 없는 API는 완전 무료이거나 호출 한도를 넘으면 그냥 차단됩니다.
🏛 공공데이터
PUBLIC DATA · 무료 · 발급 즉시~1일공공데이터포털(data.go.kr)에서 회원가입 후 "활용신청"만 하면 대부분 무료로 키를 받습니다. 실제 대한민국 데이터가 들어오는 순간, 웹앱이 장난감에서 도구가 됩니다.
기상청 단기예보 API
01메인 화면 날씨 위젯
접속한 순간 오늘 기온·강수확률을 보여주는 카드. 학교·행사 홈페이지의 단골 배치.
02우천 시 자동 안내 배너
강수확률이 기준(예: 60%)을 넘으면 페이지 최상단에 "우천 시 강당 진행" 배너를 자동 표시.
03날짜 추천 대시보드
여러 날짜의 예보를 한 번에 불러와 야외 행사에 가장 좋은 날을 점수로 비교해 주는 화면.
| 날짜 | 날씨 | 추천 |
|---|---|---|
| 5/12(화) | ☀️ 24° | 🟢 최적 |
| 5/13(수) | 🌧 70% | 🔴 회피 |
| 5/14(목) | ⛅ 22° | 🟡 보통 |
나이스 교육정보 개방 포털
01오늘의 급식 위젯
날짜만 넘기면 오늘 식단이 리스트로 도착. 학급 홈페이지에서 가장 사랑받는 기능.
배추김치 · 사과
02학사일정 캘린더
개교기념일·방학·시험 기간을 달력 위에 자동 표시. 직접 입력할 필요가 없어집니다.
03우리 반 시간표 조회기
학년·반을 선택하면 오늘 시간표를 보여주는 조회 화면. 조회 폼 + 결과 표 조합.
에어코리아 대기오염정보 API
01미세먼지 신호등
PM10·PM2.5 수치를 좋음/보통/나쁨 색 신호로 변환. 숫자보다 직관적인 상태 표시.
02야외활동 판단 배지
날씨 API와 조합해 "오늘 운동장 수업 가능 여부"를 O/X 배지 하나로 요약해 주는 기능.
한국천문연구원 출몰·월령 API
01관측 조건 안내판
천체관측 행사 페이지에 "오늘 일몰 19:42 · 관측 시작 20:30"을 자동 계산해 표시.
02오늘 밤 달 모양 위젯
월령 값으로 달 그림을 바꿔 그려주는 위젯. 보름달 D-day 카운트도 함께.
🤖 생성형 AI
GENERATIVE AI · 종량제 · 무료 티어 있음키 하나로 웹앱에 "생각하는 기능"이 생깁니다. 핵심은 프롬프트를 코드 안에 미리 심어두고 사용자 입력만 끼워 넣는 것 — 같은 키로도 챗봇, 요약기, 채점기가 전부 만들어집니다. ⚠️ 키를 프론트엔드 코드에 그대로 노출하면 도용될 수 있어 서버(프록시)를 거치는 게 안전합니다.
요금 스냅샷 2026-08-23 기준
100만 토큰당 단가입니다. 입력은 내가 보낸 글, 출력은 모델이 쓴 글. 한글은 대략 1글자 ≒ 1~2토큰으로 잡으면 감이 옵니다.
| 모델 | 입력 / 1M | 출력 / 1M | 메모 |
|---|---|---|---|
| Claude Opus 5 | $5.00 | $25.00 | Anthropic 주력 |
| Claude Sonnet 5 | $3.00 | $15.00 | 도입가 $2 / $10 은 2026-08-31 종료 |
| Claude Haiku 4.5 | $1.00 | $5.00 | 가장 저렴. 컨텍스트 200K |
| Gemini 3.7 Flash | $0.75 | $3.75 | 2026-12-31까지. 2027-01-01부터 $1.50 / $7.50 |
| GPT-5.6 Sol | $4.00 | $20.00 | 8/21 인하. 프로모 최소 2026-11-21까지, 표준가 $5 / $30 |
출처 — Gemini API 요금 · GPT-5.6 Sol 모델 문서 · Anthropic 요금
Anthropic Claude API💸 사용량만큼 과금
01사이트 상주 챗봇
우하단 말풍선 버튼을 누르면 열리는 Q&A 챗봇. 시스템 프롬프트에 안내문·FAQ를 심어두면 우리 서비스 전용 상담원이 됩니다.
02긴 글 요약 버튼
게시글·공지 상단에 "3줄 요약" 버튼을 달아, 누르면 본문을 통째로 보내 요약을 받아옵니다.
03맞춤 문서 생성기
조건(주제·난이도·분량)을 폼으로 받아 활동지·가정통신문 초안을 통째로 만들어 주는 생성 도구.
OpenAI GPT API💸 사용량만큼 과금
01글쓰기 첨삭 도우미
입력창에 쓴 글의 어색한 문장을 찾아 수정 제안을 달아주는 에디터. 원문과 제안을 나란히 표시.
02퀴즈 자동 출제기
지문을 붙여 넣으면 4지선다 문제를 JSON으로 받아 바로 풀 수 있는 퀴즈 화면으로 변환.
Google Gemini API⚠️ 무료 한도 초과 시 과금
01사진 인식 업로더
사진을 올리면 내용을 읽어 설명·분류해 주는 기능. 식물 이름 찾기, 손글씨 풀이 읽기 등.
02무료 프로토타입 챗
아이디어 검증 단계에서 비용 없이 붙여보는 대화 기능. 무료 한도 내에서 데모 시연에 충분.
03음성 읽어주기(TTS 조합)
생성한 답변을 브라우저 TTS와 조합해 읽어주는 접근성 기능. 버튼 하나로 낭독 시작.
🗺 지도·위치
MAPS · 무료 쿼터 넉넉"오시는 길" 한 장이 신뢰도를 바꿉니다. 국내 서비스라면 카카오맵이 도로명·건물명 인식에서 유리합니다.
카카오맵 JavaScript API
01오시는 길 임베드
행사장·가게 위치에 마커를 찍은 지도를 페이지에 삽입. 클릭하면 길찾기로 연결.
02여러 지점 마커 지도
지점·부스·수거함 등 여러 위치를 목록과 지도에 동시에 표시. 목록을 누르면 지도가 이동.
03주소 → 좌표 자동 변환
폼에 주소를 입력하면 좌표로 변환해 저장하는 뒷단 기능. 지도 없는 화면에서도 쓰입니다.
Google Maps Platform⚠️ 카드 등록 필수 · 크레딧 초과 시 과금
01스트리트뷰 미리보기
해외 명소·답사지의 실제 거리 풍경을 페이지 안에서 둘러보게 하는 몰입형 블록.
02두 지점 거리·시간 계산
출발지·도착지를 넣으면 이동 거리와 예상 시간을 계산해 주는 비교 도구.
💬 소통·알림
MESSAGING · 건당 과금 or 무료웹앱이 사용자를 "먼저 찾아가게" 만드는 분류입니다. 폼 제출·예약·마감 같은 사건이 생길 때 문자·메신저·메일로 튀어나갑니다.
솔라피(SOLAPI) 문자 발송 API💸 발송 건당 과금
01예약 확인 문자 자동 발송
예약 완료 순간 신청자 휴대폰으로 확인 문자가 도착. 화면에는 "발송 완료" 표시만 남습니다.
02마감 임박 리마인더
제출 마감 하루 전, 미제출자에게만 자동으로 독촉 문자를 보내는 관리자용 버튼.
| 이름 | 제출 |
|---|---|
| 김OO | ✅ |
| 이OO | ❌ |
| 박OO | ❌ |
Discord / Slack 웹훅(Webhook)
01폼 제출 → 운영진 알림
사이트에서 문의·신청이 들어오면 운영진 디스코드 채널에 즉시 알림 메시지가 뜹니다.
새 신청: 홍길동 · 연수 A반 · 방금 전
02오류·이상 감지 알림
웹앱에서 에러가 나거나 재고가 0이 되는 순간 관리 채널로 경보를 쏘는 감시 기능.
결제 페이지 500 · 12:41 · 3회 연속
EmailJS⚠️ 월 200건 초과 시 유료
01문의하기 폼
백엔드 없이 정적 사이트에서도 "보내기"를 누르면 내 메일함으로 문의가 도착합니다.
02결과지 메일로 받기
테스트·설문을 마친 사용자가 이메일을 입력하면 결과 요약을 본인 메일로 발송.
🎬 미디어·콘텐츠
MEDIA · 대부분 무료 쿼터직접 만들지 않은 콘텐츠(영상·사진·번역문)를 실시간으로 끌어와 페이지를 채우는 분류입니다. "업데이트를 안 해도 늘 새로운 사이트"가 됩니다.
YouTube Data API v3
01최신 영상 자동 갤러리
채널에 영상을 올리면 사이트 갤러리가 저절로 갱신. 홈페이지 관리 노동이 사라집니다.
02주제별 큐레이션 페이지
재생목록 단위로 영상을 묶어 "1단원 → 영상 4개"처럼 학습 코스 페이지를 구성.
Unsplash API
01접속할 때마다 바뀌는 배경
랜덤 사진을 히어로 배경으로 깔아 매일 분위기가 달라지는 첫 화면을 만듭니다.
02글감 이미지 자동 삽입
글 제목의 키워드로 사진을 검색해 카드 썸네일을 자동으로 채워주는 블로그형 기능.
DeepL 번역 API⚠️ 무료 한도 초과 시 과금
01페이지 언어 전환 버튼
우상단 지구본 버튼으로 본문 전체를 영어·일본어 등으로 즉석 번역. 다문화 안내문에 유용.
02이중 언어 대조 뷰
원문과 번역문을 좌우로 나란히 보여주는 학습·검토용 화면. 영어 지문 읽기 도구로 활용.
🗄 데이터 저장·로그인
BaaS · 무료 티어로 시작서버 없이도 "저장되는 웹앱"을 만들게 해주는 분류입니다. 새로고침하면 사라지는 앱과, 내일 다시 들어와도 남아 있는 앱의 갈림길입니다.
Firebase (구글)⚠️ 무료 플랜 초과 시 과금
01구글 계정 로그인
버튼 하나로 구글 계정 로그인. 회원가입 화면을 만들 필요 없이 "누가 썼는지"가 생깁니다.
02실시간 방명록·투표
누군가 글을 쓰면 다른 사람 화면에 새로고침 없이 즉시 나타나는 실시간 동기화.
03진행 상황 저장(이어하기)
퀴즈·게임의 진도를 계정에 저장해 다음 접속 때 이어서 하기. 방탈출 게임의 세이브 기능.
Supabase⚠️ 무료 플랜 초과 시 유료
01게시판·댓글 시스템
글 쓰기·목록·댓글이 제대로 저장되는 진짜 게시판. 표 형태 데이터에 특히 강합니다.
| 제목 | 글쓴이 | 💬 |
|---|---|---|
| 질문 있어요 | 별사탕 | 3 |
| 후기 공유 | 은하수 | 7 |
02파일 업로드 보관함
이미지·PDF를 올리고 링크로 공유하는 스토리지. 제출함·자료실을 직접 만들 수 있습니다.
Google Sheets API
01신청자 명단 자동 기록
웹 폼 제출 내용이 구글 시트에 한 줄씩 쌓임. 관리자는 익숙한 시트에서 그대로 확인.
| A 이름 | B 연락처 | C 시간 |
|---|---|---|
| 홍길동 | 010-… | 13:02 |
| ← 새 행 자동 추가 |
02시트로 관리하는 순위표
시트의 점수를 고쳐 쓰면 웹 순위표가 따라 바뀜. 코드 수정 없이 콘텐츠 갱신 가능.
💳 결제·생활 유틸
UTILITIES · 분류하기 애매하지만 강력한쓰임새가 좁아 보여도 붙는 순간 앱의 성격을 바꾸는 키들입니다. 특히 결제는 "취미 프로젝트"와 "서비스"를 가르는 경계선입니다.
토스페이먼츠 결제위젯💸 결제 수수료 발생
01임베드 결제창
주문 페이지 안에 결제 수단 선택 UI가 통째로 들어옵니다. 결제 화면을 직접 만들 필요 없음.
02후원하기 버튼
무료 콘텐츠 페이지 구석에 소액 후원 버튼을 달아 커피 한 잔 값을 받는 구조.
알라딘 도서 검색 API
01도서 검색 자동완성
제목 몇 글자만 치면 표지와 함께 후보가 뜨는 검색창. 독서 기록 앱의 입력 부담이 사라집니다.
02표지로 채우는 책장
ISBN만 저장해두면 표지 이미지를 불러와 실제 책장처럼 진열하는 화면.
한국천문연구원 특일 정보 API
01달력 빨간날 자동 표시
직접 만든 예약·일정 달력에 공휴일이 자동으로 빨갛게 칠해집니다. 매년 갱신 걱정 끝.
02영업일 기준 D-day 계산
"영업일 3일 후 발송"처럼 주말·공휴일을 건너뛰는 날짜 계산기. 예약·배송 안내에 필수.