프론트엔드 이미지 아트 디렉션
개발자가 한눈에 읽을 수 있는 평면 웹사이트 컴프를 만드세요. 각 컴포지션에 명확한 계층 구조, 일관된 그리드, 의도적인 여백, 독특한 타이포그래피 또는 사진적 제스처를 부여하세요. 이미지를 구현을 위한 참조 자료로 취급하세요. 구현이 요청될 경우 프로덕션 텍스트, UI 및 정확한 측정값에는 라이브 HTML과 CSS를 사용하세요.
1. 워크플로우 선택
요청과 AGENTS.md, CLAUDE.md, 스타일 가이드, 디자인 토큰, 관련 시각적 에셋과 같은 사용 가능한 프로젝트 지침을 읽으세요. 사용자 명시적 지침을 먼저 따르고, 그 다음 할당된 역할 내에서 승인된 참조 자료를, 그 다음 프로젝트 기본값을 따르세요. 아트 디렉션을 사용하여 간격을 채우세요.
| 요청 | 워크플로우 |
|---|---|
| 새 페이지, 히어로 또는 섹션 | 브리프로부터 디자인하세요. 일관된 시각적 방향을 선택하세요. |
| 동일 사이트의 다른 섹션 | 시각적 시스템을 재사용하고 새 콘텐츠에 적합한 컴포지션을 만드세요. |
| 승인된 데스크톱에서 모바일로 | 승인된 콘텐츠와 컴포넌트를 새 뷰포트에 맞게 재구성하세요. |
| 하나의 요소 제거, 교체, 색상 변경 또는 수정 | 승인된 이미지를 제자리에서 편집하고 보존할 대상을 정의하세요. |
브리프가 충분한 방향을 제시할 때 직접 생성하세요. 필수 편집 대상 또는 승인된 에셋을 검색할 수 없는 경우, 해당 특정 입력을 요청하세요.
2. 각 참조에 역할 할당
입력에 번호를 매기고 파일 이름 또는 시각적 콘텐츠로 식별하세요. 이러한 역할을 실제 이미지 프롬프트에 전달하세요.
- 편집 기준(Base to edit) — 변경 사항을 적용할 승인된 이미지. API 편집 사용 시 첫 번째로 배치하세요.
- 승인된 데스크톱(Approved desktop) — 반응형 버전을 위한 콘텐츠, 순서, 컴포넌트 스타일, 이미지 및 로고의 출처.
- 스타일 전용(Style only) — 팔레트, 타이포그래피 처리, 그레인, 사진 그레이딩과 같은 명명된 특성을 상속받으세요. 새 섹션의 컴포지션과 카피는 독립적으로 유지하세요.
- 스케일 및 간격 전용(Scale and spacing only) — 측면 여백, 가는 선, 레이블 크기 또는 디스플레이 숫자 스케일과 같은 명명된 측정값이나 관계만 상속받으세요.
- 정확한 에셋(Exact asset) — 제공된 사진, 제품, 공간 또는 로고를 알아볼 수 있게 유지하세요. 구별되는 세부 사항을 보존하고 허용된 크롭 또는 그레이딩을 지정하세요.
여러 슬라이스 페이지의 경우, 하나의 승인된 시각적 앵커와 팔레트, 유형 역할, 거터, 간격, 규칙, CTA 처리, 이미지에 대한 간결한 기록을 전달하세요. 각 슬라이스에 어떤 섹션이 나타나고 시작 및 종료 위치를 명시하세요. 전체적으로 동일한 시각적 시스템을 사용하세요. 헤더 또는 푸터는 해당되는 경우에만 도입하세요.
3. 아트 디렉션 및 프롬프트
오리지널 컨셉의 경우, 하나의 스탠스(장인정신, 명확성, 따뜻함, 연극성 또는 대담한 표현), 하나의 레이아웃(오프셋 에디토리얼, 분할, 풀 블리드, 규율 있는 모듈러 그리드 또는 유형 주도), 하나의 마감(깔끔한 디지털, 미묘한 필름 그레인, 하프톤 또는 질감 있는 종이)을 선택하세요. 콘텐츠에 도움이 되는 컴포넌트만 선택하세요. 다이닝 메뉴는 규칙과 넉넉한 여백을 가진 유형 주도일 수 있습니다. 히어로는 단일 결정적인 크롭을 사용할 수 있습니다. 패널 가장자리는 직사각형으로 유지하거나 단순한 수평 구분선을 사용하세요. 명시적으로 요청되지 않은 한 마름모, 다이아몬드 및 경사진 평행사변형 패널을 피하세요.
복잡한 브리프에는 짧은 레이블 블록을 사용하세요. 간단한 요청에는 관련 라인만 사용하세요.
- 산출물(Deliverable) — 페이지 또는 섹션 이름, 대상 뷰포트, 프레이밍 및 캔버스를 명명하세요. 디바이스 프레임이 요청되지 않은 한 평면, 가장자리 대 가장자리 사이트 컴프를 지정하세요.
- 참조(References) — 입력을 개별 역할에 매핑하고 각 역할이 제어하는 세부 사항을 명시하세요.
- 레이아웃(Layout) — 읽기 순서, 가장자리 여백, 그리드 앵커, 섹션 경계, 정렬 및 초점을 제시하세요. 눈에 보이는 용어로 시그니처 디자인 움직임을 설명하세요.
- 카피(Copy) — 정확한 텍스트를 인용하고, 배치를 지정하며, 반복이 필요하지 않은 한 각 문자열을 한 번만 렌더링하세요. 제공된 제목, 가격, 이름, 날짜 및 플레이스홀더를 보존하세요. 오픈 컨셉의 경우 간결하고 근거 있는 카피를 사용하고 실제 조직에 대한 주장을 지어내지 마세요.
- 시각적 시스템(Visual system) — 유형 계층 구조, 필요한 줄 바꿈, 색상 역할, 이미지 및 크롭, 마감, 컴포넌트 스타일링을 지정하세요. 눈에 보이는 특성에 대한 약칭으로 명명된 스튜디오 참조를 사용하세요.
- 제약 조건(Constraints) — 중요한 몇 가지 제외 사항을 명명하세요. 브리프가 해당 처리를 요구하지 않는 한, 재고처럼 보이는 이미지, 동기 없는 광채, 반복적인 카드 그리드 및 채우기 카피를 피하세요.
4. 모바일로 재구성
요청된 CSS 뷰포트 너비를 사용하거나 기본적으로 약 390 CSS px를 사용하세요. 렌더링된 픽셀 치수를 별도의 캔버스 설정으로 취급하세요. 적절한 경우 단일 열을 사용하고, 승인된 콘텐츠를 지정된 순서로 재배치하며, 레이블, 정확한 에셋, CTA 스타일, 규칙 및 플레이스홀더 컴포넌트를 보존하세요. 텍스트가 줄 바꿈되도록 하고, 탭 공간을 늘리며, 허용된 경우에만 이미지 크롭을 조정하세요. 요청되거나 승인된 디자인의 일부인 경우에만 고정 요소를 추가하세요. 텍스트를 읽을 수 없게 되기 전에 논리적 섹션 경계에서 긴 컴프를 분할하세요.
5. 특정 영역 편집
승인된 이미지를 편집 기준으로 첨부하세요. 작업을 명시하고, 요소를 모양과 위치로 식별한 다음 보존할 사항을 명시하세요. 백분율 좌표를 왼쪽 위에서 측정한 일반 언어 위치 지정자로 변환하고 프롬프트에서 둘 다 사용하세요. 변경 사항이 명시적으로 영향을 미치지 않는 한 캔버스, 카피, 크롭, 지오메트리, 팔레트 및 주변 콘텐츠를 보존하세요.
예시:
이미지 1을 제자리에서 편집하세요. 왼쪽 위에서 x=43.4%, y=29.6% 위치에서 레이블 뒤의 로컬 채우기만 제거하고 인접한 섹션 텍스처를 해당 영역으로 계속 확장하세요. 글자, 가는 선, 유형 스케일, 주변 패널 및 전체 캔버스를 보존하세요. 섹션 배경을 불투명하게 유지하세요.
로컬 채우기 제거와 알파 컷아웃 생성을 구별하세요. 요청되거나 의도된 에셋에 필요한 경우에만 투명한 배경을 사용하세요. 엄격한 픽셀 보존이 필요한 경우, 사용 가능한 경우 승인된 합성 워크플로우를 사용하고 변경되지 않은 영역을 원본과 비교하여 확인하세요. 프롬프트 지침과 생성 마크업만으로는 픽셀 동일 결과를 보장할 수 없습니다.
6. 사용 가능한 이미지 백엔드 사용
호스트 이미지 생성 및 편집 도구가 있을 때 선호하세요. 지원되는 입력 메커니즘을 통해 참조 이미지를 제공하고 지원되지 않는 컨트롤을 프롬프트의 의도로 표현하세요. 실제 백엔드 또는 설정은 알려진 경우에만 보고하세요. 사용 가능한 이미지 백엔드가 없으면 즉시 실행 가능한 프롬프트를 제공하고 필요한 입력을 식별하세요.
OpenAI Image API 통합을 사용할 수 있는 경우 다음 시작점을 사용하세요:
| 용도 | 모델 | 품질 | 복잡성 |
|---|---|---|---|
| 빠른 오리지널 컨셉 | gpt-image-2.6-flare | 중간 | 중간 |
| 상세한 레이아웃, 작은 정확한 카피 또는 까다로운 참조 일치 | gpt-image-2.6-sunburst | 높음 | 중간 또는 높음 |
| 대상 편집 | gpt-image-2.6-sunburst | 중간 또는 높음 | 낮음 |
품질은 세부 사항과 가독성을 위해 조정하세요. 복잡성은 계획 및 구성을 위해 조정하세요. 새 컴포지션에는 생성(generation)을 사용하고 기존 이미지 베이스에는 편집(edit)을 사용하세요. GPT Image 2.6 편집에서 input_fidelity는 생략하세요. 마크업 가이드 편집의 경우 첫 번째 입력의 픽셀 치수와 일치하는 투명 PNG 오버레이를 사용하세요. 지원되는 경우 마크업 또는 마스크를 별도로 제공하고, 동일한 마크업 가이드 요청에 둘을 함께 제공하지 마세요. 최종 아트에서 주석을 유지하지 마세요.
대상 비율에 가까운 지원되는 크기를 선택하세요. GPT Image 2.6 API 사용자 정의 크기의 경우 16으로 나눌 수 있는 치수를 사용하고 현재 모델 제한을 확인하세요. 샘플 캔버스에는 16:10 히어로의 경우 1536×960, 3:2 섹션의 경우 1536×1024, 긴 페이지 슬라이스의 경우 1088×1920, 폰 컴프의 경우 1088×2352가 포함됩니다. 호스트가 캔버스 크기를 관리할 때 요청된 비율과 치수를 대상으로 보존하세요. 정확한 내보내기를 주장하기 전에 실제 치수를 확인하세요.
상세한 컴프 및 알파 에셋에는 PNG를 사용하세요. 백엔드가 지원하는 경우 사용자가 원하는 벡터 에셋 또는 모션 스터디에 대해서만 SVG 또는 GIF 생성을 요청하세요. 전달 전에 벡터 출력 및 루프 연속성을 검사하세요.
7. 검사 및 수정
실제 이미지를 일반 보기로 검사하고 작은 글자 또는 편집 영역을 확대하세요. 브리프 및 승인된 입력과 비교하세요:
- 모든 고정된 카피, 날짜, 가격, 레이블, 로고 및 인식 가능한 에셋 세부 사항을 확인하세요.
- 요청된 섹션 수와 읽기 순서, 시각적 계층 구조, 거터, 정렬, 타이포그래피, 가는 선 및 컴포넌트 연속성을 확인하세요. 레이아웃이 요청된 뷰포트에 맞는지 확인하세요.
- 참조 역할이 분리되어 있는지 확인하세요. 차용된 레이아웃, 관련 없는 카피, 에셋 대체 또는 요청되지 않은 패널을 표시하세요.
- 편집의 경우 변경된 영역과 주변을 승인된 기준과 비교하세요. 컷아웃의 경우 사용 가능한 경우 알파 채널을 검사하세요.
고정된 요구 사항의 위반은 실패한 검사로 처리하세요. 요청당 최대 한 번의 자동 수정 패스를 수행하세요. 승인된 이미지 편집의 경우 후보가 표류한 경우 승인된 기준에서 다시 시도하세요. 국지적 결함이 있는 새 컴포지션의 경우 후보를 편집하세요. 컴포지션 자체를 재구성해야 하는 경우에만 재생성하세요. 수정 후 재검사하고 남아 있는 중대한 불일치 또는 사용할 수 없는 확인 사항을 공개하세요. 컨텍스트를 추가하는 경우 선택한 비주얼을 짧은 메모와 함께 반환하세요.