코드 편집기라고 하면 보통 컴퓨터, 스마트폰, 태블릿에 소프트웨어를 설치해야 하는 경우가 많습니다. 평소에는 큰 문제가 없지만, 갑자기 좋은 아이디어가 떠올랐는데 정작 편집기가 설치된 기기가 곁에 없다면 답답하겠죠. 온라인 코드 편집기를 사용하면 인터넷 연결만 있다면 장소와 기기에 상관없이 자유롭게 코딩할 수 있습니다. 게다가 상당수 편집기는 완전 무료이며 실시간 협업 기능까지 갖추고 있습니다.
1. Code Share
Code Share는 단연 최고 수준으로 꼽히는 온라인 코드 편집기입니다. 수많은 프로그래밍 언어를 지원하며, 사용할 언어만 선택하면 그에 맞는 구문 강조가 자동으로 적용됩니다.
협업에 특히 강점이 있는 플랫폼이기도 합니다. 동료, 친구, 누구에게나 링크 하나만 공유하면 실시간으로 함께 코딩할 수 있고, 프로젝트를 진행하는 동안 화상 채팅까지 가능합니다. 계정이 없으면 프로젝트는 24시간 후 만료되지만, 코드는 언제든지 다운로드해 둘 수 있습니다.
이동 중 빠르게 코드를 작성하거나, 함께 오류를 잡거나, 다른 사람에게 코딩을 가르치거나, 새로운 아이디어를 시험해 보기에 안성맞춤입니다. 계정을 만들어 작업물을 저장할 수도 있고, 계정 없이 바로 사용할 수도 있습니다. 어느 쪽이든 이용료는 무료입니다.
2. CodeSandbox
CodeSandbox는 팀 프로젝트를 염두에 두고 만들어졌지만 개인 개발자에게도 손색이 없습니다. React, Angular, Vue, Vanilla 등 웹 개발 언어를 폭넓게 지원하며, 템플릿을 고르는 것만으로도 프로젝트를 빠르게 시작할 수 있습니다. 다른 사람을 초대해 협업할 수도 있고, 혼자만의 작업에 몰입할 수도 있습니다.
플랫폼 자체도 직관적이라 사용법을 익히기 쉽습니다. 무료 계정을 만들어 두면 언제든지 내 프로젝트에 빠르게 접근할 수 있으며, 데스크톱 코드 편집기 못지않은 견고한 사용감을 제공합니다.
다만 Code Share와 달리 CodeSandbox는 완전 무료는 아닙니다. 개인 사용자는 공개(public) 샌드박스만 만들면 무료로 이용할 수 있습니다. 샌드박스란 개별 프로젝트 작업 공간을 말합니다. 비공개 샌드박스, 추가 저장 공간, GitHub 저장소 연동 같은 기능이 필요하다면 월 7달러를 내면 됩니다. 팀 단위 프로젝트를 위한 비즈니스 플랜은 월 24달러부터 시작합니다.
3. PlayCode
PlayCode는 프론트엔드 웹 개발에 최적화된 편집기입니다. 어디에 있든 CSS, JavaScript, HTML을 손쉽게 다룰 수 있고, 에디터 패널을 자신만의 워크플로우에 맞게 자유롭게 배치할 수 있습니다.
다양한 템플릿 덕분에 프로젝트를 순식간에 시작할 수 있고, 드롭다운 메뉴 클릭 몇 번으로 언어도 빠르게 전환할 수 있습니다.
구문 강조와 오류 표시 기능이 있어 코드 상태를 한눈에 파악하기 쉽습니다. 무료 계정을 만들면 언제든 코드를 저장할 수 있습니다. 무료 계정은 프로젝트당 1,000자로 글자 수가 제한되지만, 프로젝트 개수는 무제한입니다. 월 2.5달러의 프리미엄 플랜으로 업그레이드하면 이 제한이 사라지고 추가 저장 공간 등 더 많은 혜택을 누릴 수 있습니다.
4. StackBlitz
마이크로소프트 VS Code를 애용하는 개발자라면 StackBlitz가 곧 최애 온라인 편집기가 될지도 모릅니다. VS Code와 흡사한 인터페이스와 사용감을 제공하면서도 성능은 결코 뒤지지 않는 강력한 편집기입니다.
온라인에서 풀스택 앱을 개발할 수 있는 9개의 워크스페이스를 제공하며, Angular, React(JavaScript와 TypeScript 모두), Vue 등을 지원합니다. Progress KendoReact와의 파트너십을 통해 더 세련된 UI를 만드는 것도 가능합니다.
실시간 편집은 물론 오프라인 지원까지 갖춰져 있어 이동 중 코딩도 거뜬합니다. 앱을 무료로 배포하고 호스팅하며 공유할 수도 있습니다. 공개 프로젝트는 무료로 만들 수 있지만, 비공개 프로젝트와 추가 기능을 원하면 월 9달러를 지불해야 합니다.
5. CodePen
CodePen은 가장 널리 알려진 무료 온라인 코드 편집기 중 하나로, 프론트엔드 웹 개발을 위해 탄생했습니다. 이 목록의 다른 도구들과 마찬가지로 협업 플랫폼이지만, 혼자만의 프로젝트를 진행하기에도 전혀 부족함이 없습니다.
내 프로젝트를 만들어 공개하고 다른 사용자들로부터 값진 피드백을 받아보세요. 호스팅된 프로젝트를 CodePen에서 바로 시연할 수도 있고, 코드를 단계별로 풀어 설명하는 교육 도구로 활용할 수도 있습니다.
또한 다양한 챌린지에 참여해 실력을 키울 수 있습니다. 배우고, 협업하고, 코딩의 재미를 느끼기에 더없이 좋은 방법입니다.
계정 없이도 바로 시작할 수 있지만, 작업물을 저장하려면 무료 계정이 필요합니다. 무료 플랜으로도 프로젝트 생성과 호스팅이 가능합니다. 다만 이미지 같은 파일 업로드나 비공개 프로젝트가 필요하다면 월 8달러짜리 CodePen Pro로 업그레이드해야 합니다.
6. PseudoEditor
의사코드(pseudocode)를 자주 다루는 분들이라면 대부분의 온라인 코드 편집기가 이를 기본적으로 지원하지 않는다는 사실에 답답함을 느꼈을 것입니다. PseudoEditor는 바로 그 갈증을 해소하기 위해 의사코드 전용으로 만들어진 편집기입니다. 구문 강조, 자동 완성, 코드 저장 기능을 갖춰 아이디어를 구체적인 설계로 발전시키기에 딱 좋습니다.
온라인 버전이 마음에 든다면 Windows와 Mac용 설치형 버전도 이용할 수 있습니다. 두 버전 모두 동일하게 작동하며, 무엇보다 완전 무료라는 점이 매력적입니다.
겉보기에는 다소 단순해 보이지만, 군더더기 없이 필요한 일만 깔끔하게 처리해 주기 때문에 이동 중 빠르게 코딩하기에 오히려 장점이 됩니다.
완벽한 이동용 편집기를 찾았다면, 집이나 사무실의 주력 기기에 맞는 편집기도 하나 곁들여 두는 것이 좋습니다. Mac, Android, Linux용으로 다양한 편집기가 출시되어 있으며, 물론 마이크로소프트의 Visual Studio라는 든든한 선택지도 항상 있습니다.