fix(blog): #118 본문 풀폭·인라인 코드 회색 배경·모바일 줄간격 복원

[Malloc72P]

개요

Closes #118

최근 스타일 수정에서 발생한 3가지 회귀를 원인 커밋 기준으로 바로잡습니다. 모두 빌드 + 렌더된 HTML/CSS로 검증했습니다.

#	증상	원인 커밋	수정
1	본문 텍스트가 좌측에 쏠려(풀폭 X) 보임	#70 0b0d8d1 — p { max-width: 70ch }	70ch 제거 (+ 짝인 모바일 max-width:none 정리)
2	인라인 코드(백틱 1개) 배경이 너무 진함	#96 ebf8e35 — defaultLang: 'text'(문자열)	defaultLang: { block: 'text' }
3	모바일 본문 줄간격이 좁아진 느낌	#70 0b0d8d1 — 14px인데 line-height: 22px	line-height: 25px로 비율 복원

원인 분석

1. 본문 풀폭

#70에서 데스크톱 가독성을 위해 단락에 max-width: 70ch를 넣었는데, 본문 칼럼(max-w-[1024px])보다 훨씬 좁아 텍스트가 왼쪽에 몰리고 우측이 비어 "가운데 정렬이 안 된 것처럼" 보였습니다. 특별한 이유가 없으면 풀폭을 쓰자는 요구에 따라 제거했습니다.

2. 인라인 코드 다크 배경 (핵심)

rehype-pretty-code@0.14.3 소스(dist/index.js)에서 확인:

const defaultInlineCodeLang = typeof defaultLang === "string" ? defaultLang : defaultLang.inline || "";

defaultLang을 문자열 'text'로 주면 인라인 코드의 기본 언어로도 적용됩니다. 그러면 plain 인라인 코드(`setTimeout`)도 shiki가 github-dark로 하이라이팅하고, keepBackground: true가 다크 배경을 inline style로 주입해 CSS의 --color-gray-100(연회색)을 덮어썼습니다.

{ block: 'text' }로 한정하면 코드블록 라인넘버 동작은 그대로 유지되고, 인라인 코드는 다시 plain <code>로 남아 회색 배경을 회복합니다.

3. 모바일 줄간격

#70에서 모바일 폰트를 12→14px로 키웠지만 line-height는 20→22px에 그쳐, 줄간격 비율이 1.67→1.57로 오히려 좁아졌습니다(데스크톱은 28px/16px≈1.75로 정상). 같은 비율이 되도록 25px(≈1.79)로 복원했습니다.

검증

• pnpm run build 성공, lint·tsc --noEmit 통과
• 렌더된 HTML(event-loop):
  • 인라인 코드 → <code>setTimeout</code> (inline style/figure 래핑 없음) → CSS --color-gray-100: #f3f4f6 적용
  • 코드블록 → <pre style="background-color:#24292e"> 다크 유지
• 빌드 CSS에서 70ch 완전히 제거 확인

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
blog	Ignored	Preview	Jun 29, 2026 1:39pm

[Malloc72P]

🔍 다관점 리뷰 (근본원인 · 회귀 · 완전성 · 컨벤션 / 적대적 검증)

4개 렌즈로 독립 리뷰 후, material 지적은 적대적으로 재검증했습니다. 결론: APPROVE — 머지를 막는 blocker/major/minor 없음. nit 3건만 도출됐고, 그중 2건을 이 PR에서 반영했습니다(아래 별도 코멘트).

근본원인 진단 정확성

문제	원인 커밋	검증
① 본문 좌측 쏠림	#70 0b0d8d1 p{max-width:70ch}	git show로 추가 시점 확인, 빌드 CSS에 70ch 0건으로 제거 실증
② 인라인 코드 다크 배경	#96 ebf8e35 defaultLang:'text'(문자열)	라이브러리 소스 + 빌드 HTML before/after 실증(아래)
③ 모바일 줄간격	#70 0b0d8d1 폰트 12→14px인데 line-height 20→22px(비율 1.67→1.57)	git show로 확인, 25px(≈1.79)로 복원

문제 ②의 before/after 실증

rehype-pretty-code@0.14.3 소스(dist/index.js)에서:

// L495-496 — defaultLang이 문자열이면 인라인 코드 기본 언어로도 적용된다
defaultInlineCodeLang = typeof defaultLang === 'string' ? defaultLang : defaultLang.inline || '';
// L560-562 — 기본 언어가 있으면 plain 인라인 코드도 하이라이팅됨
const lang = keepLangPart ? '' : getInlineCodeLang(value, defaultInlineCodeLang);
if (!lang) return;          // {block:'text'}면 ''→여기서 early-return → plain <code>
// L417-420 — inline + keepBackground이면 pre의 다크 배경 inline style을 code로 복사
if (inline) { if (keepBackground) { code.properties.style = pre.properties.style } }

동일 포스트(event-loop)를 두 설정으로 빌드해 렌더된 HTML을 비교:

상태	인라인 `setTimeout` 렌더 결과
Before (defaultLang: 'text')	<span data-rehype-pretty-code-figure><code data-language="text" data-theme="github-dark" style="background-color:#24292e;color:#e1e4e8">…</code></span> → 다크 배경이 inline style로 주입되어 CSS의 회색을 덮음
After (defaultLang: { block: 'text' })	<code>setTimeout</code> → inline style 없음 → CSS code:not(pre code){background-color:var(--color-gray-100)} = #f3f4f6(연회색) 적용

→ 코드블록(```)은 두 경우 모두 <pre style="background-color:#24292e"> 다크 유지. {block:'text'}는 인라인만 한정 해제하고 블록 기본언어/라인넘버(data-language="text")는 보존합니다.

검토했으나 문제 아님(refuted/정당한 범위 한정)

• 70ch 제거로 본문이 무한 광폭? → No. ArticleContainer가 max-w-[1024px]로 칼럼을 감싸 좌우 패딩 제외 ~944px까지만 늘어남.
• `foo`{:js} 인라인 언어 주석 콘텐츠가 깨짐? → No. src/app 전체에 해당 패턴 0건, 명시 언어는 defaultInlineCodeLang과 무관하게 계속 하이라이팅됨(의도 동작 보존).
• 코드블록 라인넘버/grid 손실? → No. 빌드 HTML에 data-language="text" 블록 + display:grid + [data-line] 구조 유지.
• 데스크톱 line-height·pre{line-height:1.6} 미수정이 누락? → No. 데스크톱 p(28/16≈1.75)는 회귀 대상 아님, pre는 코드블록 레이아웃용으로 범위 밖.

잘된 점

• 근본원인을 라이브러리 소스 라인 단위로 짚고 빌드 산출물로 실증.
• 변경 파일 2개로 surgical — 인접 규칙(li/ul/pre/table) 무수정, max-width 제거 시 짝인 모바일 override·주석까지 함께 정리해 고아 코드 없음.
• 의도 주석이 실제 라이브러리 동작과 일치.

_{※ 이 리뷰는 다관점 에이전트 리뷰 결과를 사람이 검토·정리한 것입니다.}

[Malloc72P]

🛠️ 리뷰 반영 (미흡사항 개선)

리뷰에서 나온 nit 3건에 대한 처리 내역입니다.

반영함

• nit-3 (검증 보강): before 상태 실증 추가. 기존엔 "수정 후 plain <code>"만 빌드로 확인하고 "수정 전 다크 주입"은 소스 추론에 의존했습니다. main 기준 설정(defaultLang: 'text')으로 1회 빌드해 인라인 `setTimeout`이 style="background-color:#24292e;…"로 렌더됨을 직접 확인했습니다(위 리뷰 코멘트의 before/after 표). → 코드 변경 없음, 근거 보강.
• nit-1 (주석 정확성): 모바일 line-height 주석 보정 (9328eb5). 적용값 25px/14px≈1.79를 데스크톱과 "같은 비율(1.75)"이라 적었던 것을 "데스크톱 비율(≈1.75)에 근접(≈1.79)"으로 정정. 값(25px)은 픽셀 정합·가독성상 유지.

의도적으로 범위 밖으로 둠

• nit-2: 모바일 li{line-height:28px}(비율 2.0)가 단락(1.79)과 톤 불일치. 이는 이 PR이 만든 게 아니라 main부터 존재하던 상태이고 이슈 #118의 3개 회귀에 포함되지 않습니다. CLAUDE.md의 surgical 원칙에 따라 이번 PR에서는 건드리지 않았습니다. 본문 줄간격 톤을 목록까지 통일하고 싶다면 별도 후속 작업으로 분리하는 것을 권장합니다.

최종 검증

• pnpm run build 성공, eslint(--max-warnings 0)·tsc --noEmit 통과.
• 빌드 CSS: 70ch 0건, line-height:22px 0건, line-height:25px 적용 확인.