소셜 목업 스튜디오

소셜 목업 스튜디오은(는) 무엇을 하나요?

브리프를 LINE, Facebook, TikTok 화면의 픽셀 단위 정확한 목업으로 전환합니다. 모든 브랜드, iOS, Android 또는 데스크탑에서 사용 가능합니다. 이 키트는 절대 혼합되어서는 안 되는 두 가지를 분리합니다:

• 플랫폼 크롬(상태 표시줄, LINE 헤더, FB 탭 바, TikTok 레일 등)은 assets/kit.css에 있습니다. 항상 실제 앱처럼 보이며, 브랜드처럼 보이지 않습니다.
• 브랜드 콘텐츠(Flex 메시지, 리치 메뉴 아트, 광고 크리에이티브, 아바타, CTA 스타일)는 <project>/brand.css 변수에 의해서만 구동됩니다.

브랜드 전환 = brand.css + 이미지 + 카피 교체. 이것이 브랜드 간 동등 비교를 가능하게 합니다.

워크플로우

0. 사전 점검 (첫 질문 전). python3 scripts/preflight.py --brand <brand site> --surfaces <line,fb,tiktok>를 실행합니다. 첫 번째 응답에 TELL THE USER 줄을 넣으세요:
   • 브라우저 없음: 렌더링, 내보내기 또는 시각적 확인이 불가능하다고 말합니다.
   • 브랜드 사이트 또는 이미지 소스 차단: 그렇게 말하고, 업로드해야 할 정확한 파일(로고, 리치 메시지 히어로, 타일 이미지 등, 브랜드 헥스 색상 및 CTA 문구 포함)을 명시하거나, 사용자에게 도메인을 허용해 달라고 요청하세요.
   • 허위 아트워크로 공백을 채우지 마십시오.
   • 결과를 notes.md → Environment에 복사합니다.
1. 요구사항 수집 (추측하지 말고 질문하세요). references/intake.md를 읽고 AskUserQuestion으로 질문을 라운드별로 진행합니다. 먼저 화면을 확정합니다(라운드 1b): 사용자가 이미 원하는 화면을 알고 있는지(목록을 그대로 받아들임) 또는 도움을 원하는지(목표를 물어본 후 2~3개의 다른 크기의 스토리보드를 제안) 질문합니다. 제작 전 번호가 매겨진 스토리보드 테이블을 하나 확인하고, 조용히 화면을 추가하거나 제거하지 마십시오. 모든 LINE 채팅 화면에 대해 항상 리치 메뉴가 열려 있는지(열림 / 접힘 / 없음)와 새 메시지만 표시할지(상단 고정) 이전 메시지도 표시할지 질문합니다. 리치 메뉴의 경우 레이아웃 선택기 이미지를 먼저 표시하고(templates/richmenu-picker.svg/.png, intake.md 라운드 3b에 환경별 방법 있음) 그런 다음 코드를 질문합니다. LINE의 경우 항상 리치 메시지, Flex 또는 둘 다(Q3c, references/line.md의 시각적 비교 포함)를 질문합니다. 로고, 브랜드 색상(hex) 및 정확한 CTA 문구를 일찍 요청하세요. 모든 답변을 notes.md → Brief에 기록하고, 모든 추측은 → Assumptions에 기록하여 확인을 받으세요. 사용자가 이미 답했거나 합리적인 기본값이 나열된 경우에만 질문을 건너뜁니다. 혜택, 가격, 날짜, 로열티 프로그램 또는 제품 주장을 임의로 만들지 마십시오. 질문하거나 플레이스홀더로 표시하세요.
2. 스캐폴딩. bash scripts/new_project.sh <path/to/project-name> → 키트, 시작 index.html, brand.css 및 notes.md를 복사합니다.
3. 브랜드 + 이미지. intake에서 brand.css를 채웁니다. 라이선스가 있는 폰트는 brand/fonts/에, 로고(아바타용 단색 마크)는 brand/에 넣습니다. 모든 업로드를 먼저 정리합니다: python3 scripts/clean_image.py <files> --for <placement> --edges /tmp/edges.png. 흰색 가장자리 스트립을 자르고 assets/clean-log.txt에 기록하며, 크기를 references/line-image-sizes.md와 비교하고 엣지 시트를 작성합니다. 시트를 열어 확인합니다. 리치 메시지는 사용자가 다른 OA 관리자 크기를 확인하지 않는 한 1040×1040입니다. 인용하는 모든 플랫폼 제한은 두 개 이상의 출처가 필요합니다. 충돌하는 경우 그렇게 말하고 가장 안전한 값을 선택하세요. 모든 이미지 슬롯은 실제 사진을 사용합니다. CSS 그래디언트 또는 플레이스홀더 텍스트는 목업을 가짜로 보이게 만듭니다. references/image-sourcing.md를 따르세요: 사용자 제공 → 브랜드 웹사이트/보도자료 → 온라인 검색 (scripts/find_images.py "<query>" --orient portrait는 연락처 시트를 작성하고 확인함; 그런 다음 scripts/fetch_image.py <url> assets/<name>.jpg --crop 4:5). 또한 모든 페이지(뉴스, 소매점, 브랜드 소셜)를 웹 검색하고 해당 URL을 fetch_image.py에 전달할 수 있습니다. 페이지의 주요 이미지를 읽습니다. 각 다운로드는 assets/credits.json에 기록됩니다.
4. 샷 빌드. 갤러리에는 모든 표면 × OS 조합이 아닌 표면당 하나의 예제가 포함되어 있습니다(아래 매트릭스 참조). templates/gallery.html에서 가장 가까운 블록을 복사하여 index.html에 붙여넣고, references/devices.md를 사용하여 기기를 전환합니다: .dev.android ↔ .dev.ios를 교체하고 해당 OS의 크롬 차이점(예: FB 탭 상단 ↔ 하단 탭 바)을 적용합니다. 카피와 이미지를 편집합니다. 플랫폼별 세부 사항은 references/line.md, facebook.md, tiktok.md에 있습니다.
   • 모든 샷에 고유한 data-shot ID를 부여합니다. 이 ID가 파일 이름이 됩니다. 샷별 CSS는 [data-shot="id"]로 범위를 지정할 수 있습니다.
   • 프로젝트 클래스 이름은 프로젝트 접두사(예: .sb-hero, .kv/.hero 아님)로 지정하여 키트 클래스와 충돌하지 않도록 합니다.
   • 폰트 및 비율(references/typography-and-ratios.md 참조): 앱이 그리는 텍스트(버블, Flex, 게시물 카피, CTA 버튼, 캡션)는 항상 플랫폼 폰트이므로 --brand-head/--brand-body를 적용하지 마십시오. 브랜드 폰트는 이미지 내부에만 사용됩니다. 미디어 상자는 고정 높이가 아닌 비율을 사용합니다: FB 피드 4:5, 캐러셀 1:1, 스토리/릴스/TikTok 9:16, LINE 리치 메시지는 기본 1040×1040(다른 크기는 references/line-image-sizes.md 참조, 가장자리 간 지오메트리는 UNVERIFIED), Flex 히어로 20:13.
   • 맞추기 위해 브리프 콘텐츠를 삭제, 축소 또는 이동하지 마십시오(예: 정사각형 이미지를 메뉴가 열린 상태로 맞추기 위해 텍스트 버블 제거, 또는 "새 메시지만 표시" 채팅을 하단 고정). 사용자에게 알리고 옵션(컴팩트 메뉴, 더 짧은 텍스트, 메뉴가 접힌 추가 화면)을 제공합니다.
   • UNVERIFIED로 표시된 키트 세부 사항(현재 references/line.md의 리치 메시지 여백, 반경 및 너비)은 notes.md → Unverified 및 전달 메시지에 포함합니다.
   • 태국어 카피: 가격, 날짜, 단위 및 종결사를 <span style="white-space:nowrap">로 감싸서 줄이 "ค่ะ", "ml" 또는 분할된 단어로 끝나지 않도록 합니다.
5. 내보내기 (Mac에서, iOS 텍스트를 실제 SF Pro + Thonburi로 렌더링). node scripts/export.cjs <project> (처음 실행 시: cd scripts && npm install; Playwright 브라우저가 다운로드되지 않은 경우 설치된 Google Chrome으로 대체). 프로젝트 폴더만 제공합니다. → captures/NN-<shot-id>.png(3× 휴대폰, 2× 데스크탑, 투명), 00-overview.png, qa.json. 실패한 모든 요청과 QA 문제를 수정합니다.
   • 내보내기를 여기서 실행할 수 없는 경우(Node, Playwright 또는 인터넷이 없는 Claude 앱/Cowork 샌드박스): cd scripts && npm install && npx playwright install chromium을 한 번 시도합니다. 그래도 실패하면 Python(pip install playwright && python -m playwright install chromium)으로 각 .frame을 3배로 직접 스크린샷을 찍습니다. 최후의 수단으로 python3 scripts/bundle.py <project>를 실행하여 하나의 자체 포함 HTML(dist/<name>.html, 더블 클릭으로 열림)을 만듭니다. 프로젝트 ZIP과 함께 전달하고 사용자에게 "여기서는 아무것도 렌더링할 수 없으므로 이 화면은 시각적으로 확인되지 않았습니다. HTML을 Chrome에서 열고, 화면을 저장하려면 마우스 오른쪽 버튼 클릭 → 검사 → 전화기 프레임에서 노드 스크린샷 캡처를 선택하거나 Mac에서 내보내기를 실행하세요."라고 명확히 알립니다. 그런 다음 확인되지 않은 세부 사항을 나열합니다. 렌더링되지 않은 결과를 확인된 것으로 제시하지 마십시오.
   • 단일 파일 HTML: 항상 scripts/bundle.py로 빌드하고, 임시 스크립트를 사용하지 마십시오. 모든 인라인 스크립트를 구문 검사(node --check)하고, 누락된 아이콘 ID나 파일이 있으면 실패하며, 브라우저가 있을 때 상태 표시줄과 아이콘이 렌더링되는지 확인합니다. 임시 번들러가 한 번 아이콘 스프라이트를 손상시켜 kit.js를 죽였고, 상태 표시줄이나 아이콘이 남지 않았습니다.
   • macOS가 아닌 경우 iOS 텍스트는 SF Pro 대신 Inter를 사용합니다(kit.js가 교체). notes.md에 명시하고 최종 클라이언트 파일을 위해 Mac 재내보내기를 제안합니다.
6. 클라이언트처럼 검토. 모든 PNG를 전체 크기로 열고(개요뿐만 아니라) references/qa-checklist.md를 실행합니다. 모든 샷에 대해 notes.md → "Pre-delivery check against the Brief"를 채웁니다: 모든 브리프 카피가 존재하는지, 앵커링, 메뉴 상태 및 메시지 형식이 요청된 대로인지, 제거된 항목이 없는지. 목업을 references/screens/device/의 실제 기기 캡처와 나란히 놓거나(또는 사용자에게 동일한 표면의 새로운 휴대폰 스크린샷을 요청) 비교합니다. 플랫폼 UI는 몇 달마다 변경되며 실제 캡처만이 유일한 기준 진실입니다.
7. 정직하게 기록하고 전달. notes.md를 업데이트합니다: 플레이스홀더, 가정, 확인되지 않은 세부 사항, 이미지 소스 및 정리 로그, 타임라인. 전달 메시지에는 다음이 포함되어야 합니다: (a) 파일 경로; (b) 확인된 것과 확인되지 않은 것(예: "100%로 렌더링 및 확인됨" vs "여기서 렌더링되지 않음"); (c) 확인해야 할 가정(짧은 목록, 특히 첫 번째 전달 시); (d) 확인되지 않은 세부 사항; (e) 맞출 수 없었던 브리프 항목과 함께 제공하는 옵션.

갤러리 매트릭스 (✓ = 준비된 샷; 나머지는 동일한 행에서 조정)

표면	Android	iOS	데스크탑
LINE OA 채팅 + Flex	✓ 다크	✓ 라이트	– (아직 키트에 없음)
LINE 리치 메뉴 (12 OA 관리자 템플릿 + 커스텀 + 탭)	✓ 다크 L6, ✓ 탭	✓ 대형 L4b, ✓ 컴팩트 C2l	– (LINE PC에 표시되지 않음)
LINE 푸시/잠금 화면	조정 (.android .notif)	✓	–
FB 피드 단일 이미지	✓ 라이트	✓ 다크	✓
FB 캐러셀	조정	✓ 라이트	조정
FB 스토리/릴스	조정	✓	–
TikTok 인피드/Spark/제품 카드	✓ 인피드	✓ Spark, ✓ 제품 카드	✓

리얼리즘 규칙 (어렵게 얻은 교훈)

프로젝트당 한 번씩 references/realism-rules.md를 읽으세요. 짧은 버전:

• 플랫폼 크롬은 브랜드 색상이 아닙니다. LINE 헤더, FB/TikTok UI는 기본 상태를 유지합니다.
• 모든 화면에서 일관된 단일 타임라인(티저 → 출시 → 사전 주문 → 판매 중 → 유지). 날짜, 요일, 카운트다운 및 "유효 기간"이 일치해야 합니다. 모든 날짜의 요일을 확인하세요.
• 브랜드가 운영하지 않는 혜택(포인트, 멤버십 등급, 무료 선물)을 임의로 만들지 마십시오. 브리프에 명시되지 않은 경우 플레이스홀더 또는 질문입니다.
• 실제 앱이 앵커링하는 곳에 콘텐츠를 앵커링합니다. 새로운 LINE 스레드는 상단에서 시작합니다. 긴 스레드는 하단 정렬됩니다(.ln-msgs.bottom). 큰 빈 공간은 가짜로 보입니다.
• 이미지는 휴대폰 크기에서 읽을 수 있어야 합니다. 약 60px 미만의 제품 썸네일은 보이지 않으므로 더 좁게 자르거나 더 크게 만듭니다.
• 그럴듯한 숫자(좋아요, 댓글, 시간, 배터리)를 사용하고 상태 표시줄 시간이 스토리와 일치하도록 유지합니다(07:30 푸시가 21:14를 표시해서는 안 됨).
• LINE 리치 메뉴는 하나의 디자인된 이미지(2500×1686 또는 2500×843)이며, 기본 UI 타일이 아닙니다. 아트워크로 디자인하세요.

키트에 없는 항목이 있는 경우

동일한 규칙(플랫폼 vs 브랜드 변수)을 사용하여 프로젝트의 index.html <style>에 빌드하세요. 재사용 가능한 경우(새로운 표면: LINE VOOM, FB Messenger, TikTok TopView 등) assets/kit.css + templates/gallery.html에 추가하고 팀이 업스트림할 수 있도록 언급하세요.

파일

경로	내용
assets/kit.css, kit.js, icons.svg, fonts/	키트 (각 프로젝트에 kit/으로 복사됨)
templates/gallery.html	모든 표면 × OS, 여기서 블록 복사
templates/brand.example.css	주석이 있는 브랜드 변수
templates/index.starter.html, notes.template.md	프로젝트 스타터
scripts/new_project.sh	프로젝트 스캐폴딩
scripts/preflight.py	0단계: 렌더링 가능? Mac인가? 브랜드 사이트 및 이미지 소스에 접근 가능? 사용자에게 알릴 내용 출력
scripts/clean_image.py	업로드에서 흰색 가장자리 자르기(기록됨), 배치별 크기 확인, 엣지 확대 QA 시트
scripts/bundle.py	하나의 자체 포함 HTML(인라인 CSS/JS/폰트/이미지/스프라이트), 구문, 아이콘 및 렌더링 검사 포함
templates/richmenu-picker.svg / .png	모든 리치 메뉴 레이아웃 및 코드, intake에서 사용자에게 표시됨; scripts/richmenu_picker.py --png로 재빌드
references/line-image-sizes.md	전송 경로별 LINE 리치 메시지/리치 메뉴/Flex/이미지 크기, 출처 및 충돌 정보 포함
scripts/find_images.py, fetch_image.py	온라인에서 실제 사진 찾기(연락처 시트) · 다운로드 + 자르기 + 소스 기록
references/image-sourcing.md	이미지 출처, 배치별 자르기, 광고 제작 규칙
scripts/export.cjs	렌더링 + QA (scripts/에서 npm install 필요, 한 번)
references/intake.md	질문 라운드 + 기본값
references/line.md, facebook.md, tiktok.md	플랫폼별 구조, 제한, 클래스 맵
references/devices.md	프레임, 상태 표시줄, OS 차이점
references/realism-rules.md, qa-checklist.md, localization-th.md	품질 기준
references/screens/	날짜가 있는 실제 앱 스크린샷 + calibrate/ 복제본
references/typography-and-ratios.md	각 플랫폼이 실제로 사용하는 폰트, 측정된 크기, 미디어 비율
scripts/calibrate.cjs	실제 스크린샷 위에 키트 복제본 오버레이(측면/혼합/차이 + 밴드별 점수)