From fcfa4084e4a89ea0558a93a534b33f51636a636e Mon Sep 17 00:00:00 2001 From: "hehihoho3@gmail.com" Date: Wed, 22 Jul 2026 09:09:45 +0900 Subject: [PATCH] =?UTF-8?q?fix(comment-cards):=20=EC=98=81=EC=83=81?= =?UTF-8?q?=EC=97=90=EC=84=9C=20=ED=99=95=EB=8C=80=20=EC=8B=9C=20=EA=B8=80?= =?UTF-8?q?=EC=9E=90=20=EA=B9=A8=EC=A7=80=EB=8D=98=20=EB=AC=B8=EC=A0=9C(?= =?UTF-8?q?=EC=A0=80=EC=9E=A5=20=ED=99=94=EC=A7=88=20=EC=83=81=ED=96=A5)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 캡처 배율이 2배 고정이라 카드(~320px)가 ~640px PNG로 저장돼 영상에서 확대하면 뭉개졌음. 화질 선택(2x/4x/6x/8x)을 추가하고 기본을 4배로 올림. 검정 배경 카드는 그레이스케일 안티에일리어싱을 적용해 색 번짐 제거. Co-Authored-By: Claude Opus 4.8 (1M context) --- src/main/resources/static/js/comment-cards.js | 9 ++++++++- src/main/resources/templates/comment-cards.html | 16 ++++++++++++++-- 2 files changed, 22 insertions(+), 3 deletions(-) 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 이상으로 두세요(배율이 높을수록 저장이 느리고 파일이 큽니다).

@@ -155,6 +158,15 @@ + @@ -170,7 +182,7 @@ - +