Github.io 블로그 만들기 - 3

3-1. 내가 YAT 테마를 선택한 이유

내가 블로그 디자인 테마를 고르면서 가장 중요하게 생각한 것은 심플한 UI 와 중요한 것들을 한 눈에 보기 좋은 포인트되는 색상 1~2가지 가 가미된 세련된 디자인.

그래서 가장 먼저, 기능이 너무 많거나 transition effect가 화려하다거나, 너무 colorful해서 눈이 아프고 지저분한 테마는 전부 거르면서 스크롤 쭉쭉~ 내리다가 30분 만에 고심 끝에 선택한 테마가 바로 YAT 테마 이다.

딱 필요한 기능 위주로 구성되어 있고 가독성이 좋았다. 그리고 내가 좋아하는 오렌지 색의 포인트 색상이 아주 마음에 들었다. 몇 군데만 손보면 충분히 내가 원하는 느낌으로 customizing하기 편할 것 같다는 생각이 들었다. (나의 Front-end 실력은… basic한 것들만 아는 정도.)

3-2. YAT 테마의 구성 뜯어보기

자, 그럼 내 원 Pick! YAT 테마의 구성을 빠르게 뜯어보자. 내가 블로그를 선택하는 과정에서, DEMO 사이트를 둘러보면서 빠르게 스캔한 것들 위주로 적었다.

HOME

먼저 YAT 테마의 홈 화면을 보자.

일단 가장 먼저 상단 바 구성 을 좀 보자. 상단바 좌측에는 블로그 이름 및 로고 등을 넣을 수 있다. 그리고 우측에 다양한 메뉴 목록, 그리고 Google Translate를 이용한 번역 서비스 기능까지 있다.

메뉴 목록 구성 같은 경우는 내가 수정할 수 있는 부분이라 크게 신경쓰지 않았고, Google Translate를 이용한 번역 기능이 마음에 들었다. (이 기능도 넣을 수 있긴 하겠지만, 이 시점에서 나는 방법을 몰랐기에… 추후에 다운받은 테마의 코드를 뜯어보며 공부했다.)

페이지를 스크롤 다운하면 포스팅했던 글들 이 볼드 처리된 제목, 본문 앞 일부분의 내용, 그리고 첨부한 사진과 함께 표시된다. 그리고 눈에 띄는 오렌지 색 뱃지(TOP, NEW, 등) 와 각 포스트의 태그들, 작성날짜, 작성자, 몇시간 전 작성인지까지 등 포스트의 기본 정보를 한 눈에 볼 수 있어서 마음에 들었다.

우측 측면에는 각 포스트 별 설정한 카테고리로 sorting해서 보여주는 사이드 슬라이드 블록 이 있다. 각 카테고리 별 포스트 수까지 표시되어 아주 완벽!

그리고, 우측 하단에는 동그란 화살표 버튼이 있는데, 클릭하면 한 번에 페이지의 최상단으로 스크롤업 해주는 기능이 있었다. 모바일에서 유용하게 쓰이는 기능 중 하나인데, 이 버튼을 보고 뭔가 모바일에서 봤을 때도 UI가 아주 만족스러울 것 같은 예감이 들었다.