CodePen은 브라우저 기반의 프론트엔드 코드 에디터 플랫폼입니다. HTML·CSS·JS를 입력하면 실시간으로 결과를 확인할 수 있으며, 작성한 'Pen'을 공유 링크로 배포하거나 커뮤니티에서 다른 개발자의 작품을 탐색할 수 있습니다. 아이디어 프로토타이핑·버그 재현·포트폴리오 작성에 널리 사용됩니다.
주요 기능
💻 HTML·CSS·JS 에디터
⚡ 실시간 미리보기
🔗 공유 링크
📦 외부 라이브러리 추가
🎨 CSS 전처리기 지원
🌐 커뮤니티 탐색
📱 반응형 테스트
💾 포크·저장
💡 Tips
JS Pen에서 외부 CDN 라이브러리(React, Vue, GSAP 등)를 Settings > JS에서 간편하게 추가할 수 있습니다.
디버깅 시 console.log를 사용하면 하단 콘솔 패널에서 출력값을 바로 확인할 수 있습니다.
커뮤니티의 인기 Pen을 Fork해 코드를 뜯어보고 수정하면서 학습하는 것이 효과적입니다.
자주 묻는 질문
무료로 사용할 수 있나요?
기본 기능은 무료입니다. 비공개 Pen, 협업 기능, 에셋 호스팅 등은 유료 플랜(Pro $8/월~)이 필요합니다.
React나 Vue도 사용할 수 있나요?
네, Settings에서 Babel 전처리기를 활성화하면 JSX를 포함한 React 코드를 실행할 수 있습니다. Vue, Alpine.js 등 외부 라이브러리도 CDN으로 추가 가능합니다.
포트폴리오로 활용할 수 있나요?
네, 완성된 Pen의 공개 링크를 포트폴리오에 포함시키거나, 채용 과정에서 코딩 능력 시연에 활용할 수 있습니다.