기본 상태만 보고 끝냈다

관리자 화면 메뉴의 CSS 를 손봤다. 확인하고 보고했더니 접었을 때 이상하다는 답이 왔다. 접을 수 있다는 것을 몰랐다.

Open Table of contents

상태가 여럿이었다

메뉴에 상태가 여러 가지였다.

펼침 / 접힘
서브메뉴 닫힘 / 열림
항목 선택 / 미선택
마우스 올림 / 안 올림

조합하면 열여섯 가지인데 나는 그중 하나만 봤다.

접힘 상태에서는 아이콘만 남고 글자가 사라져야 한다. 내가 고친 padding 값 때문에 아이콘이 잘렸다. 접고 펴는 것이 classList 로 클래스를 붙였다 떼는 방식이라 붙은 쪽에서만 폭이 달라진다.

화면 요소마다 어떤 상태가 있는지 적었다.

좌측 메뉴
  펼침 / 접힘
  서브메뉴 닫힘 / 열림 / 여러 개 열림
  선택 항목 있음 / 없음

상단 바
  로그인 / 비로그인
  알림 있음 / 없음

목록
  자료 있음 / 없음 / 1건만 / 한 페이지 초과

목록이 있으니 무엇을 확인해야 할지가 정해진다. 무엇을 보고 무엇을 안 봤는지도 분명해진다.

조합이 많아서 전부 보는 것은 무리라 우선순위를 뒀다.

반드시 본다
  기본 상태
  각 상태의 극단 (자료 0건, 아주 많음)
  이번에 고친 것이 영향 주는 상태

여유 있으면 본다
  조합 상태

이번 수정은 padding 값이라 접힘 상태에 영향이 있었고 그것부터 봤어야 했다. 고친 것이 무엇에 영향을 주는지를 먼저 생각하면 볼 것이 좁혀진다.

어떤 상태는 만들기 번거로웠다. 알림 있음 상태를 보려면 알림을 발생시켜야 한다.

알림 있음    관리자 > 알림 테스트 발송
자료 0건     검색어에 없는 값 입력 (예: zzz)
한 페이지 초과  검색 조건 없이 전체 목록
비로그인     새 창(시크릿 모드)으로 열기
접힘 상태    좌측 하단 화살표 클릭

만드는 방법을 적어 두니 다음에 확인할 때 빨랐다.

목록 화면에서 자료가 0건일 때를 안 보는 경우가 많았다. 개발 중에는 시험 자료가 있어서 항상 뭔가 나오고 0건 화면을 볼 일이 없다.

실제로 확인해 보니 문제가 있었다. thead 만 남고 빈 영역이 보였고 페이지 번호가 0 나누기 0으로 나왔다. 전체 선택 checkbox 도 눌렸다.

<?php if (empty($list)): ?>
  <tr><td colspan="6" class="empty">조회된 자료가 없습니다.</td></tr>
<?php endif; ?>

안내 문구를 넣고 검색 조건이 있으면 문구를 다르게 했다.

조회된 자료가 없습니다.          (조건 없음)
검색 조건에 맞는 자료가 없습니다.  (조건 있음)

WHERE 없이 센 결과가 0이면 아직 아무것도 없다는 뜻이고 WHERE 가 걸린 채로 0행이면 그 조건에 맞는 것이 없다는 뜻이라 사용자가 할 일이 다르다.

작은 화면에서 확인 안 한 것도 있었는데 table 이 잘려서 오른쪽 컬럼이 안 보였다. 주로 쓰는 해상도 세 가지를 정해서 그것만 봤다.

1920 × 1080   대부분
1366 × 768    노트북
1024 × 768    오래된 것

이것을 access_log 에서 고르려 했는데 거기에는 그 값이 없었다. 서버에 남는 것은 주소와 User-Agent 같은 헤더뿐이고 브라우저는 화면이 몇 픽셀인지를 요청에 실어 보내지 않는다.

픽셀 단위로 알려면 화면 쪽에서 screen.width 를 읽어 따로 보내 줘야 한다. 그 전까지는 @media 로 갈라 둔 구간의 경계값을 대표 크기로 잡아 두고 봤다.

한 번 만든 목록은 파일로 남겼다.

docs/check/admin-menu.md
docs/check/product-list.md

그 화면을 다시 고칠 때 이 목록으로 확인하니 매번 무엇을 볼지 생각 안 해도 된다. 목록은 확인하다 새로 발견한 것을 추가하며 늘어난다.