devherex/social-safe-zone

Social Safe Zone

플랫폼 앱은 버튼, 캡션, 프로필 바로 프레임의 일부를 가리고, 프로필 그리드는 측면을 자릅니다. 중요한 요소가 거기에 있으면 숨겨집니다. 이 스킬은 그런 일이 발생하지 않도록 보장합니다.

모든 수치는 zones.json에 저장되어 있습니다. 하드코딩하지 마세요. 프리셋 목록을 보려면 python scripts/zones_lib.py list를 실행하세요.

워크플로 (순서대로 따르세요)

1. 프리셋 선택. 플랫폼에 맞게 선택: ig-reel, ig-story, ig-story-strict, ig-feed, tiktok, yt-shorts, linkedin-4x5, linkedin-16x9. 사용자가 플랫폼을 지정하지 않으면 ig-reel로 가정합니다. 여러 플랫폼을 원하면 가장 엄격한 영역으로 하나의 마스터를 디자인한 후 나머지를 확인하세요.
2. 영역 읽기. python scripts/zones_lib.py show <프리셋> 명령어로 안전 사각형과 회피 박스를 출력합니다.
3. 영역 안에서 제작.
   • 전체 여백 배경 및 푸티지는 전체 프레임을 채울 수 있습니다.
   • 중요한 요소는 모두 안전 사각형 안에 배치: 헤드라인, 본문 텍스트, 자막, 로고, 얼굴, CTA 버튼, 주요 제품 샷.
   • 회피 박스에는 절대 배치하지 마세요(릴스: 오른쪽 하단 버튼 열).
   • 자막은 안전 영역의 아래쪽에 위치시키고, 절대 아래쪽 여백에 닿지 않게 하세요.
   • 최소 텍스트 크기: 1080 너비 기준 42px. 모든 배경에서 높은 대비를 유지하세요.
   • 릴스 및 피드: 프로필 그리드 썸네일에서도 읽을 수 있도록 주요 콘텐츠를 그리드 크롭 안에 유지하세요.
4. 도구에 맞는 올바른 헬퍼 사용:
   • Remotion / React: templates/SafeZone.tsx 및 templates/zones.ts
   • HTML / CSS: templates/safezone.css (클래스: sz-ig-reel 등)
   • Python / Pillow / ffmpeg: scripts/zones_lib.py
   • Canva / CapCut / Premiere: assets/guides/<프리셋>.png를 잠긴 레이어로 위에 드롭
   • 자세한 내용: references/integrations.md
5. 전달 전 검증.
   • 레이아웃 JSON (정확): python scripts/check_zones.py layout.json
   • 이미지 또는 비디오: python scripts/check_zones.py file --preset <프리셋> --overlay check.png (tesseract가 있으면 --ocr 추가)
   • 가짜 앱 미리보기: python scripts/preview_mock.py frame.png --preset <프리셋> --out mock.png
6. 수정 후 재확인. python scripts/autofix.py layout.json은 요소를 이동하거나 크기를 조정합니다. 재배치가 불가능한 완성된 푸티지의 경우: python scripts/autofix.py fit in.png --preset <프리셋> --out out.png.
7. 사용자에게 한 줄로 결과 알림: 사용된 프리셋, PASS 또는 FAIL, 이동된 내용. 도움이 된다면 오버레이나 모의 미리보기를 보여주세요.

레이아웃 JSON (정확한 검사 및 자동 수정용)

{"preset": "ig-reel", "elements": [
  {"id": "headline", "type": "text", "text": "Hello", "x": 60, "y": 300, "w": 700, "h": 90, "size": 90},
  {"id": "logo", "type": "box", "x": 60, "y": 1500, "w": 220, "h": 110},
  {"id": "bg", "type": "box", "x": 0, "y": 0, "w": 1080, "h": 1920, "important": false}
]}

important: false는 영역 밖으로 흘러나와도 되는 배경을 표시합니다.

규칙

• 사용자가 명시적으로 위험 영역 안에 무언가를 원한다면, 하지만 무엇이 가려질 수 있는지 알려주세요.
• zones.json에서 estimate라고 표시된 값은 커뮤니티에서 측정한 것으로 공식 값이 아닙니다. 클라이언트 작업의 경우 이를 언급하고 테스트 게시물을 제안하세요.
• 플랫폼을 추가하거나 숫자를 변경하려면 zones.json만 편집한 후 python scripts/export_zones.py css > templates/safezone.css 및 python scripts/make_guides.py --all을 실행하세요.