블로그 About 페이지와 프로젝트 카드 리디자인 (연재 2/3)

학습 주제

• Astro 기반 개인 블로그의 컴포넌트 디자인 일관성 맞추기
• 소개(About) 페이지 콘텐츠 전략 다시 세우기
• 학습 날짜: 2026-07-24

탐구 과정

시작은 단순했습니다. 소개란이 예전 상태 그대로 남아있어서 갱신이 필요했어요. 다크 테마라고 써있는데 실제로는 이미 크림톤 라이트 테마로 바뀌어 있었고, "Astro의 정적 생성 활용"이라는 문구도 방문자 로깅 기능을 넣으면서 페이지를 SSR로 전환한 이후로는 더 이상 사실이 아니었습니다. 문서와 실제 코드가 어긋나 있으면 나중에 더 헷갈린다는 걸 다시 확인한 순간이었습니다.

소개란을 고치다 보니 자연스럽게 프로젝트 카드 디자인도 눈에 밟혔습니다. ProjectCard.astro는 각진 박스형(rounded-lg border, 배경색 있는)이었는데, 블로그 글 목록(BlogCard.astro)은 구분선만 있는 깔끔한 리스트형이었거든요. 같은 사이트 안에서 서로 다른 톤을 쓰고 있던 셈입니다. 이걸 통일하기로 하고 카드 스타일을 바꾸다 보니, 홈 화면에서 프로젝트 목록을 감싸고 있던 grid md:grid-cols-2 래퍼가 문제였습니다. 리스트형 디자인은 구분선이 화면 전체 폭으로 이어져야 하는데, 그리드 컬럼으로 나뉘어 있으면 그 구분선이 끊겨버리더군요. 래퍼를 걷어내고 나서야 원하던 모양이 나왔습니다.

디자인을 정리하고 나니 콘텐츠 자체를 다시 보게 됐습니다. "이수 과목" 섹션을 넣을지 말지 고민하다가, 결국 빼기로 했습니다. 이유는 단순합니다. 프로젝트와 블로그 글이 이미 실력을 훨씬 구체적으로 보여주는데, 과목 나열은 상대적으로 정보값이 낮고 학기마다 갱신해줘야 하는 부담만 남기니까요. 대신 전공/관심 분야는 소개 문단 안에 자연스럽게 녹이는 쪽으로 정리했습니다.

그리고 여기서 더 근본적인 질문이 생겼습니다. 지금 소개글이 사실 스펙 나열에 가깝다는 걸 깨달은 거죠. 평소 사고방식이나 좋아하는 것, 일할 때 중요하게 여기는 가치가 담기면 훨씬 이 블로그다운 글이 될 것 같았습니다. 그래서 직접 몇 가지를 정리해봤습니다.

핵심 학습 내용

이번에 정리하면서 명확해진 것들입니다.

컴포넌트 디자인은 일관성이 우선이다. 같은 사이트 안에 있는 카드형 UI라면 박스형이든 리스트형이든 하나로 통일하는 게 훨씬 정돈돼 보입니다. 특히 리스트형 레이아웃(border-b로 구분선을 그리는 방식)은 부모 컨테이너의 그리드/폭 제약에 민감하다는 것도 배웠습니다. 아래처럼 그리드로 감싸면 구분선이 컬럼 단위로 끊깁니다.

<div class="grid md:grid-cols-2">
  <!-- 각 카드가 좁은 폭에 갇혀 border-b가 화면 전체로 이어지지 않음 -->
</div>

래퍼를 제거하고 카드들을 세로로 쌓기만 하면, border-b가 화면 폭 전체를 가로지르는 자연스러운 리스트가 됩니다.

콘텐츠는 정보값과 유지보수 비용을 같이 따져야 한다. 이수 과목 나열은 어느 학부생이나 비슷하고, 학기마다 손봐야 하는데 정작 독자 입장에서 얻는 정보는 적습니다. 반면 프로젝트나 블로그 글은 실제로 뭘 할 수 있는지 훨씬 구체적으로 보여줍니다. 정적인 스펙보다 결과물이 낫다는 걸 새삼 확인했습니다.

소개 페이지는 스펙시트가 아니라 사고방식을 담는 곳일 수 있다. 결국 아래 네 가지로 제 소개를 다시 썼습니다.

• AI를 적극 활용하되, 코드의 동작을 직접 검증하는 걸 중요하게 여긴다는 점
• 새 개념을 공부할 땐 기존에 알던 것에 빗대어 재구성하고, 그게 깔끔하게 정리돼야 마음이 편해진다는 점
• 여유가 있어도 가만있지 않고 현 상황에서 부족한 걸 찾아 개선하려 한다는 태도
• 어떤 활동이든 결국 타인을 위해 하는 일이라 생각하고, 그것이 바람직한 마음가짐이라고 여긴다는 것

이해한 내용

디자인을 통일하는 과정에서, 겉보기엔 사소해 보이는 스타일 차이(박스 vs 리스트)가 실은 레이아웃 구조(그리드 vs 풀폭 리스트) 자체의 차이라는 걸 새로 알게 됐습니다. 스타일만 바꾼다고 끝나는 게 아니라 감싸고 있는 컨테이너까지 함께 봐야 한다는 점이 인상 깊었습니다.

또 하나는, 문서(소개 페이지)와 실제 구현(SSR 전환, 테마 변경)이 어긋나 있으면 그게 눈에 잘 안 띄다가도 나중에 꼭 걸린다는 것. 코드를 바꿀 때마다 관련 설명 문구도 같이 점검하는 습관이 필요하다는 걸 체감했습니다.

콘텐츠 측면에서는, "넣을 수 있는 정보"와 "넣어야 하는 정보"가 다르다는 걸 정리했습니다. 이수 과목처럼 넣을 수는 있지만 굳이 안 넣어도 되는 정보, 그리고 사고방식처럼 남들이 잘 안 쓰지만 오히려 더 의미 있는 정보를 구분하는 기준을 세운 셈입니다.

실전 적용

이번에 정리한 디자인 원칙(카드 컴포넌트 통일, 리스트형 레이아웃에서 부모 컨테이너 확인하기)은 앞으로 블로그에 새 섹션을 추가할 때도 그대로 적용할 수 있을 것 같습니다. 새 컴포넌트를 만들기 전에 기존 컴포넌트(BlogCard 같은)를 먼저 참고해서 스타일 가이드를 맞추는 습관을 들이면 좋겠습니다.

콘텐츠 전략 쪽에서는, 다른 페이지(예: 프로젝트 상세 페이지)를 쓸 때도 "이게 정말 독자에게 정보값이 있는가"를 먼저 따져보고 넣을지 뺄지 결정하려고 합니다.

추가 학습 계획

• Astro의 SSR/SSG 전환이 실제로 성능이나 캐싱에 어떤 영향을 주는지 더 깊게 파보고 싶습니다.
• Tailwind로 리스트형 레이아웃을 만들 때 반응형(모바일) 대응이 어떻게 달라지는지 점검해볼 계획입니다.
• 소개 페이지처럼 개인적인 색깔이 드러나는 콘텐츠를 다른 섹션(프로젝트 설명 등)에도 어떻게 자연스럽게 녹일 수 있을지 고민해보려 합니다.