umnoni

Astro + Tailwind 블로그 구축기: 가독성 튜닝과 나만의 브랜드 컬러 입히기

#Astro #TailwindCSS #Frontend #Design #Blog

첫 포스팅에서 Astro, React, Tailwind CSS를 이용해 블로그의 뼈대를 잡았다면, 이번에는 프론트엔드 개발자로서 가장 신경 쓰이는 부분인 가독성(UX) 과 나만의 브랜드 아이덴티티(UI) 를 구축하는 과정에 집중했다.

단순히 예쁜 디자인을 넘어, 모바일과 데스크탑을 아우르는 쾌적한 읽기 경험을 만드는 데 주안점을 두었다.

1. 레이아웃과 UX 최적화: 시원한 읽기 환경 만들기

Astro 테마들의 기본 설정은 종종 본문 폭이 너무 좁게(예: max-w-3xl) 설정되어 있는 경우가 많다. 이를 기술 블로그에 맞게 넓고 시원하게 수정했다.

  • 메인 컨테이너 폭 확장: Layout.astro의 메인 컨테이너를 max-w-4xl로 넓히고 mx-auto를 적용해 모니터 중앙에 안정적으로 배치했다.
  • Prose 제어: Tailwind Typography(prose) 플러그인이 자체적으로 폭을 제한하지 못하도록 본문 컨테이너에 max-w-none을 부여하여 부모의 폭을 온전히 채우게 했다.
  • 스크롤바 레이아웃 밀림 방지: 상세 페이지 진입 시 우측에 스크롤바가 생기면서 전체 레이아웃이 미세하게 왼쪽으로 밀리는 고질적인 현상을 막기 위해, 전역 CSS에 다음을 추가했다.
/* src/styles/global.css */
html {
  scrollbar-gutter: stable;
}

2. 타이포그래피: 돌고 돌아 결국 가독성

글꼴은 블로그의 인상을 결정하는 가장 중요한 요소다. 초기에는 개성 있는 ‘조선굴림체’를 시도했으나, 장문의 기술 글을 읽기에는 눈이 피로해질 수 있다는 판단하에 가독성이 좋은 Pretendard(프리텐다드) 로 본문을 전면 교체했다.

  • 본문 (Pretendard): 군더더기 없는 깔끔함으로 정보 전달에 집중했다.
  • 헤더 (이서윤체): 제목과 로고에는 이서윤체를 유지해 특유의 따뜻하고 귀여운 아이덴티티를 살렸다.
  • 코드 블록 (D2Coding): 개발자 블로그의 필수 요소인 코드 블록은 D2Coding으로 정갈함을 더했다.

문단 간격 튜닝: 글을 쓸 때 문장마다 엔터를 자주 치는 편이다. Tailwind prose-lg의 기본 문단 간격은 다소 넓게 느껴져서, 본문을 감싸는 div에 [&>p]:my-4 클래스를 주입해 내 작성 습관에 맞는 간격을 완성했다.

<div class="prose prose-lg max-w-none text-campfire-brown [&>p]:my-4">
  <Content />
</div>

3. 아이덴티티 구축: 캠프파이어 팔레트 도입

유튜브 채널에서 사용 중인 프로크리에이트(Procreate)의 ‘Campfire’ 팔레트를 블로그 전체 디자인 시스템으로 가져왔다. Tailwind 설정 파일에 직접 컬러를 등록하여 프로젝트 전반에서 사용했다.

// tailwind.config.mjs
export default {
  theme: {
    extend: {
      colors: {
        campfire: {
          red: '#db6b5c',       // 포인트 태그
          yellow: '#f7e4ab',
          'yellow-light': '#fbf1cf', // 인라인 코드 배경
          brown: '#8c4646',     // 본문 텍스트
          green: '#588c7f',     // 리스트 불렛 및 인라인 코드 텍스트
        },
      },
    }
  }
}

4. 디테일과 반응형 처리

모바일 헤더 최적화: 모바일 환경에서 날짜가 길게 세로로 늘어지고, 태그가 화면 밖으로 삐져나가는 현상을 Tailwind의 반응형 유틸리티로 해결했다.

  • flex-col md:flex-row md:items-center를 사용해 모바일에서는 세로로 차곡차곡 쌓이고, 데스크탑에서는 가로로 넓게 펼쳐지도록 구성했다.
  • 태그 영역에는 flex-wrap을 주어 태그들이 자연스럽게 줄바꿈되도록 유도했다.

커스텀 SVG 파비콘 & 동적 Footer: 이서윤체의 U 자와 캠프파이어 컬러를 조합해 깔끔한 SVG 파비콘을 제작했다. 또한, 정적인 Footer 영역은 굳이 React 컴포넌트로 둘 필요가 없어 순수 .astro 파일로 전환했다. new Date().getFullYear()를 활용해 카피라이트의 연도가 자동으로 업데이트되도록 하고, 유튜브 로고 역시 외부 라이브러리 없이 캠프파이어 레드를 입힌 SVG 아이콘으로 대체했다.

기본 뼈대 위에 나만의 색깔과 타이포그래피를 입히는 과정은 프론트엔드 개발의 가장 큰 즐거움 중 하나다. 이제 본격적으로 개발 지식과 일상을 이곳에 기록해 나갈 차례다.