작업 방식
Component Canvas는 프로젝트에 이미 있는 컴포넌트를 전체 화면에서 확인할 수 있는 공간을 만듭니다. 지원되는 변형과 유용한 상태를 그룹으로 묶어 디자이너가 한눈에 비교하고 실제 컨트롤을 조작할 수 있게 합니다. 소스는 컴포넌트 구현을 캔버스와 독립적으로 유지합니다.
이 워크플로는 비교의 의미를 구체적으로 정의합니다. 크기를 비교할 때는 텍스트, 스타일, 데이터를 고정하고, 스타일을 비교할 때는 스타일만 바꿉니다. 네이티브 포털, 포커스, 중첩 스크롤도 유지하므로 유용한 미리보기는 기본 상태 스크린샷 이상의 상호작용에서도 작동해야 합니다.
예상 산출물
- 요청한 컴포넌트를 포함한 독립 캔버스 라우트 또는 진입점.
- 지원 범위 목록과 제외 이유가 기록된 이름 있는 변형 그룹.
- 변경 파일, 실행한 검사, 결정 사항, 미검증 동작을 담은 보고서.
브리프에서 검토까지
- 01안전한 예제 하나부터 마운트
컴포넌트 공개 API와 프로젝트 관례를 읽습니다. 단일 컴포넌트를 마운트하기 전에 픽스처 데이터, 모의 객체 또는 기존 콜백을 사용해 실제 쓰기 작업을 방지합니다.
- 02비교 가능한 그룹 구성
지원하는 변형을 일관된 그룹으로 추가합니다. 한 번에 비교 차원 하나만 바꾸고 컴포넌트의 실제 비활성화, 포커스, 인터랙션 동작을 유지합니다.
- 03컴포넌트를 둘러싼 캔버스 검증
중첩 스크롤과 네이티브 포털 동작을 포함해 이동, 확대·축소, 화면 맞춤, 키보드 탐색을 테스트합니다. 카메라만 저장하며 초기화해도 미리보기 상태가 유지되는지 확인합니다.