도형 편집기 (수학 문제 그림 만들기)

중학교 수학 선생님이 문제에 넣을 도형 그림(점·선분·각·직각·평행·좌표평면 등)을 쉽고 빠르게 만들고 고치는 프로그램입니다.

사용하는 방법

• 웹에서 바로 쓰기: https://geometry-editor.vercel.app/ (학교 네트워크에서도 열려요)
• 내 PC에서 쓰기: 도형편집기.html 파일 하나만 내려받아 더블클릭하면 브라우저(Chrome/Edge)에서 바로 실행됩니다. 설치·서버·인터넷 연결이 필요 없습니다.
• 만든 그림과 작업 파일은 각자의 컴퓨터에만 저장되고, 어디에도 전송되지 않습니다.
  • 단, [🤖 AI로 도형 인식하기]를 누를 때만 그 그림이 AI 서버(Vercel → Google Gemini)로 보내져 분석됩니다.
  • AI 도형 인식은 인터넷이 필요하고, 처음 한 번 아래 "AI 도형 인식 설정" 을 해야 합니다. 다른 기능은 설정 없이 그대로 쓸 수 있어요.

AI 도형 인식 설정 (처음 한 번, 무료)

문제 그림을 불러오고 [🤖 AI로 도형 인식하기]를 누르면, AI가 그림 속 점·선분·각·직각·숫자 등을 찾아 고칠 수 있는 개체로 바꿔 줍니다. AI는 Google의 Gemini API 무료 등급만 씁니다. 결제 정보는 필요 없고, 코드를 고칠 필요도 없어요. 아래 세 단계만 하면 됩니다.

1단계. Google AI Studio에서 Gemini API 키 만들기 (무료)

1. https://aistudio.google.com 에 Google 계정으로 로그인합니다.
2. 왼쪽 메뉴의 Get API key(API 키 받기)를 누릅니다.
3. Create API key(API 키 만들기)를 누릅니다. 프로젝트를 고르라고 하면 새 프로젝트를 만들어도 돼요.
4. 만들어진 키를 [키 복사] 버튼으로 복사합니다. (새 키는 AQ.로 시작해요. 예전 키는 AIza로 시작하는데 둘 다 쓸 수 있어요)
   • 키 목록에서 그 프로젝트의 요금제가 무료(Free) 로 보이면 됩니다.
   • "결제 설정(Set up billing)" 은 누르지 마세요. 결제를 연결하지 않으면 요금이 생기지 않아요.
   • 이 키는 비밀번호와 같아요. 다른 사람에게 보내거나 코드·채팅·캡처 사진에 보이게 하지 마세요. 실수로 보였다면 AI Studio에서 그 키를 삭제하고 새로 만들어 Vercel 값을 바꾸면 돼요.

2단계. Vercel에 GEMINI_API_KEY 등록하기 (키는 서버에만 있어서 편집기 화면·브라우저에는 보이지 않아요)

1. https://vercel.com 에 로그인 → geometry-editor 프로젝트를 누릅니다.
2. 위쪽 Settings → 왼쪽 Environment Variables 로 갑니다.
3. Key 칸에 GEMINI_API_KEY, Value 칸에 1단계에서 복사한 키를 붙여 넣고 Save 를 누릅니다.
   • (선택) 남이 내 무료 한도를 쓰지 못하게 하려면 AI_ACCESS_CODE 도 하나 더 만들고, 값에 내가 정한 AI 접속 비밀번호를 적어요. 만들었다면 편집기에서 처음 한 번 그 비밀번호를 입력하라고 물어봐요. 안 만들면 비밀번호 없이 바로 써요.

3단계. Vercel 다시 배포(Redeploy)하기 — 등록한 키는 다시 배포해야 적용돼요

1. 같은 프로젝트에서 위쪽 Deployments 를 누릅니다.
2. 맨 위 배포 줄 오른쪽의 ⋯ → Redeploy → 다시 Redeploy 를 누릅니다. 1~2분 기다리면 끝이에요.
3. 편집기에서 그림을 선택하고 [⚙ AI 설정] → [🔌 연결 시험] 을 눌러 "✓ 연결됐어요"가 나오면 준비 완료. (연결 시험은 그림을 보내지 않아서 무료 한도를 쓰지 않아요.)

무료 등급으로 쓰는 방법과 제한

• 이 편집기는 무료 등급에서 이미지 입력을 지원하는 Gemini 모델만 부릅니다. 기본은 gemini-3.5-flash 예요. (2026-10-07 실제 시험에서 가장 빠르고 안정적이었어요. 3.8 Flash는 그날 무료 등급에서 '수요 과다'로 응답이 오지 않았어요) (2026년 10월 Google 공식 가격 문서 기준. 정책이 바뀌면 api/recognize.js 의 FREE_TIER_MODELS 목록만 고치면 돼요.)
• 무료 등급은 무제한이 아니에요. 1분에 보낼 수 있는 횟수와 하루에 보낼 수 있는 횟수가 정해져 있어요. 지금 내 한도는 https://aistudio.google.com/rate-limit 에서 볼 수 있어요.
  • 하루 한도는 미국 태평양 시간 자정(한국 시간 오후 4시쯤, 겨울엔 오후 5시쯤)에 다시 채워져요.
• 한도를 넘으면 Google이 요청을 거절하고, 편집기는 그 시간이 지날 때까지 AI를 부르지 않고 쉬운 말로 알려 줘요.
• 유료로 자동 전환되지 않아요. 편집기는 자동 재시도도, 다른(유료) 모델로 바꾸는 일도 하지 않아요. 요금이 생기는 경우는 선생님이 직접 Google 프로젝트에 결제를 연결했을 때뿐이에요.
• 편집기에 보이는 "이번 사용: AI 인식 N회" 는 이 창에서 보낸 횟수예요. Google의 남은 무료 한도가 아니에요.
• 참고: Google은 무료 등급으로 보낸 내용을 서비스 개선에 쓸 수 있다고 안내해요. 학생 이름 등 개인정보가 담긴 그림은 보내지 마세요.

AI 인식 쓰는 법

• [🤖 AI로 도형 인식하기] → "AI가 도형을 분석하고 있습니다..." → AI 인식 결과 창에서 맞는 것만 체크 → [선택한 객체 적용]
  • 분석하는 동안에는 버튼이 잠기고, 여러 번 눌러도 한 번만 보내요.
  • 체크한 항목은 그림 위에 주황 점선으로 미리 보여요. 항목 옆 %는 AI가 스스로 매긴 확신도예요(실제 정확도를 보장하지 않아요). 60% 미만(⚠)은 처음에 체크가 꺼져 있어요.
  • 적용하면 직접 그린 것과 똑같은 점·선분·문자·표시가 돼요. 끌어서 옮기기, 이름·색·굵기 바꾸기, 지우기 모두 됩니다. 마음에 안 들면 Ctrl+Z 한 번.
• [🔲 선택 영역 AI 인식]: 버튼을 누르고 그림 위를 끌어서 네모로 고르면 그 부분만 인식해요. 복잡한 문제지에서 도형 부분만 고르면 더 정확하고 한도도 아껴요.
• [🔄 AI로 다시 인식하기]: 기존 AI 개체를 지우고 다시 하거나, 그대로 두고 더 인식할 수 있어요.
• 왼쪽 [원본 그림] / [AI 개체] 버튼으로 각각 보이기·숨기기 (원본만 / AI 개체만 / 둘 다 보기).
• 좌표 자동 보정(AI 설정에서 켜고 끔): AI가 찍은 점을 그림 속 선이 실제로 만나는 곳으로 맞춰 줘요. AI 점이 크게(수십 픽셀) 어긋나도 선분마다 그림 속 실제 직선을 찾아 겹치고, 점은 그 직선들이 만나는 곳(끝점은 선이 끝나는 곳)으로 옮겨요. AI가 빠뜨린 선분도, 두 점 사이에 실선이 끊김 없이 그어져 있으면 찾아서 더해요(사이에 점이 있으면 그 점에서 나눠서).

자주 묻는 질문

• "무료 등급을 쓸 수 없다고 나와요": Google이 일부 지역·계정에서는 무료 등급을 막아 두었어요. 이때 결제는 설정하지 말고, 그림 속성창의 [📋 다른 AI 결과 붙여넣기] 로 Gemini 앱(무료)에 직접 물어본 결과를 붙여 넣어 쓸 수 있어요.
• "하루 한도를 다 썼대요": 다음 날(한국 시간 오후 4~5시 이후)에 다시 쓸 수 있어요. 그동안 다른 기능은 그대로 쓸 수 있어요.

이용 조건

CC BY-NC 4.0 — 비영리 교육 목적이라면 누구나 자유롭게 쓰고, 나누고, 고쳐 쓸 수 있습니다(출처 표시). 판매나 유료 서비스 등 영리 목적으로는 쓸 수 없습니다. 이 프로그램으로 만든 그림은 수업·시험지·학습지에 자유롭게 쓰세요.

This is the beginning of the README. Read the rest at the original. Read the full README ↗