[confluence to tistory-5]이미지 삽입

이놈의 이미지 때문에 삽질을 며칠을 하였다.

이미지 썸네일 표시 안됨..

컨플루언스에 업로드 되어 있는 이미지는 권한이 있는 사용자(나)만 볼 수 있는 이미지이기 때문에, OAuth2.0으로 토큰을 발행받은 시점에 다른 이미지 저장소에 공개 이미지로 업로드 하여, 새로 발급받은 주소로 이미지 주소를 치환하여 첨부했었다. 지난 confluence to tistory-2 편에서 작업한 내용은, 이 공개 이미지 저장소로 imgbb 라는 사이트를 이용하는 것이었다. 하지만 포스팅 발행까지 어느정도 완료되고 나자 매우 거슬리는 문제 하나를 발견했다. 바로 이미지 썸네일이 보이지 않는 현상!!!

아래의 두개 포스팅과 같이 이미지를 첨부하면, 썸네일에 이미지가 출력되어야 하는데 현재 발행방식으로는 이미지가 썸네일에 노출이 되지 않는 문제가 있었던 것이다.

Tistory FileUpload API

고민과 테스트 끝에 Tistory 자체에서도 블로그에 종속되는 파일 첨부 기능과 관련한 API를 제공한다는 것을 알게 되었고(

그러게 API 문서를 조금만 잘 살펴 봤어도 삽집을 몇시간을 덜했니

) 테스트 결과 해당 방식으로 이미지를 첨부하면 썸네일도 잘 보여진다는 것을 확인하고 바로 수정 작업에 착수하였다.

구분	정보	비고
API 경로	https://www.tistory.com/apis/post/attach
매서드	POST
Query 파라미터1	access_token	값: api token
Query 파라미터2	blogName	값: 대상 블로그 이름
Query 파라미터3	output	값: json
Form 데이터	uploadedfile	값: 이미지 바이너리
호출 목적	티스토리에 이미지를 업로드 하고 치환자를 획득

 위와 같은 형태로 API를 호출하게 되면, 정상적으로 업로드 되었을 경우 다음과 같은 응답을 받는다.

{
  "tistory":{
    "status":"200",
    "url":"https://t1.daumcdn.net/cfile/tistory/1328CE504DB79F5932",
    "replacer":"

첨부파일

다운로드

"
  }
}

여기에서 주의할 값은 replacer 인데, 실제 포스팅 본문에 삽입될 값은 이 값을 기준으로 작성해야 하기 때문이다. 이미지가 삽입될 부분에 replacer 의 값을 입력하면 파일이 첨부된다.

그리고 정말로 파일이 첨부되었다.

그렇다. 저건 파일 업로드 API지 이미지 업로드 API가 아니었던 것이다. 기가 막히게도 어떤 이미지는 이미지로 보이고, 또 어떤 이미지는 이미지로 보이지 않았다. 다양한 케이스를 테스트 해보았지만 아직 케이스를 특정하지 못했다.. 하지만 해결방법은 찾았다. replacer의 포멧을 살짝 수정해 주는 것으로 가능하였다.

기존 형식은 아래와 같은데, 가장 앞쪽의 ##_1N 을 ##_Image 로 바꿔주면 모든 상황에서 이미지로 출력이 된다.(아마도…)

끝난줄 알았지?

이제 포스팅 핵심 기능이 완전히 끝난것으로 보였다. 그러나 예상치 못한 복병이 있었는데, 바로 용량이 큰 이미지였다. 사실 아직도 이해가 가지 않는데, 약 1.4메가 정도 크기의 이미지를 업로드 하였더니 업로드 결과는 200 으로 정상으로 표시되었으나, replacer 부분이 다음과 같이 비어있는 값으로 나왔다.

invalid-file

당연히 이 값으로 포스팅을 하여도 제대로 이미지가 표시가 될리는 없었다.(사실 아직까지도 용량이 문제인지는 정확하게 규명하지 못했으나, 최소한 내가 테스트한 케이스에서는 이미지 포멧의 문제는 아니었으며 오로지 용량이 큰 이미지인 경우에 이러한 현상이 발생해서 그렇게 추측하고 있다.)

고민끝에 생각해낸 방법은 이미지 용량을 줄여서 다시 업로드 하는 로직을 추가하는 것이었다. 이미 지쳐있는 상태였기 때문에 가장 빠르게 시도해 볼 수 있는 방법은 기존에 사용했었던 imgbb사이트를 활용하여, imgbb 사이트가 제공해주는 이미지 썸네일을 활용하는 것이었다. (중간에 thumbo와 같은 오픈소스를 활용해 볼까 잠깐 고민 했지만, 귀찮아서 redis도 사용하지 않은 마당에 thumbo를 올리기는 너무나도 귀찮은 상황이었다.)

모든 이미지를 썸네일 이미지만 사용하면, 해상도가 만족스럽지 않은 경우가 생기기 때문에 우선은 tistory에 먼저 업로드 해보고, 업로드 결과가 문제 없으면 통과! 아니면 imgbb를 활용해서 썸네일 이미지를 받아와서 다시 tistory 업로드 로직을 태우는 것이 대략적인 시나리오 였다.

결과는 성공이었다! 우선은 프론트 개발도 해야하기 때문에 이 정도로 마무리를 하고, 이후에 개선할 때에 이미지 용량을 최적화 하는 로직을 위해 좀더 아름다운 방법을 찾아봐야 겠다.