노션에서는 HTML 코드를 직접 삽입하는 방법 - withMAKE.CO.KR 자동화세상모든이야기

노션에서는 HTML 코드를 직접 삽입하는 방법

노션에서는 HTML 코드를 직접 삽입하여 웹 페이지를 만들 수는 없지만, 임베드 블록을 사용하여 외부 HTML 콘텐츠를 포함할 수 있습니다. 이를 위해 HTML 파일을 먼저 웹 호스팅 서비스에 업로드한 다음, 노션에서 해당 URL을 임베드 블록으로 추가하는 방법을 사용할 수 있습니다. 다음은 그 과정입니다:

1. HTML 파일 웹 호스팅

HTML 파일을 웹에 업로드하려면 GitHub Pages, Netlify, Vercel 등의 무료 웹 호스팅 서비스를 사용할 수 있습니다. 여기서는 GitHub Pages를 예로 들어 설명하겠습니다.

1. GitHub에 가입 및 리포지토리 생성
   • GitHub에 가입하고 로그인합니다.
   • 새 리포지토리를 생성합니다. (리포지토리 이름은 username.github.io 형식으로 설정합니다.)

1. HTML 파일 업로드
   • 리포지토리 내에서 Add file 버튼을 클릭하고 Create new file을 선택합니다.
   • 파일 이름을 index.html로 지정하고, 작성한 HTML 코드를 붙여넣습니다.
   • Commit new file을 클릭하여 파일을 저장합니다.
2. GitHub Pages 활성화
   • 리포지토리 설정(Settings)으로 이동합니다.
   • Pages 탭에서 Branch를 main으로 설정하고, /root를 선택합니다.
   • Save 버튼을 클릭하면 리포지토리가 GitHub Pages를 통해 호스팅됩니다.
   • 몇 분 후 https://username.github.io 주소에서 웹 페이지를 확인할 수 있습니다.

2. 노션에서 HTML 웹 페이지 임베드

HTML 파일이 호스팅된 URL을 노션 페이지에 임베드하는 방법입니다.

1. 노션 페이지 열기
   • 노션에서 원하는 페이지를 엽니다.
2. 임베드 블록 추가
   • /를 입력하여 블록 추가 메뉴를 엽니다.
   • embed를 검색하여 선택합니다.
3. URL 입력
   • 호스팅된 HTML 파일의 URL (예: https://username.github.io)을 입력합니다.
   • Embed Link 버튼을 클릭합니다.

이렇게 하면 노션 페이지 내에 HTML 웹 페이지가 임베드됩니다.