웹 코딩에 조금이라도 관심이 있다면 코드 플레이그라운드(code playground)를 적어도 한 번쯤은 사용해 봤을 것입니다. 일반적인 코드 편집기와 달리, 백엔드 서버 설정 걱정 없이 코드를 자유롭게 테스트할 수 있는 공간이죠. 대표적으로 CodePen과 JSFiddle이 가장 널리 알려져 있지만, 사실 이 외에도 수많은 대안들이 존재합니다.
간단한 HTML/CSS/JavaScript 앱을 빠르게 만들어 실험해 보는 것이 목적이라면 어떤 플레이그라운드를 선택하든 큰 차이는 없습니다. 하지만 실시간 협업 코딩, React나 Vue 같은 JS 프레임워크 지원, 백엔드 지원, 활발한 커뮤니티 등 더 많은 기능이 필요하다면 여러 도구를 꼼꼼히 비교해 보는 것이 좋습니다.
CodePen
프론트엔드 코드 플레이그라운드 중 가장 인기 있는 서비스를 꼽으라면 단연 CodePen입니다. 직관적이고 사용하기 쉬우며, 규모 있고 활기찬 커뮤니티를 보유하고 있어 웹 페이지에 실행 가능한 코드를 삽입하는 표준으로 자리 잡았습니다. 빠른 자동 업데이트와 유연한 화면 분할 기능 덕분에 CSS 애니메이션 프로젝트에서 특히 인기가 높습니다. 또한 CSS/JS 전처리기를 지원하고, CDNjs를 통해 제공되는 React, Vue 등 외부 스크립트나 다른 펜(pen)과의 연동도 손쉽게 가능합니다.
전반적으로 프론트엔드 프로젝트와 포트폴리오용으로는 최고의 선택지라고 할 수 있습니다. 다만 백엔드 개발에는 부적합하며, 협업 코딩, 개별 펜이 아닌 멀티 프로젝트 관리, 페이지 전체 라이브 미리보기(일부 영역 미리보기는 무료) 같은 기능은 유료 Pro 구독이 필요합니다.
JSFiddle
프론트엔드 플레이그라운드계의 원조격인 JSFiddle은 이름 그대로 JavaScript 중심으로 설계되어, JS 관련 기능은 기본적으로 충실하지만 HTML/CSS 지원은 상대적으로 약합니다(예를 들어 Sass는 기본 지원하지만 Less는 지원하지 않습니다). 그러나 약간의 설정만 거치면 필요한 HTML/CSS/JS 기능을 모두 추가할 수 있고, 코드 힌트와 자동 새로고침을 지원하기 때문에 종합적인 코딩 능력 면에서는 오히려 CodePen보다 나을 수도 있습니다.
JSFiddle의 가장 큰 장점은 음성 및 텍스트 채팅까지 포함된 협업 모드를 무료로 제공한다는 점입니다. 여러 명이 동시에 코드 작업이 가능하죠. 다만 흥미로운 프로젝트를 소개하는 커뮤니티 기능이 부족해 이 부분에서는 CodePen에 비해 아쉬움이 남습니다.
정리하면, JavaScript 위주의 프로젝트를 진행하거나 협업 코딩이 필요하다면 JSFiddle이 훌륭한 선택입니다. 마음에 드는 점이 없다면 아래 '기타 플레이그라운드' 목록에서 유사한 대안을 찾아보세요.
Glitch
단순히 프론트엔드만 가지고 놀고 싶은 것이 아니라, 완전한 풀스택 웹 앱을 만들고 싶다면 어떻게 해야 할까요? 대부분의 코드 플레이그라운드가 정적 웹 페이지 생성에 그치지만, Glitch는 저장 공간과 시간당 4,000회 요청 처리량을 제공하고 Node.js 서버 측 코드 실행도 손쉽게 지원합니다. 무려 0원이라는 파격적인 가격으로 경험 수준과 관계없이 소규모 프로젝트를 만들고 즉시 배포할 수 있습니다.
그 밖에도 매력적인 기능이 가득합니다. 협업 코딩, 버전 관리('되감기' 기능), 풍부한 학습 리소스, GitHub 연동, 간편한 임베드, 친근한 커뮤니티, 리믹스해서 놀 수 있는 수많은 프로젝트, 심지어 Visual Studio 연동까지 지원합니다. 프론트엔드 코딩 인터페이스는 다른 플레이그라운드만큼 세련되지 않을 수 있지만, 전체적인 기능성은 손색이 없습니다. 웹 앱을 빠르게 구축·배포하는 방법을 찾고 있거나 배우고 싶다면 Glitch가 최고의 출발점입니다.
CodeSandbox
CodeSandbox는 Glitch와 같은 범주에 속하지만 조금 더 복잡하고 기능이 풍부한 도구입니다. Glitch가 강력한 기능 위에 미니멀한 인터페이스를 얹었다면, CodeSandbox는 VS Code를 구동하는 바로 그 Monaco Editor를 사용해 모든 기능을 그대로 노출합니다. 따라서 VS Code에 익숙한 개발자라면 CodeSandbox에서도 편안하게 작업할 수 있습니다.
매우 유연하고 커스터마이징이 자유로우며 오픈소스입니다. 완전한 웹 앱 배포(Glitch보다 몇 단계 더 복잡하지만)가 가능하고 파일 호스팅을 제공하며, 커뮤니티 분위기도 좋습니다. 반복 작업을 대신 처리해 주어 개발자는 순수하게 코드 작성과 배포에만 집중할 수 있습니다. GitHub 및 VS Code 연동, Emmet(약어 확장 도구) 등 초보자부터 고급 사용자까지 모두 만족시킬 기능이 많습니다. 가볍게 실험하기에는 과할 수 있지만, CodePen으로는 감당하기 어려운 규모의 프로젝트가 있고 학습 곡선을 감수할 의향이 있다면 CodeSandbox를 추천합니다.
Repl.it
Repl.it(현재 Replit)을 마지막에 소개하는 것은 선호도 때문이 아니라, 이 도구가 완전히 별개의 카테고리에 속하기 때문입니다. Python부터 LOLCODE(롤캣의 프로그래밍 언어!)에 이르기까지 방대한 언어를 지원하며, 프론트엔드와 백엔드 코드를 모두 다룰 수 있습니다. 사이트와 앱 배포, 긴밀한 GitHub 통합, 대규모 활발한 개발자 커뮤니티까지 갖추고 있으면서도, 그 강력함을 의심하게 만들 만큼 직관적인 인터페이스를 자랑합니다.
협업 코딩부터 임베딩까지 이 목록의 다른 플레이그라운드에서 기대할 수 있는 기능을 모두 갖추고 있으며, 여전히 프로토타이핑과 코드 공유 도구로 주로 쓰이지만 안정적인 인터넷 연결만 있다면 대부분의 중소규모 프로젝트를 감당할 역량이 충분합니다. 단순 프론트엔드 디자인 작업이나 코딩 입문 단계에는 다소 과할 수 있지만, 정기적으로 프로그래밍을 한다면 탐험해 볼 가치가 충분합니다.
그 밖의 훌륭한 플레이그라운드들
위에서 소개한 도구들은 개인적으로 즐겨 사용하는 선택지이지만, 그 외에도 훌륭한 도구가 많습니다. 모두 기본적인 기능은 충실히 갖추고 있으며, 각자 고유한 강점으로 서로 다른 니즈를 충족합니다. 많은 도구가 JSFiddle에서 영감을 받았기 때문에, JSFiddle의 대안을 찾고 있다면 아래 목록에서 찾을 수 있을 겁니다.
- Liveweave: JSFiddle과 비슷하지만 디자인 지향적입니다. 내장 CSS/컬러 생성 도구와 벡터 에디터가 특히 돋보입니다.
- JSitor: JSFiddle과 사용감이 매우 유사한 대안으로, 안드로이드/iOS 앱을 제공하는 점이 특징입니다.
- StackBlitz: VS Code의 Monaco Editor로 만든 훌륭한 브라우저 기반 IDE입니다. CodeSandbox와 비슷하지만 백엔드 지원이 없어 좀 더 단순합니다.
- Flems: 필수 기능만 담은 미니멀한 플레이그라운드입니다. 불필요한 요소 없이 집중해서 작업하고 싶을 때 완벽합니다.
- JSBin: JSFiddle의 더 미니멀한 버전입니다.
- CSSDeck: 아주 단순한 프론트엔드 플레이그라운드입니다. HTML/CSS와 기본적인 JS 아이디어를 빠르게 테스트하기에 좋습니다.
- ICECoder: 다른 도구와 견줄 만한 기능을 갖춘 온라인 플레이그라운드로, 브라우저에서 실행되는 다운로드형 프로그램이기도 합니다. 사실상 오프라인 브라우저 기반 IDE입니다.
- Plunker: 다른 플레이그라운드보다 파일을 자유롭게 다룰 수 있고 데스크톱/GitHub 통합이 잘 되어 있는 프론트엔드 도구입니다.
- Scrimba: 엄밀히 말하면 코드 플레이그라운드는 아니지만, 혁신적인 비디오+코드 에디터 결합으로 학습 환경과 실험 공간을 동시에 제공합니다. 학습자에게 강력 추천!
- Web Maker: 오프라인 기능과 CodePen 연동까지 지원하는 훌륭한 프론트엔드 플레이그라운드입니다.
- Dabblet: 기본적인 HTML/CSS/JS 플레이그라운드지만 디자인이 깔끔합니다.
- PlayCode: 깔끔한 기본형 HTML/CSS/JS 플레이그라운드입니다. 단점이라면 60초마다 Pro 요금제 업그레이드를 권유하는 팝업이 뜬다는 점입니다.
선택지가 너무 많다! 어떤 것을 골라야 할까?
맞습니다, 웹 코드 플레이그라운드는 셀 수 없이 많습니다. 하지만 도구 선택에 시간을 허비하다 정작 무언가를 만드는 데 쓸 시간을 낭비하지 마세요! 온라인 코딩 환경에서 원하는 조건이 어느 정도 명확하다면, 해당 기능을 갖춘 두세 가지 후보로 좁힌 뒤 각각 조금씩 사용해 보고 가장 끌리는 것을 고르는 것이 현명합니다. 게다가 대부분 GitHub 연동이나 내보내기/가져오기 기능을 지원하기 때문에 한 번 선택했다고 해서 그 결정에 영원히 묶이는 것도 아닙니다.
저는 개인적으로 간단한 정적 페이지와 디자인 실험에는 CodePen을, 규모가 큰 프로젝트에는 Glitch를 사용합니다. 물론 CodeSandbox의 VS Code 스타일 인터페이스와 Repl.it의 콘솔 기능도 훌륭하다고 생각합니다. 소개하지 못한 애용하는 플레이그라운드나 빠진 훌륭한 기능이 있다면 댓글로 알려주세요. 다른 독자들에게도 큰 도움이 될 것입니다!