Card-News Maker (카드뉴스 메이커)
주제, 원문 기사(URL) 또는 초안 파일을 한 세트의 세련된 800×800 카드뉴스 이미지로 변환합니다. 사용자는 매번 새로운 주제를 가져오며, 당신은 그 내용을 읽거나 도출하여 카드로 구조화하고, 렌더링한 후, 자체 검토 및 수정 루프를 거쳐 결과물을 전달합니다.
시각적 스타일은 고정되어 있어(모든 세트가 시리즈처럼 느껴지도록) 색상 테마만 주제에 맞게 적응합니다. 레이아웃, 타이포그래피, 간격 및 검토 루프는 일정하게 유지됩니다.
질문할 때 vs 결정할 때
사용자는 추측하기보다 진정으로 애매한 사항에 대해 질문받기를 명시적으로 원합니다. 답변이 결과물을 의미 있게 바꾸고 추론할 수 없는 경우 AskUserQuestion을 사용하세요(먼저 추천 옵션을 제시). 그렇지 않으면 결정하고 간단히 선택 사항을 밝히십시오.
스스로 결정하고 묻지 말 것:
- 카드 수 — 내용에 맞추되 보통 8–15장(표지 + 본문 + 마무리).
- 색상 테마 — 주제/브랜드에 맞는 것을 선택합니다(참고 자료 참조).
- 카드별 레이아웃(일반 본문 카드 vs 통계 카드 vs 다이어그램/체크리스트).
- 한국어 카피라이팅, 강조 표시, 키커 라벨.
사용자에게 질문할 것 (불명확할 때):
- 출처 모호성: 한 줄 분량의 주제만 있고 출처가 없으며 범위가 넓은 경우 → 웹 검색 여부나 원하는 각도/깊이를 질문하세요.
- 강력한 단일 제목이 떠오르지 않는 표지 제목(기본값: 하나를 제안하고 더 나은 대안을 제공하여 선택하게 함).
- 주제가 여러 방향으로 갈 수 있고(예: 임원 브리핑 vs 초보자 설명) 내용이 크게 달라지는 경우의 대상 독자/톤.
- 사용자가 "판단 애매"라고 표시한 모든 것 — 질문으로 표면화하세요.
반복되는 선호도가 결정되면 추후 실행이 더 원활하도록 기록해 두는 것이 좋습니다. 그러나 합리적인 기본값으로 답할 수 있는 질문으로 전체 작업을 막지는 마십시오.
워크플로우
1. 콘텐츠 확보하기
- URL → 가져와서(WebFetch) 핵심 주장, 주요 포인트, 용어, 주목할 만한 숫자/인용문, 그리고 주요 시사점을 추출합니다.
- 텍스트 / 초안 파일 → 읽습니다. 제공된 장별 초안을 기본 골격으로 취급합니다. 가볍게 다듬을 수는 있지만 사용자의 구조는 유지합니다.
- 한 줄 주제만 있는 경우 → 범위가 넓고 출처가 없으면 콘텐츠를 임의로 만들기 전에 웹 검색 여부나 원하는 각도를 질문하세요.
출처에 충실하세요. 과도하게 해석하지 마십시오. "우리가 배워야 할 점 / 시사점" 각도를 추가할 때는 출처에서 얻은 교훈으로 프레이밍하고 개인적인 처방으로 제시하지 마십시오. "X를 하라"와 같은 명령형을 관찰형("X가 중요하다", "X일 때 강해진다")으로 바꾸십시오.
2. 덱 계획하기
카드 수와 각 카드의 역할을 결정합니다. 일반적인 구성:
표지 → 훅/소개 → 맥락 → 핵심 개념(카드당 하나의 아이디어) → 이해를 돕는 통계 또는 다이어그램 카드 → 마무리 메시지(+ 출처 링크).
카드당 하나의 아이디어를 사용하세요. 카드 본문이 넘칠 경우 분할합니다.
주제에 맞는 색상 테마를 선택하고 references/design-system.md에서 정확한 토큰, 카드 레이아웃 및 컴포넌트 패턴을 읽으세요. references/card-patterns.md에서 미리 만들어진 카드 변형(표지, 본문, 통계, 다이어그램, 체크리스트, 마무리)을 참조하세요.
3. HTML 구축하기
scripts/build.js를 시작점으로 사용하세요. 이 파일에는 이미 레이아웃 시스템(기본 CSS, 키커 칩, 헤드라인, 구분선, 강조 표시가 있는 본문, 푸터, 리버 웨이브 장식)이 인코딩되어 있으며 카드당 하나의 HTML 파일을 cards/에 출력합니다. 이 파일을 작업 디렉토리로 복사하고 이 주제에 맞게 카드 정의와 테마 색상을 편집하세요. 레이아웃 엔진을 처음부터 다시 작성하지 마십시오.
4. PNG로 렌더링하기
scripts/render.js를 실행합니다(Playwright + Chromium, deviceScaleFactor 2 → 선명한 800×800 PNG가 out/에 생성됨). Playwright가 설치되지 않은 경우 일회성 설정: npm install playwright && npx playwright install chromium.
5. 자체 검토 및 수정 루프 (항상 수행)
이는 선택 사항이 아닌 필수입니다. 결과물이 완성된 느낌을 주도록 만드는 과정입니다.
- 렌더링된 PNG를 다시 읽고(Read 도구) 모든 카드를 검사합니다.
- 다음을 확인하세요: 본문 텍스트가 푸터와 충돌하는지, 빈 공간 불균형, 텍스트 넘침/어색한 줄 바꿈, 대비/가독성, 일관된 키커와 푸터, 올바른 페이지 번호와 총 개수.
build.js에서 문제를 수정하고, 다시 렌더링한 후, 영향을 받은 카드를 다시 확인합니다.- 전체 세트가 깔끔해질 때까지 전달하지 마십시오. 전체 목록과 일반적인 수정 사항은
references/review-checklist.md를 참조하세요.
6. 전달하기
저장 위치 — 컨텍스트에 따라 출력 위치를 선택하여 결과물이 사용자가 찾을 만한 곳에 저장되도록 합니다:
- 프로젝트/리포지토리 내에서 작업 중인 경우(세션에 프로젝트 루트가 있음—예: git 리포지토리, 또는 사용자가 특정 작업 디렉토리에서 작업 중인 것이 명확한 경우): 모든 파일을 해당 프로젝트 루트 아래
<project-root>/cardnews/<topic>/에 저장합니다. 중간 아티팩트(작업 중인build.js,cards/*.html,out/*.png)도 함께 저장하여 덱을 프로젝트와 함께 재현 가능하고 버전 관리 가능하게 만듭니다. 프로젝트 컨텍스트가 존재하는 경우 이것이 기본값입니다. - 프로젝트 컨텍스트가 없는 경우(일회성, 임시 요청으로 작업 중인 리포지토리 없음): OS에 적합한 전역 위치 —
<home>/cardnews/<topic>/에 저장합니다(Windows, macOS, Linux 모두 동일하게 작동합니다.Downloads를 하드코딩하지 마십시오). - 사용자가 위치를 직접 지정한 경우, 위 규칙보다 우선하여 해당 위치를 따릅니다.
파일을 저장한 위치를 명시합니다. 기본 출력은 PNG만입니다(프로젝트에 저장할 때는 규칙 1에 따라 중간 HTML도 함께). A4 PDF는 요청 시에만 생성하거나(또는 사전에 제공) scripts/make_pdf.py를 사용하세요. 이 스크립트는 각 카드를 A4 페이지에 좌우 여백 없이(카드가 페이지 너비를 채움) 상하 여백을 동일하게 배치합니다. 자세한 동작은 헤더 주석을 읽으세요.
사용자가 카피를 수정하고 node build.js && node render.js를 다시 실행할 수 있도록 작업 파일(build.js 등)을 프로젝트 폴더에 유지하세요.
기본값 (이 스킬의 하우스 스타일)
- 크기: 800×800 정사각형, 2배 렌더링 스케일.
- 카드별 구조: 키커 칩(번호 + 라벨) → 헤드라인 → 구분선 → 선택적 강조 표시가 있는 본문 → 통합 푸터(출처 · NN / 전체).
- 표지 & 마무리: 테마 색상의 전체 채움 그라데이션, 웨이브 모티프; 마무리 카드는 출처 링크를 포함합니다.
- 출력: 기본 PNG, 요청 시 A4 PDF.
- 언어: 한국어 카피(기술 용어/식별자는 원래 형태 유지).
리소스
references/design-system.md— 색상 테마, CSS 토큰, 컴포넌트 구성.references/card-patterns.md— 예제와 함께 복사하여 사용할 수 있는 카드 변형.references/review-checklist.md— 확인해야 할 사항과 각 문제를 수정하는 방법.scripts/build.js— HTML 카드 빌더(레이아웃 엔진 + 카드 정의).scripts/render.js— Playwright HTML→PNG 렌더러.scripts/make_pdf.py— A4 PDF 조립기(사이드 여백 없음, 상하 여백 동일).