티스토리 블로그 카테고리 글보기 혹은 검색 시 나오는 날짜 위치 이동하기

티스토리 블로그 카테고리 글보기 혹은 검색시 나오는 날짜 위치 이동하기

블로그를 방문하는 독자의 가독성을 위한 소스코드 일부 수정을 해봅시다. 티스토리 블로그에서는 카테고리 글 보기 또는 검색을 했을 경우 OOO에 해당하는 글이라는 메시지와 함께 리스트가 출력됩니다. 제가 지금 사용하고 있는 Skeleton 반응형 웹 스킨 뿐만 아니라 티스토리에서 기본 제공하는 여러 스킨들 중에서도 나타나는 리스트들의 디자인이 가독성에 약간 영향을 주는 부분이 있습니다. 아래의 이미지는 예시를 들기위해 같은 스킨을 사용 중인 정재복님의 블로그 ↩를 전체 글보기를 하여 스크린샷 한 화면입니다. ▼

물론 나쁘지 않은 디자인입니다만 포스트의 리스트가 날짜 뒤에 위치하여 조금의 시선을 방해하는 것처럼 느껴집니다. 사용자에게 중요한 것은 콘텐츠(글)이지, 날짜가 아니니까요. ▼

---

EYE TRACKING

날짜 위치 이동을 왜 해야하는지 설명하기 위해 잠시 시선 추적에 대한 내용을 알려드리겠습니다. 대부분의 사람들은 어린시절부터 교육받고 익숙하기로 왼쪽에서 오른쪽으로, 위쪽에서 아래쪽으로 콘텐츠를 읽어나갑니다. 따라서 가장 기본적인 UI/UX 디자인에서는 오른쪽 보다는 왼쪽이, 아래쪽 보다는 위쪽에 좀 더 오래 시선이 머문다는 가정하에 중요도를 체크합니다. 아래의 이미지는 제가 블로그 관련 강의시에 사용하던 슬라이드 내용 중 일부입니다. ▼

따라서, 중요한 내용이면 중요한 내용일수록 왼쪽으로, 그리고 윗쪽으로 배치하는 것이 옳습니다. 이런 디자인이야말로 사용자의 가독성을 높여준다고 볼 수 있을텐데요. 검색이나 카테고리 글보기를 할 경우 현재로서는 날짜가 왼쪽에 위치하기 때문에, 인터페이스 디자인 상으로 글보다는 날짜가 더 중요한 위치를 차지하고 있는 셈입니다. 하지만 실제로 중요한 것은 날짜가 아니라 콘텐츠죠. 결국, 이 위치를 바꿔주면 모든게 해결이 될 것입니다.

---

날짜 위치 이동하기

이제 위치를 변경해볼까요. 티스토리에서는 검색이나 카테고리 글 보기 시 list_rep_OOO으로 시작하는 치환자가 호출됩니다. 클래스명은 search-list로 명명되어 있습니다. 즉, HTML 수정에서 search-list 혹은 list_rep_OOO으로 시작하는 치환자를 검색하여 해당 소스코드의 위치를 찾아냅니다.

해당 위치를 찾은 다음 소스코드를 살펴보면 <time class="published"...로 시작하는 코드가 list_rep_OOO로 시작하는 코드보다 위쪽에 배치되어 있습니다. 이 위치만 바꿔주면 됩니다. 최종 소스코드는 아래처럼 만들어집니다. ▼

---

이제 블로그에서 테스트를 해보세요. 아래의 이미지처럼 나오면 정상적으로 해결된 것입니다. ▼