디자인 시스템 및 UI 컴포넌트

🎨 다크 글래스모피즘 테마 시스템 토큰 🖥️ Pretendard Variable 가변 타이포그라피 🧩 지정기부 Sticky 결제 카드 & AI 여행 추천 챗봇 UI 명세

본 장에서는 통합 플랫폼의 브랜드 컬러 HSL 값과 가변 Pretendard 폰트 시스템을 정의하고, 기획서([design-system.md](./design-system.md))의 컴포넌트 마크업 코드를 통해 프론트엔드 퍼블리싱 구조를 안내합니다.

1. HSL 디자인 시스템 컬러 토큰

Bg-Primary (깊은 다크 블루)

`HSL(224, 25%, 10%)` | `#0b0d13`

Brand-Orange (놀고팜 액션)

`HSL(24, 95%, 60%)` | `#f97316`

Brand-Blue (기부제 테마)

`HSL(217, 90%, 60%)` | `#3b82f6`

Accent-Purple (시너지 데코)

`HSL(262, 80%, 65%)` | `#8b5cf6`

2. 지정기부 크라우드펀딩 Sticky 결제 UI

위기브의 모금률 게이지와 실시간 혜택 역산 계산기가 결합된 카드 컴포넌트 마크업 예시입니다.

🎨 실제 컴포넌트 렌더링 뷰 (Glassmorphism)

D-14 모금 진행중

84% 2,520만원 / 3,000만원

내가 기부할 금액 100,000 원

세액공제 환급액 100,000원 (100% 환급)

지급 답례품 포인트 30,000 G-Point 적립

💻 HTML 마크업 코드 스니펫

<div class="sticky-donation-card">
  <div class="campaign-status">
    <span class="dday-badge">D-14</span>
    <span class="status-lbl">모금 진행중</span>
  </div>
  <div class="funding-bar">
    <div class="progress-bar-fill" style="width: 84%;"></div>
  </div>
  <button class="cta-donation-btn">기부 완료</button>
</div>

3. AI 농촌 여행 코스 추천 챗봇 UI 와이어프레임

웰로의 프로필 매칭 챗봇 인터페이스를 벤치마킹하여, 자연스러운 터치 인터랙션 기반의 퀵 칩(Quick Chips) 버튼을 배치한 챗봇 디자인 와이어프레임입니다.

🤖 놀고팜 AI 여행 코스 매칭봇

안녕하세요! 홍길동님의 이번 기부 혜택인 **30,000 G-Point**를 사용하여 바로 예약 가능한 완주 독채 촌캉스 숙소를 추천해 드릴까요?

👍 네, 숙소 추천해줘! 🌾 완주 농가 체험 보기