얻을 수 있는 것
- 글꼴과 이미지가 내장되어 네트워크 요청이 없는 HTML 파일 하나
- 셰이더 히어로, 고객사 마퀴, 스튜디오 띠, 엇갈린 작업 그리드, 검색 가능한 프로젝트 목록
- 사례마다 한 페이지, 그리고 저널, 개인정보, 약관, 404 화면
- 서비스 탭, 통화 전환이 있는 계약 플랜, 견적, 팀, FAQ, 프로젝트 의뢰 폼
- 선택: 크레딧 견적 후 PopNow가 만드는 스튜디오, 사례, 팀 사진과 사례 카드 루프
이럴 때 좋아요
- 디자인, 브랜딩, 웹, 모션, 3D 스튜디오
- 보여 줄 실제 프로젝트가 있는 프리랜서와 소규모 컨설팅 팀
- 차분하고 고급스러운 포트폴리오를 원하는 건축과 인테리어 사무소
이럴 때는 맞지 않아요
- 온라인 쇼핑몰이나 어둡고 네온이 강한 브랜드
- 헤드라인 뒤에 사진이나 영상이 필요한 페이지
- 완성된 작업을 보여 줄 것이 없는 사이트
사용 방법
Claude·ChatGPT에서
PopNow 스킬 사용: “셰이더 히어로 에이전시 웹사이트”(creative-agency-website). 할 일: 포르투에 있는 네 명 규모의 브랜드·웹 스튜디오 Quarrow의 사이트를 만들어 주세요. 프로젝트는 도자기 상점 리런치, 페리 시간표 앱, 빵집 아이덴티티입니다. 계약 형태는 Sprint, Launch, Retainer입니다.
코딩 에이전트에서
/popnow-creative-agency-website 포르투에 있는 네 명 규모의 브랜드·웹 스튜디오 Quarrow의 사이트를 만들어 주세요. 프로젝트는 도자기 상점 리런치, 페리 시간표 앱, 빵집 아이덴티티입니다. 계약 형태는 Sprint, Launch, Retainer입니다.
이어서 해 보기
아무것도 생성하기 전에 세 사례 연구의 사진과 팀 그리드 견적부터 알려 주세요.
페리 사례 카드를 히어로 사진으로 느린 영상 루프로 만들고, 먼저 가격을 알려 주세요.
미리 준비할 것
- 스튜디오 이름, 한 문장짜리 포지셔닝, 도시, 연락처
- 의뢰 내용, 한 일, 측정 가능한 결과 하나가 있는 프로젝트 2~6개
- 서비스, 고객이 고용하는 방식, 이끄는 사람들
- 선택: PopNow API 키 또는 내 스튜디오와 프로젝트 사진
비슷한 스킬
전체 보기 →3D 아바타 만들기
+3귀여운 봉제 인형 같은 3D 캐릭터를 브라우저에서 만들고 투명 PNG나 3D 페이지로 저장합니다.
캘린더 히트맵
+31년간의 일일 활동을 색 농도로 칠한 달력 격자로 보여 주고, 연속 기록, 합계, 키보드 탐색을 지원합니다.
AI SaaS 랜딩페이지
+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 파일 하나로.
SaaS 랜딩페이지 템플릿
+3작동하는 제품 콘솔, 가격표, 가입 페이지를 갖춘 차분하고 밝은 소프트웨어 마케팅 사이트.
스크랩북 포트폴리오 사이트
+3종이 소품으로 꾸민 여러 페이지짜리 온라인 이력서. 사례 연구와 인쇄용 이력서를 포함합니다.
스니커즈 쇼핑몰 템플릿
+3카탈로그, 상품 페이지, 장바구니, 데모 결제까지 갖춘 신발·의류 쇼핑몰을 HTML 파일 하나로.
워크플로 자동화 랜딩 페이지
+3흑연색 페이지, 왼쪽 정렬의 작은 헤드라인, 그 아래에서 실행되고, 재시도하며, 로그를 흘려보내는 살아 있는 노드 그래프.
자주 묻는 질문
셰이더 때문에 페이지가 느려지지 않나요?
해상도를 낮추고 픽셀 비율에 상한을 두어 렌더링합니다. 히어로가 화면을 벗어나거나 탭이 숨겨지면 멈추고, 동작 줄이기 설정에서는 정지 프레임 하나를 보여 줍니다. 같은 모습의 CSS 버전이 아래에 있어서 WebGL이 없어도 페이지가 완성되어 보입니다.
PopNow는 여기서 무엇을 생성하나요?
스튜디오 띠, 각 사례 연구, 팀의 사진을 한 아트 디렉션으로 만들고, 선택 사항으로 사례 카드 하나의 정지 이미지를 대신할 느린 루프를 만듭니다. 히어로 자체는 코드이므로 아무것도 필요하지 않습니다. 모든 실행은 크레딧 견적을 먼저 보여 주고, 동의해야만 시작합니다.
PopNow API 키 없이 쓸 수 있나요?
네. 내장된 스튜디오 사진은 중립적인 대체 이미지로 남길 수 있고, 사례 미디어는 고객사 색을 쓴 CSS 패널이 될 수 있으며, 견적에는 이니셜 아바타를 씁니다. 스킬은 아직 실제 사진이 필요한 자리를 목록으로 보여 줍니다.
주황색 강조 색을 바꿀 수 있나요?
네. 몇 개의 토큰과 셰이더 색 프리셋으로 바꿀 수 있습니다. 페이지는 강조 색 하나만 쓰고 보라색과 바이올렛 계열은 피하며, 검증 도구가 이를 확인합니다. 프로젝트의 브랜드 DESIGN.md는 그 토큰에 연결됩니다.