Vintage appMaker의 Tech Blog

[유튜브 링크] AI 에이전트 관련 교양 컨텐츠

VintageappMaker — Fri, 15 May 2026 07:03:31 +0900

1. 내용 핵심요약

2. 내용분석

[codex] image gen을 활용한 분필칠판 효과

VintageappMaker — Tue, 12 May 2026 08:45:59 +0900

codex에서는 image gen을 사용할 수 있다. 그래서 chatgpt에서 사용하던 imagen 기능을 codex와 같은 프로그램 내에서 사용가능하다. 결과적으로 특정 필터의 기능을 프롬프트로 만들고 데스크탑에 있는 이미지들을 일괄적으로 필터링하여 변환할 수 있다.

다음은 ChatGpt에서 생성한 이미지를 "템플릿으로 만들고자 한다. 지금의 이미지를 json 포맷으로 정의한다."와 같은 프롬프트를 실행하여 얻은 결과물이다.

1. 스킬등록

{
  "image_type": "세로형 칠판 정리 이미지",
  "aspect_ratio": "9:16",
  "style": {
    "background": "짙은 초록색 또는 검은색 칠판",
    "texture": "분필 가루, 지워진 흔적, 손글씨 느낌",
    "drawing_tool": "분필",
    "mood": "강의실 칠판 판서 스타일",
    "color_palette": [
      "흰색",
      "노란색",
      "분홍색",
      "하늘색"
    ]
  },
  "layout": {
    "orientation": "vertical",
    "top_left": "날짜 또는 주제 번호",
    "top_center": "큰 제목",
    "middle": "핵심 개념 도식화",
    "bottom": "번호가 있는 핵심 문장 정리",
    "spacing": "넓은 행간, 읽기 쉬운 배치"
  },
  "content_rules": {
    "source": "업로드된 이미지 또는 사용자가 제공한 메모",
    "summary_level": "핵심만 요약",
    "language": "한국어",
    "text_style": "칠판 손글씨",
    "diagram_rule": "도식화 가능한 내용은 간단한 그림, 화살표, 박스, 아이콘으로 표현",
    "avoid": [
      "과도한 텍스트",
      "복잡한 표",
      "작은 글씨",
      "불필요한 장식"
    ]
  },
  "prompt_template_ko": "업로드된 메모 이미지를 바탕으로 세로형 9:16 칠판 정리 이미지를 만든다. 배경은 짙은 초록색 칠판이고, 모든 글씨와 그림은 분필로 쓴 것처럼 표현한다. 상단에는 날짜와 큰 제목을 배치한다. 핵심 문장은 한국어로 요약하여 번호 목록으로 정리한다. 도식화할 수 있는 내용은 간단한 그림, 박스, 화살표, 아이콘으로 표현한다. 흰색 분필을 기본으로 사용하고, 중요한 단어는 노란색, 분홍색, 하늘색 분필로 강조한다. 전체적으로 강의실 칠판 판서처럼 보이게 하고, 글자는 읽기 쉽게 크게 배치한다.",
  "negative_prompt_ko": "사진 같은 종이 노트 배경, 작은 글씨, 빽빽한 문장, 과도한 장식, 복잡한 인포그래픽, 잘못된 한글, 흐릿한 텍스트, 잘린 문장, 영어 중심 구성"
}

위의 프롬프트를 codex에서 붙여넣기 후, "와 같은 프롬프트를 템플릿으로 한다. 이미지를 "칠판에 분필로 요약"이라고 하면 위의 프롬프트를 실행시켜 변환된 이미지를 만든다. 스킬로 등록한다." 를 프롬프트하면 스킬로 등록된다.

2. 스킬활용

"능력 테스트"를 위해 가장 "난해한" 이미지를 선택했다(지도정보).

1. 특정 폴더에 원본 이미지를 저장한다.

2. codex를 해당 폴더에서 실행한다.

3. 아래와 같은 프롬프트를 실행한다(@이미지 파일명을 통해 파일을 선택하면 [Image #1]으로 표시된다).

[Image #1] 파일을 칠판분필로 표현해서 remake.jpg로 저장해줘.

원본이미지

변환이미지

아래는 skill 정보를 압축한 것이다. .codex 아래 skills 폴더 하부에 풀면 바로 사용할 수 있다 .

chalk.zip

0.00MB

[codex] chrome 확장 플러그인을 이용한 자동화

VintageappMaker — Sun, 10 May 2026 08:59:11 +0900

codex에서 크롬확장 기능을 제공한다. 플러그인 형태로 제공함으로 codex의 플러그인 메뉴로 가서 설치를 하면 크롬 브라우저를 호출하고 그곳에서 codex 크롬확장을 확장하면 사용할 수 있다.

codex 크롬 확장이 주는 가장 큰 장점은 "어려운 설치" 없이 codex에서 프롬프트만으로 "웹페이지 정보수집 및 리포트 만들기"가 가능해진 것이다. 이전에는 codex내의 playwright mcp와 같은 개발자 지식이 어느정도 있는 mcp를 사용하여 웹페이지를 "스크래핑 또는 크롤링" 했지만 이제는 플러그인을 사용하면서 "소프트웨어"를 사용하듯 자유자제로 웹페이지 정보를 가져온 후, 리포트를 만들 수 있다.

1. 사용법

프롬프트 창에서 @chrome을 입력하면 크롬 확장을 설치할 수 있다.

2. 예제 1: 주식정보

예제를 보여주기 위해 주식정보를 리포트하는 방법을 정리한다.

1. 크롬에서 브라우저를 통해 두산주가를 검색한다.

2. 화면에 두산 주가가 그래프와 함께 나온다.

3. codex를 실행시킨다.

4. codex에서 @Chrome 을 입력하여 크롬 플러그인을 활성화한다.

5. 다음과 같은 프롬프트를 입력한다.

@chrome 현재 활성화된 페이지에서 주가 그래프와 그 정보를 요약하여 report.html에 저장한다.

그러면 실행시킨 크롬화면의 탭에서 다음과 같이 작업이 진행 중임을 알려준다.

그리고 다음과 같이 html이 완성된다.

위의 예제에서 사용한 프롬프트는 모호한 내용으로 했기에 대략적인 내용으로 리포트가 완성되었다. 그러므로 프롬프트가 구체적일 수록 원하는 정확하고 세밀한 리포트를 만들 수 있다.

3. 예제 2: 가격정보

예제를 보여주기 위해 크롬 브라우저에서 쿠팡의 아무 상품이나 이동한 후, 다음과 같은 프롬프트를 codex에서 요청한다.

그러면 실행되어 있는 브라우저를 chrome 확장이 제어하는 표시를 다음과 같이 보여준다.

그리고 진행과정을 codex에서 실시간으로 알려준다.

요청이 완료되면 어떤 식으로 작업하고 정리가 되었는 지 요약한 정보를 출력한다.

요청한 report가 html로 생성되었다.

4. 예제 3: 브라우저 자동화

크롬확장은 기본적으로 "브라우저 자동화"를 제공한다. 즉, 사용자가 프롬프트로 브라우저에서 할 행동들(웹페이지 이동, 검색, 정보입력, 마우스 처리 등등)을 지정하면 그대로 실행된다.

다음은 크롬확장을 이용한 자동화 프롬프트 예제이다.

@chrome 지금 브라우저에서 http://www.google.com으로 이동 후, 
검색창에 codex를 입력한 후 검색한다. 
그리고 그 결과 중에 codex 다운로드 페이지가 있으면 
그 사이트를 정보를 드래그로 선택한다.

다음은 결과 화면이다.

이를 이용하여 웹사이트 자동 로그인 및 자동 클릭과 같은 내용을 구현할 수 있다.

[codex] codex app에서 pet 기능

VintageappMaker — Thu, 7 May 2026 10:32:12 +0900

어떤 이유인지는 모르지만 codex app(데스크탑 프로그램)에서 pet 기능을 제공하기 시작했다. 일단, 귀엽고 codex의 알림을 데스크탑에서도 볼 수 있는 장점이 있다. 개인적으로 추가 확장기능(데스크탑 화면 또는 프로그램을 대상으로 프롬프트)을 기대하게 된다.

[codex] 윈도우 사용자 폴더정리 - 스킬등록

VintageappMaker — Wed, 6 May 2026 16:12:10 +0900

윈도우 사용자 폴더 정리

윈도우를 사용하다보면 다양한 프로그램들이 사용자 폴더 안에 캐쉬 정보를 저장한다. 그러나 삭제해도 남아있는 경우가 있으므로 수동으로 지워야 할 때도 있다.

윈도우 사용자 정보의 수동으로 지워야 할 폴더를 분석한다.
지우는 것은 사용자의 몫이다(위험성이 있으므로 자동은 불가함)

1. 프롬프트

아래 내용을 복사 후, 설치할 데스크탑의 codex에서 붙여넣기 한다. 그리고 맨 마지막에 스킬로 등록해줘라는 명령을 하면 된다.


# 윈도우 사용자 캐시 리포트 스킬 설치 프롬프트

아래 내용을 새 데스크탑의 Codex에게 그대로 붙여넣어 실행하세요. 이 프롬프트는 `windows-cache-report` 스킬을 생성하고, 윈도우 사용자 폴더의 캐시/임시/로그/빌드 산출물 후보를 분석해 한글 HTML 리포트를 만드는 스킬 파일을 설치하도록 지시합니다.

---

## 설치 요청 프롬프트

다음 Codex 스킬을 현재 사용자 홈의 `.codex\skills\windows-cache-report` 경로에 설치해줘. 기존 파일이 있으면 이 내용으로 갱신해줘. 필요한 폴더는 직접 생성하고, 설치 후 `pwsh -NoProfile -ExecutionPolicy Bypass -File "$env:USERPROFILE\.codex\skills\windows-cache-report\scripts\analyze_windows_cache.ps1" -RootPath "$env:USERPROFILE" -OutputPath "$env:USERPROFILE\windows-cache-report.html"` 명령으로 동작 확인까지 해줘. 실제 삭제는 절대 하지 말고 리포트만 생성해줘.

설치할 파일은 다음 4개다.

### 1. `SKILL.md`

```markdown
---
name: windows-cache-report
description: Analyze Windows user-profile subfolders to find cache, temp, log, crash, build, package, browser, and regenerated folders that are likely safe to remove, then generate a code_snipet-style report.html with infographics, folder lists, size ranking, and usability/risk analysis. Use when the user asks which Windows user folders can be deleted, cleaned, cached, temporary, or made into an HTML cleanup report.
---

# Windows Cache Report

Use this skill to inspect a Windows user folder, classify removable cache-like subfolders, and create a standalone `report.html`.

## Workflow

1. Run `scripts/analyze_windows_cache.ps1` from this skill.
2. Pass `-RootPath` when the target is not the current user's profile.
3. Pass `-OutputPath` when the report should be written somewhere specific.
4. Review the generated report before recommending deletion. Do not delete files unless the user explicitly asks.

Example:

```powershell
pwsh -NoProfile -ExecutionPolicy Bypass -File "$env:USERPROFILE\.codex\skills\windows-cache-report\scripts\analyze_windows_cache.ps1" -RootPath "$env:USERPROFILE" -OutputPath "$env:USERPROFILE\report.html"
```

## Classification Rules

- `Safe`: temp, crash dump, browser/GPU/code cache, log, known tool cache, and generated preview folders.
- `Usually safe`: dependency/build caches such as Gradle, npm, Expo, Puppeteer, Selenium, Firebase, Bundler, Conda package cache, and Hugging Face cache. Warn that downloads/builds may be slower afterward.
- `Review first`: `node_modules`, project `build/dist/out`, editor extension internals, model caches, game profile caches, or folders inside `Documents`, `OneDrive`, and app data with user content risk.
- `Avoid`: credentials, settings, user documents, sync folders, mail stores, source repositories, and system reparse-point folders.

## Report Expectations

The report must include:

- Total candidate size and candidate count.
- Risk distribution infographic.
- Top folders by reclaimable size.
- Full folder list with path, size, category, recommendation, and deletion impact.
- Usability analysis explaining what will happen after cleanup.
- A conservative deletion note that locked files and active app folders should be skipped.
- All visible report text must be written in Korean.
- Do not show folders whose calculated size is 0 bytes in the folder list or top candidates.
- Long folder names in charts must wrap instead of overlapping the graph area.
- The full folder list must be grouped in this risk order: Safe, Usually safe, Review first, Avoid. Within each group, sort by size descending.

The script uses `assets/report-template.html` as the base theme. Keep it self-contained: no CDN, no external images, and no network dependency.
```

### 2. `agents/openai.yaml`

```yaml
display_name: Windows Cache Report
short_description: Find removable Windows caches and build HTML.
default_prompt: Analyze this Windows user folder for cache, temp, log, build, and regenerated folders, then create a report.html with an infographic summary and folder list.
```

### 3. `assets/report-template.html`

```html
<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{{TITLE}}</title>
  <style>
    :root {
      --bg: #f7f8fb;
      --panel: #ffffff;
      --ink: #18202f;
      --muted: #667085;
      --line: #d9deea;
      --accent: #2563eb;
      --safe: #168255;
      --usual: #b7791f;
      --review: #b42318;
      --avoid: #667085;
    }
    * { box-sizing: border-box; }
    body { margin: 0; font-family: "Segoe UI", "Malgun Gothic", Arial, sans-serif; color: var(--ink); background: var(--bg); }
    header { background: #111827; color: white; padding: 34px 28px; }
    header .wrap, main { max-width: 1180px; margin: 0 auto; }
    h1 { margin: 0; font-size: 32px; letter-spacing: 0; }
    .subtitle { margin-top: 10px; color: #cbd5e1; line-height: 1.55; }
    main { padding: 24px 20px 48px; }
    section { margin-top: 22px; }
    h2 { margin: 0 0 12px; font-size: 20px; }
    .grid { display: grid; gap: 14px; }
    .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .card, .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 16px; }
    .metric-label { color: var(--muted); font-size: 13px; }
    .metric-value { margin-top: 8px; font-size: 28px; font-weight: 750; }
    .metric-note { margin-top: 6px; color: var(--muted); font-size: 12px; }
    .bars { display: grid; gap: 10px; }
    .bar-row { display: grid; grid-template-columns: minmax(180px, 2fr) minmax(160px, 3fr) 90px; gap: 10px; align-items: center; font-size: 13px; }
    .bar-label { min-width: 0; overflow-wrap: anywhere; word-break: break-word; line-height: 1.35; }
    .bar-size { white-space: nowrap; text-align: right; }
    .track { height: 12px; border-radius: 999px; background: #edf1f7; overflow: hidden; }
    .fill { height: 100%; border-radius: 999px; background: var(--accent); }
    .fill.safe { background: var(--safe); }
    .fill.usual { background: var(--usual); }
    .fill.review { background: var(--review); }
    .fill.avoid { background: var(--avoid); }
    table { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
    th, td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-size: 13px; }
    th { background: #eef2f8; color: #344054; font-size: 12px; }
    tr:last-child td { border-bottom: 0; }
    .path { font-family: Consolas, "Courier New", monospace; word-break: break-all; }
    .pill { display: inline-block; border-radius: 999px; padding: 3px 9px; font-size: 12px; font-weight: 700; color: white; white-space: nowrap; }
    .pill.safe { background: var(--safe); }
    .pill.usual { background: var(--usual); }
    .pill.review { background: var(--review); }
    .pill.avoid { background: var(--avoid); }
    .analysis { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    ul { margin: 8px 0 0 20px; padding: 0; line-height: 1.65; color: #344054; }
    .small { color: var(--muted); font-size: 12px; line-height: 1.5; }
    @media (max-width: 860px) {
      .cards, .analysis { grid-template-columns: 1fr; }
      .bar-row { grid-template-columns: 1fr; }
      .bar-size { text-align: left; }
      th, td { font-size: 12px; }
    }
  </style>
</head>
<body>
  <header>
    <div class="wrap">
      <h1>{{TITLE}}</h1>
      <div class="subtitle">{{SUBTITLE}}</div>
    </div>
  </header>
  <main>
    <section class="grid cards">
      {{METRIC_CARDS}}
    </section>
    <section class="analysis">
      <div class="panel">
        <h2>위험도 분포</h2>
        <div class="bars">{{RISK_BARS}}</div>
      </div>
      <div class="panel">
        <h2>사용성 분석</h2>
        {{USABILITY}}
      </div>
    </section>
    <section>
      <h2>용량 상위 정리 후보</h2>
      <div class="panel">
        <div class="bars">{{TOP_BARS}}</div>
      </div>
    </section>
    <section>
      <h2>폴더 리스트</h2>
      {{FOLDER_TABLE}}
      <p class="small">주의: 이 리포트는 삭제 후보 분석입니다. 실제 삭제 전에는 관련 앱을 종료하고, 잠긴 파일은 건너뛰며, 프로젝트/문서/동기화 폴더는 직접 확인하세요.</p>
    </section>
  </main>
</body>
</html>
```

### 4. `scripts/analyze_windows_cache.ps1`

```powershell
param(
  [string]$RootPath = $env:USERPROFILE,
  [string]$OutputPath = (Join-Path $env:USERPROFILE "report.html"),
  [int]$Depth = 4
)

$ErrorActionPreference = "SilentlyContinue"
$skillRoot = Split-Path -Parent (Split-Path -Parent $MyInvocation.MyCommand.Path)
$templatePath = Join-Path $skillRoot "assets\report-template.html"

function ConvertTo-HtmlText([object]$value) {
  $text = [string]$value
  return [System.Net.WebUtility]::HtmlEncode($text)
}

function Format-Size([double]$bytes) {
  if ($bytes -ge 1GB) { return "{0:N1} GB" -f ($bytes / 1GB) }
  if ($bytes -ge 1MB) { return "{0:N1} MB" -f ($bytes / 1MB) }
  if ($bytes -ge 1KB) { return "{0:N1} KB" -f ($bytes / 1KB) }
  return "{0:N0} B" -f $bytes
}

function ConvertTo-KoreanRisk([string]$risk) {
  switch ($risk) {
    "Safe" { return "안전" }
    "Usually safe" { return "대체로 안전" }
    "Review first" { return "먼저 검토" }
    "Avoid" { return "삭제 금지" }
    default { return $risk }
  }
}

function Get-RiskSortOrder([string]$risk) {
  switch ($risk) {
    "Safe" { return 1 }
    "Usually safe" { return 2 }
    "Review first" { return 3 }
    "Avoid" { return 4 }
    default { return 99 }
  }
}

function Get-FolderSize([string]$path) {
  $sum = (Get-ChildItem -LiteralPath $path -Force -Recurse -File -ErrorAction SilentlyContinue | Measure-Object Length -Sum).Sum
  if ($null -eq $sum) { return 0 }
  return [double]$sum
}

function New-Classification($risk, $class, $category, $recommendation, $impact) {
  return @{
    Risk = $risk
    Class = $class
    Category = $category
    Recommendation = $recommendation
    Impact = $impact
  }
}

function Get-Category([System.IO.DirectoryInfo]$dir) {
  $path = $dir.FullName
  $name = $dir.Name
  $lower = $path.ToLowerInvariant()

  $isUserDataArea = $lower -match "\\(documents|downloads|desktop|pictures|videos|music|onedrive)\\"
  $isEditorExtension = $lower -match "\\\.(vscode|cursor|windsurf)\\extensions\\"

  if ($lower -match "\\(\.ssh|\.aws|\.azure|\.gnupg|outlook|mail|contacts|source|ideaprojects|documents|onedrive)(\\|$)") {
    return New-Classification "Avoid" "avoid" "사용자/설정 데이터" "삭제하지 않음" "자격 증명, 문서, 소스 코드, 메일, 동기화 데이터가 포함될 수 있습니다."
  }

  if ($isEditorExtension -and $name -match "^(node_modules|dist|out|build)$") {
    return New-Classification "Review first" "review" "에디터 확장 파일" "확장 프로그램 제거/재설치로 관리" "직접 삭제하면 VS Code, Cursor, Windsurf 확장이 손상될 수 있습니다."
  }

  if ($isUserDataArea -and $name -match "(?i)(cache|temp|logs?|crash|preview)") {
    return New-Classification "Review first" "review" "사용자 영역 앱 캐시" "내용을 먼저 확인" "앱 캐시나 로그일 가능성이 있지만 사용자 작업 파일과 가까운 위치입니다."
  }

  if ($name -match "(?i)^(temp|tmp|\.tmp|crashdumps|crashes|crashpad|logs?|gpucache|code cache|cache|cachestorage|shadercache|grshadercache|dawn.*cache|d3dscache|preview-cache|preview cache files|temporary internet files)$") {
    return New-Classification "Safe" "safe" "임시/렌더링/로그 캐시" "관련 앱 종료 후 삭제" "대체로 자동 재생성됩니다. 실행 중인 앱의 파일은 잠겨 있을 수 있습니다."
  }

  if ($lower -match "\\\.cache\\(puppeteer|selenium|firebase|vscode-ripgrep)(\\|$)" -or $lower -match "\\(npm-cache|package cache|electron-builder|squirreltemp|squirrelclowdtemp)(\\|$)") {
    return New-Classification "Usually safe" "usual" "도구 다운로드 캐시" "삭제 가능" "다음 실행 시 브라우저, 드라이버, 패키지를 다시 다운로드할 수 있습니다."
  }

  if ($lower -match "\\\.cache\\huggingface(\\|$)") {
    return New-Classification "Review first" "review" "AI 모델 캐시" "모델 사용 여부를 먼저 확인" "삭제하면 나중에 큰 모델을 다시 다운로드해야 할 수 있습니다."
  }

  if ($lower -match "\\\.gradle\\(caches|\.tmp)(\\|$)" -or $lower -match "\\(\.expo\\.*cache|android-apk-cache|native-modules-cache|schema-cache|template-cache|versions-cache)(\\|$)" -or $lower -match "\\\.(bundle|conda)\\.*cache(\\|$)") {
    return New-Classification "Usually safe" "usual" "빌드/패키지 캐시" "삭제 가능" "다음 빌드나 패키지 설치가 느려지고 네트워크 다운로드가 필요할 수 있습니다."
  }

  if ($name -match "(?i)^node_modules$|^build$|^dist$|^out$|^\.pytest_cache$|^\.mypy_cache$|^\.ruff_cache$|^\.next$") {
    return New-Classification "Review first" "review" "개발 산출물" "프로젝트 맥락을 먼저 확인" "대체로 다시 빌드하거나 설치할 수 있지만 현재 작업에 바로 필요할 수 있습니다."
  }

  if ($name -match "(?i)(cache|tmp|temp|logs?|crash|shader|gpu|preview)") {
    return New-Classification "Review first" "review" "이름 기반 후보" "내용을 먼저 확인" "캐시처럼 보이지만 앱별 의미를 확인해야 합니다."
  }

  return $null
}

if (-not (Test-Path -LiteralPath $RootPath)) {
  throw "RootPath not found: $RootPath"
}

$rootItem = Get-Item -LiteralPath $RootPath -Force
$dirs = @(Get-ChildItem -LiteralPath $rootItem.FullName -Force -Directory -Recurse -Depth $Depth -ErrorAction SilentlyContinue | Sort-Object { $_.FullName.Length }, FullName)
$selectedRoots = New-Object System.Collections.Generic.List[string]
$items = foreach ($dir in $dirs) {
  $full = $dir.FullName.TrimEnd('\')
  $underSelected = $false
  foreach ($selected in $selectedRoots) {
    if ($full.StartsWith($selected + "\", [System.StringComparison]::OrdinalIgnoreCase)) {
      $underSelected = $true
      break
    }
  }
  if ($underSelected) { continue }

  $category = Get-Category $dir
  if ($null -ne $category) {
    $selectedRoots.Add($full) | Out-Null
    $size = Get-FolderSize $dir.FullName
    if ($size -le 0) { continue }
    [PSCustomObject]@{
      Path = $dir.FullName
      Name = $dir.Name
      Bytes = $size
      Size = Format-Size $size
      Risk = $category.Risk
      Class = $category.Class
      Category = $category.Category
      Recommendation = $category.Recommendation
      Impact = $category.Impact
      LastWrite = $dir.LastWriteTime
    }
  }
}

$items = @($items | Sort-Object Bytes -Descending)
$totalBytes = ($items | Measure-Object Bytes -Sum).Sum
if ($null -eq $totalBytes) { $totalBytes = 0 }
$safeBytes = ($items | Where-Object Risk -eq "Safe" | Measure-Object Bytes -Sum).Sum
$usualBytes = ($items | Where-Object Risk -eq "Usually safe" | Measure-Object Bytes -Sum).Sum
$reviewBytes = ($items | Where-Object Risk -eq "Review first" | Measure-Object Bytes -Sum).Sum
$avoidBytes = ($items | Where-Object Risk -eq "Avoid" | Measure-Object Bytes -Sum).Sum
foreach ($v in "safeBytes","usualBytes","reviewBytes","avoidBytes") {
  if ($null -eq (Get-Variable $v).Value) { Set-Variable $v 0 }
}

function New-Metric($label, $value, $note) {
  return "<div class=""card""><div class=""metric-label"">$(ConvertTo-HtmlText $label)</div><div class=""metric-value"">$(ConvertTo-HtmlText $value)</div><div class=""metric-note"">$(ConvertTo-HtmlText $note)</div></div>"
}

function New-Bar($label, [double]$bytes, [double]$maxBytes, $className) {
  $pct = 0
  if ($maxBytes -gt 0) { $pct = [math]::Max(2, [math]::Round(($bytes / $maxBytes) * 100, 1)) }
  return "<div class=""bar-row""><div class=""bar-label"">$(ConvertTo-HtmlText $label)</div><div class=""track""><div class=""fill $className"" style=""width:$pct%""></div></div><div class=""bar-size"">$(ConvertTo-HtmlText (Format-Size $bytes))</div></div>"
}

$riskMax = @($safeBytes, $usualBytes, $reviewBytes, $avoidBytes, 1) | Measure-Object -Maximum | Select-Object -ExpandProperty Maximum
$riskBars = @(
  New-Bar "안전" $safeBytes $riskMax "safe"
  New-Bar "대체로 안전" $usualBytes $riskMax "usual"
  New-Bar "먼저 검토" $reviewBytes $riskMax "review"
  New-Bar "삭제 금지" $avoidBytes $riskMax "avoid"
) -join "`n"

$top = @($items | Where-Object { $_.Risk -ne "Avoid" -and $_.Bytes -gt 0 } | Select-Object -First 8)
$topMax = @($top | ForEach-Object Bytes; 1) | Measure-Object -Maximum | Select-Object -ExpandProperty Maximum
$topBars = if ($top.Count -gt 0) {
  ($top | ForEach-Object { New-Bar $_.Path $_.Bytes $topMax $_.Class }) -join "`n"
} else {
  "<p class=""small"">정리 후보가 없습니다.</p>"
}

$folderRows = @($items |
  Where-Object { $_.Bytes -gt 0 } |
  Sort-Object @{ Expression = { Get-RiskSortOrder $_.Risk }; Ascending = $true }, @{ Expression = "Bytes"; Descending = $true }, Path)

$rows = ($folderRows | ForEach-Object {
  "<tr><td class=""path"">$(ConvertTo-HtmlText $_.Path)</td><td>$(ConvertTo-HtmlText $_.Size)</td><td><span class=""pill $($_.Class)"">$(ConvertTo-HtmlText (ConvertTo-KoreanRisk $_.Risk))</span></td><td>$(ConvertTo-HtmlText $_.Category)</td><td>$(ConvertTo-HtmlText $_.Recommendation)</td><td>$(ConvertTo-HtmlText $_.Impact)</td><td>$(ConvertTo-HtmlText $_.LastWrite)</td></tr>"
}) -join "`n"
if ([string]::IsNullOrWhiteSpace($rows)) {
  $rows = "<tr><td colspan=""7"">표시할 정리 후보가 없습니다.</td></tr>"
}
$folderTable = "<table><thead><tr><th>경로</th><th>크기</th><th>위험도</th><th>분류</th><th>권장 조치</th><th>삭제 영향</th><th>마지막 수정</th></tr></thead><tbody>$rows</tbody></table>"

$usability = @"
<ul>
  <li>안전 항목은 관련 앱을 종료한 뒤 삭제해도 대체로 자동 재생성됩니다.</li>
  <li>대체로 안전 항목은 첫 실행, 빌드, 패키지 설치, 브라우저 자동화가 느려질 수 있습니다.</li>
  <li>먼저 검토 항목에는 프로젝트 의존성, AI 모델, 사용자 작업 파일 주변 캐시가 포함될 수 있습니다.</li>
  <li>삭제 금지 항목에는 자격 증명, 문서, 소스 코드, 동기화 파일, 앱 설정이 포함될 수 있습니다.</li>
</ul>
"@

$metrics = @(
  New-Metric "전체 후보 용량" (Format-Size $totalBytes) "발견된 캐시성 폴더 합계"
  New-Metric "후보 폴더 수" $items.Count "검색 깊이: $Depth"
  New-Metric "우선 정리 가능" (Format-Size ($safeBytes + $usualBytes)) "안전 + 대체로 안전"
  New-Metric "검토 필요" (Format-Size $reviewBytes) "수동 확인 권장"
) -join "`n"

$template = Get-Content -LiteralPath $templatePath -Raw -Encoding UTF8
$html = $template.Replace("{{TITLE}}", "윈도우 사용자 폴더 캐시 정리 리포트")
$html = $html.Replace("{{SUBTITLE}}", "대상: $(ConvertTo-HtmlText $rootItem.FullName) / 생성일: $(Get-Date -Format 'yyyy-MM-dd HH:mm:ss')")
$html = $html.Replace("{{METRIC_CARDS}}", $metrics)
$html = $html.Replace("{{RISK_BARS}}", $riskBars)
$html = $html.Replace("{{USABILITY}}", $usability)
$html = $html.Replace("{{TOP_BARS}}", $topBars)
$html = $html.Replace("{{FOLDER_TABLE}}", $folderTable)

$outDir = Split-Path -Parent $OutputPath
if ($outDir -and -not (Test-Path -LiteralPath $outDir)) {
  New-Item -ItemType Directory -Path $outDir -Force | Out-Null
}
Set-Content -LiteralPath $OutputPath -Value $html -Encoding UTF8

[PSCustomObject]@{
  OutputPath = $OutputPath
  CandidateCount = $items.Count
  TotalSize = Format-Size $totalBytes
  SafeAndUsuallySafe = Format-Size ($safeBytes + $usualBytes)
  ReviewFirst = Format-Size $reviewBytes
} | Format-List
```

설치 후 사용자가 “윈도우 사용자 폴더에서 지워도 되는 캐시/임시 폴더 분석”이라고 요청하면 이 스킬을 사용해 현재 사용자 폴더를 분석하고 HTML 리포트를 생성해줘.

2. 사용법

윈도우 사용자 폴더에서 지워도 되는 캐시/임시 폴더 분석

빅테크의 AI 비지니스의 위험성

VintageappMaker — Mon, 4 May 2026 11:09:06 +0900

빅테크 기업들이 AI를 통해 설계한 비즈니스 전략과 마케팅 수법, 그리고 이에 맞선 기업의 생존 전략을 비개발자도 이해하기 쉽게 표로 정리.

1. 우리가 AI를 쓰며 실제로 지불하고 있는 '4가지 비용'

빅테크는 AI가 무료인 것처럼 광고하지만, 실제로는 다양한 형태의 비용을 사용자에게 청구하고 있다.

직접 비용 (Money)	서비스를 이용하기 위해 매달 내는 구독료	월 $20 ~ $200 수준의 현금
데이터 비용 (Data)	우리가 입력한 질문과 자료가 AI의 학습 재료	질문 내용(프롬프트), 업무 기록
주의력 비용 (Attention)	무료 사용 시 광고를 보거나 마케팅에 노출되는 시간	서비스 내 광고 노출, 시간 소모
종속성 비용 (Lock-in)	특정 플랫폼(MS, 구글 등)에 업무 환경에 종속	플랫폼 이동의 어려움, 생태계 종속

2. 빅테크의 '가두리 양식' (Hook and Switch) 3단계 전략

처음엔 달콤한 혜택으로 유혹하고, 나중에는 수익을 극대화하는 전형적인 마케팅 수법.

1단계	유인 (Hook)	저렴한 정액제로 "모든 데이터를 다 넣으라"며 무제한 사용 권장	"AI 없이는 일 못 하겠다"는 습관 형성
2단계	종속 (Switch)	충분히 길들여지면 슬그머니 사용량에 따른 '종량제' 도입	AI 도구 없이는 업무 마비, 사실상 해지 불가
3단계	수확 (Harvest)	비효율적인 토큰 소비를 방치하며 높은 요금 부과	'요금 폭탄' 발생 및 빅테크의 매출 극대화

3. '바이브 코딩' 마케팅의 환상 vs 비즈니스 현실

※ 용어 설명 - 토큰(Token): AI가 글자를 읽고 쓰는 단위로, 택시 요금기처럼 많이 쓸수록 비용이 상승.

"느낌(Vibe)만으로 앱을 만드세요"	비개발자 고객층을 넓혀 구독자를 늘리려는 전략
"전체 코드를 통째로 AI에 넣으세요"	토큰 과소비를 유도하여 API 매출을 올리려는 수법 (Token Bleeding)
"AI가 알아서 다 해줍니다"	사용자가 내부 구조를 모르게 만들어 자사 서비스에 평생 종속시킴
"생산성이 10배 올라갑니다"	투자 유치와 주가 부양을 위한 과장된 마케팅(Hype)

4. 실사례 기반: 마케터와 비즈니스맨을 위한 미래 생존 전략

앞으로 기업은 무분별한 AI 사용보다는 '효율적인 분리'가 핵심 경쟁력.

역할	기획, 시스템 설계, 초안 작성	반복적인 운영 업무, 데이터 처리
비용	높음 (대형 AI 모델 사용)	0원에 수렴 (스크립트, 자동화 툴 활용)
특징	창의적이지만 결과가 매번 다를 수 있음	규칙에 따라 정확하고 빠른 결과 도출
비즈니스 의견	초기 기획 단계에서만 '인턴'처럼 활용	운영 단계에서는 자체 자동화 툴(RPA)로 대체하여 운영비 절감

향후 변화될 방향에 대한 의견

'컨텍스트 다이어트'의 시대: AI에게 무조건 질문을 길게 하는 것이 능력이 아니다. 필요한 정보만 선별해 입력하여 '토큰 요금'을 아끼는 설계 능력이 비즈니스맨의 필수 역량이 될 것.
'AI-Free' 프리미엄 마케팅: AI 콘텐츠가 범람하면서, 역설적으로 **"이 콘텐츠는 사람이 직접 만들었습니다"**라는 인증(AI-Free 라벨)이 고급 브랜드의 차별화 요소로 부상할 것.
자체 자동화 기술 보유: 빅테크의 종량제 요금 폭탄을 피하기 위해, AI로 만든 코드를 파이썬 스크립트나 내부 시스템으로 고착화시켜 운영비를 낮추는 기업만이 장기적으로 살아남을 수 있다.

AI 비용과 선별적 활용

VintageappMaker — Sat, 2 May 2026 07:38:47 +0900

AI 도입의 한계와 비용 관리 체계

항목주요 내용 및 실태 비즈니스적 시사점

인간 대체 불가 사유	AI는 결과물에 대한 법적·윤리적 책임을 질 수 없으며, 기존 데이터의 평균치를 산출하는 특성상 독창적인 브랜드 정체성 구축에 한계가 명확하다. 또한, 인간 사이의 깊은 신뢰 관계 형성이나 비판적 사고를 통한 문제 정의는 여전히 인간 고유의 영역으로 남는다.	최종 의사결정과 책임이 따르는 업무는 인간이 주도해야 한다.
비용 문제의 요인	단순 월정액을 넘어 사용량 기반(Pay-as-you-go) 과금이 확산됨에 따라 이용자 증가 시 운영비가 기하급수적으로 늘어나는 '빌 쇼크(Bill Shock)' 리스크가 상존한다. 특히 기존 ERP/CRM 시스템 연동 및 데이터 정제에 초기 구축비의 30~50%가 투입된다.	기술 도입 비용보다 유지 및 확장을 위한 숨은 비용이 더 크다.
비용 절감 및 최적화	고가의 거대 모델 대신 비용이 1/10 수준인 소형 언어 모델(SLM)을 작업 난이도에 따라 배치하는 '모델 라우팅' 전략이 필수적이다. 또한, 토큰 소모를 최소화하는 프롬프트 최적화와 보안을 위한 온프레미스 구축을 통해 장기적 운영 비용을 통제한다.	'AI FinOps'를 통한 철저한 가성비 중심의 운영이 요구된다.

요약 및 제언 AI는 책임 주체의 부재와 창의성의 한계로 인해 인간을 완전히 대체할 수 없으며, 무분별한 확장 시 API 호출 및 인프라 통합 과정에서 막대한 운영비 손실을 야기한다. 따라서 소형 모델(SLM)을 활용한 비용 효율화와 성과(ROI)가 확실한 업무 위주의 선별적 도입을 통해 경영 효율성을 극대화하는 전략이 필요하다.

[vibe coding #3] 비개발자는 어떻게 바이브 코딩을 시작해야 하나?

VintageappMaker — Fri, 1 May 2026 09:08:26 +0900

눈에 보여야 감이 잡힌다!

[개발자의 조언]
남들이 아무리 좋다고 해도 내가 할 수 없다면 무용지물이다. 그런 점에서 처음에는 내가 가장 쉽게 할 수 있는 방법을 찾는 것이 중요하다. 많은 사람들이 바이브 코딩이 혁신적이다 무엇이든 가능하다라고 말하지만 현실에서 바이브 코딩을 성공하는 사람들은 IT에 대한 이해도가 높거나 종사자들인 경우가 대부분이다. 단어조차 어려운 "소스"와 "에디터"라는 말이 나오는 순간 머리가 멈추는 것은 당연한 것이다.

1. 생각없이 따라하기

2. 조금만 신경쓰기

3. 재대로 시작하기

에 따라 가능한 방법이 달라진다. 그리고 반드시 숙지해야 할 것은 "웹앱(HTML, Javascript)"이 바이브 코딩에서 가장 쉬운 방법으로 완성도가 높은 결과물을 얻는다. 프로그래밍에 대한 이해도가 높다면 다른 종류(안드로이드, iOS, PC용 프로그램)을 만들 수 있지만 프로그래밍에 대한 이해도가 없다면 다른 분야는 프롬프트를 만들 수도 프롬프트로 나온 결과를 이해할 수도 없다.그러므로 반드시 "웹앱"부터 만드는 것을 잊지 말아야 한다.

1. 생각없이 하기

가장 좋은 방법은 모바일(핸드폰, 태블릿)이나 데스크탑 환경에서 크롬 브라우저를 열고 주소창에 간단하게 원하는 웹앱(HTML)을 입력하고 실행한다(엔터 또는 실행버튼).

여기서는 "일정관리 웹앱을 만들어줘"를 입력했다.

그러면 크롬은 구글검색과 연동을 한다. 크롬창에 입력된 내용은 기본적으로 주소로 이동하거나 "요청"으로 받아들여 구글검색에서 처리한다. 구글검색은 AI와 연동되기 때문에 Gemini에서 입력을 프롬프트로 인식하여 처리하게 된다.

그런데 이렇게 생성된 결과는 일반인들에게 너무 어려운 내용이다. HTML이 뭔지도 프로그래밍이 뭔지도 모르는 사람들이 프로젝트 설정방법과 에디터에서 어떤 값을 변경하라고 설명하면 100% 포기하게 된다. 그러므로 크롬 브라우저에서 프롬프트로 웹앱을 만들 때에는 적어도 HTML에 대한 기본이해가 있거나 웹앱에 대한 공부가 된 사람들만 가능하다.

2. 조금만 신경쓰기

조금만 신경을 쓰면 일반인들도 웹앱을 만들 수 있다. 성능 좋고 강력한 웹앱 저작 프로그램들이 존재하지만 2026년 4월 현재에는 gemini의 canvas 기능을 "따라하기"식으로 사용하면 누구나 웹 앱을 만들 수 있다. 단지, 반드시 데스크탑(PC)에서 작업해야 한다.

(1) 먼저 제미나이에 접속한다.

(2) 새 채팅을 눌러 다음과 같이 프롬프트 한다.

여기서 중요한 것은 도구로 Canvas를 선택해야 한다는 것이다.

(3) > 버튼을 눌러 실행한다. 우측 상단의 버튼이 미리보기가 기본으로 되어 있기에 결과를 바로 볼 수 있다.

위와 같이 우측에 웹앱의 결과물이 보인다. 참고로 AI는 그 때마다 다른 결과를 만든다. 그리고 한 번에 만들지 못하고 에러를 만드는 경우가 적지 않다.

(4) 실행된 웹이 작동하는 지 클릭을 하며 테스트 한다.

3. 재대로 시작하기

바이브 코딩을 재대로 시작하려면 웹환경에서는 어림도 없다. 결코 웹에서 모든 것을 만들 수 있다는 말에 현혹되어서는 안된다. 그런 말을 하는 사람들이 거짓말을 하는 것은 아닌데, 몇 몇 특수상황에서만 웹에서 바이브 코딩이 가능한 것이다. 실제로 소프트웨어를 개발하는 작업을 해야 한다면 데스크탑(PC)에서 해야 한다. 심지어 cli 환경(command line interface)에서 해야 하므로 터미널 사용법 학습이 필수가 된다.

그러면 비개발자 입장에서 재대로 된 바이브 코딩을 하려면 어떻게 해야 할까? codex, gemini cli, antigravity, cursor 등등 수도없는 전문적이고 강력한 툴(개발환경)이 있다. 그러나 입문자라면 "클로드를 강력히 추천"한다. 괜히 claude 이야기를 사람들이 하는 것이 아니다.

(1) 클로드 데스크탑 을 설치했다면 프로그램을 실행시킨다. 그리고 새로운 채팅에 다음과 같은 프롬프트를 실행시킨다.

캘린더와 연동하는 웹앱을 만들어줘. 자체 캘린더로 데이터를 관리한다. API 연동없다.

위와 같이 claude가 프로그래밍을 만드는 과정을 보여준다. 처음에는 단순히 보고만 있어도 문제는 없지만, 프로그램에 기능이 추가됨에 따라 진행상황을 반드시 이해해야 하는 순간이 온다. 나중에 큰 문제(버그, 보안, 잘못된 설계)가 발생할 수도 있기 때문이다.

(2) 클로드의 장점은 강력한 기능과 더불어 직관적인 기능을 제공한다는 점이다.

캘린더 웹앱이 완성되었다.

(3) 지금 만든 웹앱을 저장하려면 우측 상단의 ... 버튼을 눌러 다운로드를 실행한다.

(4) 그러면 html이 데스크탑에 저장된다. 이제 생성된 HTML 파일을 내 데스크탑에서 클릭하여 사용, 친구에게 공유, 아니면 서버를 만들어서 업로드를 할 수 있다.

calendar_webapp.html

0.02MB

[vibe coding #2] 한 번의 명령(프롬프트)로 되는 것 아닌데요?

VintageappMaker — Fri, 1 May 2026 08:24:15 +0900

바이브 코딩은 코딩이다!

[개발자의 조언]
단지 이전처럼 전문성이 요구되는 "프로그래밍 언어를 이용한 코딩스킬"이 많이 사라졌을 뿐이다. 그럼 코딩은 무엇인가? 컴퓨터에게 나의 구체화된 설계를 전달하는 과정이다. 결과적으로 "프로그래밍 언어가 인간의 언어로 대체"되었을 뿐이지 개발자의 사고방식으로 프로그램을 설계하는 것은 달라지지 않았다. 심지어 더 강화되었다.

결과적으로 바이브 코딩을 하는 사람은 "개발자 사고력"을 키우지 않으면 안된다. AI 시대에는 개발자의 필수능력(프로그래밍 언어스킬, 모듈화 능력, 요구사항 분석)이 요구되었던 시대보다 편리한 시대임은 분명하다. 그러나 전체 구성에 대한 기획력, 발생된 문제 해결능력, 유지보수 설계는 절대 변할 수도 변하지도 않는다.

바이브 코딩은
개발자가 되기 위한
세발자전거 같은 존재이다.

[codex] 유튜브를 채팅UI로 요약하는 스킬

VintageappMaker — Thu, 30 Apr 2026 09:42:48 +0900

유튜브 채팅요약

아래 프롬프트를 Codex에 전달하면 유튜브채팅요약을 사용해 "채팅스타일의 유튜브 요약"을 만들 수 있다.

1. 스킬등록 프롬프트

아래와 같이 codex에서 프롬프트 한다.

내 로컬 Codex 스킬로 `youtube-chat-summary`를 설치해줘.

목표:
YouTube URL을 입력받아 영상 메타데이터와 가능한 자막을 확인하고, 내용을 한국어 카카오톡 스타일 채팅 요약 HTML로 만들어 저장하는 스킬을 생성한다. 결과 HTML은 매번 새 디자인을 만들지 말고, 아래 `Fixed HTML Template Contract`를 고정 템플릿으로 사용한다.

설치 위치:
- Windows라면 기본값: C:\Users\user\.codex\skills\youtube-chat-summary\SKILL.md
- 다른 환경이라면 Codex 홈의 skills/youtube-chat-summary/SKILL.md에 저장한다.
- 폴더가 없으면 생성한다.

생성할 SKILL.md 내용:

---
name: youtube-chat-summary
description: YouTube chat summary skill. Use when the user provides a YouTube URL and wants the video summarized into a KakaoTalk-style chat storyboard/conti HTML file, asks for youtube-chat-summary, asks for a YouTube video summarized as a chat, or wants inferred speaker personas and a responsive HTML chat storyboard saved locally.
---

# YouTube Chat Summary

## Workflow

1. Accept a YouTube URL from the user. If missing, ask only for the URL.
2. Use an existing `youtube-info` skill when available to retrieve metadata and, when possible, captions or transcript:
   - Run its helper for metadata preview.
   - Use `yt-dlp --list-subs` and prefer Korean original captions (`ko-orig`), then Korean auto captions (`ko`), then English or available captions if Korean is unavailable.
   - If captions are unavailable, use title, description, chapters, and conservative fallback sections. State that the summary is metadata/description-based.
3. Summarize the video in Korean:
   - Identify the central claim, 3 to 5 supporting points, and the ending takeaway.
   - Avoid claiming exact transcript-level detail unless captions or user-provided notes were available.
4. Create plausible chat participants from the content:
   - Choose 2 to 3 speakers, such as a questioner plus an expert/source persona.
   - Names should fit the topic naturally.
   - Do not claim these speakers are actual video participants unless the video clearly establishes them.
5. Build a responsive single-file HTML report with the fixed template defined in `Fixed HTML Template Contract` below:
   - A KakaoTalk-style chat frame based on the current local generation time.
   - A top video summary card with thumbnail, title, channel, duration, and original URL.
   - Chat bubbles that convert the video summary into a readable conversation.
   - A storyboard/conti section with 6 to 10 scenes, each with time range, scene title, visual direction, and dialogue/subtitle guidance.
6. Save the HTML in the current working directory unless the user specifies another output directory.

## Chat UI Rules

- Do not show KakaoTalk read/unread numbers.
- Use the actual generation time for chat timestamps. Start at the generation minute and increment naturally.
- Put each bubble beside a visible avatar icon.
- Put the speaker name above the bubble.
- For consecutive messages from the same speaker, still show the avatar and name unless the user asks for compact grouping.
- Keep the visual style close to KakaoTalk: blue chat background, yellow right-side expert bubbles, white left-side questioner bubbles, dark room header, and bottom input bar.
- Make the layout responsive:
  - On desktop, place the phone-style chat and storyboard side by side.
  - On mobile, stack the chat first and storyboard second.
- Use CSS only; avoid external JavaScript unless needed.
- Use `word-break: keep-all` and `overflow-wrap: anywhere` so Korean text does not overflow on mobile.

## Content Rules

- Base the content on captions when available.
- If captions are unavailable, explicitly mark the output as based on metadata, description, chapters, or generated fallback.
- Paraphrase copyrighted transcript content. Do not dump a full transcript into the HTML.
- Keep chat bubbles concise and conversational; put dense facts in small info boxes inside bubbles.
- Use a neutral summary bot or narrator bubble for the final takeaway.
- Use absolute dates/times for generated metadata when relevant.

## Fixed HTML Template Contract

Use `youtube_chat_summary_20260428_092016.html` as the canonical template style and structure. The content changes for each video, but the page architecture, class names, CSS rules, and major sections must stay fixed.

Required structure:

- Top `.video-card` with `.thumb`, `h1`, `.meta .pill`, and `.basis`.
- Main `.layout` with left `.phone` KakaoTalk-style chat and right `.panel`.
- Chat frame with `.chat-header`, `.chat-body`, `.stamp`, repeated `.msg`, `.msg.expert`, optional `.msg.bot`, `.avatar`, `.content`, `.name`, `.bubble`, `.time`, and `.input-bar`.
- Summary area with `.summary-grid` and exactly four `.summary-item` cards.
- Storyboard area with 6 to 10 repeated `.scene` blocks using `.range`, `h3`, and two `p` lines for visual direction and subtitle/dialogue.

Fixed styling:

- Preserve the original color tokens: `--bg: #eef3f7`, `--phone: #9bb8d2`, `--header: #2f343a`, `--yellow: #fee500`, `--white: #ffffff`, `--ink: #1f2933`, `--muted: #6b7684`, `--line: #dde4ec`, `--panel: #f8fafc`, `--accent: #2f6f8f`.
- Preserve the desktop grid: `.layout { grid-template-columns: minmax(340px, 430px) 1fr; }`.
- Preserve the mobile breakpoint at `max-width: 820px`, stacking the chat above the storyboard.
- Preserve `.video-card`, `.phone`, `.panel`, `.bubble`, `.summary-item`, and `.scene` spacing, borders, radii, and typography from the canonical template.
- Use inline `style="background-image: url('{{thumbnail_url}}');"` on `.thumb` so each video uses its own thumbnail while keeping the same template.

Fixed CSS:

```css
:root {
  --bg: #eef3f7;
  --phone: #9bb8d2;
  --header: #2f343a;
  --yellow: #fee500;
  --white: #ffffff;
  --ink: #1f2933;
  --muted: #6b7684;
  --line: #dde4ec;
  --panel: #f8fafc;
  --accent: #2f6f8f;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Malgun Gothic", "Apple SD Gothic Neo", Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
a { color: inherit; }
.page { max-width: 1180px; margin: 0 auto; padding: 24px; }
.video-card {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 18px;
  align-items: stretch;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 12px 30px rgba(31, 41, 51, 0.08);
  margin-bottom: 20px;
}
.thumb {
  min-height: 124px;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--line);
}
.video-card h1 { font-size: 21px; line-height: 1.35; margin: 0 0 10px; letter-spacing: 0; }
.meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; font-size: 13px; color: var(--muted); }
.pill { border: 1px solid var(--line); border-radius: 999px; padding: 5px 9px; background: var(--panel); }
.basis { font-size: 14px; line-height: 1.6; margin: 0; }
.layout { display: grid; grid-template-columns: minmax(340px, 430px) 1fr; gap: 22px; align-items: start; }
.phone { border-radius: 8px; overflow: hidden; background: var(--phone); border: 1px solid #7fa0bd; box-shadow: 0 18px 38px rgba(31, 41, 51, 0.14); }
.chat-header { height: 54px; background: var(--header); color: var(--white); display: flex; align-items: center; justify-content: space-between; padding: 0 15px; font-weight: 700; letter-spacing: 0; }
.chat-header small { color: #cbd5df; font-weight: 400; font-size: 12px; }
.chat-body { padding: 16px 12px 14px; min-height: 670px; }
.stamp { text-align: center; font-size: 12px; color: #4c6072; margin: 6px 0 16px; }
.msg { display: flex; gap: 8px; margin: 0 0 14px; align-items: flex-start; }
.msg.expert { flex-direction: row-reverse; }
.avatar { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 34px; display: grid; place-items: center; font-weight: 700; font-size: 13px; color: #ffffff; background: #5d6f82; border: 1px solid rgba(255,255,255,0.45); }
.expert .avatar { background: #b88a00; color: #1f2933; }
.bot .avatar { background: #276749; }
.content { max-width: 78%; }
.name { font-size: 12px; color: #334e68; margin: 0 0 4px; }
.expert .name { text-align: right; }
.bubble { border-radius: 8px; padding: 10px 11px; background: var(--white); font-size: 14px; line-height: 1.55; box-shadow: 0 1px 1px rgba(31, 41, 51, 0.08); }
.expert .bubble { background: var(--yellow); }
.time { font-size: 11px; color: #4c6072; margin-top: 4px; }
.expert .time { text-align: right; }
.info-box { border-top: 1px solid rgba(31,41,51,0.12); margin-top: 8px; padding-top: 8px; font-size: 13px; }
.input-bar { height: 52px; background: #f5f6f7; border-top: 1px solid #d5dce3; display: grid; grid-template-columns: 36px 1fr 44px; gap: 8px; align-items: center; padding: 8px 10px; }
.icon-btn, .send-btn { height: 32px; border: 0; border-radius: 6px; background: #e2e8ef; color: #3a4652; font-weight: 700; }
.field { height: 34px; border-radius: 6px; background: #ffffff; border: 1px solid #d5dce3; }
.send-btn { background: var(--yellow); color: #3b2f00; }
.panel { background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 18px; }
.panel h2 { font-size: 20px; margin: 0 0 12px; letter-spacing: 0; }
.summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.summary-item { border: 1px solid var(--line); border-radius: 8px; padding: 12px; background: var(--panel); min-height: 94px; }
.summary-item b { display: block; margin-bottom: 6px; color: var(--accent); font-size: 14px; }
.summary-item p { margin: 0; font-size: 14px; line-height: 1.55; }
.scene { display: grid; grid-template-columns: 82px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.range { font-weight: 700; color: var(--accent); font-size: 13px; padding-top: 3px; }
.scene h3 { margin: 0 0 5px; font-size: 15px; letter-spacing: 0; }
.scene p { margin: 3px 0; color: #3f4d5a; font-size: 14px; line-height: 1.55; }
@media (max-width: 820px) {
  .page { padding: 14px; }
  .video-card { grid-template-columns: 1fr; }
  .thumb { aspect-ratio: 16 / 9; min-height: 0; }
  .layout { grid-template-columns: 1fr; }
  .chat-body { min-height: auto; }
  .content { max-width: 82%; }
  .summary-grid { grid-template-columns: 1fr; }
  .scene { grid-template-columns: 1fr; gap: 4px; }
}
```

Fixed HTML skeleton:

```html
<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>유튜브 채팅 요약 - {{short_topic}}</title>
  <style>{{fixed_css_above}}</style>
</head>
<body>
  <main class="page">
    <section class="video-card" aria-label="영상 정보">
      <div class="thumb" role="img" aria-label="{{thumbnail_alt}}" style="background-image: url('{{thumbnail_url}}');"></div>
      <div>
        <h1>{{video_title}}</h1>
        <div class="meta">
          <span class="pill">채널: {{channel}}</span>
          <span class="pill">길이: {{duration}}</span>
          <span class="pill">업로드: {{upload_date_or_unknown}}</span>
          <span class="pill">생성: {{generated_at_kst}}</span>
        </div>
        <p class="basis">
          원본: <a href="{{source_url}}">{{source_url}}</a><br>
          요약 근거: {{source_basis}}. 아래 대화 인물은 실제 출연자가 아니라 요약을 쉽게 읽기 위한 구성입니다.
        </p>
      </div>
    </section>
    <section class="layout">
      <div class="phone" aria-label="카카오톡 스타일 채팅 요약">
        <div class="chat-header">
          <span>{{chat_room_title}}</span>
          <small>{{channel_or_topic}}</small>
        </div>
        <div class="chat-body">
          <div class="stamp">{{chat_date_stamp}}</div>
          {{chat_messages}}
        </div>
        <div class="input-bar" aria-hidden="true">
          <button class="icon-btn">+</button>
          <div class="field"></div>
          <button class="send-btn">전송</button>
        </div>
      </div>
      <aside class="panel" aria-label="요약과 콘티">
        <h2>요약 포인트</h2>
        <div class="summary-grid">{{summary_items}}</div>
        <h2>스토리보드/콘티</h2>
        {{storyboard_scenes}}
      </aside>
    </section>
  </main>
</body>
</html>
```

Repeated block rules:

- `{{chat_messages}}`: Generate 7 to 10 `.msg` blocks. Use `.msg expert` for the answer/expert/source persona and `.msg bot` for the final takeaway. Keep avatar initials visible.
- `{{summary_items}}`: Generate exactly four `.summary-item` blocks: 중심 주장, 핵심 사건, 근거/맥락, 결론/시사점.
- `{{storyboard_scenes}}`: Generate 6 to 10 `.scene` blocks. Each scene must contain `.range`, `h3`, one visual direction paragraph, and one subtitle/dialogue paragraph.
- Keep timestamps based on the actual local generation time, incrementing naturally by minute.
- Do not include JavaScript unless the user explicitly requests dynamic behavior.

## Output Naming

Default filename:

```text
youtube_chat_summary_YYYYMMDD_HHMMSS.html
```

If the content has an obvious short topic, a descriptive name is acceptable.

## Verification

After writing the HTML:

1. Confirm the file exists and has non-trivial size.
2. Search the file to ensure no read-number markers remain, such as `unread`.
3. Search for `visibility:hidden` and remove it if it was used to fake avatar spacing.
4. Confirm timestamps reflect the generation time, not arbitrary source-video times.
5. Report the saved path and the source basis used: captions, description/chapters, or fallback.

추가 요구:
- 설치 후 `youtube-chat-summary` 스킬이 생성된 전체 경로를 알려줘.
- `yt-dlp`가 없으면 설치하지 말고, 필요 패키지로 `yt-dlp`가 필요하다고 알려줘.
- 네트워크 접근이 막힌 환경에서는 승인 요청 후 `yt-dlp` 명령을 다시 실행하도록 안내해줘.

2. 예제

$youtube-chat-summary https://www.youtube.com/watch?v=UqUD1sTkbkc를 요약해줘.

report.html

0.02MB