diff --git a/src/main/resources/static/js/comment-cards.js b/src/main/resources/static/js/comment-cards.js
index 54646e9..3abca24 100644
--- a/src/main/resources/static/js/comment-cards.js
+++ b/src/main/resources/static/js/comment-cards.js
@@ -7,6 +7,7 @@
let wordMaskOn = true; // 단어 가리기 기본 ON(단어 클릭=가림). 끄면 카드 클릭=복사.
let textScale = 1; // 내용 글자 크기 배율(카드 크기는 유지, .cc-text만 확대/축소)
let bgMode = 'black'; // 카드 배경 기본값: default|white|black (black이면 글자 흰색)
+ let exportScale = 4; // PNG 저장 배율(카드 CSS 픽셀 × 배율). 영상에서 확대해도 안 깨지게 기본 4배.
let dirHandle = null; // 저장 폴더(File System Access API). null이면 브라우저 다운로드 폴백.
let dirOptOut = false; // 사용자가 폴더 지정을 직접 해제 → '전체 저장' 시 다시 묻지 않음
const savedIds = new Set(); // 이미 저장한 댓글 id(재렌더·필터 변경에도 표시 유지)
@@ -403,9 +404,10 @@
const wasSaved = cardEl.classList.contains('saved');
if (wasSaved) cardEl.classList.remove('saved');
try {
+ // scale = 저장 배율. 카드 폭이 ~320px라 2배로는 영상에서 확대 시 글자가 뭉개짐 → 기본 4배.
return await ms.domToBlob(cardEl, {
backgroundColor: null,
- scale: 2,
+ scale: exportScale,
filter: (node) => !(node instanceof Element && node.classList.contains('cc-noexport')),
});
} finally {
@@ -649,6 +651,11 @@
applyTextScale();
});
+ // 저장 화질(배율) — 캡처 시에만 쓰이므로 재렌더 불필요
+ $('ccScale').addEventListener('change', () => {
+ exportScale = parseInt($('ccScale').value, 10) || 4;
+ });
+
// 배경색: 기본 → 흰색 → 검정 순환. 검정이면 글자는 흰색(대비).
const BG_MODES = ['default', 'white', 'black'];
const BG_LABEL = { default: '배경: 기본', white: '배경: 흰색', black: '배경: 검정' };
diff --git a/src/main/resources/templates/comment-cards.html b/src/main/resources/templates/comment-cards.html
index ebde8e5..51fc13a 100644
--- a/src/main/resources/templates/comment-cards.html
+++ b/src/main/resources/templates/comment-cards.html
@@ -47,7 +47,9 @@
.comment-card.bg-white { background:#ffffff; border-color:#e5e5e5; }
.comment-card.bg-white .cc-author, .comment-card.bg-white .cc-text { color:#0f0f0f; }
.comment-card.bg-white .cc-time, .comment-card.bg-white .cc-stats { color:#606060; }
- .comment-card.bg-black { background:#000000; border-color:#333333; }
+ /* 어두운 배경 위 밝은 글자는 서브픽셀 AA에서 색 번짐이 생김 → 그레이스케일 AA로 또렷하게 */
+ .comment-card.bg-black { background:#000000; border-color:#333333;
+ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
.comment-card.bg-black .cc-author, .comment-card.bg-black .cc-text { color:#ffffff; }
.comment-card.bg-black .cc-time, .comment-card.bg-black .cc-stats { color:#aaaaaa; }
/* 글자 크기 스테퍼 */
@@ -126,6 +128,7 @@
유튜브 링크의 전체 댓글을 가져와 분석(많이 언급된 타임라인·자주 나온 단어·요약 통계)하고 카드로 만듭니다.
모자이크는 기본 켜짐, 모서리 둥글게로 각진/라운드 전환. 기본은 단어 클릭=가리기(블러), 단어 가리기 토글을 끄면 카드 클릭=이미지 복사. 저장 버튼=PNG 파일 다운로드(캡컷은 붙여넣기가 안 되니 저장한 파일을 "불러오기" 하세요). 저장 폴더를 고르면 저장·전체 저장이 그 폴더로 바로 갑니다(크롬/엣지).
+ 영상에서 카드를 크게 확대해 쓸 거면 화질을 4x 이상으로 두세요(배율이 높을수록 저장이 느리고 파일이 큽니다).