지난 글에서는 서브페이지 본문을 워드프레스 관리자에서 수정할 수 있도록 구조를 바꿨다. 본문 HTML은 관리자에 넣고, 디자인은 공통 subpages.css에서 관리하는 방식이다.
이렇게 틀을 만들어두면 나머지 페이지는 같은 방식으로 옮기면 된다. 다만 내용을 넣고 화면을 확인하는 일은 별개였다. 코드는 들어갔는데, 막상 페이지를 보면 아직 다듬어야 할 곳이 많았다.
내용을 옮겼는데 문서처럼 보였다
서브페이지는 메인보다 설명이 많다. 진료 내용을 제목과 본문으로만 쌓으니 정보를 읽을 수는 있어도 홈페이지보다는 안내문에 가까워 보였다. 그렇다고 문장마다 박스를 씌우면 비슷한 카드만 계속 반복됐다.
척추 클리닉 페이지도 정렬과 아이콘, 모바일 구성을 다시 손봤다. 설명이 길어지는 부분은 묶음을 나누고, 같은 성격의 정보는 같은 위치에서 읽히도록 정리하는 쪽으로 수정 방향을 잡았다.
이때 필요한 것은 장식의 개수를 늘리는 일이 아니었다. 어디가 제목이고, 어디부터 설명인지 먼저 보여야 했다. 이미지나 아이콘도 그 구분을 도와주는 자리에 들어가는 편이 나았다.
공통으로 쓸 부분부터 맞췄다
페이지마다 타이틀과 하단 문의 영역이 제각각이면 사이트 전체가 정돈돼 보이지 않는다. 상단 타이틀 배경과 하단 문의 영역은 공통으로 적용하고, 가운데 본문에서 내용에 따라 차이를 주는 방향으로 정리했다.
공통 CSS를 쓰는 이유도 여기에 있었다. 제목 간격이나 기본 폭을 바꿀 때 페이지마다 찾아다니며 수정하는 일을 줄이고 싶었다. 본문이 다른 페이지까지 전부 같은 모양으로 만드는 것과는 구분할 필요가 있었다.
예를 들어 소개 문장과 이미지가 중심인 구간, 여러 항목을 비교하는 구간, 짧은 안내를 전달하는 구간은 필요한 배치가 다르다. 바깥쪽 기준은 맞추되 내용까지 억지로 같은 틀에 넣지는 않는 쪽이다.
메인과 서브를 따로 보면 놓치는 부분
메인에서도 전체 폭과 글자 크기, 대표원장 소개, 둘러보기, 후기 카드, 상담문의 영역 등을 여러 번 조정했다. 메인이 바뀌면 서브의 글자가 상대적으로 작아 보이거나 여백이 좁아 보일 수 있었다.
그래서 서브 한 장만 보고 괜찮다고 끝내기 어려웠다. 메인에서 메뉴를 눌러 들어왔을 때 같은 사이트처럼 느껴지는지 함께 봐야 했다. 개별 섹션의 완성도와 페이지 사이의 연결감은 다른 문제였다.
특히 문의 영역은 반복해서 나오는 만큼 높이와 정렬 차이가 눈에 띄었다. 작은 차이여도 여러 페이지에서 반복되면 전체 인상이 달라졌다.
구조를 만드는 일 다음에 남는 것
④편까지는 내용을 어디에 저장하고 어떻게 출력할지 정하는 작업이었다. 이번에는 그 구조 위에 올라간 화면을 실제로 읽기 편하게 다듬는 쪽에 가까웠다.
관리자에서 수정할 수 있게 됐다고 디자인까지 끝난 것은 아니었다. 내용이 들어간 상태에서 글자 크기와 여백을 보고, 이미지가 필요한 구간을 구분하는 과정이 더 필요했다.
다음 글에서는 이 화면을 모바일로 줄였을 때 확인했던 부분을 정리한다. PC에서 괜찮아 보이는 배치가 작은 화면에서도 그대로 괜찮지는 않았다.