이번 제작 노트 · 직접 써보는 예제
열리는 페이지와
제대로 연결된 사이트는 다릅니다
홈은 잘 열리는데 사용법 링크는 끊어지고, 다른 글의 대표 주소가 남아 있을 수 있습니다.
일부러 오류 네 개를 넣은 HTML을 검사하고 고쳐 봅니다.
가져갈 것: 자신의 공개 파일에도 적용할 수 있는 Python 점검 예제와 결과 해석법.
파일 업로드와 추가 패키지 설치는 필요하지 않습니다.
오류 4개를 고치는 실습 읽기
실험 파일에서 확인한 차이
- 수정 전
- 설명 누락 · 잘못된 canonical
없는 파일 · 없는 본문 위치
- 수정 후
- 같은 검사에서 오류 0개
실제 HTTP·화면 검사는 별도
2026.09.22 · 독립 예제의 실행 결과
가상 사이트의 실패와 수정을 비교했습니다.
어떤 문제를 해결하고 싶으세요?
본문 전달, 주소, 사용성, 이전 가능성을 각각 한 편에서 다룹니다.
콘텐츠 전달 · 실습
화면에는 보이는데 HTML에는 없는 글
페이지 소스와 화면을 비교하고, PowerShell로 두 URL의 본문을 확인합니다. 결과에 따라 렌더링과 라우팅 중 고칠 곳을 찾습니다.
본문 확인 실습 읽기
Cloudflare Pages · 사례
없는 주소인데 왜 홈이 열릴까?
평면 HTML, canonical, 301, 404의 역할을 구분합니다. 이 사이트에서 실제 확인한 응답과 점검 명령을 함께 봅니다.
주소와 404 가이드 읽기
키보드·모바일 · 실습
마우스 없이도 이 글을 읽을 수 있을까?
본문 바로가기, 포커스, 작은 화면, 다크 모드를 직접 점검합니다. 이 사이트의 CSS가 각 문제를 어떻게 처리하는지 살펴봅니다.
접근성 점검 따라 하기
Cloudflare·Supabase · 이전 판단
다른 곳에서 만든 사이트를 옮길 수 있을까?
정적 파일과 상시 서버의 차이부터 로그인·DB·업로드 이관까지, 예시 사이트를 비교하며 옮길 범위를 정합니다.
사이트 이전 가이드 읽기
직접 실행해 본 결과부터 읽기
AI Pacer: 같은 60%로 네 조건 비교에서는
작업시간이 달라도 예산이 같은 이유를, 한글 인코딩 실험에서는
같은 소스의 컴파일 실패와 성공을 확인했습니다. 가상 입력과 실제 실행 결과를 구분해 적었습니다.
블로그 경험에서 확장한 가이드
배포 전 권한·비용 점검,
CI에서만 나는 인코딩 오류,
혼자 만드는 프로젝트의 첫 공개 범위를 추가했습니다.
원래 경험과 이번에 만든 예제, 확인할 공식 문서를 함께 읽을 수 있습니다.
소개
쭈니박스는 직접 만든 웹 프로젝트의 제작 기록입니다. 페이지는 열리는데 본문이 전달되지
않거나, 없는 주소가 홈으로 열리는 문제처럼 작은 사이트를 운영하며 마주한 일을 다룹니다.
각 가이드에는 확인할 화면과 명령, 예상 결과, 다른 선택을 해야 하는 조건을 담았습니다.
프로젝트 소개에서는 미니게임, AI 작업 도구, Chrome 확장 프로그램의 제작 배경을 읽을 수 있습니다.
같은 문제를 만난 사람이 자신의 사이트에서 확인해 볼 수 있는 기록을 남깁니다.
대표 프로젝트
실행 링크만 나열하지 않고, 무엇을 왜 만들었는지부터 소개합니다.
브라우저 게임
몽글 아케이드
가입이나 설치 없이 여는 26종의 미니게임과 기록 경쟁 공간입니다.
프로젝트 배경 읽기
웹 도구
AI Pacer
남은 AI 사용량을 오늘의 예산으로 나눕니다. 네 조건의 계산 결과와 작업 완료 시간을 보장하지 않는 한계를 기록했습니다.
계산 실험과 제작 배경 읽기
Chrome 확장
VibeGraph
AI 작업 대화를 로컬에서 기록하고 작업 습관을 돌아보는 확장 프로그램입니다.
프로젝트 배경 읽기
디지털 박물관
준이의 박물관
기억과 작품을 전시 공간을 걷는 방식으로 만나는 별도 프로젝트입니다.
프로젝트 배경 읽기
모든 프로젝트 보기
게임 목록·채널·앱의 세부 소개 펼치기
제작 노트보다 실행할 프로젝트를 찾고 있다면 아래에서 바로 이동할 수 있습니다.
몽글 아케이드
2026년 9월 22일 공개 목록에서 확인한 미니게임은 26종입니다. 내려받거나 가입하지 않고
짧은 한 판부터 둘이 마주 보는 보드게임까지 골라서 시작할 수 있습니다.
스킬
손에 익을수록 기록이 오르는 게임들입니다.
둘이서
한 화면에서 번갈아 또는 동시에 조작하는 게임들입니다.
기록으로 겨룹니다
랭킹 대상 게임에는 오늘·이번 주·시즌 세 가지 순위가 있습니다. 오늘 순위는 한국 시간
자정에, 주간 순위는 월요일에 새로 시작하고, 시즌은 3개월 단위로 끊습니다. 하루를
놓쳐도 다음 판에서 다시 겨룰 수 있습니다.
점수는 서버가 플레이를 그대로 다시 돌려 계산한 값만 올라갑니다. 같은 판에서는 누가
해도 같은 조건이 주어지고, 서버는 제출된 조작 기록으로 그 판을 재현해 점수를 다시
셉니다. 재현한 점수와 제출한 점수가 다르면 기록은 반영되지 않습니다.
순위에 보이는 것은 닉네임과 태그뿐입니다. 구글 계정을 연결해도 이름·사진·이메일은
공개되지 않습니다.
랭킹 규칙과
공정한 플레이에 기준을 적어 두었습니다.
달콤한 하루
집에서 키우는 샴고양이 달콤이의 일상을 올리는 유튜브 채널입니다. 대단한 편집도 설정도
없이, 고양이가 하루를 보내는 모습을 짧게 담습니다.
왜 만드나요?
아들이 달콤이 영상을 제일 좋아합니다. 그래서 먼저 달콤이 전용 영상첩으로 가꾸고
있어요. 보시는 분이 늘면 좋겠지만, 그렇지 않아도 계속 올릴 이유가 있는 채널입니다.
작은 채널 소개의 설계
외부 영상 플레이어 대신 SVG 캐릭터와 링크를 둔 이유를 정리했습니다.
소개 페이지와 영상 채널이 맡는 역할을 나눠 봅니다.
달콤한 하루 소개 보기
앱과 확장 프로그램
AI와 함께 일할 때 쓰는 웹 계산기와 Chrome 확장 프로그램을 한곳에 모았습니다.
AI Pacer
남은 주간 AI 용량을 오늘 할 수 있는 작업 횟수로 바꾸는 무료 페이스 계산기입니다.
VibeGraph
AI 작업 대화를 로컬에 기록하고 프롬프트 습관과 성장 흐름을 돌아보는 Chrome 확장
프로그램입니다.
앱·확장 전체 보기
만드는 방식
게임 그림과 소리는 전부 직접 만들거나 상업적으로 쓸 수 있는 것만 씁니다. 기존 게임의
이름이나 캐릭터를 가져다 쓰지 않습니다.
전연령이 보는 곳이라 다치거나 피가 나오는 표현은 넣지 않습니다. 색만으로 성공과 실패를
구분하지 않고, 소리와 화면 흔들림은 설정에서 끌 수 있습니다. 키보드만으로도, 손가락
하나로도 전부 조작할 수 있게 만듭니다.
게임마다 플레이 가이드를 따로 씁니다. 규칙과 점수 계산식, 요령까지 적어 두어서
처음 하는 사람도 무엇을 하면 점수가 오르는지 알 수 있습니다.
개인정보와 광고
이 루트 소개 사이트는 이름이나 연락처를 직접 입력받지 않으며, 로그인·입력 양식·자체
방문 분석 데이터베이스를 두지 않습니다. 페이지 전송 과정의 기본 통신 정보에 대한
범위는 개인정보처리방침에서 설명합니다.
몽글 아케이드처럼 외부 서비스로 이동한 뒤의 데이터 처리는 해당 서비스 안내가
적용됩니다. 아케이드의 자세한 내용은
개인정보처리방침에 있습니다.
현재 루트 사이트에는 광고가 표시되지 않으며 광고 스크립트도 불러오지
않습니다. 실제 처리 범위와 문의 방법은
루트 개인정보처리방침에 적어 두었습니다.