CSS 한 번 쓰고 열두 번 쓰기 — 시리즈 블로그 설계 [클로드 어디까지 써봤니 EP 08]

🤖 Created with Claude (Anthropic)

클로드 어디까지 써봤니 · EP 08

CSS 한 번 쓰고 열두 번 쓰기

— 시리즈 블로그 설계를 위한 CSS 재사용 전략

클로드의 친구 · 2026년 4월 14일

EP 07에서 우리는 Blogger v3 API로 자동 게시 시스템을 만들었다. 이제 다음 질문이 생긴다: 10개 블로그, 12편 시리즈, 수십 개의 포스트를 만들 때, CSS를 매번 다시 쓰면 얼마나 낭비일까?

이번 EP 08에서는 Lucas가 경험한 CSS 통일의 필요성부터, 시리즈별 접두사 체계, 그리고 새 편을 게시할 때 기존 편의 목차를 자동으로 갱신하는 기술까지 다룬다. 설계도의 마지막 핵심 도구가 바로 이것이다.

1. 왜 시리즈에 CSS 통일이 필요한가

Lucas는 현재 10개 블로그를 운영하고 있다. 그중 일부는 연재 시리즈다.

  • 요즘일본은 — 12편 시리즈, 전철·여행 가이드
  • ERP/SCM 미래노트 — 14편 순환 시리즈, 엔터프라이즈 설계
  • 한미일중러 정상 뉴스 — 일일 타임라인
  • 배움의 자리 — 월~일 5개 관점 시리즈

초반에 Lucas는 매 포스트마다 CSS를 새로 작성했다. 결과?

⚠️ 문제점들

  • 같은 스타일을 12번 정의 — 중복 코드
  • EP 01의 헤더 색상을 바꾸면, EP 03~12도 따로 수정해야 함
  • 새 편을 추가할 때마다 "이전 편과 스타일이 맞나?" 확인 필요
  • 각 포스트마다 다른 폰트 크기, 여백 → 읽기 경험 일관성 깨짐

이 문제를 해결하는 방법이 CSS 접두사 체계와 공통 컴포넌트 설계다. 한 번 쓰면 12번(또는 그 이상) 재사용 가능하다.

2. 접두사 체계로 CSS 충돌 방지

여러 시리즈 블로그를 동시에 자동 게시할 때, 각 블로그의 CSS 클래스가 충돌할 수 있다. 예를 들어:

/* ❌ 나쁜 예: 모든 시리즈에서 같은 클래스명 사용 */
.card { background: #f0f0f0; padding: 16px; }
.title { font-size: 18px; }
.nav-link { color: blue; }

여기서 "요즘일본은" 블로그의 `.card`를 수정하면, 다른 블로그의 `.card`까지 영향을 받을 수 있다. 특히 공유 클로드 세션에서 동시 다중 게시할 때 위험하다.

해결책: 시리즈별 CSS 접두사

/* ✅ 좋은 예: 각 시리즈에 고유 접두사 */
.yjp-card { ... }        /* 요즘일본은 */
.esf-card { ... }        /* ERP/SCM 미래노트 */
.sns-card { ... }        /* 한미일중러 정상뉴스 */
.bj-card { ... }         /* 배움의 자리 */
.csn-card { ... }        /* 클로드 어디까지 써봤니 */

접두사 규칙:

시리즈명 접두사 예시
요즘일본은 yjp- yjp-hero, yjp-nav
ERP/SCM 미래노트 esf- esf-module, esf-flow
한미일중러 정상뉴스 sns- sns-timeline
배움의 자리 bj- bj-perspective
클로드 어디까지 써봤니 csn- csn-episode, csn-toc

이 체계덕분에 각 시리즈가 독립적으로 스타일 지정되며, 나중에 다른 블로그에 영향을 주지 않는다.

3. 공통 컴포넌트 설계

접두사가 정해지면, 이제 각 시리즈에서 반복되는 구조를 컴포넌트로 설계한다.

대표적인 공통 컴포넌트 5가지:

  1. Hero Section — 제목, 부제, 배경 이미지. 모든 시리즈 포스트의 시작
  2. Navigation Bar — 이전/다음 편 링크, 현재 시리즈 내 위치 표시
  3. Info Box — 팁, 경고, 추가 정보를 강조하는 컬러 박스
  4. Table — 비교표, 데이터 정렬. 반응형 설계 필수
  5. Table of Contents (TOC) — 시리즈의 모든 편 목록. 자동 갱신 가능하도록 HTML 구조 표준화

예를 들어, "요즘일본은" 시리즈의 Hero Section:

<div class="yjp-hero" style="background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%); color: white; padding: 60px 40px; text-align: center;">
  <h1 class="yjp-hero-title">요즘일본은 · Part 1-1</h1>
  <p class="yjp-hero-subtitle">도쿄 중심부 전철 가이드</p>
</div>

이 구조를 12편 모두에 동일하게 적용하면, 나중에 배경색 하나를 바꿀 때 모든 편이 자동으로 업데이트된다 (v3 API 대량 PATCH).

4. Blogger 호환 CSS 함정

Blogger는 자유도가 높지만, 표준 CSS와 다르게 동작하는 부분들이 있다. Lucas가 발견한 3가지 핵심 함정:

함정 1: CSS 변수 (var()) 미지원

Blogger의 자동 최적화가 var()를 인식하지 못해 무시하거나 깨뜨린다.

❌ 금지:

:root { --primary: #e2b714; }
.button { background: var(--primary); }

✅ 허용:

.button { background: #e2b714; }

함정 2: box-sizing 없음

Blogger 테마는 기본적으로 box-sizing: border-box를 설정하지 않는다. 따라서 커스텀 블록에는 반드시 선언해야 한다.

.yjp-container {
  max-width: 1100px;
  padding: 32px;
  border: 1px solid #ddd;
  box-sizing: border-box; /* 필수! */
  /* padding 때문에 overflow 방지 */
}

함정 3: CSS ::before content에 이모지 금지

CSS의 ::before content에 이모지를 쓰면, Blogger의 목록 스니펫에서 깨진다.

❌ 금지:

.csn-item::before { content: "🎓"; }

✅ 허용:

<span>🎓</span> <span class="csn-item">...</span>

이 세 가지만 기억하면, Blogger 호환 CSS를 안정적으로 작성할 수 있다.

5. 반응형 설계 패턴

시리즈 블로그는 다양한 기기에서 읽힌다. 데스크톱(1100px)에서 모바일(480px)까지 일관된 경험을 제공해야 한다.

Lucas의 표준 반응형 패턴:

/* 기본: 데스크톱 (1100px max) */
.yjp-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 60px 32px;
  box-sizing: border-box;
}

/* 태블릿 & 모바일 */
@media (max-width: 768px) {
  .yjp-container {
    padding: 40px 20px;
  }
  .yjp-nav { flex-direction: column; }
}

@media (max-width: 480px) {
  .yjp-container {
    padding: 24px 16px;
  }
  .yjp-hero { padding: 40px 20px; }
  .yjp-title { font-size: 24px; }
}

핵심은 단계별 감소다:

  • 데스크톱(1100px): 전체 폭, 넉넉한 여백
  • 태블릿(768px): 패딩 축소, 플렉스 방향 변경
  • 모바일(480px): 최소 폰트 크기, 작은 이미지

이 패턴을 모든 시리즈 CSS에 동일하게 적용하면, 각 시리즈가 어떤 기기에서도 깔끔하게 렌더링된다.

6. 시리즈 목차 자동 갱신 — v3 API 활용

시리즈의 강력한 점은 상호 연결성이다. EP 09가 나오면, EP 08의 목차를 자동으로 갱신해야 한다.

전통적 방법 (❌ 비추천): 손으로 모든 기존 편을 열어서 링크를 추가한다. 12편이 있으면 11번 반복.

하네스 방법 (✅ 추천): v3 API로 대량 PATCH

예를 들어, EP 09가 공개되었을 때, Lucas의 자동화 스크립트는:

/* 의사코드 */
1. EP 08 포스트 내용 읽기
2. TOC 섹션 찾기 (<div id="csn-toc">...</div>)
3. "EP09" 링크 추가
4. v3 API PATCH로 EP 08 포스트 업데이트
5. EP 07, 06, 05... 차례대로 갱신

이를 위해서는 TOC를 HTML에서 쉽게 찾을 수 있게 표준화해야 한다:

이런 구조면, 클로드의 자동 갱신 스크립트가 id="csn-toc"를 찾아 정확히 갱신할 수 있다.

7. 하네스 관점 — CSS 통일의 의미

하네스 헌법에서 "Flow"는 교체 가능한 방법론을 뜻한다. CSS 통일은 바로 이것이다.

"한 번 설계한 CSS를 12번 쓸 수 있다는 것은, 설계가 교체 가능하다는 뜻이다. 나중에 새로운 디자인이 필요할 때, 하나의 접두사 체계만 바꾸면 12개 포스트가 모두 업데이트된다."

— Lucas의 설계 일지

하네스의 3가지 핵심 가치 중 하나가 정확성이다. CSS 통일은 이를 실현한다:

  • 중복 제거 = 오류 가능성 감소
  • 표준화 = 모든 편이 동일한 경험 제공
  • 자동화 = 수정이 한 곳에서만 일어남

이것이 바로 설계도의 마지막 단계다. EP 05~08을 통해 우리는 프롬프트→구조→라우팅→CSS 통일까지, AI와 협력하는 전체 설계 체계를 완성했다.

8. 실습 — 3편 분량 시리즈 CSS 템플릿

이제 Lucas가 실제로 사용하는 CSS 템플릿을 공개한다. 이를 복사해서 본인의 시리즈에 적용할 수 있다.

시리즈 기본 구조 (3편 분량):

<!-- EP 1: Hero + Lead -->
<div class="series-container" style="max-width:1100px; margin:0 auto; padding:60px 32px 100px; font-family:'Noto Sans KR',sans-serif; box-sizing:border-box;">

  <!-- Hero -->
  <div class="series-hero" style="background:linear-gradient(135deg,#1a1a2e,#0f3460); color:white; padding:60px 40px; border-radius:12px; margin-bottom:40px; box-sizing:border-box; text-align:center;">
    <p style="color:#e2b714; margin:0 0 16px 0;">Series Name · EP 01</p>
    <h1 style="font-size:38px; font-weight:700; margin:0 0 16px 0;">제목</h1>
    <p style="font-size:14px; color:#b0bec5; margin:0;">부제 및 설명</p>
  </div>

  <!-- Lead-in -->
  <div style="background:#f8f6f0; border-left:4px solid #e2b714; padding:24px; margin-bottom:40px; border-radius:4px; box-sizing:border-box;">
    <p style="margin:0; font-size:14px;">앞 편과의 연결고리...</p>
  </div>

  <!-- Content Sections -->
  <h2 style="font-size:22px; font-weight:700; color:#1a1a2e; margin:48px 0 20px 0; padding-bottom:12px; border-bottom:3px solid #e2b714;">1. 첫 번째 주제</h2>
  <p>내용...</p>

  <!-- Info Box -->
  <div style="background:#e3f2fd; border-left:4px solid #2196f3; padding:20px; margin:16px 0; border-radius:4px; box-sizing:border-box;">
    <p style="margin:0; font-weight:600;">💡 팁</p>
    <p style="margin:8px 0 0 0; font-size:14px;">추가 정보...</p>
  </div>

</div>

이 템플릿의 장점:

  • 인라인 스타일로 Blogger 호환 (클래스명 충돌 없음)
  • box-sizing:border-box 명시적 선언
  • HEX 색상 직접 사용 (var() 금지)
  • 반응형 미디어쿼리 추가 가능
  • 3편 모두에 동일 구조 → 자동 갱신 용이

목차 갱신 알고리즘 (의사코드):

/* EP 09 공개 후, 기존 편들 갱신 */
for episode in [EP08, EP07, EP06, ..., EP01]:
  1. v3 GET으로 episode 포스트 HTML 읽기
  2. id="series-toc" 섹션 파싱
  3. "EP09" 링크 항목 추가
  4. v3 PATCH로 포스트 업데이트
  5. 30초 대기 (API rate limit)

9. 클로드의 친구 생각

한국 블로거들이 느끼는 가장 큰 피로는 뭘까? 중복 작업이다. 매일 10개 블로그를 운영하면서 각각 다른 스타일을 유지하려니, 시간이 남는 게 아니라 시간이 무너진다.

Lucas가 보여준 CSS 접두사 체계는 단순해 보이지만, 아주 영리한 설계다. 한 번의 정의로 12번 재사용한다는 건, "설계의 정확성"이 얼마나 중요한지를 보여준다. 초반 2시간을 투자해서 CSS를 제대로 설계하면, 이후 3개월을 절약한다.

특히 인상적인 건 v3 API를 활용한 목차 자동 갱신이다. "새 편이 나올 때마다 기존 편을 손으로 수정한다"는 발상을 버리고, "설계가 이를 자동으로 처리하게 한다"는 발상의 전환. 이게 바로 하네스의 Core 가치 중 하나인 "정확성"을 실현하는 방식이다.

결론: 시리즈 블로그는 "글 잘 쓰기"가 아니라 "구조 잘 짜기"다. 글쓰기는 계속해야 하지만(이건 Lucas의 몫), 구조 설계는 클로드가 먼저 제안해야 한다. 그게 이 시리즈 EP 05~08의 전체 취지다.

10. 더 알아보기

📖 전 19개 에피소드 | Phase 1~5 완결형 커리큘럼

🤖 Created with Claude (Anthropic)

#클로드어디까지써봤니 #시리즈블로그 #CSS통일 #WebDesign #Blogger #자동화 #프롬프트엔지니어링 #AI #블로거 #블로그자동화 #하네스헌법 #Lucas #설계도 #유튜브자동화 #경제일지 #데이터시각화 #프로세스자동화 #워크플로우 #생산성 #AI활용법

コメント

コメントを投稿

このブログの人気の投稿

"이거 매일 해줘" — 첫 번째 자동화 태스크 [클로드 어디까지 써봤니 EP 04]

🤖 Created with Claude (Anthropic) 클로드 어디까지 써봤니 · EP 04 "이거 매일 해줘" — 스케줄 태스크로 반복 작업 자동화하기 클로드의 친구 · 2026년 4월 13일 ◀ EP 03: AI가 나를 기억한다 | 📚 EP 04 | EP 05: 나만의 헌법 만들기 ▶ 1. "매일 아침 뉴스 요약해줘"가 어떻게 작동할까 Lucas는 어느 날 아침 클로드에게 이렇게 말했습니다. "클로드, 매일 저녁 7시에 경제 뉴스 요약해서 블로그에 올려줘." 그 이후로 클로드는 매일 저녁 7시에 스스로 일어나, 뉴스를 검색하고, 글을 쓰고, 블로그에 올립니다. Lucas는 지금 이 일을 위해 아무것도 하지 않습니다. 이게 바로 스케줄 태스크 입니다. 그런데 "매일 저녁 7시"는 어떻게 기계가 이해하는 숫자로 바뀔까요? 그 비밀이 바로 크론 표현식(Cron Expression) 입니다. 2. 크론 표현식 — 시간을 코드로 말하는 방법 크론(Cron)은 원래 Unix/Linux 계열 운영체제에서 주기적 작업을 자동 실행하기 위해 만들어진 스케줄러입니다. 이름은 그리스어로 "시간"을 뜻하는 Chronos에서 왔습니다. 크론 표현식은 이렇게 생겼습니다: 분 시 일 월 요일 0 19 * * * 5개의 자리가 공백으로 구분되어 있습니다. 왼쪽부터 분(0-59) , 시(0-23) , 일(1-31) , 월(1-12) , 요일(0-6, 0=일요일) 입니다. * 는 "모든 값"을 뜻합니다. 위의 예시 0 19 * * * 는 "매일, 매월, 모든 요일, 19시 정각"이라는 뜻이죠. 실전 예시들 0 19 * * * → 매일 저녁 7시 정각. Lucas의 "클...
続きを読む

AI가 나를 기억한다 — 메모리 시스템의 비밀 [클로드 어디까지 써봤니 EP 03]

🤖 Created with Claude (Anthropic) 클로드 어디까지 써봤니 · EP 03 AI가 나를 기억한다 — 메모리 시스템의 비밀: 대화가 끝나도 남는 것들 클로드의 친구 · 2026년 4월 13일 ◀ EP 02: 클로드, 너 뭐 할 수 있어? | 📚 EP 03 | EP 04: "이거 매일 해줘" ▶ EP 02 에서 클로드의 기능 지도를 펼쳤습니다. 프로젝트, 아티팩트, MCP, 스케줄 태스크까지. 그런데 이 모든 기능을 쓰면서도 한 가지 아쉬운 순간이 있습니다. 새 대화를 열 때마다 "저는 누구인지" 다시 설명해야 하는 것. 오늘은 그 문제를 해결하는 기능을 이야기합니다. 클로드와 대화를 하다 보면 신기한 경험을 합니다. "저번에 만들어준 블로그 CSS 말인데요"라고 했는데, 클로드가 정확히 기억하고 있는 경우. 반대로 새 대화를 열었더니 어제 한 이야기를 하나도 모르는 경우. 이 차이는 어디서 올까요? 답은 메모리 입니다. 클로드에는 대화가 끝난 뒤에도 살아남는 기억 체계가 있습니다. 이것을 이해하면 클로드와의 협업이 완전히 달라집니다. 매번 같은 설명을 반복하는 대신, "나를 아는 AI"와 바로 일을 시작할 수 있으니까요. 1. 대화는 휘발된다 — 왜 메모리가 필요한가 AI 챗봇의 근본적인 한계는 대화가 끝나면 모든 맥락이 사라진다 는 것입니다. 이것은 클로드만의 문제가 아닙니다. ChatGPT든 Gemini든, 기본적으로 AI는 "지금 이 대화"만 기억합니다. 클로드가 똑똑하게 느껴지는 건 대화 안에서 문맥을 잘 추적하기 때문입니다. 하지만 새 대화를 시작하면? 백지 상태. 여러분의 이름도, 직업도, 어제 만들어달라고 한 코드의 스타일도 모릅니다. 😤 메모리 없는 세계 "안녕 클로드, 블로그 글 써줘." "네! 어떤 블로그인가요? 주제는 무...
続きを読む

블로그 자동화 첫걸음 — Blogger v3 API 정복기 [클로드 어디까지 써봤니 EP 07]

🤖 Created with Claude (Anthropic) 클로드 어디까지 써봤니 · EP 07 블로그 자동화 첫걸음 — Blogger v3 API로 첫 자동 게시 완성하기 클로드의 친구 · 2026년 4월 14일 ◀ EP 06: Guides 완전 정복 | 📚 EP 07 | EP 08: CSS 한 번 쓰고 열두 번 쓰기 ▶ 지난 EP 06에서는 AI를 조종하는 5가지 레버(Guides)를 완전 정복했습니다. 이번 에피소드에서는 드디어 블로그 자동화의 핵심 기술을 만납니다. 클로드에게 "이 글 블로그에 올려줘"라고 말하면 실제로 포스트가 올라가는 마법 — Blogger v3 API입니다. OAuth 인증의 원리부터 REST API 호출, 그리고 초보자를 함정에 빠뜨리는 CodeMirror 문제까지 낱낱이 파헤칩니다. 1. "그냥 붙여넣으면 안 되나요?" — 수동 게시의 한계 블로그 자동화를 처음 생각한 사람들은 대부분 이런 상상을 합니다. "클로드가 HTML을 만들면, 내가 복사해서 붙여넣으면 되잖아?" 맞습니다. 처음 한두 번은요. 하지만 블로그를 5개, 10개 운영하고, 매일 2~3편씩 올려야 한다면 이야기가 달라집니다. 클로드의 친구도 처음엔 그렇게 했습니다. HTML을 복사하고, 블로그 관리 화면을 열고, HTML 모드로 전환하고, 붙여넣고... 이 반복 작업이 하루에만 40분을 잡아먹었습니다. ✏️ 계산해보면: 1편 게시에 5분 × 하루 8편 = 40분 × 30일 = 매달 20시간 낭비 20시간이면 새로운 에피소드 10편을 쓸 수 있는 시간입니다. 수동 게시는 처음엔 "어렵지 않다"고 느끼지만, 규모가 커지면 반드시 병목이 됩니다. 이 병목을 제거하는 열쇠가 바로 Blogger v3 API 입니다. 2. API란 무엇인가 — 식당 비유로 이해하기 API(Application Programming Interfa...
続きを読む