보기 좋은 코드가 쓰기에도 좋다
gist로 brunch에서 깔끔하게 코드 작성하기
많은 개발자들이 다양한 플랫폼에서 개발 블로그를 운영하고 있고 저 또한 이런저런 고민 끝에 브런치에 정착하게 되었습니다. 깔끔한 UI 때문에 만족하며 쓰고 있지만 코드를 깔끔하게 올리는 기능인 코드 스니펫이 지원되지 않았기에 선뜻 브런치를 추천하기엔 걸리는 감이 없지 않아 있었습니다. 개발자들에게 코드는 생명이니까요.
그래서 여태껏 이렇게 코드를 한 땀 한 땀 넣고 있었습니다.그러던 중 다행히도 작년 말에 브런치에서 공식적으로 gist 임베드를 지원하게 되어 브런치에서도 가독성 있는 코드를 올릴 수 있게 되었습니다. 이제 마음 놓고 브런치를 시작하게 된 겸 저 또한 블로그에 gist를 연동하는 건 처음이라 이번 시간에는 gist 코드를 브런치에 임베드하는 방법을 공유하고자 합니다.
먼저 gist란?
gist는 github에서 수정, 복사를 할 수 있는 공유 가능한 파일을 말합니다. 짧은 코드 조각들을 저장하고 공유할 수 있기 때문에 다양한 형태로 사용하고 있습니다. 블로그에서도 gist를 불러올 수 있고 실제로 해외 블로그 플랫폼 medium에서도 gist를 이용하여 활발하게 코드를 공유하고 있습니다.
1. gist 들어가기
코드를 불러오려면 먼저 코드를 만들어야겠죠?
gist 주소로 바로 접속하거나 github 페이지에서 아래와 같이 + 버튼을 클릭하면 나오는 New gist 버튼을 눌러 에디터 화면으로 접근할 수 있습니다.
2. 코드 추가하기
아래는 gist로 들어왔을 때 처음으로 볼 수 있는 에디터 화면입니다. 이제 빈칸들을 하나씩 채워볼까요?
각 항목에 대한 설명은 아래와 같습니다.
상단에는 추가할 코드에 대한 설명을 작성합니다. 그리고 중간에는 gist 파일명을 확장자를 붙여 작성하고 마지막으로 하단에 코드를 추가합니다.
참고로 파일 이름 끝에 확장자를 넣어주지 않으면 아래와 같이 코드 하이라이트가 적용되지 않아 아래 사진과 같은 삭막한 코드를 볼 수 있게 되니 주의하시길 바랍니다.
화면 하단 'Create secret gist' 버튼을 누르면 gist를 생성합니다. 사진에서도 알 수 있듯 gist의 저장 방법은 두 가지가 있는데 secret gist로 저장하게 되면 gist 공식 홈페이지에 gist가 노출되지 않지만 URL만 알고 있다면 접근이 가능합니다. 이와 반대로 public gist의 경우는 gist 홈페이지에 노출되기 때문에 다른 깃허브 유저들이 접근/검색할 수 있습니다.
어느 것을 선택해도 이번에 사용할 블로그 임베드 기능과 관련해서는 큰 차이가 없으므로 원하는 옵션을 선택하여 저장합니다.
3. URL 브런치에 가져오기
이제 만들어놓은 gist의 링크를 가져와 브런치에 적용해봅시다. 참고로 이전에 작성한 gist를 가져오고 싶다면 우측 상단 프로필 아이콘을 누르면 나오는 'Your gists' 버튼을 클릭해 생성한 gist들의 목록을 확인할 수 있습니다.
링크는 아래 화면과 같이 상단의 URL을 그대로 복사하거나 옵션 방법 중 Share 버튼을 클릭하여 나오는 주소를 복사하여 가져올 수 있습니다.
마지막으로 브런치 에디터에 복사한 주소를 붙여 넣고 엔터를 치면 아래와 같이 만들어놓은 코드가 화면에 나오는 모습을 확인할 수 있습니다. 이제 브런치에서도 깔끔하게 코드를 작성할 수 있게 되었습니다!
https://gist.github.com/swimjiy/e809780c4fd26ac162fa77115f446d80
마무리
gist가 추가되어서 좋은 점은 코드 하이라이팅이 된다는 것도 있지만 무엇보다 저작권 상의 이슈로 복사를 막고 있던 브런치 글에서 코드 복사가 가능해졌다는 것입니다.
임베드 상단에 주소가 뜨는 게 비주얼 상으로 조금 아쉽긴 하지만 이번 업데이트로 브런치가 개발 블로그로도 적합한 플랫폼이 될 수 있다는 점을 보여준 것 같아 앞으로도 관심을 갖고 브런치를 사용할 것 같습니다.
앞으로 브런치를 시작하시거나 하고 계신 개발자 분들께 오늘의 글이 조금이나마 도움이 되었길 바랍니다.
