X/Twitter 头像×横幅融合工具

X 아바타 × 배너 융합 (범용 스킬)

역할 및 범위

유일한 목표: X/Twitter 프로필 페이지에 직접 업로드할 수 있는 순수 배경 배너를 출력하여, X 클라이언트가 실제 아바타를 겹쳐 표시할 때 아바타 위쪽 가장자리 겹침 영역에서 자연스러운 시각적 연결이 이루어지도록 합니다.

• 배너만 편집/생성해야 하며, 아바타, 아바타 검정 테두리, 사용자 프로필 영역, 상태 표시줄, 버튼, 게시물 내용은 절대 수정하지 않습니다.
• 최종 결과물에는 아바타 사진, 아바타 자리 표시 이미지, 완전한 원, UI, 계정 텍스트 또는 모의 프로필 스크린샷이 포함되어서는 안 됩니다. 미리보기/측정용 이미지는 최종 결과물이 아닙니다.
• 고정 비율 3:1, 권장 크기 1500×500 / 1536×512 / 3000×1000. 사용자가 요청한 시각적 스타일과 주제를 최대한 유지하며, 참고 예시가 양 한 마리라고 해서 모두 양을 그리지 않습니다.
• 아바타 대부분은 배너 하단 가장자리 아래에 위치합니다. 아바타 중심을 이미지 내부에 배치하거나, 배경과 프로필 전체를 하나의 편집 가능한 캔버스로 취급해서는 안 됩니다.
• 검은색 테두리는 X 클라이언트에서 실제로 겹쳐 표시하는 것입니다. 배너로 이를 지울 수 없으며, 주변 색상, 곡선, 밝기 및 흐름을 사용하여 이질감을 최소화해야 합니다. 아바타 아래쪽 절반도 배너로 감쌀 수 있다고 가정해서는 안 됩니다.

트리거 조건

사용자가 다음을 원할 때 트리거: X 프로필 아바타와 배경 간 상호작용, 아바타 위쪽 가장자리 융합, 배너와 아바타가 하나로 연결, 정렬이 맞지 않는 후광 보정, 배너 아래 띠/어두운 영역 축소, 업로드 가능한 순수 배너 생성, 또는 프로필 스크린샷과 원본 배너를 제공하며 오프셋 보정 요청.

워크플로우 (반드시 순서대로 실행)

1. 실제 기하학 정보 우선 확보, 중심점 추측 금지

사용자가 배너와 아직 스크롤되지 않은 전체 프로필 스크린샷을 제공한 경우:

1. 스크린샷 내 배너 표시 사각형 (left, top, width, height) 확인; 아바타 실제 중심 (cx,cy) 및 외곽 테두리 반경 r 확인 (모두 스크린샷 좌표 기준). 아바타 외곽선과 배경의 교차선이 핵심입니다.
2. scripts/banner_fusion.py measure를 사용하여 인터페이스 좌표를 원본 배너 캔버스 좌표로 역산합니다. object-fit: cover의 비율 유지 및 중앙 크롭을 고려해야 하며, 스크린샷 x/y를 그대로 사용해서는 안 됩니다.
3. 계산 결과 확인: 아바타 중심은 일반적으로 배너 하단 가장자리 아래에 위치; 아바타 위쪽 가장자리는 하단 가장자리 위에 위치; 실제로 상호작용 가능한 부분은 상단의 좁은 호입니다. 구조가 다를 경우 실제 스크린샷을 기준으로 하며, 기본값을 강제로 적용하지 않습니다.
4. layout.json 저장; 이후 동일한 기기/동일한 페이지 레이아웃에 대한 반복 작업에서 이를 재사용합니다. 다른 클라이언트/기기, 크롭 변경 또는 UI 레이아웃 변경 시 다시 측정합니다.

스크린샷이 없는 경우: references/example_layout.json을 첫 번째 초안을 위한 경험적 값으로만 사용합니다. 이는 단일 성공적인 모바일 사례에서 가져온 것이며, X 플랫폼의 모든 사용자에게 공식적인 고정 좌표가 아닙니다. 먼저 초안을 제시하고, 사용자에게 가능하면 한 번 스크린샷을 업로드하도록 요청하여 실제 보정을 수행하는 것이 좋습니다.

측정 예시 (좌표는 사용자 실제 측정값이 아닌 예시임):

python3 scripts/banner_fusion.py measure \
  --banner-box 0 0 1536 512 \
  --avatar 210 618 158 \
  --target 1536 512 \
  --out layout.json
python3 scripts/banner_fusion.py report --config layout.json

정확한 좌표는 없지만 스크린샷이 있는 경우: 먼저 grid 명령으로 격자 보조 이미지를 생성한 후, 배너 하단 가장자리와 아바타 외곽선을 표시합니다. 정확성을 가장한 자동 피팅을 위해 픽셀 값을 조작하지 마십시오.

2. 아바타 상단 보이는 호에 맞춰 배경 설계

references/prompt_templates.md를 읽고 주제, 스타일, 색상, 주체, 융합 요소를 입력합니다. 생성 전에 측정 데이터를 포함시킵니다.

• 좌측 하단에는 배너 하단 가장자리에 가까운 낮은 위치의 얕은 호/에너지 크라운만 만듭니다. 이 위치는 아바타 이론상 상단에 가까워야 하며, 실제 원호 상단 방향을 따릅니다. 그림에 크고 완전한 어두운 원반을 그리지 않도록 합니다.
• 얕은 호에서 오른쪽으로 리본/연기/광선/꽃잎/별 궤도 등을 방출하여 시각적 연속성을 만들고, 중앙으로 연결한 후 다시 오른쪽 주체로 연결합니다.
• 주체는 오른쪽 또는 오른쪽 중앙에 배치하고, 왼쪽 하단은 아바타 접촉 영역으로 남깁니다. 상태 표시줄/메뉴가 상단, 오른쪽을 가릴 수 있으므로 중요한 세부 사항은 가려지는 영역을 피합니다.
• 하단 가장자리의 땅, 검은색 고원, 어두운 띠는 너무 두껍지 않아야 합니다. 아바타 상단 접촉 영역의 밝은 호가 실제 배너 하단 가장자리에 가깝게 위치해야 합니다. 그러나 중요한 주체를 잘라내기 위해 너무 낮게 배치하지는 마십시오.
• 밝은 호는 아바타의 실제 외곽선을 오려낸 것이 아닙니다. 이는 클라이언트 오버레이를 통해 착시 효과를 내는 것입니다. 디자인에는 0~40px (1536px 너비 기준) 범위의 외부 발광 버퍼를 적절히 포함할 수 있으며, 우선적으로 앱 스크린샷 효과에 따라 조정합니다.

3. 순수 배경 출력 + 독립적인 정렬 미리보기

최종 파일은 반드시 3:1 비율이며 아바타가 없어야 합니다. 보정 이미지/미리보기는 검토용이며, 실제 배너로 업로드하지 않습니다.

python3 scripts/banner_fusion.py preview \
  --banner output/banner.png \
  --config layout.json \
  --out output/preview.png --guide
# 사용자가 자신의 아바타 정사각형 이미지를 제공한 경우 미리보기에 사용: --avatar-image input/avatar.png

스크립트는 아바타를 시뮬레이션하여 검은색 프로필 영역 위에 겹쳐 표시하며, 아바타를 배너에 기록하지 않습니다.

또한 앱 스크린샷에 위치 미리보기를 제공할 수 있습니다 (UI 아이콘의 경우 추가로 보존 영역을 지정해야 할 수 있으며, 실제 재적용 후 스크린샷을 최종 검수 기준으로 삼습니다):

python3 scripts/banner_fusion.py screenshot-preview \
  --banner output/banner.png --screenshot input/home.png \
  --banner-box 0 0 691 230 --avatar 94 278 72 \
  --out output/screenshot_preview.png

4. 올바른 차원만 수정하여 반복 작업

• 아바타 상단과 에너지 호 사이의 간격이 너무 큼 (호가 아바타 위쪽에 위치) → 전체 주체 유지, 얕은 호/관련 광선을 아래로 이동; 필요시 전체 이미지를 아래로 평행 이동하여 가장 두꺼운 하단 어두운 띠를 압축.
• 얕은 호가 아바타에 너무 많이 가려져 보이지 않음 → 아바타를 이동하거나 전체 원을 확대하는 대신, 얕은 호를 약간 위로 이동.
• 광 효과가 왼쪽/오른쪽으로 치우침 → 스크린샷 원 중심 x 좌표를 다시 확인하고, 국소 상호작용 요소를 수평 이동; 모든 기기의 x 좌표가 동일하다고 가정하지 않음.
• 보이는 검은색 외곽 테두리가 어색함 → 호를 부드러운 그라데이션과 광운으로 변경하고, 상단 접촉 영역을 따라 연결; "검은 테두리 제거"를 약속하지 않음.
• 양/인물/주체가 메뉴에 가려짐 → 클라이언트 UI를 변경하는 대신, 주체 위치 또는 이미지의 주체-배경 구도를 조정.
• 배너 크롭 변경 → 다시 measure 실행; 이전 픽셀 오프셋만으로 반복 작업을 계속하는 것을 금지.

가벼운 평행 이동 (위치 문제 확인용; 성공적인 이동은 이미지 생성 모델에 피드백하여 고품질 재생성을 권장):

python3 scripts/banner_fusion.py shift --input output/banner.png \
  --dy 32 --out output/banner_down32.png

--dy는 아래쪽으로의 캔버스 픽셀 수입니다. 하단이 잘리고 상단은 가장자리 채움으로 처리되며, 큰 이동에는 적합하지 않습니다. 생성 후 미리보기를 다시 렌더링합니다.

5. 검수 및 인도

다음 모든 항목을 충족해야 완료로 간주합니다:

1. 배너 비율 3:1; 내용에 아바타/텍스트/UI/완전한 자리 표시 원이 없음.
2. 미리보기에서 아바타 실제 기하학과 보이는 좁은 호가 일치하며, "배경 내부의 완전한 아바타"를 가상으로 만든 것이 아님.
3. 아바타 상단 근처에 인지 가능하지만 부자연스럽지 않은 융합 광 효과가 있음; 배너 하단에 과도한 검은 흙 또는 내용 없는 두꺼운 띠가 없음.
4. 광선 흐름과 주체 간 연결이 합리적이며, 주 시야가 아바타/버튼에 의해 과도하게 가려지지 않음.
5. 실제로 배너를 X에 적용한 후, 사용자가 스크롤되지 않은 프로필 페이지를 캡처하여 최종 증거로 제시; 차이가 명확할 경우 정밀 보정 계속. 실제로 적용하지 않은 경우 "시뮬레이션 미리보기 통과"라고만 말할 수 있으며, 실제 클라이언트에서 완벽하다고 주장할 수 없음.
6. 순수 배너와 선택적 미리보기 이미지, 레이아웃 JSON 인도; 미리보기 이미지를 배너로 잘못 인도하지 않음.

성공 사례 참고

• 성공 사례 구성 규칙은 references/geometry.md 및 references/success_case.md 참조. 순수 배경 시각적 사례는 assets/success_reference_1536x512.webp 참조 (아바타 또는 개인 정보 없음); scripts/make_demo_banner.py를 사용하여 중립적인 데모 배경 생성 가능.
• 핵심 방법: 실제로 낮은 위치의 왼쪽 얕은 호 (위쪽에 에너지 깃털 흐름을 위한 공간 확보), 얇은 하단 땅/어두운 띠, 왼쪽에서 오른쪽으로 이어지는 다채로운 리본, 오른쪽 주체. 색상만 모방하지 말고 위치 관계를 반드시 재사용할 것.
• 경험적 좌표: references/example_layout.json 및 references/geometry.md 참조. 기기 및 클라이언트 차이가 이러한 경험 값보다 우선합니다.

파일 인덱스

• references/geometry.md: 좌표 변환 공식, 경계 및 실패 사례.
• references/prompt_templates.md: 대체 가능한 주제의 메인 프롬프트, 네거티브 프롬프트, 반복 프롬프트.
• references/example_layout.json: 예시 아바타 파라미터 (기본 첫 초안 전용).
• scripts/banner_fusion.py: 계산, 격자, 미리보기, 스크린샷 교체 미리보기, 오프셋 보정.
• assets/success_reference_1536x512.webp: 성공 사례의 업로드 가능한 순수 배경 참조 이미지 (실제 아바타 없음).
• examples/geometry_guide.svg: 아바타/배너 오버레이 개요도 (실제 아바타 아님, 프로덕션 배경 아님).
• scripts/make_demo_banner.py: 3:1 테스트용 배경 생성.
• README.md: 설치 및 명령어 설명.