프론트엔드
웹 접근성 완전 가이드: ARIA 패턴과 키보드 인터랙션
웹 접근성 완전 가이드: ARIA 역할/속성/상태, 복잡한 UI 패턴(모달/탭/드롭다운) 접근성 구현, 키보드 포커스 관리, aria-live로 동적 콘텐츠 알림, 스킵 내비게이션, WCAG 2.2 기준을 다룹니다.

studio-web-craft.xyz — frontend · perf · dx
빌드·배포·관측을 실무 실험과 문서화로 병행합니다. 짧은 메모와 긴 분석을 같은 블로그에 올립니다.
웹 프론트엔드·렌더링·번들·성능·DX를 브라우저 제품 관점에서 정리한 기술 블로그입니다. React·Next·TypeScript, 테스트·CI는 인용·출처를 우선합니다.
프론트엔드
웹 접근성 완전 가이드: ARIA 역할/속성/상태, 복잡한 UI 패턴(모달/탭/드롭다운) 접근성 구현, 키보드 포커스 관리, aria-live로 동적 콘텐츠 알림, 스킵 내비게이션, WCAG 2.2 기준을 다룹니다.
프론트엔드
Vite 플러그인 개발 완전 가이드: Rollup 기반 플러그인 훅, transform/resolveId/load 훅 구현, 가상 모듈 패턴, HMR 커스터마이징, 환경별 플러그인 적용, 플러그인 테스트 전략을 다룹니다.
프론트엔드
CSS Scroll-Driven Animations 완전 가이드: animation-timeline: scroll()과 view()로 스크롤 연동 애니메이션, @scroll-timeline, scroll-timeline-name, ViewTimeline API, 진행률 바, 패럴랙스, 등장 애니메이션 구현을 다룹니다.
성능
Cache-Control 한 줄이 기대와 다르게 동작할 때가 많습니다. 브라우저 캐시·공유 CDN·원본·엣지 함수의 역할을 나누고, GET과 변이 요청, 재검증까지 한눈에 정리합니다.
성능
번들 시각화로 거대 의존성을 찾고, 라우트·기능 단위 dynamic import, 트리셰이킹 친화 설정을 점검합니다.
성능
필드 데이터와 랩 데이터를 나눠 보고, LCP 요소·상호작용 지연의 흔한 원인을 좁히는 절차를 정리합니다.
최신 글