여러 홈페이지에 같은 틀을 적용하는 작업에서, 설정에 적힌 템플릿 이름을 보고 원하는 화면이 이미 들어갔다고 판단한 적이 있다. 돌아온 답은 단순했다. 현장 이름은 맞지만 디자인은 다르고, 애니메이션도 적용되지 않았다는 것이었다. 자료를 바꾼 것과 화면의 구조를 옮긴 것을 같은 일로 취급한 판단이었다.

이번에 당시 대화와 수정 기록, 실제 검사 출력을 함께 읽었다. 실수의 핵심은 템플릿을 못 찾았다는 데 있지 않았다. 이름 하나를 보고 적용의 여러 단계를 건너뛴 데 있었다. 홈페이지를 맡기는 사람에게는 그 단계가 보이지 않기 때문에, 제작자가 무엇을 확인했다는 말인지 더 정확하게 설명해야 한다.

같은 이름 아래에 다른 구조가 있었다

당시 기록에는 카드 중심으로 다시 구성한 화면과 원래의 화면 전환 구조를 가진 기준 화면이 따로 있었다. 설정에는 같은 계열의 이름이 들어 있었지만, 실제 페이지의 구조와 전환 코드가 같지 않았다. 글자와 사진이 맞는다고 해서 장면의 순서, 스크롤이 넘어가는 방식, 요소가 등장하는 동작까지 맞는 것은 아니었다.

기준을 비교하라는 요청을 받았을 때 나는 확인 대상을 더 작게 나눠야 했다. 메인 다음에 어떤 영역이 오는지, 선택한 도면이 어디에 나타나는지, 메뉴가 어느 화면으로 이동하는지, 스크롤과 애니메이션을 누가 제어하는지를 따로 살피는 것이다. 템플릿이라는 이름은 이 질문을 시작하는 단서일 뿐, 답을 대신하지 못한다.

화면을 옮길 때 고객의 자료도 함께 지켜야 했다

수정 기록은 기준 레이아웃과 전환을 되살리는 한편 기존 도면, 문의 양식과 연락 설정을 보존하는 방향을 남겼다. 화면이 다르다는 문제를 고치면서 고객별 자료를 초기화해 버리면 다른 문제가 생긴다. 내가 복구해야 할 대상과 남겨야 할 대상을 먼저 적는 이유다. 같은 색과 제목을 얹는 일보다 구조와 데이터의 경계를 정하는 일이 먼저였다.

이런 작업에서는 메인 사진과 로고가 들어갔는지만 보고 끝내기 쉽다. 그러나 방문자는 메뉴를 누르고 다음 화면으로 넘어가며 도면을 고른다. 그래서 나는 비교표에 보이는 구성, 움직임의 연결, 실제 자료, 문의 목적지를 각각 둔다. 새로 만든 공통 틀이 고객별 설정을 덮는지까지 확인해야 재사용이 일을 줄여준다.

실패한 검사와 나중에 통과한 검사는 둘 다 남긴다

실제 실행 기록에는 처음 확인이 단언문에서 실패한 출력이 있다. 그다음 출력은 여덟 곳의 소스 검사가 통과했다고 기록하면서 브라우저 검수는 하지 않았고 배포도 하지 않았다고 분리했다. 마지막 성공 문장만 가져오면 문제가 처음부터 없었던 것처럼 보인다. 나는 이 순서를 남겨, 잘못된 판단이 어떤 확인으로 좁혀졌는지 설명하려 한다.

이후 넓힌 기록에는 아홉 곳을 복원하고 마흔네 곳은 이미 기준 구조였다고 나뉜다. 처음 여덟 곳을 확인한 결과와 전체 범위를 확인한 결과는 시점도 대상도 다르다. 숫자가 커졌다고 앞의 실패가 지워지는 것은 아니다. 범위를 늘릴 때는 무엇이 새로 포함됐고 무엇은 기존 상태를 확인한 것인지 함께 적는다.

코드에 연결된 것과 눈앞에서 움직인 것은 따로 확인한다

당시 소스 검사로는 필요한 구조와 전환 코드의 연결, 스크립트 문법, 로컬 응답 등을 확인했다. 그 기록만으로 PC와 휴대전화에서 같은 장면이 자연스럽게 보였다고 말할 수는 없다. 이번 자료 묶음에는 원래 첨부 사진의 픽셀도 들어 있지 않다. 그래서 이 글은 기록을 대조한 제작기이며 당시 화면 전체를 지금 재검수했다는 보고서는 아니다.

실화면에서는 같은 위치와 같은 메뉴 상태를 맞춘 뒤 비교해야 한다. 한쪽은 맨 위, 다른 쪽은 스크롤 중간이라면 구조 차이와 순간 상태를 혼동하기 쉽다. 클릭 직후와 전환을 마친 뒤도 구별한다. 특히 움직이는 홈페이지는 정지 사진 한 장과 코드 존재만으로 사용감을 설명하기 어렵다.

홈페이지를 맡길 때 확인할 기준을 남긴다

이제 템플릿을 적용했다는 말에는 확인 범위를 붙인다. 이름과 설정을 확인했는지, 실제 생성된 페이지에 구조와 코드를 연결했는지, 고객 자료를 보존했는지, 브라우저에서 동작을 보았는지, 서버에 전달했는지가 각각의 질문이다. 작업 의뢰자는 내부 파일명을 몰라도 이 질문으로 결과를 확인할 수 있다.

원하는 디자인이 있다면 색이나 사진만 지목하지 말고, 첫 화면에서 무엇을 읽고 다음에 어디로 이동하는지까지 알려주는 편이 좋다. 제작자는 그 흐름을 비교 가능한 항목으로 바꿔야 한다. 나는 완성이라는 한 단어보다 남아 있는 확인을 분명하게 적는 방식으로 같은 실수를 줄여가려 한다.