sns-auto-builder 1.0.4 → 1.0.6

package/README.md

@@ -16,7 +16,7 @@ ChatGPT 웹을 몰아 만듭니다 — 둘 다 **본인 구독 계정**으로
 
 `dist/` 의 파일 **4개를 같은 폴더에** 두고 씁니다:
 
-1. **설치.bat** — 처음 한 번. Node · Claude Code 설치 + 로그인 2번(Claude, ChatGPT)
+1. **설치.bat** — 처음 한 번. 저장 폴더 선택 → Node · Claude Code 설치 → 로그인 2번(Claude, ChatGPT)
 2. **실행.bat** — 매번. 더블클릭하면 브라우저가 열립니다
 3. **config.bat** — 설정. **두 bat 이 이것을 읽습니다**
 4. **사용법.txt** — 안내
@@ -48,15 +48,24 @@ Claude Code 안에서는 슬래시 커맨드도 됩니다:
 브랜드 설정 · ChatGPT 로그인 · 결과물이 그대로 남습니다.
 
 ```
-%LOCALAPPDATA%\sns-auto-builder\        ← 기본
+<설치.bat 에서 고른 폴더>\           ← 기본값은 %LOCALAPPDATA%\sns-auto-builder
 ├── workspace 파일들 (output, knowledge, .chrome-profile, logs …)
 ├── browser\      puppeteer 크로미움 (약 2.6GB)
 └── npm-cache\    npx 캐시 (수 GB)
 ```
 
-C: 여유가 부족하면 **`config.bat`** 의 `set "DATA_DRIVE="` 를 `set "DATA_DRIVE=D:"` 처럼
-바꾸면 됩니다. 기존 워크스페이스는 최초 1회 자동으로 옮겨집니다.
-**USB·외장 드라이브는 쓰지 마세요** — 빼는 순간 로그인과 결과물이 사라집니다.
+`설치.bat` 1단계가 폴더 선택 창을 띄우고, 고른 경로를 `config.bat` 의
+`set "DATA_PATH="` 줄에 써넣습니다. 바꾸려면 `설치.bat` 을 다시 실행하면 됩니다.
+기존 워크스페이스는 최초 1회 자동으로 옮겨집니다.
+
+`config.bat` 을 손으로 고치지 마세요. 이 파일은 **UTF-8(BOM 없음) + CRLF** 여야 하고,
+둘 중 하나만 어긋나면 cmd 가 한글 섞인 줄을 잘못 읽어 **설정이 조용히 무시**됩니다
+(LF 로 저장된 적이 있었고, 그때 한글 경로가 통째로 날아갔습니다).
+`설치.bat` 은 PowerShell `WriteAllLines` 로 써서 이 조합을 보장합니다.
+잘못돼도 빌더 첫 화면에 **실제 사용 중인 폴더가 항상 표시**되므로 눈에 띕니다.
+
+**USB·외장 드라이브, 다운로드 폴더, OneDrive 동기화 폴더는 피하세요** —
+각각 분리 시 로그인 소실, 정리 중 삭제, 2.6GB 크로미움 무한 동기화 문제가 있습니다.
 
 > **경로는 한 곳에서만 계산합니다.** 예전에는 `실행.bat` · `설치.bat` · 스크립트가
 > 각자 경로를 계산했고, 한쪽만 바뀌자 **ChatGPT 로그인이 빌더가 안 보는 폴더에 저장**됐습니다.
@@ -213,9 +222,19 @@ npm publish
 
 `.bat` 은 패키지에 없어서 **자동 업데이트가 안 됩니다.** 고치면 팀원에게 4개를 다시 보내야 합니다.
 
-> `.bat` 은 **ASCII 로만** 쓰세요. cmd 는 콘솔 코드페이지로 파일을 읽는데 그 값이 PC 마다
-> 달라서, 한글 바이트가 명령어를 갉아먹습니다 (`echo.` 가 `ech` + `o.` 로 쪼개진 적 있음).
-> 한글 안내는 `사용법.txt` 와 Node 출력이 담당합니다.
+```bash
+node scripts/build-dist-zip.mjs    # dist/snsauto-builder.zip 재생성
+```
+
+이 스크립트가 묶기 전에 **CRLF · BOM 없음 · 명령부 ASCII** 를 검사하고, 어긋나면
+멈춥니다. zip 은 한글 파일명에 UTF-8 플래그(0x800)를 직접 세웁니다
+(`Compress-Archive` 는 이걸 안 세워서 푸는 쪽에 따라 이름이 깨집니다).
+
+> `.bat` 의 **명령과 주석은 ASCII 로만** 쓰세요. cmd 는 콘솔 코드페이지로 파일을 읽는데
+> 그 값이 PC 마다 달라서, 한글 바이트가 명령어를 갉아먹습니다
+> (`echo.` 가 `ech` + `o.` 로 쪼개진 적 있음). 한글 안내는 `사용법.txt` 와 Node 출력이 담당합니다.
+> 예외는 `config.bat` 의 `set "DATA_PATH=..."` 값 한 줄뿐이고,
+> 그건 파일이 UTF-8 + CRLF 일 때만 안전합니다.
 
 ---
 

package/bin/sns-auto-builder.mjs

@@ -28,6 +28,13 @@ function workspaceDir() {
 }
 
 // 매 실행 때 최신으로 덮어쓰는 것 = 도구 자체.
+// 빌더 전용 CDP 포트. 9222 는 크롬 디버깅의 관례 포트라 사용자 본인의 크롬,
+// chrome-devtools MCP, 다른 자동화 도구가 이미 쓰고 있기 쉽다. 겹치면 한쪽이
+// ::1 을, 다른 쪽이 127.0.0.1 을 잡아서 **엉뚱한 브라우저에 붙는다** — 조용히
+// 사용자 개인 크롬을 조종하게 되므로 관례 포트를 피한다.
+// scripts/chatgpt-image-gen.js 가 같은 기본값과 같은 환경변수를 쓴다.
+const CDP_PORT = process.env.SNS_BUILDER_CDP_PORT || '19222';
+
 const TOOL_FILES = ['server.mjs', 'index.html', 'CLAUDE.md'];
 const TOOL_DIRS = ['scripts', '.claude', 'templates', 'knowledge'];
 
@@ -131,8 +138,13 @@ if (argv.includes('--login')) {
   console.log(`  로그인만 하고 창은 그대로 두거나 닫으면 됩니다.\n`);
   // 포트를 반드시 붙인다. Chrome 은 user-data-dir 당 인스턴스 하나만 띄우므로,
   // 포트 없이 뜬 창이 남으면 빌더가 그 프로필로 포트를 못 연다.
+  //
+  // 9222 가 아니라 CDP_PORT 인 이유: 9222 는 크롬 디버깅의 관례 포트라 사용자
+  // 본인의 크롬이나 다른 도구가 이미 쓰고 있는 경우가 있다. 실제로 한쪽이
+  // ::1:9222 를, 다른 한쪽이 127.0.0.1:9222 를 잡아서, 빌더가 사용자 개인
+  // 크롬에 붙을 뻔했다. chatgpt-image-gen.js 와 같은 값을 써야 한다.
   spawn(exe, [
-    '--remote-debugging-port=9222',
+    `--remote-debugging-port=${CDP_PORT}`,
     `--user-data-dir=${profile}`,
     '--no-first-run', '--no-default-browser-check',
     'https://chatgpt.com',

package/index.html

@@ -382,10 +382,13 @@ button.go:focus-visible, button.quiet:focus-visible, .copy:focus-visible { outli
     </div>
     <div class="bar">
       <button class="quiet" id="brandOpen">⚙ 브랜드 컨셉 설정</button>
+      <button class="quiet" id="openHome" title="결과물이 저장되는 폴더를 엽니다">📂 작업 폴더 열기</button>
       <a class="quiet dl" id="logDl" href="/logs" download
          title="문제가 생기면 이 파일을 담당자에게 보내세요">🛟 문제 신고용 로그</a>
       <span class="fine" id="brandNow"></span>
     </div>
+    <!-- 설정이 조용히 무시돼도 여기서 바로 드러나게 실제 경로를 보여준다 -->
+    <p class="fine" id="homePath"></p>
   </section>
 
   <!-- 1.2 브랜드 설정 — 여기 값이 모든 카피·디자인의 기준이 된다 -->
@@ -1554,6 +1557,23 @@ async function openOutput(it) {
 $('outsOpen').onclick = () => { loadOutputs(); show('outs'); };
 $('outsBack').onclick = () => show('engine');
 
+// 데이터는 bat 옆이 아니라 안정된 위치에 쌓인다 (새 zip 을 다른 곳에 풀어도 살아남게).
+// 대신 어디인지 보이고, 눌러서 열 수 있어야 한다.
+$('openHome').onclick = async () => {
+  try {
+    const r = await fetch('/home/open', { method: 'POST' });
+    if (!r.ok) throw new Error('열지 못했습니다');
+  } catch (e) { alert(e.message); }
+};
+
+(async () => {
+  try {
+    const { output } = await (await fetch('/home')).json();
+    $('openHome').title = `결과물 폴더: ${output}`;
+    $('homePath').textContent = `저장 위치: ${output}`;
+  } catch { /* 경로 표시는 없어도 동작에 지장 없다 */ }
+})();
+
 loadBrand();
 
 $('go').onclick = generate;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sns-auto-builder",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "인스타 카드뉴스 자동 제작 빌더. Claude Code + ChatGPT 웹을 그대로 써서 API 키 없이 돌아갑니다.",
   "type": "module",
   "bin": {

package/scripts/build-dist-zip.mjs

@@ -0,0 +1,97 @@
+// 팀원에게 보내는 4파일 묶음을 만든다.
+//   node scripts/build-dist-zip.mjs
+//
+// store 모드(무압축) zip 을 직접 쓴다. 의존성을 늘리지 않으려는 것도 있지만,
+// Compress-Archive 가 한글 파일명에 UTF-8 플래그를 안 세워서 압축을 푸는
+// 쪽에 따라 이름이 깨지기 때문이다. 여기서는 0x800 을 직접 세운다.
+//
+// bat 은 UTF-8(BOM 없음) + CRLF 여야 한다. 둘 중 하나만 어긋나도 cmd 가
+// 한글이 섞인 줄을 조용히 잘못 읽어서 저장 폴더 설정이 무시된다.
+
+import { readFileSync, writeFileSync, readdirSync } from 'node:fs';
+import { join, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const DIST = join(dirname(fileURLToPath(import.meta.url)), '..', 'dist');
+const OUT = 'snsauto-builder.zip';
+
+const CRC_TABLE = Array.from({ length: 256 }, (_, n) => {
+  let c = n;
+  for (let k = 0; k < 8; k++) c = c & 1 ? 0xedb88320 ^ (c >>> 1) : c >>> 1;
+  return c >>> 0;
+});
+const crc32 = (buf) => {
+  let c = 0xffffffff;
+  for (const b of buf) c = CRC_TABLE[(c ^ b) & 0xff] ^ (c >>> 8);
+  return (c ^ 0xffffffff) >>> 0;
+};
+
+function checkBat(name, buf) {
+  if (buf[0] === 0xef && buf[1] === 0xbb && buf[2] === 0xbf) throw new Error(`${name}: BOM 이 있다`);
+  const text = buf.toString('utf8');
+  if (/(?<!\r)\n/.test(text)) throw new Error(`${name}: LF 줄바꿈이 남아 있다 (CRLF 여야 함)`);
+  for (const [i, line] of text.split('\r\n').entries()) {
+    // 경로 값 줄만 한글 허용. 명령·주석은 ASCII 여야 콘솔 코드페이지와 무관하게 읽힌다.
+    if (/[^\x00-\x7F]/.test(line) && !/^set "DATA_PATH=/.test(line)) {
+      throw new Error(`${name}:${i + 1}: bat 명령부에 비ASCII 문자 — ${line.trim()}`);
+    }
+  }
+}
+
+// 확장자 화이트리스트. dist 안에서 claude 를 한 번 실행했더니 .claude/.omc 가
+// 생겨서 zip 빌드가 깨진 적이 있다. 팀원에게 갈 것만 명시적으로 고른다.
+const files = readdirSync(DIST, { withFileTypes: true })
+  .filter((e) => e.isFile() && e.name !== OUT && /\.(bat|txt)$/.test(e.name))
+  .map((e) => e.name)
+  .sort();
+
+if (files.length !== 4) throw new Error(`4개여야 하는데 ${files.length}개: ${files.join(', ')}`);
+const locals = [];
+const central = [];
+let offset = 0;
+
+for (const name of files) {
+  const body = readFileSync(join(DIST, name));
+  if (name.endsWith('.bat')) checkBat(name, body);
+
+  const nameBuf = Buffer.from(name, 'utf8');
+  const crc = crc32(body);
+  const flags = 0x0800; // 파일명이 UTF-8 임을 표시
+
+  const local = Buffer.alloc(30);
+  local.writeUInt32LE(0x04034b50, 0);
+  local.writeUInt16LE(20, 4);
+  local.writeUInt16LE(flags, 6);
+  local.writeUInt32LE(crc, 14);
+  local.writeUInt32LE(body.length, 18);
+  local.writeUInt32LE(body.length, 22);
+  local.writeUInt16LE(nameBuf.length, 26);
+  locals.push(local, nameBuf, body);
+
+  const dir = Buffer.alloc(46);
+  dir.writeUInt32LE(0x02014b50, 0);
+  dir.writeUInt16LE(20, 4);
+  dir.writeUInt16LE(20, 6);
+  dir.writeUInt16LE(flags, 8);
+  dir.writeUInt32LE(crc, 16);
+  dir.writeUInt32LE(body.length, 20);
+  dir.writeUInt32LE(body.length, 24);
+  dir.writeUInt16LE(nameBuf.length, 28);
+  dir.writeUInt32LE(offset, 42);
+  central.push(dir, nameBuf);
+
+  offset += 30 + nameBuf.length + body.length;
+  console.log(`  ${name.padEnd(14)} ${String(body.length).padStart(6)} bytes`);
+}
+
+const centralBuf = Buffer.concat(central);
+const end = Buffer.alloc(22);
+end.writeUInt32LE(0x06054b50, 0);
+end.writeUInt16LE(files.length, 8);
+end.writeUInt16LE(files.length, 10);
+end.writeUInt32LE(centralBuf.length, 12);
+end.writeUInt32LE(offset, 16);
+
+const zip = Buffer.concat([...locals, centralBuf, end]);
+writeFileSync(join(DIST, OUT), zip);
+console.log(`\n${OUT}: ${files.length}개 파일, ${zip.length} bytes`);

package/scripts/chatgpt-image-gen.js

@@ -24,7 +24,7 @@
  * 브라우저:
  *   기본 — .chrome-profile 로 Chrome 을 직접 띄운다. 그 프로필로 이미 Chrome 이
  *          떠 있으면(예: chrome-devtools MCP) 프로필이 잠겨 실패한다. 그때는
- *   --browser-url http://127.0.0.1:9222  로 떠 있는 Chrome 에 붙어라.
+ *   --browser-url http://127.0.0.1:19222  로 떠 있는 Chrome 에 붙어라.
  */
 import { readFileSync, writeFileSync, mkdirSync, existsSync, statSync } from 'node:fs';
 import { join, resolve, dirname } from 'node:path';
@@ -35,7 +35,12 @@ const REPO_ROOT = resolve(dirname(fileURLToPath(import.meta.url)), '..');
 const BASE_W = 1080, BASE_H = 1350, SCALE = 2; // openai-image-gen.js / html-carousel-gen.js 와 동일
 const CHATGPT = 'https://chatgpt.com/';
 const PROFILE = join(REPO_ROOT, '.chrome-profile');
-const DEBUG_URL = 'http://127.0.0.1:9222'; // .mcp.json 이 MCP Chrome 에 열어두는 포트
+// 빌더 전용 CDP 포트. bin/sns-auto-builder.mjs 의 CDP_PORT 와 같은 값이어야 한다.
+// 9222(크롬 디버깅 관례 포트)를 쓰다가, 사용자 본인 크롬이 127.0.0.1:9222 를 잡고
+// 빌더 크롬은 ::1:9222 만 잡은 적이 있다. 그 상태에서 여기가 127.0.0.1 로 붙으면
+// **사용자 개인 크롬을 조종하게 된다.** 관례 포트를 피하는 이유다.
+const CDP_PORT = process.env.SNS_BUILDER_CDP_PORT || '19222';
+const DEBUG_URL = `http://127.0.0.1:${CDP_PORT}`;
 
 // 이미지 안에 한글이 들어가므로 정확도 가드를 붙인다 (openai-image-gen.js 의 KOREAN 과 같은 역할).
 const KOREAN = '한글은 오타 없이 정확히 그대로 렌더링할 것. 지정하지 않은 문구는 넣지 말 것.';

package/server.mjs

@@ -902,6 +902,22 @@ ${context || '(없음)'}
         .end(readFileSync(LOGO_SVG));
     }
 
+    // 작업 폴더 위치를 알려주고, 탐색기로 열어준다.
+    // 데이터를 bat 옆이 아니라 안정된 위치에 두는 대신, 찾기는 쉬워야 한다.
+    if (req.method === 'GET' && req.url === '/home') {
+      return json(200, { root: ROOT, output: join(ROOT, 'output') });
+    }
+    if (req.method === 'POST' && req.url === '/home/open') {
+      const target = join(ROOT, 'output');
+      try { mkdirSync(target, { recursive: true }); } catch { /* 이미 있으면 그만 */ }
+      const cmd = process.platform === 'win32' ? ['explorer', [target]]
+        : process.platform === 'darwin' ? ['open', [target]] : ['xdg-open', [target]];
+      // explorer 는 성공해도 0 이 아닌 코드를 내는 일이 있어 종료코드를 보지 않는다.
+      spawn(cmd[0], cmd[1], { detached: true, stdio: 'ignore' }).on('error', () => {}).unref();
+      log('작업 폴더 열기', target);
+      return json(200, { ok: true, path: target });
+    }
+
     // 브랜드 설정 — 스키마와 현재 값을 같이 준다 (화면이 스키마로 폼을 그린다)
     if (req.method === 'GET' && req.url === '/brand') {
       return json(200, { schema: JSON.parse(read('brand.schema.json')), values: readBrand(), logo: hasLogo() });