CSS 셀렉터 명시도 및 매칭 시각화기 - 페이퍼 팝업북 스타일 셀렉터 디버거 & 계층 계산기

CSS 셀렉터 명시도 및 매칭 시각화기는 복잡한 CSS 규칙 충돌과 명시도(Specificity) 계산 문제를 해결하기 위해, 입력된 셀렉터의 가중치를 W3C 표준에 맞춰 분석하고 실제 DOM 마크업에서 일치하는 요소를 3D 팝업북 페이퍼 아트 형태로 생생하게 띄워 보여주는 인터랙티브 개발 도구입니다.

개발자는 복잡한 CSS 캐스케이드(Cascade)와 선택자 우선순위를 추측에 의존하지 않고 종이 인형 옷장과 팝업북 테마의 직관적인 시각 피드백을 통해 정확하게 파악하고 최적화할 수 있습니다.

🌟 주요 기능 (Key Features)

1. W3C 표준 기반 명시도(Specificity) 정밀 계산기

• 4단계 가중치 튜플 분석: (Inline, ID, Class/Attribute/Pseudo-class, Element/Pseudo-element) 사양에 따라 점수를 정확하게 산출합니다.
• 최신 CSS 의사 클래스 완벽 지원: :is(), :not(), :has()처럼 인수 목록 중 최고 명시도를 채택하는 복합 선택자와 항상 0점을 부여하는 :where() 가상 클래스를 표준에 맞춰 파싱합니다.
• 종이 조각 토큰화(Tokenizer): 입력된 셀렉터를 조각조각 분해하여 태그, 클래스, 속성, 콤비네이터별 기여 점수를 색종이 스티치 카드로 상세히 안내합니다.

2. 3D 페이퍼 팝업북 실시간 DOM 매칭 뷰어

• 입체 팝업 리프트 효과: 셀렉터를 입력하는 즉시 일치하는 DOM 요소들이 바닥에서 3D로 솟아오르는 팝업북 애니메이션과 함께 입체 종이 리본 뱃지가 부착됩니다.
• 3가지 인터랙티브 템플릿:
  • 종이 인형 드레스룸: 캐릭터, 옷장, 셔츠, 가방, 가격표 등 다채로운 계층 구조 지원.
  • 팝업 베이커리 & 티룸: 진열대, 상품 카드, 장바구니 버튼 등 커머스 레이아웃.
  • 모던 웹 UI 킷: 내비게이션 바, 카드 대시보드, 사이드바 툴킷.
• 대화형 노드 계층 트리: DOM 구조를 점선 스티치 트리로 탐색하고 요소를 클릭하면 태그명과 경로, 매칭 여부를 플로팅 인스펙터로 즉시 검사합니다.

3. 명시도 배틀 & 종이 시소(Seesaw) 저울

• 두 셀렉터(Selector A vs Selector B)를 입력하여 어느 쪽의 우선순위가 높은지 팝업북 시소 저울로 비교합니다.
• 더 무거운 명시도를 가진 쪽으로 저울이 기울어지며 승패를 가른 결정적 요인(예: ID 개수 차이, 클래스 개수 차이)과 동점일 때의 소스 순서(Source Order) 원칙을 구체적으로 설명합니다.

4. 파일 드래그 앤 드롭 및 다목적 익스포트

• 파일 불러오기: .html 파일을 드롭하여 사용자 커스텀 DOM을 시각화하거나 .css 파일을 드롭하여 포함된 셀렉터를 일괄 추출합니다.
• 다양한 내보내기 형식:
  • 독립 실행형 HTML 테스트베드: 매칭된 요소에 스타일이 적용된 단일 HTML 파일 다운로드.
  • 마크다운(.md) 분석 리포트: 튜플 점수, 토큰 분해 표, 매칭된 노드 목록이 정리된 보고서 저장 및 클립보드 복사.
  • 드래그 아웃(Drag-out): 종이 카드를 컴퓨터 폴더로 직접 끌어다 놓아 즉시 파일로 저장 가능.

👥 대상 사용자 (Target Audience)

• 프론트엔드 웹 개발자: !important 남발 없이 깨끗하고 유지보수하기 쉬운 CSS 명시도 아키텍처를 설계하려는 개발자.
• 웹 퍼블리셔 & UI/UX 디자이너: 작성한 셀렉터가 의도한 DOM 요소에 정확하게 매칭되는지 시각적으로 검증하려는 디자이너.
• 웹 개발 입문자 & 학생: CSS 캐스케이드 우선순위와 셀렉터 계층 구조를 재미있고 직관적인 팝업북 메타포로 학습하려는 학습자.

💡 활용 사례 (Use Cases)

1. CSS 스타일 덮어쓰기 디버깅: 특정 버튼이나 카드의 스타일이 적용되지 않을 때, 기존 규칙과 신규 규칙의 명시도를 배틀 모드로 비교하여 원인을 규명할 때.
2. 리팩토링 및 선택자 간소화: 지나치게 길고 깊은 선택자를 간결한 클래스 조합이나 시맨틱 선택자로 재구성할 때.
3. 디자인 시스템 및 컴포넌트 검증: 컴포넌트 마크업 구조에서 예상치 못한 하위 요소 매칭이 발생하지 않는지 DOM 트리와 실시간 매칭 뷰로 사전 검증할 때.

⚠️ 제한 사항 (Limitations)

• 본 도구는 클라이언트 측 브라우저 엔진의 DOMParser와 표준 정규식 기반 토크나이저를 사용하며 서버 통신 없이 안전하게 로컬 환경에서 실행됩니다.
• CSS 전처리기(Sass, Less)의 중첩 문법(&.nested)은 순수 CSS 문법으로 컴파일된 형태로 입력해야 정상 분석됩니다.

🛠️ 사용 방법 (How to Use)

1. 셀렉터 입력 또는 추천 선택:
   • 상단 입력창에 테스트할 CSS 셀렉터를 입력하거나(예: #doll-chara .doll-outfit), 하단의 💡 추천 셀렉터 알약 버튼을 클릭합니다.
2. 팝업북 캔버스에서 매칭 확인:
   • 입력과 동시에 캔버스 내 일치하는 요소들이 3D 입체 팝업 형태로 들뜨며 우측 계층 트리에서도 매칭 번호가 표시됩니다.
   • 요소를 직접 클릭하여 요소의 정확한 태그, 클래스, DOM 경로를 인스펙터로 확인할 수 있습니다.
3. 명시도 세부 분해 및 배틀 비교:
   • 📊 명시도 세부 분해 탭으로 이동하여 4단계 종이 큐브 점수와 토큰별 가중치 카드를 확인합니다.
   • ⚔️ 명시도 배틀 탭에서 두 개의 경쟁 셀렉터를 입력하고 종이 시소 저울을 작동시켜 우선순위 결과를 확인합니다.
4. 마크업 변경 및 결과 내보내기:
   • 📝 마크업 편집 탭에서 직접 HTML을 수정하거나 외부 파일을 드래그 앤 드롭으로 업로드합니다.
   • 상단 📦 파일 내보내기 버튼을 눌러 독립 실행형 HTML 테스트베드나 마크다운 리포트를 다운로드합니다.

❓ 자주 묻는 질문 (FAQ)

Q1. :is()와 :where()의 명시도 계산 방식은 어떻게 다른가요?

A. :is(.classA, #idB)는 괄호 내부 셀렉터 중 가장 높은 명시도인 ID 가중치 (0, 1, 0, 0)을 전체 선택자의 명시도로 취합니다. 반면 :where(.classA, #idB)는 내부 선택자의 종류와 관계없이 항상 명시도 (0, 0, 0, 0)을 부여하여 언제든 다른 스타일로 쉽게 덮어쓸 수 있도록 돕습니다.

Q2. 클래스 10개를 모으면 ID 1개의 명시도를 이길 수 있나요?

A. 아니요, 이길 수 없습니다. CSS 명시도는 단순 10진수 덧셈이 아니라 (Inline, ID, Class, Element) 형태의 자리수 튜플로 비교됩니다. ID 자릿수(Level A)가 1개라도 있으면 클래스 자릿수(Level B)가 아무리 많아도 ID를 이길 수 없습니다.

Q3. 입력한 마크업과 CSS 코드가 외부 서버로 전송되나요?

A. 전혀 전송되지 않습니다. 모든 계산과 렌더링, 파일 파싱은 사용자의 웹 브라우저 메모리 안에서만 100% 클라이언트 사이드로 구동되므로 기밀 프로젝트 코드도 안전하게 테스트할 수 있습니다.