original layout
원래 사용하고 있던 블로그의 레이아웃. 사이드바가 거슬린다.

사용하고 있던 블로그의 레이아웃이 썩 나쁘지는 않지만, 항상 뭔가 부족함을 느꼈습니다. 최근 인기를 얻고 있는 medium, brunch같은 블로그 플랫폼과 같은 깔끔한 템플릿이 눈에 밟혔습니다. “블로그는 블로그답게” 글에 집중할 수 있도록 사이드바, 배너를 몽땅 제거하고 폰트와 줄간격을 가장 읽기 편하도록 배치한 철학이 매우 공감되었습니다. 항상 벼르고 벼르다 오늘, 드디어 마음잡고 대공사를 치뤘습니다.

  • 꽉찬 타이틀 만들기
  • 사이드바 제거하기
  • 스크롤 내리면 네비게이션 메뉴 숨기기
  • 깔끔한 폰트 적용하기
  • Tiktok 페이지 꾸미기

선배님들을 본받자

그동안 정보를 찾기위해 여기저기 블로깅을 하다가 깔끔한 블로그들을 모아놓았습니다. 템플릿을 벤치마킹할 블로그들을 펼쳐놓고 그들의 장점들을 한데 모았습니다.


Peek 2018-09-12 23-45

꽉찬 타이틀 만들기

이 작업은 나름대로 수월했습니다. 이미 Portfolio 원페이지를 만들며 구현했기 때문에, CSS와 HTML을 긁어와서 이리저리 끼워 맞췄습니다. 타이틀과 본문은 너비 100%로 꽉 차게 보되, 포스트 최하단 footer에 해당하는 댓글, 이전/이후 포스트 보기 버튼들은 좁은 간격 (800px)로 유지해서 깔끔함을 더했습니다. 또한 전환 애니메이션 적용, 제목 및 스크롤버튼 클릭시 글 내용으로 넘어가기 기능들도 구현했습니다. 난이도는 쉬웠지만 시간이 은근 많이 걸렸다는게 함정.


Peek 2018-09-12 23-47

스크롤 내리면 네비게이션 메뉴 숨기기

이 역시 이미 친절하게 설명되어 있는 문서들이 많아 수월하게 진행했습니다. 내가 참고한 문서는 아래 문서입니다.


깔끔한 폰트 적용하기

그동안 사용하던 폰트는 나눔고딕이었습니다. 물론 완벽에 가까운 폰트긴 하지만, 널리 쓰이는 만큼 세련됨과는 거리가 멀었습니다. 그러던 중, 한 블로그에서 깔끔한 폰트를 발견했습니다.

Screenshot from 2018-09-12 23-26-11

블로그 폰트로 완벽에 가깝다고 생각했습니다. 바로 적용했습니다.


결과

original layout
원래 사용하고 있던 블로그의 레이아웃. 사이드바가 거슬린다.
original layout
새로운 레이아웃. 만족 100%

원하는 기능들을 대부분 구현했습니다. 한층 예뻐진 것은 물론, 글 자체에 온전히 집중할 수 있게되어 정말 맘에 듭니다. 앞으로 추가하고 싶은 몇가지 기능들과 소소한 오류수정이 있지만, 아직 중요한 것은 아니니 오늘은 이만 자야겠습니다.


보너스. Tiktok 페이지 수정

Peek 2018-09-12 23-49

이번에 만든 레이아웃과 GIF를 활용해 tiktok 페이지를 꾸몄습니다. 조금 더 있어보여서 의미심장해진 것 같아 썩 맘에 듭니다.

끝!!

Comments

Eungbean Lee's Picture

About Eungbean Lee

Lee is a Student, Programmer, Engineer, Designer and a DJ

Seoul, South Korea https://eungbean.github.io