ekeerar/Dansori_EQ
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial Dansori EQ workspace

Browse Source
This commit is contained in:
eKeerar
2026-07-04 10:34:46 +09:00
commit 5369ab8525
1350 changed files with 327985 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
mockups/characters.html
+186
View File
@@ -0,0 +1,186 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8"/>
<title>Dansori — 캐릭터 컨셉 샘플</title>
<style>
:root{ --bg:#141418; --card:#1e1e24; --stroke:#3a3a42; --text:#f2f3f5; --dim:#a8abb4;
--cyan:#4cc2ff; --mint:#38e0c4; font-family:"Segoe UI Variable","Segoe UI",system-ui,sans-serif; }
body{margin:0;background:var(--bg);color:var(--text);padding:32px}
h1{font-size:24px;margin:0 0 4px} .sub{color:var(--dim);margin:0 0 26px;font-size:14px}
h2{font-size:15px;color:var(--mint);margin:30px 0 12px}
.row{display:flex;gap:22px;flex-wrap:wrap;align-items:flex-start}
.card{background:var(--card);border:1px solid var(--stroke);border-radius:16px;padding:18px;width:280px}
.card .nm{font-weight:700;font-size:17px;margin-top:6px}
.card .rl{color:var(--dim);font-size:13px;margin-top:2px}
.chip{display:inline-block;background:#26262b;border:1px solid var(--stroke);border-radius:20px;padding:4px 10px;font-size:12px;color:var(--dim);margin:6px 6px 0 0}
.avwrap{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
pre{background:#0f0f13;border:1px solid var(--stroke);border-radius:12px;padding:14px;color:#cdd3da;
font-family:Consolas,monospace;font-size:12.5px;white-space:pre-wrap;line-height:1.55}
.note{color:var(--dim);font-size:13px;line-height:1.6}
</style>
</head>
<body>
<h1>Dansori — 캐릭터 컨셉 샘플</h1>
<p class="sub">손으로 그린 SVG 컨셉(발랄·친근 치비 마스코트). 이름은 미정 · 임시로 여=민트 / 남=시안.</p>
<div class="row">
<!-- ================= FEMALE (mint) ================= -->
<div class="card">
<svg viewBox="0 0 240 300" width="100%">
<!-- floating notes -->
<g fill="var(--mint)" opacity="0.9" font-size="22" font-weight="700">
<text x="24" y="70">♪</text><text x="196" y="52">♫</text>
</g>
<!-- soundwave ribbon -->
<path d="M30 150 q10 -18 20 0 t20 0" stroke="var(--mint)" stroke-width="4" fill="none" stroke-linecap="round" opacity=".7"/>
<!-- torso -->
<path d="M74 300 L74 214 Q74 182 120 182 Q166 182 166 214 L166 300 Z" fill="#EAF9F5" stroke="#14141a" stroke-width="3"/>
<!-- EQ bars on shirt -->
<g fill="var(--mint)"><rect x="104" y="228" width="7" height="34" rx="3"/><rect x="116" y="220" width="7" height="42" rx="3"/><rect x="128" y="234" width="7" height="28" rx="3"/></g>
<!-- neck -->
<rect x="106" y="158" width="28" height="26" rx="12" fill="#FFD9BC" stroke="#14141a" stroke-width="3"/>
<!-- back hair -->
<ellipse cx="120" cy="104" rx="80" ry="78" fill="var(--mint)"/>
<path d="M44 120 Q40 175 66 200 L80 176 Q60 150 62 118 Z" fill="var(--mint)"/>
<path d="M196 120 Q200 175 174 200 L160 176 Q180 150 178 118 Z" fill="var(--mint)"/>
<!-- face -->
<circle cx="120" cy="104" r="60" fill="#FFE3C8" stroke="#14141a" stroke-width="3"/>
<!-- bangs -->
<path d="M62 96 Q66 48 120 46 Q174 48 178 96 Q150 72 132 78 Q120 66 108 78 Q90 72 62 96 Z" fill="var(--mint)" stroke="#14141a" stroke-width="3"/>
<!-- headband -->
<path d="M64 78 Q120 30 176 78" stroke="#1FB89E" stroke-width="9" fill="none" stroke-linecap="round"/>
<!-- cat ears -->
<path d="M60 64 L44 26 L84 44 Z" fill="var(--mint)" stroke="#14141a" stroke-width="3" stroke-linejoin="round"/>
<path d="M180 64 L196 26 L156 44 Z" fill="var(--mint)" stroke="#14141a" stroke-width="3" stroke-linejoin="round"/>
<path d="M62 58 L54 40 L74 48 Z" fill="#FF9DB0"/><path d="M178 58 L186 40 L166 48 Z" fill="#FF9DB0"/>
<!-- earcups -->
<ellipse cx="58" cy="110" rx="14" ry="20" fill="#1FB89E" stroke="#14141a" stroke-width="3"/>
<ellipse cx="182" cy="110" rx="14" ry="20" fill="#1FB89E" stroke="#14141a" stroke-width="3"/>
<!-- eyes -->
<g><ellipse cx="99" cy="112" rx="11" ry="14" fill="#20242e"/><circle cx="103" cy="107" r="4" fill="#fff"/></g>
<g><ellipse cx="141" cy="112" rx="11" ry="14" fill="#20242e"/><circle cx="145" cy="107" r="4" fill="#fff"/></g>
<!-- blush -->
<ellipse cx="84" cy="130" rx="9" ry="5" fill="#FF9DB0" opacity=".75"/>
<ellipse cx="156" cy="130" rx="9" ry="5" fill="#FF9DB0" opacity=".75"/>
<!-- smile -->
<path d="M108 130 Q120 143 132 130" stroke="#14141a" stroke-width="3" fill="none" stroke-linecap="round"/>
</svg>
<div class="nm">여자 캐릭터 · 소리형 (임시)</div>
<div class="rl">AI 어시스턴트 · 발랄·수다·호기심</div>
<div><span class="chip">민트·틸</span><span class="chip">고양이귀 헤드폰</span><span class="chip">음파·음표</span></div>
</div>
<!-- ================= MALE (cyan) ================= -->
<div class="card">
<svg viewBox="0 0 240 300" width="100%">
<!-- torso hoodie -->
<path d="M72 300 L72 212 Q72 180 120 180 Q168 180 168 212 L168 300 Z" fill="#2A2F3A" stroke="#14141a" stroke-width="3"/>
<!-- hoodie strings + fader knobs -->
<line x1="112" y1="196" x2="112" y2="238" stroke="var(--cyan)" stroke-width="4" stroke-linecap="round"/>
<line x1="128" y1="196" x2="128" y2="238" stroke="var(--cyan)" stroke-width="4" stroke-linecap="round"/>
<circle cx="112" cy="224" r="6" fill="#fff" stroke="var(--cyan)" stroke-width="3"/>
<circle cx="128" cy="212" r="6" fill="#fff" stroke="var(--cyan)" stroke-width="3"/>
<!-- neck -->
<rect x="106" y="156" width="28" height="26" rx="12" fill="#FFD3B0" stroke="#14141a" stroke-width="3"/>
<!-- neckband headphones -->
<path d="M80 176 Q120 206 160 176" stroke="var(--cyan)" stroke-width="9" fill="none" stroke-linecap="round"/>
<ellipse cx="80" cy="176" rx="9" ry="12" fill="#2E9BD6" stroke="#14141a" stroke-width="3"/>
<ellipse cx="160" cy="176" rx="9" ry="12" fill="#2E9BD6" stroke="#14141a" stroke-width="3"/>
<!-- face -->
<circle cx="120" cy="100" r="58" fill="#FFD8BB" stroke="#14141a" stroke-width="3"/>
<!-- hair short messy dark + cyan streak -->
<path d="M64 96 Q60 46 120 44 Q180 46 176 96 Q168 74 150 72 Q156 58 138 60 Q140 46 122 52 Q108 44 104 60 Q92 56 92 72 Q74 72 64 96 Z" fill="#33343c" stroke="#14141a" stroke-width="3"/>
<path d="M104 60 Q120 50 138 60 Q128 62 122 58 Q112 64 104 60 Z" fill="var(--cyan)"/>
<!-- eyes big + friendly -->
<g><ellipse cx="100" cy="106" rx="10" ry="13" fill="#20242e"/><circle cx="104" cy="101" r="3.6" fill="#fff"/></g>
<g><ellipse cx="140" cy="106" rx="10" ry="13" fill="#20242e"/><circle cx="144" cy="101" r="3.6" fill="#fff"/></g>
<!-- big grin -->
<path d="M100 126 Q120 150 140 126 Q120 136 100 126 Z" fill="#fff" stroke="#14141a" stroke-width="3" stroke-linejoin="round"/>
<!-- blush -->
<ellipse cx="86" cy="124" rx="8" ry="4.5" fill="#FF9DB0" opacity=".6"/>
<ellipse cx="154" cy="124" rx="8" ry="4.5" fill="#FF9DB0" opacity=".6"/>
</svg>
<div class="nm">남자 캐릭터 · 단이형 (임시)</div>
<div class="rl">정밀 튜너 · 든든·유쾌한 큰웃음</div>
<div><span class="chip">시안·블루</span><span class="chip">넥밴드 헤드폰</span><span class="chip">페이더/노브</span></div>
</div>
<!-- ================= DUO ================= -->
<div class="card" style="width:280px">
<svg viewBox="0 0 260 220" width="100%">
<!-- shared cable -->
<path d="M92 150 Q130 190 168 150" stroke="#5a5f6b" stroke-width="4" fill="none"/>
<!-- mini female -->
<g transform="translate(20,20) scale(0.62)">
<circle cx="120" cy="104" r="60" fill="#FFE3C8" stroke="#14141a" stroke-width="4"/>
<path d="M62 96 Q66 48 120 46 Q174 48 178 96 Q150 72 132 78 Q120 66 108 78 Q90 72 62 96 Z" fill="#38e0c4" stroke="#14141a" stroke-width="4"/>
<path d="M60 64 L44 26 L84 44 Z" fill="#38e0c4" stroke="#14141a" stroke-width="4" stroke-linejoin="round"/>
<ellipse cx="182" cy="110" rx="14" ry="20" fill="#1FB89E" stroke="#14141a" stroke-width="4"/>
<ellipse cx="99" cy="112" rx="11" ry="14" fill="#20242e"/><ellipse cx="141" cy="112" rx="11" ry="14" fill="#20242e"/>
<path d="M108 130 Q120 143 132 130" stroke="#14141a" stroke-width="4" fill="none" stroke-linecap="round"/>
<ellipse cx="84" cy="130" rx="9" ry="5" fill="#FF9DB0" opacity=".75"/><ellipse cx="156" cy="130" rx="9" ry="5" fill="#FF9DB0" opacity=".75"/>
</g>
<!-- mini male -->
<g transform="translate(120,20) scale(0.62)">
<circle cx="120" cy="104" r="58" fill="#FFD8BB" stroke="#14141a" stroke-width="4"/>
<path d="M64 96 Q60 46 120 44 Q180 46 176 96 Q168 74 150 72 Q140 58 122 60 Q108 52 104 66 Q80 66 64 96 Z" fill="#33343c" stroke="#14141a" stroke-width="4"/>
<path d="M104 66 Q120 54 138 64 Q122 62 104 66 Z" fill="#4cc2ff"/>
<ellipse cx="80" cy="110" rx="13" ry="18" fill="#2E9BD6" stroke="#14141a" stroke-width="4"/>
<ellipse cx="100" cy="106" rx="10" ry="13" fill="#20242e"/><ellipse cx="140" cy="106" rx="10" ry="13" fill="#20242e"/>
<path d="M100 126 Q120 150 140 126 Q120 136 100 126 Z" fill="#fff" stroke="#14141a" stroke-width="4" stroke-linejoin="round"/>
</g>
<text x="130" y="205" text-anchor="middle" fill="#4cc2ff" font-size="16" font-weight="700">함께 = Dansori</text>
</svg>
<div class="nm">듀오 · "헤드폰 한 짝씩"</div>
<div class="rl">둘이 모여 브랜드 완성</div>
</div>
</div>
<h2>앱용 원형 아바타 (AI 응답창 등)</h2>
<div class="avwrap">
<svg viewBox="0 0 120 120" width="84" height="84">
<defs><clipPath id="c1"><circle cx="60" cy="60" r="58"/></clipPath></defs>
<circle cx="60" cy="60" r="58" fill="#20242e"/>
<g clip-path="url(#c1)" transform="translate(-8,6) scale(0.62)">
<circle cx="120" cy="104" r="60" fill="#FFE3C8"/>
<path d="M62 96 Q66 48 120 46 Q174 48 178 96 Q150 72 132 78 Q120 66 108 78 Q90 72 62 96 Z" fill="#38e0c4"/>
<path d="M60 64 L44 26 L84 44 Z" fill="#38e0c4"/><path d="M180 64 L196 26 L156 44 Z" fill="#38e0c4"/>
<ellipse cx="99" cy="112" rx="11" ry="14" fill="#20242e"/><ellipse cx="141" cy="112" rx="11" ry="14" fill="#20242e"/>
<path d="M108 130 Q120 143 132 130" stroke="#14141a" stroke-width="4" fill="none" stroke-linecap="round"/>
</g>
<circle cx="60" cy="60" r="58" fill="none" stroke="#38e0c4" stroke-width="3"/>
</svg>
<svg viewBox="0 0 120 120" width="84" height="84">
<defs><clipPath id="c2"><circle cx="60" cy="60" r="58"/></clipPath></defs>
<circle cx="60" cy="60" r="58" fill="#20242e"/>
<g clip-path="url(#c2)" transform="translate(-8,10) scale(0.62)">
<circle cx="120" cy="100" r="58" fill="#FFD8BB"/>
<path d="M64 96 Q60 46 120 44 Q180 46 176 96 Q168 74 150 72 Q140 58 122 60 Q108 52 104 66 Q80 66 64 96 Z" fill="#33343c"/>
<path d="M104 66 Q120 54 138 64 Q122 62 104 66 Z" fill="#4cc2ff"/>
<ellipse cx="100" cy="106" rx="10" ry="13" fill="#20242e"/><ellipse cx="140" cy="106" rx="10" ry="13" fill="#20242e"/>
<path d="M100 126 Q120 150 140 126 Q120 136 100 126 Z" fill="#fff"/>
</g>
<circle cx="60" cy="60" r="58" fill="none" stroke="#4cc2ff" stroke-width="3"/>
</svg>
<span class="note">← 이 원형 버전을 그대로 AI 응답창 아바타/알림 아이콘에 쓸 수 있어요.</span>
</div>
<h2>이미지 생성 AI용 프롬프트 (Midjourney/DALL·E 등에 붙여넣기)</h2>
<p class="note">SVG는 컨셉 스케치입니다. 아래 프롬프트로 고퀄 일러스트를 뽑아 보세요.</p>
<pre>[여자 · Sori]
cute chibi mascot girl for an audio app, 2.5 heads tall, big sparkly eyes, cheerful friendly smile, soft blush,
mint-teal bob hair with soundwave-shaped ends, wearing cat-ear headphones (mint), small music notes floating around,
white top with tiny equalizer bars, flat vector sticker style, bold clean outlines, mint (#38E0C4) accent,
dark navy background, kawaii, energetic pose — mascot design, front view</pre>
<pre>[남자 · Dan]
cute chibi mascot boy for an audio app, 2.5 heads tall, big friendly eyes, wide happy grin, slightly messy dark hair
with a cyan streak, cyan neckband headphones around neck, hoodie with mixer fader/knob details, thumbs up,
flat vector sticker style, bold clean outlines, cyan (#4CC2FF) accent, dark navy background, kawaii, cheerful —
mascot design, front view</pre>
<pre>[듀오]
two cute chibi audio mascots, a mint-haired cheerful girl with cat-ear headphones and a cyan-haired grinning boy with
neckband headphones, sharing one pair of headphones (a cable between them), happy, flat vector sticker style,
bold outlines, mint + cyan on dark navy, brand mascots for a music EQ app "Dansori", front view, friendly & bright</pre>
</body>
</html>