얻을 수 있는 것

  • 오프라인에서, 그리고 iframe 안에서도 작동하는 독립된 가격 섹션 하나
  • 배지, 기능 목록, 추천 요금제 리본, 요금제별 버튼이 있는 요금제 카드 두에서 네 개
  • 절약 문구와 연간 청구 안내가 있는 월간/연간 전환 스위치
  • 밝은 테마와 어두운 테마, 완성 파일용 정적 검사기
  • 선택: 견적을 확인한 뒤 PopNow로 만드는 스티커 일러스트 오림

이럴 때 좋아요

  • 인디 앱, 크리에이터 도구, 작은 SaaS 제품
  • 멤버십, 강좌, 뉴스레터 요금제
  • 친근하고 격식 없는 어조를 원하는 출시 페이지

이럴 때는 맞지 않아요

  • 긴 비교표가 있는 기업용 가격표
  • 격식 있거나 엄격하게 미니멀한 목소리의 브랜드

사용 방법

Claude·ChatGPT에서

PopNow 스킬 사용: “손그림 가격 섹션”(pricing-page-section). 할 일: 커피 시음 일지 Brewlog의 가격: 무료, 바리스타 월 $4 또는 연 $40, 카페용 로스터리 월 $12 또는 연 $120. 바리스타를 추천해 주세요.

코딩 에이전트에서

/popnow-pricing-page-section 커피 시음 일지 Brewlog의 가격: 무료, 바리스타 월 $4 또는 연 $40, 카페용 로스터리 월 $12 또는 연 $120. 바리스타를 추천해 주세요.

이어서 해 보기

우리 강조색으로 된 핸드드립 주전자 스티커를 견적 내고 오려 주세요.

Svelte 컴포넌트로 바꾸고, 다크 모드는 사이트 자체 테마 스위치가 조절하게 해 주세요.

미리 준비할 것

  • 요금제 이름, 월간과 연간 가격, 한도와 기능
  • 추천할 요금제와 각 버튼이 갈 곳
  • 체험판, 환불, 해지에 대한 솔직한 한 줄
  • 선택: 스티커 일러스트용 PopNow API 키

비슷한 스킬

전체 보기 →

평점

아직 평가가 없어요. 설치하셨다면 첫 평점을 남겨 주세요.

이 스킬 평가하기

자주 묻는 질문

프레임워크 없이도 연간 스위치가 작동하나요?

네. 각 가격에 월간과 연간 값이 데이터 속성으로 들어 있고, 몇 줄의 일반 자바스크립트가 값을 바꿉니다. 청구 주기가 하나뿐이라면 스위치를 지우면 됩니다.

손글씨 서체가 모든 기기에서 불러와지나요?

시스템에 이미 설치된 손글씨 서체를 대체 글꼴과 함께 쓰므로 아무것도 내려받지 않고 오프라인에서 작동합니다. 정확한 서체는 macOS, Windows, Android에 따라 조금씩 다릅니다.

PopNow는 여기서 무엇을 더하나요?

여백에 넣을 선택 사항인 스티커 일러스트입니다. 같은 잉크와 평면 색 느낌의 그림 하나를 만들고, PopNow 배경 제거 도구로 깔끔하게 오립니다. 각 실행은 먼저 견적을 내고, 동의한 뒤에만 시작합니다.

기존 사이트 안에 넣어도 되나요?

네. 모든 스타일은 .skp- 클래스 이름 아래에 범위가 제한되어 있고, 스킬이 섹션을 React, Vue, Svelte, Astro용 컴포넌트로 다시 만들며, 호스트 페이지가 테마를 맡습니다.

SaaS 가격 템플릿으로도 쓸 수 있나요?

네. 요금제, 월간과 연간 가격, 기능 행, '가장 인기' 배지가 하나의 데이터 블록에서 나오며, 대부분의 SaaS 가격 페이지가 만들어지는 방식과 같습니다. 가격 페이지 템플릿 전체로 쓰거나, 가격표 템플릿을 기존 페이지에 넣을 수 있습니다.