스킬 자체의 표현으로
접근 가능하고 성능이 뛰어나며 시각적으로 완성도 높은 프로덕션 품질의 사용자 인터페이스를 만듭니다. 이 스킬은 AI가 생성한 것처럼 보이지 않고, 상위 기업의 디자인 감각을 갖춘 엔지니어가 만든 것처럼 보이는 UI를 만드는 데 초점을 맞춥니다. 실제 디자인 시스템 준수, 적절한 WCAG 2.1 AA 접근성, 신중한 상호작용 패턴을 강제하며 일반적인 AI 미학적 클리셰를 피합니다.
이 스킬은 컴포넌트 콜로케이션을 통한 아키텍처, 설정보다 조합을 우선하는 방식, 로컬 useState부터 전역 스토어까지 이르는 상태 관리, 특정 브레이크포인트에서 테스트된 모바일 우선 반응형 디자인, 키보드 내비게이션, ARIA 레이블, 포커스 관리, 의미 있는 빈 상태 및 오류 상태, 스켈레톤 로딩, 체감 속도를 위한 낙관적 업데이트를 다룹니다.
산출물
- 콘텐츠 로딩 중임을 나타내는 aria-busy 및 aria-label을 사용한 스켈레톤 로딩 상태
- role="status", 설명 텍스트, 아이콘, 실행 가능한 다음 단계를 포함한 의미 있는 빈 상태 및 오류 상태
작동 방식
- 01컴포넌트 파일 콜로케이션
컴포넌트 구현, 테스트, 스토리, 커스텀 훅, 타입을 컴포넌트 이름을 딴 단일 폴더에 함께 배치합니다.
- 02컴포넌트를 설정하지 말고 조합하십시오
속성이 많은 설정 객체 대신 중첩된 children을 사용해 조합 가능한 컴포넌트 API를 구성합니다.
- 03데이터 페칭과 표현을 분리하십시오
데이터 로딩, 오류, 빈 상태를 처리하는 컨테이너 컴포넌트를 만들고, 정제된 데이터를 표현 컴포넌트에 전달합니다.
- 04범위에 따라 상태 관리 방식을 선택하십시오
컴포넌트별 UI 상태에는 useState를, 2~3개의 형제 컴포넌트에는 리프트된 상태를, 테마/인증/로케일에는 Context를, 필터와 페이지네이션에는 URL 상태를, 원격 데이터에는 서버 상태 라이브러리를, 복잡한 공유 클라이언트 상태에는 전역 스토어를 사용하십시오.
- 05디자인 시스템 토큰을 따르십시오
원시 헥스 값 대신 text-primary, bg-surface와 같은 시맨틱 컬러 토큰을 사용하고, 0.25rem 단위의 일관된 스페이싱 스케일을 유지하며, 타입 계층을 준수하십시오.
- 06WCAG 2.1 AA 접근성을 구현하십시오
모든 상호작용 요소를 키보드로 접근 가능하게 만들고, 레이블이 없는 컨트롤에 ARIA 레이블을 추가하고, 콘텐츠 변경 시 포커스를 관리하고, 일반 텍스트에 대해 4.5:1 대비를 보장하며, 의미 있는 빈 상태 및 오류 상태를 제공하십시오.