처리중입니다. 잠시만 기다려주세요.
TTJ 코딩클래스
정규반 단과 자료실 테크 뉴스 코딩 퀴즈
테크 뉴스
Hacker News 2026.04.18 28

자기 자신을 편집하는 웹페이지, HTML 한 장으로 만든 미니 CMS

Hacker News 원문 보기
자기 자신을 편집하는 웹페이지, HTML 한 장으로 만든 미니 CMS

한 장의 HTML이 스스로를 고쳐 쓴다면?

요즘 개인 블로그나 간단한 랜딩 페이지를 만들 때, 우리는 보통 워드프레스나 노션 같은 도구를 떠올리잖아요. 그런데 Patrick Weaver라는 개발자가 아주 재밌는 실험을 공개했어요. 단 한 개의 HTML 파일이 브라우저에서 스스로를 편집하고, 그 결과를 다시 파일로 저장해버리는 구조를 만든 거예요. 데이터베이스도, 백엔드 서버도, 심지어 별도의 관리자 페이지도 없어요. 그냥 HTML 파일 하나가 전부인데, 그 안에서 글을 쓰고 수정하고 저장까지 다 끝납니다.

처음 들으면 "어? 그게 가능해?" 싶을 수 있는데요. 웹이 원래 품고 있던 단순함을 다시 꺼내본 프로젝트라고 보시면 될 것 같아요. 요즘 웹이 너무 복잡해졌잖아요. 간단한 글 하나 올리려고 빌드 도구 세팅하고, 배포 파이프라인 만들고, CMS 붙이고... 이 피로함에 대한 일종의 반문이에요.

어떻게 동작하는 걸까요

핵심 아이디어는 이래요. HTML 파일 안에 콘텐츠 영역(contenteditable 속성을 가진 div)을 두고, 사용자가 페이지 위에서 바로 글을 편집할 수 있게 합니다. 여기서 contenteditable이 뭐냐면, HTML 태그에 이 속성 하나만 넣으면 그 영역이 마치 워드 문서처럼 바로 편집 가능해지는 브라우저 내장 기능이에요. 별도의 에디터 라이브러리를 쓰지 않아도 돼요.

편집이 끝나면 자바스크립트가 현재 DOM(페이지의 전체 구조) 상태를 읽어서, 새로운 HTML 문자열을 만들어냅니다. 그리고 이걸 Blob 객체로 감싸서 다운로드 링크를 만들어요. 사용자가 버튼을 누르면 브라우저가 수정된 HTML 파일을 새로 다운로드하고, 기존 파일을 덮어쓰면 끝. 즉, "저장"이라는 행위가 파일 다운로드"로 대체된 거예요.

더 재미있는 건, 이 페이지를 정적 호스팅(예를 들면 GitHub Pages나 Netlify)에 올려두면 방문자에게는 그냥 보통 웹페이지처럼 보이는데, 본인(작성자)이 들어왔을 때만 편집 모드가 활성화되게 만들 수 있다는 거예요. 비밀번호 같은 간단한 장치로 편집자 모드를 분리하는 방식이죠. 물론 진짜 보안은 아니고, 어디까지나 개인용 장난감에 가깝다는 점은 염두에 두셔야 해요.

왜 지금 이런 접근이 다시 주목받을까

사실 이런 "단일 파일 웹앱" 아이디어는 새로운 건 아니에요. 예전에 TiddlyWiki라는 프로젝트가 똑같은 철학으로 유명했거든요. HTML 파일 하나가 위키 전체를 담고, 스스로를 수정해서 저장하는 구조. 그게 2000년대 중반부터 있었어요. 최근에는 localStorage나 IndexedDB를 활용한 오프라인 우선 웹앱들, 그리고 Obsidian 같은 로컬 파일 기반 도구들이 비슷한 감성을 공유하고 있죠.

흐름을 보면 개발자 커뮤니티에서 "복잡한 스택을 피하자"는 목소리가 꾸준히 나오고 있어요. HTMX처럼 자바스크립트 의존을 줄이려는 라이브러리, 11ty나 Astro 같은 정적 사이트 생성기의 유행도 결국 같은 맥락이에요. 이 프로젝트는 거기서 한 발 더 나가서 "빌드 도구조차 없애자"고 말하는 셈이에요.

한국 개발자에게 어떤 의미가 있을까

당장 이걸 실무에 쓸 일은 많지 않을 거예요. 팀 단위 협업이 필요한 서비스에는 당연히 맞지 않고, 보안이나 백업 측면에서도 프로덕션급은 아니거든요. 하지만 배워둘 가치는 충분해요.

첫째, contenteditable, Blob, URL.createObjectURL 같은 웹 표준 API를 제대로 다뤄볼 기회가 돼요. 이런 API들은 파일 업로드/다운로드나 이미지 편집 같은 기능을 만들 때 실전에서 종종 쓰이거든요. 둘째, "얼마나 단순하게 만들 수 있는가"를 고민하는 연습이 됩니다. 개인 포트폴리오, 간단한 메모 도구, 사내용 체크리스트 같은 곳에 응용해볼 수 있어요.

셋째는 좀 더 철학적인 이야기인데요. 우리가 React, Next.js, Vercel, Supabase를 습관처럼 끼얹기 전에 "이거 HTML 하나로 안 될까?"라고 한 번 질문해보는 태도예요. 모든 문제에 대형 프레임워크가 답은 아니거든요.

마무리

한 장의 HTML이 스스로를 고쳐 쓰는 이 작은 실험은, 우리가 잊고 있던 웹의 원형적인 단순함을 상기시켜줘요. 복잡한 도구 없이도 유용한 걸 만들 수 있다는 증명이기도 하고요.

여러분은 어떠세요? 최근에 만든 프로젝트 중에 "사실 이거 HTML 한 장이면 됐는데" 싶었던 경험 있으신가요? 어디까지 단순화할 수 있을지 한 번 같이 이야기해봐요.


🔗 출처: Hacker News

이 뉴스가 유용했나요?

이 기술을 직접 배워보세요

워드프레스로 수익 사이트를 만들어보세요

워드프레스 실전 강의에서 직접 배울 수 있습니다.

워드프레스 강의 보기

"비전공 직장인인데 반년 만에 수익 파이프라인을 여러 개 만들었습니다"

실제 수강생 후기
  • 비전공자도 6개월이면 첫 수익
  • 20년 경력 개발자 직강
  • 자동화 프로그램 + 소스코드 제공

매일 AI·개발 뉴스를 받아보세요

주요 테크 뉴스를 매일 아침 이메일로 전해드립니다.

스팸 없이, 언제든 구독 취소 가능합니다.