맞혀봐 — 주관식 퀴즈 (웹 + 앱)
사진이나 초성을 보고 정답을 직접 입력하는 퀴즈입니다. 하나의 코드로 웹사이트와 앱을 함께 운영합니다.
파일 구성
| 파일 | 역할 |
|---|
index.html | 페이지 뼈대 |
app.js | 화면 3개(목록·풀기·결과), 채점, 기록 저장 |
quizzes.js | 퀴즈 데이터 — 새 퀴즈는 여기에 추가 |
style.css | 디자인 (밝은 화면·어두운 화면 모두 지원) |
manifest.webmanifest, sw.js | 휴대폰 홈 화면에 앱처럼 설치 + 오프라인 실행 |
make_icons.py | 앱 아이콘 생성 (python3 make_icons.py) |
내 컴퓨터에서 실행
python3 -m http.server 8780 -d quiz-app
브라우저에서 http://localhost:8780 을 엽니다.
퀴즈 추가하기
quizzes.js의 QUIZZES 목록에 같은 모양으로 하나 더 넣으면 목록에 바로 나타납니다.
문제에 쓸 수 있는 항목은 파일 맨 위 설명을 참고하세요.
- 사진 퀴즈:
image에 사진 주소
- 초성 퀴즈:
chosung: true (초성은 정답에서 자동 생성)
- 글 퀴즈:
text에 문제 문장
- 다른 답도 인정:
alias: ['터키']
- 풀 때마다 새 문제:
questions 대신 generate 함수 (예: 10초 암산)
- 숫자 키패드: 문제에
numeric: true
현재 퀴즈 24종: 연예인 초성, 영화 초성, 국기, 헷갈리는 국기, 명화, 우주 사진, 동물 사진, 세계 명소 사진, 시계, 맞춤법, 반대말, 동물 새끼 이름, 줄임말, 수열, 사자성어 초성, 수도, 넌센스, 음식 초성, 속담 빈칸, 영어 단어, 암산, 원소 기호, 역사 인물, 도시 초성.
사진 출처: 국기는 flagcdn.com, 명화·우주 사진은 위키미디어 공용의 퍼블릭 도메인/CC0 파일, 동물·명소 사진은 CC BY/CC BY-SA 파일이며 문제마다 작가와 라이선스를 표시합니다(2026-10 확인).
CC BY-SA 사진은 출처 표시를 지우면 안 됩니다.
시계 그림은 코드로 직접 그립니다. 새 사진을 넣을 때도 저작권이 풀린 파일인지 먼저 확인하세요.
채점 규칙
- 띄어쓰기·문장부호·영문 대소문자는 무시합니다.
alias에 적은 답도 정답입니다.- 5글자 이상이면 한 글자, 12글자 이상이면 두 글자 오타까지 정답으로 봐줍니다.
앱으로 내는 방법
- 지금 바로 (설치형 웹앱): 사이트를 인터넷에 올린 뒤 휴대폰에서 열고
아이폰은 공유 → "홈 화면에 추가", 안드로이드는 메뉴 → "앱 설치".
아이콘이 생기고 주소창 없이 앱처럼 열립니다.
- 앱스토어·플레이스토어 출시: 같은 파일을 Capacitor로 감싸서 앱으로 만듭니다.
필요한 것: Node.js, Xcode(아이폰), Android Studio(안드로이드),
애플 개발자 계정(연 $99), 구글 개발자 계정(1회 $25).
주의
앱스토어 심사에서 남의 캐릭터·연예인 이미지를 쓴 퀴즈는 반려됩니다.
문제 사진은 직접 찍었거나 쓸 권리가 있는 것만 넣으세요. (국기는 공공 자료라 괜찮습니다.)
사진 찾기 도구
tools/find_photos.py는 영어 위키백과 문서의 대표 사진을 찾고 라이선스와 작가를 알려줍니다.
id|영문 문서 제목 형식으로 한 줄씩 적은 파일을 넣으면 됩니다. 결과에서 OK로 표시된 것(퍼블릭 도메인·CC0·CC BY·CC BY-SA)만 쓰고, 문제의 credit에 작가와 라이선스를 적으세요.
python3 tools/find_photos.py 목록.txt 결과.json
