Home Science Coding Design Etc. AboutMe

블로그 개발일지 - 사이드바 및 레이아웃 변경

May 31, 2020   /   5 mins read   /  

사이드바 및 레이아웃 변경 - 블로그 뜯어고치기

기존에는 다음과 같이 오른쪽에 메뉴바를 구성했는데요. 이미지가 없이 텍스트로만 되어있어 조금 단조로운 느낌이었습니다. 사이드바 메뉴를 개선할 겸, 통째로 전체적인 레이아웃들을 수정했습니다.

우선 목표는 다음과 같았습니다.

  1. PC & Mobile 상관없이 어울리는 레이아웃
  2. 블로그 접속은 아무래도 PC가 많으므로(Google Search Concole 기반), 적절한 줄간격과 글꼴 크기가 필요
  3. 사이드바 메뉴마다 아이콘을 표시
  4. PC의 경우 기본적으로 사이드바 메뉴가 펼쳐있게, 모바일은 눌러서 펼쳐지게 할 것 (20년 11월 기준, 사이드바 메뉴는 접근성이 떨어진다고 판단하여 삭제했습니다.)




1. 레이아웃 사이즈(해상도) 수정

우선 레이아웃을 어떻게 바꿀 지 기준을 잡아야 했는데요. 현재 어떤 사이즈(해상도)가 가장 많이 사용되는 지 알아보기 위해 이 곳(StatCounter)을 참고했습니다.

기존에는 1366×768 px 기준 65 vw (1366 기준, 895 px)으로 본문의 가로 폭을 할당했습니다. vw 값은 기기의 가로 폭에 따라 유동적이므로 가로 폭이 1920 px 인 기기에서 보면 1248 px (1920x0.65) 입니다. 기존에는 줄바꿈이 별로 없고 문장이 길게 이어져서, 가독성이 떨어진다는 문제가 있었습니다. 그래서 적합한 줄바꿈을 위해 가로 폭을 조절했습니다.


변경된 전체 레이아웃 기준은 1920×1080 px 으로 하고, 880 px 이상 환경에서는 본문의 가로 폭을 800 px 이 되게끔 바꿨습니다. 제 기준으로는 이정도면 적당한 것 같은데, 다른 분들 눈에는 어떨지 모르겠네요.


참고로, 본문 내용 가로폭에 대해 평소 들락날락하던 여러 블로그(초보몽키의 개발공부로그, Marshall K, heeyeun)와 여러 사이트(브런치, Medium 등)를 참고한 결과 600~900 px 언저리였습니다. 가로폭이 좁은 경우(600~750 px)에는 보통 옆에 광고를 붙이거나 사이드 메뉴들을 넣더라구요. 제 블로그에는 사이드에 다른 것들을 넣을 계획이 없어서 본문 너비를 800 px 으로 정했습니다.



2. 적절한 줄간격 설정 및 글꼴의 종류, 크기, 색상 결정하기

글꼴의 종류나 크기, 색상들은 블로그를 만들기 시작할 때부터 (2019년 11월) 많이 고민했던 부분입니다. 예전에 네이버 블로그를 운영할 때는 동글동글 귀여운 글꼴을 사용했는데요. 최근에는 줄간격, 글꼴, 글씨 크기들이 읽을 때 최대한 거슬리지 않고 컨텐츠에 집중할 수 있는 글꼴로 고르려고 노력했습니다.


글꼴

현재 사용하는 한글 글꼴은 Noto Sans KR (기본적으론 영어, 한글 다 적용됨) 와 나눔스퀘어이고, 영어 글꼴의 경우 Helvetica, Verdana, Arial, Georgia 를 적용하였습니다.

주로 본문 내용은 Noto Sans KR, Helvetica, Georgia, sans-serif 를, 강조에는 나눔스퀘어, Verdana, Arial 를 적용하였습니다.

코드에는 Consolas, Menlo, Monaco, sans-serif 가 사용되었습니다. a= "Hello World!"

여담이지만 PPT에서는 Cambria 와 서울남산체, 나눔스퀘어 쓰는 거 좋아합니다. (그리고 지긋지긋한 Times New Roman과 Arial의 사용은 어쩔 수 없는 것 같습니다...)


글씨 크기와 줄간격

글씨 크기와 줄간격을 결정하기 위해 많은 양의 글들이 올라오는 신문사 홈페이지와 대형 웹사이트를 참고하였고, 현재는 본문 글꼴 크기는 17 px이고, 줄 간격은 1.8 em 입니다. h1 ~ h6 (heading 1~6)은 다음과 같습니다.

CSS

h1 { font-size: 1.875rem; line-height: 2.25rem;}
h2 { font-size: 1.625rem; line-height: 2.125rem;}
h3 { font-size: 1.5rem; line-height: 2rem;}
h4 { font-size: 1.375rem; line-height: 1.875rem;}
h5 { font-size: 1.25rem; line-height: 1.625rem;}
h6 { font-size: 1.125rem; line-height: 1.5rem;}


글씨 색상

저는 웹사이트들의 글씨 색들이 검정색인 줄 알았습니다. 사실은 거의 대부분의 사이트에서 사용하는 글씨 색은 검정색(#000000)이 아니더라구요.

이유는 역시 가독성 때문인데요. 실제로 흰 배경에 쨍-한 검정색보다는 조금 옅은 검정색이 글을 읽을 때 더 자연스럽게 읽히기 때문인 것 같습니다.

이건 완전 검정색(#000000)이구요.

이건 진한 회색(#333333)입니다.

더 옅어지면 이런 색(#555555)이고,

몇몇 사이트에서는 이정도 회색(#666666)도 씁니다.

다른 요소들과 마찬가지로, 여러 사이트를 참고하여 본문 글꼴의 색상을 결정하였습니다. 현재 사용중인 본문 글꼴 색상은 #333333 입니다.

포인트 컬러로는 민트색 (#36A893) 을 사용하고 있고, 하이라이트는 (형광펜 효과) 노랑계열 그라데이션 (#ffe359#fff3b8) 을 사용하고 있습니다.

highlight CSS

.hl {
  background-color: #fff3b8;
  background-image: linear-gradient(to right, #ffe359 0%, #fff3b8 100%);
}



3. 사이드바 메뉴에 표시될 아이콘 만들기

아래 소개하는 내용은 이미지 로딩에 리소스 소모가 많아서, 웹 아이콘 형식으로 대체되었습니다. (2020.11.12.)



우선 무턱대고 일러스트레이터를 켰습니다. 아이콘에 대한 건 유튜브로 많이 봐왔으니 금방 뚝.딱. 할 줄 알았습니다. (그랬으면 디자이너라는 직종이 없겠지)

사이드바 메뉴 아이콘 초안

처음으로는 아이콘의 사이즈를 결정해야 하는데요. 어디서 본 건 있어서... 4의 배수로 맞춰서, 16 px로 결정했습니다. 그리고 무턱대고 아이콘들을 그렸습니다.

홈(Home)은 무난하게 집 모양으로 그렸구요. 태그 목록(Tagged list)은 흔히 쓰이는 모양대로 그렸습니다. 화학(Chemistry)의 경우에는 육각형의 벤젠 고리(Benzene ring)과 삼각플라스크 중 고민하다가 삼각플라스크로 결정했습니다. 좀 더 범용적인 화학의 느낌이기도 하고, 유기화학은 제가 연구하는 분야와는 조금 거리가 있기도 해서요.

이런식으로 물리(Physics)의 경우 양성자와 궤도(orbit)를 돌고있는 전자 (틀린건 알지만 직관적이라...)로 표현했고, 코딩(Coding)은 프롬프트 창, 디자인(Design)의 경우 브러쉬로 표현하였고, 계획(Plan)은 체크리스트로, 기타(etc)는 메모장으로 표현했습니다.


실제 웹사이트에 적용

아니 그런데, 다 만들고 적용해서 보니까 이상하더라구요.

혼자서는 문제 파악이 안돼서 관련 분야 전문가분께 피드백을 받았습니다. 기존에는 제 나름대로 가이드 라인 (밝은 하늘색 선) 을 잡고 한건데요.

  1. 실제 배경은 투명이다보니 가이드라인에 가득 맞춰야하는데, 그렇지 않아 아이콘별로 사이즈가 달라보였고
  2. 속이 꽉찬 (fill) 아이콘과 선으로만 (line) 된 아이콘이 섞여있고
  3. 픽셀에 딱 맞게 그려지지 않았고
  4. 선 두께 통일이 안 된 문제점이 있었습니다. (어떤건 1px, 어떤건 2px)

이런 문제점들을 개선하여 다시 그려서 넣었습니다.



마우스 오버시 아이콘 색상 바꾸기 (마우스 오버시 이미지 바꾸기)

원래는 모든 아이콘에 색상을 넣었는데요. 너무 난잡해서 기본은 흑백톤으로 하고, 마우스를 아이콘에 올릴 때만 색이 변하게끔 변경하였습니다.


코드는 HTML+CSS로 구현하였습니다. 우선 CSS에서 div안의 첫번째 이미지(흑백)를 보여주고, 마우스를 올릴 때는 마지막 이미지(컬러)를 보여주게 설정하였습니다.

CSS

.sidebar-list img:first-child{display: inline-block; padding-right: 15px;} /* 첫번째 이미지를 보여줌 */
.sidebar-list img:last-child{display: none;} /* 마지막 이미지를 숨김 */
.sidebar-list:hover img:first-child{display: none;} /* 마우스를 올리면, 첫번째 이미지를 숨김 */
.sidebar-list:hover img:last-child{display: inline-block; padding-right: 15px;} /* 마우스를 올리면, 마지막 이미지를 보여줌 */

HTML에서는 앞에서 설정한 div에 두개의 이미지를 넣어 구현하였습니다.

HTML

<div class="sidebar-list">
    <img src="{% static '/img/home.png' %}"> <!-- 첫번째 이미지 (흑백) -->
    <img src="{% static '/img/home_color.png' %}"> <!-- 마지막 이미지 (컬러) -->
</div>


4. 접속환경(PC/모바일)에 따른 사이드바 메뉴 펼침/열림 기본값 설정

아직 진행중인 부분입니다. 개선되면 올리도록 하겠습니다. (2020.05.31.)

사이드바 역시 접근성이 떨어진다고 판단되서 삭제하고, 화면 상단 메뉴로만 표시했습니다. 또한, 모바일 환경에서는 버튼 배치가 조금 다르게 수정했습니다. (2020.11.12.)