@jjlmoya/utils-social 1.2.0 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (120) hide show
  1. package/package.json +59 -58
  2. package/src/category/i18n/de.ts +23 -0
  3. package/src/category/i18n/id.ts +23 -0
  4. package/src/category/i18n/it.ts +23 -0
  5. package/src/category/i18n/ja.ts +23 -0
  6. package/src/category/i18n/ko.ts +23 -0
  7. package/src/category/i18n/nl.ts +23 -0
  8. package/src/category/i18n/pl.ts +23 -0
  9. package/src/category/i18n/pt.ts +23 -0
  10. package/src/category/i18n/ru.ts +23 -0
  11. package/src/category/i18n/sv.ts +23 -0
  12. package/src/category/i18n/tr.ts +23 -0
  13. package/src/category/i18n/zh.ts +23 -0
  14. package/src/category/index.ts +12 -0
  15. package/src/index.ts +8 -0
  16. package/src/tests/i18n_coverage.test.ts +36 -0
  17. package/src/tests/locale_completeness.test.ts +1 -1
  18. package/src/tests/schemas_fulfillment.test.ts +23 -0
  19. package/src/tests/slug_uniqueness.test.ts +81 -0
  20. package/src/tests/title_quality.test.ts +55 -0
  21. package/src/tool/redditFormatter/i18n/de.ts +193 -0
  22. package/src/tool/redditFormatter/i18n/en.ts +1 -1
  23. package/src/tool/redditFormatter/i18n/es.ts +1 -1
  24. package/src/tool/redditFormatter/i18n/fr.ts +1 -1
  25. package/src/tool/redditFormatter/i18n/id.ts +193 -0
  26. package/src/tool/redditFormatter/i18n/it.ts +193 -0
  27. package/src/tool/redditFormatter/i18n/ja.ts +193 -0
  28. package/src/tool/redditFormatter/i18n/ko.ts +193 -0
  29. package/src/tool/redditFormatter/i18n/nl.ts +193 -0
  30. package/src/tool/redditFormatter/i18n/pl.ts +193 -0
  31. package/src/tool/redditFormatter/i18n/pt.ts +193 -0
  32. package/src/tool/redditFormatter/i18n/ru.ts +193 -0
  33. package/src/tool/redditFormatter/i18n/sv.ts +193 -0
  34. package/src/tool/redditFormatter/i18n/tr.ts +193 -0
  35. package/src/tool/redditFormatter/i18n/zh.ts +193 -0
  36. package/src/tool/redditFormatter/index.ts +15 -7
  37. package/src/tool/safeZones/i18n/de.ts +244 -0
  38. package/src/tool/safeZones/i18n/id.ts +244 -0
  39. package/src/tool/safeZones/i18n/it.ts +244 -0
  40. package/src/tool/safeZones/i18n/ja.ts +244 -0
  41. package/src/tool/safeZones/i18n/ko.ts +244 -0
  42. package/src/tool/safeZones/i18n/nl.ts +244 -0
  43. package/src/tool/safeZones/i18n/pl.ts +244 -0
  44. package/src/tool/safeZones/i18n/pt.ts +244 -0
  45. package/src/tool/safeZones/i18n/ru.ts +244 -0
  46. package/src/tool/safeZones/i18n/sv.ts +244 -0
  47. package/src/tool/safeZones/i18n/tr.ts +244 -0
  48. package/src/tool/safeZones/i18n/zh.ts +244 -0
  49. package/src/tool/safeZones/index.ts +17 -9
  50. package/src/tool/socialImageResizer/i18n/de.ts +211 -0
  51. package/src/tool/socialImageResizer/i18n/en.ts +1 -1
  52. package/src/tool/socialImageResizer/i18n/id.ts +211 -0
  53. package/src/tool/socialImageResizer/i18n/it.ts +211 -0
  54. package/src/tool/socialImageResizer/i18n/ja.ts +211 -0
  55. package/src/tool/socialImageResizer/i18n/ko.ts +211 -0
  56. package/src/tool/socialImageResizer/i18n/nl.ts +211 -0
  57. package/src/tool/socialImageResizer/i18n/pl.ts +211 -0
  58. package/src/tool/socialImageResizer/i18n/pt.ts +211 -0
  59. package/src/tool/socialImageResizer/i18n/ru.ts +211 -0
  60. package/src/tool/socialImageResizer/i18n/sv.ts +211 -0
  61. package/src/tool/socialImageResizer/i18n/tr.ts +211 -0
  62. package/src/tool/socialImageResizer/i18n/zh.ts +211 -0
  63. package/src/tool/socialImageResizer/index.ts +16 -8
  64. package/src/tool/socialValueCalculator/i18n/de.ts +306 -0
  65. package/src/tool/socialValueCalculator/i18n/es.ts +1 -1
  66. package/src/tool/socialValueCalculator/i18n/fr.ts +1 -1
  67. package/src/tool/socialValueCalculator/i18n/id.ts +306 -0
  68. package/src/tool/socialValueCalculator/i18n/it.ts +306 -0
  69. package/src/tool/socialValueCalculator/i18n/ja.ts +306 -0
  70. package/src/tool/socialValueCalculator/i18n/ko.ts +306 -0
  71. package/src/tool/socialValueCalculator/i18n/nl.ts +306 -0
  72. package/src/tool/socialValueCalculator/i18n/pl.ts +306 -0
  73. package/src/tool/socialValueCalculator/i18n/pt.ts +306 -0
  74. package/src/tool/socialValueCalculator/i18n/ru.ts +306 -0
  75. package/src/tool/socialValueCalculator/i18n/sv.ts +306 -0
  76. package/src/tool/socialValueCalculator/i18n/tr.ts +306 -0
  77. package/src/tool/socialValueCalculator/i18n/zh.ts +306 -0
  78. package/src/tool/socialValueCalculator/index.ts +17 -9
  79. package/src/tool/tinderPhotoOptimizer/i18n/de.ts +272 -0
  80. package/src/tool/tinderPhotoOptimizer/i18n/id.ts +272 -0
  81. package/src/tool/tinderPhotoOptimizer/i18n/it.ts +272 -0
  82. package/src/tool/tinderPhotoOptimizer/i18n/ja.ts +272 -0
  83. package/src/tool/tinderPhotoOptimizer/i18n/ko.ts +272 -0
  84. package/src/tool/tinderPhotoOptimizer/i18n/nl.ts +272 -0
  85. package/src/tool/tinderPhotoOptimizer/i18n/pl.ts +272 -0
  86. package/src/tool/tinderPhotoOptimizer/i18n/pt.ts +272 -0
  87. package/src/tool/tinderPhotoOptimizer/i18n/ru.ts +272 -0
  88. package/src/tool/tinderPhotoOptimizer/i18n/sv.ts +272 -0
  89. package/src/tool/tinderPhotoOptimizer/i18n/tr.ts +272 -0
  90. package/src/tool/tinderPhotoOptimizer/i18n/zh.ts +272 -0
  91. package/src/tool/tinderPhotoOptimizer/index.ts +17 -9
  92. package/src/tool/youtubeThumbnail/i18n/de.ts +207 -0
  93. package/src/tool/youtubeThumbnail/i18n/id.ts +207 -0
  94. package/src/tool/youtubeThumbnail/i18n/it.ts +207 -0
  95. package/src/tool/youtubeThumbnail/i18n/ja.ts +207 -0
  96. package/src/tool/youtubeThumbnail/i18n/ko.ts +207 -0
  97. package/src/tool/youtubeThumbnail/i18n/nl.ts +207 -0
  98. package/src/tool/youtubeThumbnail/i18n/pl.ts +207 -0
  99. package/src/tool/youtubeThumbnail/i18n/pt.ts +207 -0
  100. package/src/tool/youtubeThumbnail/i18n/ru.ts +207 -0
  101. package/src/tool/youtubeThumbnail/i18n/sv.ts +207 -0
  102. package/src/tool/youtubeThumbnail/i18n/tr.ts +207 -0
  103. package/src/tool/youtubeThumbnail/i18n/zh.ts +207 -0
  104. package/src/tool/youtubeThumbnail/index.ts +17 -9
  105. package/src/tool/youtubeThumbnailPreviewer/i18n/de.ts +321 -0
  106. package/src/tool/youtubeThumbnailPreviewer/i18n/en.ts +1 -1
  107. package/src/tool/youtubeThumbnailPreviewer/i18n/es.ts +1 -1
  108. package/src/tool/youtubeThumbnailPreviewer/i18n/fr.ts +2 -2
  109. package/src/tool/youtubeThumbnailPreviewer/i18n/id.ts +321 -0
  110. package/src/tool/youtubeThumbnailPreviewer/i18n/it.ts +321 -0
  111. package/src/tool/youtubeThumbnailPreviewer/i18n/ja.ts +321 -0
  112. package/src/tool/youtubeThumbnailPreviewer/i18n/ko.ts +321 -0
  113. package/src/tool/youtubeThumbnailPreviewer/i18n/nl.ts +321 -0
  114. package/src/tool/youtubeThumbnailPreviewer/i18n/pl.ts +321 -0
  115. package/src/tool/youtubeThumbnailPreviewer/i18n/pt.ts +321 -0
  116. package/src/tool/youtubeThumbnailPreviewer/i18n/ru.ts +321 -0
  117. package/src/tool/youtubeThumbnailPreviewer/i18n/sv.ts +321 -0
  118. package/src/tool/youtubeThumbnailPreviewer/i18n/tr.ts +321 -0
  119. package/src/tool/youtubeThumbnailPreviewer/i18n/zh.ts +321 -0
  120. package/src/tool/youtubeThumbnailPreviewer/index.ts +24 -0
@@ -0,0 +1,321 @@
1
+ import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
2
+ import type { ToolLocaleContent } from '../../../types';
3
+ import type { YoutubeThumbnailPreviewerUI } from '../ui';
4
+
5
+ const slug = 'youtube-thumbnail-previewer';
6
+ const title = '유튜브 썸네일 미리보기: CTR 무료 개선 도구';
7
+ const description =
8
+ '유튜브 썸네일을 업로드하고 모바일과 데스크톱 실제 피드에서 어떻게 보이는지 확인해보세요. 다크 모드와 라이트 모드 시뮬레이터로 클릭률을 즉시 최적화할 수 있습니다.';
9
+
10
+ const faqData = [
11
+ {
12
+ question: '유튜브 썸네일을 미리 테스트해보는 것이 왜 중요한가요?',
13
+ answer:
14
+ '대부분의 사용자는 모바일 기기로 유튜브를 시청합니다. 큰 모니터에서 멋져 보이던 썸네일이 작은 화면에서는 글자를 읽기 힘들 수도 있습니다. 시뮬레이터에서 테스트하면 어떤 크기에서도 텍스트가 선명하고 주요 피사체가 돋보이는지 확인할 수 있습니다.',
15
+ },
16
+ {
17
+ question: '이 미리보기 도구를 사용하려면 가입해야 하나요?',
18
+ answer:
19
+ '아니요. 저희 도구는 100% 무료이며 브라우저에서 바로 작동합니다. 썸네일을 최적화하기 위해 계정을 만들거나 이메일을 제공할 필요가 전혀 없습니다.',
20
+ },
21
+ {
22
+ question: '제 디자인이 서버에 업로드되나요?',
23
+ answer:
24
+ '절대 아닙니다. 개인정보 보호는 저희의 최우선 과제입니다. 파일을 선택하면 임시 URL을 통해 브라우저 메모리에 로컬로 로드됩니다. 사용자 본인 외에는 그 누구도 테스트 중인 디자인을 볼 수 없습니다.',
25
+ },
26
+ {
27
+ question: '이 도구가 CTR(클릭률) 개선에 어떻게 도움이 되나요?',
28
+ answer:
29
+ 'CTR(Click-Through Rate)은 썸네일을 본 사람 중 클릭한 사람의 비율입니다. 실제 환경(다크 vs 라이트 배경, 모바일 vs 데스크톱)을 시뮬레이션함으로써, 게시 전에 대비나 구성 문제를 수정하여 클릭수를 높일 수 있습니다.',
30
+ },
31
+ {
32
+ question: '유튜브 공식 다크 모드와 동일하게 작동하나요?',
33
+ answer:
34
+ '네. 유튜브 공식 앱의 두 가지 모드에서 사용하는 정확한 색상 코드를 반영한 테마 선택기(라이트 및 다크)를 포함하고 있습니다.',
35
+ },
36
+ ];
37
+
38
+ const howToData = [
39
+ {
40
+ name: '디자인 업로드',
41
+ text: '업로드 영역을 클릭하거나 이미지 파일(PNG, JPG 또는 WebP)을 도구로 직접 드래그하세요.',
42
+ },
43
+ {
44
+ name: '컨텍스트 설정',
45
+ text: '비디오 제목과 채널명을 입력하여 실제 피드와 최대한 유사한 환경에서 시뮬레이션하세요.',
46
+ },
47
+ {
48
+ name: '기기 전환',
49
+ text: '데스크톱과 모바일 뷰를 전환하며 다양한 화면 크기에서의 가독성을 확인하세요.',
50
+ },
51
+ {
52
+ name: '대비 테스트',
53
+ text: '다크 테마를 활성화하여 유튜브의 검은색 배경에서 색상이 제대로 돋보이는지 체크하세요.',
54
+ },
55
+ ];
56
+
57
+ const faqSchema: WithContext<FAQPage> = {
58
+ '@context': 'https://schema.org',
59
+ '@type': 'FAQPage',
60
+ mainEntity: faqData.map((item) => ({
61
+ '@type': 'Question',
62
+ name: item.question,
63
+ acceptedAnswer: { '@type': 'Answer', text: item.answer },
64
+ })),
65
+ };
66
+
67
+ const howToSchema: WithContext<HowToThing> = {
68
+ '@context': 'https://schema.org',
69
+ '@type': 'HowTo',
70
+ name: title,
71
+ description,
72
+ step: howToData.map((step, i) => ({
73
+ '@type': 'HowToStep',
74
+ position: i + 1,
75
+ name: step.name,
76
+ text: step.text,
77
+ })),
78
+ };
79
+
80
+ const appSchema: WithContext<SoftwareApplication> = {
81
+ '@context': 'https://schema.org',
82
+ '@type': 'SoftwareApplication',
83
+ name: title,
84
+ description,
85
+ applicationCategory: 'UtilityApplication',
86
+ operatingSystem: 'All',
87
+ offers: { '@type': 'Offer', price: '0', priceCurrency: 'KRW' },
88
+ inLanguage: 'ko',
89
+ };
90
+
91
+ export const content: ToolLocaleContent<YoutubeThumbnailPreviewerUI> = {
92
+ slug,
93
+ title,
94
+ description,
95
+ faqTitle: '자주 묻는 질문',
96
+ faq: faqData,
97
+ bibliographyTitle: '참고 자료',
98
+ bibliography: [
99
+ {
100
+ name: '유튜브 고객센터: 맞춤 동영상 썸네일 만들기',
101
+ url: 'https://support.google.com/youtube/answer/141805',
102
+ },
103
+ {
104
+ name: 'Nielsen Norman Group: Visual Processing and UX Design',
105
+ url: 'https://www.nngroup.com/articles/visual-processing/',
106
+ },
107
+ {
108
+ name: 'Derral Eves: The YouTube Formula (Thumbnail Strategy)',
109
+ url: 'https://derraleves.com/the-youtube-formula/',
110
+ },
111
+ ],
112
+ howTo: howToData,
113
+ schemas: [faqSchema, howToSchema, appSchema],
114
+ seo: [
115
+ {
116
+ type: 'title',
117
+ text: '유튜브 썸네일 미리보기: 채널 CTR 마스터하기',
118
+ level: 2,
119
+ },
120
+ {
121
+ type: 'paragraph',
122
+ html: '유튜브 생태계에서 썸네일은 콘텐츠로 들어가는 현관문과 같습니다. 세계 최고의 영상, 할리우드급 편집, 오스카급 각본을 갖췄더라도 아무도 클릭하지 않는다면 당신의 노력은 알고리즘의 눈에 띄지 않을 것입니다. 여기서 <strong>CTR(클릭률)</strong>이 등장하며, 그 결정적인 요인이 바로 썸네일입니다.',
123
+ },
124
+ {
125
+ type: 'title',
126
+ text: '업로드 전 썸네일 테스트가 필수인 이유',
127
+ level: 3,
128
+ },
129
+ {
130
+ type: 'list',
131
+ items: [
132
+ '<strong>실제 미리보기:</strong> 유튜브 피드에 나타날 모습 그대로 썸네일을 확인하세요.',
133
+ '<strong>다크 및 라이트 모드:</strong> 어떤 사용자 설정에서도 색상이 눈에 띄는지 확인하세요.',
134
+ '<strong>기기 시뮬레이터:</strong> 모니터와 작은 모바일 화면 모두에서 텍스트 가독성을 체크하세요.',
135
+ '<strong>CTR 최적화:</strong> 기본 인터페이스와 디자인을 비교하여 클릭을 극대화하세요.',
136
+ '<strong>가입 불필요:</strong> 계정 생성 없이 이미지를 업로드하고 즉시 테스트하세요.',
137
+ '<strong>개인정보 보장:</strong> 디자인은 로컬에서 처리되며 서버로 전송되지 않습니다.',
138
+ ],
139
+ },
140
+ {
141
+ type: 'paragraph',
142
+ html: '많은 제작자가 큰 모니터에서 디자인하고 즐겨 쓰는 편집기에서 전체 화면으로 보며 만족하는 실수를 범합니다. 문제는 실제 사용자가 그렇게 보는 경우가 드물다는 점입니다. 대부분은 무한 스크롤을 하며 모바일로 보거나, 다크 모드로 설정된 모니터 구석에서 썸네일을 접합니다. 저희의 <strong>유튜브 썸네일 미리보기</strong>는 이러한 "디자이너의 착각"을 깨고 피드의 냉혹한 현실을 보여줍니다.',
143
+ },
144
+ {
145
+ type: 'title',
146
+ text: '기술적 지표 및 성능',
147
+ level: 3,
148
+ },
149
+ {
150
+ type: 'grid',
151
+ columns: [
152
+ { title: '0.2초', body: '응답 시간' },
153
+ { title: '4K', body: '최대 해상도' },
154
+ { title: '100%', body: '로컬 개인정보 보호' },
155
+ { title: 'HD', body: '기본 품질' },
156
+ ],
157
+ },
158
+ {
159
+ type: 'title',
160
+ text: '클릭의 심리학: 썸네일이 실패하는 이유',
161
+ level: 3,
162
+ },
163
+ {
164
+ type: 'paragraph',
165
+ html: '인간의 뇌는 텍스트보다 이미지를 수천 배 더 빠르게 처리합니다. 하지만 유튜브의 경쟁은 치열합니다. 썸네일은 단순히 "예쁜" 것이 아니라 <strong>읽기 쉬워야</strong> 하며 <strong>대비</strong>가 뚜렷해야 합니다.',
166
+ },
167
+ {
168
+ type: 'paragraph',
169
+ html: '흔한 실수는 유튜브 배경과 어울리지 않는 색상을 사용하는 것입니다. 어두운 회색을 사용하고 시청자가 다크 모드라면, 당신의 영상은 그들의 주변 시야에서 사라져 버릴 것입니다. 이 테스터를 사용하면 테마를 전환하며 어떤 상황에서도 디자인이 "튀는지" 확인할 수 있습니다.',
170
+ },
171
+ {
172
+ type: 'title',
173
+ text: '직접 비교: 디자인 vs 실제',
174
+ level: 3,
175
+ },
176
+ {
177
+ type: 'paragraph',
178
+ html: '썸네일 테스트에 30초를 투자할 가치가 있을까요? 답은 "그렇다"입니다. 최적화된 썸네일은 첫 24시간 동안 조회수를 두 배로 늘릴 수 있으며, 이는 유튜브 AI에 해당 콘텐츠에 "매력(Hook)"이 있다는 신호를 보냅니다.',
179
+ },
180
+ {
181
+ type: 'grid',
182
+ columns: [
183
+ {
184
+ title: '포토샵 / 캔바 작업 시',
185
+ body: '실제 크기에 대한 착각 · 앱 배경과의 대비 간과 · 텍스트가 읽기 쉬워 보임(실제로는 아닐 수 있음) · UI 요소(영상 길이, 아바타)를 고려하지 않음',
186
+ },
187
+ {
188
+ title: '유튜브 썸네일 미리보기 사용 시',
189
+ body: '홈 피드에서의 실제 모습 확인 · 다크 vs 라이트 모드 대비 검증 · 모바일 텍스트 가독성 보장 · 제목 및 채널명 시뮬레이션',
190
+ },
191
+ ],
192
+ },
193
+ {
194
+ type: 'title',
195
+ text: 'CTR 10% 이상을 위한 썸네일 체크리스트',
196
+ level: 3,
197
+ },
198
+ {
199
+ type: 'paragraph',
200
+ html: '최종 디자인을 내보내기 전에 저희 시뮬레이터를 사용하여 다음 항목을 확인하세요.',
201
+ },
202
+ {
203
+ type: 'list',
204
+ items: [
205
+ '소형 모바일 화면에서도 텍스트를 읽을 수 있나요?',
206
+ '배경과 주요 피사체 사이에 충분한 대비가 있나요?',
207
+ '다크 모드의 검은 배경에서도 썸네일이 돋보이나요?',
208
+ '영상 제목이 이미지의 중요한 정보를 가리지는 않나요?',
209
+ '영상 길이 표시(검은 박스)가 중요한 부분을 숨기고 있지는 않나요?',
210
+ '축소된 크기에서도 얼굴이나 물체가 원하는 감정을 전달하나요?',
211
+ ],
212
+ },
213
+ {
214
+ type: 'title',
215
+ text: '고영향력 썸네일의 구조',
216
+ level: 3,
217
+ },
218
+ {
219
+ type: 'paragraph',
220
+ html: '세계 최대 채널들의 분석에 따르면, 성공하는 썸네일은 대개 다음과 같은 구조적 패턴을 따릅니다.',
221
+ },
222
+ {
223
+ type: 'grid',
224
+ columns: [
225
+ {
226
+ title: '주요 피사체',
227
+ body: '1차 집중 포인트 · 선명한 외곽선 처리와 약간의 테두리 또는 채도 조절을 활용하세요.',
228
+ },
229
+ {
230
+ title: '텍스트 (최대 3단어)',
231
+ body: '즉각적인 맥락 파악 · 굵은 산세리프 폰트와 보색을 사용하세요.',
232
+ },
233
+ {
234
+ title: '흐릿한 배경',
235
+ body: '피사체 분리 · 깊이감을 더해 주요 피사체가 화면 밖으로 "튀어나오게" 만듭니다.',
236
+ },
237
+ {
238
+ title: '재생 시간 공간',
239
+ body: '실수 방지 · 오른쪽 하단 모서리에 얼굴이나 텍스트를 배치하지 마세요.',
240
+ },
241
+ ],
242
+ },
243
+ {
244
+ type: 'tip',
245
+ title: '데드 존(Dead Zone) 트릭',
246
+ html: '<p>유튜브는 항상 썸네일 오른쪽 하단에 영상 길이를 표시하는 검은 박스를 둡니다. 수많은 제작자가 그 자리에 중요한 요소를 배치했다가 앱에서 가려지는 실수를 합니다. 저희 도구는 이 박스를 시뮬레이션하여 가장 중요한 장면이 가려지지 않게 도와줍니다.</p>',
247
+ },
248
+ {
249
+ type: 'title',
250
+ text: '도구의 장점 및 제한 사항',
251
+ level: 3,
252
+ },
253
+ {
254
+ type: 'grid',
255
+ columns: [
256
+ {
257
+ title: '매우 빠르고 반응성이 뛰어난 인터페이스',
258
+ body: '제한: 이미지 편집 기능은 없습니다 (캔바/포토샵 사용 권장)',
259
+ },
260
+ {
261
+ title: '정확한 앱 및 웹 목업',
262
+ body: '제한: 프리롤 광고는 시뮬레이션하지 않습니다',
263
+ },
264
+ {
265
+ title: '무료 및 광고 없음',
266
+ body: '제한: 로컬 파일만 지원합니다',
267
+ },
268
+ ],
269
+ },
270
+ {
271
+ type: 'title',
272
+ text: '"분할(Split)" 모드 사용 (직접 비교)',
273
+ level: 3,
274
+ },
275
+ {
276
+ type: 'paragraph',
277
+ html: '이 도구의 핵심 기능입니다. 분할 모드를 활성화하면 라이트 모드와 다크 모드에서의 모습을 동시에 확인할 수 있습니다. 사용 중인 색상 조합이 범용적인지, 아니면 밝기나 대비 조정이 필요한지 판단하는 가장 확실한 방법입니다.',
278
+ },
279
+ {
280
+ type: 'title',
281
+ text: '개인정보 보호: 디자인이 클라우드에 업로드되지 않습니다',
282
+ level: 3,
283
+ },
284
+ {
285
+ type: 'paragraph',
286
+ html: '업로드 전의 썸네일은 민감한 전략의 일부라는 점을 잘 알고 있습니다. 그래서 이 도구는 브라우저 엔진 내에서만 작동하도록 설계되었습니다. <strong>어떠한 데이터도 인터넷으로 전송되지 않습니다</strong>. 선택한 파일은 로컬 임시 URL을 통해 로드되며 탭을 닫으면 사라집니다. 지적 재산은 100% 여러분의 통제 하에 있습니다.',
287
+ },
288
+ {
289
+ type: 'title',
290
+ text: '결론: 완벽한 픽셀 보장',
291
+ level: 3,
292
+ },
293
+ {
294
+ type: 'paragraph',
295
+ html: '추측은 멈추고 검증을 시작하세요. JJLMoya의 <strong>유튜브 썸네일 미리보기</strong>는 아마추어와 프로를 가르는 무료 도구입니다. 폰트 크기나 피사체 위치의 작은 조정이 눈에 띄지 않는 영상과 조회수 폭발을 가르는 결정적 차이가 될 수 있습니다.',
296
+ },
297
+ {
298
+ type: 'paragraph',
299
+ html: '지금 바로 채널 최적화를 시작하고 여러분의 영상에 걸맞은 클릭률을 확보하세요!',
300
+ },
301
+ ],
302
+ ui: {
303
+ dropFeedTitle: '썸네일 드래그 앤 드롭',
304
+ dropFeedSub: 'PNG, JPG 또는 WebP · 여러 이미지 가능',
305
+ dropAvatarTitle: '아바타 드래그 앤 드롭',
306
+ dropAvatarSub: '채널 프로필 이미지',
307
+ labelTitle: '비디오 제목',
308
+ labelChannel: '채널명',
309
+ defaultTitle: '비디오 제목을 입력하세요',
310
+ defaultChannel: '채널명',
311
+ btnDesktop: '데스크톱',
312
+ btnMobile: '모바일',
313
+ btnClear: '초기화',
314
+ labelLight: '라이트',
315
+ labelDark: '다크',
316
+ views0: '조회수 120만회 · 1시간 전',
317
+ views1: '45분 전',
318
+ views2: '조회수 25만회 · 1일 전',
319
+ views3: '조회수 310만회 · 1주일 전',
320
+ },
321
+ };
@@ -0,0 +1,321 @@
1
+ import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
2
+ import type { ToolLocaleContent } from '../../../types';
3
+ import type { YoutubeThumbnailPreviewerUI } from '../ui';
4
+
5
+ const slug = 'youtube-thumbnail-preview';
6
+ const title = 'YouTube Thumbnail Previewer Online: Verbeter je CTR Gratis';
7
+ const description =
8
+ 'Upload je thumbnail en zie hoe deze eruitziet in de echte YouTube-feed op mobiel en desktop. Simulator voor donkere en lichte modus om klikken direct te optimaliseren.';
9
+
10
+ const faqData = [
11
+ {
12
+ question: 'Waarom is het belangrijk om YouTube-thumbnails te testen?',
13
+ answer:
14
+ 'De meeste gebruikers bekijken YouTube op mobiele apparaten. Een thumbnail die er geweldig uitziet op je monitor, kan onleesbaar zijn op een klein scherm. Testen in een simulator zorgt ervoor dat de tekst helder is en het hoofdonderwerp op elk formaat opvalt.',
15
+ },
16
+ {
17
+ question: 'Moet ik me registreren om deze Previewer te gebruiken?',
18
+ answer:
19
+ 'Nee. Onze tool is 100% gratis en werkt direct in je browser. Je hoeft geen account aan te maken of je e-mailadres op te geven om je thumbnails te optimaliseren.',
20
+ },
21
+ {
22
+ question: 'Worden mijn ontwerpen geüpload naar jullie server?',
23
+ answer:
24
+ 'Absoluut niet. Privacy is onze hoogste prioriteit. Wanneer je een bestand selecteert, wordt dit lokaal in het geheugen van je browser geladen via een tijdelijke URL. Niemand behalve jij kan het ontwerp zien dat je aan het testen bent.',
25
+ },
26
+ {
27
+ question: 'Hoe helpt deze tool mijn CTR te verbeteren?',
28
+ answer:
29
+ 'De CTR (Click-Through Rate) is het percentage mensen dat klikt wanneer ze je thumbnail zien. Door de echte omgeving te simuleren (donkere vs. lichte achtergrond, mobiel vs. desktop), kun je contrast- en compositieproblemen oplossen voordat je publiceert, wat je klikken verhoogt.',
30
+ },
31
+ {
32
+ question: 'Werkt het met de officiële donkere modus van YouTube?',
33
+ answer:
34
+ 'Ja. We hebben een thema-selector (Licht en Donker) toegevoegd die exact de hex-kleuren nabootst die door de officiële YouTube-app in beide modi worden gebruikt.',
35
+ },
36
+ ];
37
+
38
+ const howToData = [
39
+ {
40
+ name: 'Upload je ontwerp',
41
+ text: 'Klik op het uploadgebied of sleep je afbeeldingsbestand (PNG, JPG of WebP) rechtstreeks naar de tool.',
42
+ },
43
+ {
44
+ name: 'Stel de context in',
45
+ text: 'Typ je videotitel en kanaalnaam in, zodat de simulatie zo realistisch mogelijk is ten opzichte van de echte feed.',
46
+ },
47
+ {
48
+ name: 'Wissel van apparaat',
49
+ text: 'Schakel tussen de desktop- en mobiele weergave om de leesbaarheid op schermen van verschillende formaten te verifiëren.',
50
+ },
51
+ {
52
+ name: 'Test het contrast',
53
+ text: 'Activeer het donkere thema om te controleren of de kleuren goed uitkomen tegen de zwarte YouTube-achtergrond.',
54
+ },
55
+ ];
56
+
57
+ const faqSchema: WithContext<FAQPage> = {
58
+ '@context': 'https://schema.org',
59
+ '@type': 'FAQPage',
60
+ mainEntity: faqData.map((item) => ({
61
+ '@type': 'Question',
62
+ name: item.question,
63
+ acceptedAnswer: { '@type': 'Answer', text: item.answer },
64
+ })),
65
+ };
66
+
67
+ const howToSchema: WithContext<HowToThing> = {
68
+ '@context': 'https://schema.org',
69
+ '@type': 'HowTo',
70
+ name: title,
71
+ description,
72
+ step: howToData.map((step, i) => ({
73
+ '@type': 'HowToStep',
74
+ position: i + 1,
75
+ name: step.name,
76
+ text: step.text,
77
+ })),
78
+ };
79
+
80
+ const appSchema: WithContext<SoftwareApplication> = {
81
+ '@context': 'https://schema.org',
82
+ '@type': 'SoftwareApplication',
83
+ name: title,
84
+ description,
85
+ applicationCategory: 'UtilityApplication',
86
+ operatingSystem: 'All',
87
+ offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
88
+ inLanguage: 'nl',
89
+ };
90
+
91
+ export const content: ToolLocaleContent<YoutubeThumbnailPreviewerUI> = {
92
+ slug,
93
+ title,
94
+ description,
95
+ faqTitle: 'Veelgestelde Vragen',
96
+ faq: faqData,
97
+ bibliographyTitle: 'Referenties',
98
+ bibliography: [
99
+ {
100
+ name: 'YouTube Help: Aangepaste videothumbnails maken',
101
+ url: 'https://support.google.com/youtube/answer/141805',
102
+ },
103
+ {
104
+ name: 'Nielsen Norman Group: Visual Processing and UX Design',
105
+ url: 'https://www.nngroup.com/articles/visual-processing/',
106
+ },
107
+ {
108
+ name: 'Derral Eves: The YouTube Formula (Thumbnail Strategy)',
109
+ url: 'https://derraleves.com/the-youtube-formula/',
110
+ },
111
+ ],
112
+ howTo: howToData,
113
+ schemas: [faqSchema, howToSchema, appSchema],
114
+ seo: [
115
+ {
116
+ type: 'title',
117
+ text: 'YouTube Thumbnail Previewer: Beheers de CTR van je Kanaal',
118
+ level: 2,
119
+ },
120
+ {
121
+ type: 'paragraph',
122
+ html: 'In het YouTube-ecosysteem is de thumbnail de toegangspoort tot je content. Je kunt de beste video ter wereld hebben — montage op Hollywood-niveau, een script dat een Oscar waard is — maar als niemand klikt, blijft je werk onzichtbaar voor het algoritme. Dit is waar <strong>CTR (Click-Through Rate)</strong> een rol speelt, en de thumbnail is de bepalende factor.',
123
+ },
124
+ {
125
+ type: 'title',
126
+ text: 'Waarom je Thumbnails moet Testen voor het Uploaden',
127
+ level: 3,
128
+ },
129
+ {
130
+ type: 'list',
131
+ items: [
132
+ '<strong>Echte Preview:</strong> Zie je thumbnail exact zoals deze verschijnt in de YouTube-feed.',
133
+ '<strong>Donkere en Lichte Modus:</strong> Zorg ervoor dat kleuren opvallen bij elke gebruikersinstelling.',
134
+ '<strong>Apparaatsimulator:</strong> Controleer de leesbaarheid van tekst op zowel monitors als kleine mobiele schermen.',
135
+ '<strong>CTR-optimalisatie:</strong> Vergelijk je ontwerp met de eigen interface om klikken te maximaliseren.',
136
+ '<strong>Geen Registratie Vereist:</strong> Upload je afbeelding en test direct zonder een account aan te maken.',
137
+ '<strong>Privacy Gegarandeerd:</strong> Je ontwerpen worden lokaal verwerkt en nooit naar servers geüpload.',
138
+ ],
139
+ },
140
+ {
141
+ type: 'paragraph',
142
+ html: 'Veel makers maken de fout om thumbnails te ontwerpen op grote monitors en ze op volledig scherm te bekijken in hun favoriete editors. Het probleem is dat de eindgebruiker ze zelden zo ziet. De meesten consumeren content op een mobiel apparaat tijdens het oneindig scrollen, of in een hoek van de monitor in de donkere modus. Onze <strong>YouTube Thumbnail Previewer</strong> laat je die "ontwerpersillusie" doorbreken en de rauwe realiteit van de feed zien.',
143
+ },
144
+ {
145
+ type: 'title',
146
+ text: 'Technische Metrieken en Prestaties',
147
+ level: 3,
148
+ },
149
+ {
150
+ type: 'grid',
151
+ columns: [
152
+ { title: '0,2s', body: 'Responstijd' },
153
+ { title: '4K', body: 'Maximale Resolutie' },
154
+ { title: '100%', body: 'Lokale Privacy' },
155
+ { title: 'HD', body: 'Eigen Kwaliteit' },
156
+ ],
157
+ },
158
+ {
159
+ type: 'title',
160
+ text: 'De Psychologie van de Klik: Waarom Thumbnails Falen',
161
+ level: 3,
162
+ },
163
+ {
164
+ type: 'paragraph',
165
+ html: 'Het menselijk brein verwerkt beelden duizenden keren sneller dan tekst. Toch is de concurrentie op YouTube moordend. Je thumbnail moet niet alleen "mooi" zijn — hij moet <strong>leesbaar</strong> zijn en <strong>contrast</strong> hebben.',
166
+ },
167
+ {
168
+ type: 'paragraph',
169
+ html: 'Een veelgemaakte fout is het gebruik van kleuren die opgaan in de YouTube-achtergrond. Als je donkergrijze tinten gebruikt en je kijker staat in de donkere modus, verdwijnt je video simpelweg uit hun perifere zicht. Met deze tester kun je tussen thema’s schakelen en ervoor zorgen dat je ontwerp in elk scenario "popt" (opvalt).',
170
+ },
171
+ {
172
+ type: 'title',
173
+ text: 'Directe Vergelijking: Ontwerp vs. Realiteit',
174
+ level: 3,
175
+ },
176
+ {
177
+ type: 'paragraph',
178
+ html: 'Is het de moeite waard om 30 seconden te besteden aan het testen van de thumbnail? Het antwoord is een volmondig JA. Een geoptimaliseerde thumbnail kan je weergaven in de eerste 24 uur verdubbelen, wat de YouTube-AI vertelt dat je content een "hook" heeft.',
179
+ },
180
+ {
181
+ type: 'grid',
182
+ columns: [
183
+ {
184
+ title: 'Ontwerpen in Photoshop / Canva',
185
+ body: 'Vals gevoel van werkelijke grootte · Negeert contrast met de app-achtergrond · Tekst lijkt leesbaar maar is dat misschien niet · Je mist UI-elementen (duur-badge, avatars)',
186
+ },
187
+ {
188
+ title: 'YouTube Thumbnail Previewer',
189
+ body: 'Echte weergave in de Home-feed · Contrast geverifieerd in donkere vs. lichte modus · Tekstleesbaarheid gegarandeerd op mobiel · Simulatie van titel en kanaalnaam',
190
+ },
191
+ ],
192
+ },
193
+ {
194
+ type: 'title',
195
+ text: 'Checklist voor een Thumbnail met een CTR boven de 10%',
196
+ level: 3,
197
+ },
198
+ {
199
+ type: 'paragraph',
200
+ html: 'Voordat je je definitieve ontwerp exporteert, moet je deze checklist doornemen met onze professionele simulator:',
201
+ },
202
+ {
203
+ type: 'list',
204
+ items: [
205
+ 'Is de tekst leesbaar op een klein mobiel scherm?',
206
+ 'Is er voldoende contrast tussen de achtergrond en het hoofdonderwerp?',
207
+ 'Ziet de thumbnail er goed uit tegen de zwarte achtergrond van de donkere modus?',
208
+ 'Dekt de videotitel vitale informatie in de afbeelding af?',
209
+ 'Verbergt de duur-badge (het zwarte vakje) iets belangrijks?',
210
+ 'Draagt het gezicht of hoofdobject de gewenste emotie uit op verkleind formaat?',
211
+ ],
212
+ },
213
+ {
214
+ type: 'title',
215
+ text: 'Anatomie van een High-Impact Thumbnail',
216
+ level: 3,
217
+ },
218
+ {
219
+ type: 'paragraph',
220
+ html: 'Gebaseerd op analyses van de grootste kanalen ter wereld, volgt een winnende thumbnail meestal dit structurele patroon:',
221
+ },
222
+ {
223
+ type: 'grid',
224
+ columns: [
225
+ {
226
+ title: 'Hoofdonderwerp',
227
+ body: 'Primaire focus · Gebruik scherpe uitsneden met een lichte rand of extra verzadiging.',
228
+ },
229
+ {
230
+ title: 'Tekst (Max 3 woorden)',
231
+ body: 'Directe context · Gebruik vette Sans Serif lettertypen en complementaire kleuren.',
232
+ },
233
+ {
234
+ title: 'Vervaagde Achtergrond',
235
+ body: 'Vlakverdeling · Voegt diepte toe zodat het hoofdonderwerp van het scherm "springt".',
236
+ },
237
+ {
238
+ title: 'Ruimte voor Duur',
239
+ body: 'Fouten vermijden · Plaats geen gezichten of tekst in de rechteronderhoek.',
240
+ },
241
+ ],
242
+ },
243
+ {
244
+ type: 'tip',
245
+ title: 'De Dode Zone Truc',
246
+ html: '<p>YouTube plaatst altijd een zwart vakje met de videoduur in de rechteronderhoek van de thumbnail. Duizenden makers plaatsen vitale elementen in die zone, om er vervolgens achter te komen dat de app ze bedekt. Onze tool simuleert dit vakje, zodat je nooit je beste shot bedekt.</p>',
247
+ },
248
+ {
249
+ type: 'title',
250
+ text: 'Voordelen en Beperkingen van de Tool',
251
+ level: 3,
252
+ },
253
+ {
254
+ type: 'grid',
255
+ columns: [
256
+ {
257
+ title: 'Ultrasnelle en reactieve interface',
258
+ body: 'Beperking: Staat geen beeldbewerking toe (gebruik Canva/PS)',
259
+ },
260
+ {
261
+ title: 'Exacte App en Web mockups',
262
+ body: 'Beperking: Simuleert geen Pre-roll advertenties',
263
+ },
264
+ {
265
+ title: 'Gratis en zonder irritante reclames',
266
+ body: 'Beperking: Ondersteunt alleen lokale bestanden',
267
+ },
268
+ ],
269
+ },
270
+ {
271
+ type: 'title',
272
+ text: 'Gebruik van de "Split" Modus (Directe Vergelijking)',
273
+ level: 3,
274
+ },
275
+ {
276
+ type: 'paragraph',
277
+ html: 'Dit is de sterfunctie. Door de Split-modus te activeren, zie je je thumbnail tegelijkertijd door de bril van de lichte en donkere modus. Het is de ultieme manier om te controleren of je kleurenpalet universeel is of dat er aanpassingen in helderheid en contrast nodig zijn.',
278
+ },
279
+ {
280
+ type: 'title',
281
+ text: 'Privacy: Je Ontwerpen worden Niet Geüpload naar de Cloud',
282
+ level: 3,
283
+ },
284
+ {
285
+ type: 'paragraph',
286
+ html: 'We weten dat je thumbnails deel uitmaken van je geheime strategie voor een lancering. Daarom hebben we deze utility zo ontworpen dat deze uitsluitend in je browserengine werkt. <strong>Niets wordt naar het internet geüpload</strong>. Het bestand dat je selecteert, wordt geladen via een lokale tijdelijke URL die verdwijnt wanneer je het tabblad sluit. Je intellectuele eigendom is 100% onder jouw controle.',
287
+ },
288
+ {
289
+ type: 'title',
290
+ text: 'Conclusie: De Perfecte Pixel Gegarandeerd',
291
+ level: 3,
292
+ },
293
+ {
294
+ type: 'paragraph',
295
+ html: 'Stop met gissen en begin met valideren. De <strong>YouTube Thumbnail Previewer</strong> van JJLMoya is de gratis tool die amateur-makers onderscheidt van professionele contentcreators. Een kleine aanpassing in lettergrootte of positie van het onderwerp kan het verschil zijn tussen een video die onopgemerkt blijft en een viraal succes.',
296
+ },
297
+ {
298
+ type: 'paragraph',
299
+ html: 'Begin nu met het optimaliseren van je kanaal en geef je video’s de click-through rate die ze verdienen!',
300
+ },
301
+ ],
302
+ ui: {
303
+ dropFeedTitle: 'Sleep je Thumbnail hierheen',
304
+ dropFeedSub: 'PNG, JPG of WebP · Meerdere afbeeldingen',
305
+ dropAvatarTitle: 'Sleep je Avatar hierheen',
306
+ dropAvatarSub: 'Kanaalprofielafbeelding',
307
+ labelTitle: 'Videotitel',
308
+ labelChannel: 'Kanaalnaam',
309
+ defaultTitle: 'Je Videotitel Hier',
310
+ defaultChannel: 'Kanaalnaam',
311
+ btnDesktop: 'Desktop',
312
+ btnMobile: 'Mobiel',
313
+ btnClear: 'Wissen',
314
+ labelLight: 'Licht',
315
+ labelDark: 'Donker',
316
+ views0: '1,2 mln. weergaven · 1 uur geleden',
317
+ views1: '45 minuten geleden',
318
+ views2: '250.000 weergaven · 1 dag geleden',
319
+ views3: '3,1 mln. weergaven · 1 week geleden',
320
+ },
321
+ };