글쓰기를 위한 VS Code 에디터 환경 세팅
「글을 긷자」 확장성이 뛰어난 나만의 플랫폼 구축
흔히 ‘IT 개발’이라 하는 작업은 ‘통합 개발 환경(IDE: Integrated Development Environment)’이라는 것을 가이드에 따라 조성하는 것부터 시작이 됩니다. 웹 개발의 경우에는 텍스트 에디터와 주로 사용하는 웹 브라우저를 설치하는 것으로 시작해, Git과 Node.js라는 것의 설치도 이루어집니다. 물론, 그중에 VS Code의 설치가 이루어지기도 하며 GitHub나 GitLab 저장소에 연결하기 위한 세팅도 필수적으로 이루어지기도 합니다. 여러 가지 환경이 이미 조성된 폴더를 통째로 내 피씨로 가져오면 되는 경우도 있습니다.
통합 집필 환경(IWE: Integrated Writing Environment)
우리는 지금, 그러한 소프트웨어 개발 환경과도 비슷한 것을 만들려고 하니, 앞으로의 집필 환경에 사용될 용어 목록에 이것도 포함해 보기로 합니다.
쉽게는, 아래와 같이 OS 내 익숙한 영역에 폴더 하나를 만드는 것부터 시작할 수 있습니다. 이 폴더는 나중에 함께 다룰 Obsidian의 Vault 역할도 할 수 있습니다.
집필용 폴더 생성
‘달이뜨렷다.md’ 파일 만들기
브라우저에 ‘Markdown Viewer’ 확장 설치 (크롬, 엣지 모두 동일한 확장 존재)
VS Code 설치
Node.js설치
Git 설치
GitHub 저장소와 연결 혹은 GitHub 저장소 ‘복사해 오기(클론)’
VS Code를 중심으로 IWE 조성
이러한 절차를 따르고 나면, 글쓰기를 위해 나온 전용 소프트웨어나 해당 소프트웨어 제공자에 너무 의존적이지 않을 수 있습니다. 직접 IWE를 조성한다는 것은 그런 전용 소프트웨어 내에서 보이지 않게 자동으로 진행될 수도 있는 것들을 수동으로 진행하는 것이기 때문에, 적응 초반에는 번거로울 수 있으나 익숙해지면 그 뛰어난 확장성과 여러 가능성이 집필 과정에 힘을 실어 줄지도 모릅니다. 게다가, 소프트웨어가 동작하는 방식을 이해할 수 있게 되면서 적극적으로 생태계 확장에도 기여할 수도 있게 됩니다.
크롬 웹 브라우저에 Markdown Viewer 확장 설치 후 브라우저 내에서 마크다운 문서를 연 모습VS Code 내에서 사용할 수 있는 다이어그램 제작툴 소개
작품 구상 중에 사용할 수 있는 다이어그램 제작툴을 알아보다가, VS Code 확장으로도 사용할 수 있는 것이 있어 소개합니다. 다행히, 에디터 내에서 각 확장을 사용해 이미지나 데이터를 만드는 방식은 동일합니다.
Draw.io
Excalidraw
Draw.io
‘diagram.drawio.png’와 같이 결과물을 PNG 이미지로 내려고 하는 다이어그램 파일 생성 후 파일 열기를 하면, 에디터 영역 내에 바로 확장 전용의 UI가 구성됩니다.
VS Code에 Draw.io 확장 설치 후, 생성된 전용 파일을 마크다운 문서에 포함시킨 모습Excalidraw
Draw.io 확장을 사용했던 것처럼 ‘diagram.excalidraw.png’와 같이 다이어그램 파일 생성 후 파일 열기를 하면, 에디터 영역 내에 확장 전용의 UI가 구성됩니다.
VS Code에 Excalidraw 확장 설치 후, 생성된 전용 파일을 마크다운 문서에 포함시킨 모습연재 안내
브런치북 「글을 Git[긷]자」는 웹 서비스를 위한 UI/UX 개발자인 저자가, 다년간의 실무 경험을 바탕으로 Git과 GitHub 그리고 Visual Studio Code라는 무료 범용 텍스트 에디터를 이용한 글쓰기 방식을 제안하기 위해 기획되었습니다.
