얻을 수 있는 것
- 1080p, 2K 또는 4K의 16:9, 1:1, 4:5, 9:16 PNG 목업, 투명 또는 배경 포함
- 휴대폰이 펼쳐지고, 접히고, 둘 다 하는 60fps MP4, 선택 사항인 카메라 흔들림
- 대화형 스튜디오 소스와 그 오프라인 단일 HTML 빌드
- 세 가지 본체 마감, 내장 배경 열 개, 영상 배경 지원
- 선택: 견적 후 PopNow 배경, 배경 루프, 접힘 효과음
이럴 때 좋아요
- 실제 스크린샷으로 만드는 앱 스토어, 출시, 소셜 이미지
- 릴스, 변경 기록, 랜딩 페이지용 짧은 기기 클립
- 큰 화면과 작은 화면에 반응형 웹 앱을 동시에 보여 주기
이럴 때는 맞지 않아요
- 특정 실제 휴대폰 모델의 목업
- 아직 없는 인터페이스를 지어내기
- 제목과 내레이션이 있는 완전한 런치 필름
사용 방법
Claude·ChatGPT에서
PopNow 스킬 사용: “휴대폰 목업 생성기”(phone-mockup-generator). 할 일: ./shots/dashboard.png를 휴대폰에 올리고, 펼친 상태에 은색 마감, 따뜻한 배경으로 해서 16:9와 4:5 PNG를 주세요.
코딩 에이전트에서
/popnow-phone-mockup-generator ./shots/dashboard.png를 휴대폰에 올리고, 펼친 상태에 은색 마감, 따뜻한 배경으로 해서 16:9와 4:5 PNG를 주세요.
이어서 해 보기
이제 열리고 닫히는 6초 클립을 만들고, 부드러운 경첩 클릭 소리를 넣어 주세요. 소리의 견적을 먼저 알려 주세요.
작은 화면에는 모바일 캡처 ./shots/today.png를 쓰고, 닫힌 상태의 9:16 버전을 만들어 주세요.
미리 준비할 것
- 큰 화면용 가로 스크린샷 또는 녹화(약 1.42:1)
- 선택: 작은 화면용 세로 파일
- Node 22와 헤드리스 내보내기용 Chrome
- 선택: 맞춤 배경, 루프, 소리용 PopNow API 키
비슷한 스킬
전체 보기 →흑백 스튜디오 인물 사진
+3평범한 사진을 차분한 흑백 스튜디오 인물 사진으로 바꾸되, 여전히 나처럼 보이게 합니다.
블로그 글 일러스트 세트
+3한 글의 세 단락마다 그 단락이 실제로 말하는 바를 보여 주는, 같은 스타일의 일러스트 세 장.
브랜드 키트 & DESIGN.md 생성기
+3짧은 브리프로 만드는 브랜드 키트. 대비를 확인한 팔레트, 공개 라이선스 글꼴, SVG 로고, 목업, 에이전트가 따르는 DESIGN.md를 담습니다.
자동차 단면 해부 포스터
+3일반 자동차의 측면 단면도. 시스템별 색 구분, 번호 마커, 원형 확대 창이 있습니다.
칠판 인포그래픽 메이커
+3정확한 짧은 문구, 분필 그림, 분명한 읽기 순서 하나를 담은 16:9 칠판 스타일 인포그래픽.
시네마틱 스토리보드 프레임
+3한 장면을 세 가지 방식으로 찍은 스토리보드 콘택트 시트 세 장. 연속성은 유지합니다.
일관된 컨셉 아트 세트
+3같은 가상 세계에 속한다는 것이 분명한 캐릭터, 소품, 배경.
귀여운 크레파스 낙서 아트
+3흰 종이 위의 사랑스럽게 서툰 크레파스 캐릭터. 삐뚤빼뚤한 선, 낙서 같은 채색, 선명한 파일, 스티커 컷아웃.
에디토리얼 선화 일러스트
+3블로그 헤더, 뉴스레터, 소셜 카드를 위한, 강조 색 하나를 쓴 여백 많은 검정 잉크 일러스트.
판화 스타일 아티클 커버
+3에세이마다 초현실적인 검정 잉크 판화 하나. 교차 해칭으로 가장자리까지 채우고, 큰 아이디어를 장면 하나로 보여 줍니다.
EV 플랫폼 분해도
+3전기차를 층층이 분해한 그림. 배터리, 모터, 객실, 차체를 색으로 나누고 지시선을 달았습니다.
제품 분해도 포스터
+3제품의 깔끔한 분해도 히어로 이미지. 사양표에서 가져온 정확한 부품 라벨이 있습니다.
판타지 지도 생성기
+3내 세계의 양피지, 아틀라스, 검은 선 지도. 모든 지명은 바르게 적히고, 격자는 정확히 맞습니다.
지역별 음식 풍미 지도
+3지역마다 작은 맛 차트를 하나씩 공통 눈금에 맞춘, 차분하게 그린 지도와 정직한 범례.
일러스트 도시 지도 메이커
+3동네나 도시의 손그림 스타일 지도. 중요한 부분은 정확하고, 라벨은 정확하게 적습니다.
잉크 스케치 스토리보드
+3짧은 이야기에서 만든 거친 검정 잉크 스토리보드 페이지. 열린 선, 여백, 패널마다 비트 하나.
라인아트 OG 이미지 메이커
+3차분한 링크 미리보기 이미지: 오프화이트 카드, 짧은 검정 헤드라인, 손으로 그린 잉크 캐릭터.
해양 생물학 연구 포스터
+3그려진 서식지 단면을 중심으로 한 넓은 연구 포스터. 번호 달린 종과 발견 차트가 있습니다.
사진 구도 연구
+3하나의 피사체를 서로 다른 구도 원리 세 가지로 찍은 사진풍 작업. 각각 다른 원리에 기대고 있습니다.
스케치노트 이미지 생성기
+3글이나 메모를 정확하고 검증된 라벨이 있는 손그림 4:3 스케치노트 한 장으로 바꿉니다.
소셜 커버와 썸네일 생성기
+3메시지 하나를 넣으면, OG 이미지, 게시물 커버, 영상 썸네일이 정확한 크기로 검증된 세트로 나옵니다.
자주 묻는 질문
실제 휴대폰 모델인가요?
아닙니다. 휴대폰은 코드로 그린 일반 접이식 기기이므로 어떤 제조사의 디자인이나 로고도 담고 있지 않습니다. 그래서 이미지에 다른 회사의 상표가 들어가지 않습니다.
무언가 설치해야 하나요?
Node 22와 Google Chrome(또는 Chromium이나 Edge)이 필요합니다. 스크립트는 npm 패키지를 쓰지 않습니다. 스튜디오를 로컬에서 제공하고 브라우저를 구동해 PNG와 MP4 파일을 내보냅니다.
화면에 영상도 나올 수 있나요?
네. 두 화면 모두 이미지와 함께 MP4, WebM, MOV를 받습니다. 내보내는 동안 녹화는 프레임 단위로 진행되므로 접힘과 동기화됩니다.
PopNow는 무엇을 추가하나요?
스튜디오가 그릴 수 없는 것들입니다. 제품에 맞춰 생성한 배경, 5초짜리 움직이는 배경, 클립의 소리. 모두 선택 사항이며 실행 전에 크레딧 견적을 보여 줍니다.