블로그 소개 페이지 다시 쓰기 – 스펙 나열에서 나를 담은 글로 (연재 2/6)

학습 주제

• 개인 블로그(Astro 기반) About 페이지 콘텐츠 개편, 프로젝트 카드 UI 통일 작업
• 학습 날짜: 2026-07-24

탐구 과정

시작은 단순했다. "소개란을 현재 상태로 갱신해줘"라는 작업이었는데, 하다 보니 이미 라이트(크림) 테마로 바뀐 지 오래인데 소개글엔 아직 "다크 테마"라고 쓰여 있는 등 실제 상태와 어긋난 부분들이 눈에 띄었다. 정적 생성(SSG) 관련 문구도 최근 방문자 로깅 기능 때문에 페이지를 SSR로 바꾸면서 더는 사실이 아니게 된 상태였다. 이런 건 그냥 놔두면 나중에 더 헷갈리니까 바로 잡았다.

그러다 프로젝트 카드 디자인이 블로그 글 목록과 스타일이 다르다는 걸 알아챘다. 프로젝트 카드는 각진 박스(둥근 테두리, 배경색)로 되어 있는데, 블로그 카드는 구분선 기반의 미니멀한 리스트였다. 같은 사이트인데 섹션마다 톤이 다르면 어색하다는 생각이 들어서 통일 작업으로 넘어갔다.

카드 스타일을 맞추고 나니 다음 고민은 "이수 과목 섹션을 넣을까 말까"였다. 넣자니 어느 학부생이나 비슷한 과목을 들었을 거라 정보값이 낮고, 학기마다 갱신해야 하는 부담도 있었다. 결국 빼기로 하고, 대신 "컴퓨터공학 전공, 인프라/백엔드 관심" 정도만 소개 첫 문단에 자연스럽게 녹이기로 했다.

그런데 여기서 더 근본적인 질문이 생겼다. 지금 소개글이 결국 스펙 나열에 가깝지 않나? 이력서처럼 전공과 관심사만 나열하는 게 아니라, 평소 사고방식이나 좋아하는 것, 일할 때 중요하게 여기는 가치를 담으면 훨씬 더 나다운 글이 될 것 같았다. 그래서 실제로 내가 어떻게 일하는지, 무엇을 중요하게 여기는지를 하나씩 적어보기 시작했다.

핵심 학습 내용

UI 일관성 잡기

• ProjectCard.astro를 BlogCard.astro와 같은 스타일로 맞췄다. 각진 박스(rounded-lg border ... bg-warm-900/30)를 버리고 구분선 기반 리스트(border-b, 배경/테두리 없음)로 바꿨다.
• 홈 화면에서 프로젝트 목록을 감싸던 grid md:grid-cols-2 wrapper도 제거했다. 컴포넌트만 바꾸고 wrapper를 그대로 두면 전체 폭 구분선이 중간에 끊겨 보이는 문제가 있어서, 컨테이너 레벨까지 같이 손봐야 한다는 걸 알게 됐다.
• 기술 스택 표시도 알약(pill) 배지 대신 블로그 태그처럼 텍스트 + · 구분자로 바꿔서, 시각적 톤을 완전히 통일했다.

소개 페이지 콘텐츠 재구성

• 이수 과목 나열형 섹션을 삭제하고, 전공/관심사는 첫 문단 소개에 자연스럽게 녹였다.
• 소개글을 아래 흐름으로 다시 정리했다.
  1. AI를 적극 활용하되, 코드 동작을 직접 검증하는 걸 중요하게 여긴다는 점
  2. 새로운 개념을 공부하면 기존에 알던 지식에 빗대어 재구성하고, 그게 깔끔하게 정리돼야 마음이 편하다는 점, 그리고 여유가 있어도 부족한 부분을 스스로 찾아 개선하려는 태도
  3. 시간이 더 들더라도 남에게 도움이 되는 걸 볼 때 보람을 느낀다는, 일하는 이유
• 이름("장찬욱")을 첫 문장에 넣어 "안녕하세요, 장찬욱입니다"로 시작하도록 수정.
• 마지막 문단은 여러 차례 다듬었다. "결국, 그게 제일 보람을 느낍니다" → "제일" 삭제, "그게" 대신 "결국,"으로 바로 이어지도록. "무엇이든, 결국" → "어떤 활동이든" 으로 표현 변경. 최종적으로는 "개발이든 다른 어떤 활동이든, 결국 타인을 위해 하는 일이라고 생각하며, 그것이 바람직한 마음가짐이라고 생각합니다."로 정리.

이해한 내용

• 디자인 일관성이란 개별 컴포넌트만 통일한다고 끝나는 게 아니라, 그 컴포넌트를 감싸는 레이아웃(wrapper)까지 같이 신경 써야 완성된다는 걸 실감했다. 카드는 고쳤는데 grid wrapper를 놓쳤으면 눈에 띄게 어색했을 것이다.
• 자기소개 글도 결국 "무엇을 남기고 무엇을 뺄지" 우선순위를 정하는 작업이라는 걸 느꼈다. 이수 과목처럼 정보값은 낮지만 유지보수 부담은 있는 항목은 과감히 빼고, 대신 정말 나를 드러내는 내용(사고방식, 가치관)에 자리를 내주는 게 맞다는 결론이었다.
• 문장 하나를 다듬는 데도 여러 번의 수정이 필요했다. "그게 제일" 같은 표현은 미묘하게 과장되어 보일 수 있고, "무엇이든"보다 "어떤 활동이든"이 더 자연스럽게 읽힌다는 걸 직접 고쳐보면서 체감했다.

실전 적용

• 앞으로 포트폴리오나 블로그의 About 페이지를 쓸 때, 스펙 나열보다 "어떻게 일하는가"를 먼저 적어보는 방식을 계속 써볼 생각이다.
• 컴포넌트 리디자인을 할 때는 컴포넌트 자체뿐 아니라 그걸 사용하는 상위 레이아웃(wrapper, grid 등)까지 체크리스트에 넣어서 확인하는 습관을 들이려 한다.
• 문장을 다듬을 때 한 번에 완성하려 하지 말고, 초안을 두고 여러 번 짧게 고쳐나가는 방식이 실제로 더 자연스러운 결과를 만든다는 걸 느꼈다.

추가 학습 계획

• 최근 SSR로 전환한 부분(방문자 로깅 기능과 관련)을 더 깊이 파고, Astro에서 SSG와 SSR을 언제 나눠 쓰는 게 좋을지 정리해보고 싶다.
• Tailwind로 만든 에디토리얼 스타일 리스트 컴포넌트 패턴(구분선 기반, no-box)을 다른 프로젝트에도 재사용할 수 있게 별도로 문서화해두면 좋을 것 같다.
• 자기소개 글쓰기 자체에 대해서도, 좋은 About 페이지 사례들을 더 찾아보고 어떤 구조가 효과적인지 비교해보고 싶다.