2년 전 만들었던 테마를 잘 사용하다가 좀 도 편리한 기능과 디자인 업데이트를 위해서 Version2 를 제작하였습니다. 한동안 작업률이 부실했던 ‘월간동근방’을 이어서 새롭게 하자는 뜻에서 그 시작인 블로그 테마를 업데이트 하였습니다.

테마 개선 내용 (V1 vs V2)

최종적인 디자인 및 구현된 결과를 동일한 컨텐츠로 비교하였습니다.

테마 비교

  • V2은 Summary 요약화면을 제공하기 때문에 글 목록 확인이 편리해졌습니다.
  • V2는 Cover Image를 제공합니다.
  • V2는 한국어 위주로 만들어졌습니다.

Hello Programmer Theme V2 화면 의도

테마 V2에서 가장 자주 보여지는 화면은 다음과 같습니다.

Hello Programmer Theme V2 테마

글 목록

글 목록은 사람들이 특정 글 이후 가장 많이 접근하게 되는 페이지입니다. 다음 글로 사람들이 이어서 읽을 수 있도록 간단한 글 요약과 커버 이미지를 표현하도록 디자인하였습니다.

메뉴 그림

메뉴

상단의 메뉴바를 통해서 글 목록을 쉽게 탐색할 수 있도록 구성하고 기존의 테마 디자인은 그대로 유지하였습니다. (개발자가 한 디자인이라… ^^;) 그리고 V2에는 반응형 기능을 추가하여 메뉴는 화면 사이즈가 작아질 때 햄버그 버튼이 표시되도록 디자인하였습니다.

글 목록

글을 글 간격을 충분히 읽기 좋도록 간격을 설정하고 글 첫 시작에서 전체적인 맥락 파악이 용이하도록 ‘목차’를 구성하였습니다.

글 내용

글 아래 쪽에는 저자와 관련된 글들로 이어질 수 있는 태그, 추천 글이 존재합니다. 글에 대한 리뷰와 의견을 나눌수 있는 도구로는 Disqus(Hugo 기본)를 활용하였습니다. Disqus는 댓글을 달 수 있는 서비스로 간단한 스트립트 추가만으로 댓글 기능을 제공할 수 있어서 매우 편리합니다.

글 메타

카테고리

카테고리는 말 그대로 어떻게 글을 잘 분류하여 ‘사람들이 좀 더 블로그 내에서 글을 찾아가게 할 수 있을까?‘를 고민하다가 위와 같이 카테고리명과 가장 최근에 작성된 글 1건만 표현하여 사람들이 한 번이라도 글을 더 눌러볼 수 있도록 디자인하였습니다.

카테고리

태그

태그도 카테고리와 동일한 목적으로 사용자 접근을 위해 디자인 된 화면입니다. 특히 해당 태그에 속하는 글의 수를 함께 표현하여 관심있는 분야에 몇 개의 글이 있는지 미리 알 수 있도록 화면을 구성하였습니다.

태그

프로젝트

개발자 혹은 디자이너, 공개 가능한 프로젝트를 자신의 포트폴리오 혹은 공유하기 위한 공간입니다.

프로젝트

테마 사용법

앞에서 설명한 테마를 사용하는 방법은 다음과 같습니다. (혹시라도 이해가 안되거나 문제가 발생하면 댓글 남겨주시면 돕겠습니다^^)

테마 적용하기

Hello Programmer Theme의 설치법은 V1과 동일합니다.

설치

Hello Programmer Theme V2를 설치하기 위해서 다음의 명령어를 수행합니다.

// Hugo 디렉토리에서 다음 명령어를 수행
$ cd themes
$ git clone https://github.com/lubang/hugo-hello-programmer-theme

상세한 설치 방법은 Hugo 공식 설치 문서[참고1]를 참고합니다.

설정

다음을 참고하여 자신의 사이트에 맞도록 설정합니다.

$ vi config.toml

baseURL = "https://blog.lulab.net/"
title = "룰루랄라코딩"

languageCode = "kr-ko"
theme = "hugo-hello-programmer-theme"
disqusShortname = "개별설정"
googleAnalytics = "개별설정"
paginate = 7

[author]
    name = "개별설정"
    email = "개별설정"

[params]
    description = "즐겁게 코딩을 하면서 즐기는 공간 '룰루랄라코딩'입니다."

그리고 필요한 이미지, 설정 등은 Hello Programmer Theme 를 포크하여 수정하시면 됩니다.

후기

그래도 몇 일간 집중해서 디자인을 새로하고 블로그 글들도 모두 재정리를 하였습니다. 물론 여전히 오타도 많고 어수선 하지만 관련된 정보를 검색해서 블로그에 온 분들에게 최소한 1-2가지 제대로 된 정보를 줄 수 있도록 열심히 작성해보겠습니다.


  1. 참고[1] Hugo 설치 가이드 | https://gohugo.io/overview/installing/ [return]