스토어 스크린샷 — 파노라마

원시 앱 스크린샷으로부터 하나의 표면처럼 읽히는 App Store 세트를 만듭니다. 레이아웃은 대규모 마켓플레이스 앱의 세트를 측정하여 제작되었으며, 3D 오브젝트와 히어로는 앱 자체 콘텐츠에서 비롯됩니다. 자세한 내용은 references/style.md에 있습니다. 첫 번째 세트를 만들기 전에 이 파일을 처음부터 끝까지 읽으십시오: 템플릿이 결정하지 않는 사항(색상, 곡선, 어떤 부분이 앞으로 나올지, 어떤 심볼이 3D가 될지, Duo 레이아웃)은 모두 여기에서 나옵니다.

사용자는 결과를 원하지 과정을 원하지 않습니다. 계획, 사양 또는 측정 파일을 작성하지 말고 승인을 위해 멈추지 마십시오. 스스로 결정을 내리고, 세트를 생성하고, 확인하고, 전달하십시오. 입력이 실제로 누락되었고 합리적인 기본값이 없을 때만 물어보십시오. 예를 들어, 원시 스크린샷이 1206px보다 좁으면 더 큰 원본을 요청하십시오.

핵심 규칙

UI는 픽셀 단위로 정확하게 유지됩니다. 원시 스크린샷과 그 크롭은 일반 이미지 레이어입니다. 화면의 텍스트를 다시 그리거나, AI로 다시 생성하거나, 번역하거나 변경하지 마십시오. 카드는 data-crop을 사용하여 원본 파일에서만 크롭됩니다. 스토어 스크린샷은 실제 앱을 보여줘야 합니다. 가상의 UI는 신뢰도와 App Review 모두에 손해를 끼칩니다.
각 디바이스는 자체 원시 스크린샷으로 표시됩니다. iPhone Duo에서 탭 바와 상태 표시줄은 측면에 있으며, 분할 보기는 내부 디스플레이에서 열립니다. iPhone 스크린샷을 Duo 프레임에 넣으면 앱이 실제와 다르게 보입니다. 하지 마십시오. Duo 스크린샷이 없으면 iPhone 세트를 만들고 Duo를 위해 캡처해야 할 내용을 사용자에게 알려주십시오(style.md §10).
디밍은 별도 레이어입니다. 화면에 적용되는 유일한 것은 .phone.dim 레이어입니다. 픽셀은 변경되지 않습니다.
장식은 컨텍스트에서 비롯됩니다. 3D 오브젝트는 앱의 주제를 반복합니다. 쇼핑 세트에서 캠페인 배지, 리본, 할인 언어, 또는 무작위 플러스 기호와 하트를 빌려오지 마십시오. 모든 앱을 스토어 광고처럼 보이게 만듭니다.
AI 또는 3D 생성은 오브젝트와 히어로 심볼에만 사용되며, 절대 폰이나 UI가 포함되지 않아야 합니다.
확인되지 않은 하드웨어는 그리지 않습니다. Duo 프레임에는 카메라, 힌지 또는 버튼이 없습니다. 그 위치는 확인되지 않았습니다.
다른 브랜드의 로고나 이름은 사용하지 마십시오.
우월성 주장("최고", "1위")은 출처가 있는 경우에만 가능합니다. 출처가 없으면 주장이 아닌 혜택을 작성하십시오.
상태 표시줄은 원시 스크린샷에 있는 그대로 유지됩니다.

입력 및 기본값

입력	기본값
iPhone 원시 스크린샷	`raw/` (1206×2622 이상), 두 테마 모두에 표시됩니다. 또는 `raw-light/` 및 `raw-dark/`: 앱이 라이트 모드와 다크 모드로, 동일한 파일 이름과 크기; 각 테마는 자체 화면을 표시합니다(`style.md` §9).
Duo 원시 스크린샷	`raw-duo-outer/` (외부 디스플레이) 및 `raw-duo-inner/` (내부 디스플레이), 동일한 순서와 파일 이름; 외형별로 `raw-duo-outer-light/`, `raw-duo-outer-dark/` 등. 없으면 Duo 세트는 만들어지지 않습니다.
출력 폴더	`out/`
디바이스 세트	iPhone 6.9" (1320×2868) 및 6.3" (1206×2622): 둘 다 필요합니다(`style.md` §4). Duo 스크린샷이 있으면 Duo 외부 (1398×2034) 및 내부 (2007×2853).
언어	원시 스크린샷의 언어. 헤드라인은 언어별로 작성됩니다. 크롭은 해당 언어의 스크린샷에서 측정됩니다.
테마	`both`: 라이트 및 다크. 사용자가 하나를 지정하면 해당 테마만 만듭니다.
색상	원시 스크린샷에서 파생됩니다(`style.md` §1, §9)
메시지 및 3D 심볼	원시 스크린샷에서 파생됩니다(`style.md` §6, §8)

출력: <out>/<lang>/<theme>/<device>/01.png … NN.png. 테마는 light 또는 dark입니다. 디바이스는 iphone-6.9, iphone-6.3, duo-outer 또는 duo-inner입니다. 소스 HTML 파일과 미리보기는 <out>/.src/에 유지됩니다. 삭제하지 마십시오. 사용자가 카피를 변경하고 다시 렌더링할 수 있습니다. 출력 폴더에 이미 다른 세트의 파일이 있으면 건드리지 마십시오. 충돌이 발생하면 새 하위 폴더를 선택하고 알리십시오.

파일

references/style.md: 색상 역할, 배경, 헤드라인, 디바이스, 하이라이트 기술, 컨텍스트의 3D 오브젝트, 히어로, 카피 톤, 다크 테마, iPhone Duo.
assets/panorama.html: 템플릿. 디바이스 프레임(iPhone, Duo 외부, Duo 내부), 헤드라인, 크롭(팝아웃 카드, 스포트라이트, 프레임, 칩), 디밍, 푹신한 3D 오브젝트(.obj: 초승달, 별, 반짝임, 버블, 재생, 음표, 하트, 구체 또는 자체 경로), 히어로 오브젝트 및 테마별 원시 폴더(RAW)가 준비되어 있습니다. 레이아웃 측정값은 고정되어 있습니다. 복사하여 팔레트, 배경 모양, 이미지 및 RAW만 편집하십시오.
scripts/render.mjs: 파노라마를 PNG로 슬라이스합니다. node <skill>/scripts/render.mjs <panorama.html> --out <dir> --theme light|dark --device iphone|duo-outer|duo-inner [--size WxH] [--preview <png>] [--only 2,5] [--no-slices]. 각 디바이스의 기본 크기는 App Store Connect에서 허용하는 크기입니다. iPhone의 기본값은 6.9"이며, 6.3"의 경우 --size 1206x2622를 전달하십시오. JSON 출력의 warnings 필드에는 크기, 비율 및 알파 문제, 페이지 오류, 대비 및 크롭 경고(WARN:)가 나열됩니다.
scripts/grid.mjs: 원시 스크린샷에 레이블이 지정된 픽셀 그리드와 시험 상자를 그려 크롭을 측정합니다. node <skill>/scripts/grid.mjs raw/02.png --out <png> [--box x,y,w,h]. 눈으로 짐작한 크롭은 크기가 조정되면 어긋나므로 모든 크롭을 그리드에서 측정하십시오.

Node 18+ 및 Chrome(또는 Chromium, Edge, Brave)이 필요합니다. 찾을 수 없으면 CHROME_PATH를 설정하십시오. 헤드라인 글꼴은 macOS에서는 SF Pro Display, 그 외에는 Inter(Google Fonts)입니다.

워크플로우

원시 스크린샷을 검사합니다. 각 파일의 픽셀 크기, 각 화면의 용도 및 텍스트를 확인합니다. 앱의 주제와 심볼(아이콘, 탭 아이콘, 화면의 일러스트레이션)을 기록합니다. 3D 오브젝트와 히어로 심볼은 여기서 선택됩니다. 강조 색상(A): 버튼 색상, 선택된 탭 또는 로고를 선택합니다. style.md §1에 설명된 대로 A에서 팔레트를 파생합니다. 색상을 샘플링하려면 magick <png> -format "%[hex:p{x,y}]" info: 또는 그리드 이미지를 사용하십시오. Duo 폴더가 존재하고 올바른 크기인지 확인합니다(style.md §10). 어떤 원시 폴더가 존재하는지 확인하고 각 테마의 폴더를 선택합니다(style.md §9). 라이트 및 다크 폴더가 있으면 동일한 파일 이름과 동일한 픽셀 크기이며 동일한 상태(내용, 스크롤 위치, 시간)를 표시하는지 확인합니다.
세트를 머릿속으로 계획하십시오. 적어두지 마십시오. 순서: 히어로, 그 다음 가치 순서대로 화면. 각 이미지에 대해 다음을 결정합니다: 헤드라인, 헤드라인 영역의 색상(A 또는 두 번째 배경, 2~3개 그룹), 주요 하이라이트 기술 및 크롭할 부분. 화면의 요점을 증명하는 부분이 주요 하이라이트입니다. 그런 다음 3D 오브젝트를 이음새에 분산시킵니다. Duo 세트는 동일한 이야기를 전달합니다: 동일한 순서, 헤드라인, 팔레트 및 심볼.
크롭을 측정합니다. 각 부분에 대해 grid.mjs를 실행하고, 이미지를 보고, --box로 상자를 시도하고, 다시 살펴봅니다. 상자는 요소를 약간의 여백을 두고 감싸야 하며, 텍스트를 자르거나 인접한 UI를 포함하지 않아야 합니다. 카드의 모서리 반경도 측정합니다(data-r). Duo 크롭은 자체 원시 파일에서 별도로 측정합니다. 라이트 스크린샷에서 측정합니다. 다크 폴더가 있는 경우 동일한 상자를 다크 스크린샷에도 시도합니다(grid.mjs raw-dark/02.png --box …): 크롭은 공유되므로 둘 다에서 동일한 요소를 감싸야 합니다.
iPhone 파노라마를 구축합니다. assets/panorama.html을 <out>/.src/panorama.html로 복사합니다:
- :root의 팔레트를 변경합니다.
- 스크립트에서 RAW를 설정합니다: 두 폴더가 있는 경우 { light: 'raw-light', dark: 'raw-dark' }, 하나인 경우 { light: 'raw', dark: 'raw' }. 모든 경로를 라이트 폴더로 작성합니다. 다크 렌더링이 이를 교체합니다.
- 각 이미지에 대해 <section class="shot">을 작성합니다. 크롭에 data-raw를 지정합니다. 경로는 HTML이 있는 .src 폴더를 기준으로 합니다(출력이 out/인 경우 ../../raw/…, out/x/인 경우 ../../../raw/…). 템플릿의 크롭 및 색상 값은 예시일 뿐입니다. 이 앱에 대해 모두 측정하십시오.
- svg.bg에서 배경 모양을 파노라마 좌표로 그립니다: 먼저 헤드라인 영역의 색상 순서를 결정한 다음 모양을 이에 맞게 배치합니다.
- 3D 오브젝트를 .pano의 직접 자식으로 이음새에 배치합니다. 첫 번째 섹션에 히어로 오브젝트를 배치합니다.
- 예시 섹션과 오브젝트를 삭제합니다.
Duo 파노라마를 구축합니다(Duo 스크린샷이 있는 경우). iPhone 파노라마를 .src/panorama-duo-outer.html 및 .src/panorama-duo-inner.html로 복사하고 style.md §10에 따라 조정합니다: 동일한 헤드라인, 팔레트 및 심볼; 새 크롭; 디자인 높이에 맞게 다시 배치된 카드, 오브젝트 및 배경 모양; RAW는 Duo 폴더로 설정됩니다(예: { light: 'raw-duo-outer-light', dark: 'raw-duo-outer-dark' }).

렌더링합니다. 테마 및 디바이스당 한 번 실행(다크의 경우 --theme dark 및 dark):

R=<skill>/scripts/render.mjs; S=<out>/.src; O=<out>/<lang>/light
node $R $S/panorama.html          --theme light --device iphone    --out $O/iphone-6.9 --preview $S/preview-light.png
node $R $S/panorama.html          --theme light --device iphone    --out $O/iphone-6.3 --size 1206x2622
node $R $S/panorama-duo-outer.html --theme light --device duo-outer --out $O/duo-outer --preview $S/preview-light-duo-outer.png
node $R $S/panorama-duo-inner.html --theme light --device duo-inner --out $O/duo-inner --preview $S/preview-light-duo-inner.png

모든 경고를 수정합니다. 대비 경고의 경우 팔레트를 조정합니다. 각 이미지는 자체 Chrome 실행입니다(~10초). 수정하는 동안 --only 2,5로 변경된 이미지만 렌더링하거나 --no-slices --preview …로 미리보기만 렌더링합니다. 전달 전에 모든 것을 처음부터 다시 렌더링합니다.

확인하고 수정합니다. 먼저 미리보기를 본 다음 각 이미지를 보고 체크리스트를 확인합니다. 수정하고 다시 렌더링합니다. 확인하지 않은 이미지는 전달하지 마십시오. 이동된 크롭, 헤드라인 뒤의 곡선 또는 카드를 덮는 오브젝트는 그림에서만 보입니다. 6.3" 세트는 6.9" 세트를 축소한 것입니다. 하나만 보면 충분하지만 둘 다 파일 수와 크기를 확인하십시오.
전달합니다. 폴더, 디바이스 세트, 이미지 수, 각 이미지의 헤드라인 및 각 테마가 사용한 원시 폴더를 간략히 알려줍니다. 다크 스크린샷이 다른 상태를 표시한 경우 다시 찍을 화면을 지정합니다. Duo 세트가 만들어지지 않은 경우 이유와 캡처해야 할 사항을 설명합니다. 카피를 변경하려면 .src/의 HTML을 편집하고 6단계의 명령을 실행하기만 하면 된다고 언급합니다.

참조 세트가 제공된 경우

사용자가 다른 앱의 스토어 스크린샷을 참조로 제공하는 경우 style.md의 레이아웃 값을 해당 세트의 측정값으로 바꾸십시오:

이미지를 하나씩 살펴본 다음 나란히 보고, 전체 해상도에서 배경 및 연속성, 헤드라인, 디바이스, 하이라이트 기술, 장식, 특수 이미지, 리듬 및 톤을 측정합니다.
참조에 없는 것은 추가하지 마십시오.
참조의 종횡비가 출력과 다른 경우 측정값을 너비를 기준으로 전달합니다. 요소는 상단에 고정하고 하단에서 잘리는 요소는 하단에 고정합니다.
참조에서 스타일과 레이아웃만 가져옵니다. 로고, 브랜드 이름, 마스코트, 사진 또는 텍스트를 절대 복사하지 마십시오. 장식도 앱 자체 컨텍스트로 변환합니다.
측정값에 대한 파일도 작성하지 마십시오.

체크리스트

모든 테마 및 디바이스에 대해 warnings가 비어 있습니까? 모든 파일이 알파 채널 없이 올바른 크기입니까? 모든 디바이스 세트의 이미지 수가 동일합니까?
미리보기에서 배경 모양과 이음새 오브젝트가 모든 이음새에서 계속됩니까?
헤드라인 영역(y 0–650)에 곡선이 있습니까? 헤드라인 색상이 배경과 일치하고 2~3개 그룹으로 변경됩니까?
모든 이미지에서 헤드라인 크기가 동일합니까? 히어로 이외의 헤드라인이 2줄을 초과합니까?
모든 이미지에서 디바이스가 동일한 위치에 있습니까? UI의 중요한 부분이 둥근 모서리나 Dynamic Island 아래에 있습니까?
각 크롭이 정확히 의도한 대로 표시됩니까? 잘린 텍스트나 가장자리에 인접한 UI 조각이 있습니까? 카드가 선명합니까?
팝아웃 카드의 가장자리가 아래 어두워진 화면의 텍스트 줄을 반으로 자릅니까? 카드 그리드의 간격을 통해 텍스트가 보입니까?
히어로 오브젝트가 이미지 2로 흘러들어가면 거기서 카드나 텍스트에 닿습니까? 히어로의 카드가 가장자리 뒤에 숨겨져 있습니까, 아니면 용해되는 것처럼 보입니까?
3D 오브젝트가 앱의 주제에서 비롯됩니까? 헤드라인, 카드 또는 중요한 UI 텍스트를 덮습니까? 이미지당 최대 2개의 오브젝트?
히어로에서 심볼을 알아볼 수 있습니까? 카드가 심볼 내부에 있습니까, 아니면 앞에 있습니까?
다크 테마가 어두운 지배적입니까(큰 평평한 A 영역 없음, A는 헤드라인, 오브젝트 및 프레임에만)? 디바이스 테두리, 카드 및 오브젝트가 배경에서 두드러집니까? 두 테마에서 레이아웃이 동일합니까?
다크 모드 스크린샷이 있는 경우: 다크 세트는 디바이스와 모든 크롭에서 다크 UI를 표시하고 라이트 세트는 라이트 UI를 표시합니까? 공유된 각 크롭이 둘 다에서 동일한 요소를 보여줍니까?
Duo 세트에서 모든 화면이 Duo 원시 스크린샷에서 비롯됩니까? 카드, 오브젝트 및 배경 모양이 짧은 Duo 캔버스에 맞습니까? 디바이스 하단이나 카드가 잘리지 않습니까? 측면 탭과 상태 표시줄이 크롭에서 올바르게 살아남습니까?
언어별 문자가 올바릅니까(예: 터키어 İ, ı, ş, ğ)? (<html lang>이 언어와 일치해야 합니다.)

Store Screenshots Panorama — 하나의 띠처럼 읽히는 App Store 세트