노션에 첨부된 이미지 URL 만료 없이 사용하기.

작성 : 2023-04-15수정 : 2023-04-15

목차 펼치기

머리말

노션에 첨부한 이미지를 사용하는 경우, 일정 시간이 지나면 이미지가 보이지 않는 현상이 발생했다.

처음 작업할 때는 긴 url을 그냥 사용해서 몰랐는데, 막상 뜯어보니 파라미터에 만료시간이 존재했다. 아래 URL이 그 예시인데,

X-Amz-Date

,

X-Amz-Expires

라는 쿼리 파라미터를 볼 수 있다.


노션 URL


😇


개인 S3를 만들어야하나 어찌해야하나라는 고민을 하며 혹시 나와 같은 고민을 한 누군가가 있지 않을까 구글을 찾아보니 dezang.net이라는 블로그를 운영하는 분께서 비슷한 고민을 하셨고 해결한 내용을 공유해주는 글을 찾았다. 덕분에 어떤 방식으로 풀면 될 지를 알게 되어 너무 감사했다.


사용한 방법은 노션의 페이지를 웹에서 공유하기를 적용하여 생기는 링크를 활용하여,

페이지가 공유된 웹사이트 내의 이미지를 가져오는 방법

이었다. 바로 노션 페이지의 이미지를 가져오는 것과는 경로가 다르다. 어쩜 이런 생각을 하셨을까.


그럼 공유된 웹사이트 내에서 이미지 주소는 어떻게 사용되고 있나 확인해보니 다음과 같이 사용되어지고 있었다.


웹 URL

웹 URL이 노션 URL과 다른 점을 하나씩 틀린그림찾기를 해보니 차이점은 다음과 같다.

  1. 내 노션 도메인으로 시작하여 노션 URL이 따라온다.

  2. table

    ,

    id

    ,

    spaceId

    ,

    width

    ,

    userId

    ,

    cache

    파라미터를 사용한다.


파라미터를 제외한 웹 URL만을 호출하면 다음과 같은 오류 문구가 발생한다.

{"errorId":"465b5b04-fb7b-46b6-9d45-e0909e709129","name":"ValidationError","message":"For secure file URLs, must specify table and id."}
table

id

만 필수 파라미터인 걸 확인할 수 있었다.


이제 파라미터를 하나씩 톺아보았다.

  • table

    : block으로만 줘서 사용한다.

  • id

    : 노션 페이지 내 이미지가 사용된 블럭의 id이다.

  • spaceId

    : 어디서도 찾을 수 없었다. 확인 결과 필수값은 아니므로 제외한다.

  • width

    : 리사이징에 필요한 파라미터로 srcSet을 구축할 때 요긴하게 사용할 수 있다.

  • userId

    : 빈 값이므로 제외한다.

  • cache

    : 캐싱까지 적용시켜주나보다. 동일하게 v2로만 줘서 사용한다.


이제 내 입맛에 맞는 이미지 URL을 생성할 수 있게 되었다.

노션 컨텐츠 내 이미지 블럭의

id

image

데이터를 확인한 후, 내 노션 도메인을 접두어로 붙여주고, 이미지의 URL에는

encodeURIComponent

를 적용해주었다. 이유는

https://

에 포함되어져 있는 특수문자를 대응해주기 위해서다.

typescript
1const { id, image } = imageBlock
2const url = image
3  ? `https://squary.notion.site/image/${encodeURIComponent(image.file.url)}?table=block&id=${id}&cache=v2`
4  : ``

기본 이미지 URL 변수 생성


캐시서버까지 제공해주는 걸 알차게 포함시켜준 뒤, 이 URL을 사용해서

srcSet

까지 손쉽게 구축했다. 아래는 이미지 태그를 사용한 최종 코드이다.


typescript
1<img
2  srcSet={`${url}&width=540 380w,
3  ${url}&width=1140 760w,
4  ${url}&width=1536 1024w,`}
5  sizes="100vw"
6  src={`${url}`}
7  alt={image.caption?.length > 0 ? image.caption[0]?.plain_text : ''}
8/>

img 태그에 srcSet 적용하기



이렇게 별도의 이미지 서버 구축 없이 노션의 이미지를 잘 활용할 수 있게 되었다.
이제 추후에 노션을 이미지 서버로도 사용할 수 있다는 걸 알게 되었다. 😎

스페셜 땡스 투..

노션



P.S

혹시 노션을 웹 페이지에 공유하기가 아닌 원본 URL확인으로 해결할 수도 있을까 하여 확인해봤다. 노션 페이지에서 원본보기를 할 경우 생기는 주소인데,

/f/s/

뒤에 오는 id값이 어떤 id인지도 모르겠고, 파라미터에서도 만료처리를 위한 timestamp가 존재하며(

expirationTimestamp

)

signature

라는 파라미터까지 사용되어지는 걸로 봐서 바로 포기했다.


Contact Me

All Icons byiconiFy