매거진 스타일로 재정의한 블로그 디자인
목차
블로그 UI를 처음부터 다시 만들었다. 지금까지 '라이프스타일 블로그' 톤의 가벼운 느낌을 벗고, '에디토리얼 매거진' 느낌으로 통일하는 작업이었다. 헤더부터 포스트 카드, 전체 레이아웃까지 손을 댔기 때문에 꽤 큰 변경이었는데, 왜 이 작업을 진행했고 어떤 식으로 접근했는지 정리해본다.
전체적 톤 변화의 필요성
같은 콘텐츠라도 감싸는 '껍데기'가 달라지면 독자가 받는 첫 인상이 완전히 바뀐다. 이전의 'AI 라이프스타일 블로그' 스타일은 캐주얼하고 개인적인 톤을 전달했는데, 점진적으로 더 신뢰성 있고 정제된 느낌의 '편집된 콘텐츠'로 포지셔닝하고 싶었다. 에디토리얼 매거진 스타일은 다음 몇 가지 이점이 있다:
- 신뢰성과 권위성: 신문사나 잡지의 에디토리얼 톤은 "이건 신중하게 선별된 글이다"라는 신호를 자동으로 전달한다
- 정보 계층 명확화: 매거진 룩은 시각적 위계가 뚜렷해서, 독자가 주목해야 할 콘텐츠와 보조 정보를 쉽게 구분한다
- 스케일 가능성: 콘텐츠가 늘어나도 시각적으로 '어질어질'하지 않고 정돈된 느낌을 유지할 수 있다
이건 단순한 색깔 변경이 아니라 '우리 블로그가 무엇인지'를 다시 정의하는 작업이었다.
변경 범위와 구현 전략
파일 목록을 보면:
- public/styles.css: 전체 CSS 기본 레이어. 타이포그래피, 컬러 팔레트, 기본 요소 스타일링
- src/components/Header.astro: 사이트 헤더 컴포넌트. 네비게이션과 브랜딩 영역
- src/components/PostCard.astro: 포스트 목록에서 각 글을 표현하는 카드 컴포넌트
- src/layouts/Base.astro: 모든 페이지가 상속하는 기본 레이아웃
- src/pages/index.astro: 홈 페이지
결국 블로그 전체 영역을 다뤘다. CSS부터 손을 대면 기초가 재정의되고, 그 위에 올라가는 컴포넌트들(Header, PostCard)이 새로운 기초에 맞춰 재구성된다. Base 레이아웃과 index 페이지는 이 변경을 최종적으로 '조립'하는 계층이었다.
이렇게 하향식으로 CSS → 컴포넌트 → 페이지 순서로 손대는 것이 일반적인 리뉴얼 패턴이다. 역순으로 하면 각 페이지가 독립적으로 스타일을 가지게 되어 유지보수가 복잡해진다.
디자인 리뉴얼 시 배운 점
이번 작업에서 몇 가지 깨달은 부분이 있다.
첫째, 컴포넌트 기반 구조의 강점이 여기서 드러난다. Header와 PostCard를 독립적으로 수정할 수 있다는 것은, 한 곳의 변경이 여러 페이지에 자동으로 반영된다는 뜻이다. 만약 각 페이지가 고유 HTML을 가지고 있었다면, 같은 변경을 열 번도 더 반복했을 것이다.
둘째, CSS 리팩토링은 예상보다 신중해야 한다. 스타일시트 전체를 손 대다 보면 의도치 않은 곳까지 영향이 간다. 예를 들어 기본 폰트 크기를 변경하면 모든 rem 기반 레이아웃이 연쇄적으로 조정된다. 리뷰어와 함께 각 변경 구간을 꼼꼼히 확인하는 게 중요하다.
셋째, 사용자 피드백 루프가 필수다. 디자인은 객관성이 높은 영역처럼 보이지만, 실제로는 매우 주관적이다. 스테이징 환경에서 팀과 이해관계자들의 의견을 충분히 수렴한 후 배포하는 게 나중에 "다시 돌려달라" 같은 요청을 줄인다.
마치며
한 번의 디자인 리뉴얼은 단순한 'UI 변경'이 아니라, 서비스가 자신을 어떻게 표현할 것인지를 결정하는 일이다. 에디토리얼 매거진 룩으로의 전환은 콘텐츠 품질에 대한 신호를 보내는 것과 같다. 앞으로 새 글들이 이 새로운 틀 안에서 어떻게 보일지 기대된다.
🛒 이 글과 어울리는 추천 상품
*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.
댓글 0
첫 댓글 달아줘.