한 줄 평: HTML·CSS·JS 조각을 브라우저에서 바로 만들고 공유하는 프런트엔드 놀이터로, 공개 Pen은 무료로 무제한이지만 비공개 Pen과 에셋 호스팅은 PRO(연간 결제 시 월 US$8부터)가 필요합니다.
- 공개 Pen 무제한 무료
- 무료는 Pen당 파일 3개
- 비공개 Pen은 PRO
- 무료 플랜 광고 표시
- 직접 테스트 전
- ? 중국 접속 — 미확인
사용 전 확인
확인일 2026-09-28 · 공식 요금·도움말 페이지 기준 · 직접 사용 테스트 전
무료 플랜공개 Pen 무제한, Pen당 파일 3개
유료 시작가월 US$8 (연 US$96 청구, Starter)
비공개 PenPRO 전용
데이터 처리: 작성한 Pen은 CodePen 서버에 저장되며 무료 플랜의 Pen은 공개됩니다. 비공개 설정과 에셋 업로드는 PRO에서 쓸 수 있습니다.
데이터 시트
모든 항목에 어떻게 확인했는지 표시했습니다
| 무료 | 공개 Pen 무제한, Pen당 파일 3개, 광고 있음 공식 안내 |
|---|---|
| Starter | 월 US$8 (연 US$96 청구), 에셋 2GB, 협업 초대 5명 공식 안내 |
| Developer | 월 US$12 (연 US$144 청구), 에셋 25GB, 협업 10명 공식 안내 |
| Super | 월 US$26 (연 US$312 청구), 에셋 50GB, 협업 15명 공식 안내 |
| 비공개 Pen | PRO 회원만 생성 가능 공식 안내 |
| 중국 접속 | — 미확인 |
이럴 때 살펴보세요
CSS 효과나 작은 JS 데모를 만들어 링크 하나로 공유하거나 블로그에 임베드하고 싶을 때 고릅니다.
확인할 점
무료 플랜의 Pen은 모두 공개되므로 회사 코드나 비공개 작업은 올리지 마세요.
사용 방법
- codepen.io에서 새 Pen을 엽니다.
- HTML, CSS, JS 칸에 코드를 작성하면 미리보기가 바로 갱신됩니다.
- 저장한 뒤 링크나 임베드 코드로 공유합니다.
대안
확인일: 2026-09-28 · 공식 정보를 정리했으며 아직 직접 테스트하지 않았습니다. 바뀐 내용을 발견하면 알려주세요. · CodePen pricing (official)