이 블로그를 처음 만들 때는 CSS가 엉망이었습니다. Sass를 실전에 쓰는 게 처음이라서기도 하지만, 무엇보다도 전혀 다른 목차와 코드 블록 구조가 여러 가지 있어서가 큰 것 같습니다. 게다가 반응형에 다크 모드, 동작 줄이기 대응까지 있네요!

CSS가 워낙 크다 보니(기록상 22.4KB입니다. 이거 큰 거 맞나) 방치하고 있다가, 최근에 갈아엎기로 결정하고 바닥부터 다시 짰습니다. 마침 바꿀 만한 곳들이 보이길래 덤으로 추가했는데, 바로 알아보셨을지 모르겠네요. 이참에 한번 살펴봅시다!

제목 바 디자인 변경

제목 바의 검은 그림자가 사라지고 자간이 좁아졌다.

왼쪽이 이전 테마, 오른쪽이 새 테마입니다.

원래는 글자에 자간을 넣는 게 이쁘다고 생각했는데, 작은 화면(특히 스마트폰)에서 제목이 심각하게 잘리길래 자간을 뺐습니다. 덤으로 어두운 모드에서 위쪽에 보이는 그림자가 거슬렸는데(밝은 모드에는 그런 게 없습니다. 왜 저랬는지 모르겠네요) 수정하는 김에 같이 고쳤습니다.

링크에 밑줄 항상 표시

링크에 밑줄이 표시된다.

원래는 단순히 이쁘다는 이유로 링크 밑줄을 생략하고 마우스를 올릴 때만 보이게 했었습니다. 파랗게 색만 입혀두면 링크인 줄 알겠지 하고 생각했는데 이게 접근성에 안 좋다는 말을 듣고 고쳤습니다. 글 맨 위의 '잇창명 개발 블로그' 글씨, 글 목록 등 일부 링크는 밑줄이 없거나 호버 상태에만 표시되게 놔뒀습니다.

글 목록 디자인 변경

단순한 리스트 형태의 글 목록이 카드 형태로 바뀌고, 커버 이미지가 추가되었다.

글 목록을 2단 그리드 형태로 수정했습니다. 각 항목에서는 정하기 너무 어려웠던 한줄요약(요약조차도 아니긴 합니다)을 지우고 대신 커버 이미지를 추가했습니다. 디폴트 커버 이미지는 현재 개인 브랜딩에 활용하고 있는 10 EATCH이고, 이름에서 알 수 있듯이 10 PRINT CHR$(205.5+RND(1)); : GOTO 10에서 영감을 받았습니다. 트위터 헤더 이미지로도 쓰고 있습니다.

새 헤더 pic.twitter.com/NmT26Ub1oV

— 잇창명 EatChangmyeong💕 (@EatChangmyeong) May 16, 2021

넓은 화면 레이아웃 수정

넓은 화면에서의 레이아웃이 바뀌었다. 글 제목에 있던 강제 줄바꿈이 없어졌다.

넓은 화면에서는 글의 어디를 읽고 있든 제목과 목차가 항상 보이도록 2단 레이아웃을 짰었습니다(아마 Velog에서 봤던 게 머릿속에 남았던 것 같네요). 그렇지만 막상 완성하고 나니 제목이 들어가는 공간이 너무 좁고, 글 제목은 상단 바에 나오는 정도면 충분한 것 같아 현재처럼 2단 레이아웃을 유지하되 제목이 양옆 전체를 차지하도록 바꿨습니다.

TMI: 예전에는 넓은 화면에서 블로그 제목이 "잇창명 (줄바꿈) 개발 블로그"로 표시됐었는데, "잇창명 개발 (줄바꿈) 블로그"가 되지 않도록 <br>을 하고 좁은 화면일 때 display: none;을 줬었습니다(😰). 저도 쓰면서 어이가 없긴 한데 레이아웃을 바꾸면서 같이 없앴습니다.