Markdown 언어 서버 소개

2022년 8월 16일, Matt Bierner, @MattBierner 작성

2016년 Visual Studio Code에 합류했을 때 제가 처음 맡았던 기능이 Markdown 지원이었습니다. 와, 벌써 6년이나 되었네요? 정말 잘 맞았던 것 같아요. 저는 Markdown을 너무 오래 다뤄서 트위터, 아웃룩, 그리고 거의 모든 텍스트 상자에 커서가 닿으면 백틱과 별표를 희망적으로 입력하는 제 자신을 자주 발견합니다. 수년에 걸쳐 VS Code의 내장 Markdown 지원을 성장시키고, 저희의 Markdown 확장이 웹뷰 및 노트북과 같은 핵심 기능에 직접적, 간접적으로 어떤 영향을 미쳤는지 보는 것은 정말 보람 있었습니다.

그래서 지난 반년 동안 조용히 노력해 온 프로젝트, 그리고 VS Code의 Markdown 도구의 다음 단계를 나타낸다고 생각하는 프로젝트인 Markdown 언어 서버를 공유하게 되어 기쁩니다. 이 언어 서버를 통해, VS Code의 내장 Markdown 언어 도구 대부분—문서 개요, 스마트 접기, 경로 완성—을 다른 편집기 및 도구에서 사용할 수 있도록 하고 있습니다. 저희의 목표는 프로그래밍 언어에서 흔히 볼 수 있는 스마트 기능을 통해 Markdown 도구를 발전시키는 것입니다.

Markdown 언어 서버 작업은 두 개의 새롭고 (이름도 비슷하게!) 오픈 소스 라이브러리로 나뉩니다.

• Markdown Language Service - Markdown 작업을 위한 도구를 제공하는 TypeScript 라이브러리입니다.

• Markdown Language Server - 언어 서비스를 사용하여 구축된 Markdown용 언어 서버입니다.

이 라이브러리들은 아직 초기 단계이지만, 이미 VS Code 1.70+에서 사용되고 있습니다 (아마 여러분은 전혀 눈치채지 못하셨을 겁니다 :-)). Markdown 도구를 별도의 프로세스로 이동하여 다른 확장을 차단하지 않도록 하는 등 이 전환으로 인해 몇 가지 이점도 얻었습니다.

하지만 너무 앞서나가기 전에, 아마 이런 질문을 하실 수도 있을 겁니다: Markdown 언어 서버가 왜 필요한가요? 솔직히 말해서, 저도 이 질문에 대해 답을 얻는 데 6년이 걸렸습니다. 이것은 Markdown을 단순히 약간의 별표, 괄호, 그리고 덧붙여진 해시 기호로 된 일반 텍스트로 보는 것에서 벗어나, TypeScript나 Python과 같은 프로그래밍 언어를 위해 제공하는 도구와 동일한 도구의 혜택을 받을 수 있는 마크업 언어로 이해하는 제 진화 과정과도 일치합니다.

Markdown 도구에 익숙해지기

VS Code를 발견하기 전에는 주로 간단한 텍스트 편집기로 코딩했습니다. 이는 사용하고 싶을 때마다 기호 이름을 기억하고 직접 입력해야 함을 의미했습니다. 변수 이름을 바꾸고 싶다면 텍스트 찾기/바꾸기를 수행하고, 단위 테스트가 실수로 잘못 입력되거나 손상된 경우를 잡아주기를 바랐습니다. 느리고 신뢰할 수 없는 작업 방식이었지만, 더 나은 방법이 있다는 것을 몰랐기 때문에 만족했습니다. 더 똑똑한 도구를 손에 넣은 후에야 제 워크플로우가 얼마나 원시적이었는지 진정으로 깨달았습니다.

최근에 Markdown으로도 같은 깨달음을 얻었습니다. 몇 년 동안 VS Code의 비교적 간단한 Markdown 편집기를 사용하는 것으로 만족했습니다. 구문 강조와 내장 Markdown 미리 보기에 만족했습니다. 문서 개요와 클릭 가능한 편집기 링크는 그저 보너스였습니다. 링크를 손으로 직접 쓰는 데 익숙해졌습니다. 헤더 이름을 변경하면 해당 헤더로 연결되는 모든 링크를 업데이트하기 위해 텍스트 검색을 해야 한다는 사실을 받아들였습니다. 그리고 Markdown을 단순히 멋진 일반 텍스트 이상으로 보지 않았기 때문에, 더 나은 방법이 가능하다고 상상조차 할 수 없었습니다.

하지만 어느 날, 백 번째쯤 이미지를 잘못 입력하고 나서 마침내 깨달았습니다: **이건 재미없어!** 왜 이런 링크를 수동으로 입력하고 유효성을 검사하는 데 내 인생을 낭비하고 있는 거지? 도구가 바로 이런 일을 하는 데 쓰는 거잖아! 저는 아무 도구 말고, WYSIWYG 스타일 UI 마법 뒤에 Markdown 소스를 숨기는 대신, 텍스트로 Markdown을 읽고 쓰는 데 도움이 되는 도구를 원한다는 것을 알았습니다. 이것은 VS Code의 정신과 프로그래밍 언어 지원에 대한 우리의 생각과 매우 일치합니다. 왜 우리가 일반 프로그래밍 언어에 제공하는 많은 똑똑한 기능들이 Markdown에도 적용되지 않아야 할까요? 저는 다음 날부터 링크 완성을 작업하기 시작했습니다.

링크 완성은 현재 파일의 헤더나 작업 영역의 다른 파일로 연결되는 링크를 작성하는 데 도움이 되는 제안입니다. 다른 Markdown 파일의 헤더로 연결되는 링크 완성도 추가했습니다. 멋지죠! 작은 추가였지만 제 생산성에 엄청난 변화를 가져왔습니다. 곧 그것 없이 어떻게 살았는지 상상할 수 없었습니다.

Markdown 완성의 성공에 들떠, 다음에 Markdown에 어떤 언어 스마트 기능을 가져올 수 있을지 상상하며 황홀했습니다. 헤더에서 F2를 자신 있게 눌러 안전하게 이름을 바꾸는 자신을 상상했습니다. 텍스트의 흐릿한 바다를 가로질러 붉은 물결이 번쩍이며 잘못된 링크를 식별하는 데 도움이 되는 것을 꿈꿨습니다. 모든 것이 너무 명확해 보였습니다! 왜 몇 년 전에 생각하지 못했을까? 저는 Markdown을 단순한 일반 텍스트가 아닌 구조화된 텍스트로 이해하기 시작했고, 더 나은 Markdown 도구에 대한 가능성은 끝이 없어 보였습니다.

Markdown 언어 기능

새로운 기능마다의 이야기에 대해 지루하게 설명하거나 구현에 대한 모든 자세한 내용을 파고들지는 않겠습니다. VS Code의 Markdown 지원에 할애할 수 있는 제한된 시간으로 인해 모든 노력이 가능했던 점진적인 접근 방식을 취했다는 것만 알아두셔도 좋습니다. 예를 들어, 직접적으로 이름 바꾸기 지원을 구축하는 대신, 먼저 모든 참조 찾기를 제대로 작동하도록 만들었습니다 (기호를 바꾸려면 먼저 참조되는 모든 위치를 알아야 하기 때문입니다). 점진적으로 작업하고 각 기능을 서로 위에 구축하는 것은 새로운 기능을 구현하면서 기존 기능을 테스트하는 데도 도움이 되었습니다. 예를 들어, 링크 이름 바꾸기를 구현하는 것은 링크 감지에 대한 수많은 버그를 잡는 데 도움이 되었습니다. (이 접근 방식의 유일한 단점은 "매우 우아한" 타워를 몇 개의 매우 복잡한 정규 표현식 위에 지었음을 깨닫는 것입니다.)

봄 늦게 잘못된 파일/이미지 링크 보고에 대한 실험적 지원이 출시되었을 때, 저는 한 걸음 물러서서 제 작업을 검토했습니다. 이제 포함된 Markdown 언어 기능 세트는 다음과 같습니다.

• 문서 개요
• 작업 영역 기호
• 문서 링크
• 스마트 접기
• 스마트 선택
• 완성
• 이름 변경
• 모든 참조 찾기
• 정의로 이동
• 잘못된 링크에 대한 진단
• 파일 이동 / 이름 바꾸기 시 링크 업데이트

이 새로운 도구들이 Markdown 작업을 더 빠르고 안전하게 만들어 줄 것이라는 것을 알았습니다. 하지만 프로그래밍 언어에 공통적인 이 기능 목록을 검토하면서, 계속해서 마음에 걸리는 아이디어가 있었습니다. 불과 몇 달 전에는 터무니없다고 생각했지만, 다시 생각해 보니 이제 Markdown 언어 서버를 위한 시간이 된 것 같았습니다.

서버를 사용하고 있습니까?

2022년 봄 늦게까지 VS Code의 모든 Markdown 도구는 일반 확장 API에서 실행되었습니다. 이 모든 도구를 제대로 된 언어 서버로 옮기는 것을 탐색하고 싶었지만, 변경하는 데는 실제 엔지니어링 비용이 발생했습니다. 그것이 가치 있을 것이라는 확신이 필요했습니다.

한 달 넘게 이 문제에 대해 계속 고민했습니다. 기존 코드가 괜찮은 상태였음에도 불구하고, 불확실한 점이 많았습니다. 중간에 도달했을 때 작동하지 않는다는 것을 깨닫게 되면 어떻게 될까요? 저는 언어 서버에 대해 심각하게 작업해 본 적이 한 번도 없었습니다.

이 모든 것을 고민하는 동안, 코드를 언어 서버로 옮길 것처럼 Markdown 확장 소스 코드를 리팩토링하면서 바쁘게 지냈습니다. VS Code 확장 API에 대한 종속성을 분리하려고 했고, 서비스 주입을 사용하여 더 많은 로직을 전환했으며, 테스트가 파일 시스템에 의존하지 않도록 했습니다. 그렇게 하면 언어 서버로 뛰어들지 않더라도 최소한 코드베이스를 정리하는 셈이었습니다.

몇 가지 고려 사항이 궁극적으로 Markdown 언어 서버가 올바른 다음 단계라고 확신하게 했습니다. 첫째, 다소 평범한 고려 사항: Markdown 파일에 대한 링크 진단을 효율적으로 구현하기가 매우 어렵다는 것을 알게 되었습니다. vscode-docs와 같이 큰 Markdown 작업 영역에서는 확장 호스트를 몇백 밀리초 동안 실수로 차단했습니다. 좋지 않았습니다. 반면에 언어 서버는 자체 프로세스로 실행됩니다. 그것뿐만 아니라, 언어 서버는 제가 시험해 보고 싶었던 새로운 진단 풀 모델을 가지고 있었습니다.

더 고귀한 이유도 있었습니다. 예를 들어, Markdown 언어 서버는 다른 편집기 및 도구에도 유용할 것입니다. 여기에는 VS Code 팀에서 제공하는 다른 편집기인 Monaco가 포함됩니다! Markdown CLI 도구와 같은 가능성은 말할 것도 없습니다. 제가 직접 그런 도구를 만들 시간이 없다면, 아마 다른 누군가가 언어 서버를 시작점으로 사용하여 만들 수도 있을 것입니다. 저는 VS Code의 Markdown 도구에 많은 노력을 기울였고, 이 모든 노력이 다른 사람들에게도 도움이 된다면 좋을 것입니다.

새로운 언어 서버를 제공함으로써, Markdown 도구 개선을 위한 공유 노력을 촉발할 수도 있습니다. VS Code는 오픈 소스 소프트웨어의 다산적인 생산자이자 사용자이며, 이러한 유형의 프로젝트가 제공하는 명확한 이점을 보았습니다. 오픈 소스 Markdown 언어 서버는 다른 편집기에도 도움이 되지만, 결국 VS Code에도 도움이 되는 기여를 초대할 것입니다! 각 편집기/도구가 자체 Markdown 지원을 구현하는 노력을 중복하는 대신, 언어 서버는 개발자들이 모두에게 도움이 되는 더 큰 프로젝트에 협력하도록 모을 수 있습니다.

이 모든 웅대한 생각은 언어 서버를 실제로 구축하는 계획 없이는 무의미했습니다. 모든 리팩토링 후에도 코드를 언어 서버로 옮기는 것은 엄청난 작업이 될 것이었습니다! 한 번에 모두 할 필요가 없다는 것을 깨닫기 전까지는 압도적으로 보였습니다. 서버를 점진적으로 구축하여 VS Code Markdown 확장 기능을 새 Markdown 언어 서버로 한 번에 하나씩 기능을 옮길 수 있었습니다. 그리고 올바르게 수행한다면, 각 작은 점진적 마이그레이션을 커밋하여 사용자들이 구축 중인 새 언어 서버를 테스트하도록 할 수 있었습니다. 이상적으로는 사용자가 기능이 확장 프로그램에서 언어 서버로 이동하는 것을 전혀 눈치채지 못할 것입니다.

어쩌면 당연한 일일 수도 있지만, 저는 대규모 코드 변경에 대한 이러한 점진적인 접근 방식의 엄청난 지지자가 되었습니다. 수십만 LOC PR이나 몇 달 (또는 몇 년) 동안 유지되는 대규모 기능 브랜치가 아닙니다. 대신 main에 작고 안전한 변경 사항을 많이 만드세요. 모든 것이 계획대로 진행된다면, 이 모든 작업을 마무리하는 커밋은 극적이지 않을 것입니다. 이것은 VS Code 전체 코드베이스에서 엄격한 null 검사를 점진적으로 사용하는 데 사용한 접근 방식이며, 이것이 VS Code의 모든 Markdown 도구를 가능한 한 적은 드라마로 새 언어 서버로 빠르게 옮길 수 있다고 느낀 방식입니다.

그리고 스포일러 경고: 성공했습니다! 언어 기능들을 하나씩 옮겼습니다. 진행하면서 배웠고, 필요하다고 판단될 때 리팩토링했습니다. 진단은 마지막으로 이동된 기능으로, 언어 서버로 옮길 뿐만 아니라 언어 서버의 새 풀 진단 모델을 사용하도록 다시 작성했습니다. 전체 작업의 마지막 커밋은 주로 더 이상 사용되지 않는 Markdown 확장의 코드를 삭제했습니다. 따라서 오늘날 VS Code 1.70+를 사용하는 경우 거의 모든 Markdown 언어 기능이 새 언어 서버를 사용합니다.

함께 더 나은 Markdown 도구 구축하기

여러 면에서 지난 6개월은 이 분야에서 6년 동안 일해 온 시간보다 VS Code의 Markdown 도구에서 더 많은 발전을 이루었습니다. 오늘날 우리는 이전에는 Markdown에서 사용할 수 없었던 많은 새로운 도구들을 제공하고 있습니다. 이러한 기능들 중 많은 부분은 가장 일반적인 Markdown 독자 및 작성자에게 혜택을 주지만, 다른 기능들은 고급 사용자만 이해할 것입니다. 그러나 이러한 모든 발전에도 불구하고, 우리는 Markdown 도구에서 가능한 것을 탐색하기 시작했을 뿐이라는 것을 알고 있습니다.

Markdown 언어 서버에 대해 제가 가장 흥분되는 점은 이제 이 프로젝트가 VS Code만을 위한 것이 아니라는 것입니다. 저희 Markdown 도구를 쉽게 소비할 수 있도록 함으로써, 모든 사람을 위해 Markdown 도구를 발전시키는 데 도움이 되기를 바랍니다. 이 오픈 소스 프로젝트는 Markdown 도구의 미래를 함께 구축하는 데 도움이 되도록 초대하는 것입니다. 기여에 관심이 있다면, 새로운 프로젝트를 살펴보고 그것들로 무엇을 만들 수 있는지 확인해 보세요. 버그 보고서와 기능 요청, 심지어 PR도 제출할 수 있습니다! 아직 꿈도 꾸지 못한 수많은 똑똑한 Markdown 언어 기능들이 있습니다. 함께 만들어 봅시다!

소스 코드를 확인하거나 기여하는 데 관심이 있다면, GitHub와 npm에서 Markdown 언어 서비스 및 서버를 찾을 수 있습니다.

• Markdown Language Service - Markdown 작업을 위한 도구를 제공하는 TypeScript 라이브러리입니다.

• Markdown Language Server - 언어 서비스를 사용하여 구축된 Markdown용 언어 서버입니다.

행복한 코딩 되세요!

Matt Bierner, @MattBierner