노션에서 게임이 된다고? 노션 HTML 블록으로 진짜 게임을 만들어봤습니다

TL;DR

• 노션 HTML 블록으로 "슈크림 짝꿍 찾기" 카드 매칭 게임을 처음부터 끝까지 노션 안에서 제작했습니다.
• Notion AI(요약슈)와 대화만으로 HTML/CSS/JS 코드가 자동 생성되어 노션 페이지에 바로 삽입됐습니다.
• 이벤트용 랭킹 기능만 GitHub + Supabase로 확장했고, 나머지는 노코드에 가까운 방식으로 완성했습니다.

 

---

 

"노션에서 게임이 된다고?" 처음 이 문장을 들으면 대부분 갸웃합니다. 문서 도구로 알려진 노션이 카드 뒤집기 게임을 직접 실행한다는 게 어색하기 때문입니다.

 

하지만 2024년부터 정식 지원되는 노션 HTML 블록(Notion HTML Block) 덕분에, 이제 HTML 웹앱을 노션 페이지 안에서 그대로 실행할 수 있습니다. 이번 글은 이전 "노션 HTML 블록 소개" 편의 후속으로, 실제 게임을 만들어본 제작 기록입니다.

 

"A game running inside Notion?" Most people tilt their heads when they first hear this, because Notion is known as a document tool, not a runtime for interactive card games. 

 

However, thanks to the officially supported Notion HTML Block, you can now run HTML web apps directly inside a Notion page. This article is a follow-up to the previous "Notion HTML Block Introduction" post, sharing a hands-on build log.

 

---

노션 HTML 블록이란 무엇인가?

 

노션 HTML 블록은 HTML/CSS/JavaScript 기반 웹 콘텐츠를 노션 페이지 안에서 직접 실행할 수 있게 해주는 임베드 기능입니다. 별도 사이트 배포 없이도 노션 페이지 자체가 웹앱 실행 환경이 됩니다.

 

과거에는 웹앱을 배포하려면 GitHub Pages, Vercel, Netlify 같은 별도 호스팅이 필수였습니다. 지금은 그 단계를 건너뛰고 노션 페이지 하나로 배포·공유·실행이 끝납니다.

 

The Notion HTML Block is an embed feature that lets HTML/CSS/JavaScript-based web content run directly inside a Notion page, turning the page itself into a web app runtime without external hosting.

 

Previously, deploying a web app required separate hosting like GitHub Pages, Vercel, or Netlify. Now that step can be skipped — a single Notion page handles publishing, sharing, and execution.

 

예전 방식 vs 지금 방식 비교

구분	기존 웹앱 배포	노션 HTML 블록 방식
코드 작성	직접 or IDE	Notion AI 대화로 생성
호스팅	GitHub Pages, Vercel 필요	불필요 (노션 내장)
배포	도메인/빌드 설정	웹게시 토글 1개
공유	URL 별도 관리	노션 페이지 링크
진입장벽	개발 지식 필요	노코드에 근접

 

 

---

 

왜 노션 HTML 블록이 중요한가?

핵심은 "노션이 게임을 만든 것"이 아니라, "HTML 웹앱을 노션 안에서 그대로 실행할 수 있게 된 것"입니다. 이 차이가 콘텐츠 제작 방식을 근본적으로 바꿉니다.

 

즉, 노션은 이제 문서 도구를 넘어 인터랙티브 콘텐츠 실행 플랫폼으로 확장됐습니다. 강의, 이벤트, 마케팅, 교육까지 노션 한 페이지 안에서 완결됩니다.

 

The key point is not that "Notion built a game," but that "an HTML web app can now run inside Notion as-is." This distinction fundamentally changes how content is produced.

 

In other words, Notion has expanded beyond a document tool into an interactive content runtime — lectures, events, marketing, and education can now be completed within a single Notion page.

 

---

이번에 만든 게임은 무엇인가?

"슈크림 짝꿍 찾기"라는 9단계 카드 매칭 메모리 게임입니다. 단계별로 카드가 4장 → 6장 → … → 20장까지 늘어나고, 1~9단계 누적 시간이 랭킹에 반영됩니다.

 

The game is "Shukream Match," a 9-stage memory card matching game where cards grow from 4 → 6 → ... → 20 per stage, and the cumulative time across all stages is recorded on the leaderboard.

 

주요 기능 체크리스트

✅ 9단계 진행 (카드 수 점진적 증가)

✅ 3D 카드 뒤집기 애니메이션 (0.3초 최적화)

✅ 누적 타이머 기반 랭킹

✅ 오답 시 즉시 재클릭 가능 (잠금 없음)

✅ 이미지 20장 매 단계 랜덤 셔플

✅ 클리어 시 축하 화면

✅ 노션 페이지에서 바로 플레이

 

---

제작 과정은 어떻게 진행되었는가?

전 과정을 Notion AI("요약슈")와의 대화만으로 진행했습니다. 코드 에디터를 열지 않았고, 별도 개발 환경도 세팅하지 않았습니다.

 

The entire process was completed through conversations with Notion AI ("Yoyakshu") — no code editor was opened, and no separate development environment was set up.

실제 제작 흐름도

① 게임 종류 결정 (AI에게 리스트 요청)
        ↓
② 메모리 카드 선택 + 규격 확인
        ↓
③ 이미지 준비 (피그마 600×600px)
        ↓
④ 노션 "이미지 페이지"에 이미지 붙여넣기
        ↓
⑤ AI에게 규격 전달 (9단계, 매칭 규칙)
        ↓
⑥ AI가 HTML/CSS/JS 단일 파일 생성
        ↓
⑦ Notion HTML Block에 자동 삽입
        ↓
⑧ 이름/속도 등 세부 조정 (대화로)
        ↓
⑨ 웹게시(Publish) → 링크 공유

 

특히 인상적이었던 부분은 이미지 전달 방식입니다. 외부 URL 없이 노션 페이지에 이미지를 붙여넣기만 하면 AI가 그 페이지에서 직접 이미지를 읽어와 게임에 내장했습니다.

 

The most impressive part was image handling — instead of external URLs, simply pasting images into a Notion page allowed the AI to read them directly and embed them into the game.

 

직접 제작한 사용자의 기록 "외부 사이트에 올릴 필요 없이, 노션 페이지에 이미지를 붙여넣으면 AI가 거기서 직접 가져옵니다. 이 순간부터 '노션 안에서 모든 게 끝난다'는 감각이 확실해졌습니다."

 

---

 

이번 사례가 알려주는 활용 가능성은?

노션 HTML 블록은 게임 외에도 다양한 인터랙티브 콘텐츠 운영 도구로 확장 가능합니다. 문서-앱의 경계가 사실상 사라졌습니다.

 

The Notion HTML Block extends far beyond games — it can operate a wide range of interactive content, effectively erasing the boundary between documents and apps.

 

노션 HTML 블록으로 가능한 콘텐츠

카테고리	예시
게임	카드 매칭, 퀴즈, 반응속도, 틱택토
교육	인터랙티브 강의, 개념 시뮬레이션
마케팅	이벤트 페이지, 참여형 캠페인
업무 도구	계산기, 견적 도구, 미니 대시보드
리서치	설문, 성향 테스트, 진단 도구
미니 웹앱	타이머, 체크리스트 앱, 컨버터

 

---

그래서 GitHub와 Supabase는 왜 쓴 건가?

결론부터: 게임 자체는 노션만으로 완성됐고, GitHub와 Supabase는 "전역 랭킹" 기능 하나 때문에 추가로 사용했습니다.

 

노션 AI가 만들어준 기본 버전은 브라우저 로컬 저장 기반 랭킹이었습니다. 즉, 내 브라우저에서만 기록이 보입니다. 하지만 이번 프로젝트는 이벤트용이라 모든 참가자의 기록을 모아 하나의 랭킹으로 보여줘야 했습니다.

 

그래서 최종 구조는 이렇게 확장됐습니다.

 

Bottom line: the game itself was completed entirely within Notion. GitHub and Supabase were added only to support a single feature — the global leaderboard.

 

The AI's default version used browser-local storage for the leaderboard, meaning records were visible only in the player's own browser. Since this project was for an event, all participants' scores had to be aggregated into a single global ranking.

 

So the final architecture was extended as follows.

Notion AI가 만든 HTML 게임 (베이스)
        ↓
GitHub (코드 버전 관리)
        ↓
Supabase (전역 랭킹 데이터베이스)
        ↓
Notion HTML Block에 삽입
        ↓
웹게시로 누구나 플레이 + 랭킹 참여

 

정리하자면, 개인용·팀 내부용이라면 노션만으로 100% 완결 가능하고, 전역 데이터가 필요할 때만 외부 서비스를 붙이면 됩니다.

 

In short, personal or team-internal use can be fully self-contained within Notion, and external services only need to be added when global data is required.

 

 

---

노션 앰배서더 노슈니가 단 하루만에 만든 카드 맞추기 게임 

👉🏻 게임하러 바로가기

 

게임 랭킹 차지하기 이벤트 진행 중이며, 노슈니가 노션에게 어떻게 이야기 했는지는 아래 페이지에 슈크림 카드 이미지와 함께 나눴던 대화들 가감없이 정리해서 넣어두었습니다. 

 

---

자주 묻는 질문 (FAQ)

Q: 노션 HTML 블록이란 정확히 무엇인가요? 

A: HTML/CSS/JavaScript 코드를 노션 페이지 안에서 실행할 수 있게 해주는 임베드 블록입니다. 외부 호스팅 없이 노션 자체가 실행 환경이 됩니다.

 

Q: 노션 HTML 블록은 무료로 쓸 수 있나요? 

A: 노션 기본 기능에 포함되어 있어 별도 결제 없이 사용할 수 있습니다. 다만 웹게시(Publish) 기능은 요금제에 따라 접근 방식이 다를 수 있습니다.

 

Q: 노션에서 게임을 진짜 만들 수 있나요? 

A: 네. 다만 정확히는 "노션이 게임을 만든 것"이 아니라 "HTML 게임을 노션 안에서 실행"하는 것입니다. 이번 슈크림 짝꿍 찾기는 Notion AI와의 대화만으로 코드가 생성됐습니다.

 

Q: GitHub는 꼭 필요한가요? 

A: 아니요. 이번 프로젝트에서는 이벤트용 전역 랭킹 때문에 사용했지만, 개인용·간단한 게임이라면 노션만으로 충분합니다.

 

Q: Supabase는 왜 사용했나요? 

A: 여러 참가자의 게임 기록을 한 곳에 모아 랭킹으로 보여주려면 외부 데이터베이스가 필요했기 때문입니다. 로컬 랭킹만 필요하다면 불필요합니다.

 

Q: HTML만으로 노션 웹앱을 만들 수 있나요? 

A: 가능합니다. HTML/CSS/JS 단일 파일이면 Notion HTML Block에 삽입해 바로 실행됩니다. 이미지도 파일에 내장하면 링크 만료 걱정이 없습니다.

 

Q: 개발 지식이 없어도 노션 웹앱 제작이 가능한가요? 

A: 사실상 가능합니다. Notion AI가 요구사항을 대화 형식으로 받아 HTML 코드를 자동 생성하기 때문에, 노코드에 가까운 흐름으로 진행됩니다. 구체적으로 요청할수록 결과 품질이 높아집니다.

 

---

앞으로 노션은 어디까지 확장될까?

노션은 이제 문서 도구가 아니라 인터랙티브 콘텐츠 플랫폼입니다. 페이지 하나 안에 텍스트, 데이터베이스, 그리고 실행 가능한 웹앱이 공존합니다.

 

Notion AI가 코드를 생성하고, HTML 블록이 그 코드를 실행하며, 웹게시가 배포를 대신하는 흐름이 자리 잡으면, "팀 위키" 옆에 "이벤트 게임"이, "회의록" 옆에 "계산기 앱"이 놓이는 시대가 곧 표준이 될 것입니다.

 

핵심 통찰: 진짜 변화는 "노션이 게임을 만든다"가 아니라, "누구나 노션 안에서 웹앱을 완결할 수 있다"는 진입장벽의 붕괴입니다.

 

👉 지금 여러분의 노션 페이지를 열고, HTML 블록을 추가한 뒤 Notion AI에게 "간단한 퀴즈 게임 하나 만들어줘"라고 요청해보세요. 다음 인터랙티브 콘텐츠는 여러분의 워크스페이스에서 시작될 수 있습니다.

 

Notion is no longer just a document tool — it has become an interactive content platform where text, databases, and executable web apps coexist within a single page.

 

Once Notion AI generates the code, HTML Block executes it, and Publish replaces deployment, it will soon become standard to see "event games" next to team wikis and "calculator apps" next to meeting notes.

 

The real shift isn't "Notion makes games" — it's the collapse of the entry barrier that lets anyone complete a web app entirely within Notion.

 

[EN] Open your Notion page now, add an HTML Block, and ask Notion AI to "make me a simple quiz game." Your next interactive content might start right inside your own workspace.