📚 5. 링크맥스 전 프로젝트(134개·25,250건 결함) 디자인·UI/UX 6대 연대기 학습 원장 (ERA-01 .. ERA-06)
134개 프로젝트 · 25,250건 실측 학습 완료
🚨 6. 역대 프로젝트 10대 디자인·UI/UX 핵심 실패 패턴 & 디자인빌더 원천 차단 규약 (HIST-FAIL-01 .. 10)
PRISM-30 & Rule 10 연동
🛠️ 7. 도메인군별 필수 고유 시각 장치 계약 (8대 도메인 아키타입 · 3칸 계산기 복제 영구 추방)
APPARATUS-01 .. 08
🔬 8. 역대 실패 안티패턴(3칸 계산기 복제·oklch 파괴·인라인 스타일·개발자 외계어) 실시간 진단기
CLEAN_BESPOKE (100점)
💎 9. 무료(0원·CC0·MIT·무인증API) 디자인 스톡 극대화 5대 전략 & 40대 글로벌 소스 탐색기
40대 정본 소스 · 상업용 무료 100%
⚡ 10. 자체 저작권 100% (0원·외부 의존성 0건) 실시간 프로시저럴 SVG 디자인 스톡 합성기
📺 11. 글로벌 실존 유튜브 동영상 3,000편(2,155개 채널 · 15대 도메인) 학습 & 60대 정량 법칙 인스펙터
실존 영상 3,000편 · 고유 ID 100%
📦 12. 12대 산업 아키타입 × 2종 = 24종 실물 마스터 클린룸 스톡 패키지(SVG 24종 + PNG 24종) & 6-Gate 저작권·XSS 안전 감사기
24종 실물 에셋 · CC0-1.0 100%
🛡️ 실시간 6-Gate 스톡 저작권·라이선스·SVG XSS 안전 감사기 (`auditStockBundleSafety`)
STOCK_SAFE_VERIFIED (100점)
🚀 13. 링크맥스 12대 산업군 플래그십(56개 포트폴리오 연결) 크로스 스톡·토큰 보급 스튜디오
12대 플래그십 키트 · 100/100 검증
🧩 14. 유료 스톡 격차 해소 — 6대 실전 UI 상태 클린룸 스톡 36종(`DB-STATE-01..36`) & 120종 로컬 아이콘 벡터 볼트(`DB-ICON-001..120`)
UI 상태 36종 + 아이콘 120종 · 총 180종 고유 벡터
🔍 로컬 내장 120종 MIT/ISC 벡터 아이콘 볼트 (`DB-ICON-001 ~ 120` · 12대 도메인 · 실시간 선 굵기 조절)
'
].join('\n');
runStockSafetyDiagnostic(badSample, 'CC-BY-NC-4.0 NonCommercial');
});
document.getElementById('btnResetCleanStockSample')?.addEventListener('click', () => {
runStockSafetyDiagnostic(renderMasterStockSvg('DB-STOCK-01'), 'CC0-1.0 Clean-Room');
});
function renderFlagshipSyncStudio() {
const selectedKitId = document.getElementById('selectFlagshipKit')?.value || 'KIT-FLAGSHIP-01';
const kit = compileFlagshipIntegrationKit(selectedKitId, { themeMode: state.themeMode });
const badge = document.getElementById('badgeFlagshipSyncSummary');
if (badge) {
badge.textContent = `${kit.flagshipId} · Lint ${kit.htmlLintScore}점 · Safety ${kit.stockSafetyScore}점`;
}
const codeArea = document.getElementById('textareaFlagshipKitCode');
if (codeArea) {
codeArea.value = kit.componentSnippetHtml;
}
const grid = document.getElementById('flagshipKitsGrid');
if (grid) {
grid.innerHTML = FLAGSHIP_12_ARCHETYPE_BINDINGS.map(
(b) => `
${b.kitId} · ${b.archetypeId}
${b.heroStockId} / ${b.patternStockId}
고유 시각 장치: ${b.signatureApparatusKo}
연결 서비스(${b.connectedProjects.length}개): ${b.connectedProjects.join(', ')}
`
).join('');
}
}
document.getElementById('selectFlagshipKit')?.addEventListener('change', renderFlagshipSyncStudio);
document.getElementById('btnDownloadFlagshipKitHtml')?.addEventListener('click', () => {
const selectedKitId = document.getElementById('selectFlagshipKit')?.value || 'KIT-FLAGSHIP-01';
const kit = compileFlagshipIntegrationKit(selectedKitId, { themeMode: state.themeMode });
const blob = new Blob([kit.componentSnippetHtml], { type: 'text/html;charset=utf-8' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `${kit.flagshipId}-dropin-clean-kit.html`;
a.click();
URL.revokeObjectURL(url);
});
let activeIconId = 'DB-ICON-001';
function renderUiStateAndIconVaultStudio() {
const catFilter = document.getElementById('selectUiStateCategory')?.value || 'ALL';
const selectedStateId = document.getElementById('selectUiStateItem')?.value || 'DB-STATE-01';
const filteredStates =
catFilter === 'ALL'
? UI_STATE_STOCK_36
: UI_STATE_STOCK_36.filter((s) => s.categoryId === catFilter);
const dropIn = compileUiStateDropInHtml(selectedStateId);
const stateCodeArea = document.getElementById('textareaUiStateDropInCode');
if (stateCodeArea) {
stateCodeArea.value = dropIn.html;
}
const stateGrid = document.getElementById('uiStateCardsGrid');
if (stateGrid) {
stateGrid.innerHTML = filteredStates
.slice(0, 9)
.map((st) => {
const svgMarkup = compileUiStateSvg(st.id);
return `
${st.id} · ${st.categoryId}
${st.archetypeId}
${st.titleKo}
${svgMarkup}
카피: ${st.headlineKo}
경로: ${st.svgPath} | ${st.pngPath}
`;
})
.join('');
}
const iconDomain = document.getElementById('selectIconVaultDomain')?.value || 'ALL';
const iconQuery = document.getElementById('inputIconVaultSearch')?.value || '';
const strokeW = Number(document.getElementById('selectIconStrokeWidth')?.value || 1.75);
const matchedIcons = searchIconVault(iconQuery, iconDomain);
const badgeSum = document.getElementById('badgeUiStateVaultSummary');
if (badgeSum) {
badgeSum.textContent = `UI 상태 ${filteredStates.length}종 · 아이콘 ${matchedIcons.length}종 매칭 (총 180종 고유 벡터)`;
}
const iconGrid = document.getElementById('iconVaultGrid');
if (iconGrid) {
iconGrid.innerHTML = matchedIcons
.slice(0, 12)
.map((ic) => {
const svgCode = compileIconSvg(ic.iconId, { size: 32, strokeWidth: strokeW });
return `
${ic.iconId}
${ic.domainSlug}
${svgCode}
${ic.titleKo}
${ic.svgPath}
`;
})
.join('');
}
if (matchedIcons.length > 0 && !matchedIcons.some((m) => m.iconId === activeIconId)) {
activeIconId = matchedIcons[0].iconId;
}
const iconSvgArea = document.getElementById('textareaSelectedIconSvg');
if (iconSvgArea) {
iconSvgArea.value = compileIconSvg(activeIconId, { size: 24, strokeWidth: strokeW });
}
}
document.getElementById('selectUiStateCategory')?.addEventListener('change', renderUiStateAndIconVaultStudio);
document.getElementById('selectUiStateItem')?.addEventListener('change', renderUiStateAndIconVaultStudio);
document.getElementById('selectIconVaultDomain')?.addEventListener('change', renderUiStateAndIconVaultStudio);
document.getElementById('inputIconVaultSearch')?.addEventListener('input', renderUiStateAndIconVaultStudio);
document.getElementById('selectIconStrokeWidth')?.addEventListener('change', renderUiStateAndIconVaultStudio);
document.getElementById('btnDownloadUiStateHtml')?.addEventListener('click', () => {
const selectedStateId = document.getElementById('selectUiStateItem')?.value || 'DB-STATE-01';
const dropIn = compileUiStateDropInHtml(selectedStateId);
const blob = new Blob([dropIn.html], { type: 'text/html;charset=utf-8' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `${selectedStateId.toLowerCase()}-ui-state-component.html`;
a.click();
URL.revokeObjectURL(url);
});
document.getElementById('btnCopySelectedIconSvg')?.addEventListener('click', async () => {
const code = document.getElementById('textareaSelectedIconSvg')?.value || '';
try {
await navigator.clipboard.writeText(code);
document.getElementById('btnCopySelectedIconSvg').textContent = '✅ 아이콘 SVG 복사됨';
} catch (e) {}
});
// Initial Boot
renderStudio();
renderUiuxHistoryDashboard();
renderFreeDesignStockExplorer();
renderProceduralSvgPreview();
renderYt3000LearningInspector();
renderMasterStockPackGallery();
renderFlagshipSyncStudio();
renderUiStateAndIconVaultStudio();
runStockSafetyDiagnostic(renderMasterStockSvg('DB-STOCK-01'), 'CC0-1.0 Clean-Room');
if (state.compiled) {
runAntiPatternDiagnostic(exportDesignTokens(state.compiled, 'html'));
}
