프롤로그
제가 이 블로그를 처음 만들면서 모티브가 되었던 사이트는 Velog입니다. 그래서 Velog의 글쓰기 기능을 참고하여 직접 글쓰기 기능을 만들었는데요.
진행하다보니 첫 블로그 운영 계획과 다른 방향으로 흘러가는 느낌이었어요.
‘요금을 부과하지 않아도 되는 Uncharged blog를 운영해 보자'라는 접근으로 시작했기 때문에, 점차 몇 가지 문제점이 드러나기 시작했습니다.
첫 번째는 이미지를 넣기 위해선 서버 내 이미지 폴더에 넣어줘야 한다는 점입니다. S3와 같은 Bucket을 사용하지 않기 때문에 이미지가 포함된 글을 쓰려면 결국 로컬 환경에서 작업해야 하는 큰 단점이 있었습니다. 환경이 달라지면 블로그 글을 쓸 수 없는 상황이 되는 것은 제게 명백히 좋지 않으므로 최우선 개선점이었어요.
두 번째는 필자는 글쓰기를 한 번에 보통 다 쓰지 못하는 편이기 때문에 저장해뒀다가 다음에 재작성하는 경우가 많은데요. 같은 기기 환경에서는 브라우저 저장소를 이용하면 됐지만, 다른 기기에서 이어 작성하기 위해선 수동으로 카카오톡 내게 쓰기, 메일 내게 쓰기 등을 활용해야 했습니다. 여러 기기를 오가며 사용하는 제겐 꽤 불편한 사항이었습니다.
이 외에도 아무나 글을 쓸 수 없도록 인증을 구현하는 등 번거로운 작업이 많아졌습니다. 만들어 둔 기능이었지만 앞으로도 수정 사항이 계속 생긴다면 블로그를 운영하는 데 배보다 배꼽이 커지는 상황이 생기겠더라고요. 이런 고민을 사내 팀원 분과 이야기하다가 Notion API에 대한 이야기를 듣게 되었어요. 세상에 그런 좋은 기능들을 제공하고 있다니 😮 바로 사용해 봐야겠죠?
Notion API는 만능이 아닐지도?
획기적인 Notion API를 알아본 뒤 제 첫 소감은 '아쉽네🤔' 였습니다. 왜냐고요?
두 번째로 언급했던 문제는 Notion을 사용하면 자연스럽게 해결되지만, 첫 번째 문제가 해결이 안 되었기 때문입니다.
Image 만료기간
제가 작성한 노션 블로그 데이터베이스는 Private로 설정되어 있습니다.
그래서인지 API를 통해 가져온 Markdown에서 이미지 Block의 URL을 확인해 보면 만료기간이 3600초로 고정되어 있습니다. 이미지 저장 방식으로 S3를 이용하지 않고자 Notion을 활용하려 했는데 만료 기간이 있다니! 아마 개인 페이지의 데이터가 외부로 유출됐을 때를 고려한 Notion의 예외 처리로 보입니다.
아직 포기할 순 없겠죠?
혹시나 하는 마음으로 만료 기간을 조절할 방법이 있을지 찾아보던 와중에 어느 개발 블로그에서 Notion에 내 페이지를 외부 공유한 페이지에서 이미지 경로를 확인해 보면 만료 기간이 없다는 점을 알려줬습니다. 그러면 외부 공유 페이지의 이미지 경로의 querystring 값을 파악한 뒤 내가 받아온 notion block data를 커스텀하면 되겠다는 생각이 듭니다.
바로 파악하러 가볼까요?
이미지 경로 차이 파악하기
우선 커스텀하기 위해선 어떤 차이가 있는지를 알아야 했습니다.
Notion API를 통해 가져온 Image의 경로는 아래와 같습니다. ( 일부 생략 )
https://prod-files-secure.s3.us-west-2.amazonaws.com/ [FirstKey]/[SecondKey]/{...}&X-Amz-Date=20240310T080002Z&X-Amz-Expires=3600&{...}
그리고 외부 게시된 페이지에서 Image의 경로를 확인하면 아래와 같습니다. ( 일부 생략 )
https://[myNotionName].notion.site/image/ https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com %2F[FirstKey]%2F[SecondKey]%2FUntitled.png? table=block&id=[BlockID]&spaceId=[FirstKey]&width=1510&userId=&cache=v2
경로는 다소 다르지만 어쨌든 필요한 키 값만 알면 충분히 커스텀 할 수 있을 것 같습니다.
제가 적어둔 FirstKey, SecondKey는 확인 결과 서로 값이 동일한 키 값입니다. Notion API를 통해 받은 Image의 경로에서 키들을 추려내 두 번째 경로에 알맞게 키 값을 넣은 뒤 데이터를 변경해 주면 됩니다. 디테일한 구현 요소들은 한 번 직접 해보시는걸 추천드립니다 🙂 어렵지 않아요!
성공하셨다면 앞으로 노션을 Bucket, Database로 활용해서 블로그를 만들 수 있겠네요! 축하드립니다.
마무리
저는 이 방법을 통해 현재 제 블로그를 Notion API 기반으로 변경하는 작업을 진행 중에 있습니다.
다만, Notion에서 제공하는 이미지의 URL(내부, 외부 공유 모두 포함)은 언제든 형태가 변경될 여지가 있으므로 영구적인 방법은 아님을 알려드립니다.