화면을 옛 판과 같게 만드는 작업을 했다. 다 됐다고 보고했더니 더 이상해졌다는 답을 받았다.
Table of contents
Open Table of contents
무엇과 비교했는지가 문제였다
나는 옛 판의 소스를 보고 만들었다. diff 로 대조해서 다른 부분을 없애고 구조를 그대로 옮겼다.
그런데 사용자가 보는 것은 화면이다. 소스가 같아도 화면이 다를 수 있고 브라우저 기본 CSS 와 로딩 순서와 화면 크기 같은 것이 영향을 준다.
소스를 맞춘 것과 화면을 맞춘 것은 다르다. 무엇을 맞추는 작업인지를 처음에 정확히 잡지 않은 것이 원인이었고 요청은 화면을 맞춰 달라는 것이었는데 나는 소스를 맞췄다.
세 가지를 나란히 봤다
다시 할 때는 세 개를 같이 띄웠다.
1. 원본 데모 제공처가 배포한 그대로
2. 옛 판 우리가 고쳐 쓰던 것
3. 지금 만든 것 이번 작업 결과1번이 있어야 옛 판이 원본에서 무엇을 고쳤는지를 diff 로 안다. 2번만 보면 그 고침이 의도된 것인지 실수인지 모른다.
3번을 어느 쪽에 맞춰야 하는지가 문제인데 물어보니 2번이었다. 옛 판에서 고친 것들이 이유가 있는 것들이었다.
원본과 새로 만든 것만 diff 하면 차이가 0으로 나와 맞다고 판정될 수밖에 없다. 그 판정이 보는 것은 원본과 같은지뿐이다.
셋을 한꺼번에 보는 도구도 있었다. diff3 에 우리 판과 원본과 새로 만든 것을 넘기면 어느 판에서만 다른지를 표식으로 찍어 주므로 의도된 차이와 되돌려진 차이가 갈린다.
차이를 항목으로 적었다
diff3 가 찍어 준 자리를 놓고 항목을 정해 하나씩 봤다.
원본데모 옛판 현재
메뉴 접힘 폭 50px 64px 50px ← 다름
제목 글꼴 20px 20px 18px ← 다름
탭 밑줄 있음 없음 있음 ← 다름
오른쪽 그래프 있음 없음 있음 ← 다름네 가지가 어긋났다. 눈으로 볼 때는 뭔가 다르다였는데 항목으로 적으니 무엇인지 나온다.
오른쪽 그래프는 옛 판에서 일부러 뺀 것이었다. 원본을 보고 만들다가 다시 넣은 것이고 원본에 있다고 다 필요한 것이 아니었다. 각 차이에 대해 svn log 에서 그 줄이 왜 고쳐졌는지를 찾아 의도된 것인지를 확인했다.
화면을 찍어서 비교
항목을 적어도 놓치는 것이 있어서 화면을 저장해 나란히 놨다.
세 화면을 같은 크기로 찍고 겹쳐서 보니 padding 이나 정렬이 몇 픽셀 어긋난 것들이 드러났다. CSS 가 만드는 간격이나 정렬 같은 차이는 diff 에 안 잡히는 종류라 소스만 봐서는 알 수 없었다.
찍은 것을 기록으로 남겼다. 다음에 또 고칠 때 그때 상태를 알 수 있다.
검증 — 확인 시점과 보고
svn diff 에 찍힌 자리만 보는 것과 끝나고 전체를 보는 것을 나눴다. 작업 중에는 고친 부분만 보고 빠르게 반복하며 끝나고는 화면 전체를 항목표로 훑어 다른 데가 깨졌는지 본다.
두 번째를 안 하고 보고해서 더 이상해졌다가 나온 것이었다. diff 에 찍힌 부분은 맞았는데 다른 부분이 깨졌다.
완료만 보고하면 무엇을 확인했는지 상대가 모르니 확인 항목을 같이 냈다.
확인한 것
- 메뉴 접힘/펼침 (원본 데모, 옛 판과 비교)
- 제목 글꼴 크기
- 탭 밑줄
- 목록 화면 5개 (상품/주문/회원/공지/설정)
확인 못 한 것
- 인쇄 화면 (인쇄 미리보기로만 확인)
- 작은 화면 크기 (768px 미만)못 한 것을 적으니 상대가 그것을 봐 줬고 실제로 작은 화면에서 깨지는 것이 있었다. 전부 확인했다고만 적으면 받는 쪽이 그대로 믿는다.
정리
- 소스를 맞춘 것과 화면을 맞춘 것은 다르다
CSS가 만드는 차이는diff에 안 잡힌다- 무엇을 기준으로 같다고 할지 먼저 정한다
- 비교 대상이 하나면 무엇이 기준인지 모른다
- 원본과 기존 판과 지금 것 셋을 나란히 본다
- 원본과 새 것만
diff하면 차이 0으로 통과한다 diff3는 어느 판에서만 다른지를 찍어 준다- 기존 판이 원본에서 고친 것에는 이유가 있을 수 있다
- 눈으로 보면 뭔가 다르다에서 끝나고 항목으로 적으면 무엇인지 나온다
- 화면을 저장해 나란히 놓으면
padding같은 미세한 차이가 드러난다 - 고친 부분만 보지 말고 끝나고 전체를 한 번 훑는다
- 완료 보고에 확인한 것과 못 한 것을 같이 적는다