🌆 CYBERCORE CSS 소개: 미래형 UI를 위한 사이버펑크 디자인 프레임워크

Source: Dev.to

🌆 CYBERCORE CSS 소개

미래지향적이고 사이버펑크 영감을 받은 인터페이스를 구축하기 위한 순수 CSS 프레임워크

Night City에 어울리는 UI를 만들고 싶으신가요? CYBERCORE CSS는 Cyberpunk 2077, Blade Runner, 그리고 네온에 물든 디스토피아 SF 미학에서 영감을 받은 종합 CSS 프레임워크입니다.

⚡ 왜 또 다른 CSS 프레임워크인가?

대부분의 CSS 프레임워크는 깔끔하고 미니멀한 디자인에 초점을 맞춥니다. CYBERCORE는 개성이 필요한 프로젝트를 위해 만들어졌습니다:

• 게임 대시보드
• 해커 테마 포트폴리오
• SF 웹 앱
• 엣지가 있는 관리자 패널

박스에서 바로 사용할 수 있는 네온 테두리, 글리치 효과, 스캔라인 등 다양한 효과를 제공합니다.

🎯 주요 기능

🚀 빠른 시작

npm install cybercore-css

또는 CDN 사용:

<!-- Add the CDN link here -->

🎨 색상 팔레트

🔵 Cyan      #00f0ff  → 기본 강조 색
🔴 Magenta   #ff2a6d  → 위험/알림 색
🟡 Yellow    #fcee0a  → 경고 색
🟢 Green     #05ffa1  → 성공 상태 색
⚫ Void      #0a0a0f  → 깊은 배경 색

✨ 눈에 띄는 효과

Glitch Text

## NIGHT CITY

Neon Borders

Glowing border effect
Magenta variant

Scanlines & Noise

CRT monitor effect
Subtle static texture

🧩 컴포넌트 예시

Buttons

EXECUTE
TERMINATE
CONFIRM
SCAN

Cards

<div class="card">
  <header>
    <h4>SYSTEM STATUS</h4>
  </header>
  <section>
    <p>All systems operational.</p>
    <p>Online</p>
  </section>
</div>

Terminal

<div class="terminal">
  <pre>
    $ hack the planet
  </pre>
</div>

🎭 153 사이버펑크 아이콘

CYBERCORE는 사이버펑크 테마 SVG 아이콘으로 구성된 완전한 아이콘 시스템을 포함합니다.

import { renderIcon } from 'cybercore-css/icons';

const icon = renderIcon('terminal', { size: 24, color: 'cyan' });

네비게이션, 액션, 미디어, 보안, 기술 등 다양한 카테고리가 제공됩니다.

🔧 커스터마이징

브랜드에 맞게 CSS 변수를 재정의하세요:

:root {
  --cyber-cyan-500: #00ffaa;
  --glow-cyan: 0 0 10px #00ffaa, 0 0 30px rgba(0, 255, 170, 0.5);
}

📦 포함 내용

• 14개 컴포넌트 – 버튼, 카드, 입력, 테이블, 터미널, 모달, 진행 표시 등
• 6개 효과 – 글리치, 네온 테두리, 스캔라인, 노이즈, 데이터스트림, 텍스트 글로우
• 8개 유틸리티 모듈 – 디스플레이, 플렉스, 그리드, 스페이싱, 텍스트, 애니메이션, 접근성 등
• 153 아이콘 – 10개 카테고리, 각 4가지 스타일 변형

🌐 브라우저 지원

모든 최신 브라우저에서 동작합니다 (Chrome 105+, Firefox 121+, Safari 15.4+, Edge 105+).

🔗 링크

• Live Demo:
• GitHub:
• npm:

---

여러분의 피드백을 기다립니다! 추가했으면 하는 기능이 있나요? 아래에 댓글을 남기거나 GitHub에서 이슈를 열어 주세요.

⚡ 미래를 위해 만들었습니다. Night City를 위해 스타일링했습니다. ⚡

유용했다면 GitHub에서 레포에 ⭐를 눌러 주세요!