og-image

OG 이미지

이 스킬이 사용하는 모든 파일은 이 SKILL.md 파일과 같은 폴더에 위치하며, 여기의 경로는 해당 폴더를 기준으로 합니다. 다른 스킬이나 다른 폴더에서 필요한 것은 없습니다. 사용자가 다른 위치를 지정하지 않는 한, 생성된 모든 파일은 현재 프로젝트의 out/og-image/ 디렉토리에 저장합니다.

공유 카드는 누군가가 링크를 스크롤하며 지나치는 0.5초 동안 제품을 판매합니다. 공식은 다음과 같습니다: 브랜드 마크, 한 줄 짧은 제목, 그리고 실제 제품을 아래쪽 가장자리로 잘라낸 이미지. 그 외에는 아무것도 없습니다.

참고 스타일 (references/ 폴더 참조):

• control-panel.png — 브랜드 마크가 상단 중앙에 있고, 매우 큰 한 줄 제목, 그리고 약 1/3 높이부터 시작하는 앱 창(사이드바, 헤더, 리스트)이 아래쪽으로 흘러나가며 오른쪽에 하나의 플로팅 세부 패널이 있습니다.
• pulse.png — Pulse의 실제 레이아웃(프로젝트 아이콘이 있는 사이드바, 검색 헤더, 프로젝트 페이지(탭, 피드 행, 활동 레일))을 사용한 동일한 구성.

규칙

1. 실제 제품, 절대 가상 제품 없음. 현재 출시된 앱 그대로 보여줍니다. 코드에 존재하는 화면, 탭, 레이블, 상태, 기능만 사용하세요. 가상의 지표, 차트 또는 기능은 절대 사용하지 마세요. 랜딩 페이지 카피에서 언급되더라도 마찬가지입니다. 사이트의 마케팅 데모에 앱에 없는 기능이 있다면 그 데모를 복사하지 마세요.
2. 메시지는 현재 사이트에서 가져옵니다. 사용자가 제목을 지정하지 않는 한, 라이브 홈페이지(히어로 섹션, 데모 데이터)의 피치와 샘플 콘텐츠를 사용하세요. 사용자가 제목을 지정하면 그대로 사용합니다(문장 헤드라인의 경우 마침표는 괜찮음; 확실하지 않으면 질문).
3. 살아있는 듯한 느낌, 생성된 느낌이 아니어야 함. 데모 데이터는 실제 팀의 한 주처럼 읽혀야 합니다:
   • 실제처럼 보이는 사람들과 프로젝트가 제공하는 아바타 사진(예: public/landing/people)을 사용하고, 사용자가 요청한 이름을 사용합니다.
   • 엔티티에는 아이콘 또는 이미지를 사용하고, 단순한 문자는 사용하지 않습니다(예: 프로젝트 아바타는 제품 테마 악센트로 색상이 입혀진 컬러 아이콘 타일).
   • 활동 그룹, 차트, 카운트는 실제 리듬을 따릅니다: 월~금은 바쁘고 변동이 있으며, 주말은 대부분 비어 있고 가끔 가벼운 날이 있으며, 현재 주는 오늘까지만 표시되고, 월 레이블은 실제 월이 시작되는 곳에만 표시됩니다. 균일하거나 명백히 반복되는 패턴은 절대 안 됩니다.
   • 상대적 시간, ID, 브랜치, 상태는 앱이 사용하는 형식을 사용합니다.
4. 카피가 주도합니다. 제목은 카드에서 가장 크고 가장 어두운 요소이며 썸네일 크기(~1200px 카드에서 60–72px, 한 줄, 좁은 자간, 제품의 디스플레이 폰트)에서도 읽을 수 있어야 합니다. 제품은 그 아래에 위치하며 절대 겹치지 않습니다.
5. 제품 고유의 스타일만 사용. 배경, 폰트, 색상, 모서리 반경, 그림자는 프로젝트의 디자인 토큰에서 가져옵니다. 제목 뒤에 매우 부드러운 악센트 색상의 글로우는 괜찮지만, 새로운 팔레트, 그라데이션 또는 스톡 아트는 사용하지 마세요.

단계

1. 탐색

• 홈페이지/랜딩 컴포넌트와 README를 읽어 피치, 제품명, 샘플 콘텐츠를 파악합니다.
• 실제 앱 셸(레이아웃, 사이드바, 헤더)과 기본 화면(라우트 + 컴포넌트)을 찾습니다. 정확한 클래스명, 텍스트 크기, 탭 레이블, 상태 칩 색조, 피해야 할 빈 상태/로딩 상태를 기록합니다.
• 디자인 토큰(전역 CSS/테마), 폰트, 아이콘 라이브러리, 브랜드 마크 컴포넌트, 아바타 에셋을 찾습니다.
• 이미 존재하는 것들을 확인합니다: 기존 OG 라우트/이미지, 루트 또는 페이지 헤드의 og:image 메타, WEB_URL/사이트 URL 설정.

2. 렌더링 라우트 구축

카드를 프로젝트 스택의 실제 페이지로 구축하여 실제 폰트, 디자인 토큰, 컴포넌트를 사용하도록 합니다(수제 SVG나 프라이빗 데이터가 포함된 프로덕션 스크린샷이 아님):

• 하나의 라우트(예: /og/<페이지>) (TanStack: routes/og.<page>.tsx, Next: app/og/<page>/page.tsx 등), noindex, 앱 크롬 없음.
• 하나의 컴포넌트(예: 소속 랜딩 옆에 있는 og-image.tsx)로 고정 1200×630 프레임을 렌더링하며, 루트에 data-og-frame 속성과 overflow-hidden을 추가합니다.
• 레이아웃:
  • 브랜드 마크 중앙 정렬, 상단에서 약 48px.
  • 제목 중앙 정렬, 그 아래.
  • 앱 창이 상단에서 약 200~240px, 왼쪽에서 약 60px 시작하며, 남은 공간보다 넓게 설정하여 오른쪽 또는 아래쪽 가장자리로 넘치게 합니다. 상단 모서리는 둥글고, 가는 테두리와 제품의 그림자를 추가합니다.
• 창 안에는 실제 화면을 정적 복제본으로 재구성합니다: 셸(사이드바 + 헤더) + 기본 화면. 실제 컴포넌트의 마크업과 클래스를 복사하고, 소스 파일을 헤더 주석에 표시합니다. 정적 속성만 사용하고, 쿼리나 타이머는 없습니다.
• 전체 크기 레이아웃을 카드에 맞추려면 창을 자연스러운 너비(예: 1200px)로 배치하고 zoom(0.85–0.95)으로 축소합니다. zoom은 같은 요소의 top/left도 함께 스케일링하므로, 의도한 오프셋을 줌 팩터로 나누어 설정합니다.
• 랜딩에 있는 기존 데모 프리미티브(아바타, 소스 배지, 히트 컬러)를 실제 앱과 일치할 때 재사용합니다.

3. 캡처

개발 서버를 시작(또는 재사용)한 후 다음을 실행합니다:

node <이 스킬 폴더>/scripts/capture.mjs \
  --url http://localhost:<포트>/og/<페이지> \
  --out out/og-image/og-<페이지>.png

이 스크립트는 1200×630 뷰포트를 2배(→ 2400×1260)로 열고, prefers-reduced-motion을 선호하며, 개발 오버레이(TanStack/Next/Vite/Astro devtools, 토스터)를 숨기고, 폰트 로드를 기다린 후 [data-og-frame]을 스크린샷합니다. 다른 오버레이가 있으면 --hide를 사용하고, 이미지 로딩이 느리면 --wait를 사용하세요.

주의 사항:

• 포트 충돌: 해당 포트가 실제로 이 앱을 서빙하는지 확인하세요(lsof -iTCP:<포트> -sTCP:LISTEN으로 확인하고 페이지 제목도 확인). 다른 로컬 앱이 [::1]:<포트>에서 로컬호스트에 응답할 수 있습니다. 필요하면 사용 가능한 포트를 선택하세요.
• 에이전트 세션에서 시작된 백그라운드 개발 서버는 세션이 종료되면 함께 종료됩니다. 사용자가 미리보기를 계속 유지해야 하는 경우 분리하세요(nohup … & disown).
• 광범위한 :has() / body > div 규칙으로 오버레이를 숨기지 마세요. 앱 루트를 숨겨 캡처가 타임아웃될 수 있습니다.

4. 확인

PNG를 열어 디자이너처럼 확인합니다. 전체 크기와 500px 너비로 상상하며:

• 제목이 한 줄, 겹치는 요소 없음, 창 위에 충분한 공간.
• devtools 배지, 커서, 토스트, 로딩 스켈레톤, 재생 중인 애니메이션 없음.
• 어색하게 잘린 부분 없음(단어 중간에 잘린 레이블이 측면 가장자리에 있거나, 반쯤 숨겨진 칩). 아래쪽/오른쪽 넘침은 의도된 것이며, 창의 왼쪽 및 위쪽 가장자리는 완전히 보여야 합니다.
• 데이터가 실제처럼 보임(규칙 3). 만족스러울 때까지 반복한 후 최종 PNG를 public/에 복사합니다.

5. 메타 태그 연결

이미지가 속한 페이지(또는 사이트 전체 카드의 경우 루트)에서:

• og:type, og:title, og:description
• og:image — 절대 URL, 사이트 URL 설정에서 구성(예: ${WEB_URL}/og-<페이지>.png)
• og:image:width 2400, og:image:height 1260, og:image:alt (제목 + 제품 화면 설명)
• twitter:card = summary_large_image, twitter:title, twitter:description, twitter:image

제공된 HTML에서 태그가 나타나는지 확인하고(curl -s <페이지> | grep og:image), PNG URL이 200 image/png를 반환하는지 확인합니다.

출력

사용자에게 다음 정보를 알립니다:

• PNG와 렌더링 라우트/컴포넌트의 위치
• 재생성 방법: 위의 캡처 명령어
• 이미지가 보여주는 내용과 복제한 실제 화면/컴포넌트
• 실제 데이터가 아닌 것들(샘플 이름, 프로젝트), 그리고 크롤러가 이미지를 해석할 수 있도록 사이트 URL 환경 변수가 프로덕션 도메인을 가리켜야 한다는 점