Gist로 블로그에 소스 달기

개발하는 일을 주로 하다보니 좋은 소스코드가 있으면 마치 멋진 자동차, 값비싼 시계처럼 간직하고 싶어지곤 한다. 이때 소스코드를  블로그에 남기기 위해서 이전에 주로 사용했던 방법은 많은 사람들이 사용하는 SyntaxHighlighter 였다.

물론 SyntaxHighlighter를 사용해서 충분히 나만의 멋진 코드를 남길 수 있고, 필요한 사람들과 공유가 가능하다. 그런데 필자는 좀 더 소스코드를 활용하는 관점에서 또 다른게 없을까 고민을 하다가 몇가지 괜찮은 방법을 찾았다.

대표적인 간단한 소스코드 관리 및 블로그에 삽입하기 적당한 서비스는 JSFiddle, plnkr, Gist 다. 여기서 필자는 주로 Gist를 이용해서 블로그에 소스코드를 넣을 것이다. 특별히 Gist를 택한 이유는 Github에서 서비스 되기도 하고, 소스코드를 일목 요연하게 관리할 수 있기 때문이다.  또한 앞으로 JSFiddle, plnkr도 소스코드를 직접 실행하기 위해서 사용하게 될 것이다.

위에 언급한 것들은 블로그에 소스코드를 추가하는 것과 더불어서 직접 소스를 실행해 보면서 실습도 가능한 서비스다. 하지만 Gist는 직접 소스코드를 실행해 볼수는 없다. 사실 툴이라기 보다는 서비스라고 봐야 하겠다. 물론 여기 언급한 것들 말고도 웹에서 직접 소스를 편집하는 서비스들이 많이 생기고 있으니 관심이 있는 사람들은 검색해 보는 것도 좋겠다.

그럼 어떻게 간직하고 싶은 소스 코드를 블로그에 추가하게 되는지 과정을 살펴 보자.

1. Github에 접속 및 Gist 이동
    - 접속 후에 상단의 Gist 메뉴를 클릭해서 이동

2. 우측 상단 + 버튼을 눌러서 새로운 Gist 생성

3. 소스코드 작성 및 파일명 입력
    - 파일명과 확장자를 입력하면 자동으로 Language 선택 됨
    - 편집을 완료하면 Public(공개용), Pirvate(개인용) 선택해서 Create

4. 좌측의 Embed this gist를 눌러 주소 복사

5. 원하는 블로그에 복사한 주소를 입력
    - 예를 들기 위해서 여기 복사한 주소를 넣었다.



보다시피 깔끔하게 소스코드가 출력된다. 다만 소스코드를 실행해 보지 못한다는 단점이 있기는 하다. 기회가 된다면 소스코드 직접 실행도 가능한 다른 서비스도 다뤄보도록 하겠다. Gist의 장점은 소스코드를 한 곳에서 관리가 가능하고, 협업이 가능하다는 것이다. 굳이 이런 장점이 필요없는 사람들은 간단히 SyntaxHighlighter를 사용해도 훌륭하게 코드를 블로그에 넣을 수 있다.