웹 게시본 제작기
쌓여만 있는 폴더를 주제별로 나눠, 웹 페이지로 만들어 주는 도구.
블로그에서 내려받은 글 940건, 십 년치 수업 기록, 연수 자료 더미 —
어디에 뭐가 있는지도 모르는 폴더를 던지면, 무엇이 있는지 세어 보여 주고,
주제별로 나누고, 어울리는 디자인을 골라 웹 페이지와 게시 사이트로 만들어 줍니다.
설치할 것이 없습니다. 서버도, 회원가입도, 구글 로그인도 없습니다.
웹 페이지 하나가 당신 컴퓨터의 폴더를 직접 읽고 씁니다.
1. 이런 걸 합니다
정리 안 된 폴더 주제별 페이지 게시 사이트
┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│ 2015-03-…html│ │ 협동학습 149건 │ │ │
│ 2017-09-…html│ ──▶ │ 스톱모션 49건 │ ──▶ │ 통합 사이트 │
│ 2023-11-…html│ │ 디지털 142건 │ │ │
│ … 940건 │ │ … 9개 갈래 │ │ │
└──────────────┘ └──────────────┘ └──────────────┘
① 탐색·분류 ② 디자인 골라 만들기 ③ 공개
실제로 블로그 글 940건으로 끝까지 돌려 본 결과입니다.
| |
|---|
| 훑기 | 940건 · 사진 8,682장 · 2014~2026(13해) — 4.5초 |
| 주제 나누기 | 9개 갈래로 전부 분류, 판단 못 한 것 31건(3%) |
| 페이지 만들기 | 갈래마다 페이지 하나 · 깨져 있던 사진 경로까지 고쳐서 |
2. 5분 따라하기
① 열기
이 저장소를 「Code → Download ZIP」으로 받아 압축을 풉니다. 그다음 제작기를 크롬이나 엣지로 엽니다.
② 작업 폴더 고르기
디자인/ 과 게시본/ 이 든 폴더를 고릅니다.
브라우저가 "이 폴더를 이 페이지에 허용할까요?" 라고 한 번 묻습니다 — 구글 로그인이 아닙니다.
③ 자료 넣고 만들기
게시본/ 아래에 폴더를 하나 만들고 글·사진을 넣습니다.
게시본/여행-기록/
├── _메모.txt ← 사람이 쓰는 유일한 파일
├── 01_들어가며.md
├── 03!_전환점.md ← 번호 뒤 ! = 강조
├── 08_바닷가.png
└── 사진/
_메모.txt 는 이렇게만 쓰면 됩니다. 제작기 화면에서 드롭다운으로 골라도 자동으로 써집니다.
제목: 여행 기록
디자인: 기록장 배치: 갤러리
접기: 자동 공개: 끄기
「만들기」를 누르면 그 폴더에 index.html 이 생깁니다.
④ 정리 안 된 폴더라면 — 자동 구성
파일이 수백 개라 손으로 나눌 수 없다면, 「자동 구성」을 씁니다.
📂 살펴볼 폴더 고르기
① 무엇이 있나 자료·사진·기간을 세고, 어울리는 디자인을 이유와 함께 추천
② 주제로 묶기 AI 로 묶기 또는 AI 없이 그대로 쓰기
③ 갈래 고르기 만들 것만 체크
④ 만들기 게시본 폴더 + _메모.txt 자동 작성
3. 내 파일은 어디로 가나 ★
가장 중요한 부분입니다.
| |
|---|
| 📁 당신의 파일 | 컴퓨터를 떠나지 않습니다. 서버로 올라가지 않습니다. 저희는 볼 수 없습니다. |
| 🔑 API 키 | 파일에 심어 두지 않습니다. 당신이 직접 넣고, 어디에 둘지도 당신이 고릅니다. |
| 🤖 AI 를 켰을 때 | 자료의 제목 · 날짜 · 앞부분 200자만 갑니다. 본문 전체도, 파일도 보내지 않습니다. |
| 🌐 서버 | 없습니다. 이 페이지는 정적 HTML 이고, 모든 계산은 당신 브라우저에서 일어납니다. |
AI 를 안 쓰면 아무것도 인터넷으로 나가지 않습니다.
⚠️ 공개 전에 꼭 확인하세요.
공개: 켜기 로 바꾸고 배포하면 그 폴더의 내용이 인터넷에 올라갑니다.
학생 이름·상담 기록·연락처처럼 남에게 보이면 안 되는 것이 섞여 있지 않은지 먼저 보세요.
기본값은 항상 공개: 끄기 이고, 비공개인 것은 배포할 때 파일째 빠집니다.
4. AI 없이 되는 것 / AI 를 켜면 되는 것
기본은 「AI 안 씀」이고, 그 상태로 거의 전부 됩니다.
| AI 없이 | AI 를 켜면 |
|---|
| 폴더 훑어보기 (통계·기간·사진 수) | ✅ | ✅ 똑같음 |
| 디자인·배치 추천 | ✅ | ✅ 똑같음 |
| 주제로 묶고 이름 짓기 | 🔸 낱말 기반 (「사회」·「만들기」처럼 투박) | ✅ 제대로 |
| 말로 적은 방향 → 설정으로 | 🔸 적어 두기만 | ✅ 옮겨 적어 줌 |
| 게시본 폴더 만들기 | ✅ | ✅ |
| 웹 페이지 만들기 | ✅ | ✅ (AI 와 무관) |
| 디자인·템플릿·배치 고르기 | ✅ | ✅ (AI 와 무관) |
| 게시 사이트 만들기 | ✅ | ✅ (AI 와 무관) |
즉 AI 는 "더 잘"이지 "없으면 못 함"이 아닙니다.
쓸 수 있는 AI
비용은 당신 키로 당신이 냅니다. 940건을 묶는 데 대략 15만 토큰이 들었습니다.
키를 어디에 둘까
제작기가 세 가지를 줍니다. 키는 어떤 경우에도 만들어진 페이지나 저장소에 들어가지 않습니다.
| 어디에 | 언제 쓰나 |
|---|
| 이 창에서만 (기본) | 메모리 | 남의 컴퓨터, 잠깐 써 볼 때 |
| 이 브라우저에 기억 | localStorage | 내 컴퓨터, 자주 쓸 때 |
| 키 폴더에 파일로 | 고른 폴더의 키.env | 권함 — 메모장으로 열어 고칠 수 있고, CLI 도 같은 파일을 씁니다 |
키.env 는 이렇게 생긴 보통 글 파일입니다.
AI_곳=업스테이지
UPSTAGE_API_KEY=up_...
GEMINI_API_KEY=AIza...
🔒 키 폴더는 반드시 동기화·공개되지 않는 곳에.
권하는 자리는 C:\Users\<나>\.pkems 이고, 그 폴더 권한을 내 계정만 열도록 걸어 두세요.
도구가 구글 드라이브 안이나 도구 폴더 안은 거부합니다. 배포할 때도 키처럼 생긴 글자가 있으면 멈춥니다.
5. _메모.txt — 사람이 쓰는 단 하나의 파일
--- 위는 설정, 아래는 하고 싶은 말입니다.
제목: 스톱모션 10년
부제: 레고로 만든 것들
디자인: 발표-대형 결: 어둡게
배치: 갤러리 접기: 자동
공개: 끄기 순서: 날짜
강조: 3, 마치며 숨기기: 초안
사진크기: 크게 글크기: 크게
강조색: #b3261e 폭: 760
# '#' 로 시작하는 줄은 도구가 읽지 않습니다. 메모로 쓰세요.
---
사진 위주로 큼직하게, 3주차 글이 제일 중요해
| 항목 | 값 | 안 적으면 |
|---|
| 디자인 | 디자인/ 폴더 이름 (11종) | 기록장 |
| 결 | 디자인 안의 갈래 (밝게/어둡게 등) | 기본 |
| 배치 | 나열·바둑판·목록·슬라이드·갤러리·잡지·타임라인 | 나열 |
| 접기 | 자동 / 켜기 / 끄기 / 숫자 | 자동 (8건 넘으면 접음) |
| 공개 | 켜기 / 끄기 | 끄기 |
| 순서 | 파일명 / 날짜 | 파일명 |
| 강조 · 숨기기 | 번호 또는 제목 조각, 쉼표로 | — |
| 사진크기 · 글크기 | 크게 / 보통 / 작게 | 보통 |
| 노트공개 | --- 아랫단을 페이지에 보일지 | 끄기 |
| 색·글꼴·폭·모서리 등 | 그 값 | 디자인대로 |
아랫단(--- 아래)은 페이지에 나오지 않습니다. 도구에게 하는 말이니까요.
AI 를 켜면 그 말을 읽고 사진크기: 크게, 강조: 3 으로 옮겨 적자고 제안합니다.
적용은 당신이 누를 때만 하고, 본문 문장은 절대 건드리지 않습니다.
6. 만든 것을 남에게 보여주기
_메모.txt 에서 공개: 켜기 (3장의 경고를 먼저 읽으세요)- 만들어진 폴더를 Netlify Drop 에 끌어놓으면 주소가 나옵니다 — 계정 없이도 됩니다.
- 또는 GitHub Pages 로 (CLI 참고)
7. 요구 사항
| |
|---|
| 브라우저 | 크롬 · 엣지 (데스크톱). 폴더를 읽고 쓰는 File System Access API 가 필요합니다 |
| 주소 | https:// 또는 localhost — 파일을 더블클릭해서 열면 안 됩니다 |
| 설치 | 없음. Node·npm·계정 전부 필요 없습니다 |
작업 폴더가 구글 드라이브에 있으면 PC에 구글 드라이브 데스크톱을 설치하고, 파일 탐색기에서 그 폴더를 마우스 오른쪽 단추로 눌러 「오프라인 액세스 › 오프라인으로 사용」으로 둡니다. 「온라인에서만 사용 가능」 상태면 제작기가 파일을 읽을 때마다 내려받아 느리고, 인터넷이 끊기면 읽지 못합니다.
사파리·파이어폭스·모바일에서는 폴더 고르기가 안 됩니다 (8장 참고).
8. 아직 안 되는 것 (솔직하게)
- 사파리·파이어폭스·모바일 — 폴더 고르기가 안 됩니다. 크롬·엣지 데스크톱만.
- 앤트로픽으로 주제 묶기 — 아직입니다. 「말로 방향 정하기」에서는 됩니다.
- PDF·발표자료 본문 — 카드와 링크만 만듭니다.
- 공개 전 개인정보 점검 — 아직 없습니다. 직접 확인하세요.
- 큰 갈래 쪼개기 — 940건을 나누면 「기타」류가 200건 넘게 뭉칠 수 있습니다.
- 마크다운 중 각주·정의 목록·표 정렬·체크박스는 지원하지 않습니다.
9. 명령줄로 쓰기 (선택)
브라우저 없이도 됩니다. Node 18 이상.
node _탐색.mjs "폴더경로" --이름 내자료 # 뭐가 있나 (AI 없이) → 보고서.html
node _분류.mjs 내자료 --맛보기 # AI 로 주제 묶기 (60건만 먼저)
node _재구성.mjs 내자료 --진짜 # 갈래마다 게시본 폴더 만들기
node _전체만들기.mjs # 게시본 + 통합 사이트
node _올리기.mjs --푸시 # GitHub Pages 로 (비공개는 빼고)
키는 ~/.pkems/키.env 에 둡니다. 제작기와 같은 파일입니다.
node _시험/돌리기.mjs # 회귀 시험 — 「✓ 전부 맞음」 이 나와야 합니다
node _시험/솔라시험.mjs # AI 연결 확인
10. 어떻게 돌아가나
[폴더] → 읽기 → 블록 → 페이지(배치·접기) → 디자인 입히기 → index.html
제작.js 부품.css + 디자인/연결.css
- 디자인은 코드에 없습니다.
디자인/<이름>/연결.css 를 넣으면 목록에 늘어납니다.
- 브라우저와 Node 가 같은 코드를 씁니다.
공용/*.js 는 DOM 도 Node API 도 쓰지 않습니다.
- AI 는 얹는 층입니다. 없어도 1층이 온전히 돕니다.
원칙
- 게시본 폴더 밖에는 아무것도 쓰지 않습니다. 원본은 읽기만.
- 본문 문장을 손대지 않습니다. 요약도 윤문도 없이 조판만.
- 결과물(
index.html)을 직접 고치지 않습니다.
- 사람이 JSON·CSS 를 쓰게 하지 않습니다.
- 공개 기본값은
끄기.
- 조용히 넘어가지 않습니다 — 못 찾은 사진, 못 읽은 파일, 모르는 항목을 전부 세어서 말합니다.
- AI 없이도 1층은 돕니다.
- 고치면 시험을 돌립니다.
공용/*.js 에 DOM 을 쓰지 않습니다.- 키를 드라이브·저장소 안에 두지 않습니다.
더 자세한 것은 _인수인계서.md, 왜 이렇게 만들었는지는 _구상안.md.
라이선스 · 만든 이
개인 지식·경험 관리 체계(P-KEMS)의 한 부분으로 만들었습니다.
기록장과 변환기를 함께 쓰는 방법은 PKOS 도구 모음에 정리해 두었습니다.
디자인/브릭마을 은 외부에서 받은 kit 이라 라이선스가 분명해질 때까지 배포본에서 빠져 있습니다.
