Design System · v0.2

DPLANEX Meetup Deck — 컴포넌트 팔레트

본격 본문 슬라이드 작업 전 톤/컴포넌트 합의용 페이지. 색·타이포·핵심 컴포넌트 시안. v0.2: 디자인 리서치 13곳 반영(Slidev/Reveal/Pitch/Stripe/Linear/Apple/Toss/Tailwind/Magic UI 등) — 구조·인용·목차·Bento·로고·전후·코드·마무리 컴포넌트 추가.

1. 색상 토큰

DPLANEX 보라 메인 + 상태/강조색 보조 — reference PPT 분석 기반

Brand

50
#F6F2FD
100
#EBE4FA
200
#D6BFEF
300
#AF92CE
400
#9771B2
500
#7A49AE
600
#60269E
700
#51137F
800
#3A175F
900
#2F314A

Status / Accent

status.good
#5B993C
status.normal
#0B76A0
status.upgrade
#60269E
status.stop
#89898B
accent.red
#C00000
brand-gradient · 600 → 700 → 800

2. 타이포그래피

Pretendard Variable · 한글 keep-all + 영문 토큰 보존

display-2 · 헤드라인 숫자
3명 × 12주
hero · 슬라이드 제목
Claude Code 사용 경험과 AX 노력들
body · 본문 (한글 keep-all)

한 달간 11.56B 토큰을 사용했고 1,325개의 세션을 진행했습니다. 본문 단락에 사용되는 기본 텍스트 톤이며, "Claude Code" 같은 영문 토큰은 어절 경계에서 깨지지 않습니다.

3. 슬라이드 베이스 (Slide)

aspect-video + safe-area + footnotes 옵션. 4가지 배경 베리언트

HOOK

이만큼 써본 한 사람

개인 결제 계정 제외 · 한 달 03.18~04.17

API 환산비용
$0
총 토큰
0.00B
메시지 수
0
세션 수
0
1사내 측정 (2026-04)2Anthropic 공식 블로그 인용 (2025-11)
WHAT
KANDLE 문고
3명 × 12주
Pipeline · Governance · Portal · Backoffice 전체 구축

4. 구조 슬라이드

챕터 전환 · 목차 · 마무리 — 발표 골격을 잡는 풀블리드 컴포넌트들

SectionDivider

02/ 03

작은 변화들

Claude Code가 만든 사내 AX 시도 11개의 단면

Agenda · current 강조

  1. 01
    Claude Code 사용 경험

    한 달 사용량 · KANDLE 문고

  2. 02
    사내 AX 시도

    11개 프로젝트 회고

    지금
  3. 03
    주의사항과 팁

    초보자가 빠지기 쉬운 함정

  4. 04
    Q&A

ClosingSlide

감사합니다.

질문은 언제든. 다음 meetup에서 개인 자동화 사례로 이어갑니다.

→다음 meetup: 개인 프로젝트 자동화

5. 통계 카드 (StatCard)

Hook 슬라이드용 카운트업. trigger=fragment 옵션으로 Reveal 단계 노출과 동기화 가능

API 환산비용
$0.00
개인 결제 제외
총 토큰
0.00B
Cache 11.26B 포함
메시지 수
0
48,510 활성
세션 수
0
가장 강조하고 싶은 값

6. 카드 · Bento

가벼운 소개 카드 4개 + Apple식 다축 요약 한 장

CategoryCard

🛢

Data Ingest/Pipeline

원천 수집기 · Asset Bundle 기반 CI/CD

상세 보기 →
🛡

Data Governance

RBAC 설계 · Terraform IaC

상세 보기 →
🪟

Data Application

SSO 포털 · 노코드 SQL

상세 보기 →
⚙️

System Backoffice

Flutter 통합 + GenAI Assistant

상세 보기 →

BentoGrid · 한 장 요약

Headline

3명 × 12주

🔥

KANDLE 문고 전체 스택 구축

Pipeline

Lakeflow · Asset Bundle

확장 가능 CI/CD

Governance

RBAC · IaC

권한 모델링 자동화

Portal

SSO · 노코드 SQL

Streamlit → React 포털

Backoffice

Flutter + GenAI

관리자도 자연어로 운영

7. 인용 (QuoteSlide)

팀원/대표/외부 인용 — 본문에 풀블리드 한 장으로

이걸 외주로 했으면 1억 넘었을 거예요. 우리는 세 명이서 했죠.
박지훈
AI Lab 팀장

2026-04 KANDLE 문고 회고 미팅

8. LogoCloud

사용 도구/연동 서비스 — 텍스트 마크 폴백 가능

이 발표에서 다룬 도구들

Claude Code
Databricks
Terraform
Keycloak
Flutter
n8n
Notion
Figma

9. 비교 — MatrixCompare · BeforeAfterSlider

역량 확장 / 작업 흐름의 전후 비교 두 가지 패턴

MatrixCompare

할 수 있게 된 것
영역
과거
현재 (Claude Code 활용)
  • Portal
    Streamlit 단순 대시보드
    SSO · 노코드 SQL · 권한별 데이터 조회
  • Backoffice
    수기 운영 · 분산 도구
    Flutter 단일 진입점 + GenAI Assistant
  • Pipeline
    수동 정의 · 단발 스크립트
    Asset Bundle · 확장 가능 CI/CD
  • Governance
    임시 권한 설정
    Terraform IaC · 워크스페이스 단위 RBAC

BeforeAfterSlider · 드래그

🪟
React 포털 + SSO
노코드 SQL · 역할별 뷰
현재
📊
Streamlit 단일 대시보드
고정 차트 · 권한 없음
과거
⇔

10. Funnel

AX 시도 → 생존 → 전사 활용. 'stop이 많을수록 메시지가 강해진다'

AX 시도 → 생존 → 전사 활용

시도
11
생존 (운영중)
5
전사 활용
2

11. StatusBadge / ProjectListItem

status별 시각 차등 — stop은 흐림 + 취소선

활용중운영고도화중단
  • 01

    전사 AX 가이드: Claude Code

    운영

    Claude Code 기본 사용 가이드

    문서 열기 →
  • 02

    회의록 자동화

    고도화

    회의록만 적다 끝나는 회의에 집중하기 위한 프로그램

    → 실 SMA 프로젝트 생성·전사 배포 계획

    문서 열기 →
  • 08

    JIRA 리소스 자동 보고서

    활용중

    JIRA ticket 기반 업무 이력 자료

    문서 열기 →
  • 03

    아키텍처 생성기 프로그램

    중단

    간단한 아키텍처 직접 그리지 않아도 빌드

    문서 열기 →

12. CostBar

비용 비교 — 'Claude 사용 / 미사용' 가시화

동일 결과물 인력·기간 비교 (체감 추정)

Claude Code 활용 (실제)36man-weeks
Claude 없이 (추정)110man-weeks

※ 추정치 — 근거 실측 데이터 확정 후 갱신 예정

13. Timeline

개인/회사 사용 히스토리. 날짜 표기 통일

  1. 2025.06
    Claude Code 사용 시작

    초기 — 혁신적이지만 디버깅 사고 위험 존재

  2. 2025.11
    회사 내부 본격 도입

    박지훈 팀장님 합류 · 모델 성능 급격 증가 시점

  3. 2026.03
    KANDLE 문고 1차 완료

    Pipeline · Governance · Portal · Backoffice

  4. 현재
    지원 기능 추가, 근본 성능 향상은 제한적

14. CodeReveal

발표 도중 코드를 단계적으로 강조. highlights 로 라인 지정

bash
예: Claude Code 세션 시작
1# 새 발표 슬라이드 작성
2claude
3 
4> /slide-author-ko Hook 슬라이드 작성해줘
5 
6# tone 리뷰
7> @slide-tone-reviewer-ko 톤 봐줘

15. ClosingSlide

QR/연락처/다음 단계. 본문은 §4 참조 — 여기는 옵션 변형들

Thank you.

bg="dark" 변형

  • Emaildemini-b@dplanex.com

질문 환영.

bg="soft" 변형 — 밝은 톤

  • Slack@hosung.kim

16. Glossary (용어 자동 처리)

첫 등장 약어 인라인 병기 + 슬라이드 푸터 일괄 정의

오늘 발표 주제는 AX(AI Transformation)의 사내 사례입니다. LLM(Large Language Model) 기반 도구가 만든 변화와 MCP(Model Context Protocol) 같은 신규 프로토콜의 의미를 다룹니다.

AX · AI Transformation · AI 전환LLM · Large Language Model · 대규모 언어 모델MCP · Model Context Protocol · 모델 컨텍스트 프로토콜SSO · Single Sign-On · 통합 로그인IaC · Infrastructure as Code · 코드로 관리하는 인프라

17. Placeholder

아직 안 채워진 칸. 본문에서 사용자 자료 받기 전까지 노출

📝 채워주세요
포털 스크린샷 또는 데모 GIF

Hook용 소재 후보. 1장 또는 짧은 영상

📝 채워주세요
GitLab commit/LoC 실측치