한 시간 사이드 프로젝트 — Gemini API로 MBTI 운세 사이트 만들고 서브도메인 배포

해커톤 과제로 “AI API 하나 써서 뭐든 만들어봐”가 떨어졌다.

처음엔 거창하게 갈까 하다가, 그냥 1시간 안에 끝내고 싶었다. 결과물이 https://mbti.lab-it.net 이다.

---

무엇을 만들었나

MBTI 16유형 중 하나 고르면 → Gemini가 그날의 운세를 즉석에서 생성 → 깔끔한 카드 UI로 표시.

UX는 단계형 선택:

1. I / E (내향 / 외향)
2. S / N (감각 / 직관)
3. F / T (감정 / 사고)
4. P / J (인식 / 판단)

선택 누를 때마다 다음 단계로 넘어감. 4번 클릭이면 운세가 뜬다.

┌──────────────────────────┐
│  당신의 MBTI는?           │
│                          │
│  [ I ]      [ E ]        │
│  내향        외향         │
└──────────────────────────┘

---

스택 (의도적으로 빈약하게)

구성	선택
프론트엔드	순수 HTML + CSS + 바닐라 JS
AI	Google Gemini API (gemini-1.5-flash)
호스팅	Cloudflare Pages
도메인	mbti.lab-it.net (Cloudflare DNS CNAME)
백엔드	없음 — 클라이언트가 Gemini 직접 호출

프레임워크 없음. 빌드 단계 없음. index.html 하나.

---

Gemini 호출 — 30줄

async function getFortune(mbti) {
  const prompt = `너는 점성술사야. ${mbti} 유형의 사람에게 오늘의 운세를 ` +
                 `따뜻하고 구체적으로, 5문장으로 들려줘. 사랑/일/건강 영역 포함.`;

  const res = await fetch(
    `https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash:generateContent?key=${API_KEY}`,
    {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        contents: [{ parts: [{ text: prompt }] }],
        generationConfig: { temperature: 0.9, maxOutputTokens: 300 }
      })
    }
  );

  const data = await res.json();
  return data.candidates[0].content.parts[0].text;
}

temperature: 0.9 — 매번 다른 운세가 나오게.

---

API 키 노출 문제

클라이언트에서 직접 Gemini를 부르면 API 키가 브라우저에 노출된다. 개념적으로는 안 되는 짓이다.

이걸 어떻게 처리했냐 — 솔직히:

1. Gemini API 무료 한도가 넉넉하다. 분당 60 RPM, 일 1,500 요청. 누가 키 훔쳐서 폭탄 돌려도 무료.
2. 별도 도메인 referer 제한. Google AI Studio에서 API 키에 *.lab-it.net만 허용.
3. 스코프가 작다. 운세 생성에만 쓰는 키.

상용 서비스라면 절대 안 하는 짓이지만, 해커톤 과제라는 맥락에선 합리적 트레이드오프. 백엔드 만들면 1시간이 4시간 된다.

---

서브도메인 자동 배포

Cloudflare Pages에 GitHub repo 연결하면:

1. push → Pages가 자동 빌드 (정적이라 빌드 안 함)
2. 자동으로 <project>.pages.dev에 배포
3. Custom domain mbti.lab-it.net 추가 → CNAME 자동 설정

5분이면 끝. 무료.

---

왜 작은 게 좋은가

처음엔 React + Tailwind + 백엔드 + DB로 풀스택을 짤까 했다. 30분 안 됐는데 이미 npm install이 안 끝났을 거다.

작은 사이드 프로젝트는 작아야 의미 있다.

• 1시간 안에 끝나면 → 다음에 또 만들 수 있다
• 8시간 걸리면 → 한 번 만들고 안 만든다
• HTML 한 파일 → 6개월 뒤에도 손볼 수 있다
• React 앱 → 6개월 뒤에 의존성 충돌로 빌드 안 됨

---

만들면서 알게 된 것들

*.lab-it.net 와일드카드. 도메인 하나에 서브도메인 무한 만들 수 있는 건 사이드 프로젝트 폭발의 원인이다. 새 아이디어마다 새 도메인 안 사도 된다.

Gemini Flash가 의외로 빠르다. 평균 응답 1.5초. 운세 같은 짧은 텍스트엔 충분.

해커톤은 정의상 “1시간 안에 정착할 무엇”이다. 큰 거 만들고 싶으면 다른 자리에서 하자. 해커톤은 index.html로 끝내는 자리.

---

한 줄 정리

단계	시간
HTML/CSS/JS 작성	30분
Gemini API 키 발급 + 테스트	5분
Cloudflare Pages 배포	5분
서브도메인 연결	5분
디버깅 / 다듬기	15분
총	60분

이 정도면 그냥 만들면 된다.

---

작은 결과물의 가장 큰 가치는 빠르게 끝났다는 사실 자체다.