컬러 팔레트 키-값 Diff 플레이그라운드 & 디자인 토큰 비교기

컬러 팔레트 키-값 Diff 플레이그라운드는 두 디자인 시스템이나 테마 간의 색상 토큰 변경점을 키 단위로 대조하여 추가·삭제·수정된 항목과 정밀 색차(Delta-E)를 한눈에 파악해 주는 웹 도구입니다. UI 리뉴얼, 다크 모드 전환, 브랜드 리브랜딩 과정에서 어떤 색상 토큰이 누락되었거나 미세하게 틀어졌는지 즉각 검증하고 변환된 코드를 내보낼 수 있습니다.

주요 기능

1. 실시간 키-값 Diff 엔진 및 상태 감지

• 유연한 입력 파싱: JSON 객체({"primary": "#3b82f6"}), CSS 변수(--color-primary: #3b82f6;), 일반 Key-Value 텍스트(primary: #3b82f6)를 자동 인식해 파싱합니다.
• 4단계 상태 분류: 비교 기준 팔레트 A와 대상 팔레트 B를 대조하여 신규 추가(Added), 삭제됨(Removed), 색상 변경(Modified), 일치함(Unchanged)으로 즉시 분류합니다.
• 실시간 요약 통계: 상태별 토큰 수량을 뱃지로 집계하며 뱃지 클릭 한 번으로 원하는 변경 유형만 필터링합니다.

2. 정밀 색차 및 접근성 분석

• Delta-E 다중 알고리즘: 국제 표준 색차 공식인 CIEDE2000, CIE76, 빠른 RGB 거리 중 선택하여 인간 시각에 따른 색상 차이를 수치화합니다.
• 유사색 허용치(Threshold) 실시간 슬라이더: 슬라이더를 조절(0.5~15.0)하여 미세한 색상 차이를 동일색으로 간주할지, 변경으로 구분할지 민감도를 즉시 제어할 수 있습니다.
• WCAG 2.1 대비율(Contrast Ratio) 검사: 화이트, 다크, 세라믹 또는 커스텀 배경색 대비 명도 대비율을 실시간 계산하고 AA 적합 여부를 표시합니다.
• 색상 포맷 변환: HEX, RGB, HSL, OKLCH 중 원하는 표기 체계로 실시간 전환해 코드를 확인할 수 있습니다.

3. 실시간 라이브 파라미터 조절 (Live Shader Bias)

• 동적 색조 변조기: 팔레트 B의 전체 색상에 대해 Hue Rotate(-180°~+180°), Lightness Boost(-50%~+50%), Saturation Scale(0%~200%)을 실시간 슬라이더로 조절하여 테마 톤 앤 매너 변화를 시뮬레이션할 수 있습니다.
• 3D 인터랙티브 스플릿 뷰: 이전 색상(A)과 변경 색상(B)이 맞닿는 3D 촉각적 분할 스와치로 색상 대비를 직관적으로 비교할 수 있습니다.

4. 결과물 다중 포맷 파일 다운로드 & 클립보드 내보내기

• JSON Diff 보고서 (palette-diff-report.json): 토큰별 Delta-E 수치와 메타데이터가 담긴 분석 리포트 다운로드.
• CSS Custom Properties (tokens.css): :root 블록 기반의 병합 디자인 토큰 파일 생성.
• SCSS 변수 파일 (_colors.scss): Sass 맵 및 $color- 변수 목록 파일 제공.
• Tailwind Config 스니펫 (tailwind.colors.js): Tailwind 설정에 바로 넣을 수 있는 colors 확장 객체 코드 생성.
• Markdown 체인지로그 (palette-diff-summary.md): GitHub PR 본문이나 사내 위키에 첨부할 수 있는 마크다운 비교표 다운로드.

대상 사용자

• 디자인 시스템 엔지니어: 피그마 토큰과 프론트엔드 코드베이스 간의 색상 불일치를 검증하려는 개발자.
• UI/UX 디자이너: 브랜드 리뉴얼이나 시즌 테마 업데이트 시 기존 색상과의 델타 차이 및 대비율을 점검하려는 디자이너.
• 프론트엔드 개발자: Tailwind CSS, SCSS, CSS 변수 간 테마 마이그레이션 작업을 신속하게 진행하려는 개발자.
• QA 및 접근성 검수자: 웹 표준 WCAG 명도 대비 기준을 충족하는지 일괄 확인하려는 품질 관리자.

활용 사례

• Tailwind CSS 테마 리뉴얼: Tailwind v3의 색상 팔레트와 v4 테마 변수 간의 변경 사항을 일괄 비교하고 마이그레이션 코드를 추출합니다.
• 라이트/다크 모드 세맨틱 토큰 매핑: 라이트 모드 대비 다크 모드 토큰의 가독성과 명도 차이를 실시간으로 점검합니다.
• 디자인 토큰 QA: 피그마에서 변경된 색상 값이 실제 프로덕션 CSS 코드에 누락 없이 반영되었는지 검증합니다.
• PR 리뷰 체인지로그 작성: 색상 변경 내역을 마크다운 표로 내보내어 풀 리퀘스트에 투명하게 기록합니다.

사용 방법

1. 좌측 상단 스튜디오 프리셋 셀렉트박스를 이용해 예시 데이터를 불러오거나 본인의 팔레트를 입력창에 붙여넣습니다.
2. Palette A(기준)와 Palette B(비교) 입력창에 각각 JSON, CSS 변수, 또는 Key-Value 형식의 텍스트를 입력합니다.
3. 상단 컨트롤 데크에서 원하는 색상 표기 포맷(HEX, RGB, HSL, OKLCH)과 색차 알고리즘을 선택합니다.
4. 유사색 허용치(ΔE) 슬라이더를 좌우로 움직여 유사색 판정 기준을 실시간으로 조정합니다.
5. 색상 칩 중앙을 확인하여 A와 B의 색차 수치와 배경 대비율 통과 여부를 검토하고 색상 코드를 클릭해 즉시 복사합니다.
6. 하단 내보내기 스튜디오에서 필요한 파일(JSON, CSS, SCSS, Tailwind JS, Markdown) 버튼을 눌러 프로젝트로 다운로드합니다.

제한 사항

• 브라우저 Canvas 렌더링을 통해 색상을 파싱하므로 유효하지 않은 CSS 색상 표현식이나 오타가 포함된 값은 목록에서 제외됩니다.
• CIEDE2000 계산은 sRGB 색공간을 표준 관측 조건(D65)으로 변환해 처리하므로 P3 광색역 전용 디스플레이의 하드웨어 프로파일과는 미세한 시각차가 발생할 수 있습니다.
• 입력창 하나당 수천 개 이상의 대규모 토큰을 한 번에 처리할 경우 브라우저 사양에 따라 렌더링 딜레이가 발생할 수 있습니다.

자주 묻는 질문 (FAQ)

Q1. JSON 형식이 아니어도 CSS 변수나 단순 키-값 형태를 비교할 수 있나요?

네, 가능합니다. JSON뿐만 아니라 :root { --primary: #3b82f6; } 형태의 CSS 파일 내용이나 primary: #3b82f6 형식의 텍스트를 그대로 붙여넣어도 자동 감지하여 비교합니다.

Q2. Delta-E(ΔE) 수치는 무엇을 의미하나요?

Delta-E는 두 색상 간의 지각적 차이를 나타내는 수치입니다. 보통 1.0 미만은 사람의 육안으로 구별하기 어렵고 1.0~3.0 사이는 주의 깊게 보면 인지할 수 있는 차이이며 3.0 이상은 뚜렷한 색상 차이로 간주됩니다.

Q3. 비교된 결과를 내 웹 프로젝트나 Tailwind CSS에 바로 적용할 수 있나요?

네, 하단의 내보내기 독에서 CSS 다운로드, SCSS 다운로드, JS 다운로드(Tailwind) 버튼을 누르면 프로젝트 설정 파일에 즉시 복사해 쓸 수 있는 코드가 생성됩니다.