기존 블로그에서 새로 블로그를 구현했다.

테마 이름은 “Borderless”이다.
말그대로 블로그 디자인 요소에 선이 없어서 이렇게 지었다.

이번에도 동일하게 Gatsby를 이용하여 제작했고 태그와 검색 기능이 있는 것은 이전 블로그와 비슷한 구조이다.

그런데 이전 블로그는 GraphQL도 완전 백지 상태에서 껴맞추기식으로 구현해서 지저분한 곳이 있었고,
디자인쪽으로도 깔끔하고자했지만 뭔가 조잡한듯한 느낌을 지울 수 없었다.

블로그를 운영하면서 느끼게 된 점을 바탕으로 다시 디자인하고 생각하여 만들게 되었다.

홈화면을 화려하고 예쁘게 만들고 검색이나 태그 기능을 예쁘고 다양한 기능으로 무장하고... 하는 것도 좋겠지만,

블로그 유입은 9할 이상이 검색을 통해서 이루어진다. 따라서 방문자는 게시물을 보는 것이 제일 중요하고 그 이후에 블로그를 둘러보는 행동을 하는 사람은 거의 없다고 보면 된다.

그에 맞춰서 최대한 게시물에 집중 할 수 있는 디자인을 하고, 블로그를 시작한 의도에 맞춰 내가 필요하고 사용하기 편하게만 만들면 되는 것이다.

그래서 딱 몇가지만 고려했다.

• 내 정보를 보여줄 수 있었으면,
• 뭔가를 살펴볼땐 그것에만 집중 할 수 있어야한다.
• 불필요한 스타일, 애니메이션, 기능은 제거하자.

그래서 구현한 결과는 이렇게 된다.

내 정보를 보여줄 수 있었으면,
좌측에 개인 프로필과 메뉴가 위치한 블로그를 자주 볼 수 있다. 그러한 UI를 어느정도 원했다 프로필이 있었으면 했다. 하지만 좌측에 항상 뭐가 있다면 내용에 집중하는데 방해가 된다고 생각했고 반응형 디자인에도 좋지 않다고 생각해서 이러한 UI 보다는 다른 UI를 생각하게 되었다.
상단에 헤더가 위치하고, 블로그 로고 이미지와 블로그 제목이 좌측으로, 우측에는 메뉴(태그, 검색)가 위치한다.
게시물이나, 태그, 검색등의 작업을 할때는 로고와 텍스트가 작은 크기로 위치하다가 홈화면(게시물 목록 화면)으로 위치하면 로고 이미지의 크기가 커진다. 그리고 로고 이미지와 제목 아래 프로필 정보들이 나열된다. 이렇게 구현하면 마치 좌측에 프로필이 위치한 UI와 비슷하게 보인다. 하지만 홈화면에서 게시물 목록을 훑어보기 위해 스크롤하면 헤더와 프로필 정보가 감춰지면서 게시물 목록에만 집중 할 수 있게 된다.

뭔가를 살펴볼땐 그것에만 집중 할 수 있어야한다.
기본적으로 헤더를 항상 표시가 아닌 스크롤에 따라 숨기고 나타나도록 구현했다.
그래서 게시물을 읽을땐 온전히 게시물에만 집중 할 수 있고, 그 외로 표시되는 것은 TableOfContents 즉, 목차 뿐이다. 이것도 투명도를 낮춰 게시물을 읽는데 집중할 수 있도록 했다.

홈화면에서는 앞서 프로필을 설명하는 부분에서 설명한 것과 같이 스크롤 시에는 헤더와 프로필 정보가 모두 숨겨지며 보이는 것은 게시물 목록 뿐이다.

불필요한 스타일, 애니메이션, 기능은 제거하자.
기존에는 선, 배경색으로 개체들을 꾸미고 그림자를 입히고, 거기에 마우스 오버시 살짝 앞으로 나오는 듯한 애니메이션을 넣는 등 예뻐보이기 위해 이것저것 했는데 이번에는 정말 심플 그 자체가 되고자 했다.
그래서 생각한게 선과 색을 넣지 말자는 것이었다.
스타일에 선, 색, 그림자가 없다. (마크다운 게시물 안에는 당연하게 있을 수 있다..)
따라서 입체감도 없다. 머터리얼 디자인이 유행하면서 입체감에 많은 신경을 썼었는데 이번에는 아예 반대로 입체감이 없이 해보기로 했다. 어짜피 내용에만 집중하도록 디자인하다보니 입체감이 중요하지 않았다. 불필요한 요소는 보이지 않을테니까.
그리고 애니메이션은 최소화했다. 헤더와 프로필 부분 말고는 큰 애니메이션이 없다.
이 블로그 테마 이름을 Borderless라고 했는데, 바로 선이 없다는 이유에서다.

---

이러한 것 이외에도 세세한 구석에 신경을 많이 썼다.
UX를 고려해서 어느 곳에서도 부드럽게 전환이 가능하도록 신경썼고,
블로그가 기본적으로 해야하는 기능, 그리고 추가적으로 있으면 좋은 기능들도 당연히 구현했다.
대표적으로 Google Analytics, Disqus 가 있다. 애널리틱스는 웹 운영에 필수고, 댓글 또한 블로그에 없어서는 안될 기능이다.
구현 중에 본인의 Disqus를 새로 설정하면서 기존 댓글이 지워진 아쉬움이 있긴하다.

글을 쓰는 현재 아직 몇가지 해야할 것이 남았다.
몇가지 수정할 게 남았고, 그 다음으로 해야할 것이 다른 사람들이 이용할 수 있게 만들어두는 것이다. 기본적인 정보만 수정하면 자신의 블로그로 만들어 사용할 수 있게 처음부터 고려해서 만들어졌다. 이전 블로그도 이와 비슷하게 배포했는데 메일이나 댓글로 질문이 몇번와서 이번에는 문서를 조금 더 정성들여 적어봐야겠다.

다음으로는 간단하게 블로그를 소개하고, 그 다음에는 이 블로그를 자신의 블로그로 만드는 방법을 자세하게 적어볼 수 있도록 하려 한다.