홈페이지에 글을 올리기 직전이면 내용보다 화면이 먼저 걱정될 때가 있습니다. 제목이 어색하게 끊기지는 않을지, 첫 화면의 요약이 너무 길지는 않을지, 목차와 자주 묻는 질문이 제자리에 나올지 확인하고 싶습니다. 특히 회사 이름으로 나가는 글이라면 발행 버튼을 누르기 전에 방문자의 눈으로 한 번 보고 싶어집니다.
이노자일의 글 편집기에도 미리보기는 있었습니다. 하지만 본문만 보여 줬습니다. 방문자가 보는 글 화면에는 제목과 요약, 읽는 시간, 목차, 관련 글, 상단 메뉴와 하단 안내까지 함께 놓입니다. 이전에는 그 전체 모습을 보려면 글을 공개해야 했습니다. 발행 전 마지막 확인에 필요한 화면이 따로 있었던 셈입니다.
글을 공개하지 않고 전체 화면 보기
관리 화면의 글 목록과 편집 화면에 사이트 미리보기 버튼을 두었습니다. 버튼을 누르면 새 탭에서 방문자용 글 화면과 같은 구성으로 글을 볼 수 있습니다. 아직 공개하지 않은 초안도 열리고, 공개 날짜를 정해 둔 예약 글도 확인할 수 있습니다.
예약 글은 예정된 공개 날짜를 화면의 날짜 자리에 보여 줍니다. 화면 아래에는 현재 미리보기인지, 초안인지 예약 글인지 알려 주는 작은 안내가 뜹니다. 안내를 글 사이에 끼우지 않은 이유는 간단합니다. 확인하려는 화면의 줄 간격과 배치가 그 안내 때문에 달라지면 곤란하기 때문입니다.
이때 보는 내용은 마지막으로 저장한 글입니다. 편집 화면에서 문장을 바꾼 뒤 아직 저장하지 않았다면 그 수정은 사이트 미리보기에 나타나지 않습니다. 버튼에도 이 점을 알립니다. 새로 쓰기 시작해 한 번도 저장하지 않은 글에는 버튼을 표시하지 않았습니다.
공개 화면과 어긋나지 않게 한 방법
미리보기용 글 화면을 별도로 만들면 처음에는 비슷해 보일 수 있습니다. 그러나 나중에 제목 위치나 목차 디자인을 바꿀 때 공개 화면만 고치면, 미리보기는 예전 모습을 보여 주게 됩니다.
그래서 글의 제목, 요약, 본문, 목차, 자주 묻는 질문, 관련 글을 그리는 부분을 공개 화면과 미리보기에서 함께 쓰도록 했습니다. 상단 메뉴와 하단 영역도 같은 화면 요소를 사용합니다. 다만 미리보기에는 아래쪽 안내가 추가되고 방문 기록을 남기는 기능은 빠집니다. 확인할 글의 모습을 함께 유지하면서, 공개 페이지와 달라야 할 부분은 분리한 것입니다.
화면이 같다는 판단을 눈대중에만 맡기지 않았습니다. 시험용 초안이 미리보기에서 열리는지 먼저 확인하고, 발행한 뒤에는 미리보기와 공개 글을 비교하는 자동 테스트를 만들었습니다. 테스트는 제목을 볼 수 있는지 확인하고, 발행 후 두 화면의 글 영역에 표시된 문장을 비교합니다. 메뉴를 눌렀을 때의 이동 경로나 화면의 모든 픽셀까지 같다고 시험한 것은 아닙니다.
미리보기가 공개 글처럼 기록되지 않도록
미리보기는 관리자만 열 수 있게 했습니다. 로그인하지 않은 사람이 주소를 알아도 글을 볼 수 없고, 검색 서비스가 이 화면을 수집하지 않도록 색인도 막았습니다.
조회 수 역시 구분했습니다. 공개 글에는 열람과 끝까지 읽은 여부를 기록하는 기능이 있지만, 미리보기에는 붙이지 않았습니다. 관리자 화면에는 공개 사이트의 방문 통계 도구도 싣지 않았습니다. 담당자가 글을 여러 번 확인한 일이 방문자의 열람 기록으로 섞이지 않게 하려는 선택입니다.
상단 메뉴와 하단 링크는 글을 실제로 읽는 화면의 분위기를 확인하기 위해 보이게 했습니다. 다만 관리 화면은 별도 주소에서 열릴 수 있으므로, 미리보기에서 링크를 따라가는 동작까지 공개 사이트와 같다고 보장하지는 않습니다. 이 화면은 발행 전 모습을 확인하는 곳으로 두었습니다.
저장 전 수정은 왜 바로 보여 주지 않을까
미리보기 버튼을 누를 때 편집 중인 내용을 자동 저장하면 더 편해 보일 수도 있습니다. 하지만 이미 공개한 글은 저장하는 순간 수정 내용이 방문자에게 보일 수 있습니다. 화면을 확인하려던 행동이 의도치 않은 발행이 되는 셈입니다.
그래서 편집기 안의 본문 미리보기와 사이트 미리보기를 구분했습니다. 문장을 고치는 중에는 본문 미리보기에서 방금 쓴 내용을 바로 확인할 수 있습니다. 방문자에게 보일 글 전체를 점검할 때는 저장된 내용으로 사이트 미리보기를 엽니다. 두 화면이 보여 주는 시점이 다르다는 것을 버튼 안내에도 적었습니다.
이 일을 하며 글 관리 화면에서 중요한 기준도 하나 생겼습니다. ‘미리보기 제공’이라는 말만으로는 충분하지 않았습니다. 본문만 보여 주는지, 발행될 화면 전체를 보여 주는지, 저장하지 않은 수정까지 포함하는지, 확인하는 동안 글이 공개되거나 조회 수가 늘지는 않는지에 따라 실제 사용감이 달랐습니다. 글을 자주 올리는 사이트라면 이런 차이가 발행 전 마지막 확인을 얼마나 안심하고 할 수 있는지 결정합니다.