Skin v3로 변경

몇 번을 수정하면서 무언가 틀어지기 시작해서 결국에는 모두 갈아서 버리고 다시 시작했습니다. 물론 디자인적이나 외형적으로는 그대로 계승을 하면서 시대의 흐름에 따라 JQuery에서 점점 JavaScript로 넘어가려고 합니다. 물론 아직 JavaScript를 잘 몰라 인터넷 광클로 찾아가면서 변경을 하니 쉽지가 않네요. 최종에는 JQuery를 쓰지 않는 것이지만 티스토리에서 사용하니 되지가 않을 것 같네요. ㅎㅎ

변화된 것들

1. 공통

전체 부분에 라운드 처리와 다크 모드 기준에 크게 색을 강조하지 않았습니다. 또한 링크색이나 기타 부분에 강약으로 조정하여 가독성이 좋도록 하였습니다. 가독성 이것 역시 답이 없을 것 같네요. 

링크: 2가지 색과 다크모드와 라이트 모드의 색을 틀리게 하여 좀 더 좋게 디자인했습니다. 이 부분 역시 답이 없을 것 같습니다.

기존의 CSS효과들 모두 삭제하여 다시 정의하기로 했습니다.  js역시...

2. 폰트(Font) 변경

결정적으로 아리따돋음과 Lato가 맞지 않아(영어 폰트의 띄움(공백) 글자가 붙어 있는 느낌) 변경하자라고 생각했습니다. Lato와 노토산스로 갈까도 생각했고 몬세라트(Montserrat)와 나눔 고딕도 생각했지만 그냥 Lato의 숫자가 맘에 들었고 스포카한산스도 마음에 들었어서 고민하다가 노토산스와 포핀스(poppins)의 조합으로 변경하였습니다. 결국 아리따돋음에서 노토산스로 영어 글자 부분은 포핀스로 구성하였습니다. 로고는 결국 일러로 작업하여 영어부분을 합친 것으로 변경도 하였네요.

Poppins/NotoSansKR Semi-bold 1.375rem + 1.5vw / 2.5rem / 120%	H1 Headline
Poppins/NotoSansKR Semi-bold 1.375rem + .9vw / 2rem / 120%	H2 Headline
Poppins/NotoSansKR Semi-bold 1.3rem + .6vw / 1.75rem / 120%	H3 Headline
Poppins/NotoSansKR Semi-bold 1.275rem + .3vw / 1.5rem / 120%	H4 Headline
Poppins/NotoSansKR Semi-bold 1.25rem / 120%	H5 Headline
Poppins/NotoSansKR Semi-bold 1rem / 120%	H6 Headline
Poppins/NotoSansKR bold 2.25rem + 1.2vw / 132%	Subtitle 1
Poppins/NotoSansKR Semi-bold 20 / 132%	Subtitle 2
Poppins/NotoSansKR Light 16 / 132%	Subtitle 3
Poppins/NotoSansKR normal 16 / 175%	Body
Poppins/NotoSansKR normal 13.2 / 175%	Small

 

3. header 부분

같지만 다른 부분이 변경되었습니다. 밑에 변경된 부분을 적어 봤습니다.

• 메인 로고를 변경.
• 헤더 전체 세로 사이즈가 변경.
• 위에서 설명했듯이 폰트를 변경. Segoe UI → 일러스트(illustration), poppins
• 현재 페이지 부분의 디자인을 변경. (사진에서는 Home부분)
• 검색(search) 부분의 배경색을 넣고 라운드로 변경.
• 전체 배경색을 변경.
• blog 2.x 부분을 build로 대체. (헤더 부분에서 제거했습니다.)

 

아쉽게도 사용하지 못하고 잠깐 사용하고 창고행이 되어버린 디자인들.

순서 2.3 → 3.0 → 3.0β → 3.1

 

4. sideber 부분

사이드바 부분에서는 그리 많은 변화가 없습니다.

• 전체 디자인에서 라운드 처리.
• logo부분을 삭제하고 블로그명으로 대체. (중복이라 삭제)
• ToC부분에서 위 제목을 추가, 단어 선별 부분(javascript)을 추가.
• Tab부분의 디자인을 ISO13을 참조.
• footer부분을 배경색만 주어 sideber부분 상단부분과 분리.
• top버튼이 기본은 숨기고 스크롤 내려가면 보임.

5. Category 부분

카테고리 부분에서는 많은 변화를 주었습니다. 

• 드롭다운 메뉴를 했지만(v2.3) 그냥 한 번을 선택하면 서브메뉴 페이지가 로드되는 것으로 변경.
• 메뉴 앞에 아이콘을 주어 알아보기 좋게 함.
• 메뉴의 글에 강약을 주어 더 잘 보이도록 함. (가독성)
• 탑 메뉴의 특징을 살리면서 높이가 작아야 하는 문제로 최대한 라인의 패딩을 적게 함.

6. list 부분

이번에 v3.1로 넘기면서 가장 많은 변화가 리스트 부분이 아닌가 싶습니다. (신경도 많이 썼습니다.)

• 그리드(Grid) 부분 추가(재 접촉 시 리스트 부분 저장)
• 썸네일 추가. (썸네일 밑그림 블렌딩 추가)
• 가로 사이즈에 맞게 이미지 축소. (16:9)
• 몇 건의 숫자 부분 위치 이동. (위 사진에 #149라고 되어 있는 부분)
• border없는 효과 추가.
• 그림자 효과 추가.

7. 글 부분

글 부분은 크게 변화가 없습니다. 하지만 몇가지 있어 글 남깁니다.

• 꽉찬 썸네일 조금 여백을 줌. (높이는 같으나 다르게 보임)
• 전체 라운드 처리.
• 카테고리부분 변경. (모바일 부분과 다르게 표시)