블로그 새 단장

I Know CSS

(First release)

2022-12-07

(Last update)

2022-12-08 16:51

태그: dev

스스로 본업은 백엔드라고 받아들이고 있는데, 은근히 회사에서 프론트엔드를 만져야하는 일이 꽤 있다. 다행히(?) 대중에게 공개할 물건은 아니고 사내에서만 쓰는 도구라서 여태까지 어떻게든 뚝딱거려 왔는데, 이번에 좋은 기회로 프론트엔드 관련 강의를 듣게 되었다. 덕분에 웹의 기초가 되는 HTML, CSS와 좀더 친해진 기분이 들었다.

CSS의 온갖 요상하고 때때로 암묵적이기까지 한 규칙들 (e.g., 가상 클래스라던지, 폰트가 왜 여러개 있는지, margin에 속성 여러개 때려박으면 어떻게 되는지, 등등…) 때문에 공부하면서도 “이걸 이렇게까지 쓸 일이 있을까?” 싶은 생각이 들긴 했지만… 어쨌든 어딘가 필요하기 때문에 있는 기능이니 너무 두려워하지 않고 나중에 만나더라도 뇌에 힘줘서 이해하면 되겠지, 정도로 받아들이게 되었다.

그런데 조금이나마 프론트엔드, 그 중에서도 CSS를 이해하고 나니 손이 근질거려서 참을 수가 없더라. 그래서 미니멀을 지향하는 이 블로그 홈페이지를 새롭게 단장해보았다. 나의 미학(…)을 표현한 결과가 바로 이 모습이다. 아주 마음에 든다. 기분 탓인지 글이 좀더 읽기 쉬워진 것 같기도 하다. 덕분에 블로그 글을 한번 정주행할 수 있었다.

이제 HTML, CSS, JavaScript 삼신기를 찍먹해보았으니 해보고 싶은 남은 일들은 아래와 같다.

Emacs까지 가공한 무언가를 만들기. 지금 떠오르는 것은 저장하기 이벤트를 후킹해서 포스트 메타데이터에 마지막 수정 날짜를 박고, 이걸 이용해서 지금의 [new!] 레이블과 비슷한 [updated!] 레이블을 달아보는 것이다.
리액트로 취미 코딩하기. 아이디어는 꽤 쌓여있는데 이 중에서 어떤 걸 털어볼지 고민이다. 최종적으로는 ReScript까지 가보고 싶다.

리액트 취미 코딩은 좀더 긴 호흡으로 내년 내내 진행해볼 생각이다. 레이블은 아마 근 시일 내에 이 글에 [updated!] 레이블이 붙지 않을까 하는 마음가짐으로 미래의 나에게 떠넘긴다.

쉬엄쉬엄 하다보니 어느새 완성해버렸다. [updated!] 레이블은 [new!] 레이블을 붙였을 때와 유사하게 구현하였다. 마지막까지 updated, revised, changed 등의 표현 중에서 뭐가 제일 자연스러운지 고민했는데 네이티브가 아니니 그냥 처음 떠오른 걸로 가기로 했다.

타임스탬프 훅을 구현하는 것도 재밌었다. 이제 Elisp으로 개인적인 장난감을 만드는 데 꽤 익숙해진 것 같다. 설명하자면 먼저 ---로 시작하는 YAML 섹션을 찾은 다음 미리 약속한 속성 키 값인 last_update가 있는지 살펴본다. 없으면 새로 넣고, 있으면 있는 위치에서 이전 값을 날려버린다. 그 후 현재 타임스탬프를 그자리에 박는다. 구현은 이게 끝이다. 이제 이걸 'before-save-hook에 등록해서 저장할 때마다 이 함수가 실행되게 하면 된다. 그렇지만 모든 모드에서 타임스탬프를 찍는 것은 의미가 없으니, 마크다운을 수정할 때에만 훅을 걸고 싶다. 찾아보니 로컬 훅을 거는 멋진 방법이 있길래 적용했다. 그리고 이리저리 테스트해보니, 이 훅이 동작하지 않았으면 하는 마크다운 파일(예: 처음 발행하는 문서)도 있었다. 그래서 아예 훅을 거는 함수와 빼는 함수를 (interactive)로 만들어서 필요할 때 호출하기로 했다. 로컬 훅을 걸 때도 이 함수를 재사용했다.

그 결과 지금 보이는 것처럼, 이제 발행된 이후에 수정한 글에는 [updated!] 태그가 자동으로 붙는다! 오랜만의 재미난 취미 코딩이었다.