이 사이트를 만들며 정한 규칙들

이 사이트는 디자인부터 코드까지 혼자 만들었다. 그래서 규칙을 어겨도 잔소리할 사람이 없다. 아래는 그 사이트를 만들며 정한 다섯 가지 규칙이다 — 화면을 예쁘게 만드는 이야기가 아니라, 내일의 내가 그 규칙을 어기지 못하게 만드는 이야기.

1. 콘텐츠와 코드를 갈라놓는다

글과 작업물은 content/에, 사이트는 src/에 산다. 스택을 갈아엎어도 원본은 그대로 남는다는 뜻이다. 실제로 한 번 갈아엎었고, 그때 옮긴 것은 코드뿐이었다.

2. 프로젝트 하나 = 폴더 하나

작업물 하나는 폴더 하나다. 텍스트도 이미지도 그 안에 같이 산다. 이미지를 공용 폴더 한곳에 몰아넣는 방식은 편해 보이지만, 프로젝트를 지울 때 어떤 이미지가 딸려 나가야 하는지 아무도 모르게 된다. 지금은 폴더 안에서 /media/blog/making-this-site/…라고 쓰면 사이트가 알아서 주소로 바꾼다. 프로젝트를 지우는 일이 폴더 하나를 지우는 일이 됐다.

3. 화면마다 자기 문장을 준다

같은 프로젝트라도 목록 카드의 제목과 상세 페이지의 제목은 달라야 할 때가 있다. 처음엔 제목 하나를 모든 화면이 공유하게 했는데, 목록에 맞추면 상세가 밋밋하고 상세에 맞추면 목록이 넘쳤다. 지금은 표면마다 제목·요약을 따로 가진다. 같은 문장이 여러 번 적히는 대신, 한 화면을 고칠 때 다른 화면이 망가지는 일이 없어졌다.

4. 값이 아니라 규칙을 고친다

여백과 글자 크기는 화면에서 직접 정하지 않고 토큰으로 정한다. 이게 왜 중요한지 보여준 사건이 있다. About 페이지의 제목이 자꾸 네 줄로 쪼개졌는데, 원인은 제목 크기가 아니라 본문용 리딩 측정폭(34rem)을 제목에까지 씌운 것이었다. 그 폭을 본문에만 남기자 제목은 두 줄이 됐다. 고친 것은 값 하나가 아니라 “이 폭은 누구를 위한 폭인가”라는 규칙이었다.

5. 눈으로 본 것을 믿지 않는다

브라우저에서 괜찮아 보이는 것과 실제로 괜찮은 것은 다르다. 그래서 화면을 고칠 때마다 숫자를 잰다. 제목이 몇 줄인지, 칸이 몇 픽셀인지, 스크롤로 돌아왔을 때 카운터가 다시 도는지. 테스트는 그 숫자를 붙잡아 두는 장치다. 다음에 내가 무심코 어기면, 나 대신 소리쳐 준다.

혼자 만드는 사이트에서 제일 위험한 건 마감이 아니라 일관성이다. 어제의 나와 오늘의 내가 다른 규칙으로 작업하면, 사이트는 한 사람이 만든 것처럼 보이지 않는다. 위의 다섯 가지는 결국 같은 말이다.

취향은 넘겨줄 수 없지만 규칙은 넘겨줄 수 있다. 넘겨받는 사람이 내일의 나라도 마찬가지다.