@jjlmoya/utils-audiovisual 1.7.0 → 1.8.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.
- package/package.json +2 -1
- package/src/category/i18n/de.ts +198 -0
- package/src/category/i18n/id.ts +198 -0
- package/src/category/i18n/it.ts +198 -0
- package/src/category/i18n/ja.ts +198 -0
- package/src/category/i18n/ko.ts +198 -0
- package/src/category/i18n/nl.ts +198 -0
- package/src/category/i18n/pl.ts +198 -0
- package/src/category/i18n/pt.ts +198 -0
- package/src/category/i18n/ru.ts +198 -0
- package/src/category/i18n/sv.ts +198 -0
- package/src/category/i18n/tr.ts +198 -0
- package/src/category/i18n/zh.ts +198 -0
- package/src/category/index.ts +31 -3
- package/src/tests/i18n_coverage.test.ts +36 -0
- package/src/tool/chromaticLens/i18n/de.ts +246 -0
- package/src/tool/chromaticLens/i18n/id.ts +246 -0
- package/src/tool/chromaticLens/i18n/it.ts +246 -0
- package/src/tool/chromaticLens/i18n/ja.ts +246 -0
- package/src/tool/chromaticLens/i18n/ko.ts +246 -0
- package/src/tool/chromaticLens/i18n/nl.ts +246 -0
- package/src/tool/chromaticLens/i18n/pl.ts +246 -0
- package/src/tool/chromaticLens/i18n/pt.ts +246 -0
- package/src/tool/chromaticLens/i18n/ru.ts +246 -0
- package/src/tool/chromaticLens/i18n/sv.ts +246 -0
- package/src/tool/chromaticLens/i18n/tr.ts +246 -0
- package/src/tool/chromaticLens/i18n/zh.ts +246 -0
- package/src/tool/chromaticLens/index.ts +15 -7
- package/src/tool/collageMaker/i18n/de.ts +233 -0
- package/src/tool/collageMaker/i18n/id.ts +233 -0
- package/src/tool/collageMaker/i18n/it.ts +233 -0
- package/src/tool/collageMaker/i18n/ja.ts +233 -0
- package/src/tool/collageMaker/i18n/ko.ts +233 -0
- package/src/tool/collageMaker/i18n/nl.ts +233 -0
- package/src/tool/collageMaker/i18n/pl.ts +233 -0
- package/src/tool/collageMaker/i18n/pt.ts +233 -0
- package/src/tool/collageMaker/i18n/ru.ts +233 -0
- package/src/tool/collageMaker/i18n/sv.ts +233 -0
- package/src/tool/collageMaker/i18n/tr.ts +233 -0
- package/src/tool/collageMaker/i18n/zh.ts +233 -0
- package/src/tool/collageMaker/index.ts +15 -6
- package/src/tool/exifCleaner/i18n/de.ts +277 -0
- package/src/tool/exifCleaner/i18n/fr.ts +1 -1
- package/src/tool/exifCleaner/i18n/id.ts +277 -0
- package/src/tool/exifCleaner/i18n/it.ts +277 -0
- package/src/tool/exifCleaner/i18n/ja.ts +277 -0
- package/src/tool/exifCleaner/i18n/ko.ts +277 -0
- package/src/tool/exifCleaner/i18n/nl.ts +277 -0
- package/src/tool/exifCleaner/i18n/pl.ts +277 -0
- package/src/tool/exifCleaner/i18n/pt.ts +277 -0
- package/src/tool/exifCleaner/i18n/ru.ts +277 -0
- package/src/tool/exifCleaner/i18n/sv.ts +277 -0
- package/src/tool/exifCleaner/i18n/tr.ts +277 -0
- package/src/tool/exifCleaner/i18n/zh.ts +277 -0
- package/src/tool/exifCleaner/index.ts +16 -8
- package/src/tool/imageCompressor/i18n/de.ts +242 -0
- package/src/tool/imageCompressor/i18n/en.ts +1 -1
- package/src/tool/imageCompressor/i18n/es.ts +1 -1
- package/src/tool/imageCompressor/i18n/id.ts +242 -0
- package/src/tool/imageCompressor/i18n/it.ts +242 -0
- package/src/tool/imageCompressor/i18n/ja.ts +242 -0
- package/src/tool/imageCompressor/i18n/ko.ts +242 -0
- package/src/tool/imageCompressor/i18n/nl.ts +242 -0
- package/src/tool/imageCompressor/i18n/pl.ts +242 -0
- package/src/tool/imageCompressor/i18n/pt.ts +242 -0
- package/src/tool/imageCompressor/i18n/ru.ts +242 -0
- package/src/tool/imageCompressor/i18n/sv.ts +242 -0
- package/src/tool/imageCompressor/i18n/tr.ts +242 -0
- package/src/tool/imageCompressor/i18n/zh.ts +244 -0
- package/src/tool/imageCompressor/index.ts +15 -7
- package/src/tool/printQualityCalculator/i18n/de.ts +261 -0
- package/src/tool/printQualityCalculator/i18n/fr.ts +1 -1
- package/src/tool/printQualityCalculator/i18n/id.ts +261 -0
- package/src/tool/printQualityCalculator/i18n/it.ts +261 -0
- package/src/tool/printQualityCalculator/i18n/ja.ts +261 -0
- package/src/tool/printQualityCalculator/i18n/ko.ts +261 -0
- package/src/tool/printQualityCalculator/i18n/nl.ts +261 -0
- package/src/tool/printQualityCalculator/i18n/pl.ts +261 -0
- package/src/tool/printQualityCalculator/i18n/pt.ts +261 -0
- package/src/tool/printQualityCalculator/i18n/ru.ts +261 -0
- package/src/tool/printQualityCalculator/i18n/sv.ts +261 -0
- package/src/tool/printQualityCalculator/i18n/tr.ts +261 -0
- package/src/tool/printQualityCalculator/i18n/zh.ts +261 -0
- package/src/tool/printQualityCalculator/index.ts +15 -7
- package/src/tool/privacyBlur/i18n/de.ts +238 -0
- package/src/tool/privacyBlur/i18n/id.ts +238 -0
- package/src/tool/privacyBlur/i18n/it.ts +238 -0
- package/src/tool/privacyBlur/i18n/ja.ts +238 -0
- package/src/tool/privacyBlur/i18n/ko.ts +238 -0
- package/src/tool/privacyBlur/i18n/nl.ts +238 -0
- package/src/tool/privacyBlur/i18n/pl.ts +238 -0
- package/src/tool/privacyBlur/i18n/pt.ts +238 -0
- package/src/tool/privacyBlur/i18n/ru.ts +238 -0
- package/src/tool/privacyBlur/i18n/sv.ts +238 -0
- package/src/tool/privacyBlur/i18n/tr.ts +238 -0
- package/src/tool/privacyBlur/i18n/zh.ts +238 -0
- package/src/tool/privacyBlur/index.ts +15 -7
- package/src/tool/subtitleSync/i18n/de.ts +241 -0
- package/src/tool/subtitleSync/i18n/fr.ts +5 -5
- package/src/tool/subtitleSync/i18n/id.ts +241 -0
- package/src/tool/subtitleSync/i18n/it.ts +241 -0
- package/src/tool/subtitleSync/i18n/ja.ts +241 -0
- package/src/tool/subtitleSync/i18n/ko.ts +241 -0
- package/src/tool/subtitleSync/i18n/nl.ts +241 -0
- package/src/tool/subtitleSync/i18n/pl.ts +241 -0
- package/src/tool/subtitleSync/i18n/pt.ts +241 -0
- package/src/tool/subtitleSync/i18n/ru.ts +241 -0
- package/src/tool/subtitleSync/i18n/sv.ts +241 -0
- package/src/tool/subtitleSync/i18n/tr.ts +241 -0
- package/src/tool/subtitleSync/i18n/zh.ts +241 -0
- package/src/tool/subtitleSync/index.ts +15 -7
- package/src/tool/timelapseCalculator/i18n/de.ts +169 -0
- package/src/tool/timelapseCalculator/i18n/fr.ts +2 -2
- package/src/tool/timelapseCalculator/i18n/id.ts +169 -0
- package/src/tool/timelapseCalculator/i18n/it.ts +169 -0
- package/src/tool/timelapseCalculator/i18n/ja.ts +169 -0
- package/src/tool/timelapseCalculator/i18n/ko.ts +169 -0
- package/src/tool/timelapseCalculator/i18n/nl.ts +169 -0
- package/src/tool/timelapseCalculator/i18n/pl.ts +169 -0
- package/src/tool/timelapseCalculator/i18n/pt.ts +169 -0
- package/src/tool/timelapseCalculator/i18n/ru.ts +169 -0
- package/src/tool/timelapseCalculator/i18n/sv.ts +169 -0
- package/src/tool/timelapseCalculator/i18n/tr.ts +169 -0
- package/src/tool/timelapseCalculator/i18n/zh.ts +169 -0
- package/src/tool/timelapseCalculator/index.ts +16 -8
- package/src/tool/tvDistance/i18n/de.ts +223 -0
- package/src/tool/tvDistance/i18n/id.ts +223 -0
- package/src/tool/tvDistance/i18n/it.ts +223 -0
- package/src/tool/tvDistance/i18n/ja.ts +223 -0
- package/src/tool/tvDistance/i18n/ko.ts +223 -0
- package/src/tool/tvDistance/i18n/nl.ts +223 -0
- package/src/tool/tvDistance/i18n/pl.ts +223 -0
- package/src/tool/tvDistance/i18n/pt.ts +223 -0
- package/src/tool/tvDistance/i18n/ru.ts +223 -0
- package/src/tool/tvDistance/i18n/sv.ts +223 -0
- package/src/tool/tvDistance/i18n/tr.ts +223 -0
- package/src/tool/tvDistance/i18n/zh.ts +223 -0
- package/src/tool/tvDistance/index.ts +15 -7
- package/src/tool/videoFrameExtractor/i18n/de.ts +235 -0
- package/src/tool/videoFrameExtractor/i18n/id.ts +235 -0
- package/src/tool/videoFrameExtractor/i18n/it.ts +235 -0
- package/src/tool/videoFrameExtractor/i18n/ja.ts +235 -0
- package/src/tool/videoFrameExtractor/i18n/ko.ts +235 -0
- package/src/tool/videoFrameExtractor/i18n/nl.ts +235 -0
- package/src/tool/videoFrameExtractor/i18n/pl.ts +235 -0
- package/src/tool/videoFrameExtractor/i18n/pt.ts +235 -0
- package/src/tool/videoFrameExtractor/i18n/ru.ts +235 -0
- package/src/tool/videoFrameExtractor/i18n/sv.ts +235 -0
- package/src/tool/videoFrameExtractor/i18n/tr.ts +235 -0
- package/src/tool/videoFrameExtractor/i18n/zh.ts +235 -0
- package/src/tool/videoFrameExtractor/index.ts +16 -8
|
@@ -0,0 +1,246 @@
|
|
|
1
|
+
import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
|
|
2
|
+
import type { ChromaticLensUI, ChromaticLensLocaleContent } from '../index';
|
|
3
|
+
|
|
4
|
+
const slug = 'chromatic-lens-color-palette-extraction-online';
|
|
5
|
+
const title = 'Chromatic Lens: 온라인 컬러 팔레트 추출';
|
|
6
|
+
const description = '어떤 이미지에서든 전문적인 컬러 팔레트를 무료로 추출하세요. 수학적 알고리즘을 사용하여 사진 속 지배적인 색상을 식별합니다.';
|
|
7
|
+
|
|
8
|
+
const ui: ChromaticLensUI = {
|
|
9
|
+
dropTitle: "색상 분석",
|
|
10
|
+
dropSubtitle: "이미지를 드래그하여 색채 DNA를 추출하세요.",
|
|
11
|
+
processingLabel: "팔레트 추출 중...",
|
|
12
|
+
paletteTitle: "추출된 팔레트",
|
|
13
|
+
copyLabel: "HEX 복사",
|
|
14
|
+
copiedLabel: "복사 완료!",
|
|
15
|
+
colorCountLabel: "색상 수",
|
|
16
|
+
changeImage: "이미지 변경",
|
|
17
|
+
faqTitle: "색상 추출에 관한 자주 묻는 질문",
|
|
18
|
+
bibliographyTitle: "리소스 및 기술 문서"
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
const faq: ChromaticLensLocaleContent['faq'] = [
|
|
22
|
+
{
|
|
23
|
+
question: "색상 추출은 어떻게 작동하나요?",
|
|
24
|
+
answer: "RGB 색 공간에서의 근접성에 따라 이미지 픽셀을 그룹화하여 가장 대표적인 톤을 찾는 '메디안 컷(Median Cut)' 알고리즘을 사용합니다.",
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
question: "디자인 에디터로 색상을 복사할 수 있나요?",
|
|
28
|
+
answer: "네, 각 색상을 클릭하면 HEX 코드가 자동으로 클립보드에 복사되어 Photoshop, Figma 또는 CSS에 바로 붙여넣을 수 있습니다.",
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
question: "어떤 유형의 이미지를 분석할 수 있나요?",
|
|
32
|
+
answer: "모든 JPG, PNG 또는 WebP 파일을 분석할 수 있습니다. 처리는 로컬에서 이루어지므로 대용량 이미지도 네트워크 데이터 소모 없이 빠르게 분석됩니다.",
|
|
33
|
+
},
|
|
34
|
+
];
|
|
35
|
+
|
|
36
|
+
const howTo: ChromaticLensLocaleContent['howTo'] = [
|
|
37
|
+
{
|
|
38
|
+
name: "이미지 업로드",
|
|
39
|
+
text: "색채적 영감을 얻고 싶은 사진을 업로드하세요.",
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
name: "정밀도 조절",
|
|
43
|
+
text: "도구가 식별할 지배적 색상의 수(3~12개)를 선택하세요.",
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
name: "결과 분석",
|
|
47
|
+
text: "해당 16진수(HEX) 코드와 함께 팔레트가 즉시 나타납니다.",
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
name: "복사 및 사용",
|
|
51
|
+
text: "톤을 클릭하여 저장하고 디자인 프로젝트에 적용하세요.",
|
|
52
|
+
},
|
|
53
|
+
];
|
|
54
|
+
|
|
55
|
+
const bibliography: ChromaticLensLocaleContent['bibliography'] = [
|
|
56
|
+
{
|
|
57
|
+
name: "메디안 컷 알고리즘 - 위키백과",
|
|
58
|
+
url: "https://ko.wikipedia.org/wiki/%EB%A9%94%EB%94%94%EC%95%88_%EC%BB%B7_%EC%95%8C%EA%B3%A0%EB%A6%AC%EC%A6%98",
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
name: "디자이너를 위한 색채 이론",
|
|
62
|
+
url: "https://www.smashingmagazine.com/2010/01/color-theory-for-designers-part-1-the-meaning-of-color/",
|
|
63
|
+
},
|
|
64
|
+
];
|
|
65
|
+
|
|
66
|
+
const seo: ChromaticLensLocaleContent['seo'] = [
|
|
67
|
+
{
|
|
68
|
+
type: 'summary',
|
|
69
|
+
title: '지능형 컬러 팔레트 추출',
|
|
70
|
+
items: [
|
|
71
|
+
'색상 분석을 위한 전문적인 메디안 컷 알고리즘',
|
|
72
|
+
'모든 이미지에서 3~12개의 지배적 색상 추출',
|
|
73
|
+
'클립보드로 직접 복사 가능한 HEX 코드',
|
|
74
|
+
'100% 로컬 처리 - 크리에이티브 작업에 이상적'
|
|
75
|
+
]
|
|
76
|
+
},
|
|
77
|
+
{ type: 'title', text: '컬러 팔레트 추출: 과학과 디자인', level: 2 },
|
|
78
|
+
{ type: 'paragraph', html: '영화 속 장면이 왜 그렇게 조화롭게 느껴지는지 궁금한 적이 있나요? 그것은 우연이 아니라 색채 이론이 적용된 결과입니다. Chromatic Lens를 사용하면 픽셀에서 직접 그 조화를 추출하여 디자인 프로젝트에서 사용할 수 있는 HEX 코드로 변환할 수 있습니다.' },
|
|
79
|
+
|
|
80
|
+
{ type: 'stats', items: [
|
|
81
|
+
{ value: '즉시', label: '색상 분석', icon: 'mdi:lightning-bolt' },
|
|
82
|
+
{ value: '100%', label: '로컬 개인정보 보호', icon: 'mdi:lock' },
|
|
83
|
+
{ value: 'RGB', label: '정밀한 색 공간', icon: 'mdi:palette' }
|
|
84
|
+
], columns: 3 },
|
|
85
|
+
|
|
86
|
+
{ type: 'title', text: '메디안 컷 알고리즘 설명', level: 3 },
|
|
87
|
+
{ type: 'paragraph', html: '지능형 팔레트 추출은 단순히 픽셀을 무작위로 샘플링하는 것이 아닙니다. 재귀적 분할 기법인 메디안 컷 알고리즘을 사용하여 충실한 재현을 보장합니다.' },
|
|
88
|
+
{ type: 'list', items: [
|
|
89
|
+
'<strong>재귀적 분할:</strong> 이미지의 RGB \"컬러 큐브\"를 더 작은 박스로 재귀적으로 나눕니다.',
|
|
90
|
+
'<strong>부피 균형:</strong> 각 파티션은 유사한 부피를 가진 동일한 색 공간의 픽셀들을 그룹화하려고 시도합니다.',
|
|
91
|
+
'<strong>가중 평균:</strong> 각 박스의 결과 색상은 그 안에 포함된 모든 픽셀의 평균값이 됩니다.',
|
|
92
|
+
'<strong>충실한 재현:</strong> 지배적인 색상은 단순한 샘플이 아니라 이미지의 실제 시각적 분위기를 반영합니다.'
|
|
93
|
+
], icon: 'mdi:check' },
|
|
94
|
+
|
|
95
|
+
{ type: 'card', title: '크리에이티브 워크플로우', html: '웹 개발자, UX/UI 디자이너, 디지털 아티스트 및 사진, 영화 또는 시각적 레퍼런스의 본질을 즉시 포착하여 인터페이스, 일러스트레이션 또는 브랜드 팔레트에 적용하려는 크리에이터에게 이상적입니다.' },
|
|
96
|
+
|
|
97
|
+
{ type: 'title', text: '디지털 디자인 활용 사례', level: 3 },
|
|
98
|
+
{ type: 'comparative', items: [
|
|
99
|
+
{
|
|
100
|
+
title: 'UX/UI 디자이너',
|
|
101
|
+
description: '히어로 이미지에서 팔레트를 추출하여 화합된 인터페이스 제작',
|
|
102
|
+
icon: 'mdi:palette',
|
|
103
|
+
points: [
|
|
104
|
+
'조화로운 배경색',
|
|
105
|
+
'버튼 및 보조 요소',
|
|
106
|
+
'자동으로 계산된 대비'
|
|
107
|
+
]
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
title: '웹 개발자',
|
|
111
|
+
description: '시각적 레퍼런스에서 바로 CSS 스타일시트 생성',
|
|
112
|
+
icon: 'mdi:code-braces',
|
|
113
|
+
points: [
|
|
114
|
+
'HEX를 CSS로 직접 복사',
|
|
115
|
+
'SCSS/CSS의 컬러 변수 활용',
|
|
116
|
+
'사전 디자인 없이도 일관된 테마'
|
|
117
|
+
],
|
|
118
|
+
highlight: true
|
|
119
|
+
},
|
|
120
|
+
{
|
|
121
|
+
title: '디지털 아티스트 및 일러스트레이터',
|
|
122
|
+
description: '영화, 자연 또는 예술에서 색채 레퍼런스 포착',
|
|
123
|
+
icon: 'mdi:brush',
|
|
124
|
+
points: [
|
|
125
|
+
'거장의 작품에서 레퍼런스 팔레트 추출',
|
|
126
|
+
'시네마틱 컬러 연구',
|
|
127
|
+
'즉각적인 시각적 영감'
|
|
128
|
+
]
|
|
129
|
+
},
|
|
130
|
+
{
|
|
131
|
+
title: '브랜딩 전문가',
|
|
132
|
+
description: '가이드 사진을 기반으로 시각적 정체성 개발',
|
|
133
|
+
icon: 'mdi:tag-multiple',
|
|
134
|
+
points: [
|
|
135
|
+
'이미지에서 브랜드 컬러 추출',
|
|
136
|
+
'전문적인 색채 가이드 제작',
|
|
137
|
+
'시각적 일관성 확보'
|
|
138
|
+
]
|
|
139
|
+
}
|
|
140
|
+
], columns: 2 },
|
|
141
|
+
|
|
142
|
+
{ type: 'title', text: '응용 색채 이론', level: 3 },
|
|
143
|
+
{ type: 'table', headers: ['색상 개념', '정의', '실질적 적용'], rows: [
|
|
144
|
+
['색채 조화', '시각적으로 균형 잡힌 색상 조합', 'UI의 일관된 시각적 정체성'],
|
|
145
|
+
['대비 (Contrast)', '색상 간의 밝기 차이', '가독성 및 시각적 계층 구조'],
|
|
146
|
+
['채도 (Saturation)', '톤의 색상 강도', '전문성(낮음) vs 에너지(높음)'],
|
|
147
|
+
['색 온도', '따뜻한 색(빨강) vs 차가운 색(파랑)', '디자인의 감성 심리학'],
|
|
148
|
+
['단색 팔레트', '단일 톤의 변형', '우아함과 미니멀리즘']
|
|
149
|
+
] },
|
|
150
|
+
|
|
151
|
+
{ type: 'proscons', items: [
|
|
152
|
+
{
|
|
153
|
+
pro: '추출 시 수학적 정밀함 - 대략적인 시각적 선택이 아님',
|
|
154
|
+
con: '픽셀 수가 많을 경우 거의 보이지 않는 색상이 포함될 수 있음'
|
|
155
|
+
},
|
|
156
|
+
{
|
|
157
|
+
pro: '클립보드 즉시 복사 - 워크플로우와의 완벽한 통합',
|
|
158
|
+
con: 'Canvas API와 호환되는 최신 브라우저 필요'
|
|
159
|
+
},
|
|
160
|
+
{
|
|
161
|
+
pro: '완벽한 개인정보 보호 - 데이터 전송 없는 100% 로컬 분석',
|
|
162
|
+
con: '이전 분석 기록이 저장되지 않음'
|
|
163
|
+
},
|
|
164
|
+
{
|
|
165
|
+
pro: '모든 디지털 이미지 형식과 호환',
|
|
166
|
+
con: '최종 색상은 이미지 압축 및 품질에 따라 달라짐'
|
|
167
|
+
}
|
|
168
|
+
], proTitle: '장점', conTitle: '제한 사항' },
|
|
169
|
+
|
|
170
|
+
{ type: 'diagnostic', variant: 'success', title: '현실적인 색상 재현', icon: 'mdi:check-circle-outline', badge: '고급 알고리즘', html: '단순히 무작위 픽셀을 샘플링하는 도구와 달리, 당사의 시스템은 각 톤의 전체 픽셀 수를 가중치로 두는 메디안 컷 알고리즘을 사용하여 추출된 팔레트가 원본 이미지의 시각적 분위기와 색채 심리를 충실히 반영하도록 합니다.' },
|
|
171
|
+
|
|
172
|
+
{ type: 'glossary', items: [
|
|
173
|
+
{
|
|
174
|
+
term: '메디안 컷',
|
|
175
|
+
definition: 'RGB 공간을 박스로 재귀적으로 나누어 균등한 분포를 보장하는 컬러 양자화 알고리즘입니다. 역사적으로 GIF 및 인덱스 컬러 기술에서 사용되었습니다.'
|
|
176
|
+
},
|
|
177
|
+
{
|
|
178
|
+
term: 'RGB 색 공간',
|
|
179
|
+
definition: '빨강, 초록, 파랑을 기반으로 하는 컬러 모델입니다. 각 색상은 이 세 가지 값(0-255)의 조합으로 표현됩니다. 디지털 화면과 웹의 표준입니다.'
|
|
180
|
+
},
|
|
181
|
+
{
|
|
182
|
+
term: 'HEX 코드',
|
|
183
|
+
definition: '웹에서 색상을 나타내는 6자리 16진수 표기법(#RRGGBB)입니다: #FF0000(빨강), #00FF00(초록), #0000FF(파랑) 등. CSS, Figma, Adobe에서 공통적으로 사용됩니다.'
|
|
184
|
+
},
|
|
185
|
+
{
|
|
186
|
+
term: '색 채도',
|
|
187
|
+
definition: '색의 강도 또는 순도입니다. 높은 채도 = 선명한 색, 낮은 채도 = 회색조 색. 디자인의 감성적 인지에 영향을 미칩니다.'
|
|
188
|
+
},
|
|
189
|
+
{
|
|
190
|
+
term: '색채 조화',
|
|
191
|
+
definition: '시각적으로 즐거운 결과를 가져오는 색상의 선택과 조합입니다. 단색, 보색, 유사색, 3색 조합 등이 있습니다.'
|
|
192
|
+
}
|
|
193
|
+
] },
|
|
194
|
+
|
|
195
|
+
{ type: 'message', title: '전문적인 색채 분석', ariaLabel: '색채 분석에 관한 기술 정보', html: 'Chromatic Lens는 수동적인 시각 분석을 알고리즘적 정밀함으로 변환합니다. 단순히 색상을 추출하는 것이 아니라 이미지의 감성적, 시각적 본질을 포착하여 바로 사용할 수 있는 HEX 코드로 클립보드에 전달합니다. 완전한 개인정보 보호와 분석량 제한 없는 자유를 누리세요.' },
|
|
196
|
+
|
|
197
|
+
{ type: 'title', text: '시각적 영감으로부터의 디자인', level: 3 },
|
|
198
|
+
{ type: 'paragraph', html: '최고의 컬러 팔레트는 레퍼런스의 시각적 의도를 포착한 것입니다. Chromatic Lens는 관찰, 분석, 기록이라는 과거의 수동 프로세스를 자동화합니다. 이제 이미지를 드래그하기만 하면 몇 초 만에 전문적인 HEX 코드를 얻을 수 있습니다.' }
|
|
199
|
+
];
|
|
200
|
+
|
|
201
|
+
const faqSchema: WithContext<FAQPage> = {
|
|
202
|
+
'@context': 'https://schema.org',
|
|
203
|
+
'@type': 'FAQPage',
|
|
204
|
+
mainEntity: faq.map((item) => ({
|
|
205
|
+
'@type': 'Question',
|
|
206
|
+
name: item.question,
|
|
207
|
+
acceptedAnswer: { '@type': 'Answer', text: item.answer },
|
|
208
|
+
})),
|
|
209
|
+
};
|
|
210
|
+
|
|
211
|
+
const howToSchema: WithContext<HowTo> = {
|
|
212
|
+
'@context': 'https://schema.org',
|
|
213
|
+
'@type': 'HowTo',
|
|
214
|
+
name: title,
|
|
215
|
+
description,
|
|
216
|
+
step: howTo.map((step) => ({
|
|
217
|
+
'@type': 'HowToStep',
|
|
218
|
+
name: step.name,
|
|
219
|
+
text: step.text,
|
|
220
|
+
})),
|
|
221
|
+
};
|
|
222
|
+
|
|
223
|
+
const appSchema: WithContext<SoftwareApplication> = {
|
|
224
|
+
'@context': 'https://schema.org',
|
|
225
|
+
'@type': 'SoftwareApplication',
|
|
226
|
+
name: title,
|
|
227
|
+
description,
|
|
228
|
+
applicationCategory: 'UtilitiesApplication',
|
|
229
|
+
operatingSystem: 'Web',
|
|
230
|
+
offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
|
|
231
|
+
inLanguage: 'ko',
|
|
232
|
+
};
|
|
233
|
+
|
|
234
|
+
export const content: ChromaticLensLocaleContent = {
|
|
235
|
+
slug,
|
|
236
|
+
title,
|
|
237
|
+
description,
|
|
238
|
+
ui,
|
|
239
|
+
seo,
|
|
240
|
+
faqTitle: "자주 묻는 질문",
|
|
241
|
+
faq,
|
|
242
|
+
bibliographyTitle: "참고 문헌",
|
|
243
|
+
bibliography,
|
|
244
|
+
howTo,
|
|
245
|
+
schemas: [faqSchema as any, howToSchema as any, appSchema],
|
|
246
|
+
};
|
|
@@ -0,0 +1,246 @@
|
|
|
1
|
+
import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
|
|
2
|
+
import type { ChromaticLensUI, ChromaticLensLocaleContent } from '../index';
|
|
3
|
+
|
|
4
|
+
const slug = 'chromatic-lens-kleurenpalet-extractie-online';
|
|
5
|
+
const title = 'Chromatic Lens: Online Kleurenpalet Extractie';
|
|
6
|
+
const description = 'Extraheer gratis professionele kleurenpaletten uit elke afbeelding. Identificeer dominante kleuren in uw foto\'s met behulp van mathematische algoritmen.';
|
|
7
|
+
|
|
8
|
+
const ui: ChromaticLensUI = {
|
|
9
|
+
dropTitle: "Kleuren Analyseren",
|
|
10
|
+
dropSubtitle: "Sleep een afbeelding om het chromatische DNA te extraheren.",
|
|
11
|
+
processingLabel: "Palet extraheren...",
|
|
12
|
+
paletteTitle: "Geëxtraheerd Palet",
|
|
13
|
+
copyLabel: "HEX Kopiëren",
|
|
14
|
+
copiedLabel: "Gekopieerd!",
|
|
15
|
+
colorCountLabel: "Aantal kleuren",
|
|
16
|
+
changeImage: "Afbeelding wijzigen",
|
|
17
|
+
faqTitle: "Veelgestelde vragen over kleurextractie",
|
|
18
|
+
bibliographyTitle: "Hulpmiddelen en technische documentatie"
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
const faq: ChromaticLensLocaleContent['faq'] = [
|
|
22
|
+
{
|
|
23
|
+
question: "Hoe werkt kleurextractie?",
|
|
24
|
+
answer: "We gebruiken het 'Median Cut' algoritme, dat afbeeldingspixels groepeert op basis van hun nabijheid in de RGB-kleurruimte om de meest representatieve tonen te vinden.",
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
question: "Kan ik kleuren naar mijn ontwerpeditor kopiëren?",
|
|
28
|
+
answer: "Ja, door op elke kleur te klikken, wordt de HEX-code automatisch naar uw klembord gekopieerd, klaar om in Photoshop, Figma of CSS te worden geplakt.",
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
question: "Welke soorten afbeeldingen kan ik analyseren?",
|
|
32
|
+
answer: "Elk JPG-, PNG- of WebP-bestand. De verwerking is lokaal, dus grote afbeeldingen worden snel geanalyseerd zonder netwerkdata te verbruiken.",
|
|
33
|
+
},
|
|
34
|
+
];
|
|
35
|
+
|
|
36
|
+
const howTo: ChromaticLensLocaleContent['howTo'] = [
|
|
37
|
+
{
|
|
38
|
+
name: "Upload de afbeelding",
|
|
39
|
+
text: "Upload de foto waaruit u chromatische inspiratie wilt extraheren.",
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
name: "Pas precisie aan",
|
|
43
|
+
text: "Selecteer hoeveel dominante kleuren u wilt dat de tool identificeert (van 3 tot 12).",
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
name: "Analyseer het resultaat",
|
|
47
|
+
text: "Het palet verschijnt onmiddellijk met de bijbehorende hexadecimale codes.",
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
name: "Kopieer en gebruik",
|
|
51
|
+
text: "Klik op de tonen om ze op te slaan en toe te passen in uw ontwerpproject.",
|
|
52
|
+
},
|
|
53
|
+
];
|
|
54
|
+
|
|
55
|
+
const bibliography: ChromaticLensLocaleContent['bibliography'] = [
|
|
56
|
+
{
|
|
57
|
+
name: "Median Cut Algorithm - Wikipedia",
|
|
58
|
+
url: "https://en.wikipedia.org/wiki/Median_cut",
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
name: "Kleurentheorie voor Ontwerpers",
|
|
62
|
+
url: "https://www.smashingmagazine.com/2010/01/color-theory-for-designers-part-1-the-meaning-of-color/",
|
|
63
|
+
},
|
|
64
|
+
];
|
|
65
|
+
|
|
66
|
+
const seo: ChromaticLensLocaleContent['seo'] = [
|
|
67
|
+
{
|
|
68
|
+
type: 'summary',
|
|
69
|
+
title: 'Intelligente Kleurenpalet Extractie',
|
|
70
|
+
items: [
|
|
71
|
+
'Professioneel Median Cut algoritme voor kleuranalyse',
|
|
72
|
+
'Extraheer 3-12 dominante kleuren uit elke afbeelding',
|
|
73
|
+
'HEX-codes direct kopieerbaar naar het klembord',
|
|
74
|
+
'100% lokale verwerking - ideaal voor creatievelingen'
|
|
75
|
+
]
|
|
76
|
+
},
|
|
77
|
+
{ type: 'title', text: 'Kleurenpalet Extractie: Wetenschap en Ontwerp', level: 2 },
|
|
78
|
+
{ type: 'paragraph', html: 'Heeft u zich ooit afgevraagd waarom een filmfoto zo harmonieus aanvoelt? Dat is geen toeval; het is kleurentheorie in actie. Chromatic Lens stelt u in staat om die harmonie direct uit de pixel te extraheren en te transformeren naar HEX-codes die bruikbaar zijn in uw ontwerpprojecten.' },
|
|
79
|
+
|
|
80
|
+
{ type: 'stats', items: [
|
|
81
|
+
{ value: 'Instant', label: 'Kleuranalyse', icon: 'mdi:lightning-bolt' },
|
|
82
|
+
{ value: '100%', label: 'Lokale Privacy', icon: 'mdi:lock' },
|
|
83
|
+
{ value: 'RGB', label: 'Precieze Kleurruimte', icon: 'mdi:palette' }
|
|
84
|
+
], columns: 3 },
|
|
85
|
+
|
|
86
|
+
{ type: 'title', text: 'Het Median Cut Algoritme Uitgelegd', level: 3 },
|
|
87
|
+
{ type: 'paragraph', html: 'Intelligente paletextractie is niet een eenvoudige willekeurige steekproef van pixels. Het maakt gebruik van het Median Cut algoritme, een recursieve partitioneringstechniek die een getrouwe weergave garandeert:' },
|
|
88
|
+
{ type: 'list', items: [
|
|
89
|
+
'<strong>Recursieve Verdeling:</strong> De RGB \"kleurenkubus\" van de afbeelding wordt recursief verdeeld in kleinere boxen.',
|
|
90
|
+
'<strong>Volume Balans:</strong> Elke partitie probeert pixels uit dezelfde kleurruimte met vergelijkbare volumes te groeperen.',
|
|
91
|
+
'<strong>Gewogen Gemiddelde:</strong> de resulterende kleur van elke box is het gemiddelde van alle pixels die deze bevat.',
|
|
92
|
+
'<strong>Getrouwe Weergave:</strong> De dominante kleuren weerspiegelen de echte visuele sfeer van de afbeelding, niet slechts een simpele steekproef.'
|
|
93
|
+
], icon: 'mdi:check' },
|
|
94
|
+
|
|
95
|
+
{ type: 'card', title: 'Creatieve Workflow', html: 'Ideaal voor webontwikkelaars, UX/UI-ontwerpers, digitale kunstenaars en creatievelingen die onmiddellijk de visuele essentie van een foto, film of visuele referentie willen vastleggen om toe te passen in hun interfaces, illustraties of merkpaletten.' },
|
|
96
|
+
|
|
97
|
+
{ type: 'title', text: 'Use Cases in Digitaal Ontwerp', level: 3 },
|
|
98
|
+
{ type: 'comparative', items: [
|
|
99
|
+
{
|
|
100
|
+
title: 'UX/UI Ontwerpers',
|
|
101
|
+
description: 'Extraheer paletten uit hero images om samenhangende interfaces te creëren',
|
|
102
|
+
icon: 'mdi:palette',
|
|
103
|
+
points: [
|
|
104
|
+
'Harmonieuze achtergrondkleuren',
|
|
105
|
+
'Knoppen en secundaire elementen',
|
|
106
|
+
'Automatisch berekend contrast'
|
|
107
|
+
]
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
title: 'Webontwikkelaars',
|
|
111
|
+
description: 'Maak CSS-stylesheets direct van visuele referenties',
|
|
112
|
+
icon: 'mdi:code-braces',
|
|
113
|
+
points: [
|
|
114
|
+
'Kopieer HEX direct naar CSS',
|
|
115
|
+
'Kleurvariabelen in SCSS/CSS',
|
|
116
|
+
'Samenhangende thema\'s zonder voorafgaand ontwerp'
|
|
117
|
+
],
|
|
118
|
+
highlight: true
|
|
119
|
+
},
|
|
120
|
+
{
|
|
121
|
+
title: 'Digitale Kunstenaars en Illustratoren',
|
|
122
|
+
description: 'Leg chromatische referenties vast van films, natuur of kunst',
|
|
123
|
+
icon: 'mdi:brush',
|
|
124
|
+
points: [
|
|
125
|
+
'Referentiepaletten van meesterwerken',
|
|
126
|
+
'Cinematografische kleurstudies',
|
|
127
|
+
'Onmiddellijke visuele inspiratie'
|
|
128
|
+
]
|
|
129
|
+
},
|
|
130
|
+
{
|
|
131
|
+
title: 'Branding Specialisten',
|
|
132
|
+
description: 'Ontwikkel visuele identiteiten op basis van gidsfoto\'s',
|
|
133
|
+
icon: 'mdi:tag-multiple',
|
|
134
|
+
points: [
|
|
135
|
+
'Extraheer merkkleuren uit afbeeldingen',
|
|
136
|
+
'Maak professionele chromatische gidsen',
|
|
137
|
+
'Zorg voor visuele consistentie'
|
|
138
|
+
]
|
|
139
|
+
}
|
|
140
|
+
], columns: 2 },
|
|
141
|
+
|
|
142
|
+
{ type: 'title', text: 'Toegepaste Kleurentheorie', level: 3 },
|
|
143
|
+
{ type: 'table', headers: ['Kleurconcept', 'Definitie', 'Praktische Toepassing'], rows: [
|
|
144
|
+
['Chromatische Harmonie', 'Kleurcombinatie die visueel in balans is', 'Samenhangende visuele identiteit in UI'],
|
|
145
|
+
['Contrast', 'Verschil in helderheid tussen kleuren', 'Leesbaarheid en visuele hiërarchie'],
|
|
146
|
+
['Verzadiging', 'Kleurintensiteit van een toon', 'Professionalisme (laag) vs Energie (hoog)'],
|
|
147
|
+
['Kleurtemperatuur', 'Warme kleuren (rood) vs koele kleuren (blauw)', 'Emotionele psychologie van ontwerp'],
|
|
148
|
+
['Monochromatisch Palet', 'Variaties van een enkele toon', 'Elegantie en minimalisme']
|
|
149
|
+
] },
|
|
150
|
+
|
|
151
|
+
{ type: 'proscons', items: [
|
|
152
|
+
{
|
|
153
|
+
pro: 'Mathematische precisie bij extractie - geen geschatte visuele selectie',
|
|
154
|
+
con: 'Nauwelijks zichtbare kleuren kunnen worden opgenomen als ze veel pixels hebben'
|
|
155
|
+
},
|
|
156
|
+
{
|
|
157
|
+
pro: 'Direct kopiëren naar klembord - perfecte integratie met workflow',
|
|
158
|
+
con: 'Heeft een moderne browser nodig die compatibel is met Canvas API'
|
|
159
|
+
},
|
|
160
|
+
{
|
|
161
|
+
pro: 'Totale privacy - 100% lokale analyse zonder gegevensverzending',
|
|
162
|
+
con: 'Geen geschiedenis van eerdere analyses opgeslagen'
|
|
163
|
+
},
|
|
164
|
+
{
|
|
165
|
+
pro: 'Compatibel met elk digitaal afbeeldingsformaat',
|
|
166
|
+
con: 'Uiteindelijke kleuren zijn afhankelijk van compressie en kwaliteit van de afbeelding'
|
|
167
|
+
}
|
|
168
|
+
], proTitle: 'Voordelen', conTitle: 'Beperkingen' },
|
|
169
|
+
|
|
170
|
+
{ type: 'diagnostic', variant: 'success', title: 'Realistische Kleurweergave', icon: 'mdi:check-circle-outline', badge: 'Geavanceerd Algoritme', html: 'In tegenstelling tot tools die simpelweg willekeurige pixels samplen, maakt ons systeem gebruik van het Median Cut algoritme dat de volledige pixelaantal van elke toon weegt, waardoor het resulterende palet getrouw de visuele sfeer en kleurpsychologie van de originele afbeelding weerspiegelt.' },
|
|
171
|
+
|
|
172
|
+
{ type: 'glossary', items: [
|
|
173
|
+
{
|
|
174
|
+
term: 'Median Cut',
|
|
175
|
+
definition: 'Kleurkwantiseringsalgoritme dat de RGB-ruimte recursief verdeelt in boxen, wat zorgt voor een uniforme distributie. Historisch gebruikt in GIF en geïndexeerde kleurtechnologie.'
|
|
176
|
+
},
|
|
177
|
+
{
|
|
178
|
+
term: 'RGB Kleurruimte',
|
|
179
|
+
definition: 'Kleurenmodel gebaseerd op rood, groen en blauw. Elke kleur wordt weergegeven als een combinatie van deze drie waarden (0-255). Standaard op digitale schermen en web.'
|
|
180
|
+
},
|
|
181
|
+
{
|
|
182
|
+
term: 'HEX-code',
|
|
183
|
+
definition: '6-cijferige hexadecimale notatie (#RRGGBB) die kleur op het web vertegenwoordigt: #FF0000 (rood), #00FF00 (groen), #0000FF (blauw). Universeel in CSS, Figma en Adobe.'
|
|
184
|
+
},
|
|
185
|
+
{
|
|
186
|
+
term: 'Kleurverzadiging',
|
|
187
|
+
definition: 'Intensiteit of zuiverheid van kleur. Hoge verzadiging = levendige kleur; lage verzadiging = grijsachtige kleur. Beïnvloedt de emotionele perceptie van het ontwerp.'
|
|
188
|
+
},
|
|
189
|
+
{
|
|
190
|
+
term: 'Chromatische Harmonie',
|
|
191
|
+
definition: 'Selectie en combinatie van kleuren die resulteert in een visueel aantrekkelijk resultaat. Het kan monochromatisch, complementair, analoog of triadisch zijn.'
|
|
192
|
+
}
|
|
193
|
+
] },
|
|
194
|
+
|
|
195
|
+
{ type: 'message', title: 'Professionele Chromatische Analyse', ariaLabel: 'Technische informatie over kleuranalyse', html: 'Chromatic Lens transformeert handmatige visuele analyse in algoritmische precisie. Het extraheert niet alleen kleuren: het legt de emotionele en visuele essentie van elke afbeelding vast en plaatst deze direct op uw klembord als kant-en-klare HEX-codes. Totale privacy, geen limieten op analysevolume.' },
|
|
196
|
+
|
|
197
|
+
{ type: 'title', text: 'Ontwerp vanuit Visuele Inspiratie', level: 3 },
|
|
198
|
+
{ type: 'paragraph', html: 'Het beste kleurenpalet is degene die de visuele intentie van uw referentie vastlegt. Chromatic Lens automatiseert wat voorheen een handmatig proces was: observeren, analyseren, noteren. Sleep nu gewoon een afbeelding en krijg binnen enkele seconden professionele HEX-codes.' }
|
|
199
|
+
];
|
|
200
|
+
|
|
201
|
+
const faqSchema: WithContext<FAQPage> = {
|
|
202
|
+
'@context': 'https://schema.org',
|
|
203
|
+
'@type': 'FAQPage',
|
|
204
|
+
mainEntity: faq.map((item) => ({
|
|
205
|
+
'@type': 'Question',
|
|
206
|
+
name: item.question,
|
|
207
|
+
acceptedAnswer: { '@type': 'Answer', text: item.answer },
|
|
208
|
+
})),
|
|
209
|
+
};
|
|
210
|
+
|
|
211
|
+
const howToSchema: WithContext<HowTo> = {
|
|
212
|
+
'@context': 'https://schema.org',
|
|
213
|
+
'@type': 'HowTo',
|
|
214
|
+
name: title,
|
|
215
|
+
description,
|
|
216
|
+
step: howTo.map((step) => ({
|
|
217
|
+
'@type': 'HowToStep',
|
|
218
|
+
name: step.name,
|
|
219
|
+
text: step.text,
|
|
220
|
+
})),
|
|
221
|
+
};
|
|
222
|
+
|
|
223
|
+
const appSchema: WithContext<SoftwareApplication> = {
|
|
224
|
+
'@context': 'https://schema.org',
|
|
225
|
+
'@type': 'SoftwareApplication',
|
|
226
|
+
name: title,
|
|
227
|
+
description,
|
|
228
|
+
applicationCategory: 'UtilitiesApplication',
|
|
229
|
+
operatingSystem: 'Web',
|
|
230
|
+
offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
|
|
231
|
+
inLanguage: 'nl',
|
|
232
|
+
};
|
|
233
|
+
|
|
234
|
+
export const content: ChromaticLensLocaleContent = {
|
|
235
|
+
slug,
|
|
236
|
+
title,
|
|
237
|
+
description,
|
|
238
|
+
ui,
|
|
239
|
+
seo,
|
|
240
|
+
faqTitle: "Veelgestelde Vragen",
|
|
241
|
+
faq,
|
|
242
|
+
bibliographyTitle: "Referenties",
|
|
243
|
+
bibliography,
|
|
244
|
+
howTo,
|
|
245
|
+
schemas: [faqSchema as any, howToSchema as any, appSchema],
|
|
246
|
+
};
|