개발 · 디자인 🐻 왕초보
Quantum Orbit W — 왕초보 2026 공식 브랜드 가이드라인
2026년 5월 22일 업데이트
♾️ Quantum Orbit W : 초보에서 무한으로
2026년 차세대 지능형 포털 Wangchobo의 공식 브랜드 아이덴티티(BI)인 **“Quantum Orbit W (양자 궤도 & W의 무한 루프)“**를 정식 규격화하여 공표합니다.
본 가이드라인은 개발자와 디자이너가 왕초보 포털의 고유한 브랜드 자산을 웹/모바일 환경에서 왜곡 없이 아름답고 완벽한 퀄리티로 렌더링할 수 있도록 돕는 기술 및 철학 매뉴얼입니다.
🎨 3D 브랜드 컨셉 비주얼 보드
다음은 왕초보 포털의 초프리미엄 럭셔리 다크 테크 감성을 응축하여 렌더링한 공식 3D 컨셉 아트보드입니다.
💎 디자인 철학과 상징성
- 지능의 무한 순환 (Mobius Loop)
- 이니셜 **‘W’**의 뚜렷한 형태를 유지하면서, 끝 부분이 끊어지지 않고 입체적으로 회귀하여 **무한대 기호(Infinity, ♾️)**를 이룹니다. 이는 데이터의 거침없는 흐름, 지식의 연결, 그리고 사용자가 왕초보에서 시작해 무한한 가능성의 세계로 도약함을 상징합니다.
- 양자 궤도 가속 (Quantum Orbital)
- 중심에 위치한 퀀텀 에너지 핵(Quantum Core)을 은은하게 스쳐 가는 궤선은 에너지가 응축되고 연산되는 지능형 아키텍처를 뜻하며, 미래 정보 산업의 중추 역할을 수행할 포털의 비전을 표방합니다.
- 네온 다크 럭셔리 (Tech Gradient)
- 심연의 옵시디언 다크 테크 백그라운드 위에서 우아하게 대비되는 로얄 바이올렛과 찬란한 네온 골드의 조합은 타협하지 않는 고급스러운 정밀함과 감각적인 퓨처리즘을 선사합니다.
🛠️ 기하학 및 구현 명세 (SVG Specs)
가장 수려한 뫼비우스 이중 루프를 드로잉하기 위해 설계된 공식 한 붓 그리기 3차 베지어 곡선 좌표 명세입니다.
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- 1. 초프리미엄 3D 메탈릭 스페큘러 플래시 그라데이션 -->
<linearGradient id="quantumLogoGrad3D" x1="0%" y1="100%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#4c1a47" /> <!-- Deep Obsidian Purple -->
<stop offset="35%" stop-color="#8a3ab9" /> <!-- Electric Purple -->
<stop offset="70%" stop-color="#a55eea" /> <!-- Vivid Violet -->
<stop offset="86%" stop-color="#ffffff" /> <!-- Specular Pearl White Flash! -->
<stop offset="92%" stop-color="#ffb347" /> <!-- Metallic Gold Reflection -->
<stop offset="100%" stop-color="#ff9f43" /> <!-- Neon Golden Aura -->
</linearGradient>
<!-- 2. 3D 구체(Sphere) 질감을 연출하는 방사형 코어 그라데이션 -->
<radialGradient id="quantumCoreGrad3D" cx="30%" cy="30%" r="70%">
<stop offset="0%" stop-color="#ffffff" /> <!-- 우상단 강한 하이라이트 광원 -->
<stop offset="25%" stop-color="#ffc97a" /> <!-- 메탈릭 골드 반사 표면 -->
<stop offset="65%" stop-color="#a55eea" /> <!-- 전기장 바이올렛 볼륨 -->
<stop offset="100%" stop-color="#40123b" /> <!-- 심부 암흑 구체 섀도우 -->
</radialGradient>
<!-- 3. 미래지향적 광학 입체 네온 글로우 필터 -->
<filter id="quantumGlow3D" x="-30%" y="-30%" width="160%" height="160%">
<feGaussianBlur stdDeviation="2.2" result="auraBlur" />
<feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1.8 0" in="auraBlur" result="boostedAura" />
<feMerge>
<feMergeNode in="boostedAura" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<!-- 1. 3D 네온 글로우 배경 아우라 궤선 -->
<path d="M12 12 C11 15 9 19 7 19 C5 19 3 16 3 11 C3 6 7 4 9 9 C10 11 11 12 12 12 C13 12 14 11 15 9 C17 4 21 6 21 11 C21 16 19 19 17 19 C15 19 13 15 12 12 Z"
stroke="url(#quantumLogoGrad3D)" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.3" filter="url(#quantumGlow3D)" />
<!-- 2. 메인 뫼비우스 W 양자 궤선 (Quantum Loop) -->
<path d="M12 12 C11 15 9 19 7 19 C5 19 3 16 3 11 C3 6 7 4 9 9 C10 11 11 12 12 12 C13 12 14 11 15 9 C17 4 21 6 21 11 C21 16 19 19 17 19 C15 19 13 15 12 12 Z"
stroke="url(#quantumLogoGrad3D)" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round" fill="none" />
<!-- 3. 초미세 림라이트 하이라이트 궤선 (Rim Light Highlight) -->
<path d="M12 12 C11 15 9 19 7 19 C5 19 3 16 3 11 C3 6 7 4 9 9 C10 11 11 12 12 12 C13 12 14 11 15 9 C17 4 21 6 21 11 C21 16 19 19 17 19 C15 19 13 15 12 12 Z"
stroke="#ffffff" stroke-width="0.7" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.45" />
<!-- 4. 3D 에너지 구체 핵 (Luminous Sphere Core) -->
<circle cx="12" cy="12" r="1.6" fill="url(#quantumCoreGrad3D)" filter="url(#quantumGlow3D)" />
</svg>
📐 3D 기하 및 광학 매핑 원리
- 스페큘러 리플렉션 (
linearGradient):86%부근에 완벽한 화이트 광원(#ffffff) 스톱을 위치시켜 궤도가 회전하는 모퉁이마다 눈부신 광택 하이라이트(Metal Specular)가 터져 나오도록 연출합니다. - 방사형 유리 보주 (
radialGradient): 에너지 핵의 정중앙이 아닌 좌상단30%좌표로 광원의 중심점(cx,cy)을 이격 설계하여 빛이 반사되어 부풀어 보이는 완벽한 “3D 물리 구체(Sphere)” 효과를 재현합니다. - 림라이트 하이라이트 중첩 (
stroke-width="0.7"): 메인 궤도선 위에 은은한 반투명 백색 하이라이트를 이중으로 포개어, 물리적인 입체 궤도가 광원을 스칠 때 발생하는 Rim Light 모서리 광택을 정교하게 벡터화합니다. - 완벽한 거울 대칭 피벗 (
cx="12" cy="12"): 중앙 피벗(12, 12)를 정확하게 관통하며 좌우 이중 날개 루프가 완벽한 대칭을 이루는 뫼비우스 곡선 스펙에 맞추어, 코어의 위치를 편향 오프셋 없이 완벽한 정중앙(12, 12)에 위치시킴으로써 기하학적 정밀함과 아름다운 3D 대칭성을 완성합니다.
🎨 공식 디자인 토큰 (CSS Variables)
포털 브랜드의 통일성을 지탱하는 핵심 디자인 변수입니다.
:root {
/* 로얄 다크 바이올렛 (Deep Royal Purple) */
--primary-violet-deep: #702963;
/* 일렉트릭 바이올렛 (Electric Violet) */
--primary-violet: #a55eea;
/* 메탈릭 네온 골드 (Metallic Gold) */
--accent-gold: #ffb347;
/* 네온 아우라 광학 글로우 마일드 */
--accent-glow: drop-shadow(0 0 12px rgba(165, 94, 234, 0.45));
}
본 가이드라인 스펙을 기반으로 포털의 모든 접점이 최고급 디자인 퀄리티로 완성되어 작동 중입니다. 개발 시 로고나 아이콘 추가가 필요한 경우, 임의의 수정을 배제하고 반드시 본 스펙 코드를 그대로 준수해 주시기 바랍니다.