Initial commit: D.intelligence design system files
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
.DS_Store
|
||||||
|
.claude/settings.local.json
|
||||||
BIN
.thumbnail
Normal file
BIN
.thumbnail
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
1821
D.intelligence Design System 2026.html
Normal file
1821
D.intelligence Design System 2026.html
Normal file
File diff suppressed because it is too large
Load Diff
BIN
D.intelligence Design System.zip
Normal file
BIN
D.intelligence Design System.zip
Normal file
Binary file not shown.
BIN
assets/fonts/AppleSDGothicNeoB.ttf
Normal file
BIN
assets/fonts/AppleSDGothicNeoB.ttf
Normal file
Binary file not shown.
BIN
assets/fonts/AppleSDGothicNeoEB.ttf
Normal file
BIN
assets/fonts/AppleSDGothicNeoEB.ttf
Normal file
Binary file not shown.
BIN
assets/fonts/AppleSDGothicNeoH.ttf
Normal file
BIN
assets/fonts/AppleSDGothicNeoH.ttf
Normal file
Binary file not shown.
BIN
assets/fonts/AppleSDGothicNeoL.ttf
Normal file
BIN
assets/fonts/AppleSDGothicNeoL.ttf
Normal file
Binary file not shown.
BIN
assets/fonts/AppleSDGothicNeoM.ttf
Normal file
BIN
assets/fonts/AppleSDGothicNeoM.ttf
Normal file
Binary file not shown.
BIN
assets/fonts/DMSans-Bold.ttf
Normal file
BIN
assets/fonts/DMSans-Bold.ttf
Normal file
Binary file not shown.
BIN
assets/fonts/DMSans-Italic.ttf
Normal file
BIN
assets/fonts/DMSans-Italic.ttf
Normal file
Binary file not shown.
BIN
assets/fonts/DMSans-Medium.ttf
Normal file
BIN
assets/fonts/DMSans-Medium.ttf
Normal file
Binary file not shown.
BIN
assets/fonts/DMSans-Regular.ttf
Normal file
BIN
assets/fonts/DMSans-Regular.ttf
Normal file
Binary file not shown.
BIN
assets/logos/horizontal.png
Normal file
BIN
assets/logos/horizontal.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
BIN
assets/logos/horizontal_white.png
Normal file
BIN
assets/logos/horizontal_white.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
BIN
assets/logos/motto.png
Normal file
BIN
assets/logos/motto.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
BIN
assets/logos/motto_white.png
Normal file
BIN
assets/logos/motto_white.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 96 KiB |
BIN
assets/logos/square.png
Normal file
BIN
assets/logos/square.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
BIN
assets/logos/vertical_white.png
Normal file
BIN
assets/logos/vertical_white.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 134 KiB |
1748
deck-stage.js
Normal file
1748
deck-stage.js
Normal file
File diff suppressed because it is too large
Load Diff
348
styles.css
Normal file
348
styles.css
Normal file
@@ -0,0 +1,348 @@
|
|||||||
|
/* ============================================================
|
||||||
|
D.intelligence Design System v2026 — Stylesheet
|
||||||
|
Evolution of 2025 Edition + Brand Guide v1.2
|
||||||
|
============================================================ */
|
||||||
|
|
||||||
|
/* -------- Fonts -------- */
|
||||||
|
@font-face {
|
||||||
|
font-family: 'DM Sans';
|
||||||
|
src: url('assets/fonts/DMSans-Regular.ttf') format('truetype');
|
||||||
|
font-weight: 400; font-style: normal; font-display: swap;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: 'DM Sans';
|
||||||
|
src: url('assets/fonts/DMSans-Italic.ttf') format('truetype');
|
||||||
|
font-weight: 400; font-style: italic; font-display: swap;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: 'DM Sans';
|
||||||
|
src: url('assets/fonts/DMSans-Medium.ttf') format('truetype');
|
||||||
|
font-weight: 500; font-style: normal; font-display: swap;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: 'DM Sans';
|
||||||
|
src: url('assets/fonts/DMSans-Bold.ttf') format('truetype');
|
||||||
|
font-weight: 700; font-style: normal; font-display: swap;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Apple SD Gothic Neo';
|
||||||
|
src: url('assets/fonts/AppleSDGothicNeoL.ttf') format('truetype');
|
||||||
|
font-weight: 300; font-display: swap;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Apple SD Gothic Neo';
|
||||||
|
src: url('assets/fonts/AppleSDGothicNeoM.ttf') format('truetype');
|
||||||
|
font-weight: 500; font-display: swap;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Apple SD Gothic Neo';
|
||||||
|
src: url('assets/fonts/AppleSDGothicNeoB.ttf') format('truetype');
|
||||||
|
font-weight: 700; font-display: swap;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Apple SD Gothic Neo';
|
||||||
|
src: url('assets/fonts/AppleSDGothicNeoEB.ttf') format('truetype');
|
||||||
|
font-weight: 800; font-display: swap;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Apple SD Gothic Neo';
|
||||||
|
src: url('assets/fonts/AppleSDGothicNeoH.ttf') format('truetype');
|
||||||
|
font-weight: 900; font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -------- Tokens -------- */
|
||||||
|
:root {
|
||||||
|
--beige: #E5E1D2;
|
||||||
|
--beige-soft: #EFEBDE;
|
||||||
|
--brown: #231815;
|
||||||
|
--brown-soft: #2E2420;
|
||||||
|
--olive: #CEDC00;
|
||||||
|
--olive-soft: #E5EE7A;
|
||||||
|
--blue: #0075C0;
|
||||||
|
--blue-soft: #4DA3D6;
|
||||||
|
--black: #000000;
|
||||||
|
--gray: #727171;
|
||||||
|
--gray-light: #BFBFBF;
|
||||||
|
--gray-bg: #F2F2F2;
|
||||||
|
--warm-gray: #C8C4B8;
|
||||||
|
--warm-gray-soft: #DAD6CB;
|
||||||
|
--white: #FFFFFF;
|
||||||
|
|
||||||
|
--font-en: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
|
||||||
|
--font-kr: 'Apple SD Gothic Neo', 'DM Sans', sans-serif;
|
||||||
|
--font-mono: 'JetBrains Mono', 'Menlo', monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -------- Stage base -------- */
|
||||||
|
deck-stage {
|
||||||
|
--bg: var(--white);
|
||||||
|
--stage-bg: #0a0a0a;
|
||||||
|
}
|
||||||
|
|
||||||
|
section[data-screen-label] {
|
||||||
|
background: var(--white);
|
||||||
|
color: var(--brown);
|
||||||
|
font-family: var(--font-en);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
width: 1920px;
|
||||||
|
height: 1080px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -------- Slide chrome: header bar + footer -------- */
|
||||||
|
.s-header {
|
||||||
|
position: absolute;
|
||||||
|
top: 56px;
|
||||||
|
left: 96px;
|
||||||
|
right: 96px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: baseline;
|
||||||
|
font-family: var(--font-en);
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
color: var(--warm-gray);
|
||||||
|
text-transform: uppercase;
|
||||||
|
z-index: 5;
|
||||||
|
}
|
||||||
|
.s-header .s-sys {
|
||||||
|
color: var(--warm-gray);
|
||||||
|
}
|
||||||
|
.s-header .s-section-id {
|
||||||
|
color: var(--gray);
|
||||||
|
font-weight: 500;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.s-footer {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 56px;
|
||||||
|
left: 96px;
|
||||||
|
right: 96px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: baseline;
|
||||||
|
font-family: var(--font-en);
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
color: var(--gray);
|
||||||
|
z-index: 5;
|
||||||
|
}
|
||||||
|
.s-footer .s-tag { font-style: italic; letter-spacing: 0.02em; color: var(--brown); opacity: 0.55; }
|
||||||
|
.s-footer .s-page { font-weight: 500; letter-spacing: 0.08em; }
|
||||||
|
|
||||||
|
.s-three-dots {
|
||||||
|
position: absolute;
|
||||||
|
top: 56px;
|
||||||
|
right: 96px;
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
z-index: 6;
|
||||||
|
}
|
||||||
|
.s-three-dots i {
|
||||||
|
width: 8px; height: 8px; border-radius: 50%;
|
||||||
|
background: var(--brown);
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.s-three-dots.olive i { background: var(--olive); }
|
||||||
|
.s-three-dots.beige i { background: var(--warm-gray); }
|
||||||
|
.s-three-dots.white i { background: var(--white); }
|
||||||
|
|
||||||
|
/* -------- Cover / Section dividers --------
|
||||||
|
These selectors share specificity with the base section[data-screen-label]
|
||||||
|
rule above (0,1,1). The base rule sets background:white; these must be
|
||||||
|
equally-or-more specific to win. Use section.s-cover etc.
|
||||||
|
---------------------------------------------------------------- */
|
||||||
|
section.s-cover {
|
||||||
|
background: var(--beige);
|
||||||
|
}
|
||||||
|
section.s-section {
|
||||||
|
background: var(--beige);
|
||||||
|
}
|
||||||
|
section.s-dark {
|
||||||
|
background: var(--brown);
|
||||||
|
color: var(--beige);
|
||||||
|
}
|
||||||
|
section.s-dark .s-header,
|
||||||
|
section.s-dark .s-footer { color: var(--warm-gray); }
|
||||||
|
section.s-dark .s-footer .s-tag { color: var(--beige); opacity: 0.6; }
|
||||||
|
|
||||||
|
/* -------- Section title with vertical-line accent -------- */
|
||||||
|
.section-title-block {
|
||||||
|
position: absolute;
|
||||||
|
left: 96px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
display: flex;
|
||||||
|
gap: 36px;
|
||||||
|
}
|
||||||
|
.v-line {
|
||||||
|
width: 1px;
|
||||||
|
background: var(--gray);
|
||||||
|
align-self: stretch;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.s-section .v-line { background: var(--warm-gray); }
|
||||||
|
.s-dark .v-line { background: var(--warm-gray); opacity: 0.5; }
|
||||||
|
|
||||||
|
.section-title-block .eyebrow {
|
||||||
|
font-family: var(--font-en);
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
letter-spacing: 0.32em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--gray);
|
||||||
|
margin-bottom: 28px;
|
||||||
|
}
|
||||||
|
.s-dark .section-title-block .eyebrow { color: var(--warm-gray); }
|
||||||
|
|
||||||
|
.section-title-block .num {
|
||||||
|
font-family: var(--font-en);
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
letter-spacing: 0.2em;
|
||||||
|
color: var(--olive);
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
.section-title-block h1 {
|
||||||
|
font-family: var(--font-en);
|
||||||
|
font-size: 112px;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
color: var(--brown);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.s-dark .section-title-block h1 { color: var(--beige); }
|
||||||
|
|
||||||
|
.section-title-block .kr {
|
||||||
|
font-family: var(--font-kr);
|
||||||
|
font-size: 32px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--brown);
|
||||||
|
margin-top: 28px;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
}
|
||||||
|
.s-dark .section-title-block .kr { color: var(--warm-gray); }
|
||||||
|
|
||||||
|
.section-title-block .desc {
|
||||||
|
font-family: var(--font-en);
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 1.55;
|
||||||
|
color: var(--gray);
|
||||||
|
max-width: 520px;
|
||||||
|
margin-top: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -------- Content slides -------- */
|
||||||
|
.content-title {
|
||||||
|
font-family: var(--font-en);
|
||||||
|
font-size: 44px;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: -0.015em;
|
||||||
|
color: var(--brown);
|
||||||
|
line-height: 1.05;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.content-title .module-code {
|
||||||
|
display: inline-block;
|
||||||
|
font-family: var(--font-en);
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 500;
|
||||||
|
letter-spacing: 0.18em;
|
||||||
|
color: var(--olive);
|
||||||
|
vertical-align: top;
|
||||||
|
margin-right: 18px;
|
||||||
|
padding-top: 12px;
|
||||||
|
}
|
||||||
|
.content-subtitle {
|
||||||
|
font-family: var(--font-en);
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 1.5;
|
||||||
|
color: var(--gray);
|
||||||
|
margin: 16px 0 0;
|
||||||
|
max-width: 1000px;
|
||||||
|
}
|
||||||
|
.content-kr {
|
||||||
|
font-family: var(--font-kr);
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--brown);
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-body {
|
||||||
|
position: absolute;
|
||||||
|
top: 220px;
|
||||||
|
left: 96px;
|
||||||
|
right: 96px;
|
||||||
|
bottom: 140px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -------- Utilities -------- */
|
||||||
|
.mono { font-family: var(--font-mono); }
|
||||||
|
.hairline { border-top: 1px solid var(--gray-light); }
|
||||||
|
.divider { height: 1px; background: var(--gray-light); }
|
||||||
|
.uppercase-label {
|
||||||
|
font-family: var(--font-en);
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 500;
|
||||||
|
letter-spacing: 0.18em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--gray);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* swatch helpers */
|
||||||
|
.swatch {
|
||||||
|
border: 1px solid var(--gray-light);
|
||||||
|
border-radius: 0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Card */
|
||||||
|
.card {
|
||||||
|
background: var(--white);
|
||||||
|
border: 1px solid var(--gray-light);
|
||||||
|
padding: 28px;
|
||||||
|
}
|
||||||
|
.card.flat { background: var(--gray-bg); border: none; }
|
||||||
|
|
||||||
|
/* Tag pill */
|
||||||
|
.tag {
|
||||||
|
display: inline-block;
|
||||||
|
font-family: var(--font-en);
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 500;
|
||||||
|
letter-spacing: 0.16em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
padding: 4px 10px;
|
||||||
|
border: 1px solid var(--brown);
|
||||||
|
color: var(--brown);
|
||||||
|
}
|
||||||
|
.tag.di { border-color: var(--blue); color: var(--blue); }
|
||||||
|
.tag.md { border-color: var(--brown); color: var(--brown); }
|
||||||
|
.tag.mpo { border-color: var(--olive); color: #8a9400; background: rgba(206,220,0,0.12); }
|
||||||
|
.tag.bvt { border-color: var(--brown); color: var(--white); background: var(--brown); }
|
||||||
|
|
||||||
|
/* phase badge */
|
||||||
|
.phase-badge {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
font-family: var(--font-en);
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 500;
|
||||||
|
letter-spacing: 0.22em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
.phase-badge .num {
|
||||||
|
font-size: 12px;
|
||||||
|
background: var(--brown);
|
||||||
|
color: var(--beige);
|
||||||
|
padding: 3px 8px;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tweaks panel slot */
|
||||||
|
#tweaks-root { z-index: 9999; }
|
||||||
170
tweaks-app.jsx
Normal file
170
tweaks-app.jsx
Normal file
@@ -0,0 +1,170 @@
|
|||||||
|
// D.intelligence Design System — Tweaks app
|
||||||
|
// Lets viewers explore alternative visual treatments for the brand system.
|
||||||
|
|
||||||
|
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
|
||||||
|
"coverBg": "beige",
|
||||||
|
"accent": "olive",
|
||||||
|
"density": "regular",
|
||||||
|
"motif": "all",
|
||||||
|
"showGrid": false,
|
||||||
|
"monoTone": false
|
||||||
|
}/*EDITMODE-END*/;
|
||||||
|
|
||||||
|
function applyTweaks(t) {
|
||||||
|
const root = document.documentElement.style;
|
||||||
|
|
||||||
|
// Cover background tone
|
||||||
|
const coverBgMap = {
|
||||||
|
beige: { bg: '#E5E1D2', text: '#231815' },
|
||||||
|
brown: { bg: '#231815', text: '#E5E1D2' },
|
||||||
|
white: { bg: '#FFFFFF', text: '#231815' },
|
||||||
|
olive: { bg: '#CEDC00', text: '#231815' },
|
||||||
|
};
|
||||||
|
const cov = coverBgMap[t.coverBg] || coverBgMap.beige;
|
||||||
|
document.querySelectorAll('section.s-cover, section.s-section').forEach(s => {
|
||||||
|
// only flip sections that don't already have inline background:var(--white) (content slides)
|
||||||
|
const inline = s.getAttribute('style') || '';
|
||||||
|
if (!inline.includes('background:var(--white)')) {
|
||||||
|
s.style.background = cov.bg;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Accent color
|
||||||
|
const accentMap = {
|
||||||
|
olive: '#CEDC00',
|
||||||
|
blue: '#0075C0',
|
||||||
|
none: '#727171',
|
||||||
|
};
|
||||||
|
root.setProperty('--olive', accentMap[t.accent] || accentMap.olive);
|
||||||
|
|
||||||
|
// Density — adjusts global font-size on stage via deck-stage element
|
||||||
|
const densityMap = {
|
||||||
|
compact: 0.92,
|
||||||
|
regular: 1.0,
|
||||||
|
spacious: 1.08,
|
||||||
|
};
|
||||||
|
const stage = document.querySelector('deck-stage');
|
||||||
|
if (stage) {
|
||||||
|
stage.style.setProperty('--dc-density', densityMap[t.density] || 1);
|
||||||
|
}
|
||||||
|
// apply as CSS variable on body
|
||||||
|
document.body.style.setProperty('--type-scale', densityMap[t.density] || 1);
|
||||||
|
document.querySelectorAll('section[data-screen-label]').forEach(s => {
|
||||||
|
s.style.zoom = densityMap[t.density] || 1;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Motif visibility
|
||||||
|
document.querySelectorAll('.s-three-dots').forEach(el => {
|
||||||
|
el.style.display = (t.motif === 'all' || t.motif === 'dots') ? 'flex' : 'none';
|
||||||
|
});
|
||||||
|
// vertical lines on section dividers — find via the inline style pattern
|
||||||
|
document.querySelectorAll('section.s-section div[style*="width:1px"]').forEach(el => {
|
||||||
|
el.style.visibility = (t.motif === 'all' || t.motif === 'line') ? 'visible' : 'hidden';
|
||||||
|
});
|
||||||
|
|
||||||
|
// Grid overlay
|
||||||
|
let grid = document.getElementById('__grid_overlay');
|
||||||
|
if (t.showGrid) {
|
||||||
|
if (!grid) {
|
||||||
|
grid = document.createElement('div');
|
||||||
|
grid.id = '__grid_overlay';
|
||||||
|
grid.style.cssText = `
|
||||||
|
position:absolute; inset:0; pointer-events:none; z-index:99;
|
||||||
|
background-image:
|
||||||
|
linear-gradient(to right, rgba(0,117,192,0.18) 0.5px, transparent 0.5px),
|
||||||
|
linear-gradient(to bottom, rgba(0,117,192,0.18) 0.5px, transparent 0.5px);
|
||||||
|
background-size:140px 60px;
|
||||||
|
`;
|
||||||
|
document.querySelectorAll('section[data-screen-label]').forEach(s => {
|
||||||
|
const g = grid.cloneNode();
|
||||||
|
// margin guides
|
||||||
|
const margin = document.createElement('div');
|
||||||
|
margin.style.cssText = `position:absolute; inset:56px 96px; border:0.5px dashed rgba(0,117,192,0.5); pointer-events:none;`;
|
||||||
|
g.appendChild(margin);
|
||||||
|
s.appendChild(g);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
document.querySelectorAll('#__grid_overlay').forEach(g => g.remove());
|
||||||
|
}
|
||||||
|
|
||||||
|
// Mono tone (preview without olive accent)
|
||||||
|
if (t.monoTone) {
|
||||||
|
root.setProperty('--olive', '#727171');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
// small delay so deck-stage has rendered its shadow children
|
||||||
|
const id = setTimeout(() => applyTweaks(t), 60);
|
||||||
|
return () => clearTimeout(id);
|
||||||
|
}, [t]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<TweaksPanel>
|
||||||
|
<TweakSection label="Background" />
|
||||||
|
<TweakRadio
|
||||||
|
label="Cover / Section BG"
|
||||||
|
value={t.coverBg}
|
||||||
|
options={[
|
||||||
|
{ value: 'beige', label: 'Beige' },
|
||||||
|
{ value: 'brown', label: 'Brown' },
|
||||||
|
{ value: 'white', label: 'White' },
|
||||||
|
{ value: 'olive', label: 'Olive' },
|
||||||
|
]}
|
||||||
|
onChange={(v) => setTweak('coverBg', v)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<TweakSection label="Accent" />
|
||||||
|
<TweakRadio
|
||||||
|
label="Accent color"
|
||||||
|
value={t.accent}
|
||||||
|
options={[
|
||||||
|
{ value: 'olive', label: 'Olive' },
|
||||||
|
{ value: 'blue', label: 'Blue' },
|
||||||
|
{ value: 'none', label: 'None' },
|
||||||
|
]}
|
||||||
|
onChange={(v) => setTweak('accent', v)}
|
||||||
|
/>
|
||||||
|
<TweakToggle
|
||||||
|
label="Mono tone preview"
|
||||||
|
value={t.monoTone}
|
||||||
|
onChange={(v) => setTweak('monoTone', v)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<TweakSection label="Layout" />
|
||||||
|
<TweakRadio
|
||||||
|
label="Type density"
|
||||||
|
value={t.density}
|
||||||
|
options={[
|
||||||
|
{ value: 'compact', label: 'Compact' },
|
||||||
|
{ value: 'regular', label: 'Regular' },
|
||||||
|
{ value: 'spacious', label: 'Spacious' },
|
||||||
|
]}
|
||||||
|
onChange={(v) => setTweak('density', v)}
|
||||||
|
/>
|
||||||
|
<TweakSelect
|
||||||
|
label="Motif visibility"
|
||||||
|
value={t.motif}
|
||||||
|
options={[
|
||||||
|
{ value: 'all', label: 'All motifs' },
|
||||||
|
{ value: 'dots', label: 'Three-dot only' },
|
||||||
|
{ value: 'line', label: 'Vertical line only' },
|
||||||
|
{ value: 'none', label: 'Minimal' },
|
||||||
|
]}
|
||||||
|
onChange={(v) => setTweak('motif', v)}
|
||||||
|
/>
|
||||||
|
<TweakToggle
|
||||||
|
label="Grid overlay"
|
||||||
|
value={t.showGrid}
|
||||||
|
onChange={(v) => setTweak('showGrid', v)}
|
||||||
|
/>
|
||||||
|
</TweaksPanel>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const root = ReactDOM.createRoot(document.getElementById('tweaks-root'));
|
||||||
|
root.render(<App />);
|
||||||
568
tweaks-panel.jsx
Normal file
568
tweaks-panel.jsx
Normal file
@@ -0,0 +1,568 @@
|
|||||||
|
|
||||||
|
// tweaks-panel.jsx
|
||||||
|
// Reusable Tweaks shell + form-control helpers.
|
||||||
|
//
|
||||||
|
// Owns the host protocol (listens for __activate_edit_mode / __deactivate_edit_mode,
|
||||||
|
// posts __edit_mode_available / __edit_mode_set_keys / __edit_mode_dismissed) so
|
||||||
|
// individual prototypes don't re-roll it. Ships a consistent set of controls so you
|
||||||
|
// don't hand-draw <input type="range">, segmented radios, steppers, etc.
|
||||||
|
//
|
||||||
|
// Usage (in an HTML file that loads React + Babel):
|
||||||
|
//
|
||||||
|
// const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
|
||||||
|
// "primaryColor": "#D97757",
|
||||||
|
// "palette": ["#D97757", "#29261b", "#f6f4ef"],
|
||||||
|
// "fontSize": 16,
|
||||||
|
// "density": "regular",
|
||||||
|
// "dark": false
|
||||||
|
// }/*EDITMODE-END*/;
|
||||||
|
//
|
||||||
|
// function App() {
|
||||||
|
// const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
|
||||||
|
// return (
|
||||||
|
// <div style={{ fontSize: t.fontSize, color: t.primaryColor }}>
|
||||||
|
// Hello
|
||||||
|
// <TweaksPanel>
|
||||||
|
// <TweakSection label="Typography" />
|
||||||
|
// <TweakSlider label="Font size" value={t.fontSize} min={10} max={32} unit="px"
|
||||||
|
// onChange={(v) => setTweak('fontSize', v)} />
|
||||||
|
// <TweakRadio label="Density" value={t.density}
|
||||||
|
// options={['compact', 'regular', 'comfy']}
|
||||||
|
// onChange={(v) => setTweak('density', v)} />
|
||||||
|
// <TweakSection label="Theme" />
|
||||||
|
// <TweakColor label="Primary" value={t.primaryColor}
|
||||||
|
// options={['#D97757', '#2A6FDB', '#1F8A5B', '#7A5AE0']}
|
||||||
|
// onChange={(v) => setTweak('primaryColor', v)} />
|
||||||
|
// <TweakColor label="Palette" value={t.palette}
|
||||||
|
// options={[['#D97757', '#29261b', '#f6f4ef'],
|
||||||
|
// ['#475569', '#0f172a', '#f1f5f9']]}
|
||||||
|
// onChange={(v) => setTweak('palette', v)} />
|
||||||
|
// <TweakToggle label="Dark mode" value={t.dark}
|
||||||
|
// onChange={(v) => setTweak('dark', v)} />
|
||||||
|
// </TweaksPanel>
|
||||||
|
// </div>
|
||||||
|
// );
|
||||||
|
// }
|
||||||
|
//
|
||||||
|
// ─────────────────────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
const __TWEAKS_STYLE = `
|
||||||
|
.twk-panel{position:fixed;right:16px;bottom:16px;z-index:2147483646;width:280px;
|
||||||
|
max-height:calc(100vh - 32px);display:flex;flex-direction:column;
|
||||||
|
transform:scale(var(--dc-inv-zoom,1));transform-origin:bottom right;
|
||||||
|
background:rgba(250,249,247,.78);color:#29261b;
|
||||||
|
-webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);
|
||||||
|
border:.5px solid rgba(255,255,255,.6);border-radius:14px;
|
||||||
|
box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 12px 40px rgba(0,0,0,.18);
|
||||||
|
font:11.5px/1.4 ui-sans-serif,system-ui,-apple-system,sans-serif;overflow:hidden}
|
||||||
|
.twk-hd{display:flex;align-items:center;justify-content:space-between;
|
||||||
|
padding:10px 8px 10px 14px;cursor:move;user-select:none}
|
||||||
|
.twk-hd b{font-size:12px;font-weight:600;letter-spacing:.01em}
|
||||||
|
.twk-x{appearance:none;border:0;background:transparent;color:rgba(41,38,27,.55);
|
||||||
|
width:22px;height:22px;border-radius:6px;cursor:default;font-size:13px;line-height:1}
|
||||||
|
.twk-x:hover{background:rgba(0,0,0,.06);color:#29261b}
|
||||||
|
.twk-body{padding:2px 14px 14px;display:flex;flex-direction:column;gap:10px;
|
||||||
|
overflow-y:auto;overflow-x:hidden;min-height:0;
|
||||||
|
scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.15) transparent}
|
||||||
|
.twk-body::-webkit-scrollbar{width:8px}
|
||||||
|
.twk-body::-webkit-scrollbar-track{background:transparent;margin:2px}
|
||||||
|
.twk-body::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:4px;
|
||||||
|
border:2px solid transparent;background-clip:content-box}
|
||||||
|
.twk-body::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.25);
|
||||||
|
border:2px solid transparent;background-clip:content-box}
|
||||||
|
.twk-row{display:flex;flex-direction:column;gap:5px}
|
||||||
|
.twk-row-h{flex-direction:row;align-items:center;justify-content:space-between;gap:10px}
|
||||||
|
.twk-lbl{display:flex;justify-content:space-between;align-items:baseline;
|
||||||
|
color:rgba(41,38,27,.72)}
|
||||||
|
.twk-lbl>span:first-child{font-weight:500}
|
||||||
|
.twk-val{color:rgba(41,38,27,.5);font-variant-numeric:tabular-nums}
|
||||||
|
|
||||||
|
.twk-sect{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
|
||||||
|
color:rgba(41,38,27,.45);padding:10px 0 0}
|
||||||
|
.twk-sect:first-child{padding-top:0}
|
||||||
|
|
||||||
|
.twk-field{appearance:none;box-sizing:border-box;width:100%;min-width:0;height:26px;padding:0 8px;
|
||||||
|
border:.5px solid rgba(0,0,0,.1);border-radius:7px;
|
||||||
|
background:rgba(255,255,255,.6);color:inherit;font:inherit;outline:none}
|
||||||
|
.twk-field:focus{border-color:rgba(0,0,0,.25);background:rgba(255,255,255,.85)}
|
||||||
|
select.twk-field{padding-right:22px;
|
||||||
|
background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='rgba(0,0,0,.5)' d='M0 0h10L5 6z'/></svg>");
|
||||||
|
background-repeat:no-repeat;background-position:right 8px center}
|
||||||
|
|
||||||
|
.twk-slider{appearance:none;-webkit-appearance:none;width:100%;height:4px;margin:6px 0;
|
||||||
|
border-radius:999px;background:rgba(0,0,0,.12);outline:none}
|
||||||
|
.twk-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
|
||||||
|
width:14px;height:14px;border-radius:50%;background:#fff;
|
||||||
|
border:.5px solid rgba(0,0,0,.12);box-shadow:0 1px 3px rgba(0,0,0,.2);cursor:default}
|
||||||
|
.twk-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;
|
||||||
|
background:#fff;border:.5px solid rgba(0,0,0,.12);box-shadow:0 1px 3px rgba(0,0,0,.2);cursor:default}
|
||||||
|
|
||||||
|
.twk-seg{position:relative;display:flex;padding:2px;border-radius:8px;
|
||||||
|
background:rgba(0,0,0,.06);user-select:none}
|
||||||
|
.twk-seg-thumb{position:absolute;top:2px;bottom:2px;border-radius:6px;
|
||||||
|
background:rgba(255,255,255,.9);box-shadow:0 1px 2px rgba(0,0,0,.12);
|
||||||
|
transition:left .15s cubic-bezier(.3,.7,.4,1),width .15s}
|
||||||
|
.twk-seg.dragging .twk-seg-thumb{transition:none}
|
||||||
|
.twk-seg button{appearance:none;position:relative;z-index:1;flex:1;border:0;
|
||||||
|
background:transparent;color:inherit;font:inherit;font-weight:500;min-height:22px;
|
||||||
|
border-radius:6px;cursor:default;padding:4px 6px;line-height:1.2;
|
||||||
|
overflow-wrap:anywhere}
|
||||||
|
|
||||||
|
.twk-toggle{position:relative;width:32px;height:18px;border:0;border-radius:999px;
|
||||||
|
background:rgba(0,0,0,.15);transition:background .15s;cursor:default;padding:0}
|
||||||
|
.twk-toggle[data-on="1"]{background:#34c759}
|
||||||
|
.twk-toggle i{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
|
||||||
|
background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
|
||||||
|
.twk-toggle[data-on="1"] i{transform:translateX(14px)}
|
||||||
|
|
||||||
|
.twk-num{display:flex;align-items:center;box-sizing:border-box;min-width:0;height:26px;padding:0 0 0 8px;
|
||||||
|
border:.5px solid rgba(0,0,0,.1);border-radius:7px;background:rgba(255,255,255,.6)}
|
||||||
|
.twk-num-lbl{font-weight:500;color:rgba(41,38,27,.6);cursor:ew-resize;
|
||||||
|
user-select:none;padding-right:8px}
|
||||||
|
.twk-num input{flex:1;min-width:0;height:100%;border:0;background:transparent;
|
||||||
|
font:inherit;font-variant-numeric:tabular-nums;text-align:right;padding:0 8px 0 0;
|
||||||
|
outline:none;color:inherit;-moz-appearance:textfield}
|
||||||
|
.twk-num input::-webkit-inner-spin-button,.twk-num input::-webkit-outer-spin-button{
|
||||||
|
-webkit-appearance:none;margin:0}
|
||||||
|
.twk-num-unit{padding-right:8px;color:rgba(41,38,27,.45)}
|
||||||
|
|
||||||
|
.twk-btn{appearance:none;height:26px;padding:0 12px;border:0;border-radius:7px;
|
||||||
|
background:rgba(0,0,0,.78);color:#fff;font:inherit;font-weight:500;cursor:default}
|
||||||
|
.twk-btn:hover{background:rgba(0,0,0,.88)}
|
||||||
|
.twk-btn.secondary{background:rgba(0,0,0,.06);color:inherit}
|
||||||
|
.twk-btn.secondary:hover{background:rgba(0,0,0,.1)}
|
||||||
|
|
||||||
|
.twk-swatch{appearance:none;-webkit-appearance:none;width:56px;height:22px;
|
||||||
|
border:.5px solid rgba(0,0,0,.1);border-radius:6px;padding:0;cursor:default;
|
||||||
|
background:transparent;flex-shrink:0}
|
||||||
|
.twk-swatch::-webkit-color-swatch-wrapper{padding:0}
|
||||||
|
.twk-swatch::-webkit-color-swatch{border:0;border-radius:5.5px}
|
||||||
|
.twk-swatch::-moz-color-swatch{border:0;border-radius:5.5px}
|
||||||
|
|
||||||
|
.twk-chips{display:flex;gap:6px}
|
||||||
|
.twk-chip{position:relative;appearance:none;flex:1;min-width:0;height:46px;
|
||||||
|
padding:0;border:0;border-radius:6px;overflow:hidden;cursor:default;
|
||||||
|
box-shadow:0 0 0 .5px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.06);
|
||||||
|
transition:transform .12s cubic-bezier(.3,.7,.4,1),box-shadow .12s}
|
||||||
|
.twk-chip:hover{transform:translateY(-1px);
|
||||||
|
box-shadow:0 0 0 .5px rgba(0,0,0,.18),0 4px 10px rgba(0,0,0,.12)}
|
||||||
|
.twk-chip[data-on="1"]{box-shadow:0 0 0 1.5px rgba(0,0,0,.85),
|
||||||
|
0 2px 6px rgba(0,0,0,.15)}
|
||||||
|
.twk-chip>span{position:absolute;top:0;bottom:0;right:0;width:34%;
|
||||||
|
display:flex;flex-direction:column;box-shadow:-1px 0 0 rgba(0,0,0,.1)}
|
||||||
|
.twk-chip>span>i{flex:1;box-shadow:0 -1px 0 rgba(0,0,0,.1)}
|
||||||
|
.twk-chip>span>i:first-child{box-shadow:none}
|
||||||
|
.twk-chip svg{position:absolute;top:6px;left:6px;width:13px;height:13px;
|
||||||
|
filter:drop-shadow(0 1px 1px rgba(0,0,0,.3))}
|
||||||
|
`;
|
||||||
|
|
||||||
|
// ── useTweaks ───────────────────────────────────────────────────────────────
|
||||||
|
// Single source of truth for tweak values. setTweak persists via the host
|
||||||
|
// (__edit_mode_set_keys → host rewrites the EDITMODE block on disk).
|
||||||
|
function useTweaks(defaults) {
|
||||||
|
const [values, setValues] = React.useState(defaults);
|
||||||
|
// Accepts either setTweak('key', value) or setTweak({ key: value, ... }) so a
|
||||||
|
// useState-style call doesn't write a "[object Object]" key into the persisted
|
||||||
|
// JSON block.
|
||||||
|
const setTweak = React.useCallback((keyOrEdits, val) => {
|
||||||
|
const edits = typeof keyOrEdits === 'object' && keyOrEdits !== null
|
||||||
|
? keyOrEdits : { [keyOrEdits]: val };
|
||||||
|
setValues((prev) => ({ ...prev, ...edits }));
|
||||||
|
window.parent.postMessage({ type: '__edit_mode_set_keys', edits }, '*');
|
||||||
|
// Same-window signal so in-page listeners (deck-stage rail thumbnails)
|
||||||
|
// can react — the parent message only reaches the host, not peers.
|
||||||
|
window.dispatchEvent(new CustomEvent('tweakchange', { detail: edits }));
|
||||||
|
}, []);
|
||||||
|
return [values, setTweak];
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── TweaksPanel ─────────────────────────────────────────────────────────────
|
||||||
|
// Floating shell. Registers the protocol listener BEFORE announcing
|
||||||
|
// availability — if the announce ran first, the host's activate could land
|
||||||
|
// before our handler exists and the toolbar toggle would silently no-op.
|
||||||
|
// The close button posts __edit_mode_dismissed so the host's toolbar toggle
|
||||||
|
// flips off in lockstep; the host echoes __deactivate_edit_mode back which
|
||||||
|
// is what actually hides the panel.
|
||||||
|
function TweaksPanel({ title = 'Tweaks', noDeckControls = false, children }) {
|
||||||
|
const [open, setOpen] = React.useState(false);
|
||||||
|
const dragRef = React.useRef(null);
|
||||||
|
// Auto-inject a rail toggle when a <deck-stage> is on the page. The
|
||||||
|
// toggle drives the deck's per-viewer _railVisible via window message;
|
||||||
|
// state is mirrored from the same localStorage key the deck reads so
|
||||||
|
// the control reflects reality across reloads. The mechanism is the
|
||||||
|
// message — authors who want custom placement can post it directly
|
||||||
|
// and pass noDeckControls to suppress this one.
|
||||||
|
const hasDeckStage = React.useMemo(
|
||||||
|
() => typeof document !== 'undefined' && !!document.querySelector('deck-stage'),
|
||||||
|
[],
|
||||||
|
);
|
||||||
|
// deck-stage enables its rail in connectedCallback, but this panel can
|
||||||
|
// mount before that element has upgraded. The initial read catches the
|
||||||
|
// common case; the listener covers mounting first. (Older deck-stage.js
|
||||||
|
// copies still wait for the host's __omelette_rail_enabled postMessage —
|
||||||
|
// same listener handles those.)
|
||||||
|
const [railEnabled, setRailEnabled] = React.useState(
|
||||||
|
() => hasDeckStage && !!document.querySelector('deck-stage')?._railEnabled,
|
||||||
|
);
|
||||||
|
React.useEffect(() => {
|
||||||
|
if (!hasDeckStage || railEnabled) return undefined;
|
||||||
|
const onMsg = (e) => {
|
||||||
|
if (e.data && e.data.type === '__omelette_rail_enabled') setRailEnabled(true);
|
||||||
|
};
|
||||||
|
window.addEventListener('message', onMsg);
|
||||||
|
return () => window.removeEventListener('message', onMsg);
|
||||||
|
}, [hasDeckStage, railEnabled]);
|
||||||
|
const [railVisible, setRailVisible] = React.useState(() => {
|
||||||
|
try { return localStorage.getItem('deck-stage.railVisible') !== '0'; } catch (e) { return true; }
|
||||||
|
});
|
||||||
|
const toggleRail = (on) => {
|
||||||
|
setRailVisible(on);
|
||||||
|
window.postMessage({ type: '__deck_rail_visible', on }, '*');
|
||||||
|
};
|
||||||
|
const offsetRef = React.useRef({ x: 16, y: 16 });
|
||||||
|
const PAD = 16;
|
||||||
|
|
||||||
|
const clampToViewport = React.useCallback(() => {
|
||||||
|
const panel = dragRef.current;
|
||||||
|
if (!panel) return;
|
||||||
|
const w = panel.offsetWidth, h = panel.offsetHeight;
|
||||||
|
const maxRight = Math.max(PAD, window.innerWidth - w - PAD);
|
||||||
|
const maxBottom = Math.max(PAD, window.innerHeight - h - PAD);
|
||||||
|
offsetRef.current = {
|
||||||
|
x: Math.min(maxRight, Math.max(PAD, offsetRef.current.x)),
|
||||||
|
y: Math.min(maxBottom, Math.max(PAD, offsetRef.current.y)),
|
||||||
|
};
|
||||||
|
panel.style.right = offsetRef.current.x + 'px';
|
||||||
|
panel.style.bottom = offsetRef.current.y + 'px';
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
if (!open) return;
|
||||||
|
clampToViewport();
|
||||||
|
if (typeof ResizeObserver === 'undefined') {
|
||||||
|
window.addEventListener('resize', clampToViewport);
|
||||||
|
return () => window.removeEventListener('resize', clampToViewport);
|
||||||
|
}
|
||||||
|
const ro = new ResizeObserver(clampToViewport);
|
||||||
|
ro.observe(document.documentElement);
|
||||||
|
return () => ro.disconnect();
|
||||||
|
}, [open, clampToViewport]);
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
const onMsg = (e) => {
|
||||||
|
const t = e?.data?.type;
|
||||||
|
if (t === '__activate_edit_mode') setOpen(true);
|
||||||
|
else if (t === '__deactivate_edit_mode') setOpen(false);
|
||||||
|
};
|
||||||
|
window.addEventListener('message', onMsg);
|
||||||
|
window.parent.postMessage({ type: '__edit_mode_available' }, '*');
|
||||||
|
return () => window.removeEventListener('message', onMsg);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const dismiss = () => {
|
||||||
|
setOpen(false);
|
||||||
|
window.parent.postMessage({ type: '__edit_mode_dismissed' }, '*');
|
||||||
|
};
|
||||||
|
|
||||||
|
const onDragStart = (e) => {
|
||||||
|
const panel = dragRef.current;
|
||||||
|
if (!panel) return;
|
||||||
|
const r = panel.getBoundingClientRect();
|
||||||
|
const sx = e.clientX, sy = e.clientY;
|
||||||
|
const startRight = window.innerWidth - r.right;
|
||||||
|
const startBottom = window.innerHeight - r.bottom;
|
||||||
|
const move = (ev) => {
|
||||||
|
offsetRef.current = {
|
||||||
|
x: startRight - (ev.clientX - sx),
|
||||||
|
y: startBottom - (ev.clientY - sy),
|
||||||
|
};
|
||||||
|
clampToViewport();
|
||||||
|
};
|
||||||
|
const up = () => {
|
||||||
|
window.removeEventListener('mousemove', move);
|
||||||
|
window.removeEventListener('mouseup', up);
|
||||||
|
};
|
||||||
|
window.addEventListener('mousemove', move);
|
||||||
|
window.addEventListener('mouseup', up);
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!open) return null;
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<style>{__TWEAKS_STYLE}</style>
|
||||||
|
<div ref={dragRef} className="twk-panel" data-noncommentable=""
|
||||||
|
style={{ right: offsetRef.current.x, bottom: offsetRef.current.y }}>
|
||||||
|
<div className="twk-hd" onMouseDown={onDragStart}>
|
||||||
|
<b>{title}</b>
|
||||||
|
<button className="twk-x" aria-label="Close tweaks"
|
||||||
|
onMouseDown={(e) => e.stopPropagation()}
|
||||||
|
onClick={dismiss}>✕</button>
|
||||||
|
</div>
|
||||||
|
<div className="twk-body">
|
||||||
|
{children}
|
||||||
|
{hasDeckStage && railEnabled && !noDeckControls && (
|
||||||
|
<TweakSection label="Deck">
|
||||||
|
<TweakToggle label="Thumbnail rail" value={railVisible} onChange={toggleRail} />
|
||||||
|
</TweakSection>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Layout helpers ──────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
function TweakSection({ label, children }) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="twk-sect">{label}</div>
|
||||||
|
{children}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function TweakRow({ label, value, children, inline = false }) {
|
||||||
|
return (
|
||||||
|
<div className={inline ? 'twk-row twk-row-h' : 'twk-row'}>
|
||||||
|
<div className="twk-lbl">
|
||||||
|
<span>{label}</span>
|
||||||
|
{value != null && <span className="twk-val">{value}</span>}
|
||||||
|
</div>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Controls ────────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
function TweakSlider({ label, value, min = 0, max = 100, step = 1, unit = '', onChange }) {
|
||||||
|
return (
|
||||||
|
<TweakRow label={label} value={`${value}${unit}`}>
|
||||||
|
<input type="range" className="twk-slider" min={min} max={max} step={step}
|
||||||
|
value={value} onChange={(e) => onChange(Number(e.target.value))} />
|
||||||
|
</TweakRow>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function TweakToggle({ label, value, onChange }) {
|
||||||
|
return (
|
||||||
|
<div className="twk-row twk-row-h">
|
||||||
|
<div className="twk-lbl"><span>{label}</span></div>
|
||||||
|
<button type="button" className="twk-toggle" data-on={value ? '1' : '0'}
|
||||||
|
role="switch" aria-checked={!!value}
|
||||||
|
onClick={() => onChange(!value)}><i /></button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function TweakRadio({ label, value, options, onChange }) {
|
||||||
|
const trackRef = React.useRef(null);
|
||||||
|
const [dragging, setDragging] = React.useState(false);
|
||||||
|
// The active value is read by pointer-move handlers attached for the lifetime
|
||||||
|
// of a drag — ref it so a stale closure doesn't fire onChange for every move.
|
||||||
|
const valueRef = React.useRef(value);
|
||||||
|
valueRef.current = value;
|
||||||
|
|
||||||
|
// Segments wrap mid-word once per-segment width runs out. The track is
|
||||||
|
// ~248px (280 panel − 28 body pad − 4 seg pad), each button loses 12px
|
||||||
|
// to its own padding, and 11.5px system-ui averages ~6.3px/char — so 2
|
||||||
|
// options fit ~16 chars each, 3 fit ~10. Past that (or >3 options), fall
|
||||||
|
// back to a dropdown rather than wrap.
|
||||||
|
const labelLen = (o) => String(typeof o === 'object' ? o.label : o).length;
|
||||||
|
const maxLen = options.reduce((m, o) => Math.max(m, labelLen(o)), 0);
|
||||||
|
const fitsAsSegments = maxLen <= ({ 2: 16, 3: 10 }[options.length] ?? 0);
|
||||||
|
if (!fitsAsSegments) {
|
||||||
|
// <select> emits strings — map back to the original option value so the
|
||||||
|
// fallback stays type-preserving (numbers, booleans) like the segment path.
|
||||||
|
const resolve = (s) => {
|
||||||
|
const m = options.find((o) => String(typeof o === 'object' ? o.value : o) === s);
|
||||||
|
return m === undefined ? s : typeof m === 'object' ? m.value : m;
|
||||||
|
};
|
||||||
|
return <TweakSelect label={label} value={value} options={options}
|
||||||
|
onChange={(s) => onChange(resolve(s))} />;
|
||||||
|
}
|
||||||
|
const opts = options.map((o) => (typeof o === 'object' ? o : { value: o, label: o }));
|
||||||
|
const idx = Math.max(0, opts.findIndex((o) => o.value === value));
|
||||||
|
const n = opts.length;
|
||||||
|
|
||||||
|
const segAt = (clientX) => {
|
||||||
|
const r = trackRef.current.getBoundingClientRect();
|
||||||
|
const inner = r.width - 4;
|
||||||
|
const i = Math.floor(((clientX - r.left - 2) / inner) * n);
|
||||||
|
return opts[Math.max(0, Math.min(n - 1, i))].value;
|
||||||
|
};
|
||||||
|
|
||||||
|
const onPointerDown = (e) => {
|
||||||
|
setDragging(true);
|
||||||
|
const v0 = segAt(e.clientX);
|
||||||
|
if (v0 !== valueRef.current) onChange(v0);
|
||||||
|
const move = (ev) => {
|
||||||
|
if (!trackRef.current) return;
|
||||||
|
const v = segAt(ev.clientX);
|
||||||
|
if (v !== valueRef.current) onChange(v);
|
||||||
|
};
|
||||||
|
const up = () => {
|
||||||
|
setDragging(false);
|
||||||
|
window.removeEventListener('pointermove', move);
|
||||||
|
window.removeEventListener('pointerup', up);
|
||||||
|
};
|
||||||
|
window.addEventListener('pointermove', move);
|
||||||
|
window.addEventListener('pointerup', up);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<TweakRow label={label}>
|
||||||
|
<div ref={trackRef} role="radiogroup" onPointerDown={onPointerDown}
|
||||||
|
className={dragging ? 'twk-seg dragging' : 'twk-seg'}>
|
||||||
|
<div className="twk-seg-thumb"
|
||||||
|
style={{ left: `calc(2px + ${idx} * (100% - 4px) / ${n})`,
|
||||||
|
width: `calc((100% - 4px) / ${n})` }} />
|
||||||
|
{opts.map((o) => (
|
||||||
|
<button key={o.value} type="button" role="radio" aria-checked={o.value === value}>
|
||||||
|
{o.label}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</TweakRow>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function TweakSelect({ label, value, options, onChange }) {
|
||||||
|
return (
|
||||||
|
<TweakRow label={label}>
|
||||||
|
<select className="twk-field" value={value} onChange={(e) => onChange(e.target.value)}>
|
||||||
|
{options.map((o) => {
|
||||||
|
const v = typeof o === 'object' ? o.value : o;
|
||||||
|
const l = typeof o === 'object' ? o.label : o;
|
||||||
|
return <option key={v} value={v}>{l}</option>;
|
||||||
|
})}
|
||||||
|
</select>
|
||||||
|
</TweakRow>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function TweakText({ label, value, placeholder, onChange }) {
|
||||||
|
return (
|
||||||
|
<TweakRow label={label}>
|
||||||
|
<input className="twk-field" type="text" value={value} placeholder={placeholder}
|
||||||
|
onChange={(e) => onChange(e.target.value)} />
|
||||||
|
</TweakRow>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function TweakNumber({ label, value, min, max, step = 1, unit = '', onChange }) {
|
||||||
|
const clamp = (n) => {
|
||||||
|
if (min != null && n < min) return min;
|
||||||
|
if (max != null && n > max) return max;
|
||||||
|
return n;
|
||||||
|
};
|
||||||
|
const startRef = React.useRef({ x: 0, val: 0 });
|
||||||
|
const onScrubStart = (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
startRef.current = { x: e.clientX, val: value };
|
||||||
|
const decimals = (String(step).split('.')[1] || '').length;
|
||||||
|
const move = (ev) => {
|
||||||
|
const dx = ev.clientX - startRef.current.x;
|
||||||
|
const raw = startRef.current.val + dx * step;
|
||||||
|
const snapped = Math.round(raw / step) * step;
|
||||||
|
onChange(clamp(Number(snapped.toFixed(decimals))));
|
||||||
|
};
|
||||||
|
const up = () => {
|
||||||
|
window.removeEventListener('pointermove', move);
|
||||||
|
window.removeEventListener('pointerup', up);
|
||||||
|
};
|
||||||
|
window.addEventListener('pointermove', move);
|
||||||
|
window.addEventListener('pointerup', up);
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<div className="twk-num">
|
||||||
|
<span className="twk-num-lbl" onPointerDown={onScrubStart}>{label}</span>
|
||||||
|
<input type="number" value={value} min={min} max={max} step={step}
|
||||||
|
onChange={(e) => onChange(clamp(Number(e.target.value)))} />
|
||||||
|
{unit && <span className="twk-num-unit">{unit}</span>}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Relative-luminance contrast pick — checkmarks drawn over a swatch need to
|
||||||
|
// read on both #111 and #fafafa without per-option configuration. Hex input
|
||||||
|
// only (#rgb / #rrggbb); named or rgb()/hsl() colors fall through to "light".
|
||||||
|
function __twkIsLight(hex) {
|
||||||
|
const h = String(hex).replace('#', '');
|
||||||
|
const x = h.length === 3 ? h.replace(/./g, (c) => c + c) : h.padEnd(6, '0');
|
||||||
|
const n = parseInt(x.slice(0, 6), 16);
|
||||||
|
if (Number.isNaN(n)) return true;
|
||||||
|
const r = (n >> 16) & 255, g = (n >> 8) & 255, b = n & 255;
|
||||||
|
return r * 299 + g * 587 + b * 114 > 148000;
|
||||||
|
}
|
||||||
|
|
||||||
|
const __TwkCheck = ({ light }) => (
|
||||||
|
<svg viewBox="0 0 14 14" aria-hidden="true">
|
||||||
|
<path d="M3 7.2 5.8 10 11 4.2" fill="none" strokeWidth="2.2"
|
||||||
|
strokeLinecap="round" strokeLinejoin="round"
|
||||||
|
stroke={light ? 'rgba(0,0,0,.78)' : '#fff'} />
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
|
||||||
|
// TweakColor — curated color/palette picker. Each option is either a single
|
||||||
|
// hex string or an array of 1-5 hex strings; the card adapts — a lone color
|
||||||
|
// renders solid, a palette renders colors[0] as the hero (left ~2/3) with the
|
||||||
|
// rest stacked in a sharp column on the right. onChange emits the
|
||||||
|
// option in the shape it was passed (string stays string, array stays array).
|
||||||
|
// Without options it falls back to the native color input for back-compat.
|
||||||
|
function TweakColor({ label, value, options, onChange }) {
|
||||||
|
if (!options || !options.length) {
|
||||||
|
return (
|
||||||
|
<div className="twk-row twk-row-h">
|
||||||
|
<div className="twk-lbl"><span>{label}</span></div>
|
||||||
|
<input type="color" className="twk-swatch" value={value}
|
||||||
|
onChange={(e) => onChange(e.target.value)} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
// Native <input type=color> emits lowercase hex per the HTML spec, so
|
||||||
|
// compare case-insensitively. String() guards JSON.stringify(undefined),
|
||||||
|
// which returns the primitive undefined (no .toLowerCase).
|
||||||
|
const key = (o) => String(JSON.stringify(o)).toLowerCase();
|
||||||
|
const cur = key(value);
|
||||||
|
return (
|
||||||
|
<TweakRow label={label}>
|
||||||
|
<div className="twk-chips" role="radiogroup">
|
||||||
|
{options.map((o, i) => {
|
||||||
|
const colors = Array.isArray(o) ? o : [o];
|
||||||
|
const [hero, ...rest] = colors;
|
||||||
|
const sup = rest.slice(0, 4);
|
||||||
|
const on = key(o) === cur;
|
||||||
|
return (
|
||||||
|
<button key={i} type="button" className="twk-chip" role="radio"
|
||||||
|
aria-checked={on} data-on={on ? '1' : '0'}
|
||||||
|
aria-label={colors.join(', ')} title={colors.join(' · ')}
|
||||||
|
style={{ background: hero }}
|
||||||
|
onClick={() => onChange(o)}>
|
||||||
|
{sup.length > 0 && (
|
||||||
|
<span>
|
||||||
|
{sup.map((c, j) => <i key={j} style={{ background: c }} />)}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{on && <__TwkCheck light={__twkIsLight(hero)} />}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</TweakRow>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function TweakButton({ label, onClick, secondary = false }) {
|
||||||
|
return (
|
||||||
|
<button type="button" className={secondary ? 'twk-btn secondary' : 'twk-btn'}
|
||||||
|
onClick={onClick}>{label}</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
Object.assign(window, {
|
||||||
|
useTweaks, TweaksPanel, TweakSection, TweakRow,
|
||||||
|
TweakSlider, TweakToggle, TweakRadio, TweakSelect,
|
||||||
|
TweakText, TweakNumber, TweakColor, TweakButton,
|
||||||
|
});
|
||||||
BIN
uploads/AppleSDGothicNeoB.ttf
Normal file
BIN
uploads/AppleSDGothicNeoB.ttf
Normal file
Binary file not shown.
BIN
uploads/AppleSDGothicNeoEB.ttf
Normal file
BIN
uploads/AppleSDGothicNeoEB.ttf
Normal file
Binary file not shown.
BIN
uploads/AppleSDGothicNeoH.ttf
Normal file
BIN
uploads/AppleSDGothicNeoH.ttf
Normal file
Binary file not shown.
BIN
uploads/AppleSDGothicNeoL.ttf
Normal file
BIN
uploads/AppleSDGothicNeoL.ttf
Normal file
Binary file not shown.
BIN
uploads/AppleSDGothicNeoM.ttf
Normal file
BIN
uploads/AppleSDGothicNeoM.ttf
Normal file
Binary file not shown.
396
uploads/BRAND-GUIDE-v1.2.md
Normal file
396
uploads/BRAND-GUIDE-v1.2.md
Normal file
@@ -0,0 +1,396 @@
|
|||||||
|
# D.intelligence Brand Guide v1.2
|
||||||
|
|
||||||
|
> **최종 업데이트**: 2026-03-09
|
||||||
|
> **기준 문서**: [00_SERVICE-MAP.md](00_SERVICE-MAP.md) v2.0
|
||||||
|
> **이전 버전**: [Archive/D.intelligence-brand-guide-draft.txt](Archive/D.intelligence-brand-guide-draft.txt) v1.0
|
||||||
|
> **변경 내역**: 서비스 맵 v2.0 기준 전면 재편, 서비스 아키텍처 통일, 타겟 오디언스 확장, Voice Examples 추가
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 1. 문서 목적
|
||||||
|
|
||||||
|
이 문서는 D.intelligence의 브랜드 정체성, 메시지 체계, 톤앤매너, 서비스 아키텍처, AI 활용 기준을 통합한 내부 운영 기준서다.
|
||||||
|
|
||||||
|
**용도**
|
||||||
|
|
||||||
|
- 대외 커뮤니케이션의 일관성 확보
|
||||||
|
- 제안서, 리포트, 콘텐츠, AI 응답 품질의 표준화
|
||||||
|
- 서비스 소개·영업·마케팅 자료의 기준
|
||||||
|
- LLM, Agent, 자동화 시스템의 브랜드 기준 문서
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 2. 브랜드 코어
|
||||||
|
|
||||||
|
### 2.1 Mission
|
||||||
|
|
||||||
|
데이터 기반 의사결정으로 기업의 지속가능한 성장을 실현하는 전문 파트너
|
||||||
|
|
||||||
|
### 2.2 Vision
|
||||||
|
|
||||||
|
마케팅 과학과 데이터 리터러시의 전도사
|
||||||
|
|
||||||
|
### 2.3 Tagline
|
||||||
|
|
||||||
|
**Analysis, Treatment & Growth**
|
||||||
|
|
||||||
|
### 2.4 Internal Motto
|
||||||
|
|
||||||
|
**Think Forward**
|
||||||
|
|
||||||
|
### 2.5 Core Values
|
||||||
|
|
||||||
|
| Value | 의미 |
|
||||||
|
|-------|------|
|
||||||
|
| **Science** | 과학적 방법론, 검증, 데이터 기반 판단 |
|
||||||
|
| **Practice** | 실행 가능하고 현실적인 해법 |
|
||||||
|
| **Outcome** | 측정 가능한 성과 중심 |
|
||||||
|
| **Insights** | 복잡한 문제를 분명한 인사이트로 전환 |
|
||||||
|
|
||||||
|
### 2.6 Brand Position
|
||||||
|
|
||||||
|
**AI와 데이터 기반 마케팅 혁신의 파트너**
|
||||||
|
|
||||||
|
### 2.7 Brand Dimensions (4차원 브랜드 구조)
|
||||||
|
|
||||||
|
| 차원 | 정의 | 핵심 표현 |
|
||||||
|
|------|------|----------|
|
||||||
|
| **Functional** | 데이터 기반 진단-처방-성장 프레임워크를 통해 측정 가능한 성과를 설계한다 | Analysis, Treatment & Growth |
|
||||||
|
| **Emotional** | 함께 문제를 풀어가는 동반자로서, 고객과 같은 방향을 바라본다 | Think Forward |
|
||||||
|
| **Experiential** | 과학적인 진단을 우선하는 마케팅 클리닉 경험 — 1:1 상담, 구체적 처방, 성장 설계 | SMART Marketing Clinic |
|
||||||
|
| **Social** | 누구나 활용 가능한 보편적 데이터 & AI 역량의 전도사 | Data Literacy for All |
|
||||||
|
|
||||||
|
### 2.8 Brand Promise
|
||||||
|
|
||||||
|
**"진단의 정확함으로 시작하여, 성장의 구조를 함께 만듭니다."**
|
||||||
|
|
||||||
|
#### Heritage Promise — 7가지 약속 (2011, D&A)
|
||||||
|
|
||||||
|
D.intelligence의 창업 철학이자 브랜드 가치의 근간이 되는 약속이다.
|
||||||
|
|
||||||
|
1. 사람과 사람의 이야기를 이어갑니다
|
||||||
|
2. 사람의 얼굴을 한 브랜드를 그립니다
|
||||||
|
3. 진실된 고객 가치만을 이야기합니다
|
||||||
|
4. 조심스럽게 듣고 담백하게 말합니다
|
||||||
|
5. 큰 성공보다는 작은 믿음을 약속합니다
|
||||||
|
6. 새로운 도전과 실패를 두려워하지 않습니다
|
||||||
|
7. 사람의 온기와 향기를 남깁니다
|
||||||
|
|
||||||
|
> 이 7가지 약속은 현재의 Core Values(Science, Practice, Outcome, Insights)와 톤앤매너("조심스럽게 듣고 담백하게")의 원형이며, Brand Character의 인간적 깊이를 부여하는 근간이다.
|
||||||
|
|
||||||
|
### 2.9 Brand Character
|
||||||
|
|
||||||
|
**지혜로운 상담 마케팅 주치의**
|
||||||
|
|
||||||
|
과학적이되 따뜻한, 진단은 냉철하나 처방은 인간적인 전문가.
|
||||||
|
|
||||||
|
| 특성 | 표현 | 연결 |
|
||||||
|
|------|------|------|
|
||||||
|
| 전문성 | 데이터와 논리에 기반한 진단, 근거 없는 과장을 하지 않는다 | Science, Practice |
|
||||||
|
| 따뜻함 | 성과 너머의 관계를 소중히 한다 | 약속 #7 "사람의 온기와 향기를 남깁니다" |
|
||||||
|
| 담백함 | 꾸밈 없는 솔직한 커뮤니케이션 | 약속 #4 "조심스럽게 듣고 담백하게 말합니다" |
|
||||||
|
| 동반자 | 장기적 파트너십 지향, 함께 문제를 풀어간다 | 약속 #5 "큰 성공보다는 작은 믿음을 약속합니다" |
|
||||||
|
| 도전 | 혁신에 열린 태도, AI와 데이터의 새로운 가능성을 탐구한다 | 약속 #6 "새로운 도전과 실패를 두려워하지 않습니다" |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 3. 브랜드 내러티브
|
||||||
|
|
||||||
|
### 3.1 왜 D.intelligence가 존재하는가
|
||||||
|
|
||||||
|
많은 기업이 데이터를 수집하지만, 그 데이터로 올바른 의사결정을 내리지 못한다. 마케팅 예산은 집행되지만 성과의 구조가 보이지 않고, 채널은 늘어나지만 KPI와 측정 체계가 정렬되지 않는다.
|
||||||
|
|
||||||
|
D.intelligence는 이 간극을 메운다. 데이터를 단순히 '보는 것'이 아니라 '진단하고, 처방하고, 성장으로 연결하는 것'이 우리의 역할이다.
|
||||||
|
|
||||||
|
### 3.2 브랜드 정의
|
||||||
|
|
||||||
|
D.intelligence는 디지털 마케팅과 데이터 분석의 언어를 연결하여, 기업이 더 정확하게 측정하고, 더 명확하게 판단하고, 더 지속적으로 성장하도록 돕는 **Marketing Intelligence 파트너**다.
|
||||||
|
|
||||||
|
- 단순 대행사가 아니라 **진단-설계-실행-최적화**를 함께 하는 파트너
|
||||||
|
- 단순 리포터가 아니라 **의사결정을 돕는 분석가이자 전략가**
|
||||||
|
- 단순 데이터 기술자가 아니라 **성과를 설계하는 비즈니스 분석 파트너**
|
||||||
|
|
||||||
|
### 3.3 포지셔닝
|
||||||
|
|
||||||
|
**AI와 데이터 기반 마케팅 혁신의 파트너**
|
||||||
|
|
||||||
|
대기업 수준의 데이터·AI 역량을 중견기업과 스타트업에 맞춤 실행력으로 전달한다.
|
||||||
|
|
||||||
|
### 3.4 핵심 차별점
|
||||||
|
|
||||||
|
- 과학적 진단-처방-성장 프레임워크를 마케팅에 적용한 독자적 SMART Marketing Clinic 모델
|
||||||
|
- 진단으로 끝나지 않고 실행(Treatment)과 성장(Growth)까지 연결
|
||||||
|
- Brand Visibility Treatment(T6)라는 독자 서비스 영역 보유
|
||||||
|
- 데이터 분석과 마케팅 전략의 양방향 전문성
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 4. 서비스 아키텍처
|
||||||
|
|
||||||
|
### 4.1 3-Phase 프레임워크
|
||||||
|
|
||||||
|
D.intelligence의 서비스는 고객의 디지털 성장 단계에 맞춘 3-Phase 프레임워크로 구성된다.
|
||||||
|
|
||||||
|
| Phase | 명칭 | 목적 | 모듈 |
|
||||||
|
|-------|------|------|------|
|
||||||
|
| **Analysis** | 진단 | 현재 상태를 정확하게 진단하고 데이터 근거를 확보 | A1-A6 (6개) |
|
||||||
|
| **Treatment** | 처방 | 진단 결과를 기반으로 구체적 개선·최적화 설계·실행 | T1-T7 (7개) |
|
||||||
|
| **Growth** | 성장 | 지속적 성장을 위한 장기 파트너십과 성과 관리 | G1-G4 (4개) |
|
||||||
|
|
||||||
|
### 4.2 4대 서비스 카테고리
|
||||||
|
|
||||||
|
각 모듈은 아래 4대 서비스 카테고리(태그) 중 하나 이상에 태깅된다.
|
||||||
|
|
||||||
|
| 태그 | 카테고리명 | 정의 |
|
||||||
|
|------|-----------|------|
|
||||||
|
| `DI` | Data Intelligence | 비즈니스 목표에 맞는 데이터를 정의하고, 수집·검증·분석 체계를 수립 |
|
||||||
|
| `MD` | Measurement Design | 비즈니스 성과를 측정할 수 있는 지표 체계, 이벤트 구조, 리포팅 체계 설계 |
|
||||||
|
| `MPO` | Marketing Performance Optimization | 채널·캠페인·콘텐츠·랜딩페이지의 성과를 분석하고 최적화 |
|
||||||
|
| `BVT` | Brand Visibility Treatment | SEO, 콘텐츠 구조화, 검색 노출 최적화, 디지털 자산 가시성 강화 |
|
||||||
|
|
||||||
|
### 4.3 서비스 모듈 일람
|
||||||
|
|
||||||
|
#### Analysis (진단)
|
||||||
|
|
||||||
|
| 코드 | 서비스명 | 주요 태그 |
|
||||||
|
|------|---------|-----------|
|
||||||
|
| A1 | 비즈니스·브랜드 진단 | MPO |
|
||||||
|
| A2 | 고객·소비자 분석 | MPO |
|
||||||
|
| A3 | 데이터 분석 — 웹·앱 | DI, MD, BVT |
|
||||||
|
| A4 | 디지털 마케팅 진단 | MPO, BVT |
|
||||||
|
| A5 | 퍼포먼스 마케팅 진단 | MPO, MD |
|
||||||
|
| A6 | 운영·관리 진단 | DI |
|
||||||
|
|
||||||
|
#### Treatment (처방)
|
||||||
|
|
||||||
|
| 코드 | 서비스명 | 주요 태그 |
|
||||||
|
|------|---------|-----------|
|
||||||
|
| T1 | 브랜드 스토리텔링 & 가이드 | BVT |
|
||||||
|
| T2 | 고객 접점 경험 최적화 | MPO |
|
||||||
|
| T3 | 디지털 자산 통합관리 | DI, MD |
|
||||||
|
| T4 | 콘텐츠 마케팅 | MPO |
|
||||||
|
| T5 | 광고·전환 최적화 | MPO |
|
||||||
|
| **T6** | **Brand Visibility Treatment** | **BVT** |
|
||||||
|
| T7 | 운영 시스템·자동화 | DI |
|
||||||
|
|
||||||
|
> T6 Brand Visibility Treatment는 D.intelligence의 시그니처 서비스이다. SEO, 콘텐츠 구조화, 검색 노출 최적화, AEO/GEO를 포괄하며 다른 모듈과 가장 높은 연관성을 가진다.
|
||||||
|
|
||||||
|
#### Growth (성장)
|
||||||
|
|
||||||
|
| 코드 | 서비스명 | 주요 태그 |
|
||||||
|
|------|---------|-----------|
|
||||||
|
| G1 | 퍼포먼스 마케팅 | MPO |
|
||||||
|
| G2 | 콘텐츠 마케팅 대행 | MPO, BVT |
|
||||||
|
| G3 | 모니터링·이슈관리 | MD, BVT |
|
||||||
|
| G4 | 연간 계약·운영 | MPO |
|
||||||
|
|
||||||
|
### 4.4 부가 서비스
|
||||||
|
|
||||||
|
| 서비스 | 포지셔닝 | 서비스 맵 연결 |
|
||||||
|
|--------|---------|---------------|
|
||||||
|
| 1Day Clinic | Quick Diagnosis — Analysis Phase 경량 버전 | A3, A4, A5 간이 |
|
||||||
|
| Courses | Capability Building — Data Literacy 교육 | T4 교육 요소, A6→T3 |
|
||||||
|
| Magazine D. | Insights Channel — 마케팅 인사이트 매거진 | 콘텐츠 마케팅 |
|
||||||
|
| Newsletter | Regular Updates — 정기 뉴스레터 | 리드 너처링 |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 5. 타겟 오디언스
|
||||||
|
|
||||||
|
### 5.1 Tier 1: 의사결정자 (구매자)
|
||||||
|
|
||||||
|
| 페르소나 | 기업 규모 | Pain Point |
|
||||||
|
|---------|----------|------------|
|
||||||
|
| CMO / 마케팅 본부장 | 연매출 100-500억 중견기업 | 마케팅 투자 대비 성과 측정이 안 됨, 채널별 ROI 불분명 |
|
||||||
|
| CSO / 전략기획 임원 | Series A-C 스타트업 | 데이터 기반 전략 수립 역량 부족, 디지털 전환 방향 불확실 |
|
||||||
|
| 스타트업 대표 / 공동창업자 | — | 한정된 예산으로 최대 성과, 빠른 실행-검증 필요 |
|
||||||
|
|
||||||
|
### 5.2 Tier 2: 실무 사용자
|
||||||
|
|
||||||
|
마케팅 책임자, 사업주·창업자, eCommerce 책임자, 브랜드 담당자, 디지털 마케팅 담당자, 콘텐츠 마케팅 담당자, 데이터 분석가, Growth Manager, 커뮤니케이션 담당자
|
||||||
|
|
||||||
|
> 상세 페르소나별 Touch Point, Landing Page, CTA 설계는 [04_TARGET-TOUCHPOINTS.md](04_TARGET-TOUCHPOINTS.md) 참조
|
||||||
|
|
||||||
|
### 5.3 고객이 D.intelligence를 필요로 하는 상황
|
||||||
|
|
||||||
|
- 데이터는 쌓이지만 해석이 안 되는 경우
|
||||||
|
- 마케팅 성과는 집행되지만 구조가 없는 경우
|
||||||
|
- 채널은 많은데 KPI와 측정 체계가 정렬되지 않은 경우
|
||||||
|
- SEO, GA4, GTM, BigQuery, 대시보드가 따로 노는 경우
|
||||||
|
- 실행 조직은 있으나 전략과 기준이 없는 경우
|
||||||
|
- 검색에 우리 회사가 안 나와서 콘텐츠 효과가 없는 경우
|
||||||
|
- 광고비는 쓰는데 매출이 안 늘어나는 경우
|
||||||
|
- 랜딩 페이지 전환율이 낮고 원인을 모르는 경우
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 6. 브랜드 메시지 프레임워크
|
||||||
|
|
||||||
|
### 6.1 표준 구조
|
||||||
|
|
||||||
|
**문제 진단 → 데이터 근거 → 해결 방안 → 예상 성과**
|
||||||
|
|
||||||
|
### 6.2 메시지 작성 원칙
|
||||||
|
|
||||||
|
- 추상적 표현보다 구체적 지표를 우선한다.
|
||||||
|
- 방법론 설명보다 실행 가능성을 우선한다.
|
||||||
|
- '무엇이 문제인가'보다 '어떻게 개선할 것인가'를 더 분명하게 말한다.
|
||||||
|
- 가능하면 Before / After 혹은 KPI 변화를 함께 제시한다.
|
||||||
|
|
||||||
|
### 6.3 카테고리별 메시지
|
||||||
|
|
||||||
|
| 카테고리 | 고객 대상 메시지 |
|
||||||
|
|---------|----------------|
|
||||||
|
| DI | "흩어진 데이터를 하나의 의사결정 체계로 연결합니다" |
|
||||||
|
| MD | "무엇을 측정하고 어떻게 평가할지, 기준부터 세워드립니다" |
|
||||||
|
| MPO | "실행 가능한 최적화로, 데이터가 말하는 성과를 실현합니다" |
|
||||||
|
| BVT | "검색에서 발견되지 않으면 존재하지 않는 것과 같습니다" |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 7. 톤 & 매너 가이드
|
||||||
|
|
||||||
|
### 7.1 기본 톤
|
||||||
|
|
||||||
|
Professional, Science-driven, Practice-oriented, Outcome-focused, Calm but confident
|
||||||
|
|
||||||
|
### 7.2 문장 스타일
|
||||||
|
|
||||||
|
- 논리적이고 단정한 문장
|
||||||
|
- 과장된 수사 금지
|
||||||
|
- 전문 용어는 쓰되, 반드시 풀어서 설명
|
||||||
|
- 장황한 미사여구보다 프레임워크와 수치 중심
|
||||||
|
|
||||||
|
### 7.3 Voice Examples
|
||||||
|
|
||||||
|
#### 좋은 표현
|
||||||
|
|
||||||
|
| 유형 | 예문 |
|
||||||
|
|------|------|
|
||||||
|
| 진단형 | "현재 구조상 가장 큰 병목은 전환 추적 이벤트의 부재입니다." |
|
||||||
|
| 데이터형 | "현 데이터 품질을 전제로 하면, 15-20% 범위의 CAC 절감 가능성이 있습니다." |
|
||||||
|
| 전략형 | "단기적으로는 GA4 이벤트 재설계, 중기적으로는 대시보드 체계 구축이 타당합니다." |
|
||||||
|
| 제안형 | "이 경우 핵심 지표는 채널별 전환율과 ROAS로 보아야 합니다." |
|
||||||
|
| CTA형 | "채널별 CAC 구조를 재설계하여 3개월 내 비효율 매체비 15-20% 절감 가능성을 진단합니다." |
|
||||||
|
|
||||||
|
#### 나쁜 표현 (금지)
|
||||||
|
|
||||||
|
| 유형 | 예문 | 이유 |
|
||||||
|
|------|------|------|
|
||||||
|
| 과장 | "마케팅 효율을 획기적으로 높여드립니다." | 근거 없는 과장 |
|
||||||
|
| 보장 | "반드시 매출이 올라갑니다." | 성과 보장 표현 |
|
||||||
|
| 모호 | "요즘은 다 이렇게 합니다." | 근거 없는 일반화 |
|
||||||
|
| 과시 | "저희만의 독보적인 AI 기술이 있습니다." | 기술 과시 |
|
||||||
|
| 권위 | "국내 Top 기업들이 사용합니다." | 레퍼런스 의존 권위주의 |
|
||||||
|
|
||||||
|
### 7.4 채널별 톤 조정
|
||||||
|
|
||||||
|
| 채널 | 톤 특성 | 콘텐츠 포커스 |
|
||||||
|
|------|---------|-------------|
|
||||||
|
| 웹사이트 | 신뢰·전문 | 문제 해결 방식 중심, 서비스 → 성과 연결 |
|
||||||
|
| LinkedIn / 블로그 | 인사이트·실무 | 업계 인사이트 + 적용 방법 중심 |
|
||||||
|
| 제안서 | 구조·논리 | Executive Summary 우선, 문제→근거→실행안→KPI |
|
||||||
|
| 세미나 / 웨비나 | 진단·참여 | 참가자가 가져갈 수 있는 프레임워크 제공 |
|
||||||
|
| 뉴스레터 | 간결·인사이트 | 핵심 수치 + 실무 시사점 |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 8. 문제 해결 프레임워크
|
||||||
|
|
||||||
|
### 8.1 Core Framework
|
||||||
|
|
||||||
|
1. **Problem Diagnosis** — 실제 문제와 증상을 구분하고, 비즈니스 목표·제약조건·병목을 확인한다.
|
||||||
|
2. **Data Evidence** — 데이터, 지표, 패턴, 비교 사례를 근거로 문제를 설명한다. 데이터가 불완전할 경우 가정과 한계를 명시한다.
|
||||||
|
3. **Strategic Treatment** — 실행 가능한 대안을 제시한다. 우선순위, 난이도, 기대효과를 함께 정리한다.
|
||||||
|
4. **Expected Growth Impact** — 예상되는 KPI 변화와 성과 범위를 제시한다. 조건별 결과 차이를 설명한다.
|
||||||
|
|
||||||
|
### 8.2 실무 적용 영역
|
||||||
|
|
||||||
|
SEO Audit & Treatment, GA4/GTM/BigQuery 기반 분석 체계 설계, 마케팅 성과 측정 시스템 구축, 디지털 채널 및 자산 진단, 콘텐츠 구조화 및 검색 가시성 개선, 대시보드/리포팅 체계 설계
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 9. 콘텐츠 제작 기준
|
||||||
|
|
||||||
|
### 9.1 공통 기준
|
||||||
|
|
||||||
|
Case Study 중심, Before/After 수치 포함, 실행 절차 포함, 고객사 규모/산업/과업 맥락 명시
|
||||||
|
|
||||||
|
### 9.2 유형별 기준
|
||||||
|
|
||||||
|
| 유형 | 기준 |
|
||||||
|
|------|------|
|
||||||
|
| 제안서·보고서 | Executive Summary 우선, 문제 정의 → 데이터 근거 → 실행안 → KPI |
|
||||||
|
| 교육 콘텐츠 | 실무 적용 템플릿, 단계별 실행 가이드, 체크리스트 포함 |
|
||||||
|
| 블로그·매거진 | 진단형 또는 가이드형, 실무 관점 유지, SEO 키워드 반영 |
|
||||||
|
| 사례 연구 | 산업·규모·과제 맥락 명시, 문제-해결-성과 구조 |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 10. 브랜드 금지 항목
|
||||||
|
|
||||||
|
- 과장된 약속
|
||||||
|
- 보장형 표현 ("반드시", "확실히", "무조건")
|
||||||
|
- 기술 그 자체를 성과처럼 포장하는 표현
|
||||||
|
- 복잡한 방법론을 과시하는 설명
|
||||||
|
- 대기업 레퍼런스만을 앞세운 권위주의적 커뮤니케이션
|
||||||
|
- 경쟁사 직접 비하
|
||||||
|
- 근거 없는 낙관론
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 11. AI/LLM 활용 브랜드 기준
|
||||||
|
|
||||||
|
### 11.1 AI의 역할
|
||||||
|
|
||||||
|
분석 보조자, 전략 설계 보조자, SEO/콘텐츠 초안 작성자, 제안서/리포트 구조화 도우미, 데이터 문제 정의 파트너
|
||||||
|
|
||||||
|
### 11.2 AI 응답 기본 구조
|
||||||
|
|
||||||
|
1. 문제 진단 → 2. 데이터 근거 → 3. 해결 방안 → 4. 예상 성과
|
||||||
|
|
||||||
|
### 11.3 AI 필수 원칙
|
||||||
|
|
||||||
|
- 추상적 조언 대신 실행 가능한 답변 제공
|
||||||
|
- 가능하면 KPI, 수치, 구조 포함
|
||||||
|
- 비즈니스 목표와 연결된 분석 제안
|
||||||
|
- 데이터 한계와 가정을 명시
|
||||||
|
- 브랜드 톤(Professional / Science / Practice / Outcome) 유지
|
||||||
|
|
||||||
|
### 11.4 금지 응답 패턴
|
||||||
|
|
||||||
|
"무조건 좋아질 것입니다", "반드시 성과를 보장합니다", "요즘은 다 이렇게 합니다", "정말 엄청난 인사이트입니다"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 12. 관련 문서
|
||||||
|
|
||||||
|
| 문서 | 내용 |
|
||||||
|
|------|------|
|
||||||
|
| [00_SERVICE-MAP.md](00_SERVICE-MAP.md) | 서비스 맵 마스터 문서 (v2.0) |
|
||||||
|
| [01_ALIGNMENT-ANALYSIS.md](01_ALIGNMENT-ANALYSIS.md) | 브랜드 가이드 ↔ 서비스 맵 정합성 분석 |
|
||||||
|
| [03_STRATEGIC-KEYWORDS.md](03_STRATEGIC-KEYWORDS.md) | 전략 키워드 셋 |
|
||||||
|
| [04_TARGET-TOUCHPOINTS.md](04_TARGET-TOUCHPOINTS.md) | 타겟 오디언스별 접점 설계 |
|
||||||
|
| [05_VALUE-PROPOSITIONS.md](05_VALUE-PROPOSITIONS.md) | 모듈별 고객 가치 제안 |
|
||||||
|
| [06_PRICING-PACKAGES.md](06_PRICING-PACKAGES.md) | 가격 패키지 설계 |
|
||||||
|
| [07_WEBSITE-ALIGNMENT.md](07_WEBSITE-ALIGNMENT.md) | 홈페이지 구조 통일 방안 |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Changelog
|
||||||
|
|
||||||
|
| 버전 | 날짜 | 변경 내용 |
|
||||||
|
|------|------|-----------|
|
||||||
|
| v1.0 | 2026-03 | 초안 (브랜드 코어, 톤앤매너, AI 기준) |
|
||||||
|
| v1.1 | 2026-03-07 | 서비스 맵 v2.0 기준 전면 재편: 3-Phase × 17모듈 아키텍처 통일, 4대 카테고리 정의 정합, 2-Tier 타겟 오디언스 확장, 브랜드 내러티브 추가, Voice Examples 추가, 카테고리별 메시지 추가, 관련 문서 참조 체계 구축 |
|
||||||
|
| v1.2 | 2026-03-09 | 브랜드 플랫폼 체계 신설: Brand Vision 재정의, Brand Position 업데이트, 4차원 Brand Dimensions 수립, Brand Promise(Heritage Promise 7가지 약속 통합), Brand Character("지혜로운 상담 마케팅 주치의") 정의, 포지셔닝 문구 현행화, 의료 클리닉 은유→마케팅 클리닉 전환 |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 향후 확장 방향
|
||||||
|
|
||||||
|
- [ ] Brand Voice Examples 확장 (채널별·유형별 예문 30개+)
|
||||||
|
- [ ] Service Playbooks 분리 (SEO, GA4/GTM, Proposal, Dashboard)
|
||||||
|
- [ ] AI Training Kit (Master Prompt 최종본, JSONL 데이터셋, Negative Examples, Agent Role Prompt)
|
||||||
|
- [ ] Case Study Library 구축 (산업별 문제-해결-성과 구조)
|
||||||
|
- [ ] Visual Identity Guide (로고, 색상, 타이포그래피, 문서 양식)
|
||||||
444
uploads/BRAND-GUIDE-v1.3.md
Normal file
444
uploads/BRAND-GUIDE-v1.3.md
Normal file
@@ -0,0 +1,444 @@
|
|||||||
|
# D.intelligence Brand Guide v1.3
|
||||||
|
|
||||||
|
> **최종 업데이트**: 2026-05-17
|
||||||
|
> **기준 문서**: [00_SERVICE-MAP.md](../03_Services/00_SERVICE-MAP.md) v2.0
|
||||||
|
> **단일 진실(Single Source of Truth)**: [knowledge-base/canon/brand-canon.md](../knowledge-base/canon/brand-canon.md) v1.0 APPROVED
|
||||||
|
> **이전 버전**: [99_Archive/Brand/legacy-guides/BRAND-GUIDE-v1.2-archived-20260517.md](../99_Archive/Brand/legacy-guides/BRAND-GUIDE-v1.2-archived-20260517.md)
|
||||||
|
> **v1.3 변경 내역**: §2.7 Experiential 재정의 (SMART Marketing Intelligence) / §2.9 Brand Character 'D.intel=마케팅 과학자' 재정립 + OurDigital 분리 / §3.4 SMART Marketing Intelligence / §6.3 MD·BVT 메시지 교체 / §10 외국어 직역 금지 추가 / §11.5 9개 dintel-* Skill 적용 의무 신설
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 1. 문서 목적
|
||||||
|
|
||||||
|
이 문서는 D.intelligence의 브랜드 정체성, 메시지 체계, 톤앤매너, 서비스 아키텍처, AI 활용 기준을 통합한 내부 운영 기준서다.
|
||||||
|
|
||||||
|
**용도**
|
||||||
|
|
||||||
|
- 대외 커뮤니케이션의 일관성 확보
|
||||||
|
- 제안서, 리포트, 콘텐츠, AI 응답 품질의 표준화
|
||||||
|
- 서비스 소개·영업·마케팅 자료의 기준
|
||||||
|
- LLM, Agent, 자동화 시스템의 브랜드 기준 문서
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 2. 브랜드 코어
|
||||||
|
|
||||||
|
### 2.1 Mission
|
||||||
|
|
||||||
|
데이터 기반 의사결정으로 기업의 지속가능한 성장을 실현하는 전문 파트너
|
||||||
|
|
||||||
|
### 2.2 Vision
|
||||||
|
|
||||||
|
마케팅 과학과 데이터 리터러시의 전도사
|
||||||
|
|
||||||
|
### 2.3 Tagline
|
||||||
|
|
||||||
|
**Analysis, Treatment & Growth**
|
||||||
|
|
||||||
|
### 2.4 Internal Motto
|
||||||
|
|
||||||
|
**Think Forward**
|
||||||
|
|
||||||
|
### 2.5 Core Values
|
||||||
|
|
||||||
|
| Value | 의미 |
|
||||||
|
|-------|------|
|
||||||
|
| **Science** | 과학적 방법론, 검증, 데이터 기반 판단 |
|
||||||
|
| **Practice** | 실행 가능하고 현실적인 해법 |
|
||||||
|
| **Outcome** | 측정 가능한 성과 중심 |
|
||||||
|
| **Insights** | 복잡한 문제를 분명한 인사이트로 전환 |
|
||||||
|
|
||||||
|
### 2.6 Brand Position
|
||||||
|
|
||||||
|
**AI와 데이터 기반 마케팅 혁신의 파트너**
|
||||||
|
|
||||||
|
### 2.7 Brand Dimensions (4차원 브랜드 구조)
|
||||||
|
|
||||||
|
| 차원 | 정의 | 핵심 표현 |
|
||||||
|
|------|------|----------|
|
||||||
|
| **Functional** | 데이터 기반 진단-처방-성장 프레임워크를 통해 측정 가능한 성과를 설계한다 | Analysis, Treatment & Growth |
|
||||||
|
| **Emotional** | 함께 문제를 풀어가는 동반자로서, 고객과 같은 방향을 바라본다 | Think Forward |
|
||||||
|
| **Experiential** | 과학적인 마케팅 문제 해결 — 성과 중심, 데이터 기반, 지속 성장 | **SMART Marketing Intelligence** |
|
||||||
|
| **Social** | 누구나 활용 가능한 보편적 데이터 & AI 역량의 전도사 | Data Literacy for All |
|
||||||
|
|
||||||
|
### 2.8 Brand Promise
|
||||||
|
|
||||||
|
**"진단의 정확함으로 시작하여, 성장의 구조를 함께 만듭니다."**
|
||||||
|
|
||||||
|
#### Heritage Promise — 7가지 약속 (2011, D&A)
|
||||||
|
|
||||||
|
D.intelligence의 창업 철학이자 브랜드 가치의 근간이 되는 약속이다.
|
||||||
|
|
||||||
|
1. 사람과 사람의 이야기를 이어갑니다
|
||||||
|
2. 사람의 얼굴을 한 브랜드를 그립니다
|
||||||
|
3. 진실된 고객 가치만을 이야기합니다
|
||||||
|
4. 조심스럽게 듣고 담백하게 말합니다
|
||||||
|
5. 큰 성공보다는 작은 믿음을 약속합니다
|
||||||
|
6. 새로운 도전과 실패를 두려워하지 않습니다
|
||||||
|
7. 사람의 온기와 향기를 남깁니다
|
||||||
|
|
||||||
|
> 이 7가지 약속은 현재의 Core Values(Science, Practice, Outcome, Insights)와 톤앤매너("조심스럽게 듣고 담백하게")의 원형이며, Brand Character의 인간적 깊이를 부여하는 근간이다.
|
||||||
|
|
||||||
|
### 2.9 Brand Character
|
||||||
|
|
||||||
|
**성과중심의 데이터 기반 마케팅 과학자**
|
||||||
|
*(Outcome-focused Data-driven Marketing Scientist)*
|
||||||
|
|
||||||
|
엄밀한 가설 검증, 측정 가능한 KPI, 재현 가능한 방법론으로 마케팅 성과를 설계하는 분석가형 전문가. 추측과 일반론 대신 데이터·실험·구조로 말한다.
|
||||||
|
|
||||||
|
| 특성 | 표현 | Heritage Promise / Core Values 연결 |
|
||||||
|
|------|------|---------------------------------|
|
||||||
|
| 과학적 엄정성 | 가설 → 측정 → 검증 → 개선의 순환을 일관되게 적용한다 | Science (Core Value) |
|
||||||
|
| 성과 지향성 | 측정 가능한 KPI 변화로 결과를 보여준다 | Outcome (Core Value) |
|
||||||
|
| 실행 가능성 | 추상적 권고가 아닌 즉시 적용 가능한 처방을 제시한다 | Practice (Core Value) |
|
||||||
|
| 구조적 사고 | 단편적 답변이 아닌 의사결정 프레임워크를 설계한다 | Insights (Core Value) |
|
||||||
|
| 정직한 한계 표시 | 데이터·가정의 한계를 분명히 명시한다 | 약속 #3 "진실된 고객 가치만을 이야기합니다" |
|
||||||
|
|
||||||
|
#### 2.9.1 OurDigital은 별도 브랜드 시스템
|
||||||
|
|
||||||
|
> ⚠️ 본 가이드는 **D.intelligence 전용**. OurDigital 브랜드 정체성·캐릭터·톤·자산은 별도 프로젝트에서 독립 관리.
|
||||||
|
|
||||||
|
- "지혜로운 상담 마케팅 주치의" 캐릭터는 **OurDigital로 이관** (2026-05-17 결정)
|
||||||
|
- D.intelligence(엔터프라이즈) 콘텐츠는 "마케팅 과학자" 톤 유지
|
||||||
|
- OurDigital(SMB·코칭·트레이닝) 콘텐츠는 OurDigital 별도 brand 시스템 참조
|
||||||
|
- 두 브랜드 cross-reference는 `knowledge-base/canon/fact-sheet.md §1` 법인 구조 참조
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 3. 브랜드 내러티브
|
||||||
|
|
||||||
|
### 3.1 왜 D.intelligence가 존재하는가
|
||||||
|
|
||||||
|
많은 기업이 데이터를 수집하지만, 그 데이터로 올바른 의사결정을 내리지 못한다. 마케팅 예산은 집행되지만 성과의 구조가 보이지 않고, 채널은 늘어나지만 KPI와 측정 체계가 정렬되지 않는다.
|
||||||
|
|
||||||
|
D.intelligence는 이 간극을 메운다. 데이터를 단순히 '보는 것'이 아니라 '진단하고, 처방하고, 성장으로 연결하는 것'이 우리의 역할이다.
|
||||||
|
|
||||||
|
### 3.2 브랜드 정의
|
||||||
|
|
||||||
|
D.intelligence는 디지털 마케팅과 데이터 분석의 언어를 연결하여, 기업이 더 정확하게 측정하고, 더 명확하게 판단하고, 더 지속적으로 성장하도록 돕는 **Marketing Intelligence 파트너**다.
|
||||||
|
|
||||||
|
- 단순 대행사가 아니라 **진단-설계-실행-최적화**를 함께 하는 파트너
|
||||||
|
- 단순 리포터가 아니라 **의사결정을 돕는 분석가이자 전략가**
|
||||||
|
- 단순 데이터 기술자가 아니라 **성과를 설계하는 비즈니스 분석 파트너**
|
||||||
|
|
||||||
|
### 3.3 포지셔닝
|
||||||
|
|
||||||
|
**AI와 데이터 기반 마케팅 혁신의 파트너**
|
||||||
|
|
||||||
|
대기업 수준의 데이터·AI 역량을 중견기업과 스타트업에 맞춤 실행력으로 전달한다.
|
||||||
|
|
||||||
|
### 3.4 핵심 차별점
|
||||||
|
|
||||||
|
- 과학적 진단-처방-성장 프레임워크를 마케팅에 적용한 독자적 **SMART Marketing Intelligence** 모델
|
||||||
|
- 진단으로 끝나지 않고 실행(Treatment)과 성장(Growth)까지 연결
|
||||||
|
- Brand Visibility Treatment(T6)라는 독자 서비스 영역 보유
|
||||||
|
- 데이터 분석과 마케팅 전략의 양방향 전문성
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 4. 서비스 아키텍처
|
||||||
|
|
||||||
|
### 4.1 3-Phase 프레임워크
|
||||||
|
|
||||||
|
D.intelligence의 서비스는 고객의 디지털 성장 단계에 맞춘 3-Phase 프레임워크로 구성된다.
|
||||||
|
|
||||||
|
| Phase | 명칭 | 목적 | 모듈 |
|
||||||
|
|-------|------|------|------|
|
||||||
|
| **Analysis** | 진단 | 현재 상태를 정확하게 진단하고 데이터 근거를 확보 | A1-A6 (6개) |
|
||||||
|
| **Treatment** | 처방 | 진단 결과를 기반으로 구체적 개선·최적화 설계·실행 | T1-T7 (7개) |
|
||||||
|
| **Growth** | 성장 | 지속적 성장을 위한 장기 파트너십과 성과 관리 | G1-G4 (4개) |
|
||||||
|
|
||||||
|
### 4.2 4대 서비스 카테고리
|
||||||
|
|
||||||
|
각 모듈은 아래 4대 서비스 카테고리(태그) 중 하나 이상에 태깅된다.
|
||||||
|
|
||||||
|
| 태그 | 카테고리명 | 정의 |
|
||||||
|
|------|-----------|------|
|
||||||
|
| `DI` | Data Intelligence | 비즈니스 목표에 맞는 데이터를 정의하고, 수집·검증·분석 체계를 수립 |
|
||||||
|
| `MD` | Measurement Design | 비즈니스 성과를 측정할 수 있는 지표 체계, 이벤트 구조, 리포팅 체계 설계 |
|
||||||
|
| `MPO` | Marketing Performance Optimization | 채널·캠페인·콘텐츠·랜딩페이지의 성과를 분석하고 최적화 |
|
||||||
|
| `BVT` | Brand Visibility Treatment | SEO, 콘텐츠 구조화, 검색 노출 최적화, 디지털 자산 가시성 강화 |
|
||||||
|
|
||||||
|
### 4.3 서비스 모듈 일람
|
||||||
|
|
||||||
|
#### Analysis (진단)
|
||||||
|
|
||||||
|
| 코드 | 서비스명 | 주요 태그 |
|
||||||
|
|------|---------|-----------|
|
||||||
|
| A1 | 비즈니스·브랜드 진단 | MPO |
|
||||||
|
| A2 | 고객·소비자 분석 | MPO |
|
||||||
|
| A3 | 데이터 분석 — 웹·앱 | DI, MD, BVT |
|
||||||
|
| A4 | 디지털 마케팅 진단 | MPO, BVT |
|
||||||
|
| A5 | 퍼포먼스 마케팅 진단 | MPO, MD |
|
||||||
|
| A6 | 운영·관리 진단 | DI |
|
||||||
|
|
||||||
|
#### Treatment (처방)
|
||||||
|
|
||||||
|
| 코드 | 서비스명 | 주요 태그 |
|
||||||
|
|------|---------|-----------|
|
||||||
|
| T1 | 브랜드 스토리텔링 & 가이드 | BVT |
|
||||||
|
| T2 | 고객 접점 경험 최적화 | MPO |
|
||||||
|
| T3 | 디지털 자산 통합관리 | DI, MD |
|
||||||
|
| T4 | 콘텐츠 마케팅 | MPO |
|
||||||
|
| T5 | 광고·전환 최적화 | MPO |
|
||||||
|
| **T6** | **Brand Visibility Treatment** | **BVT** |
|
||||||
|
| T7 | 운영 시스템·자동화 | DI |
|
||||||
|
|
||||||
|
> T6 Brand Visibility Treatment는 D.intelligence의 시그니처 서비스이다. SEO, 콘텐츠 구조화, 검색 노출 최적화, AEO/GEO를 포괄하며 다른 모듈과 가장 높은 연관성을 가진다.
|
||||||
|
|
||||||
|
#### Growth (성장)
|
||||||
|
|
||||||
|
| 코드 | 서비스명 | 주요 태그 |
|
||||||
|
|------|---------|-----------|
|
||||||
|
| G1 | 퍼포먼스 마케팅 | MPO |
|
||||||
|
| G2 | 콘텐츠 마케팅 대행 | MPO, BVT |
|
||||||
|
| G3 | 모니터링·이슈관리 | MD, BVT |
|
||||||
|
| G4 | 연간 계약·운영 | MPO |
|
||||||
|
|
||||||
|
### 4.4 부가 서비스
|
||||||
|
|
||||||
|
| 서비스 | 포지셔닝 | 서비스 맵 연결 |
|
||||||
|
|--------|---------|---------------|
|
||||||
|
| 1Day Clinic | Quick Diagnosis — Analysis Phase 경량 버전 | A3, A4, A5 간이 |
|
||||||
|
| Courses | Capability Building — Data Literacy 교육 | T4 교육 요소, A6→T3 |
|
||||||
|
| Magazine D. | Insights Channel — 마케팅 인사이트 매거진 | 콘텐츠 마케팅 |
|
||||||
|
| Newsletter | Regular Updates — 정기 뉴스레터 | 리드 너처링 |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 5. 타겟 오디언스
|
||||||
|
|
||||||
|
### 5.1 Tier 1: 의사결정자 (구매자)
|
||||||
|
|
||||||
|
| 페르소나 | 기업 규모 | Pain Point |
|
||||||
|
|---------|----------|------------|
|
||||||
|
| CMO / 마케팅 본부장 | 연매출 100-500억 중견기업 | 마케팅 투자 대비 성과 측정이 안 됨, 채널별 ROI 불분명 |
|
||||||
|
| CSO / 전략기획 임원 | Series A-C 스타트업 | 데이터 기반 전략 수립 역량 부족, 디지털 전환 방향 불확실 |
|
||||||
|
| 스타트업 대표 / 공동창업자 | — | 한정된 예산으로 최대 성과, 빠른 실행-검증 필요 |
|
||||||
|
|
||||||
|
### 5.2 Tier 2: 실무 사용자
|
||||||
|
|
||||||
|
마케팅 책임자, 사업주·창업자, eCommerce 책임자, 브랜드 담당자, 디지털 마케팅 담당자, 콘텐츠 마케팅 담당자, 데이터 분석가, Growth Manager, 커뮤니케이션 담당자
|
||||||
|
|
||||||
|
> 상세 페르소나별 Touch Point, Landing Page, CTA 설계는 [04_TARGET-TOUCHPOINTS.md](04_TARGET-TOUCHPOINTS.md) 참조
|
||||||
|
|
||||||
|
### 5.3 고객이 D.intelligence를 필요로 하는 상황
|
||||||
|
|
||||||
|
- 데이터는 쌓이지만 해석이 안 되는 경우
|
||||||
|
- 마케팅 성과는 집행되지만 구조가 없는 경우
|
||||||
|
- 채널은 많은데 KPI와 측정 체계가 정렬되지 않은 경우
|
||||||
|
- SEO, GA4, GTM, BigQuery, 대시보드가 따로 노는 경우
|
||||||
|
- 실행 조직은 있으나 전략과 기준이 없는 경우
|
||||||
|
- 검색에 우리 회사가 안 나와서 콘텐츠 효과가 없는 경우
|
||||||
|
- 광고비는 쓰는데 매출이 안 늘어나는 경우
|
||||||
|
- 랜딩 페이지 전환율이 낮고 원인을 모르는 경우
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 6. 브랜드 메시지 프레임워크
|
||||||
|
|
||||||
|
### 6.1 표준 구조
|
||||||
|
|
||||||
|
**문제 진단 → 데이터 근거 → 해결 방안 → 예상 성과**
|
||||||
|
|
||||||
|
### 6.2 메시지 작성 원칙
|
||||||
|
|
||||||
|
- 추상적 표현보다 구체적 지표를 우선한다.
|
||||||
|
- 방법론 설명보다 실행 가능성을 우선한다.
|
||||||
|
- '무엇이 문제인가'보다 '어떻게 개선할 것인가'를 더 분명하게 말한다.
|
||||||
|
- 가능하면 Before / After 혹은 KPI 변화를 함께 제시한다.
|
||||||
|
|
||||||
|
### 6.3 카테고리별 메시지
|
||||||
|
|
||||||
|
| 카테고리 | 고객 대상 메시지 |
|
||||||
|
|---------|----------------|
|
||||||
|
| DI | "흩어진 데이터를 하나의 의사결정 체계로 연결합니다" |
|
||||||
|
| MD | "무엇을 측정하고, 성과 기준을 어떻게 설정하며, 어떤 데이터 소스를 활용할지 안내합니다." |
|
||||||
|
| MPO | "실행 가능한 최적화로, 데이터가 말하는 성과를 실현합니다" |
|
||||||
|
| BVT | "브랜드가 어떻게 드러나고 이해되는지를 최적화합니다." |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 7. 톤 & 매너 가이드
|
||||||
|
|
||||||
|
### 7.1 기본 톤
|
||||||
|
|
||||||
|
Professional, Science-driven, Practice-oriented, Outcome-focused, Calm but confident
|
||||||
|
|
||||||
|
### 7.2 문장 스타일
|
||||||
|
|
||||||
|
- 논리적이고 단정한 문장
|
||||||
|
- 과장된 수사 금지
|
||||||
|
- 전문 용어는 쓰되, 반드시 풀어서 설명
|
||||||
|
- 장황한 미사여구보다 프레임워크와 수치 중심
|
||||||
|
|
||||||
|
### 7.3 Voice Examples
|
||||||
|
|
||||||
|
#### 좋은 표현
|
||||||
|
|
||||||
|
| 유형 | 예문 |
|
||||||
|
|------|------|
|
||||||
|
| 진단형 | "현재 구조상 가장 큰 병목은 전환 추적 이벤트의 부재입니다." |
|
||||||
|
| 데이터형 | "현 데이터 품질을 전제로 하면, 15-20% 범위의 CAC 절감 가능성이 있습니다." |
|
||||||
|
| 전략형 | "단기적으로는 GA4 이벤트 재설계, 중기적으로는 대시보드 체계 구축이 타당합니다." |
|
||||||
|
| 제안형 | "이 경우 핵심 지표는 채널별 전환율과 ROAS로 보아야 합니다." |
|
||||||
|
| CTA형 | "채널별 CAC 구조를 재설계하여 3개월 내 비효율 매체비 15-20% 절감 가능성을 진단합니다." |
|
||||||
|
|
||||||
|
#### 나쁜 표현 (금지)
|
||||||
|
|
||||||
|
| 유형 | 예문 | 이유 |
|
||||||
|
|------|------|------|
|
||||||
|
| 과장 | "마케팅 효율을 획기적으로 높여드립니다." | 근거 없는 과장 |
|
||||||
|
| 보장 | "반드시 매출이 올라갑니다." | 성과 보장 표현 |
|
||||||
|
| 모호 | "요즘은 다 이렇게 합니다." | 근거 없는 일반화 |
|
||||||
|
| 과시 | "저희만의 독보적인 AI 기술이 있습니다." | 기술 과시 |
|
||||||
|
| 권위 | "국내 Top 기업들이 사용합니다." | 레퍼런스 의존 권위주의 |
|
||||||
|
|
||||||
|
### 7.4 채널별 톤 조정
|
||||||
|
|
||||||
|
| 채널 | 톤 특성 | 콘텐츠 포커스 |
|
||||||
|
|------|---------|-------------|
|
||||||
|
| 웹사이트 | 신뢰·전문 | 문제 해결 방식 중심, 서비스 → 성과 연결 |
|
||||||
|
| LinkedIn / 블로그 | 인사이트·실무 | 업계 인사이트 + 적용 방법 중심 |
|
||||||
|
| 제안서 | 구조·논리 | Executive Summary 우선, 문제→근거→실행안→KPI |
|
||||||
|
| 세미나 / 웨비나 | 진단·참여 | 참가자가 가져갈 수 있는 프레임워크 제공 |
|
||||||
|
| 뉴스레터 | 간결·인사이트 | 핵심 수치 + 실무 시사점 |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 8. 문제 해결 프레임워크
|
||||||
|
|
||||||
|
### 8.1 Core Framework
|
||||||
|
|
||||||
|
1. **Problem Diagnosis** — 실제 문제와 증상을 구분하고, 비즈니스 목표·제약조건·병목을 확인한다.
|
||||||
|
2. **Data Evidence** — 데이터, 지표, 패턴, 비교 사례를 근거로 문제를 설명한다. 데이터가 불완전할 경우 가정과 한계를 명시한다.
|
||||||
|
3. **Strategic Treatment** — 실행 가능한 대안을 제시한다. 우선순위, 난이도, 기대효과를 함께 정리한다.
|
||||||
|
4. **Expected Growth Impact** — 예상되는 KPI 변화와 성과 범위를 제시한다. 조건별 결과 차이를 설명한다.
|
||||||
|
|
||||||
|
### 8.2 실무 적용 영역
|
||||||
|
|
||||||
|
SEO Audit & Treatment, GA4/GTM/BigQuery 기반 분석 체계 설계, 마케팅 성과 측정 시스템 구축, 디지털 채널 및 자산 진단, 콘텐츠 구조화 및 검색 가시성 개선, 대시보드/리포팅 체계 설계
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 9. 콘텐츠 제작 기준
|
||||||
|
|
||||||
|
### 9.1 공통 기준
|
||||||
|
|
||||||
|
Case Study 중심, Before/After 수치 포함, 실행 절차 포함, 고객사 규모/산업/과업 맥락 명시
|
||||||
|
|
||||||
|
### 9.2 유형별 기준
|
||||||
|
|
||||||
|
| 유형 | 기준 |
|
||||||
|
|------|------|
|
||||||
|
| 제안서·보고서 | Executive Summary 우선, 문제 정의 → 데이터 근거 → 실행안 → KPI |
|
||||||
|
| 교육 콘텐츠 | 실무 적용 템플릿, 단계별 실행 가이드, 체크리스트 포함 |
|
||||||
|
| 블로그·매거진 | 진단형 또는 가이드형, 실무 관점 유지, SEO 키워드 반영 |
|
||||||
|
| 사례 연구 | 산업·규모·과제 맥락 명시, 문제-해결-성과 구조 |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 10. 브랜드 금지 항목
|
||||||
|
|
||||||
|
- 과장된 약속
|
||||||
|
- 보장형 표현 ("반드시", "확실히", "무조건")
|
||||||
|
- 기술 그 자체를 성과처럼 포장하는 표현
|
||||||
|
- 복잡한 방법론을 과시하는 설명
|
||||||
|
- 대기업 레퍼런스만을 앞세운 권위주의적 커뮤니케이션
|
||||||
|
- 경쟁사 직접 비하
|
||||||
|
- 근거 없는 낙관론
|
||||||
|
- **외국어의 직접적·기계적 번역 표현 사용** (예: audit → ~~감사~~ ✗ → **진단** ✓ / framework → ~~뼈대~~ ✗ → **프레임워크** ✓ / insight → ~~통찰력~~ ✗ → **인사이트** ✓)
|
||||||
|
|
||||||
|
> 직역 회피 원칙: 마케팅·데이터 분야 영문 용어는 의미 맥락에 따라 (1) 이미 정착된 외래어 표기를 사용하거나, (2) 의미를 풀어 쓴 한국어로 옮기되, 사전적 1:1 직역은 피한다. 표준 번역 사례는 [knowledge-base/glossary/translation-standards.md](../knowledge-base/glossary/translation-standards.md) 참조.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 11. AI/LLM 활용 브랜드 기준
|
||||||
|
|
||||||
|
### 11.1 AI의 역할
|
||||||
|
|
||||||
|
분석 보조자, 전략 설계 보조자, SEO/콘텐츠 초안 작성자, 제안서/리포트 구조화 도우미, 데이터 문제 정의 파트너
|
||||||
|
|
||||||
|
### 11.2 AI 응답 기본 구조
|
||||||
|
|
||||||
|
1. 문제 진단 → 2. 데이터 근거 → 3. 해결 방안 → 4. 예상 성과
|
||||||
|
|
||||||
|
### 11.3 AI 필수 원칙
|
||||||
|
|
||||||
|
- 추상적 조언 대신 실행 가능한 답변 제공
|
||||||
|
- 가능하면 KPI, 수치, 구조 포함
|
||||||
|
- 비즈니스 목표와 연결된 분석 제안
|
||||||
|
- 데이터 한계와 가정을 명시
|
||||||
|
- 브랜드 톤(Professional / Science / Practice / Outcome) 유지
|
||||||
|
|
||||||
|
### 11.4 금지 응답 패턴
|
||||||
|
|
||||||
|
"무조건 좋아질 것입니다", "반드시 성과를 보장합니다", "요즘은 다 이렇게 합니다", "정말 엄청난 인사이트입니다"
|
||||||
|
|
||||||
|
### 11.5 D.intelligence Skill/Agent 적용 의무
|
||||||
|
|
||||||
|
D.intelligence Agent Corps의 모든 Skill·Sub-agent·Workflow는 본 가이드와 `knowledge-base/canon/`을 **참조 의무 1순위**로 한다.
|
||||||
|
|
||||||
|
| Skill / Agent | 본 가이드 적용 영역 | 우선 참조 섹션 |
|
||||||
|
|--------------|------------------|--------------|
|
||||||
|
| `dintel-brand-guardian` (#70) | 모든 D.intelligence 콘텐츠 리뷰·검수 | §1~§11 전체, 특히 §10 No-Go List |
|
||||||
|
| `dintel-brand-editor` (#71) | Magazine D. 아티클·서비스 소개 작성 | §2.9 Character, §7 Tone, §7.3 Voice Examples, §6 Framework |
|
||||||
|
| `dintel-marketing-mgr` (#75) | LinkedIn·뉴스레터·콘텐츠 캘린더 기획 | §7.4 채널별 톤, §6.3 카테고리별 메시지 |
|
||||||
|
| `dintel-doc-secretary` | 회의록·리포트·제안서 포맷팅 | §7.4, §9 유형별 기준 |
|
||||||
|
| `dintel-service-architect` | 서비스 패키지 설계·모듈 추천 | §3 Narrative, §4 서비스 아키텍처 |
|
||||||
|
| `dintel-quotation-mgr` | 견적서·계약 가격 산출 | §7 정중·정확 톤, `knowledge-base/canon/fact-sheet.md` 법인 정보 |
|
||||||
|
| `dintel-account-mgr` | 클라이언트 관계 관리·미팅 준비 | §7.4, [Voice Examples 확장](../knowledge-base/canon/brand-canon.md#§64-콘텐츠-유형별-확장-예문) |
|
||||||
|
| `dintel-backoffice-mgr` | 인보이스·NDA·계약·HR 문서 | §7 정중·정확 톤, fact-sheet §2·§3 |
|
||||||
|
| `dintel-skill-update` | 본 가이드·canon 변경 시 Skill 간 일관성 propagate | 본 가이드 갱신 트리거 |
|
||||||
|
|
||||||
|
**적용 규칙**:
|
||||||
|
1. 본 가이드 갱신 시 영향받는 Skill 목록 점검 → `dintel-skill-update` 트리거
|
||||||
|
2. Skill·Sub-agent 신규 작성 시 본 가이드 §1~§11 참조 의무 명시
|
||||||
|
3. AI 자동 생성물은 본 가이드 통과 시까지 Draft 표시
|
||||||
|
4. Brand Guardian Skill이 본 가이드 위반 발견 시 즉시 `knowledge-base/gotcha/`에 기록 → 재발 방지
|
||||||
|
|
||||||
|
> AI/LLM 활용 시 본 가이드 외에 `knowledge-base/canon/fact-sheet.md`(사실관계), `service-architecture.md`(서비스), `naming-conventions.md`(표기), `gotcha/`(교정 사례) 일괄 참조 권장.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 12. 관련 문서
|
||||||
|
|
||||||
|
| 문서 | 내용 |
|
||||||
|
|------|------|
|
||||||
|
| ⭐ [knowledge-base/canon/](../knowledge-base/canon/) | **단일 진실(SoT) 공간 — 본 가이드 외 모든 D.intelligence 표준** |
|
||||||
|
| ⭐ [canon/fact-sheet.md](../knowledge-base/canon/fact-sheet.md) | 회사·법인·인물·연혁 사실관계 |
|
||||||
|
| ⭐ [canon/service-architecture.md](../knowledge-base/canon/service-architecture.md) | A-T-G 17 모듈 + 4 카테고리 + 부가 서비스 (Courses → OurDigital 이관 결정 포함) |
|
||||||
|
| ⭐ [canon/naming-conventions.md](../knowledge-base/canon/naming-conventions.md) | 명칭·표기·파일명·도메인·이메일·Git 종합 규칙 |
|
||||||
|
| ⭐ [canon/open-questions.md](../knowledge-base/canon/open-questions.md) | 잔여 미확정 항목 추적 |
|
||||||
|
| [gotcha/01_outdated-facts.md](../knowledge-base/gotcha/01_outdated-facts.md) | 반복 교정 사례 10건 |
|
||||||
|
| [glossary/translation-standards.md](../knowledge-base/glossary/translation-standards.md) | 한·영 번역 표준 |
|
||||||
|
| [00_SERVICE-MAP.md](../03_Services/00_SERVICE-MAP.md) | 서비스 맵 마스터 문서 (v2.0) — canon/service-architecture.md 참조 |
|
||||||
|
| [ALIGNMENT-ANALYSIS.md](../01_Strategy/ALIGNMENT-ANALYSIS.md) | 브랜드 가이드 ↔ 서비스 맵 정합성 분석 |
|
||||||
|
| [STRATEGIC-KEYWORDS.md](../01_Strategy/STRATEGIC-KEYWORDS.md) | 전략 키워드 셋 |
|
||||||
|
| [TARGET-TOUCHPOINTS.md](../01_Strategy/TARGET-TOUCHPOINTS.md) | 타겟 오디언스별 접점 설계 |
|
||||||
|
| [VALUE-PROPOSITIONS.md](../01_Strategy/VALUE-PROPOSITIONS.md) | 모듈별 고객 가치 제안 |
|
||||||
|
| [PRICING-PACKAGES.md](../01_Strategy/PRICING-PACKAGES.md) | 가격 패키지 설계 |
|
||||||
|
| [WEBSITE-ALIGNMENT.md](../01_Strategy/WEBSITE-ALIGNMENT.md) | 홈페이지 구조 통일 방안 |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Changelog
|
||||||
|
|
||||||
|
| 버전 | 날짜 | 변경 내용 |
|
||||||
|
|------|------|-----------|
|
||||||
|
| v1.0 | 2026-03 | 초안 (브랜드 코어, 톤앤매너, AI 기준) |
|
||||||
|
| v1.1 | 2026-03-07 | 서비스 맵 v2.0 기준 전면 재편: 3-Phase × 17모듈 아키텍처 통일, 4대 카테고리 정의 정합, 2-Tier 타겟 오디언스 확장, 브랜드 내러티브 추가, Voice Examples 추가, 카테고리별 메시지 추가, 관련 문서 참조 체계 구축 |
|
||||||
|
| v1.2 | 2026-03-09 | 브랜드 플랫폼 체계 신설: Brand Vision 재정의, Brand Position 업데이트, 4차원 Brand Dimensions 수립, Brand Promise(Heritage Promise 7가지 약속 통합), Brand Character("지혜로운 상담 마케팅 주치의") 정의, 포지셔닝 문구 현행화, 의료 클리닉 은유→마케팅 클리닉 전환 |
|
||||||
|
| **v1.3** | **2026-05-17** | **knowledge-base/canon/ 단일 진실 체계 구축 + 6대 변경**: ① §2.7 Experiential 재정의 (SMART Marketing **Intelligence**, Clinic은 OurDigital 자산으로 이관) ② §2.9 Brand Character 'D.intelligence = 성과중심의 데이터 기반 마케팅 과학자'로 재정립, 5개 특성 재설계, §2.9.1 OurDigital 별도 시스템 분리 명시 ③ §3.4 SMART Marketing Intelligence 모델 표기 ④ §6.3 MD·BVT 메시지 교체 ⑤ §10 외국어 직접번역 금지 추가 ⑥ §11.5 D.intelligence Skill/Agent 적용 의무 신설 (9개 dintel-* Skill 매핑 + 4개 적용 규칙) | **임명재 ✓** |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 향후 확장 방향
|
||||||
|
|
||||||
|
- [x] **knowledge-base/canon 단일 진실 체계 구축** (2026-05-17 v1.0 APPROVED — fact-sheet/brand-canon/service-architecture/naming-conventions)
|
||||||
|
- [x] **Brand Voice Examples 확장** — canon/brand-canon.md §6.4 콘텐츠 유형별 5종 + §6.5 한국어 미세 톤 가이드 추가
|
||||||
|
- [ ] Service Playbooks 분리 (SEO, GA4/GTM, Proposal, Dashboard)
|
||||||
|
- [ ] AI Training Kit (Master Prompt 최종본, JSONL 데이터셋, Negative Examples, Agent Role Prompt)
|
||||||
|
- [ ] Case Study Library 구축 (산업별 문제-해결-성과 구조)
|
||||||
|
- [ ] **Visual Identity Guide** — Design_System 2026 버전 생성 예정 (Claude Design 활용)
|
||||||
|
- [ ] OurDigital Practice 별도 brand 시스템 (Courses 이관 + 캐릭터 분리에 따른 별도 관리)
|
||||||
BIN
uploads/D.intelligence-Service-Package-v2026-05.pptx
Normal file
BIN
uploads/D.intelligence-Service-Package-v2026-05.pptx
Normal file
Binary file not shown.
BIN
uploads/D.intelligence_Design_System_2025.pptx
Normal file
BIN
uploads/D.intelligence_Design_System_2025.pptx
Normal file
Binary file not shown.
BIN
uploads/D.intelligence_logo_horizontal.png
Normal file
BIN
uploads/D.intelligence_logo_horizontal.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
1
uploads/D.intelligence_logo_horizontal.svg
Normal file
1
uploads/D.intelligence_logo_horizontal.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 6.5 KiB |
BIN
uploads/D.intelligence_logo_horizontal_white.png
Normal file
BIN
uploads/D.intelligence_logo_horizontal_white.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
BIN
uploads/D.intelligence_logo_motto.png
Normal file
BIN
uploads/D.intelligence_logo_motto.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
1
uploads/D.intelligence_logo_motto.svg
Normal file
1
uploads/D.intelligence_logo_motto.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<?xml version="1.0"?><svg id="_레이어_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 932.68 932.68"><defs></defs><g id="_레이어_1-2"><polygon class="cls-2" points="932.68 493.22 932.68 0 439.46 0 0 439.46 0 932.68 493.22 932.68 932.68 493.22"></polygon><path class="cls-1" d="m173.02,487.14s-3.25,1.37-7.66,1.37c-7.67,0-13.16-3.03-13.16-12.87v-17.41h-5.77v-8.02h5.77v-8.96h9.68v8.96h10.63v8.02h-10.63v16.47c0,4.69,2.18,5.71,5.57,5.71,2.81,0,5.56-1.3,5.56-1.3v8.02Z"></path><path class="cls-1" d="m229.43,480.06h4.33v8.02h-18.28v-8.02h4.26v-13.66c0-5.34-1.37-9.32-7.52-9.32-4.47,0-8.31,3.32-8.31,8.17v14.81h4.19v8.02h-18.2v-8.02h4.33v-36.63h-4.47v-8.02h14.15v19.36s2.68-5.85,11.71-5.85c9.83,0,13.8,6.43,13.8,15.97v15.17Z"></path><path class="cls-1" d="m263.35,480.06h4.05v8.02h-18.13v-8.02h4.4v-21.82h-4.4v-8.02h14.08v29.84Zm-.36-36.06h-11.12v-9.32h11.12v9.32Z"></path><path class="cls-1" d="m323.16,480.06h4.33v8.02h-18.28v-8.02h4.26v-13.66c0-5.34-1.37-9.32-7.52-9.32-4.48,0-8.31,3.32-8.31,8.17v14.81h4.19v8.02h-18.2v-8.02h4.33v-21.82h-4.47v-8.02h14.01v4.55s.64-1.45,2.46-2.96c1.87-1.45,4.84-2.89,9.39-2.89,9.83,0,13.8,6.43,13.8,15.97v15.17Z"></path><path class="cls-1" d="m356.72,480.06h4.05v8.02h-18.13v-8.02h4.4v-36.56h-4.4v-8.02h14.08v44.58Zm27.9,0v8.02h-10.56l-16.32-21.68,14.95-16.18h9.4v8.02h-5.21l-7.52,8.02,10.55,13.8h4.7Z"></path><path class="cls-1" d="m432.47,458.24h-4.77v-8.02h4.77v-1.59c0-9.54,6.22-13.44,13.65-13.44,4.48,0,7.52,1.02,7.52,1.02v8.16s-2.96-1.09-6.57-1.09-4.92,1.74-4.92,5.28v1.66h11.2v8.02h-11.2v21.82h5.56v8.02h-19.57v-8.02h4.33v-21.82Z"></path><path class="cls-1" d="m466.55,469.01c0-11.27,8.31-20.09,21.03-20.09s20.88,8.82,20.88,20.09-8.31,20.01-21.03,20.01-20.88-8.82-20.88-20.01Zm31.94,0c0-6.58-4.33-11.71-11.12-11.71s-10.91,5.13-10.91,11.71,4.33,11.63,11.12,11.63,10.91-5.13,10.91-11.63Z"></path><path class="cls-1" d="m537.84,455.71s.64-1.66,2.17-3.32c1.51-1.59,3.9-3.25,7.52-3.25,4.19,0,5.92,1.38,5.92,1.38v9.1s-2.1-1.94-6.29-1.94c-6.65,0-9.18,5.2-9.18,9.25v13.15h4.77v8.02h-18.78v-8.02h4.33v-21.82h-4.33v-8.02h13.87v5.49Z"></path><path class="cls-1" d="m598.37,465.32l-6.15,22.76h-13.73l-8.23-29.84h-4.34v-8.02h11.78l7.95,30.27,6.36-23.12h12.72l6.36,23.12,7.95-30.27h11.63v8.02h-4.33l-8.23,29.84h-13.59l-6.14-22.76Z"></path><path class="cls-1" d="m681.34,480.06v8.02h-13.59v-3.9s-3.31,4.77-10.69,4.77c-7.88,0-13.3-3.9-13.3-11.56s6.22-12.07,13.87-12.07c6.72,0,9.76,2.89,9.76,2.89v-3.48c0-4.98-2.02-7.44-8.74-7.44-6.36,0-10.84,3.1-10.84,3.1v-8.82s4.92-2.67,12.28-2.67c10.48,0,16.91,4.19,16.91,14.52v16.62h4.34Zm-21.18-7.59c-3.9,0-6.93,1.44-6.93,4.62s2.6,4.62,6.79,4.62c3.9,0,7.45-1.73,7.45-4.62s-3.18-4.62-7.3-4.62Z"></path><path class="cls-1" d="m711.08,455.71s.64-1.66,2.17-3.32c1.51-1.59,3.9-3.25,7.52-3.25,4.19,0,5.92,1.38,5.92,1.38v9.1s-2.1-1.94-6.29-1.94c-6.65,0-9.18,5.2-9.18,9.25v13.15h4.77v8.02h-18.78v-8.02h4.33v-21.82h-4.33v-8.02h13.87v5.49Z"></path><path class="cls-1" d="m770.23,482.8s-2.82,6.15-13.15,6.15c-11.13,0-17.85-7.81-17.85-19.8s8.17-20.02,18.5-20.02c9.61,0,12.36,4.78,12.36,4.78v-10.48h-5.21v-8.02h14.89v44.65h4.47v8.02h-14.01v-5.28Zm-10.19-2.1c5.56,0,10.11-4.11,10.11-11.63s-4.33-12.07-10.19-12.07c-6.79,0-10.77,4.92-10.77,11.78,0,7.59,3.98,11.92,10.84,11.92Z"></path></g></svg>
|
||||||
|
After Width: | Height: | Size: 3.2 KiB |
BIN
uploads/D.intelligence_logo_motto_white.png
Normal file
BIN
uploads/D.intelligence_logo_motto_white.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 96 KiB |
10
uploads/D.intelligence_logo_motto_white.svg
Normal file
10
uploads/D.intelligence_logo_motto_white.svg
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
<?xml version="1.0"?>
|
||||||
|
<svg id="_레이어_2" data-name=" 레이어 2" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 932.7 932.7">
|
||||||
|
<defs>
|
||||||
|
|
||||||
|
</defs>
|
||||||
|
<path class="cls-1" d="M487.4,457.3c-6.8,0-10.9,5.1-10.9,11.7s4.3,11.6,11.1,11.6,10.9-5.1,10.9-11.6-4.3-11.7-11.1-11.7Z"></path>
|
||||||
|
<path class="cls-1" d="M760,457c-6.8,0-10.8,4.9-10.8,11.8s4,11.9,10.8,11.9h0c5.6,0,10.1-4.1,10.1-11.6s-4.3-12.1-10.2-12.1Z"></path>
|
||||||
|
<path class="cls-1" d="M660.2,472.5h0c-3.9,0-6.9,1.4-6.9,4.6s2.6,4.6,6.8,4.6,7.5-1.7,7.5-4.6-3.2-4.6-7.3-4.6Z"></path>
|
||||||
|
<path class="cls-1" d="M439.5,0L0,439.5v493.2h493.2l439.5-439.5V0h-493.2ZM251.9,434.7h11.1v9.3h-11.1v-9.3ZM165.4,488.5c-7.7,0-13.2-3-13.2-12.9v-17.4h-5.8v-8h5.8v-9h9.7v9h10.6v8h-10.6v16.5c0,4.7,2.2,5.7,5.6,5.7s5.6-1.3,5.6-1.3v8h0s-3.2,1.4-7.7,1.4ZM233.8,488.1h-18.3v-8h4.3v-13.7c0-5.3-1.4-9.3-7.5-9.3s-8.3,3.3-8.3,8.2v14.8h4.2v8h-18.2v-8h4.3v-36.6h-4.5v-8h14.1v19.4s2.7-5.8,11.7-5.8,13.8,6.4,13.8,16v15.2h0s4.3,0,4.3,0v8ZM267.4,488.1h-18.1v-8h4.4v-21.8h-4.4v-8h14.1v29.8h4.1v8ZM327.5,488.1h-18.3v-8h4.3v-13.7c0-5.3-1.4-9.3-7.5-9.3s-8.3,3.3-8.3,8.2v14.8h4.2v8h-18.2v-8h4.3v-21.8h-4.5v-8h14v4.5s.6-1.5,2.5-3c1.9-1.5,4.8-2.9,9.4-2.9,9.8,0,13.8,6.4,13.8,16v15.2h4.3v8ZM360.8,488.1h-18.1v-8h4.4v-36.6h-4.4v-8h14.1v44.6h4.1v8ZM384.6,488.1h-10.6l-16.3-21.7,15-16.2h9.4v8h-5.2l-7.5,8,10.5,13.8h4.7v8ZM453.6,444.4s-3-1.1-6.6-1.1-4.9,1.7-4.9,5.3v1.7h11.2v8h-11.2v21.8h5.6v8h-19.6v-8h4.3v-21.8h-4.8v-8h4.8v-1.6c0-9.5,6.2-13.4,13.6-13.4s7.5,1,7.5,1v8.2ZM487.4,489c-12.7,0-20.9-8.8-20.9-20s8.3-20.1,21-20.1,20.9,8.8,20.9,20.1-8.3,20-21,20ZM553.5,459.6s-2.1-1.9-6.3-1.9c-6.7,0-9.2,5.2-9.2,9.2v13.2h4.8v8h-18.8v-8h4.3v-21.8h-4.3v-8h13.9v5.5s.6-1.7,2.2-3.3c1.5-1.6,3.9-3.2,7.5-3.2s5.9,1.4,5.9,1.4v9.1ZM630.7,458.2h-4.3l-8.2,29.8h-13.6l-6.1-22.8h0l-6.2,22.8h-13.7l-8.2-29.8h-4.3v-8h11.8l8,30.3,6.4-23.1h12.7l6.4,23.1,8-30.3h11.6v8ZM681.3,480.1v8h-13.6v-3.9s-3.3,4.8-10.7,4.8-13.3-3.9-13.3-11.6,6.2-12.1,13.9-12.1,9.8,2.9,9.8,2.9v-3.5c0-5-2-7.4-8.7-7.4s-10.8,3.1-10.8,3.1v-8.8s4.9-2.7,12.3-2.7c10.5,0,16.9,4.2,16.9,14.5v16.6h4.3ZM726.7,459.6s-2.1-1.9-6.3-1.9c-6.7,0-9.2,5.2-9.2,9.2v13.2h4.8v8h-18.8v-8h4.3v-21.8h-4.3v-8h13.9v5.5s.6-1.7,2.2-3.3c1.5-1.6,3.9-3.2,7.5-3.2s5.9,1.4,5.9,1.4v9.1ZM784.2,488.1h-14v-5.3s-2.8,6.1-13.1,6.1-17.8-7.8-17.8-19.8,8.2-20,18.5-20,12.4,4.8,12.4,4.8v-10.5h-5.2v-8h14.9v44.6h4.5v8Z"></path>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.3 KiB |
BIN
uploads/D.intelligence_logo_square.png
Normal file
BIN
uploads/D.intelligence_logo_square.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
BIN
uploads/D.intelligence_logo_vertical_white.png
Normal file
BIN
uploads/D.intelligence_logo_vertical_white.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 134 KiB |
23
uploads/D.intelligence_logo_vertical_white.svg
Normal file
23
uploads/D.intelligence_logo_vertical_white.svg
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
<?xml version="1.0"?>
|
||||||
|
<svg id="_레이어_2" data-name=" 레이어 2" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 943.5 1138">
|
||||||
|
<defs>
|
||||||
|
|
||||||
|
</defs>
|
||||||
|
<g id="_레이어_1-2" data-name=" 레이어 1-2">
|
||||||
|
<polygon class="cls-1" points="939 494.1 939 0 445 0 4.8 440.2 4.8 934.3 498.8 934.3 939 494.1"></polygon>
|
||||||
|
<path class="cls-1" d="M30.8,1080.9h8.9v17.6H0v-17.6h9.6v-47.8H0v-17.5h30.8v65.3ZM30,1002H5.7v-20.4h24.3v20.4Z"></path>
|
||||||
|
<path class="cls-1" d="M141.2,1080.9h9.5v17.6h-40v-17.6h9.3v-29.9c0-11.7-3-20.4-16.4-20.4s-18.2,7.3-18.2,17.9v32.4h9.2v17.6h-39.8v-17.6h9.5v-47.8h-9.8v-17.5h30.7v10s1.4-3.2,5.4-6.5c4.1-3.2,10.6-6.3,20.6-6.3,21.5,0,30.2,14.1,30.2,35v33.2h0Z"></path>
|
||||||
|
<path class="cls-1" d="M216.7,1096.4s-7.1,3-16.8,3c-16.8,0-28.8-6.7-28.8-28.2v-38.1h-12.6v-17.5h12.6v-19.6h21.2v19.6h23.2v17.5h-23.2v36.1c0,10.3,4.7,12.5,12.2,12.5s12.2-2.8,12.2-2.8v17.5h0Z"></path>
|
||||||
|
<path class="cls-1" d="M312.1,1056.8c0,4.4-.3,8.7-.3,8.7h-60.6c2.4,11.4,10.6,16.6,24.4,16.6,19.9,0,30.5-8.4,30.5-8.4v19.8s-11.1,6.8-31,6.8c-30.8,0-46.2-18.3-46.2-43.9s19.3-43.7,43.2-43.7,40,16.4,40,44.1ZM290.7,1050.7c-.9-10.6-7.1-19.9-19.5-19.9s-19.6,8.1-20.6,19.9h40Z"></path>
|
||||||
|
<path class="cls-1" d="M327.5,999h-9.8v-15.8h31v87.6c0,7.8,1.9,10.4,9.3,10.4s8.1-.6,8.1-.6v17.1s-6.6,1.1-14.9,1.1c-16,0-23.7-6.8-23.7-27.7v-72.1h0Z"></path>
|
||||||
|
<path class="cls-1" d="M379.2,999h-9.8v-15.8h31v87.6c0,7.8,1.9,10.4,9.3,10.4s8.1-.6,8.1-.6v17.1s-6.6,1.1-14.9,1.1c-16,0-23.7-6.8-23.7-27.7v-72.1h0Z"></path>
|
||||||
|
<path class="cls-1" d="M459.7,1080.9h8.9v17.6h-39.7v-17.6h9.6v-47.8h-9.6v-17.5h30.8v65.3h0ZM458.9,1002h-24.4v-20.4h24.4v20.4Z"></path>
|
||||||
|
<path class="cls-1" d="M547.6,1032.7s2.7,5.1,2.7,11.5c0,17.1-15.5,29.7-35.7,29.7h-.5l.2,10.3s6.6-1.8,14.5-1.8c21.3,0,34,9.5,34,26.9s-13.4,28.6-46.7,28.6-35.4-6.9-35.4-6.9v-18.7s15.2,8.1,35.3,8.1,25.9-4.7,25.9-10.6-5.1-10-22.5-10-11.7.6-16.8,1.1c-4.9.6-8.7,1.3-8.7,1.3l2-32.3c-10.6-5.2-17.5-14.7-17.5-26.9,0-18.2,15.8-30.8,35.9-30.8s16.8,3.3,16.8,3.3h29.2v17.7l-12.8-.6h0ZM498.1,1043.1c0,8.7,7.1,14.9,16.5,14.9s16.5-6.2,16.5-14.9-7.1-14.9-16.5-14.9-16.5,6.2-16.5,14.9Z"></path>
|
||||||
|
<path class="cls-1" d="M653.8,1056.8c0,4.4-.3,8.7-.3,8.7h-60.6c2.4,11.4,10.6,16.6,24.3,16.6,19.9,0,30.5-8.4,30.5-8.4v19.8s-11.1,6.8-31,6.8c-30.8,0-46.2-18.3-46.2-43.9s19.3-43.7,43.2-43.7,40,16.4,40,44.1ZM632.5,1050.7c-1-10.6-7.1-19.9-19.5-19.9s-19.6,8.1-20.6,19.9h40Z"></path>
|
||||||
|
<path class="cls-1" d="M754,1080.9h9.5v17.6h-40v-17.6h9.3v-29.9c0-11.7-3-20.4-16.5-20.4s-18.2,7.3-18.2,17.9v32.4h9.2v17.6h-39.8v-17.6h9.5v-47.8h-9.8v-17.5h30.7v10s1.4-3.2,5.4-6.5c4.1-3.2,10.6-6.3,20.6-6.3,21.5,0,30.2,14.1,30.2,35v33.2h0Z"></path>
|
||||||
|
<path class="cls-1" d="M847.4,1094.8s-9.2,5.7-26.4,5.7c-26.4,0-46.5-16-46.5-44s18-43.8,47-43.8,25.9,6.3,25.9,6.3v20.2s-8.2-8.1-25.8-8.1-25.3,9-25.3,25.1,11.4,25.6,25.5,25.6,25.6-7.4,25.6-7.4v20.2h0Z"></path>
|
||||||
|
<path class="cls-1" d="M943.5,1056.8c0,4.4-.3,8.7-.3,8.7h-60.6c2.4,11.4,10.6,16.6,24.3,16.6,19.9,0,30.5-8.4,30.5-8.4v19.8s-11.1,6.8-31,6.8c-30.8,0-46.2-18.3-46.2-43.9s19.3-43.7,43.2-43.7,40,16.4,40,44.1ZM922.2,1050.7c-.9-10.6-7.1-19.9-19.5-19.9s-19.6,8.1-20.6,19.9h40Z"></path>
|
||||||
|
<path class="cls-1" d="M710.2,933.4v-27.8h13.6v-102.3h-13.6v-27.8c25.3,0,39.6-.5,74.7-.5,53.4,0,85.8,26.7,85.8,77.9s-30.3,81-88.5,81-46.6-.5-72-.5h0ZM754.8,905.5s16.5.5,29.7.5c36.2,0,53.7-20.8,53.7-52.3s-18.1-50.9-53.7-50.9-29.7.5-29.7.5v102.3h0Z"></path>
|
||||||
|
<circle class="cls-1" cx="917.9" cy="914.8" r="20.4"></circle>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.4 KiB |
BIN
uploads/DMSans-Bold.ttf
Normal file
BIN
uploads/DMSans-Bold.ttf
Normal file
Binary file not shown.
BIN
uploads/DMSans-BoldItalic.ttf
Normal file
BIN
uploads/DMSans-BoldItalic.ttf
Normal file
Binary file not shown.
BIN
uploads/DMSans-Italic.ttf
Normal file
BIN
uploads/DMSans-Italic.ttf
Normal file
Binary file not shown.
BIN
uploads/DMSans-Medium.ttf
Normal file
BIN
uploads/DMSans-Medium.ttf
Normal file
Binary file not shown.
BIN
uploads/DMSans-MediumItalic.ttf
Normal file
BIN
uploads/DMSans-MediumItalic.ttf
Normal file
Binary file not shown.
BIN
uploads/DMSans-Regular.ttf
Normal file
BIN
uploads/DMSans-Regular.ttf
Normal file
Binary file not shown.
93
uploads/OFL.txt
Normal file
93
uploads/OFL.txt
Normal file
@@ -0,0 +1,93 @@
|
|||||||
|
Copyright 2014-2017 Indian Type Foundry (info@indiantypefoundry.com). Copyright 2019 Google LLC.
|
||||||
|
|
||||||
|
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||||
|
This license is copied below, and is also available with a FAQ at:
|
||||||
|
http://scripts.sil.org/OFL
|
||||||
|
|
||||||
|
|
||||||
|
-----------------------------------------------------------
|
||||||
|
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||||
|
-----------------------------------------------------------
|
||||||
|
|
||||||
|
PREAMBLE
|
||||||
|
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||||
|
development of collaborative font projects, to support the font creation
|
||||||
|
efforts of academic and linguistic communities, and to provide a free and
|
||||||
|
open framework in which fonts may be shared and improved in partnership
|
||||||
|
with others.
|
||||||
|
|
||||||
|
The OFL allows the licensed fonts to be used, studied, modified and
|
||||||
|
redistributed freely as long as they are not sold by themselves. The
|
||||||
|
fonts, including any derivative works, can be bundled, embedded,
|
||||||
|
redistributed and/or sold with any software provided that any reserved
|
||||||
|
names are not used by derivative works. The fonts and derivatives,
|
||||||
|
however, cannot be released under any other type of license. The
|
||||||
|
requirement for fonts to remain under this license does not apply
|
||||||
|
to any document created using the fonts or their derivatives.
|
||||||
|
|
||||||
|
DEFINITIONS
|
||||||
|
"Font Software" refers to the set of files released by the Copyright
|
||||||
|
Holder(s) under this license and clearly marked as such. This may
|
||||||
|
include source files, build scripts and documentation.
|
||||||
|
|
||||||
|
"Reserved Font Name" refers to any names specified as such after the
|
||||||
|
copyright statement(s).
|
||||||
|
|
||||||
|
"Original Version" refers to the collection of Font Software components as
|
||||||
|
distributed by the Copyright Holder(s).
|
||||||
|
|
||||||
|
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||||
|
or substituting -- in part or in whole -- any of the components of the
|
||||||
|
Original Version, by changing formats or by porting the Font Software to a
|
||||||
|
new environment.
|
||||||
|
|
||||||
|
"Author" refers to any designer, engineer, programmer, technical
|
||||||
|
writer or other person who contributed to the Font Software.
|
||||||
|
|
||||||
|
PERMISSION & CONDITIONS
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining
|
||||||
|
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||||
|
redistribute, and sell modified and unmodified copies of the Font
|
||||||
|
Software, subject to the following conditions:
|
||||||
|
|
||||||
|
1) Neither the Font Software nor any of its individual components,
|
||||||
|
in Original or Modified Versions, may be sold by itself.
|
||||||
|
|
||||||
|
2) Original or Modified Versions of the Font Software may be bundled,
|
||||||
|
redistributed and/or sold with any software, provided that each copy
|
||||||
|
contains the above copyright notice and this license. These can be
|
||||||
|
included either as stand-alone text files, human-readable headers or
|
||||||
|
in the appropriate machine-readable metadata fields within text or
|
||||||
|
binary files as long as those fields can be easily viewed by the user.
|
||||||
|
|
||||||
|
3) No Modified Version of the Font Software may use the Reserved Font
|
||||||
|
Name(s) unless explicit written permission is granted by the corresponding
|
||||||
|
Copyright Holder. This restriction only applies to the primary font name as
|
||||||
|
presented to the users.
|
||||||
|
|
||||||
|
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||||
|
Software shall not be used to promote, endorse or advertise any
|
||||||
|
Modified Version, except to acknowledge the contribution(s) of the
|
||||||
|
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||||
|
permission.
|
||||||
|
|
||||||
|
5) The Font Software, modified or unmodified, in part or in whole,
|
||||||
|
must be distributed entirely under this license, and must not be
|
||||||
|
distributed under any other license. The requirement for fonts to
|
||||||
|
remain under this license does not apply to any document created
|
||||||
|
using the Font Software.
|
||||||
|
|
||||||
|
TERMINATION
|
||||||
|
This license becomes null and void if any of the above conditions are
|
||||||
|
not met.
|
||||||
|
|
||||||
|
DISCLAIMER
|
||||||
|
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||||
|
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||||
|
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||||
|
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||||
|
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||||
|
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||||
|
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||||
|
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||||
|
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||||
Reference in New Issue
Block a user