노션에 첨부된 이미지 URL 만료 없이 사용하기.
목차 펼치기
머리말
머리말
노션에 첨부한 이미지를 사용하는 경우, 일정 시간이 지나면 이미지가 보이지 않는 현상이 발생했다.
처음 작업할 때는 긴 url을 그냥 사용해서 몰랐는데, 막상 뜯어보니 파라미터에 만료시간이 존재했다. 아래 URL이 그 예시인데,
X-Amz-Date,
X-Amz-Expires라는 쿼리 파라미터를 볼 수 있다.
😇
승
승
개인 S3를 만들어야하나 어찌해야하나라는 고민을 하며 혹시 나와 같은 고민을 한 누군가가 있지 않을까 구글을 찾아보니 dezang.net이라는 블로그를 운영하는 분께서 비슷한 고민을 하셨고 해결한 내용을 공유해주는 글을 찾았다. 덕분에 어떤 방식으로 풀면 될 지를 알게 되어 너무 감사했다.
사용한 방법은 노션의 페이지를 웹에서 공유하기를 적용하여 생기는 링크를 활용하여,
페이지가 공유된 웹사이트 내의 이미지를 가져오는 방법이었다. 바로 노션 페이지의 이미지를 가져오는 것과는 경로가 다르다. 어쩜 이런 생각을 하셨을까.
전
전
그럼 공유된 웹사이트 내에서 이미지 주소는 어떻게 사용되고 있나 확인해보니 다음과 같이 사용되어지고 있었다.
웹 URL이 노션 URL과 다른 점을 하나씩 틀린그림찾기를 해보니 차이점은 다음과 같다.
내 노션 도메인으로 시작하여 노션 URL이 따라온다.
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://에 포함되어져 있는 특수문자를 대응해주기 위해서다.
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까지 손쉽게 구축했다. 아래는 이미지 태그를 사용한 최종 코드이다.
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
P.S
혹시 노션을 웹 페이지에 공유하기가 아닌 원본 URL확인으로 해결할 수도 있을까 하여 확인해봤다. 노션 페이지에서 원본보기를 할 경우 생기는 주소인데,
/f/s/뒤에 오는 id값이 어떤 id인지도 모르겠고, 파라미터에서도 만료처리를 위한 timestamp가 존재하며(
expirationTimestamp)
signature라는 파라미터까지 사용되어지는 걸로 봐서 바로 포기했다.