코드펜

-
“	The best place to build, test, and discover front-end code. 빌드, 테스트, 프론트엔드 코드를 찾는 가장 좋은 방법	”
	— 코드펜 홈페이지 문구

개요

온라인 상에서 코드를 작성할 수 있는 온라인 코드 편집기 사이트. HTML, CSS, 자바스크립트를 지원한다.

2012년 Alex Vazquez와 Tim Sabat, Chris Coyier가 공동 제작하여 시작하였으며, 블로그 등 다양한 곳에서 사용이 되고 있다.

코드를 펜(Pen)으로 부른다.

지원 언어

다음의 언어(토픽)을 지원한다.

• 리엑트(React)
• 뷰(Vue)
• 플러터(Flutter)
• Pug
• D3.js
• 텐서플로우 JS(TensorFlow.js)
• ZIM
• GSAP
• Zdog
• Tailwind CSS
• Sass
• anime.js
• Splitting.js

가격

기본적으로 무료이며, 비공개 등의 추가적인 기능이 필요할 시 PRO로 결제하면 된다.

	Free	Starter		Developer		Super
		Starter	Annual Starter	Developer	Annual Developer	Super	Annual Super
가격	0달러	12달러/월	8달러/월 (연간 96달러)	19달러/월	12달러/월 (연간 144달러)	39달러/월	26달러/월 (연간 312달러)
기능	무제한 공개 펜 생성 및 컬렉션 저장 가능 무제한 템플릿 사용 가능	Free 티어 기능 파일당 최대 5MB씩 총 2GB의 에셋 저장 가능 10개 프로젝트, 프로젝트당 50개 파일, 1개 펜 배포 가능 2명과 협동 모드(Collab Mode), 10명과 프로 모드(Professor Mode) 사용 가능 무제한 비공개 펜, 컬렉션, 프로젝트 생성 가능 무제한 커스텀 CSS 임베드 가능 광고 없음 로그인 없이 펜 디버그 가능 라이브 뷰(Live View) 가능		Starter 티어 기능 파일당 최대 10MB씩 총 10GB의 에셋 저장 가능 24개 프로젝트, 프로젝트당 150개 파일, 5개 펜 배포 가능 6명과 협동 모드(Collab Mode), 35명과 프로 모드(Professor Mode) 사용 가능 프로젝트에 개인 도메인 사용 가능		Developer 티어 기능 파일당 최대 15MB씩 총 20GB의 에셋 저장 가능 50개 프로젝트, 프로젝트당 300개 파일, 20개 펜 배포 가능 10명과 협동 모드(Collab Mode), 100명과 프로 모드(Professor Mode) 사용 가능

라이선스

공개되어 있는 펜(퍼블릭 펜)은 MIT 라이선스로 배포된다. 따라서 코드펜에 공개되어 있다면 자유롭게 사용하면 된다. 하지만 비공개(Private) 펜은 MIT 라이선스의 영향을 받지 않는다.