블로그 디자인 하는 법

블로그를 시작했으니 이제 현실의 문제를 처리해야 합니다. Ghost 기본 디자인은 적절하다고 생각하지만, 이것으로는 성에 차지 않습니다. 무엇보다도 아직 디자인을 손대지 않은 신생 블로그들과 완전히 똑같아 보일 테니까요.

그러면 좋은 디자인을 어떻게 구현할 수 있을까요? 그보다, 좋은 디자인이란 과연 무엇일까요? 제 대답은... 아무것도 모른다는 겁니다.

하지만 정답을 모른다고 아무것도 안 할 수는 없으니, 할 수 있는 일을 해 봅시다.

예시를 참고하기

Slate Star Codex

Slate Star Codex는 시각적인 화려함보다 그 안의 글들로 더 유명한 사이트입니다. 디자인 면에서 반드시 최고의 사이트는 아니라고 할 수 있겠지만, 기능적으로 필요한 요소들은 모두 갖추고 있습니다.

이 사이트의 구성을 살펴보면, 최상단에 배너가 있고 중앙에 내용이 있으며, 좌우에 각각 링크와 배너가 있는 것을 볼 수 있습니다. 각 요소들은 심플한 텍스트 위주로 구성되어 있습니다. 또한 화면 폭이 좁을 경우 좌우의 영역은 접혀 들어가, 버튼으로 열지 않는 한 공간을 차지하지 않습니다. 이로써 모바일 환경에서도 문제없이 작동합니다.

제가 찾은 유일한 결함은 댓글 영역을 별도의 페이지로 분리하거나 '댓글 접기' 기능을 구현해두지 않은 것입니다. 이로 인해 모든 댓글이 페이지 내에 포함되어 스크롤 바가 너무 짧아지는 현상이 발생합니다. 글을 다 읽을 때까지는 잘 드러나지 않지만 거슬리는 일이죠.

분명히 좋은 시작점입니다. 이보다 더 잘 할 수 있을까요?

LessWrong

LessWrong은 확실히 더 세련된 디자인을 보여줍니다. 각 요소들의 세련된 배치와 멋있는 일러스트가 있고, 목록의 링크 위에 마우스를 올리면 글의 총 단어 수와 앞부분까지 미리 보여줍니다!

또한 이 사이트에서 제일 인상적이었던 기능은 글의 일부분만을 특별히 선택해서 댓글이나 반응을 달 수 있는 기능이었습니다. 이러한 기능은 확실히 독창적인 디자인입니다.

가장 좋은 점은 GitHub에 전체 코드가 공개되어 있다는 점입니다. 이로써 언젠가 레포지토리의 신성한 코드를 모두 읽고 깨달음을 얻게 되는 날에 LessWrong의 디자인을 복제할 수 있을 거라는 희망을 가질 수 있습니다.

하지만 지금은 때가 아니니, 더 쉬운 방법을 찾아보도록 합시다.

기성품을 구매하기

Ghost는 테마를 구매할 수 있는 마켓플레이스를 운영하고 있습니다. 유료 테마의 가격은 기본적으로 $99부터 시작하는데, 예상한 것에 비해 너무 비싸다고 생각했습니다.

무료 테마 중 attila를 다운받아 적용해 봤지만, 큰 차이를 느낄 수 없었습니다. 일단 구색 맞추기 용도로 적용했지만, 결국 장기적으로는 이 방법밖에 없어 보입니다.

직접 만들기

Ghost는 코드 인젝션 기능을 지원합니다. 헤더/푸터에 CSS 또는 JS 코드를 입력하면 그대로 포함되는 기능입니다. 플랫폼에서 이렇게 강력한 기능을 지원한다면, 이제 무한한 가능성이 열린 동시에 단 하나의 질문만이 남게 됩니다...

좋은 디자인이란 결국 무엇일까요?

결론

현재 적용 중인 attila는 목록에서 표지 이미지를 볼 수 없다는 점이 거슬립니다. 따라서 우선 해결해야 할 단기적 목표는 이미지가 보이는 세련된 테마를 찾는 것입니다. 어쩌면 이전 테마로 돌아가는 것이 최선일 수도 있습니다.

장기적으로는, LessWrong과 같은 디자인 방법을 배워서 이 블로그에 적용하는 것이 최종적인 목표가 될 것입니다. 긴 고행이 되겠지만, 그럴 만한 가치가 있을 것입니다.

아니면 결국 attila를 영원히 쓰게 될지도 모르겠습니다. 임시 조치만큼 영원한 것은 없다고 누가 그랬던가요?

[12/27 업데이트:무료 체험 플랜이 종료되어 starter 플랜으로 전환함에 따라 기본 테마로 복귀하게 되었습니다.]