Android 스타일 로고 리빌

Android 스타일 로고 리빌은(는) 무엇을 하나요?

여러 스킬이 이 작업을 수행할 수 있는 경우: 사용자가 이 스킬을 명시적으로 언급하지 않고, 당신의 에이전트에 동일한 종류의 결과물(다른 론치 필름, 샷, 덱 또는 목업)을 제작할 수 있는 다른 옴니가미 스킬이 설치되어 있다면, 해당 스킬들의 이름을 나열하고 사용자에게 어떤 것을 원하는지 먼저 질문하세요. 스킬이 명시적으로 언급되었거나, 설치된 유일한 스킬이라면 바로 진행하세요.

일본어, 한국어 또는 중국어 제품 페이지의 경우, 카피를 해당 언어로 유지하고 필름의 lang을 페이지의 <html lang>으로 설정하세요. 번들로 제공되는 Noto 폰트와 구문 분리가 텍스트를 처리합니다.

제품의 마크를 자체 지오메트리에서 구축하고 락업으로 끝나는 15.5초 오프너입니다. 가는 구성선이 마크의 실제 모서리를 따라 자라나고, 마크의 실제 호에서 컴퍼스 원이 0.75초마다 하나씩 그려지며, 제품이 사용자를 위해 하는 일을 말해주는 네 개의 짧은 문구가 배치됩니다. 마크가 채워지고 중앙으로 글라이드하여 멈춥니다. 카메라가 마크 안으로 푸시 인하여 그 색상이 전체 프레임이 될 때까지 들어갑니다. 제품 라인의 첫 번째 단어가 단독으로 크게 등장합니다. 마크의 고유한 형태 중 하나를 이용한 와이프가 그 단어를 라인의 나머지 부분으로 전환합니다. 디스크가 제품의 실제 입력(또는 주요 버튼)으로 늘어나고, 거기에 마지막 단어가 타이핑됩니다. 전송 버튼이 눌리고, 마크 색상의 디스크가 프레임 안으로 번져 나오며, 카메라는 마크 밖으로 풀 백하여 락업에 도달합니다. 평면 필드, 블러 없음, 그라데이션 없음, 그림자 없음. 120 BPM 그리드에서 30fps, 와이드(1920 × 1080).

당신은 완성된 필름을 적용(adapt)하여 작업합니다. reference/는 Ostlery(옴니가미 예제용으로 제작된 가상의 숙박 예약 도우미, 그 스토리와 출처는 reference/STORY.md에 있음)의 완성된 필름입니다. 그 메커니즘(이징, 타임라인, 카메라의 푸시 앤 풀, 와이프, 디스크, 블룸, 락업 비율 및 필름 자체 검사)을 유지하세요. 참조 필름의 명사(마크, 마크에서 그려진 구성선, 네 개의 문구, 라인, 입력, 색상, 폰트 및 워드마크)는 사용자의 것으로 대체됩니다. 변경하는 모든 설정은 reference/index.html에 ADAPT로 레이블이 지정되어 있습니다. KEEP으로 표시된 모든 것은 그대로 유지하세요.

계획을 세우기 전에 style.md를 읽고, 어떤 것을 판단하기 전에 critique.md를 읽으세요.

필요 사항

• 벡터 경로로서의 마크 (SVG). 구성선은 마크의 실제 지오메트리이므로 PNG만으로는 충분하지 않습니다. SVG를 요청하거나 제품의 소스나 사이트에서 찾으세요. 마크를 추적, 재그리기 또는 "개선"하지 마세요.
• 제품의 라인: 자체적인 한 문장, 3~7단어로, 두 부분으로 읽히는 것(Ostlery의 예: "Plan a stay" + "in a sentence."). 첫 번째 단어는 짧고 강력해야 하며, 프레임이 허용하는 가장 큰 크기로 단독으로 등장합니다.
• 제품이 사용자를 위해 하는 네 가지 일, 제품의 목소리로(사이트나 브랜드 가이드에서 가져옴).
• 제품의 실제 입력 또는 버튼, 제품이 스타일링한 그대로: 가장 좋은 것은 자체 전송 버튼이 내장된 필드(컴포저, 이동 버튼이 있는 검색 상자, 프롬프트)이며, 그렇지 않으면 주요 액션 버튼입니다. 제품에 없는 컴포넌트는 절대 사용하지 마세요("입력" 참고).
• 해당 폰트(라이선스 파일 포함): 라인용 디스플레이 폰트, 인터페이스 폰트, 워드마크 폰트 또는 SVG로 윤곽선 처리된 워드마크. 폰트를 배송할 수 없는 경우 라이선스 파일을 요청하거나 가장 가까운 오픈 폰트를 사용하고 그 사실을 알리세요.

사이트를 먼저 읽고, 그런 다음 한 번에 하나의 메시지로 답변할 수 없는 것들을 질문하세요. 사용자가 질문을 원하지 않거나 무인 실행을 원하는 경우, 접근 가능한 정보를 바탕으로 결정하고 결정 사항을 알리세요.

설정

Node 20+, ffmpeg 및 Chrome 계열 브라우저를 확인하세요(scripts/chrome.mjs가 찾고 CHROME_PATH로 재정의 가능). 누락된 사항이 있으면 설명하고 중단하세요. 현재 디렉토리의 logo-reveal/에서 작업하고, 먼저 SKILL_DIR을 이 파일의 폴더로 설정하세요:

SKILL_DIR=/path/to/android-style-logo-reveal   # 이 SKILL.md 파일이 있는 폴더
mkdir logo-reveal && cd logo-reveal
cp -R "$SKILL_DIR/reference" reference && cp -R "$SKILL_DIR/reference" film && cp -R "$SKILL_DIR/scripts" scripts && cp -R "$SKILL_DIR/music" music
rm -rf reference/out film/out film/STORY.md
npm init -y >/dev/null && npm i -D puppeteer-core
node scripts/render.mjs reference --times key --sheet --out out/reference

reference/는 비교를 위해 그대로 둡니다. 당신은 film/을 편집합니다: index.html과 assets/(mark.svg와 폰트를 제품의 것으로 교체, 각 폰트는 라이선스 파일과 함께, 사용자의 것이 로드되면 참조의 것은 삭제). STORY.md와 PRODUCT.md는 logo-reveal/의 최상위에 위치합니다. 지금 out/reference/16x9-sheet.png를 확인하세요: 그것이 기준선(bar)입니다.

1. 브랜드 읽기

1. node scripts/capture.mjs <url> capture를 실행하고 모든 스크린샷과 capture/brand.json을 읽으세요. 제품 자체(앱, 데모 또는 소스)를 엽니다. 로컬 앱의 경우: 서빙(python3 -m http.server)하고 주소를 사용하세요.
2. PRODUCT.md 작성: 한 문장으로 요약된 제품 설명, 목소리 톤, 폰트 및 라이선스, 마크의 아이디어(형상이 무엇을 나타내는지: Ostlery의 아치는 "문 안의 문", 출입구는 "찾아낸 단 하나의 숙소"), 입력 또는 주요 버튼 및 스타일링, 라인 및 네 가지 혜택(각각 출처와 함께), 날짜. 그리고 역할별 색상(필름의 토큰, C):
   • paper 바탕, ink 텍스트, card 입력의 채움색
   • ember 마크의 색상(이름은 참조의 것, 역할 이름 유지)
   • lake 구성선 색상: 브랜드가 링크, 선 또는 지도에 사용하는 차가운 색상. 없거나 다른 용도로 사용하는 경우 잉크 사용(밝은 회색 절대 금지: 희미하게 보임)
   • ok 문구 옆의 체크 표시 색상: 브랜드의 성공 색상, 또는 해당 색상이 제한된 경우(Tovra는 도착한 돈을 위해 초록색을 유지) 잉크 사용

2. 단어

• 네 개의 문구는 제품이 사용자를 위해 하는 일을 말합니다: 브랜드의 목소리로, 각각 2~5단어. 650px 열에 64px로 설정되며 모두 가장 넓은 것에 맞춰 축소됩니다: 가장 긴 문구는 약 22자 이내로 유지(Ostlery의 가장 긴 것 "Finds the one that fits", Figtree 23자, 64px에 딱 맞음; 더 넓은 폰트는 더 적게 들어가고 56px 미만으로 설정되는 문구는 작게 읽힘). 샘플 데이터의 특정 내용(필터, 가격, 고객, 결과 이름 등)은 절대 사용하지 마세요("Under $220 a night"와 "Best fit · Heron Point Cabin"은 Ostlery에서 거부됨: 왜 누군가가 그것을 원하는지에 대해 아무것도 말하지 않음). 제품이 작동하는 순서대로 정렬; 마지막 문구는 보상(payoff)이며, 마크가 채워질 때 등장합니다. 네 개, 절대 다섯 개가 아닙니다: 각각 읽는 데 약 1초가 걸려야 합니다.
• 라인, 두 부분으로 분할: line1, 진술(2~4단어), line2, 나머지 부분, 입력에 타이핑되거나(20자 이하가 가장 잘 읽힘; 타이핑이 전송 실행으로 넘어가면 필름 검사 실패) 버튼 자체 레이블. 제품에 자체 라인이 있으면 그것을 사용하세요. 한 핵심 단어는 *이렇게* 표시하여 마크 색상으로 설정할 수 있으며, 두 부분 중 어느 곳에나 올 수 있지만 첫 번째 단어는 절대 안 됨(첫 단어는 마크 필드 위에 바탕색으로 등장). 마크는 단어 주변에만 작성합니다; 필름은 *paid*.를 *paid.*로 읽습니다. 브랜드가 한 가지 의미를 위해 색상을 유지하는 경우 아무것도 표시하지 않을 수 있습니다.
• 워드마크: 락업이 설정하는 대로의 제품 이름(대소문자, 폰트 및 굵기, 또는 윤곽선 처리된 SVG).

reference/STORY.md의 형식으로 STORY.md를 작성하세요: TL;DR, 각 비트(beat)가 의미하는 바, 마크의 구성, 채움, 와이프, 코너 형태 및 입력이 포함된 비트 시트, 그리고 출처가 포함된 모든 단어. 네 개의 문구, 라인 및 구성 계획을 몇 줄로 사용자에게 보여주고 한 번의 리뷰를 요청하세요. 단, 사용자가 무인 실행을 요청하지 않은 경우에 한합니다. 침묵을 승인으로 간주하지 마세요.

3. 마크를 자체 지오메트리로 구성하기

이것이 필름의 핵심입니다: 시청자는 그려진 모든 선이 실제로 마크 안에 있기 때문에 마크가 세심하게 디자인되었다고 느껴야 합니다. 아래의 모든 숫자는 필름의 100단위 박스 안에 있습니다(마크는 (50, 50)의 중앙에 위치, 긴 쪽은 8 → 92로 실행). 먼저 SVG의 숫자로 종이에 계산한 다음 입력하세요.

1. 마크 배치 (MARK_D, MARK_FIT, BOX). SVG의 경로 데이터를 MARK_D에 정확히 복사하세요. 각 항목은 하나의 파트(독립적으로 채울 조각)입니다(fill-rule="evenodd" 경로는 그대로 유지). SVG가 100단위 박스로 그려지지 않은 경우, MARK_FIT = [s, 0, 0, s, tx, ty]를 설정하세요. s = 84 / (긴 쪽 길이), tx = 50 - s × (중심 x), ty = 50 - s × (중심 y); 그러면 모든 SVG 숫자 v는 s × v + tx(x) 또는 s × v + ty(y)로 매핑됩니다. BOX를 박스 내 마크의 범위로 설정하세요(정사각형 마크: 8, 8, 92, 92; 넓은 마크는 x를 8→92로 유지하고 y 범위는 안쪽으로 이동). 여러 색상의 마크: drawMark와 각 파트의 색상 채움을 제공하세요.
2. 그리드 (GRID_X, GRID_Y): 모든 실제 모서리에 대해 하나의 선. 모든 수직 직선 모서리의 x, 모든 수평 직선 모서리의 y, 각 호의 접선(중심 ± 반지름, 양방향), 각 파트의 대칭축, 그리고 50의 중심축(약간 더 어둡게 그림)을 나열하세요. 2단위 미만으로 가까운 선은 병합하세요. 수직선 약 612개, 수평선 약 48개를 유지하세요. 마크의 모서리, 접선 또는 축이 아닌 것은 그리드에 넣지 마세요.
3. 프리미티브 (PRIMS, T.circles): 마크 디자이너가 그린 순서대로, 가장 큰 것부터 최대 5개. 각각은 STROKE 위에서 0.65초 동안 이동하는 점으로 그려지며, 시작점에 앵커, 중간 지점에 하나, 오래된 것은 희미해지고, 치수선은 가장 최신의 것으로 글라이드합니다:
   • 원, 마크의 호 중 하나에서: { x, y, r }, 중심과 반지름(오른쪽 스프링 지점에서 시작하여 위로 올라감). 중심을 공유하는 호는 가장 강력한 구성을 만듭니다(Ostlery의 다섯 개는 동심원);
   • 다른 모든 외곽선: { path, half }, 점이 시작되어야 하는 위치에서 시작하는 박스 단위의 SVG 경로 데이터, 두 번째 앵커가 도달하는 길이의 비율: 하나의 외곽선으로서의 둥근 막대, 정사각형의 대각선, 삼각형의 중앙선, 문자의 세로선과 볼. 호가 없는 마크에는 이것들이 필요합니다. 각각에 dim: [x, 50]을 제공하세요. 여기서 치수선이 시작되며, 중심 축 위에(오른쪽 가장자리의 교차점), 선이 문구 열과 수평으로 실행되도록 합니다. 구성의 모든 단계를 확인하세요: 큰 원 안의 작은 원들은 얼굴로 읽힐 수 있습니다(Tovra의 동전에 있는 세 개의 작은 호는 두 눈과 찡그린 얼굴로 읽힘); 대신 그것들이 둥글게 만드는 형태를 그리세요(T는 두 개의 둥근 막대로). 경계 상자, 펜 도구, 커서 또는 디자인 도구 소품은 절대 사용하지 마세요.
4. 문구 및 프리미티브의 시간 (LINES, T.lines, T.circles): 문구는 0.75, 2.0, 3.25, 4.5초(마지막은 채움과 함께). 다섯 개의 프리미티브는 0.75초부터 0.75초 간격으로 시작합니다. 더 적은 경우, 각 문구 시간에 하나씩 시작하세요(세 개: 0.75, 2.0, 3.25). 그런 다음 keyTimes(파일 끝 근처)를 필름의 순간으로 이동하세요: 각 프리미티브의 그리기 및 각 문구의 유지 시간 내에 하나씩.
5. 채움 (FILLS): 순서는 마크의 아이디어에서 비롯되며, 아이디어의 보상이 되는 부분이 먼저 켜집니다. 각 단계는 rise(부분이 아래에서 위로 채워짐), along(밴드가 중심선을 따라 채워짐, 박스 단위의 경로와 길이로 제공, 한쪽 끝에서 다른 쪽 끝으로), 또는 grow(부분이 한 점에서 바깥쪽으로 채워짐) 중 하나입니다. 각각 STROKE 위에서 0.6~0.75초 동안 진행되며, 다음 단계는 이전 단계가 끝나기 전에 시작하여 어떤 단계도 멈추지 않습니다. Ostlery: 출입구가 문턱에서 솟아오르고, 그런 다음 외부 및 내부 아치가 자체 경로를 따라 왼쪽 발이 위로 올라가면서 채워집니다. 단일 파트 마크는 한 번 채워집니다(Tovra의 동전이 아래에서 녹색으로 솟아오르는 것, 앱의 유료 막대처럼).
6. 카메라가 들어가는 곳 (DOOR): 마크의 단단한 부분 중간에 있는 점, 그 부분 주변에 최소 19.2 × 10.8단위(풀 시작 시 프레임, 100px = 1단위)가 있어야 하므로 푸시가 하나의 색상에 도달합니다. 그렇게 큰 부분이 없으면 UP과 UP2를 함께 올리세요(필름 검사가 도달 시점을 알려줍니다). 푸시는 마크의 아이디어가 "안으로"라고 말하는 곳으로 들어갑니다(Ostlery: 문을 통해).

4. 와이프, 코너 형태, 라인 필드 및 입력

• 와이프 (archWipe, WIPE, T.wipe): 마크 필드에서 라인 필드로의 전환은 절대 하드 컷이 아닙니다. 마크의 고유한 형태 중 하나이며, 프레임보다 훨씬 넓게 확장되고, 0.55초 안에 다음 장면이 그 안에 있는 필드 위로 올라오거나 미끄러지며, 가장자리가 프레임의 먼 모서리를 막 지울 때 끝나서 안착이 화면에서 발생합니다. Ostlery의 것은 출입구이고, Tovra의 것은 동전의 디스크입니다. archWipe에 경로로 그리세요(해당 keep 인수 유지: 필름은 외부도 클리핑합니다). 첫 번째 단어는 두 필드 위를 가로지릅니다.
• 코너 형태 (corners): 마크의 두 조각이 라인 필드의 프레임 가장자리에서 살짝 보입니다(Ostlery: 오른쪽 상단의 외부 아치 채움, 왼쪽 하단의 출입구 외곽선), 이즈 아웃으로 슬라이드 인; 형태로 읽힐 수 있을 만큼 충분히 크고, 라인이나 입력을 절대 교차하지 않으며, 프레임에 의해 잘려서 우발적인 노치가 생기지 않도록 합니다.
• 라인 필드 (LINE): 잉크, 단어는 바탕색(참조). 제품의 입력이나 버튼이 어두운 경우 잉크 위에서 사라질 수 있습니다: LINE = { field: C.paper, text: C.ink }로 설정하세요(첫 번째 단어는 와이프 안에서 라인 색상을 취함).
• 입력 (INPUT, SEND, BUTTON, COMP, ICON_UP): 제품의 실제 컴포넌트이며, 필름 스케일의 CSS에서 다시 그려야 하고, 제품에 없는 두 조각을 하나로 결합해서는 안 됩니다. 선호도 순서:
  1. 내부에 자체 전송 버튼이 있는 필드 (INPUT.kind = 'field', 참조): 채움, 둥글기(INPUT.round, 높이 대비 모서리 반경 비율; 0.5는 완전히 둥글게), 전송 색상, 형태(SEND.round) 및 아이콘, 텍스트 폰트 및 굵기. 흰색 디스크가 튀어나와 필드로 늘어나고, 전송이 끝에 타고 들어오며, line2가 0.045초에 한 글자씩 타이핑되고 꾸준한 캐럿이 표시됩니다.
  2. 주요 액션 버튼 (INPUT.kind = 'button'), 해당 필드가 없는 경우: 버튼 색상의 디스크가 튀어나와 버튼(자체 반경, INPUT.round)으로 늘어나고, 아이콘과 레이블(line2, 버튼의 실제 레이블)이 한 번에 설정됩니다. 타이핑 없음. BUTTON은 크기를 보유합니다: 앱의 자체 비율 유지

...(이하 생략, 원본에서 잘림)