작업 방식
에이전트는 실제 이미지에서 시작해 크기, 보이는 문구, 위계, 비율, 에셋을 확인합니다. 또한 대상 프로젝트를 읽어 구현이 기존 프레임워크와 화면에 맞도록 합니다. 잘린 스크린샷은 보이는 영역만 정의하며, 나머지 페이지를 임의로 만들어도 된다는 뜻이 아닙니다.
구현에는 실제 레이아웃, 텍스트, 컨트롤을 사용합니다. 레퍼런스 뷰포트가 일치하면 에이전트는 요청된 다른 크기도 확인합니다. 마지막 단계는 레퍼런스와 같은 크기로 렌더링하고, 글꼴과 이미지가 로드되길 기다린 뒤 결과를 비교해 눈에 띄는 차이를 고치는 것입니다. 누락된 에셋과 검증되지 않은 렌더링은 명시적으로 남겨야 합니다.
예상 결과물
- 대상 프로젝트의 스택과 적절한 재사용 컴포넌트를 사용한 편집 가능한 인터페이스 코드
- 백엔드 기능을 임의로 만들지 않고 기존 동작에 연결된, 요청된 컨트롤
- 실제로 수행한 시각 비교, 남은 차이, 누락된 에셋에 대한 간단한 설명
레퍼런스에서 비교까지
- 01실제 이미지 살펴보기
파일명이나 추출된 텍스트만이 아니라 이미지 자체를 읽으세요. 코드를 수정하기 전에 크기, 보이는 영역, 정렬, 타이포그래피, 에셋을 파악합니다.
- 02레퍼런스 크기로 구현
기존 스택에서 위계, 줄바꿈, 간격, 크롭을 맞춥니다. 컴포넌트가 레퍼런스를 재현할 수 있다면 재사용하되, 관련 없는 기본값에 억지로 맞추지 마세요.
- 03렌더링하고 수정
실행 중인 화면을 같은 뷰포트에서 캡처합니다. 먼저 큰 레이아웃과 비율 차이를 비교하고, 이어서 타이포그래피, 색상, 작은 디테일을 비교하세요. 변경 후에는 다시 렌더링합니다.
- 04요청된 변형 확인
레퍼런스 크기가 맞춰진 뒤에는 요청된 반응형 크기와 작동하는 컨트롤을 테스트합니다. 픽셀 단위로 완벽하다고 약속하는 대신 남은 불일치를 보고하세요.