블로그와 글쓰기를 다시 시작하기로 마음을 먹었다. 가장 먼저 하고 싶었던건 글쓰기에 최적화된 환경을 만들고 싶었다. 마크다운 에디터를 찾아보던 중 Typora라는 에디터가 눈에 들어왔다. 앱 자체가 상당히 미니멀하고, 필요한 기능들만 쏙쏙 들어있어 마음에 들었다. 하지만 클라우드 저장이나 이미지 업로드 및 자동 저장을 하려면 몇 가지 세팅이 더 필요했다.

목표

Typora를 사용하면서 더 편리한 환경을 만들기 위한 목표가 있었다.

1. 파일 저장 시 자동으로 클라우드에 저장하기
   • Google Drive를 이용
2. 이미지 업로드시, 자동으로 링크 변환 및 파일 저장
   • CloudFlare R2를 이용

해결

생각보다 위의 목표를 달성하는건 어렵지 않았다. 몇가지 세팅만 해준다면 더욱 편한 환경에서 글을 작성할 수 있을 것이다!

세팅 환경은 Mac OS 기준으로 작성하였습니다. 다만 Windows도 크게 다르진 않을것 같습니다.

Google Drive앱을 이용하여 실시간 업로드

1. 데스크톱용 구글 드라이브 앱을 설치합니다.
2. 구글 드라이브 폴더 경로에 Typora에서 사용할 폴더를 만듭니다.
3. Typora를 실행 후 좌측 하단에 폴더 열기를 누르고 위에서 만든 폴더로 연결합니다.

이제 폴더 내에서 자유롭게 파일을 만들고 저장을 한다면 자동으로 구글 드라이브에 업로드됩니다. 🙌

번외 팁

Typora를 재시작하면 폴더를 계속 열어줘야하는데 설정에서 [Files]-[프로그램 시작 시]-[마지막 파일과 폴더 열기]로 설정해주면 재실행해도 작업중인 파일이 열리게 됩니다!

CloudFlare R2, PicGo를 이용해 Typora에 이미지 자동 업로드 구축

Typora에 이미지를 드래그하면 자동으로 CloudFlare R2에 이미지를 업로드하고 링크를 변환하여 반환하도록 해보겠다.

도메인 구입

도메인 구입부터 이미 지갑이 열리는 단계지만 R2에서 제공하는 Public Development URL 보다 나은 몇 가지 장점이 있기 때문에 구매하는 것을 추천한다.

커스텀 도메인 장점 및 차이

1. 나중에 R2대신 다른 버킷 서비스를 사용하기 용이하다.
2. r2.dev는 속도제한이 걸려 있기 때문에 트래픽이 올라간다면 이미지 로드가 안될 수도 있지만 그럴 걱정이 없다.

[Domain Registration] - [Register domains]에 진입하여 원하는 도메인을 검색해보고 적당한 가격의 도메인을 구매한다. (저는 .com으로 끝나는 도메인을 구매하였습니다. (작성 시점 $10.46달러))

저 가격은 1년 단위 가격이며 매년 60일전 자동 갱신되니 구매전 잘 보고 체크!

CloudFlare에서 도메인을 구매하면 별다른 설정 없이 인증서등 다 세팅이 되니 꽤나 간편하다.

CloudFlare R2설정

CloudFlare 계정을 생성 후 R2서비스에 들어가 적당한 이름으로 Bucket을 새로 만들어준다.

위에서 도메인을 구매한 경우 Custom Domains를 추가, 구매하지 않은경우 Public Development URL을 추가한다.

이미지 업로드 용이므로 서브도메인 (img.)을 달아주는걸 추천한다. 그리고 각 도메인은 복사해둔다.


R2 Overview에 들어가 R2에 접근할 API를 만들어줘야 한다. Account Details에 Manage 버튼을 눌러 Account API Token을 하나를 추가한다. 추가 시 읽기권한과 쓰기권한이 모두 포함된 항목을 클릭한다.

만들어진 Token화면에서 Token Value, Access Key ID, Secret Access Key, S3 Clients 값들을 모두 메모장에 저장한다.

PicGo 플러그인 설치 및 세팅

PicGo는 이미지를 업로드하고 바로 링크로 변환해주는 유틸리티 앱이다. 마크다운 형식의 글속 이미지를 삽입할때 사용하기 적합한 앱이다.

1️⃣ Picgo는 Github에서 설치가 가능하므로 바로 설치해준다. 설치 링크

2️⃣ PicGo 앱은 중국어만 지원하므로 Typora 설정에서 중국어로 변경뒤 이미지 업로드 설정에서 PicGo.app을 설정해준다.

( PicGo.app으로 설정뒤 다시 원래 언어로 변경해도 됨)

3️⃣ PicGo앱을 실행해 S3 플러그인을 받아준다

4️⃣ Picbeds Settings - Amazon S3 설정에 들어가 하나 만들어 준뒤 아래 항목들을 채워준다.

• Configuration Name - 적당한 이름 입력

• 应用密钥 ID: Cloudflare에서 생성한 Access Key ID

• 应用密钥: Cloudflare에서 생성한 Secret Access Key

• 桶名: Cloudflare R2 버킷 이름

• 上传文件路径: 이미지 저장 경로/파일명

  • ex: {fileName}.{extName}

• 自定义节点: Cloudflare R2 엔드포인트 (아까 복사한 S3 Clients 항목)

• 自定义输出URL模板: 이미지 업로드 후 생성되는 URL 형식 (R2에서 설정한 커스텀 도메인 or Public Dev Url)

  • ex: https://img.kyc521.com/{fileName}

결과

여기까지 세팅이 완료되었다면 Typora에 이미지를 드래그 앤 드롭할 시 자동으로 이미지가 R2에 저장되며 자동으로 링크가 생성되는걸 확인할 수 있다.