프런트엔드 개발자라면 한 번쯤 써봤을 코드펜(CodePen)이 2.0 버전을 공개했어요. 공동 창업자 크리스 코이어(Chris Coyier)가 직접 블로그로 소식을 알렸는데요. 코드펜이 처음 나온 게 2012년이니까, 10년 넘게 쓰인 서비스가 사실상 처음으로 밑바닥부터 다시 만들어진 셈이에요. 코드펜 팀이 몇 년에 걸쳐 예고해온 차세대 에디터가 드디어 세상에 나온 거죠.
코드펜이 뭐냐면
혹시 처음 들어보는 분을 위해 설명하면, 코드펜은 브라우저에서 HTML, CSS, 자바스크립트를 바로 작성하고 결과를 실시간으로 확인할 수 있는 서비스예요. 뭔가 설치할 필요 없이 브라우저 탭 하나만 열면 바로 코딩을 시작할 수 있어요. 이렇게 만든 작업물을 '펜(Pen)'이라고 부르는데, 링크 하나로 공유할 수 있어서 CSS 애니메이션 데모, 버그 재현 코드, 인터랙션 실험 같은 걸 주고받는 사실상의 표준 놀이터가 됐죠. 참고로 크리스 코이어는 CSS-Tricks를 만든 사람이기도 해요. 전 세계 프런트엔드 개발자들이 CSS 배울 때 한 번쯤 거쳐 간 그 사이트요.
2.0에서 뭐가 달라졌냐면
기존 코드펜 에디터의 구조는 단순했어요. HTML, CSS, JS 세 개의 패널이 고정돼 있고, 각각 한 덩어리씩 코드를 넣는 방식이었죠. 간단한 데모에는 완벽했지만, 요즘 프런트엔드 개발과는 거리가 있었어요. 실제 개발은 파일을 여러 개로 쪼개서 하고, 컴포넌트를 임포트하고, 빌드 도구를 거치잖아요. 2.0의 핵심 변화가 바로 이 지점이에요. 세 칸짜리 고정 틀에서 벗어나 진짜 파일 기반으로 작업할 수 있게 된 거예요. 파일을 원하는 대로 만들고 구성해서, 요즘 개발 방식 그대로 브라우저 안에서 굴릴 수 있게 됐어요.
이게 왜 큰 공사냐면, 단순히 UI를 바꾸는 게 아니라 코드펜의 데이터 모델 자체를 갈아엎는 일이거든요. 수천만 개의 기존 펜과 호환성을 유지하면서 완전히 다른 구조로 옮겨야 하니, 달리는 기차의 바퀴를 갈아 끼우는 작업인 셈이에요. 코드펜 팀이 이 리뉴얼을 몇 년 동안 조심스럽게 진행해온 이유이기도 하고요. 오래된 서비스를 운영해본 분이라면 이 마이그레이션이 얼마나 살 떨리는 일인지 아실 거예요.
브라우저 IDE 판에서의 위치
사실 '브라우저에서 코딩하기' 판은 그동안 경쟁이 치열해졌어요. StackBlitz는 WebContainers라는 기술로 Node.js를 통째로 브라우저 안에서 돌려버렸고, CodeSandbox는 클라우드 개발 환경 쪽으로 방향을 틀었고, Replit은 AI 에이전트가 앱을 통째로 만들어주는 쪽으로 갔죠. 이 틈에서 코드펜의 포지션은 조금 달라요. 풀스택 개발 환경이 되려는 게 아니라, 프런트엔드 아이디어를 가장 빠르게 실험하고 보여주는 '스케치북'의 자리를 지키는 거예요. 2.0은 그 스케치북을 현대 개발 방식에 맞게 업그레이드한 거고요. AI가 코드를 뚝딱 만들어주는 시대에도, 결과물을 눈으로 확인하고 직접 만지작거리며 배우는 공간의 가치는 오히려 커지고 있거든요.
한국 개발자에게는
실무에서 바로 써먹을 곳이 많아요. 첫째, 버그 리포트할 때요. 라이브러리 이슈를 올릴 때 최소 재현 코드를 코드펜 링크로 첨부하면 해결 속도가 완전히 달라져요. 말로 열 줄 설명하는 것보다 재현 링크 하나가 훨씬 강력하거든요. 둘째, 기술 면접이나 포트폴리오예요. CSS 인터랙션이나 컴포넌트 데모를 링크 하나로 보여줄 수 있으니까요. 셋째, 학습이에요. 다른 사람의 펜을 포크해서 값을 바꿔가며 뜯어보는 것만큼 빠른 프런트엔드 공부법도 드물거든요. 파일 기반이 된 2.0에서는 실제 프로젝트 구조에 가까운 예제도 다룰 수 있으니 활용 폭이 더 넓어졌어요.
정리하면
한 줄 정리: 프런트엔드의 오래된 놀이터가 요즘 개발 방식에 맞춰 완전히 새 옷을 입었어요. 여러분은 코드 실험할 때 어디를 쓰세요? 코드펜, StackBlitz, 아니면 그냥 로컬에 vite 프로젝트 하나 파시나요?
🔗 출처: Hacker News