Social Business

블로그에도 미니멀리즘 적용하기 - 상단 메뉴바를 제거하다

하나모자란천사 2017. 6. 2. 23:20

오늘은 퇴근 후 블로그 손질을 하고 있습니다. 오래간만에 코딩 아닌 코딩에 재미를 느끼고 있습니다. 스크립트를 코딩이라고 말하는 건 좀 아니죠? 암튼 HTML 소스랑 스크립트를 수정하면서 블로그 디자인을 조금씩 변경하고 있습니다. 블로그를 정리하는 과정에서도 정해진 규칙이 하나 있는데 최대한 심플하고 단순하게 정리한다. 꼭 필요한 것만 최소한으로 나타나도록 한다. 이 기준으로 기존의 어제까지 만족했던 블로그를 계속 바라보았습니다. 딱 한 곳에 계속해서 눈에 거슬렸습니다. 그래 한번 도전해 보는 거야! 지금부터 내 블로그에도 미니멀리즘을 적용하자. 눈에 거슬리는 메뉴는 없애 버리고 최소화 하자.


먼저 최종 정리된 블로그의 상태를 먼저 보겠습니다. 아래 그림은 오늘 수정을 통해 현재 기준으로 만족하는 제 블로그의 대문입니다. 어제와 비교했을 때 무엇이 달라졌을까요?



티스토리 블로그에서 제공하는 상단 메뉴를 없애고 꼭 글을 쓰는데 꼭 필요한 '글쓰기'와 '관리자' 메뉴만 보이도록 설정을 했습니다. 아래 그림은 제 블로그 상단의 메뉴의 변천사입니다. 맨 위의 그림이 어제 기준으로 블로그 우측 상단의 메뉴이고, 중간은 오늘 1차 수정한 메뉴이고, 맨 아래의 메뉴가 현재 블로그의 메뉴입니다. 정말 슬림해졌습니다. 일단 맘에 듭니다.



 지금부터는 작업 과정을 하나씩 순서대로 설명을 하겠습니다. 오늘 작업은 아래의 순서로 진행이 되었습니다.


1. 티스토리 블로그 기본 메뉴 보이지 않게 설정

2. HTML/CSS 편집으로 메뉴 추가

3. 필요한 기능을 제외한 메뉴 최소화


그럼 먼저 티스토리 블로그 기본 메뉴를 보이지 않게 설정하는 방법부터 보겠습니다. 우선 페이지에서 메뉴가 보이지 않게 되면 완전히 작업이 끝나기 전까지 불편한 사항이 발생할 수 있음으로 관리자 페이지를 새로운 탭에 띄워 놓습니다.


이제 티스토리 상단 메뉴를 보이지 않도록 설정하겠습니다. 관리자 화면에서 기본정보 > 블로그 정보 > 주소 설정에서 외부 도메인 아래의 메뉴바 감추기 체크박스를 체크하시고 저장을 클릭합니다.



메뉴바를 보이지 않게 설정하는 것은 이것으로 끝입니다. 간단하죠. 다만 이 부분은 외부 도메인이 연결되어 있을 때만 활성화됩니다. 외부 도메인이 연결되지 않았을 경우에는 HTML/CSS 편집을 통해 상단 메뉴를 제거할 수 있습니다. 



관리자 페이지에서 꾸미기 > HTML/CSS 편집을 클릭합니다. 아래 그림과 같이 HTML/CSS 편집 화면에서 CSS를 선택하고 아래 그림과 같이 #tistorytoolbarid { display : none; }; 코드를 삽입하고 저장을 클릭합니다. 소스 코드는 아래 링크를 클릭해서 다운받을 수 있습니다.




이제 HTML/CSS를 수정하여 사용자 메뉴를 삽입하는 방법을 배워 보겠습니다. 동일한 방법으로 CSS에 메뉴바에서 사용할 스크립트 코드를 아래 그림과 같이 삽입 후 저장을 합니다. 사용된 소스 코드는 아래 링크를 통해서 다운받을 수 있습니다.




이제 HTML 편집을 통해 사용할 메뉴를 적당한 위치에 삽입을 합니다. 저는 편의상 티스토리의 기본 메뉴 위치에다 사용자 메뉴를 삽입했습니다. 이번에는 HTML을 편집해서 사용할 메뉴를 티스토리의 치환자를 이용한 코드를 삽입합니다. 저장을 크릭하고 그림 좌측 상단의 새로고침을 클릭하면 변경된 메뉴가 보입니다. 소스 코드는 아래에 있습니다.




이 상태도 티스토리 기본 메뉴바와 비교 시 심플하고 단순합니다. 그러나 내 블로그 방명록을 클릭해서 방명록에 글을 남기는 이가 몇이나 될까? 꼭 남겨야 할 사항이 있다면 각 글의 하단에 있는 댓글을 통해 내용을 남길 수 있는 대안도 있기에 방명록은 없어도 된다는 판단이 들었습니다. 또 홈으로는 상단의 블로그 제목 클릭을 통해서 홈으로 이동이 가능합니다. 블로그의 미니멀리즘을 위해서 비워냈습니다. 그렇게 해서 최종 완성된 블로그 메뉴바입니다. 이젠 정말이라는 단어를 사용해서 심플하다고 해도 될 것 같습니다.



티스토리 상단의 기본 메뉴를 없애고 단순화시킨 목적은 상단 메뉴 클릭의 어려움 때문입니다. 티스토리 기본 메뉴를 통해서 글을 쓸 경우 두 번을 클릭해야 합니다. 가끔은 커스를 이동시키는 동안 메뉴가 사라져 몇 번을 다시 클릭하는 경우가 있습니다. 좀 번거롭다는 생각이 있었는데 미니멀 라이프를 실천하고 나서부터 단순한 것이 좋다는 생각을 많이 하게 된 것에 영향을 받은 것 같습니다.