이 프로젝트를 처음 시작하게 된 동기는 각 웹사이트에 있는 버튼들을 3D 효과를 주면 이쁘지 않을까? 하는 마음에 시작하게 되었지만, 생각보다 button 태그가 없었다..
이럴거면 모든 태그에 효과를 주어야 하나? 하는 생각에 오히려 모든 태그를 분석할 수 있는 프로그램을 만들자고 생각을 하였고 그래서 새롭게 기획한 내용입니다.
HTML 태그 시각화 분석 도구 - 기획서
🎯 프로젝트 개요
개발 동기
웹사이트를 둘러보며 버튼들을 분석하던 중, 예상과 다른 현실을 발견:
- 예상: "이 버튼은
<button>태그겠지?" - 현실: 실제로는
<div>,<a>,<span>등 다양한 태그 사용 - 문제점: 어떤 태그가 사용되었는지 직관적으로 알기 어려움
- 결론: 단순히
<button>태그만 분석하는 것은 한정적, 실제 웹사이트 구조 분석에는 전체 태그 파악이 필요
목표
웹사이트의 HTML 구조를 시각적으로 분석할 수 있는 개발자/디자이너용 크롬 확장 프로그램
핵심 가치
- 분석: 웹사이트가 실제로 어떤 태그로 구성되었는지 파악
- 학습: 다른 사이트의 마크업 패턴 습득
- 효율성: 개발자 도구보다 빠르고 직관적인 태그 확인
🎪 주요 기능
1. 태그 선택 및 하이라이트
팝업에서 원하는 HTML 태그를 선택하면 해당 페이지의 모든 해당 태그를 시각적으로 하이라이트
팝업 UI 레이아웃:
┌────────────────────────────────┐
│ HTML 태그 분석 도구 │
├────────────────────────────────┤
│ 📝 기본 태그 │
│ [button] [div] [span] │
│ [a] [p] [h1] [h2] [h3] │
│ │
│ 🏗️ 구조 태그 │
│ [header] [nav] [main] │
│ [section] [article] [aside] │
│ [footer] │
│ │
│ 📋 폼 태그 │
│ [input] [textarea] [select] │
│ [form] [label] │
│ │
│ 📊 통계 │
│ button: 12개 발견 │
│ div: 156개 발견 │
│ 현재 하이라이트: button │
└────────────────────────────────┘2. 태그별 차별화된 시각 효과
버튼 관련 태그
<button>: 🔵 파란색 3D 효과 + 펄스<input type="button/submit">: 🔵 파란색 점선 테두리<a>(버튼 역할): 🟣 보라색 테두리 + 링크 아이콘
구조 태그
<div>: 🟢 초록색 반투명 배경<span>: 🟡 노란색 인라인 하이라이트<section>: 🔴 빨간색 구조 박스
시맨틱 태그
<header>: 📌 "HEADER" 라벨 표시<nav>: 🧭 "NAV" 라벨 표시<main>: 🎯 "MAIN" 라벨 표시<footer>: 📍 "FOOTER" 라벨 표시
3. 상세 정보 표시
하이라이트된 요소에 호버 시 상세 정보 툴팁:
┌────────────────────────────┐
│ <div> 태그 │
├────────────────────────────┤
│ • 클래스: btn btn-primary │
│ • ID: main-button │
│ • 크기: 120px × 40px │
│ • 위치: (250, 300) │
│ • 역할: 버튼처럼 동작 │
└─────────────────────────────┘4. 다중 태그 선택
여러 태그를 동시에 선택하여 비교 분석 가능:
- 체크박스 방식으로 다중 선택
- 각 태그별로 다른 색상으로 구분
- "전체 해제" 버튼으로 한 번에 정리
5. 통계 및 요약
페이지의 태그 사용 현황을 숫자로 표시:
- 각 태그별 개수
- 가장 많이 사용된 태그 순위
- 시맨틱 태그 사용률
🔧 기술적 구현 방향
1. 태그 감지 및 분류
// 선택된 태그들 찾기
function findElementsByTags(selectedTags) {
const results = {};
selectedTags.forEach(tag => {
results[tag] = Array.from(document.querySelectorAll(tag))
.filter(isVisible);
});
return results;
}
// 태그별 통계 생성
function generateTagStatistics() {
const allTags = ['div', 'span', 'button', 'a', 'p', 'h1', 'h2', 'h3',
'header', 'nav', 'main', 'section', 'article', 'footer'];
return allTags.map(tag => ({
name: tag,
count: document.querySelectorAll(tag).length
})).sort((a, b) => b.count - a.count);
}2. 시각적 하이라이트 시스템
/* 태그별 하이라이트 스타일 */
.tag-highlight-button {
outline: 3px solid #3B82F6 !important;
box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.3) !important;
animation: pulse-blue 2s infinite !important;
position: relative !important;
}
.tag-highlight-div {
background: rgba(16, 185, 129, 0.15) !important;
outline: 2px solid #10B981 !important;
}
.tag-highlight-a {
outline: 2px dashed #8B5CF6 !important;
position: relative !important;
}
/* 시맨틱 태그 라벨 */
.tag-highlight-header::before {
content: "HEADER" !important;
position: absolute !important;
top: -25px !important;
left: 0 !important;
background: #EF4444 !important;
color: white !important;
padding: 2px 8px !important;
font-size: 12px !important;
font-weight: bold !important;
}3. 상태 관리
// 전역 상태
const appState = {
selectedTags: new Set(),
highlightedElements: new Map(),
isEnabled: true,
showLabels: true,
showStatistics: true
};
// 태그 선택/해제
function toggleTag(tagName) {
if (appState.selectedTags.has(tagName)) {
removeHighlight(tagName);
appState.selectedTags.delete(tagName);
} else {
addHighlight(tagName);
appState.selectedTags.add(tagName);
}
updateUI();
}📊 사용자 시나리오
시나리오 1: 프론트엔드 개발자
- 경쟁사 사이트의 버튼 구현 방식 궁금
- 확장 프로그램에서
<button>클릭 → 실제 button 태그는 거의 없음 <div>,<a>태그도 추가로 선택 → 대부분이 div나 a 태그로 구현됨- "아! 이 사이트는 이런 방식으로 버튼을 만들었구나" 파악
- 자신의 프로젝트에 참고할 패턴 습득
시나리오 2: 웹 디자이너
- 클라이언트가 "이 사이트처럼 만들어주세요" 요청
- 해당 사이트의 구조 분석 필요
<header>,<nav>,<section>등을 순차적으로 선택- 사이트의 전체적인 레이아웃 구조 파악
- 개발자에게 정확한 구조 요구사항 전달
시나리오 3: 웹 접근성 분석가
- 시맨틱 마크업 사용 현황 점검 필요
<button>vs<div>사용 패턴 비교<header>,<main>,<footer>등 구조 태그 사용 여부 확인- 접근성 관점에서 개선점 도출
🎯 핵심 차별화 포인트
기존 개발자 도구 대비 장점
- 직관성: 코드를 읽지 않고도 시각적으로 즉시 파악
- 선택적 분석: 관심 있는 태그만 골라서 확인
- 비교 분석: 여러 태그를 동시에 비교
- 통계 제공: 페이지 전체의 태그 사용 패턴 요약
타겟 사용자
- 프론트엔드 개발자: 다른 사이트의 구현 패턴 분석
- 웹 디자이너: 레이아웃 구조 파악 및 기획
- 웹 기획자: 기능 요구사항 정의 시 참고
- 웹 접근성 전문가: 시맨틱 마크업 검증
🚀 개발 단계
Phase 1: 기본 기능
- 기본 태그 10개 지원 (button, div, span, a, p, h1, h2, h3, input, form)
- 단일 태그 선택 및 하이라이트
- 기본 팝업 UI
- 태그별 개수 통계
Phase 2: 고급 기능
- 다중 태그 선택
- 시맨틱 태그 지원 (header, nav, main, section, article, footer)
- 상세 정보 툴팁
- 하이라이트 on/off 토글
Phase 3: 완성도 향상
- UI/UX 개선
- 성능 최적화
- 버그 수정 및 안정성 확보
기록하고 공유하는 개발자