블로그 디자인 개선

이 블로그는 크림색 바탕에 세리프 제목, 올리브색 링크를 쓰고 있었는데, 다시 보니 이 블로그를 만든 코딩 에이전트 Claude처럼 보였다. 그래서 Claude에 “디자인을 더 날카롭게, 너무 Claude처럼 보인다”고 요청해 테마를 바꿨다.

예전 디자인

에이전트는 스타일시트를 읽고 크림색 바탕, 세리프, 올리브색을 문제로 꼽았고 새 테마에서는 셋 다 쓰지 않았다.

색

곰 아바타는 이미 저장소에 있었지만 글 한 편에서만 쓰고 있었고, 헤더에는 곰 실루엣이 있었다. 에이전트는 아바타 PNG에서 픽셀 색을 뽑아 팔레트를 만들었다.

글자색 #121a2c는 검정에 가까운 남색으로, 아바타에서 뽑은 색은 아니고 안경 색을 대신한다. 페이지 바탕은 #f5faf8이다.

글꼴은 제목에 Bricolage Grotesque, 본문에 IBM Plex Sans, 날짜·라벨·내비에 IBM Plex Mono를 쓴다.

바꾼 것

• 홈 첫 화면을 민트색으로 바꾸고 큰 이름과 아바타를 넣었다. 아바타는 기울인 액자에 그림자를 달았다.
• 첫 화면 배경은 아바타에 맞춰 로우폴리 면으로 했다. 스크립트가 13×5 격자를 흔들어 칸마다 삼각형 두 개로 나누고 민트 계열로 칠한다. 삼각형 130개, SVG 9KB다. 난수 시드를 날짜로 고정해서 빌드할 때마다 같은 모양이 나온다.
• 프로젝트 목록은 2px 테두리와 그림자가 있는 카드로 바꿨다. 설치 명령은 $ 프롬프트가 붙은 남색 블록에 넣었다.
• 글 목록은 왼쪽 열에 날짜를 모노 글꼴로 둔다.
• 코드 블록은 Shiki night-owl 테마를 쓴다. Astro 기본값은 github-dark다.
• 헤더에는 실루엣 대신 아바타를 넣었다. 파비콘은 실루엣을 새 색으로 칠해 그대로 쓴다.
• 첫 화면은 236KB 원본 대신 27KB짜리 560px 아바타를 불러온다.

버그 두 개

375px 모바일 화면에서 아바타 글이 439px로 넘쳤다. 예전 테마의 규칙 때문에 표 첫 열에서 줄바꿈이 되지 않았다. 좁은 화면에서는 줄을 바꾸도록 고쳤다.

사이트에 og:image가 없어서 면 배경, 아바타, 액자로 1200×630 이미지를 만들었다. 용량을 줄이려고 색 팔레트 PNG로 내보냈더니 삼각형 하나에 회색 노이즈가 생겼다. 팔레트 없이 다시 내보내니 123KB로 깨끗하게 나왔다. 곰 아바타 글을 만들 때도 다른 도구에서 같은 디더링 문제가 났다.

바꾸지 않은 것

문구는 그대로 뒀다. 새로 들어간 글자는 이름 위의 “Build log” 라벨 하나이고, 기존 소개에서 가져왔다. 방문 통계, RSS, canonical URL, /now의 실시간 숫자도 그대로 동작한다. 다크 모드는 아직 없다.

결과

에이전트는 브랜치에서 작업하고 로컬 미리보기를 보여 줬다. 면 배경 명암, 그림자 두께, 헤더 로고를 조정할 수 있다고 했지만 그대로 머지했다.