글쓰기를 위한 Git, GitHub 그리고 npm.
「글을 긷자」생태계로 들어가 얽히고설키는 일
저는 IT 업계에서 웹 문서 제작을 전문적으로 하는 ‘웹 퍼블리셔’로서 오랫동안 일을 해 왔습니다. 제가 코딩 결과물을 웹에 올리는 일을 처음 시작한 것은 2002년이었고, 직무가 ‘웹 퍼블리싱’이라고 정의된 건 2010년이 되기 전이었습니다. 2024년에도 코딩을 하고 있으니, 그동안 한 우물을 꽤 열심히 팠다고 정리해도 되겠습니다.
그간 웹 문서는 웹 표준의 대두와 그러한 표준 기술을 지원하는 브라우저의 업그레이드로, 또 생태계의 폭발적인 성장으로 그 제작 환경에 많은 변화가 있었습니다. 큰 변화의 지점은 저마다 설정한 것이 다르겠지만, 적어도 그중 하나는 바로 ‘GitHub와 npm 생태계의 확장’일 것입니다.
생태계 기반의 제작 환경에서는 작업하려는 웹 문서에 특정 UI나 기술이 필요하다면, 작업 폴더에서 `npm install {플러그인명}`} 명령으로 플러그인의 GitHub 저장소에서 소스를 받아와 응용하기만 하면 되었습니다. 우리가 일반적으로 쓰는 문장으로 앞의 명령을 바꿔보자면 `npm 등록소에 있는 {플러그인명}의 소스를 가져와 내 피씨에 설치하라`와 같습니다.
이러한 생태계는, AI 기술의 발전으로 여전히 따라가기 벅찬 새로운 이정표를 찍고 있습니다. GPT-4o의 등장은 물론이고 앞으로 나올 AI 기술의 지원이라면, 책상 앞에 앉아 번거롭게 굳이 타이핑을 하지 않고도 이리저리 몸을 움직이면서 기록을 하는 일도 충분히 누릴 수 있겠다 짐작됩니다. 그럼에도 불구하고 글쓰기에 Git 버전 관리 정책을 적용하고 GitHub를 활용하는 것은, 그간의 작업 방식에 변화를 주는 것은 물론 AI 기술 활용에도 중요한 초석을 쌓는 것으로 정리해도 좋겠습니다.
그러니 지금, 여러분도 Git과 GitHub로 한번 시작해 봅시다.
생태계로 들어가는 일입니다.
GitHub는 개발자식 위키라고 할 수도 있습니다. 위키가 페이지(Page) 단위로 정보들이 구성된다면, GitHub는 저장소 안에서 여러 복합적인 파일들이 집합을 이룬 패키지(Package) 단위로 구성됩니다.
위키가 중앙 집중적인 시스템이라면, GitHub는 분산형 시스템입니다.
Git으로 나의 글을 버전 관리 환경 위에서 작성하고 GitHub의 저장소에 올리는 것은, 무한한 가능성을 지닌 생태계로 들어가는 일입니다. 앞서 생성된 긷자 광장(가칭)을 통해 그 첫발을 내디뎌 볼 수 있습니다. Git을 설치하거나 공개된 GitHub 저장소에 접근하는 것은 회원가입 절차가 필요하지 않습니다.
OS의 명령 프롬프트 사용이 익숙한 경우:
Git 설치
https://git-scm.com/
글쓰기를 위한 작업 폴더에서 명령 프롬프트를 띄운 뒤
git clone https://github.com/enchic/gitzza-plaza 입력
OS의 명령 프롬프트 사용이 익숙하지 않은 경우:
Git 설치
https://git-scm.com/
아래의 GitHub 저장소에서 압축파일을 다운로드해 작업 폴더 내에서 압축을 풉니다.
https://github.com/enchic/gitzza-plaza
Code > Download Zip
작업 폴더의 예:
C:\User\Gitzza\Desktop\MyBook
도움말:
`git clone {저장소}` 명령은 경로를 지정한 저장소의 모든 소스를 내 장비에 그대로 복사하겠다는 뜻입니다.
생태계 안에서 얽히고설키는 일입니다.
GitHub 저장소의 루트에는 제일 먼저 눈여겨 볼 파일이 하나 있습니다.
package.json
이는 저장소의 주요 정보를 담은 일종의 설정 파일입니다. 저장소에는 패키지를 운용하는 데에 필요한 모든 파일이 올라가 있지 않습니다. 패키지에 필요한 다른 패키지를 필요로 하는 경우도 있는데, 그러한 정보들을 담고 있기도 합니다. 만약에 저장소와 결혼을 한다면, 매우 투명한 배우자를 얻는 것과 같습니다. 출생 정보와 가족(의존성 모듈) 구성 정보도 담겨 있고, 친절하게 본인의 사용 설명서도 제공이 됩니다. 그러한 정보들이 package.json 안에 그리고 저장소의 루트에 담기게 되는 것이라고 정리할 수 있습니다.
브런치북 「글을 Git[긷]자」를 위한 공개 저장소의 package.json 내용은 아래와 같습니다.
https://gist.github.com/enchic/ac3cd0b835be82f608b242d9ac2c41ad
위 내용 중에는 devDependencies 항목과 dependencies 항목이 있는 것을 확인할 수 있습니다. devDependencies 항목은 개발환경에 필요한 다른 패키지의 선언들이 들어갑니다. 그리고, dependencies 항목에는 주 패키지에 필수적인 다른 패키지의 선언들이 들어갑니다. 마치 우리가 오롯이 혼자 존재할 수 없는 것처럼, ‘부모, 형제자매, 배우자, 자녀, 친구’와도 같은 중요한 의존성 모듈(다른 패키지)이 위치하는 항목입니다. 이렇게, GitHub를 한다는 것은 생태계 안에서 얽히고설키는 일입니다.
위 package.json 파일의 내용은 다음과 같이 정리된 것과 동일합니다. 다만, repository 항목에 대해서만 축약이 이루어졌습니다. 확장자가 json인 ‘JSON 파일’에 대해서는 다음에 한번 더 다루겠습니다.
https://gist.github.com/enchic/1bb9efc4061a1f2acf3ef4c8055b01c3
다 함께, Hello World! 대신 ‘달이 뜨렷다?’
작업 환경의 폴더에서 아래의 파일을 하나 만들어 봅니다.
when-moon.md
`달이 뜨렷다?` 를 아래와 같이 번역해 두고 보니, 파일 명으로 쓰기에는 너무 길어서 많이 줄인 것이 사용되었습니다.
So, the Moon's gonna comin' out?
VS Code에서 작업 폴더를 열고 위에서 만든 파일을 열어 봅니다.
그리고, 아래와 같이 작성합니다.
> 달이 뜨렷다?
> \- 이효석 作 「메밀꽃 필 무렵」 中
미리 보기를 열고, 다음과 같이 보이는 것을 확인합니다.
VS Code 마크다운 문서의 미리 보기 화면 모습`Hello World!` 는 프로그래밍 언어 학습을 위한 첫 단계에 항상 언급되는 표현입니다.
배우고자 하는 언어를 이용한 가장 기초적인 명령어 중 ‘문자열 출력’을 익히기 위해 사용되는 문자열로, 출력에 성공한다면 다음 단계로 넘어갈 수 있는 상태임을 확인하는 데에 쓰입니다.
본 브런치북에서는 저작권이 만료된 작가 이효석 작품 중 「메밀꽃 필 무렵」의 한 문장이 인용됐습니다.
연재 안내
브런치북 「글을 Git[긷]자」는 웹 서비스를 위한 UI/UX 개발자인 저자가, 다년간의 실무 경험을 바탕으로 Git과 GitHub 그리고 Visual Studio Code라는 무료 범용 텍스트 에디터를 이용한 글쓰기 방식을 제안하기 위해 기획되었습니다.
https://github.com/enchic/gitzza-plaza
