시작하며

번역을 할 때 대상이 이미 doc파일같은 것이라면 사실 이 부분은 걱정하지 않아도 괜찮습니다. 하지만 만약 여러분이 책 번역등 의뢰를 받아 진행한다면 PDF로 책을 받을 가능성이 꽤 높습니다.
물론 PDF를 켜놓고 word창을 하나 옆으로 두 창을 띄워두며 한글로 번역해도 일이 가능하기는 합니다.
하지만 최근 React문서를 번역하며 사용했던 도구인 crowdin이나 Django문서 번역할때 사용하는 transifex를 떠올려보면 이게 무슨 삽질인가, 하는 생각이 듭니다.

그래서 여러분이 번역을 하기 위해 crowdin이나 transifex를 사용하려 사이트에 들어가보면,

월 단위 pricing인 것을 넘어 가격대가 상당히 높게 형성되어있는 것을 볼 수 있습니다. (ㅠㅠ) 저 두 서비스는 분명히 멋지고 좋은 서비스이지만 매달 가격을 지불하기에는 애매한 측면이 있어 다른 방법을 찾아보았습니다.

그러다 찾게 된 것이 바로 구글 번역가 도구였습니다.

이 구글 번역가 도구를 사용하면 상당히 다양한 형식의 문서를 번역할 수 있습니다.

문서

• HTML(.HTML)
• Microsoft Word (.DOC/.DOCX)
• 일반 텍스트(.TXT)
• 서식 있는 텍스트(.RTF)
• 위키백과 URL

광고

• 애드워즈 에디터 보관 파일 (.AEA)
• 애드워즈 에디터 공유 파일(.AES)

동영상

• YouTube 캡션
• SubRip(.SRT)
• SubViewer(.SUB)

기타

• 자바 애플리케이션 (.PROPERTIES)
• 애플리케이션 리소스 번들(.ARB)
• Chrome 확장 프로그램(.JSON)
• Apple iOS 애플리케이션(.STRINGS)

하지만 잘 보시면 우리가 받은 PDF파일을 바로 올릴수는 없게 되어있습니다.

자, 이제 ‘구글 번역가 도구에 올릴’ 파일을 만들기 위한 여정을 시작해봅시다.

PDF를 쪼개기

우리가 구글 번역가 도구에 올릴 최종 파일은 “1MB 이내의 .docx파일” 입니다. 왜 1MB냐고요? 구글이 그렇게 제한을 걸어서 그렇습니다 (ㅠㅠ)

만약 여러분이 1MB가 넘는 파일을 올리려 하시면…..

아래와 같이 에러가 납니다.

하지만 우리가 만약 PDF를 워드로 바꿔주고 나서 쪼개주려고 하면 상당히 귀찮습니다. 그래서 PDF를 먼저 목차대로 쪼개주는 것이 좋습니다.

우리는 https://www.sejda.com/split-pdf-by-outline라는 사이트를 이용할거에요.

사이트를 들어가주시면 아래와 같이 PDF를 올리라고 하는 부분이 나옵니다.

약간 아쉬운점은 무료는 200페이지 이내의 pdf로 제한이 걸린다는 점입니다. 그래서 저는 5달러를 지불하고 5일치 정액권을 구매해 이용했습니다.

무료는 속도 제한이 있기도 하고, 여기에서 여러 서비스를 사용할 것이기 때문에 5일권을 사서 진행하시는 것도 좋은 방법입니다.

물론 무료로 진행할 수 있는 곳도 있지만, 나중에 PDF Crop을 할 때 이 사이트를 또 사용하기 때문에 정액권을 사는 것을 추천합니다.(커피한잔값에 여러분의 정신건강을 지킬 수 있습니다.)

PDF를 올려주면 얼만큼 자세하게 쪼갤지 물어봅니다. Bookmark level이 바로 그 옵션인데요, 저는 대제목(챕터)로 자를 예정이라 1을 선택했습니다. 만약 좀 더 자세하게 소제목으로 잘라주고 싶다면 2정도를 선택해주시면 됩니다.

이제 Split by bookmarks를 클릭해주면 아래와 같이 다운로드 버튼이 나옵니다!

다운로드 받은 zip파일을 풀어주면 다음과 같이 챕터별로 잘 쪼개졌다는 것을 확인할 수 있습니다.

하지만 이 상태는 책 각 페이지에 머리말과 꼬리말이 들어가 있어 이 파일을 바로 워드파일로 변환해주면 머리말과 꼬리말이 같이 들어가 번역하기 귀찮은 상태가 됩니다. 그래서 이 부분을 제거해주어야 합니다.

머리말/꼬리말 제거해주기

이번에는 https://www.sejda.com/crop-pdf에서 진행합니다. 위에서 정액권을 구매했다면 여러개 파일을 동시에 넣어 crop을 돌릴 수 있습니다. (무료는 하나하나 넣어야 합니다)

위 사진의 Upload PDF Files를 눌러 파일 여러개를 동시에 crop할 수 있습니다. 우리가 위에서 목차대로 잘라준 경우처럼 책 사이즈가 같은 경우 굉장히 유용합니다.

우선 본문인 11~19번 파일만 업로드를 해보았습니다.

업로드가 완료되면 다음과 같이 Crop할 부분을 선택하라고 나옵니다. 문서 일부분이 화면에 겹쳐 나오기때문에 예상치 못하게 버려지는 부분이 생기는 것을 방지할 수 있습니다 :)

위 사진처럼 텍스트 부분만 선택하고 화면 아래의 CropPDF를 눌러주면 위에서와 같이 처리가 끝난 파일의 모음 zip을 받을 수 있습니다.

다운을 받아주고 확인해 봅시다. 글자 부분만 깔끔하게 잘 잘라준 것을 확인해 볼 수 있습니다!

글 일부분이 안보이는 것은 책이라 일부러 잘라 보이지 않는 부분입니다. 파일은 잘 처리되었다는걸 썸네일에서 확인할 수 있죠!

PDF를 워드파일(.docx)로 바꿔주기

이번에는 pdf2docx라는 서비스를 이용합니다. (무료입니다!)

우리가 방금 만들어준 ‘cropped_어쩌구.pdf’파일들을 업로드 해 주면 됩니다. 여러개 파일을 한번에 올릴 수 있어 편리합니다 ;)

업로드가 끝나고 변환작업이 완료되면 아래와 같이 Download All버튼이 활성화됩니다.

버튼을 누르면 pdf2docx.zip파일이 받아지고, 이 압축 파일을 풀어주면 다음과 같이 .docx파일로 변환된 파일들이 잘 들어오는 것을 확인할 수 있습니다.

하지만 잘 보시면 크기가 1MB를 넘는 파일이 보입니다. 저 파일들은 구글 번역가 도구에 올릴수 없습니다. 보통 문서가 1MB를 넘는 경우는 이미지의 크기가 큰 것이기 때문에, 이미지의 ppi를 조절해 파일 크기를 줄일 수 있습니다.

.docx파일 크기 줄이기(이미지 ppi줄이기)

1MB가 넘는 한 문서를 열어보니 이미지가 많아 보입니다. 하지만 이미지를 지우면 번역할때 어떤 내용을 다루는지 알아보기 어렵기 때문에 이미지의 해상도(ppi)만 낮춰주도록 하겠습니다.

우선 아래 스샷처럼 아무 이미지나 클릭해주고 나서 화면 위에 뜨는 ‘그림 서식’을 눌러주신 뒤, 핑크색으로 네모 표시 된 버튼을 눌러주세요.

그러면 ‘그림압축’ 메뉴가 뜨고 아래와 같이 그림 품질을 고를 수 있습니다.

최저 ppi인 96ppi로 맞춰주고 ‘잘려진 그림 영역 삭제’에 체크를 눌러주고 ‘이 파일의 모든 그림’으로 맞춰준 후 확인을 눌러주세요. 그리고 저장을 해주시면, 아래와 같이 파일 사이즈가 줄어든 것을 볼 수 있습니다. (기존 1.5MB -> 현재 1MB 조금 덜 됨)

구글 번역가 도구에 업로드하기

구글 번역가 도구 업로드에 다시 들어가 작아진 .docx파일을 올려줍시다.

언어 선택에 한국어는 기본적으로 없기 때문에 ‘ko’를 검색해 한국어를 추가하고 선택해줍시다.

이제 업로드가 끝나면 번역 업체를 누르라고 하는데, ‘아니오’를 눌러주면 됩니다.

업로드가 완료되면 아래와 같이 번역 목록에 뜹니다!

링크를 클릭해 들어가면 이제 아래처럼 번역 작업을 시작할 수 있습니다.

끝!

자, 이제 PDF파일로 된 책을 구글 번역가 도구에서 번역할 수 있도록 하는 작업이 모두 끝났습니다.

하지만 이 방식으로는 아쉬운 것이 세가지가 있습니다.

• 책의 포맷을 맞춰주세요:
  우리가 책을 crop했기 때문에 어렵습니다.
• 코드가 Indent가 제대로 되지 않아요:
  pdf to docx는 코드도 일반 문서로 해석합니다. (ㅠㅠ)
• TM(Translation memory)이 완벽하지 않아요:
  구글 번역가 도구가 TM관리가 약간 기능이 부족합니다. 그래도 무료잖아요!

하지만 이 세가지를 감안한다면 이 가이드가 유용하실 것이라 생각합니다. 번역하시는 모든 분들 화이팅!

이번 가이드를 따라가기 위해서는 HTTP(80/tcp) 포트가 열려있는 서버와 개인 도메인이 필요합니다.

들어가기 전

django, node.js, react, vue와 같은 웹 개발(Backend & Frontend)을 진행하다보면 모바일 디바이스나 타 디바이스에서 로컬 서버에 접근해야하는 경우가 있습니다.

하지만 보통 개발환경에서는 개발기기가 공인 IP를 갖고 있는것이 아니라 내부 NAT에서 개발이 이루어지고, 웹과 내부 개발기기 사이에는 방화벽이 있습니다. 집에서 개발한다면 공유기가, 회사에서 개발한다면 회사의 라우터 정책 기준이 있습니다.

일반적인 경우 네트워크 정책은 나가는(Outbound) 트래픽은 대부분의 포트가 열려있는 한편 들어오는(Inbound) 트래픽에는 극소수의 포트만 열려있습니다.

만약 로컬 서버에서 일반적으로 HTTP가 사용하는 80/tcp 포트로 서버를 띄어놓았다면 대부분의 경우 이 포트는 막혀있습니다. (개발용 서버인 8000/8080/4000/3000등도 마찬가지입니다. 극소수 빼고는 기본적으로 다 막아둡니다.)

이렇게 포트가 막혀있다면 우리가 로컬에 띄어둔 서버가 아무리 모든 IP에서의 접근을 허용한다고 해도 중간에 있는 라우터에서 막아버리기 때문에 LTE등의 모바일 셀룰러같은 외부에서의 접속은 사실상 불가능합니다.

따라서 이를 해결하기 위해 ngrok와 같은 SSH 터널링을 이용합니다. 하지만 ngrok 서비스 서버는 기본적으로 해외에 있고, 무료 Plan의 경우 분당 connection의 개수를 40개로 제한하고 있습니다. 만약 CSS나 JS, 이미지같은 static파일 요청 하나하나가 각각 connection을 사용한다면, 짧은 시간 내 여러번 새로고침은 수십개의 connection을 만들어버리고 ngrok은 요청을 즉시 차단해버립니다.

물론 keep-alive를 지원하는 클라이언트/서버 설정이 이루어지면 connection은 새로고침을 해도 늘어나지 않습니다. 하지만 모든 클라이언트가 keep-alive를 지원하지는 않습니다.

하지만 유료 플랜이라고 해서 무제한 connection을 지원하지는 않기 때문에 마음놓고 새로고침을 하기는 어렵습니다.

이번 가이드에서는 ngrok같이 로컬 개발 서버(장고의 runserver, webpack의 webpack-dev-server)를 다른 서버에 SSH Proxy를 통해 전달하는 법, 그리고 CloudFlare를 통해 HTTPS서버로 만드는 것까지를 다룹니다.

재료준비

80/tcp가 열린 서버가 있어야 합니다

이번 가이드에서는 80/tcp 포트가 열려있는 서버가 “꼭” 있어야 합니다. 물론 서버에는 공인 IP가 할당되어야 합니다. 그래야 나중에 CloudFlare에서 DNS설정을 해줄 수 있습니다.

만약 집에 이런 서버를 둔다면 포트포워딩을 통해 80/tcp만 열어줘도 됩니다.

한국서버가 가장 좋지만(물리적으로 가까우니까) 일본 VPS도 속도면에서 큰 손해를 보지는 않습니다. (물론 게임서버라면 약간 이야기가 다르지만, 웹 서버용으로는 충분합니다.)

이번엔 ubuntu server os를 세팅하는 방법으로 진행합니다. (ubuntu 14.04, 16.04 모두 가능합니다.)

(HTTPS를 쓰려면) 도메인이 있어야 합니다

개인 도메인이 있어야 CloudFlare라는 DNS서비스에 등록을 하고 HTTPS를 이용할 수 있습니다. 도메인이 없거나 HTTPS를 사용하지 않아도 되는 상황이라면 공인 IP만 있어도 무방합니다.

만들어보기

ubuntu 서버와 도메인이 준비되었다면 이제 시작해봅시다!

서버 세팅하기

서버 세팅은 크게 어렵지 않습니다. ssh로 서버에 접속해 아래 명령어를 그대로 입력해보세요.

1

sshd -T | grep -E 'gatewayports|allowtcpforwarding'

위 명령어는 sshd의 gatewayports속성과 allowtcpforwarding속성값을 가져옵니다. 만약 여러분이 ubuntu를 설치하고 아무런 설정을 건드리지 않았다면 다음과 같이 뜰거에요.

1
2

gatewayports no
allowtcpforwarding yes

우리는 저 두개를 모두 yes로 만들어야 합니다. 아래 명령어를 ssh에 그대로 입력해주세요.

1

sudo echo "gatewayports yes\nallowtcpforwarding yes" >> /etc/ssh/sshd_config

물론 /etc/ssh/sshd_config 파일에서 직접 수정해주셔도 됩니다.

유의: 이와같이 사용하면 서버의 모든 유저가 SSH Proxy를 사용할수 있게 됩니다. 이를 막으려면 아래와 같이 Match User 유저이름을 넣고 진행해주세요.

1
2
3

Match User beomi
  AllowTcpForwarding yes
  GatewayPorts yes

정말 간단하게 서버 설정이 끝났습니다 :)

로컬 8000포트를 원격 80포트로 연결하기

로컬 터미널에서 아래와 같이 명령어를 입력하면 설정이 끝납니다.

1
2

# ssh 원격서버유저이름@서버ip -N -R 서버포트:localhost:로컬포트 
ssh beomi@47.156.24.36 -N -R 80:localhost:8000

위 명령어는 47.156.24.36라는 ip를 가진 서버에 beomi라는 사용자로 ssh접속을 하고, 로컬의 8000번 포트를 원격 서버의 80포트로 연결하는 명령어입니다.

즉, localhost:8000 은 47.156.24.36:80와 같아진거죠!

이제 모바일 디바이스에서도 http://47.156.24.36라고 입력하면 개발 서버에 들어올 수 있어요.

CloudFlare로 SSL 붙이기

만약 서버주소를 외우는게 불편하지 않으시고 & HTTPS가 필요하지 않으시다면, 아래부분은 진행하지 않아도 괜찮습니다.

이 챕터에서는 CloudFlare에 도메인을 연결할 때 제공받을 수 있는 SSL서비스를 통해 HTTP로 서빙되는 우리 서비스를 ‘안전한’ HTTPS로 서빙하도록 도와줍니다.

CloudFlare의 Flex SSL을 사용하면 우리 서버가 HTTPS가 아닌 HTTP로 서빙되더라도 클라우드 플레어에서 HTTPS로 만들어줍니다.

사실 이 기능은 보안을 위해서 있는 서비스라고 보기는 어렵습니다. 물론 브라우저/클라이언트와 CloudFlare 간 통신에서는 좀 더 안전한 통신이 가능하지만, 도메인별로 다른 SSL 인증서를 사용하지 않고 여러 도메인을 그룹핑한 인증서를 사용하고 있는 문제가 있고, 결국 CloudFlare와 우리 서버간에는 HTTP로 통신이 이루어지기 때문에 CloudFlare와 우리 서버 사이 Node에서 이루어지는 공격은 막기 어렵습니다. 따라서 이런 경우는 Geolocation와 같은 HTTPS 위에서만 사용할 수 있는 기능등을 테스트 서버를 통해 구동할 경우 유용합니다.

우선 CloudFlare에 가입하고 도메인을 CloudFlare에 등록해주세요.

도메인을 등록하고 DNS 탭에 들어가서 다음과 같이 서브 도메인(혹은 루트 도메인)을 서버 ip에 연결한 후 우측 하단의 구름모양을 켜 주세요. 이 구름모양을 켜 주면 이 도메인으로 온 요청은 CloudFlare의 CDN망을 통해 전달됩니다. (CSS/JS캐싱도 해줍니다!)

도메인을 등록했으면 아래와 같이 Crypto탭에서 SSL을 Flexible로 바꿔주세요.

• off: 말 그대로 HTTPS를 끕니다.
• flexible: 우리 서버가 HTTP라도 클라우드플레어로 온 HTTPS요청을 우리서버에 HTTP로 바꿔서 보내줍니다.
• full: 우리 서버도 HTTPS가 지원되어야 하지만, 꼭 CA에게 인증된 ‘안전한’ 인증서일 필요는 없습니다. 자체서명 인증서라도 괜찮아요.
• full (strict): 우리 서버가 CA에게 인증된 ‘안전한’ 인증서를 통해 HTTPS로 서빙을 해야만 합니다. 자체서명 인증서는 쓸 수 없어요.

이 설정은 off에서 다른 옵션으로 바꿔주면 약간의 시간이 걸리지만 안전한 SSL 인증서를 CloudFlare에서 만들어줍니다.

proxy 명령어에 연결하기

보통 runserver와 같은 개발 서버를 띄우는 명령은 자주 사용하지만 우리가 사용하는 긴 명령어는 한번에 치기도 어렵고 옵션 기억하기도 귀찮은 경우가 많습니다. 쉘에서 지원하는 alias를 통해 아래와 같이 만들어줍시다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

# .zshrc / .bashrc / .bash_profile 와 같이 쉘이 켜질때 실행되는 부분에 넣어주세요

alias proxy="ssh beomi@47.156.24.36 -N -R 80:localhost:8000"
# alias proxy="ssh 원격서버유저이름@서버ip -N -R 서버포트:localhost:로컬포트"
``` 

이와 같이 입력하고 저장한 후 터미널을 다시 켜주면 이제 `proxy`라는 명령어를 치면 로컬 개발 서버가 HTTPS로 세상에 오픈되는 것을 볼 수 있습니다 :)

## 마치며

ngrok는 아주 간편하고 좋은 서비스입니다. 하지만 모바일과 PC 웹을 동시에 테스트 하는 경우 connection개수를 금방 넘어버리고 ngrok를 새로 실행할 때마다 도메인 이름이 바뀌는점이 불편해 위와 같이 Proxy서버를 만들어 개발하는데 사용합니다.

다만 CloudFlare의 CSS/JS캐싱 전략에 의해 변경된 파일이 가져와지지 않는 점은 있는데, 이때는 Apache등의 웹서버에서 제공하는 virtualhost기능과 let's encrypt의 무료 SSL 서비스를 조합해 사용하면 CloudFlare없이도 동일하게 환경을 만들어 줄 수 있습니다. 하지만 웹서버 자체에 대한 이해가 필요하며 SSL을 붙이는 일도 상당히 귀찮기때문에 단순하게 CloudFlare에서 도에인 모드를 아래와 같이 'Development Mode'로 설정해 주면 캐싱 하는 것을 방지할 수 있습니다.

![](https://d1sr4ybm5bj1wl.cloudfront.net/img/dropbox/Screenshot%202017-08-27%2014.42.36.png?dl=1)

### 여담

django의 경우에는 `settings.py`파일의 `ALLOWED_HOSTS`에 우리가 지정한 도메인 (ex: shop.testi.kr)을 추가해줘야 합니다.

```python
# settings.py

ALLOWED_HOSTS = ['*'] # 모든 Host에서의 접근을 허용
# ALLOWED_HOSTS = ['shop.testi.kr'] # shop.testi.kr 도메인 host를 통한 접근을 허용

webpack의 webpack-dev-server에서 위와같이 사용하려면 webpack.config.js파일을 아래와 같이 만들어주면 됩니다.

1
2
3
4
5
6
7
8
9
10
11
12
13

// webpack.config.js
const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    devServer: {
        host: "0.0.0.0", // 모든 host에서의 접근을 허용
        disableHostCheck: true // Host Check를 끕니다
    }

본 가이드는 MacOS에서 이용가능합니다.

이전 가이드: 편리한 깃헙페이지 블로깅을 위한 이미지서버, 구글드라이브: 업로드 ShellScript편

터미널에서 gdrive list라고 했을때 에러가 나지 않는 상태에서 아래 가이드를 진행해주세요.

들어가며

이전 가이드에서 스크린샷을 찍고 구글드라이브에 올린 후 이미지의 공유 URL을 가져오는 스크립트를 작성했습니다.

하지만 키보드 Shortcuts를 이용한 편리성에는 따라가기가 어렵죠. .sh스크립트를 키보드로 연동하는 방법 중 여러가지 방법이 있지만, 이번에는 MacOS App으로 만든 후 앱을 실행하는 것을 서비스에 등록하고 Automator를 통해 키보드와 앱실행 서비스를 연동하는 과정을 다룹니다.

만약 잘 동작하는 맥용 앱을 바로 다운받으시려면 CaptureToGdrive.zip을 받아주신 후 압축을 푸신 후 앱을 Application폴더로 옮기신 후 [백투더맥 Q&A] 키보드 단축키로 응용 프로그램을 실행하는 바로 가기 만들기 과정을 따라가시면 됩니다.

SH파일을 앱으로 만들기

우선 .sh파일로 된 스크립트를 맥용 앱으로 Wrapping해주는 작업이 필요합니다. 이번 가이드에서는 이 작업을 간소화해주는 platypus를 이용합니다.

platypus는 platypus.zip을 받고 압축을 풀어 사용하시면 됩니다.

앱을 실행하면 아래와 같은 화면이 뜹니다.

App Name을 CaptureToGdrive로, Script Type을 bash로, Script Path는 아래의 +New를 눌러 아래와 같이 코드를 입력해 줍시다.

1
2
3
4
5
6
7
8

#!/bin/bash

screencapture -tpng -i /tmp/temp_shot_gdrive.png
DATEFILENAME=`date +"%Y%m%d%H%M"`
ID=`/usr/local/bin/gdrive upload /tmp/temp_shot_gdrive.png --name screenshot${DATEFILENAME}.png --share | egrep "^Uploaded" | awk '{print $2}'`
URL="https://drive.google.com/uc?id=${ID}"

echo ${URL} | pbcopy

위 코드는 이전 가이드에서 다뤘던 것과 약간 다른데요, gdrive명령어의 위치를 명확히 /usr/local/bin/gdrive로 바꿔준점이 다릅니다. 쉘 스크립트를 사용할 때 명확히 하지 않으면 gdrive의 PATH를 잡지 못해 에러가 나기 때문입니다.

만약 다른 위치에 까셨다면 which gdrive명령을 통해 그 위치로 변경해주시면 됩니다.

스크립트를 입력하고 나면 AppName이 초기화되는 사소한 문제가 있으니 다시 AppName을 등록해 줍시다.

스크린샷 촬영은 인터페이스가 필요없기 때문에 Interface는 None으로, root권한이 필요없고 백그라운드일 필요도 없고 프로그램이 굳이 계속 떠 있을 필요가 없기때문에 모든 체크박스는 아래와 같이 체크해제 해두시면 됩니다.

이제 CreateApp을 클릭하고 아래와 같이 클릭한 후 Create를 누르면 앱이 만들어집니다 :)

만들어진 앱을 실행해 보시고 잘 되시는지 확인해보세요.

앱을 키보드로 연결하기

이 부분은 좀 더 잘 정리되어있는 [백투더맥 Q&A] 키보드 단축키로 응용 프로그램을 실행하는 바로 가기 만들기을 참고하시기 바랍니다.

마치며

이번 가이드에서는 업로드 되는 폴더를 정확히 명시하지는 않았습니다. gdrive패키지에서 -p를 이용하면 폴더를 지정가능하다고 하지만 테스트 결과 제대로 업로드 되지 않는 것을 확인했기 때문에, 현재 주로 사용하지는 않는 다른 구글 아이디에 gdrive를 연결해 두었습니다.

Imgur, Dropbox등 여러 이미지 Serving 업체들이 있지만, 구글이 가진 구글 Fiber망과 서비스의 안정성은 여타 서비스들이 따라가기 어려운 점이라고 생각합니다 :)

본 가이드는 MacOS에서 이용가능합니다.

들어가며

깃헙 페이지를 Jekyll등을 이용해 Markdown파일을 이용하다보면 스크린샷을 저장하고 깃헙 레포 폴더에 옮긴 후 수동으로 url을 추가해 주는 작업이 상당히 귀찮고, 심지어 깃헙 레포당 저장공간은 1G로 제한됩니다.

Dropbox의 경우에는 MacOS 내장 스크린샷(CMD+Shift+4)를 이용할 경우 파일을 자동으로 dropbox에 올린 후 공유 url이 나옵니다. 하지만 일반 유저는 용량 제한도 있고, 트래픽 제한도 있습니다.

따라서 무료로 15G의 용량과 명시적 트래픽 제한이 없는 구글드라이브를 이용하는 방안을 고려해보았습니다.

정확히는 Github은 레포당 용량을 명시적으로 제한하지는 않지만 1G가 넘어가는 경우 스토리지를 이용하도록 가이드합니다. Dropbox링크를 통한 트래픽은 무료 유저의 경우 일 20G, 유료플랜 유저의 경우 일 200G를 줍니다. GoogleDrive의 경우 무료 계정도 일 100G(추정치)의 트래픽을 제공하기 때문에 큰 무리는 따르지 않는다 생각합니다.

Gdrive 설치하기

이번 가이드에서는 Gdrive를 이용합니다.

Homebrew를 통해 간단히 설치할 수 있습니다. 터미널에서 아래와 같이 입력해 주세요.

1

brew install gdrive

Gdrive AUTH

gdrive를 설치하고 나서, gdrive가 구글드라이브에 액세스 할 수 있도록 권한을 부여해야 합니다.

아래 명령어는 구글드라이브의 최상위 디렉토리를 리스팅 하는 명령어인데, 이 과정에서 드라이브 액세스 권한을 요구하기 때문에 자연스럽게 권한 등록이 가능합니다.

1

gdrive list

명령어를 입력시 아래와 같은 창이 뜹니다. 절대 창을 끄지 마시고 아래 안내되는 구글 링크로 들어가세요.

보안을 위해 키 일부를 지웠습니다. 원래는 회색 빈칸이 없습니다 :)

링크를 따라가시면 구글 로그인을 요구합니다. 로그인을 하시면 아래와 같은 권한 요구 창이 뜨는데요, ‘허용’을 눌러주시면 됩니다.

허용을 누르면 아래와 같은 코드가 나옵니다. 이 코드를 아까 터미널 창에 복사-붙여넣기를 해주세요.

만약 코드가 정상적이었다면 아래와 같이 최상위 디렉토리의 폴더/파일 리스트가 나타납니다.

capture.sh파일 만들기

Gdrive가 정상적으로 구글 계정과 연결되었다면, 이제 capture.sh파일을 만들어야 합니다. 파일의 코드는 아래와 같습니다. 복사 하신 후 원하시는 위치에 넣어주세요. (저는 ~/capture.sh로 두었습니다.)

1
2
3
4
5
6
7
8
9

#!/bin/bash
# ~/capture.sh
screencapture -tpng -i /tmp/temp_shot_gdrive.png
DATEFILENAME=`date +"%Y%m%d%H%M"`
# use -p id to upload to a specific folder
ID=`gdrive upload /tmp/temp_shot_gdrive.png --name screenshot${DATEFILENAME}.png --share | egrep "^Uploaded" | awk '{print $2}'`
URL="https://drive.google.com/uc?id=${ID}"

echo ${URL} | pbcopy

우선 이 스크립트 파일에 실행권한을 줘야 합니다.

1

chmod +x capture.sh

이제 ./capture.sh명령을 입력하면 캡쳐메뉴로 진입하고, 캡쳐를 진행하고 잠시 기다리면(업로드 시간) 클립보드에 구글드라이브로 공유된 파일의 URL이 복사됩니다.

rc파일(.zshrc/.bashrc)에 alias걸기

capture.sh파일을 둔 위치가 ~/capture.sh라고 가정하고, ~/.zshrc(혹은~/.bashrc) 파일을 수정해 주겠습니다.

항상 ./capture.sh라고 입력하는 것은 귀찮은 일이기 때문에, alias를 통해 cap라는 명령어를 캡쳐 명령어로 지정해 봅시다.

.zshrc나 .bashrc파일 제일 아래에 아래 코드를 덧붙여주고 저장해줍시다.

1

alias cap="~/capture.sh"

터미널을 재실행한 후 cap라는 명령을 치면 캡쳐 도구가 뜹니다!

다음 가이드: 앱으로 만들어 단축키로 연결하기

기본 스크린샷처럼 키보드 단축키 만으로 스크린샷 링크를 가져올 수 있다면 훨씬 편리하겠죠?

다음 가이드에서는 이번에 만든걸 앱으로 만들어 스크린샷 단축키로 연결하는 과정을 다룹니다.

다음가이드: 편리한 깃헙페이지 블로깅을 위한 이미지서버, 구글드라이브: 앱으로 만들고 키보드 단축키 연결하기

완성된 앱도 함께 제공합니다!