CodePen 은 브라우저 안의 겉모습 편집기, 다 쓰면 한 번에 주소로 낸다
요약
브라우저 안에서 겉모습을 만드는 편집기이자 만드는 사람들의 모임으로, 세 판에 HTML 과 CSS 와 JavaScript 가 나란히 놓이고 고친 곳이 곧 미리보기에 나타난다. 다 쓴 것은 한 번에 공개 주소가 된다.
추천- 이름
- CodePen
- 버전
- 20261010
- 요금
- 무료
- 오픈소스
- 비오픈소스
- 운영체제
- Web
- 공식 사이트
- https://codepen.io/
- 업데이트
- 2026-10-11 10:42
겉모습 코드를 조금 쓸 때 시간을 먹는 것은 코드 자체가 아닌 경우가 많다. 열기까지의 준비의 연속이다. 환경을 설치하고 도구 줄을 잇고 둘 곳을 찾는다. 어느 단도 생각을 뒤로 밀어낸다.
세 판과 하나의 미리보기
CodePen 은 겉모습을 만드는 데 필요한 가장 작은 고리를 브라우저로 옮긴다. 화면을 열면 Pen 하나가 나온다. 세 판에 HTML 과 CSS 와 JavaScript 가 나뉘어 놓이고 고친 곳이 곧 미리보기에 나타난다. 편집 도구를 설치할 필요도, 명령 줄과 마주할 필요도, 설정 파일을 풀어 헤칠 필요도 없다. 공식은 이 대목을 담백하게 적는다. 설치할 것이 없고 마주할 명령 줄도 없으며 얽히는 설정도 없다.
Pen 에 들어가는 것은 이 셋에 그치지 않는다. 파일과 폴더를 더 겹쳐 흩어진 견본을 한 화면의 구조로 키울 수 있다. Sass 나 TypeScript 처럼 미리 손질이 필요한 쓰기 방식은 안에 갖춘 변환기가 맡으므로 손안에 도구 줄을 먼저 세우지 않아도 된다. 빈 곳에서 시작하기 싫으면 모임의 작품이나 직접 남긴 본보기를 대입하고, 그것을 기본으로 두면 새 Pen 이 늘 익숙한 자리에서 시작한다.

쓴 것이 어디에 놓이는가
작품은 계정 안에 남는다. 공개 Pen 은 내 화면에 놓여 남이 읽고 간직하고 모임 안에서 찾을 수 있다. 아직 모양이 없는 생각은 먼저 보이기 설정으로 접어 둔다. 수가 늘면 모음으로 갈래를 짓는다. 값을 내는 단에는 재료 보관도 붙어, 그림과 양식, 스크립트는 물론 소리와 영상까지 판에 끌어 넣으면 올라가고, HTTPS 와 캐시, 다른 출처에서의 참조를 갖춘 주소를 돌려준다. 어느 Pen 에서든 부를 수 있어 조용한 재료를 둘 곳을 따로 찾는 단이 사라진다.
공개 단은 한 번의 조작으로 줄어든다. 어떤 Pen 이든 열 수 있는 주소가 되고, 서버를 마련할 필요도 이름 풀이의 자잘한 일에 손댈 필요도 없다. 누구에게 보일지도 스스로 정한다. 모두 공개, 숨기기, 통과 문구 한 겹, 또는 나만 보도록 닫기.
무료와 값을 내는 단의 경계
무료의 가장자리는 분명하다. 공개 Pen 은 수에 제한이 없지만 하나에 들어가는 파일은 셋까지이고 내용은 처음부터 공개다. 숨긴 Pen 과 숨긴 모음, 재료 보관은 값을 내는 단에서 시작하며, 단이 오를수록 한 Pen 에 들어가는 파일 수와 재료 크기, 보관 총량이 느슨해진다.
항목 | 무료 | Starter | Developer | Super |
|---|---|---|---|---|
달 값 | $0 | $8 | $12 | $26 |
공개 Pen 수 | 무제한 | 무제한 | 무제한 | 무제한 |
Pen 하나의 파일 | 3 | 50 | 150 | 300 |
숨긴 Pen | 안 됨 | 됨 | 됨 | 됨 |
재료 보관 | — | 2 GB | 25 GB | 50 GB |
함께 하는 사람 | — | 5 | 10 | 15 |
해로 내면 달로 내는 것보다 줄어든다. Starter 는 해 96 달러, Developer 는 144 달러, Super 는 312 달러다. 접점 몫도 단에 따라 올라 무료는 한 시간에 100 번 요청, 값을 내는 단은 3000 번이 된다. 판 2.0 에서 화면과 흐름을 한 차례 손보았으니 새 능력의 세부는 공식 갱신 설명을 보는 편이 정확하다.
어떤 문제를 푸는가
겉모습 일에는 손안에 프로젝트를 세울 값어치가 없는 코드가 반드시 있다. 어떤 너비에서 짜임이 어떻게 보이는지 시험하고, 남이 알린 양식 문제를 다시 만들어 보고, 동료에게 옮겨 가는 움직임을 보여 주고, 아니면 나중에 다시 쓸 한 조각을 적어 둔다. 어느 쪽이든 코드가 짧고 목숨도 짧은데, 결과는 곧바로 보여야 하고 그대로 건넬 주소도 있어야 한다.
그릇의 약한 곳도 그만큼 또렷하다. 겉모습을 그리는 층을 향해 있어 뒤에서 도는 온전한 서비스는 돌릴 수 없다. 무료 Pen 은 파일이 셋까지라 조금 큰 견본은 곧 천장에 닿는다. 내용이 처음부터 공개라는 점도 염두에 둔다. 아직 끝나지 않은 일은 먼저 보이는 범위를 맞춘 뒤 써야 한다. 떠오른 생각의 확인과 나눔의 입구로 두고, 오래 손질이 필요한 일은 손안 보관에 남기는 것이 자연스러운 분담이다.
도구가 턱을 낮추는 방식은 할 수 있는 일을 늘리는 것이 아니라 그 앞에 놓인 단을 지우는 것인 경우가 많다. 주소를 열면 코드를 쓸 수 있다면, 생각이 화면에 닿기까지 남는 비용은 키를 두드리는 일뿐이다.
쓰임의 권고. 짧은 확인과 견본은 손안 환경을 꺼내지 말고 새 Pen 을 연다. 남에게 건넬 때는 공개 기능으로 주소를 만들어 상대가 열기만 하면 되게 한다. 속내가 담긴 조각은 쓰기 전에 보이는 범위를 먼저 맞춘다. 같은 주제로 여러 번 시험한다면 본보기를 하나 남겨 두면 매번 같은 자리에서 시작한다.