작업 방식
멤버 목록은 짧은 이름에서는 잘 동작하다가도 이메일이 길어지면 액션 메뉴가 사라질 수 있습니다. Break UI는 화면에 표시되는 모든 값을 props, 픽스처 또는 API 데이터까지 추적하고, 허용 한도를 확인한 뒤 같은 경계에서 데이터를 교체합니다. 실패를 만들어 내기 위해 레이아웃을 바꾸지 않습니다.
비교 과정은 직접 확인할 수 있도록 설계되었습니다. 데모 데이터와 최악의 데이터를 전환해 볼 수 있고, 필요하면 빈 상태, 항목 하나, 대용량 목록 상태를 따로 확인합니다. 보고서는 읽을 수 없거나 접근할 수 없는 콘텐츠, 시각적 손상, 취약한 가정을 구분하며, 이미 문제없이 동작한 부분도 기록합니다.
예상 산출물
- 출처, 제한, 선택적 값이 포함된 필드 목록
- 최악의 경우를 담은 픽스처와 개발 전용 데이터셋 전환기
- 우선순위를 매긴 실패 사례, 수정 제안, 담당자가 결정할 사항
입력에서 결과까지
- 01표시되는 모든 값 매핑
컴포넌트, 검증 규칙, API 형태를 읽습니다. 텍스트 입력뿐 아니라 개수, 배지, 이미지, 목록 길이를 포함해 제한과 필드 누락 시 동작을 기록합니다.
- 02그럴듯한 엣지 케이스 만들기
긴 이름, 짧은 이름, 누락된 필드, 현지화된 레이블을 기존 데이터와 같은 형태의 픽스처에 조합합니다. 알려진 경우 스키마 제한을 사용하고, 제한이 없는 필드는 임의로 한도를 만들지 말고 그대로 기록합니다.
- 03실제 크기에서 비교
전환기는 개발 환경이나 프로토타입 경로에만 둡니다. 컴포넌트의 실제 컨테이너, 320px, 가장 넓은 레이아웃, 확대된 텍스트에서 확인하고, 제품이 지원한다면 다크 모드와 RTL도 포함합니다.
- 04수정 전에 보고
각 실패 사례에 심각도, 유발 값, 수정 제안, 파일 위치를 적습니다. 줄바꿈과 말줄임 중 무엇을 택할지 같은 결정은 멈추고 확인하며, 수정은 요청된 경우에만 적용한 뒤 데모 상태와 극단 상태를 다시 테스트합니다.