노션 API를 이용한

저장소 만들기

저장소 만들기

과정 소개

노션 API를 이용한

저장소 만들기

노션을 데이터베이스로 활용하여, 기록이 쌓이는 나만의 공간을 만듭니다.

3시간 소요

원하는 저장소 모습을 구상하고 노션에 데이터베이스화 한다
노션을 데이터베이스로 사용할 수 있도록 세팅한다
데이터를 조회하기 쉬운 UI로 꾸민다
누구나 열 수 있는 주소로 배포한다
수업이 끝난 뒤에도 혼자서 바이브코딩으로 만들고 고쳐 나갈 수 있게 된다

이런 기록 공간이 필요하다면, 이 수업에서 만들어 보세요

하루끝 그림일기 화면. 스프링 노트 위에 번호와 태그가 붙은 그림 칸이 차례로 놓이고, 아래에 색깔별·주제별로 골라 보는 버튼이 있다

예시 홈페이지

이 수업에서 다루는 노션 데이터베이스, 태그, 골라 보기를 모두 써서 만든 페이지입니다.

가이드의 그림일기 (saeharu.com/end-of-day) 보기 ↗

수업에서 하는 일

Claude Code로 만들고 고쳐보기만들고 싶은 것을 말로 설명하면 Claude Code가 코드를 씁니다. 결과를 보고, 다시 말해서 고쳐 나갑니다.
노션과 연결하기노션에 표를 만들고, 사이트가 그 내용을 읽어 와 카드로 보여 주도록 연결합니다.
웹사이트로 공개하기링크만 있으면 누구나 볼 수 있게 인터넷에 올립니다.GitHub, Vercel을 사용합니다.

활용 예시

작품을 보여 줄 때

포트폴리오

작품 그림이 세 줄씩 같은 크기로 놓인 포트폴리오

기록을 남길 때

일기, 책·영화 기록

책과 영화가 날짜, 별점과 함께 한 줄씩 놓인 기록

나중에 볼 것을 모을 때

링크 모음

썸네일과 제목이 붙은 링크 카드 네 개

정리해 두고 싶을 때

레시피·여행 기록

사진과 조리 시간이 있는 레시피 카드 세 장

가이드 소개

집 꾸미기 소개에서 보기