웹 에셋, 최적화 및 런칭은(는) 무엇을 하나요?

이미 존재하는 사이트의 마무리 작업을 위한 짧은 루틴입니다. futuristic-web-design 스킬의 시각적 요소와 배포 단계를 담고 있으며, 단독으로 실행할 수 있도록 패키징되었습니다.

../futuristic-web-design/이 이 스킬 옆에 있다면, 해당 파일의 상세 정보를 참조하세요: references/assets.md(프롬프트 및 ffmpeg 명령어), references/ship.md(점검 항목, 폼, 배포, 도메인 및 전체 런칭 체크리스트).

사용자가 요청한 부분만 수행하세요. 아래 각 제목은 독립적으로 사용 가능합니다.

파일을 웹에 맞게 준비

제너레이터나 카메라 출력은 웹에 올리기에 너무 무겁습니다. 모바일 데이터를 사용하는 방문자는 모든 바이트를 기다려야 하며, 노트북이 자체 디스크에서 읽을 때는 문제가 숨겨집니다.

ffmpeg 또는 sharp와 같은 도구를 설치하기 전에 승인을 받으세요. 일부 ffmpeg 빌드에는 WebP 인코더가 없습니다. cwebp 또는 sharp가 이미 설치되어 있다면 동일한 작업을 수행할 수 있습니다.

Next.js에서는 public/images/ 아래에 설명적인 이름으로 파일을 저장하세요. 일반 HTML 사이트에서는 페이지 옆에 images/ 폴더에 보관하세요: Vercel에서 프레임워크가 없는 사이트는 public/ 폴더만 제공하므로, 페이지 자체가 숨겨질 수 있습니다.

파일	목표
히어로 이미지	WebP, 최대 1920px 너비, 약 300 KB
기타 이미지	WebP, 최대 약 1000px 너비, 약 150 KB
히어로 비디오 (`hero.mp4`)	H.264 MP4, 최대 1080p, 오디오 제거, 4 MB 미만
포스터 (`hero-poster.webp`)	비디오의 첫 프레임

변경 전후의 크기 표로 마무리하여, 단순히 주장하는 것이 아니라 절감 효과를 보여주세요.

이미지 및 비디오 프롬프트 작성

이 프롬프트는 Google Flow 또는 다른 제너레이터에 적합합니다. 직접 생성할 수 있다면, 크레딧을 사용하기 전에 승인을 받으세요. 생성할 수 없다면, 프롬프트를 사용자에게 전달하고 명확히 표시된 플레이스홀더로 계속 진행하세요.

먼저 샷 리스트를 작성하세요. 생성하기 전에 에셋과 종횡비를 결정하세요: 원페이지 사이트의 경우 약 7개(히어로 비디오, 히어로 스틸, 세 개의 오퍼 샷, 스토리 이미지, 공유 이미지)입니다.
이미지 브리프, 순서대로 여섯 부분: 주제, 설정, 조명, 카메라(높이, 렌즈, 피사계 심도), 분위기와 팔레트, 형식(16:9 히어로, 4:5 제품). 빈 레이블을 요청하세요. 제너레이터는 문자를 왜곡하므로 실제 텍스트는 HTML에 속합니다.
스타일 라인. 첫 번째 승인된 이미지에서 조명, 카메라 및 분위기와 팔레트 문장을 가져와 이후 모든 프롬프트에 그대로 재사용하세요. 이것이 세트가 한 번의 촬영처럼 보이게 만드는 요소입니다.
히어로 비디오. 승인된 스틸을 애니메이션화하고, 하나의 작은 움직임을 설명하며, 다른 모든 것은 고정 카메라로 정지 상태를 유지한다고 명시하세요.
폭발 분해도 클립. 시작 스틸: 조립된 제품, 작고 중앙에 배치되며, 부품이 들어갈 빈 공간이 있습니다. 종료 스틸: 시작 스틸에서 처음부터 새로 만들지 않고, 부품이 하나의 직선 축을 따라 간격을 두고 배치되며 동일한 시점, 조명 및 배경을 사용합니다. 클립은 고정 카메라로 첫 번째 스틸에서 두 번째 스틸까지 실행됩니다.

생성된 에셋에 실제 사람이나 타사 로고를 포함하지 말고, 실제 비즈니스의 실제 제품을 보여주세요.

모바일, 세부 조정 및 속도

390px에서 모바일 점검. 읽을 수 있는 텍스트, 가장자리에 붙은 요소 없음, 약 44px의 터치 대상, 가로 스크롤 없음, 작동하는 메뉴 토글. 항목별 목록으로 수정한 후 다시 스크롤하세요. 데스크톱 브라우저를 축소한 것은 휴대폰을 근사할 뿐이므로, 실제 기기에서 확인을 요청하고 확인이 이루어지지 않았으면 그렇게 말하세요.
세부 조정 점검. 섹션 간 균일한 간격, 동일한 계층의 제목에 동일한 크기, 모든 대화형 요소에 호버 및 포커스 스타일, 남은 미리보기 경로 없음.
속도. 모바일 사전 설정으로 프로파일링하고 가장 영향력이 큰 세 가지 개선 사항을 큰 순서대로 나열하세요. 하나가 사용자가 중요하게 여기는 항목을 삭제하는 것을 의미하는 경우, 결정을 위해 플래그를 지정하세요.

사용자가 변경을 요청하지 않은 것을 변경하기 전에 발견한 내용을 먼저 나열하세요.

키

.env.local에 키를 보관하고 .gitignore에 나열하세요.
사이트 코드는 공개 키만 사용합니다. 비밀 키나 서비스 키는 클라이언트 코드에 절대 도달하지 않습니다.
코드와 git 히스토리에서 비밀을 검색하고, 확인한 항목을 보고하세요.
페이지 코드에서 제공되었거나 git에 커밋된 적이 있는 비밀은 노출된 것입니다. 리포지토리가 푸시되지 않은 경우에도 마찬가지입니다: 방문자가 페이지를 읽을 수 있었고, 히스토리는 모든 복사본과 미래의 모든 푸시와 함께 전달됩니다. 파일에서 제거한다고 해서 해결되지 않습니다. 값이 어떻게 보이든 관계없이 사용자에게 공급업체 대시보드에서 교체하라고 알리세요.

검색 및 공유

최대 60자의 제목과 최대 155자의 설명으로, 판매하는 것과 위치를 명시하세요. 브랜드 이름만으로는 낯선 사람에게 아무 의미가 없습니다.
public/images/share.webp에 1200x630의 공유 이미지를 설정하고, Open Graph 및 Twitter 이미지로 지정하세요.
파비콘, 사이트맵 및 robots 파일.
공유 이미지와 사이트맵이 제대로 작동하도록 프로덕션 도메인을 기본 URL로 설정하세요. 모르는 경우 사용자에게 물어보세요.

배포

사용자가 요청할 때만 배포하세요.

리포지토리를 Vercel에 연결하세요. 각 메인 브랜치로의 푸시는 프로덕션을 재배포합니다.
.env.local 값을 호스트의 프로젝트 설정에 입력하세요. 로컬에서 작동하고 프로덕션에서 깨지는 폼은 거의 항상 이 값이 누락된 경우입니다.
빌드가 실패하면 로그를 읽고 근본 원인을 수정하세요.
모바일 데이터를 사용하는 휴대폰에서 프로덕션 URL을 확인하세요: 페이지를 로드하고, 폼을 제출하고, 저장된 행을 확인하세요.
메시징 앱에 링크를 붙여넣어 미리보기 카드를 확인하세요.

정직하게 보고하세요: 무엇을 확인했는지, 확인할 수 없었던 것(실제 휴대폰, 프로덕션 도메인)과 사용자에게 남은 작업이 무엇인지 알리세요.

웹 에셋, 최적화 및 런칭