HTML 컴포넌트 리팩토링
적용 시점
- 사용자가 완성된 HTML을 보내며 개선을 요청할 때
- 사용자가 컴포넌트의 반응형, 접근성, 성능 검사를 요청할 때
- 사용자가 애니메이션 추가, 타이포그래피 변경, 시각적 개선을 요청할 때
프로세스
- 현재 HTML 컴포넌트를 가져옵니다.
- 사용자로부터 개선 사항 목록을 받습니다. 목록이 제공되지 않으면 아래 우선순위에 따라 작업합니다.
- 기존 구조를 유지합니다. 처음부터 다시 작성하지 마십시오.
- 업데이트된 HTML과 필요한 CSS/JS(필요한 경우)를 반환합니다.
개선 우선순위 (중요도 순)
1. 타이포그래피
- 제목:
font-heading font-black tracking-tight, 크기text-4xl md:text-6xl - 본문:
leading-relaxed text-slate-600 - '고아 행'이 발생하지 않도록
text-balance를 필요한 곳에 사용 - 대비 확인: 밝은 배경에는 어두운 텍스트, 어두운 배경에는 밝은 텍스트
2. 마이크로 애니메이션
- 스크롤 시 등장:
section-reveal클래스 (템플릿에 이미 있음) - 카드 호버:
hover:-translate-y-1 hover:shadow-xl transition-all - 버튼 호버:
hover:-translate-y-0.5 transition - 아이콘 호버:
group-hover:scale-110 transition-transform
3. 반응형
- 360px 확인: 가로 스크롤 없음, 모든 요소가 화면에 맞음
- 768px 확인: 그리드가 2열로 재구성됨
- 1440px 확인: 콘텐츠가
max-w-7xl이상으로 늘어나지 않음 - 필요한 경우 글꼴 크기에
clamp()사용
4. 접근성 (a11y)
<div>대신 시맨틱 태그 사용- 아이콘 버튼에
aria-label추가 - 포커스 스타일:
focus:ring-2 focus:ring-industrial-orange focus:outline-none - 모든 이미지에
alt속성, 장식용 아이콘에는aria-hidden="true"
5. 성능
- 사용하지 않는 Tailwind 클래스 제거
- 모든 이미지에
loading="lazy"가 있는지 확인 - 이미지에
width와height추가 (CLS 방지) - CSS 중복 없음 — Tailwind 유틸리티 사용
응답 형식
다음 순서로 반환합니다:
- HTML 블록 — 업데이트된 컴포넌트 코드 (복사하기 쉽도록 ```html 래퍼 안에)
- 변경 사항 목록 — 간략하게 3~5개 항목으로 무엇이 개선되었는지 설명
- 추가 CSS/JS — 추가된 경우, 별도 블록으로 어디에 배치할지 명시
호출 예시
사용자:
Hero 컴포넌트를 개선해줘: 타이포그래피를 더 강력하게, 불릿 포인트 등장 애니메이션, 360px 반응형. 코드는 다음과 같습니다: [HTML]
당신:
<section>...업데이트된 코드...</section>변경 사항:
- 제목:
text-5xl md:text-7xl font-black tracking-tight로 강화- 불릿 포인트에
section-reveal추가 및style="animation-delay: Xms"로 지연 효과 적용- 불릿 그리드를
grid-cols-1 sm:grid-cols-2 md:grid-cols-4로 재구성- 360px에서 확인 — 스크롤 없음
- CTA 버튼에
aria-label추가추가 CSS (
src/styles/custom.css에 배치):.hero-bullet { animation: reveal .8s ease-out both; }