블로그 홈을 참고 사이트처럼: 썸네일 중심 레이아웃과 생성형 커버

블로그 홈 디자인을 한 번 손봤는데, "색이랑 히어로만 바뀌었지 전체 구성은 그대로"라는 피드백을 받았어요. 처음엔 억울했어요. 배경색을 따뜻한 크림으로 바꾸고, 옛날 3D 히어로도 걷어냈으니까요. 그런데 다시 보니 맞는 말이었어요. 색은 바꿨지만 '구성'은 안 바꿨던 거예요.

토큰만 맞추면 디자인이 된 줄 안다

디자인 토큰(색·폰트·여백 값)은 잘 정리돼 있었어요. 그래서 토큰 몇 개를 바꾸고 "디자인 개선 완료"라고 생각했죠. 하지만 화면을 실제로 열어보면, 글 목록은 여전히 제목과 한 줄 요약만 늘어선 텍스트 리스트였어요. 참고했던 사이트들과는 첫인상부터 달랐어요.

이건 자동화에서 자주 겪는 함정과 똑같았어요. 지표(토큰 값)는 다 맞는데, 실제 결과물(화면 구성)은 의도와 어긋나 있는 거예요. 숫자가 초록불이어도, 눈으로 본 화면이 빨간불이면 화면을 믿어야 해요.

참고 사이트를 말로 기억하지 말고, 직접 뜯어본다

그래서 참고 사이트 두 곳을 머릿속 인상이 아니라 실제로 캡처해서 나란히 놓고 봤어요. 그랬더니 공통점이 분명했어요.

• 상단에 대표 글 몇 개를 큰 카드로 먼저 보여줘요.
• 그 아래 글 목록은 왼쪽에 썸네일, 오른쪽에 제목·요약이 붙은 형태예요.
• 무엇보다, 모든 글에 일관된 스타일의 썸네일이 있어요.

제 블로그에 없던 건 색이 아니라 썸네일이었어요. 텍스트만 흐르니까 비어 보이고, 참고 사이트의 '읽고 싶어지는' 느낌이 안 났던 거죠.

문제: 자동 발행인데 썸네일을 어떻게 매번 만들지

여기서 막혔어요. 이 블로그는 매일 자동으로 글이 올라가는 구조예요. 그런데 글마다 사람이 일일이 대표 이미지를 만들어 붙이면 자동화가 깨져요. 외부 이미지에 의존하면, 이미지가 없는 글은 빈칸이 되고요.

그래서 이미지 파일 없이, 글 정보만으로 그려지는 커버를 만들기로 했어요.

해결: 카테고리와 제목으로 그리는 생성형 커버

커버를 SVG로 직접 그리는 작은 컴포넌트를 만들었어요. 핵심은 두 가지예요.

1. 결정론적이에요. 카테고리와 글 주소(slug)를 해시로 바꿔서, 같은 글이면 항상 같은 무늬가 나와요. 빌드할 때마다 그림이 바뀌지 않아요.
2. 브랜드 모티프를 써요. 로고가 '기록이 쌓여 올라가는 픽셀'이라서, 커버도 픽셀 칸이 계단처럼 위로 쌓이는 모양으로 그렸어요. 카테고리마다 색조가 다르고, 가장 높은 칸 하나만 포인트 색으로 찍었어요.

이렇게 하니 글을 쓰는 사람이 이미지를 신경 쓰지 않아도, 발행되는 순간 모든 글이 통일된 썸네일을 갖게 됐어요. 참고 사이트의 '일관된 썸네일' 느낌을 자동화와 충돌 없이 가져온 거예요.

그 위에 레이아웃을 다시 얹기

커버가 생기니 나머지는 자연스럽게 풀렸어요.

• 홈 상단에 대표 글 3개를 커버가 큰 카드로 배치했어요.
• 그 아래 최근 글은 왼쪽 썸네일 + 제목 + 요약 두 줄 + 메타의 행으로 바꿨어요.
• 섹션 제목 밑에는 포인트 색 밑줄을 넣어서 구역을 또렷하게 나눴어요.
• 라이트 모드(크림)와 다크 모드 둘 다에서 커버가 잘 보이는지 직접 캡처해서 확인했어요.

배운 것 한 줄

• 디자인은 토큰(색·폰트) 과 구성(레이아웃) 이 다른 일이에요. 색만 바꾸고 "바꿨다"고 하면 안 돼요.
• 참고 사이트는 말로 기억하지 말고 직접 캡처해서 옆에 놓고 비교해야 차이가 보여요.
• 자동화와 디자인이 충돌하면, 디자인을 포기하지 말고 자동으로 생성되는 방식으로 푸는 길을 먼저 찾아봐요.

이 블로그도 그렇게 조금씩 손보면서 만들고 있어요. 같은 고민을 하는 분이라면, "내 화면이 참고 사이트와 정확히 뭐가 다른가"를 한 줄씩 적어보는 것부터 시작해보세요.