메인과 서브페이지의 디자인을 수정하면서 모바일 화면도 함께 정돈했다. PC에서 폭과 글자 크기를 늘렸다고 모바일까지 읽기 편해지는 것은 아니었다. 좁은 화면에서는 줄바꿈 하나가 섹션 높이를 크게 바꾸기도 했다.
이번 작업에서는 화면이 깨지는 부분뿐 아니라 누를 수 있는 범위와 스크립트가 적용된 상태도 같이 봐야 했다. 정지된 시안에서는 잘 보이지 않던 문제들이다.
한 줄이 두세 줄이 됐을 때
PC에서는 짧아 보이던 제목도 모바일에서는 여러 줄이 된다. 그 아래 본문까지 길면 첫 화면이 글자로만 채워진다. 글자를 무조건 줄이기 전에 문장의 길이와 배치를 같이 봐야 했다.
카드도 마찬가지였다. 가로로 놓였을 때 비슷해 보이던 카드가 세로로 쌓이면 높이 차이와 여백이 더 잘 보인다. 제목, 설명, 버튼 사이의 간격을 모바일에서 다시 확인할 필요가 있었다.
화면 폭에 맞게 들어간다는 것과 읽기 편하다는 것은 달랐다. 가로 스크롤이 없더라도 내용이 너무 빽빽하면 계속 읽기 어렵다.
링크는 글자만 누르게 두지 않기
수정하면서 링크 범위를 박스 전체로 넓혀달라고 요청한 부분이 있었다. 카드처럼 생긴 요소인데 글자를 정확히 눌러야만 이동하면 불편하다. 특히 모바일에서는 손가락으로 누르는 위치가 조금씩 달라진다.
퀵메뉴의 밑줄이나 불필요하게 보이던 세로줄도 정리 대상이었다. 하나씩 보면 작은 요소지만, 화면 위에 계속 보이는 영역이라 눈에 잘 들어왔다.
이런 부분은 이미지로 된 시안을 보는 것만으로는 확인하기 어렵다. 실제 페이지에서 눌러보고, 스크롤한 뒤에도 같은 방식으로 사용할 수 있는지 봐야 한다.
모션을 더했다가 되돌리기도 했다
진료과목 영역은 스크립트가 과해져 이전 버전으로 되돌리는 과정이 있었다. 움직임이 들어갔다고 항상 나아지는 것은 아니었다. 내용을 읽는 데 방해가 되거나 원래 배치가 불안정해지면 수정의 의미가 줄어든다.
이후에는 과목 관련 스크립트가 출력되지 않는 부분도 다시 복원해야 했다. 디자인을 수정할 때 기능까지 함께 영향을 받을 수 있다는 점을 놓치기 쉬웠다.
그래서 다음 수정본을 확인할 때는 바뀐 부분만 볼 수 없었다. 이전에 잘 나오던 내용과 동작이 그대로 남아 있는지도 같이 확인해야 했다.
마지막에는 이용하는 순서대로 보기
섹션별 수정 목록을 확인하는 것과 방문자처럼 사이트를 둘러보는 것은 조금 달랐다. 메인에서 메뉴를 열고, 서브로 들어가고, 하단 문의 버튼까지 내려가 보면 중간에 어색한 부분이 드러난다.
다음 작업에서도 이 순서로 확인하려고 한다. 우선 글과 이미지가 빠짐없이 보이는지 보고, 그다음 메뉴와 버튼을 누른다. 마지막으로 고정 메뉴나 모션이 화면을 가리지 않는지 살펴본다.
반응형 작업은 PC 화면을 작게 만드는 것으로 끝나지 않았다. 같은 내용을 작은 화면에서 어떤 순서로 보여줄지, 어디를 눌러 이동하게 할지까지 다시 판단하는 과정이었다.
다음 편에서는 화면 밖의 운영 문제였던 팝업 종료일을 정리하고, 정적 HTML을 워드프레스로 옮긴 기록을 마무리하려고 한다.