[CaesiumY]

요약

OG 이미지(링크 공유 시 뜨는 미리보기 그림)를 만드는 satori를 0.33.4에서 0.47.1로 올립니다. Dependabot #208은 0.38.0까지였지만 이틀 사이 릴리스가 9번 더 나와 최신까지 한 번에 올렸습니다.

버전만 올리면 OG 이미지 40장이 전부 깨집니다. 이 구간에 레이아웃 기본값을 브라우저 CSS에 맞추는 breaking 변경이 들어 있어서 템플릿 5개에 기존 모양을 고정하는 스타일을 명시했습니다. 수정 후 40장 모두 기존 이미지와 글자 줄 위치가 픽셀 단위로 같습니다.

CI의 e2e/og-image.spec.ts는 메타 태그만 확인하므로 이 문제를 잡지 못합니다. #208의 CI가 초록이었던 이유도 그것입니다.

무엇이 깨졌고 어떻게 고쳤나

증상	원인 (satori 변경)	수정
뒤에 깔린 회색 카드가 앞 카드를 덮어 글자가 흐려짐	#855: position: absolute 요소가 일반 요소보다 위에 그려짐	앞 카드에 position: "relative" (둘 다 위치 지정 요소가 되어 DOM 순서대로 그려짐)
카드가 8px 넓어지고 위치가 3px 어긋남	#855: boxSizing 기본값이 content-box로 바뀜 (width: 88%에 테두리 4px이 더해짐)	두 카드에 boxSizing: "border-box"
포스트 제목이 아래로 밀리고 마지막 줄이 잘림	#847: <p> 기본 여백 1em을 이제 <p> 자신의 글자 크기(72px) 기준으로 계산. 예전에는 부모 기준 16px이었음	여백을 지정하지 않았던 <p>에 예전 값 16px을 명시

참고로 0.37.0에서 레이아웃 엔진이 Yoga에서 Taffy로 바뀌었지만(#841) 이 템플릿에서는 위 세 가지 말고 차이가 없었습니다. yoga-layout은 의존성 트리에서 빠졌습니다.

세 수정은 모두 예전 satori가 암묵적으로 쓰던 값을 그대로 적은 것입니다. satori 0.33.4에 같은 스타일을 넣어 포스트 템플릿의 레이아웃 박스를 비교했고, 수정 전과 위치가 같았습니다.

검증

• OG 이미지 전후 비교: main(satori 0.33.4) 빌드의 dist/**/og.png 40장과 이 브랜치 빌드 40장을 픽셀 단위로 비교했습니다.
  • 수정 전: 사이트 기본 이미지 기준 69% 픽셀이 다름 (카드 겹침)
  • 수정 후: 장당 0.17~0.54%만 다름. 모든 텍스트 줄의 세로 위치(제목, 부제목, 하단 블로그명)가 같고, 남은 차이는 글자 가장자리 안티에일리어싱 수준
  • 원인 확인을 위해 satori 0.33.4와 0.47.1의 onNodeDetected 레이아웃 박스를 직접 비교함 (예전 <p> top 103px = 87 + 16px 여백)
• pnpm install: 피어 의존성 경고 0건, 잠금 파일 변경은 satori와 yoga-layout 제거뿐
• pnpm audit --audit-level=high: 통과 (moderate 2건은 main과 같음)
• astro check: 0 errors, astro build: 성공
• ESLint, Prettier(변경 파일), pnpm test:scripts: 통과
• E2E 전체(76개): 모두 통과

머지 순서

#217(안전군 묶음)과 잠금 파일이 겹치므로, 먼저 머지되는 쪽 다음에 남은 PR은 최신 main 위에서 잠금 파일을 다시 만들어야 합니다. 머지 후 #208은 이 PR로 대체했다는 코멘트와 함께 닫습니다.

satori는 최근 릴리스가 매우 잦아서 곧 새 Dependabot PR이 열릴 수 있습니다. 그때도 CI만 보고 머지하지 말고 OG 이미지를 직접 확인해야 합니다.

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.
To continue using code reviews, you can upgrade your account or add credits to your account and enable them for code reviews in your settings.

[claude]

리뷰

satori 0.33.4 → 0.47.1 업그레이드와 OG 템플릿 5개 수정을 살펴봤습니다. 머지해도 될 것 같습니다. 아래는 참고 의견입니다.

좋은 점

• 세 수정(boxSizing, position: relative, <p> 마진)은 모두 예전 satori가 암묵적으로 쓰던 값을 명시한 것이라 의도가 분명하고 범위가 작습니다.
• 40장 전후 픽셀 비교와, 0.33.4에 같은 스타일을 넣어 레이아웃 박스를 대조한 검증이 탄탄합니다. CI(og-image.spec.ts는 메타 태그만 확인)가 잡지 못하는 회귀를 직접 확인한 점이 특히 좋습니다.
• about.tsx의 <p> 네 개는 이미 margin을 명시하고 있어서 마진 수정이 필요 없다는 걸 확인했습니다. series-detail.tsx의 "Series" <p>도 margin: 0이 있습니다. 누락된 곳은 없어 보입니다.
• 락파일 변경이 satori와 yoga-layout 제거뿐이라 리뷰하기 쉽습니다.

제안 (블로킹 아님)

1. 회귀 방지 장치가 없습니다. PR 본문에도 적혀 있듯 satori는 릴리스가 잦고, 다음 Dependabot PR도 CI가 초록인 채 OG를 깨뜨릴 수 있습니다. 대표 템플릿 1~2개(site, post)를 렌더링해 스냅샷이나 레이아웃 박스 단언(onNodeDetected)으로 비교하는 테스트가 있으면 "직접 눈으로 확인" 규칙을 CI로 옮길 수 있습니다. 이 PR에서 하지 않고 후속 이슈로 남겨도 됩니다.
2. 중복된 스타일 상수. 뒤 카드와 앞 카드의 boxSizing/position 같은 스타일이 5개 파일에 똑같이 복사되어 있습니다. 이번 수정이 다섯 군데에 반복된 것이 그 증거입니다. 공통 카드 스타일 객체로 뽑으면 다음 satori 기본값 변경 때 한 곳만 고치면 됩니다. 이것도 후속 정리로 충분합니다.
3. margin: "16px 0"의 의미. 이 값은 "예전 1em(부모 16px 기준)"을 그대로 옮긴 것이라 이유를 모르는 사람이 보면 임의의 숫자로 보입니다. 한 줄 주석(예: satori 0.33 호환: <p> 기본 마진을 부모 글자 크기 기준 16px로 고정)을 post.tsx 등 한 곳에라도 남기면 나중에 "정리"하려다 다시 깨뜨리는 일을 막을 수 있습니다.
4. 머지 순서. #217과 락파일이 겹친다고 적어 두셨는데, 둘 중 하나가 먼저 머지되면 남은 PR의 락파일을 최신 main 위에서 pnpm install로 다시 만들어야 합니다. 머지 후 #208을 닫는 것도 잊지 마세요.

보안 / 성능

• 새 의존성은 없고 pnpm audit 결과도 main과 같다고 하니 보안 우려는 없습니다. yoga-layout(WASM)이 빠지고 Taffy로 바뀌었으니 빌드 시간이 달라졌는지 한 번 확인해 볼 만하지만, 빌드 시점에만 쓰이므로 런타임 영향은 없습니다.

테스트

• PR 본문 기준으로 astro check, 빌드, lint, E2E 76개가 모두 통과했습니다. 위 1번을 제외하면 추가로 필요한 테스트는 없습니다.

🤖 Generated with Claude Code