

얻을 수 있는 것
- 글꼴과 이미지가 내장되어 네트워크 요청이 없는 HTML 파일 하나
- 제품 콘솔, 기능 그리드, 투어 탭, 설치 코드, 후기, 가격이 있는 홈페이지
- 회원가입, 로그인, 영업 문의, 릴리스 노트, 가동 상태, 약관, 404 화면 등 추가 페이지
- 라이트·다크 테마와 링크, 폼, 남은 샘플을 검사하는 검증 도구
- 크레딧 견적 후 PopNow로 생성하는 사진(선택)
이럴 때 좋아요
- 스타트업 홈페이지와 SaaS 마케팅 사이트
- 요금제 비교가 있는 가격 페이지
- 개발자 도구나 API 제품 출시
이럴 때는 맞지 않아요
- 온라인 쇼핑몰과 포트폴리오
- 모든 섹션에 강렬한 색을 원하는 브랜드
- 긴 에디토리얼이나 블로그 사이트
사용 방법
Claude·ChatGPT에서
PopNow 스킬 사용: “SaaS 랜딩페이지 템플릿”(saas-landing-page). 할 일: 소규모 재무팀을 위한 인보이스 대사 도구 Ledgerline의 홈페이지를 만들어 주세요. 요금제: Starter 무료, Team 월 $29, Scale 월 $99.
코딩 에이전트에서
/popnow-saas-landing-page 소규모 재무팀을 위한 인보이스 대사 도구 Ledgerline의 홈페이지를 만들어 주세요. 요금제: Starter 무료, Team 월 $29, Scale 월 $99.
이어서 해 보기
생성하기 전에 고객 사례 인물 사진 한 장과 3x3 후기 그리드 견적부터 알려 주세요.
상태 페이지는 빼고 변경 기록을 공개 로드맵으로 바꿔 주세요.
미리 준비할 것
- 제품명, 대상 고객, 약속하는 핵심 성과 하나
- 기능 4–6개와 실제 한도가 있는 요금제 2–4개
- FAQ 답변, 정직한 수치, 사용 가능한 인용문
- 선택: PopNow API 키나 직접 찍은 사진
비슷한 스킬
전체 보기 →3D 아바타 만들기
+3귀여운 봉제 인형 같은 3D 캐릭터를 브라우저에서 만들고 투명 PNG나 3D 페이지로 저장합니다.
캘린더 히트맵
+31년간의 일일 활동을 색 농도로 칠한 달력 격자로 보여 주고, 연속 기록, 합계, 키보드 탐색을 지원합니다.
AI SaaS 랜딩페이지
+3따뜻한 모래색 종이 위에 가는 가이드 선과 빗금 거터, 그리고 어시스턴트가 작업을 계획하는 실제 칸반 보드.
애니메이션 히어로 섹션
+3헤드라인 단어가 부드럽게 바뀌고, 버튼 두 개와 넓은 이미지 프레임을 갖춘 랜딩페이지 히어로.
셰이더 히어로 에이전시 웹사이트
+3아래쪽에 고정된 문장 뒤에서 살아 움직이는 주황빛 열기 셰이더 히어로, 알약 모양 내비게이션, 엇갈린 사례 그리드.
다크 모드 SaaS 랜딩페이지
+3모션이 풍부한 어두운 톤의 소프트웨어 마케팅 사이트를 독립된 HTML 파일 하나로 제공합니다.
디자이너 포트폴리오 웹사이트
+3차분한 회색 바탕 위에서 흐려지는 큰 헤드라인을 둘러싼 기울어진 카드 여섯 장, 붉은 인물 카드 하나, 에디토리얼 사례 연구.
개발자 포트폴리오 사이트
+3사례 연구, 글, 발표, 이력서, 문의 폼까지 갖춘 엔지니어용 다크 톤 개인 사이트.
에디토리얼 SaaS 웹사이트
+3네이비색 분할 히어로, 다큐멘터리 사진 옆의 다섯 줄 세리프 헤드라인, 기울어진 띠, 코발트 강조 색 하나.
글래스모피즘 웹사이트 템플릿
+3거의 검은 필름 위의 반투명 유리 알약 모양 버튼, 이탤릭 단어 하나가 들어간 큰 세리프 헤드라인, 이메일 입력.
하드웨어 제품 웹사이트
+3은색 스튜디오 사진 위에 크고 가는 모델명, 반투명 사양 카드, 실제 비율의 제품 라인업, 하드웨어 벤토.
인터랙티브 아키텍처 다이어그램
+3검증된 JSON 모델로 만든 오프라인 클릭형 시스템 다이어그램. 상자마다 근거를 확인할 수 있습니다.
인터랙티브 격자 히어로
+3커서 쪽으로 휘어지는 가는 선들의 어두운 격자. 클릭할 때마다 빛나는 고리가 퍼져 나갑니다.
지식 그래프 탐색기
+3프로젝트 메모를 오프라인에서 검색 가능한 그래프로 바꾸고, 모든 주장을 출처 줄까지 연결합니다.
KPI 대시보드 템플릿
+3따뜻한 종이 위, 빛나는 선 차트 위에 변화율 칩이 달린 KPI 타일 네 개, 세부 표, 목표 막대.
목업에서 만드는 랜딩 페이지
+3완성된 모습의 전체 페이지 디자인 세 개를 먼저 보고 하나를 고르면, 에이전트가 깔끔하고 반응형인 코드로 만듭니다.
매거진 웹사이트 템플릿
+3아티클, 주제, 작은 상점, 구독까지 갖춘 인쇄물 수준의 매거진 사이트를 HTML 파일 하나로.
파티클 애니메이션 히어로
+3따뜻한 종이 위의 문구 옆에서, 아이디어마다 모양이 바뀌고 스크롤하면 흩어지는 잉크와 청록색 점의 회전하는 구.
개인 브랜드 웹사이트
+3얇은 괄호 아래 따뜻한 종이 위로 자연스럽게 스며드는 인물 사진, 양옆에 놓인 가볍고 굵은 문장.
시네마틱 제품 런치 페이지
+3필름 조명을 받은 거의 검은 페이지. 떠다니는 빛 위의 세리프 타이틀 카드, 레터박스 야경 장면, 예약 폼.
관리자 대시보드 템플릿
+3차트, 표, 칸반, 캘린더를 갖추고 실제로 작동하는 백오피스 콘솔을 오프라인 HTML 파일 하나로.
스크랩북 포트폴리오 사이트
+3종이 소품으로 꾸민 여러 페이지짜리 온라인 이력서. 사례 연구와 인쇄용 이력서를 포함합니다.
스니커즈 쇼핑몰 템플릿
+3카탈로그, 상품 페이지, 장바구니, 데모 결제까지 갖춘 신발·의류 쇼핑몰을 HTML 파일 하나로.
워크플로 자동화 랜딩 페이지
+3흑연색 페이지, 왼쪽 정렬의 작은 헤드라인, 그 아래에서 실행되고, 재시도하며, 로그를 흘려보내는 살아 있는 노드 그래프.
자주 묻는 질문
왜 제품을 스크린샷이 아닌 그려진 콘솔로 보여 주나요?
HTML과 SVG로 만든 콘솔은 선명하게 유지되고, 두 테마에 모두 어울리며, 호버와 기간 전환에 반응합니다. 새 스크린샷 없이도 내 제품의 개체와 숫자에 맞게 다시 꾸밀 수 있습니다.
여기서 PopNow는 무엇을 생성하나요?
사진만 생성합니다. 고객 사례 인물 사진, 에디토리얼 이미지 한 장, 그리드 이미지 한 장에서 잘라 낸 후기 아바타, 그리고 선택적으로 팀 사진이나 소셜 미리보기 카드입니다. 실행할 때마다 크레딧 견적을 보여 주고, 동의한 뒤에만 시작합니다.
PopNow API 키 없이도 쓸 수 있나요?
네. 후기는 이니셜 칩으로 대신하고, 에디토리얼 사진은 제품 카드로 바꿀 수 있으며, 포함된 중립적인 인물 사진을 새 이름으로 쓸 수 있습니다.
내 Next.js나 Astro 프로젝트 안에서도 작동하나요?
네. 스킬이 프로젝트를 살펴보고, 단일 파일 대신 같은 섹션을 내 스타일 설정에 맞춘 컴포넌트와 실제 라우트로 다시 만듭니다.

