얻을 수 있는 것
- 23페이지짜리 제품 사이트를 담은 오프라인 HTML 파일 하나, 또는 내 프레임워크로 옮긴 버전
- 모델 전환기 히어로, 실제 비율의 라인업, 하드웨어 벤토, 흰색 사양 카드
- 갤러리, 전체 사양, 문의로 넘어가는 구성기가 있는 제품 페이지
- 오프라인 안전성, 구조, 남은 샘플 이름을 확인하는 검증 도구
- 선택: 먼저 가격을 보여 준 뒤 PopNow 제품 렌더링, 장면, 히어로 루프
이럴 때 좋아요
- 로봇, 전기자전거, 드론, 오디오, 카메라 브랜드
- 소규모 제품 가족의 출시 또는 카탈로그 사이트
- 작동하는 페이지로 프리미엄 리디자인을 제안할 때
이럴 때는 맞지 않아요
- 지금 결제를 받아야 하는 상점
- 상품이 수백 개인 카탈로그
- 따뜻하거나 장난스럽거나 소프트웨어만 파는 브랜드
사용 방법
Claude·ChatGPT에서
PopNow 스킬 사용: “하드웨어 제품 웹사이트”(hardware-product-website). 할 일: 우리의 세 가지 전기자전거 Arc 1, Arc 2, Arc Cargo의 사이트를 만들어 주세요. 가격, 주행 거리, 무게는 specs.csv에서 가져와 주세요.
코딩 에이전트에서
/popnow-hardware-product-website 우리의 세 가지 전기자전거 Arc 1, Arc 2, Arc Cargo의 사이트를 만들어 주세요. 가격, 주행 거리, 무게는 specs.csv에서 가져와 주세요.
이어서 해 보기
은색 배경에서 세 자전거의 스튜디오 사진을 생성하고, 세트 전체 견적을 먼저 알려 주세요.
자전거마다 경로 하나씩 해서 우리 Next.js 앱으로 옮겨 주세요.
미리 준비할 것
- 제품명, 코드, 가격, 중요한 사양
- 제품 사진, 또는 어울리는 세트를 만들 PopNow API 키
- 파트너, 팀, 문의, 납기에 쓸 실제 사실
비슷한 스킬
전체 보기 →3D 아바타 만들기
+3귀여운 봉제 인형 같은 3D 캐릭터를 브라우저에서 만들고 투명 PNG나 3D 페이지로 저장합니다.
캘린더 히트맵
+31년간의 일일 활동을 색 농도로 칠한 달력 격자로 보여 주고, 연속 기록, 합계, 키보드 탐색을 지원합니다.
AI SaaS 랜딩페이지
+3따뜻한 모래색 종이 위에 가는 가이드 선과 빗금 거터, 그리고 어시스턴트가 작업을 계획하는 실제 칸반 보드.
애니메이션 히어로 섹션
+3헤드라인 단어가 부드럽게 바뀌고, 버튼 두 개와 넓은 이미지 프레임을 갖춘 랜딩페이지 히어로.
셰이더 히어로 에이전시 웹사이트
+3아래쪽에 고정된 문장 뒤에서 살아 움직이는 주황빛 열기 셰이더 히어로, 알약 모양 내비게이션, 엇갈린 사례 그리드.
다크 모드 SaaS 랜딩페이지
+3모션이 풍부한 어두운 톤의 소프트웨어 마케팅 사이트를 독립된 HTML 파일 하나로 제공합니다.
디자이너 포트폴리오 웹사이트
+3차분한 회색 바탕 위에서 흐려지는 큰 헤드라인을 둘러싼 기울어진 카드 여섯 장, 붉은 인물 카드 하나, 에디토리얼 사례 연구.
개발자 포트폴리오 사이트
+3사례 연구, 글, 발표, 이력서, 문의 폼까지 갖춘 엔지니어용 다크 톤 개인 사이트.
에디토리얼 SaaS 웹사이트
+3네이비색 분할 히어로, 다큐멘터리 사진 옆의 다섯 줄 세리프 헤드라인, 기울어진 띠, 코발트 강조 색 하나.
글래스모피즘 웹사이트 템플릿
+3거의 검은 필름 위의 반투명 유리 알약 모양 버튼, 이탤릭 단어 하나가 들어간 큰 세리프 헤드라인, 이메일 입력.
인터랙티브 아키텍처 다이어그램
+3검증된 JSON 모델로 만든 오프라인 클릭형 시스템 다이어그램. 상자마다 근거를 확인할 수 있습니다.
인터랙티브 격자 히어로
+3커서 쪽으로 휘어지는 가는 선들의 어두운 격자. 클릭할 때마다 빛나는 고리가 퍼져 나갑니다.
지식 그래프 탐색기
+3프로젝트 메모를 오프라인에서 검색 가능한 그래프로 바꾸고, 모든 주장을 출처 줄까지 연결합니다.
KPI 대시보드 템플릿
+3따뜻한 종이 위, 빛나는 선 차트 위에 변화율 칩이 달린 KPI 타일 네 개, 세부 표, 목표 막대.
목업에서 만드는 랜딩 페이지
+3완성된 모습의 전체 페이지 디자인 세 개를 먼저 보고 하나를 고르면, 에이전트가 깔끔하고 반응형인 코드로 만듭니다.
매거진 웹사이트 템플릿
+3아티클, 주제, 작은 상점, 구독까지 갖춘 인쇄물 수준의 매거진 사이트를 HTML 파일 하나로.
파티클 애니메이션 히어로
+3따뜻한 종이 위의 문구 옆에서, 아이디어마다 모양이 바뀌고 스크롤하면 흩어지는 잉크와 청록색 점의 회전하는 구.
개인 브랜드 웹사이트
+3얇은 괄호 아래 따뜻한 종이 위로 자연스럽게 스며드는 인물 사진, 양옆에 놓인 가볍고 굵은 문장.
시네마틱 제품 런치 페이지
+3필름 조명을 받은 거의 검은 페이지. 떠다니는 빛 위의 세리프 타이틀 카드, 레터박스 야경 장면, 예약 폼.
관리자 대시보드 템플릿
+3차트, 표, 칸반, 캘린더를 갖추고 실제로 작동하는 백오피스 콘솔을 오프라인 HTML 파일 하나로.
SaaS 랜딩페이지 템플릿
+3작동하는 제품 콘솔, 가격표, 가입 페이지를 갖춘 차분하고 밝은 소프트웨어 마케팅 사이트.
스크랩북 포트폴리오 사이트
+3종이 소품으로 꾸민 여러 페이지짜리 온라인 이력서. 사례 연구와 인쇄용 이력서를 포함합니다.
스니커즈 쇼핑몰 템플릿
+3카탈로그, 상품 페이지, 장바구니, 데모 결제까지 갖춘 신발·의류 쇼핑몰을 HTML 파일 하나로.
워크플로 자동화 랜딩 페이지
+3흑연색 페이지, 왼쪽 정렬의 작은 헤드라인, 그 아래에서 실행되고, 재시도하며, 로그를 흘려보내는 살아 있는 노드 그래프.
자주 묻는 질문
로봇에만 맞나요?
아닙니다. 샘플 브랜드는 로봇 제조사이지만, 자전거, 드론, 스피커, 카메라, 악기 등 소규모 실물 제품 가족이라면 모두 맞습니다. 라인업 비율, 섹션, 라벨을 내 제품에 맞게 바꿀 수 있습니다.
주문도 받을 수 있나요?
구성기는 가격이 매겨진 사양을 만들어 견적 폼에 넘깁니다. 결제 서비스를 연결하기 전에는 결제를 받지 않으며, 페이지도 그렇게 밝힙니다.
제품 사진이 아직 없다면요?
제품을 적은 설명 하나로 일관된 세트를 생성할 수 있고, 총액을 먼저 견적 냅니다. 그 전에는 페이지에 이름표가 붙은 자리표시자 타일을 보여 줄 수 있습니다.
샘플에서 남은 것이 없는지 어떻게 확인하나요?
내장된 검증 도구가 샘플 브랜드, 제품, 사람, 파트너, 장소, 전화번호, 도메인 중 하나라도 남아 있으면 빌드를 실패시킵니다. 오프라인 안전성과 모든 링크가 페이지에 닿는지도 확인합니다.

