비주얼 스튜디오 코드 vs. 서브라임 텍스트, 더 나은 코드 편집기 비교하기

적당한 IDE 기능만 갖춘 최대한 유연한 편집기, 또는 가장 빠르고 가장 효율적인 편집기 중에서 무엇을 사용하는 것이 좋을까? 물론 둘 다 사용하는 것이 가장 좋을 것이다.

필자는 자바스크립트 편집기와 자바스크립트 IDE를 비교할 때 편집기로는 서브라임 텍스트(Sublime Text)를, 편집기 또는 IDE로는 비주얼 스튜디오 코드를 보통 1순위로 권한다. 둘 다 자바스크립트로 제한되지도 않고 자바스크립트와 HTML, CSS로도 제한되지 않는다.
 

ⓒ Getty Images Bank

한 걸음 물러서서 큰 그림을 보면 서브라임 텍스트와 비주얼 스튜디오 코드는 최상의 다중 언어, 다중 OS 프로그래밍 편집기다. 서브라임 텍스트의 장점은 속도와 편리한 편집 기능, 비주얼 스튜디오 코드의 장점은 그에 못지않은 속도와 더 우수한 기능에 있다. 두 제품 모두 윈도우, 맥OS, 리눅스에서 실행된다.

2024년에는 제드(Zed)와 커서(Cursor)로 선택의 폭이 더 넓어졌다. 둘은 방향은 다르지만 모두 비주얼 스튜디오 코드에서 더 개선된 툴이다. 비주얼 스튜디오 코드에는 AI 코드 완성(인텔리센스를 뛰어넘음)과 2021년 깃허브 코파일럿부터 시작해 대규모 언어 모델(LLM) 기반의 코드 생성 기능을 더해주는 여러 플러그인이 있다.

비주얼 스튜디오 코드는 무료로 무기한 사용할 수 있으며 대부분이 오픈소스다. 서브라임 텍스트는 무료로 평가가 가능하지만 코드는 독점이며, 평가 이후 계속 사용하려면 99달러에 사용자 라이선스를 구매해야 한다. 서브라임 머지(Merge)도 함께 필요한 경우 둘을 합친 라이선스 비용은 168달러다. 서브라임 텍스트(또는 머지) 라이선스를 구매하지 않을 경우 가끔 성가신 화면이 뜬다. (필자는 사용하는 모든 컴퓨터마다 부지런히 라이선스를 입력하지는 않는다. 그런 사람이 아마 필자 혼자만은 아닐 것이다. 성가신 화면을 그냥 닫으면 된다.)
 

비주얼 스튜디오 코드의 좋은 점

비주얼 스튜디오 코드(줄여서 VS 코드)는 가벼우면서도 강력한 소스 코드 편집기로, 데스크톱에서 실행되며 윈도우와 맥OS, 리눅스에서 제공된다. 자바스크립트, 타입스크립트, Node.js를 기본 지원하며 다른 언어(C++, C#, 자바, 파이썬, PHP, 고 등)와 런타임(닷넷, 유니티 등)을 위한 확장 생태계도 풍부하다.

VS 코드에는 변수, 메서드, 가져온 모듈을 위한 인텔리센스 코드 완성 기능과 그래픽 디버깅, 린팅, 다중 커서 편집, 매개변수 힌트, 기타 강력한 편집 기능, 세련된 코드 탐색과 리팩터링, 깃 지원을 포함한 기본 소스 코드 제어 등이 있다. 이러한 기능은 대부분 비주얼 스튜디오 기술에서 차용된 것이다.

VS 코드는 일렉트론(Electron) 셸, Node.js, 타입스크립트, 랭귀지 서버 프로토콜을 사용해 구축되며 매월 업데이트된다. 확장 프로그램은 일정한 간격 없이 필요할 때마다 수시로 업데이트된다. 지원 범위는 프로그래밍 언어와 각각의 확장 프로그램에 따라 간단한 구문 하이라이팅 및 괄호 일치부터 디버깅과 리팩터링에 이르기까지 다양하다. (VS 코드는 일부 언어에 대해 원격 디버깅도 지원한다.) 사용 가능한 언어 서버가 없는 경우 텍스트메이트(TextMate) 컬러라이저를 통해 선호하는 언어에 대한 기본적인 지원을 추가할 수 있다.

비주얼 스튜디오 코드 리포지토리의 코드는 MIT 라이선스에 따르는 오픈소스다. VS 제품 자체는 마이크로소프트에만 해당하는 맞춤 설정을 포함하고 있으므로 표준 마이크로소프트 제품 라이선스에 따라 제공된다. 상용 라이선스지만 무료다.

2021년 이후에는 깃허브 코파일럿과 기타 LLM 기반 코드 생성 및 코드 완성 플러그인으로 VS 코드가 더 강화됐다. 깃허브 코파일럿은 매월 변경됐는데 항상은 아니지만 대체로 좋은 방향으로의 변경이었다. 깃허브 코파일럿의 대안으로는 탭나인(Tabnine) AI, 소스그래프 코디(Sourcegraph Cody), 아마존 Q 디벨로퍼(Amazon Q Developer) 등이 있다.
 

비주얼 스튜디오 코드에서 보는 비주얼 스튜디오 코드의 소스 코드. 메시지(깃 리포지토리의 정보를 사용해 생성됨)에서 함수의 작성자와 최근 변경 날짜를 볼 수 있다. 또한 화면 중앙에서는 trackSelection()에 대한 미리보기 팝업을 볼 수 있다. ⓒ Martin Heller

서브라임 텍스트의 좋은 점

유연하고 강력하고 확장성이 뛰어나면서 속도도 매우 빠른 프로그래밍 텍스트 편집기를 원하고 코드 확인, 디버깅, 배포를 위해 다른 창으로 전환하는 정도의 귀찮음을 감수할 수 있다면 서브라임 텍스트가 적격이다.

속도 외에 서브라임 텍스트의 주목할 만한 강점은 70개 이상의 파일 형식 지원(자바스크립트, HTML, CSS 포함), 거의 즉각적인 탐색과 프로젝트 전환, 열 선택(파일에서 사각형 영역 선택)을 포함한 복수 선택(여러 변경을 동시에 실행), 여러 개의 창(모든 모니터 사용), 분할 창(화면 공간 활용), 간단한 JSON 파일을 사용한 완전한 맞춤 설정, 파이썬 기반 플러그인 API, 검색 가능한 확장 명령 팔레트 등 매우 많다. 버전 3.2에서는 새로운 서브라임 머지 깃(Sublime Merge Git) 클라이언트를 통해 강력한 깃 지원이 추가됐다. 이전까지는 깃 지원이 플러그인 형태로 제공됐다.

서브라임 텍스트 4의 주요 신규 기능과 향상된 점으로는 GPU 렌더링, 애플 실리콘 및 리눅스 Arm64 지원, 탭 다중 선택, 문맥 인식 자동 완성, 새로 단장된 UI, 타입스크립트/JSX/TSX 지원, 개선된 구문 정의 등이 포함된다. 또한 서브라임 텍스트 3용으로 제작된 패키지와의 하위 호환성을 유지하면서 서브라임 텍스트 API가 파이썬 3.8로 업데이트됐다.

다른 편집기에서 건너온 프로그래머를 위해 서브라임 텍스트는 텍스트메이트(TextMate) 번들(명령 제외)과 Vi/Vim 에뮬레이션을 지원한다.
 

서브라임 텍스트는 코드, 마크업, 산문을 위한 텍스트 편집기로 구성할 수 있는 범위가 넓고 확장성이 뛰어나다. 기본적으로 자바스크립트를 포함한 50개 이상의 구문을 인식하며 서브라임 패키지와 텍스트메이트 구문 정의를 통해 더 확장할 수 있다. 필자는 키 입력 몇 번으로 바벨(리액트)과 타입스크립트(앵귤러)에 대한 구문과 지원을 설치할 수 있었다. ⓒ Martin Heller

앞에서 “거의 즉각적인 탐색”이라고 표현했는데 결코 과장이 아니다. 예를 들어 현재 화면 위치에서 ajax.js의 getResponseHeader 정의로 이동하려는 경우 맥에서는 Command-P, PC에서는 Ctrl-P를 누른 다음 aj를 입력해 ajax.js에 대한 임시 보기를 열고, @grh를 입력하고 Enter를 누르면 getResponseHeader가 선택된 상태로 탭이 열린다. 서브라임 텍스트는 입력 속도를 잘 따라온다. 브리프(Brief), 케디트(Kedit)와 같은 과거의 DOS 편집기가 연상될 정도로 응답성이 뛰어나다.

getResponseHeader를 선택한 다음에는 맥에서는 Shift-Command-F, PC에서는 Shift-Ctrl-F를 누르고 Enter를 누르면 이 함수가 사용된 모든 부분을 컨텍스트와 함께 찾을 수 있다. 새 탭이 열리고 5줄의 각 코드 스니펫마다 검색어에 사각형이 표시된 검색 결과가 나타난다. 사각형이 그려진 텍스트를 두 번 클릭하면 새 탭에 전체 파일 컨텍스트가 표시된다.

왼쪽 폴더(Folders) 사이드바에서 파일 이름을 클릭하면 파일 내용을 볼 수 있는 임시 탭이 열린다. 다른 파일을 클릭하면 이 탭이 대체된다. 여기서도 서브라임 텍스트는 뒤쳐지지 않고 입력과 클릭 속도에 맞춰 따라온다. 마찬가지로, 페이지 오른쪽 상단의 축소된 탐색 메뉴를 사용하면 스크롤 오버헤드 없이, 거의 즉각적으로 파일 내 이동이 가능하다. 마이크로소프트 워드의 응답성이 이정도라면 좋겠다.

다중 선택과 열 선택은 정규식이 필요했던 귀찮은 편집 작업을 빠르게 할 수 있게 해준다. 단어 목록을 JSON 구조로 바꿔 각 단어를 큰따옴표로 묶고 따옴표로 묶은 각 단어를 쉼표로 구분해야 한다면? 목록에 포함된 단어의 수가 몇 개든 관계없이 서브라임 텍스트에서는 키 입력 8번 정도로 가능하다. 

필자는 윈도우 개발 컴퓨터에서는 와이드 모니터 2개를 사용하고 맥북 프로에서는 기본 레티나 디스플레이와 외장 썬더볼트 디스플레이를 함께 사용한다. 2개의 디스플레이를 각각 편집용과 디버깅용으로 사용하는 경우를 제외하면 보통 여러 소스 파일, 그리고 소스 파일에 대한 여러 뷰를 동시에 띄워놓고 본다. 서브라임 텍스트는 여러 창과 분할 창, 프로젝트당 여러 개의 작업 공간, 여러 뷰, 뷰가 포함된 여러 구역을 지원한다. 필요에 따라 간단히 모든 화면 공간을 활용하거나, 디버깅과 테스트를 위해 공간을 마련할 수 있다.

서브라임 텍스트에서는 색 구성과 글꼴, 전역 키 바인딩, 탭 스톱, 파일별 키 바인딩 및 스니펫, 구문 하이라이팅 규칙에 이르기까지 모든 부분을 맞춤 설정할 수 있다. 환경 설정은 JSON 파일로 인코딩된다. 언어별 정의는 XML 환경설정 파일이다. 서브라임 텍스트 패키지와 플러그인을 만들고 유지하는 커뮤니티 활동이 활발하다. 필자가 처음에 서브라임 텍스트에 없다고 생각했던 많은 기능(JSLint, JSHint 인터페이스, JsFormat, JsMinify, PrettyJSON 등)이 사실 커뮤니티를 통해 패키지 인스톨러(Package Installer)를 사용해서 제공되고 있다.

서브라임 텍스트의 성능이 뛰어난 이유 중 하나는 빈틈없는 코딩, 다른 하나는 IDE가 아니므로 IDE에 따르는 오버헤드가 불필요하다는 점이다.

개발자 관점에서 까다로운 타협이다. “레드, 그린, 리팩터링”의 빠듯한 테스트 기반 개발 루프에 따라 움직인다면 코드 커버리지를 편집, 테스트, 리팩터링, 추적하도록 설계된 IDE가 가장 유용할 것이다. 반면 코드 리뷰 또는 대대적인 편집 작업에서는 가장 빠르고 가장 효율적인 편집기가 적합하므로 서브라임 텍스트가 답이 될 수 있다.
 

VS 코드와 서브라임 텍스트 중의 선택

VS 코드와 서브라임 텍스트 중의 선택은 좋은 IDE와 좋은 편집기 중에서 선택하면 되는 간단한 일이라고 생각할 수 있다. 하지만 그렇게 간단하지 않다. VS 코드는 구성하기에 따라서 IDE 기능을 원하는 만큼 많이 또는 적게 넣을 수 있기 때문이다.

그런 면에서 두 개의 또 다른 VS 코드 대안인 제드와 커서도 고려해볼 만하다. 제드는 VS 코드와 비슷해 보이지만 GPU 지원과 폭넓은 LLM 옵션을 포함해 러스트로 완전히 다시 만들어졌다. 현재 미완성 단계로, 디버거와 같은 몇 가지 주요 기능이 없지만 로드맵은 공격적이며 속도는 서브라임 텍스트보다도 빠른 느낌이다. 커서는 VS 코드 오픈소스 리포지토리의 포크이며 “AI를 사용한 최선의 코딩 수단”을 목표로 기능을 개선해오고 있다.

필자는 VS 코드와 서브라임 텍스트를 모두 설치하고 각각의 명령줄 유틸리티인 code와 subl도 경로에 추가할 것을 권한다. 두 제품을 모두 설치하는 데 따르는 단점은 사실상 없다. VS 코드의 두 대안과 각각의 명령줄 유틸리티인 zed와 cursor까지 설치해도 좋다.

이제 로그래밍 프로젝트에서 이 4개 제품을 번갈아 사용하면서 프로그램의 특징을 파악한 다음 앞으로의 작업 계획에 따라 적절한 제품을 선택하면 된다. 또한 사용 중인 프로그래밍 언어에 필요한 플러그인도 추가해야 하는데, 플러그인 설치는 가급적 미루지 말아야 한다.

필자는 디버깅이 포함되거나 10분이 넘어가는 거의 모든 세션에서 VS 코드 또는 커서를 선택했고, 간단한 편집이나 코드 탐색이 많이 필요하다고 예상되는 작업에서는 서브라임 텍스트 또는 제드를 선택했다. 물론 사람마다 다를 수 있으며 시간이 지나면서 제품이 바뀌듯 사용자의 선호도도 바뀔 수 있다.
editor@itworld.co.kr