노션 템플릿을 활용해 웹사이트를 구축하는 방법을 단계별로 설명합니다. 데이터베이스 구조 이해부터 페이지 설정, 블로그 운영 및 SEO 최적화 팁까지 초보자도 쉽게 따라 할 수 있도록 정리했습니다.
노션 홈페이지 5-3. 템플릿
Sunwoo Lim
노션 템플릿을 활용해 웹사이트를 구축하는 방법을 단계별로 설명합니다. 데이터베이스 구조 이해부터 페이지 설정, 블로그 운영 및 SEO 최적화 팁까지 초보자도 쉽게 따라 할 수 있도록 정리했습니다.
Chapters
00:00
노션 템플릿 구조 이해하기
노션 템플릿 복제 후 데이터베이스 구조를 파악하는 방법을 설명합니다.
01:16
페이지 데이터베이스 설정
03:41
홈페이지 구성 및 디자인 팁
06:25
블로그 데이터베이스 관리
09:45
SEO 최적화 및 메타데이터
11:30
마무리 및 다음 단계
Transcript
00:00
여러분들이 노션 템플릿을 이렇게 복제를 하면 일단은 당황스러우실 겁니다 여기 일단 영어고 복잡해 보이는데 이 화면에서 데이터베이스 데이터베이스 구조를 이해를 하는 게 제일 중요합니다 지금 보시는 요 부분이 아마 통틀어서 가장 중요한 부분 중에 하나입니다.
00:20
그래서 단번에 이해하기 힘드실 수도 있어요.
00:24
홈페이지 구조나 이런 웹사이트를 어떻게 구성이 되어 있는지 모르시면 요렇게 좀 힘드실 수 있는데 몇 번 이렇게 돌려보시면 이해가 이해가 가실 겁니다.
00:35
제가 일단 최대한 쉽게 설명드려 보도록 하겠습니다.
00:38
일단은 이게 각각의 홈페이지를, 각각의 페이지를 보여주는 거라고 생각을 하시면 되고, 지금 노션에 데이터베이스로 이렇게 구축을 해놨습니다.
00:53
그래서 데이터베이스 자체에 대한 이해도가 없으시면 노션 앞전에 앞전에 기본 강의를 들으신 다음에 이걸 보셔야지 이해가 쉬우실 겁니다.
01:01
그래서 일단은 노션에 대한 기본 강의를 들으시고 이걸 하시기를 꼭 꼭 추천드립니다.
01:07
추천이 아니라 그렇게 하셔야 됩니다.
01:10
그래서 일단 title은 각각의 페이지들을 뜻합니다.
01:14
홈 화면, 블로그 화면 그리고 각각의 뭐 예를 들면 이게 뭐 서비스 페이지다 그러면 서비스 페이지, 그리고 이거는 예를 들면 문의하기 페이지다.
01:25
그러면 문의하기 페이지 이렇게 되는 거죠.
01:27
그러면 여기 이제 Path라고 되어있는데 이건 뭐냐면 주소입니다.
01:32
주소.
01:32
여러분들 온라인에 접속을 하시면, 예를 들면 홈페이지에 이렇게 접속을 하면 주소가 이렇게 있고, 소개로 들어가면 이 About이 있습니다.
01:42
이런 거를 지금 노션에서는 이렇게 구현을 했구요 그래서 그래서 블로그는 블로그로 돼야겠죠 그리고 서비스 같은 경우에는 마찬가지로 서비스라고 돼야 되고 문의하기는 문의하기는 보통 우리가 contact라고 표현을 하기 때문에 이렇게 해야 됩니다 자 그 다음 Publish는 뭐냐면 발행을 하는 겁니다 발행을 하는 거 그래서 이걸 체크하지 않으면 이 이 Notion에서 우리가 우리가 보통 이 Publish를 누르면은 이게 웹사이트의 웹사이트의 수정사항이 반영이 돼서 발행이 되거든요 근데 만약 여러분들이 요거를 클릭하지 않으면 이 사이트가 접속이 안 되게 됩니다 그래서 외부에 보여져야 되는 페이지는 꼭 이걸 누르셔야 되고요 근데 내가 만약에 뭐 추가적인 페이지를 만들고 있다.
02:31
예를 들면은 About 페이지, 소개 페이지 보통 이거는 About으로 많이 씁니다.
02:39
이건 작성 중이에요.
02:40
그러면 하려면 안 되겠죠.
02:43
그 다음 마지막에 이 페이지 타입은 뭐냐면 크게 두 가지가 있습니다.
02:47
이 Static 페이지랑 블로그 두 개가 있는데 뭐 뭐 어려울 거 전혀 없습니다.
02:51
Static은 보통은 이제 정적인 페이지라고 합니다.
02:54
뭔가 움직임이 없는, 고정된 페이지거든요.
02:57
그래서 블렛에서는 딱 두가지 밖에 없어요.
02:59
Static 페이지, Blog 페이지.
03:02
그래서 이 블로그에 해당되는 거 말고는 나머지는 다 Static이라고 생각을 하시면 됩니다.
03:07
자 여기까지 어렵지 않죠?
03:08
이거는 각각의 페이지, 그리고 요거는 주소, 발행 여부, 타입, 블로그 빼고는 다 요거다.
03:16
어렵지 않습니다.
03:17
자 그러면 하나씩 좀 볼게요 그래서 여기 홈에 홈에 들어가시면 기본적인 템플릿이 있습니다 그래서 이 노션에 들어가는 각각의 블럭들은 제가 다른 영상에서 사용법을 안내 드렸으니까 그거를 보고 수정을 하시면 됩니다 이제 하나 뭐 좀 알려드릴 부분 중에 하나는 요런 거 있죠 요게 노션에서는 이렇게 표현이 되지만 블렛에서는 요렇게 표현이 됩니다 이 이 컴포넌스 컴포넌스 이 컴포넌스에 요기에 이제 접속을 하면 이제 이제 이렇게 표현이 된다고 이렇게 나와 있거든요 그래서 요게 지금 이 notion 에서는 이렇게 표현이 됩니다 그래서 큰 가로 문의하기 이렇게만 이렇게만 하면 저렇게 표현이 안되고 여기에 링크를 넣어야 됩니다 예를 들면 여기에 링크 추가를 하셔가지고 탈리폼이 됐든 구글폼이 됐든 문의하기 별도의 페이지가 있으면 그거를 넣으시면 되겠습니다 그래서 여기 있는 내용을 그대로 활용하셔서 블록들을 활용하셔서 내 이야기로 바꾸시면 되고 제가 좀 알려드리고 싶은 팁은 이 이미지들이 너무나 중요하거든요 여기도 홈페이지가 괜찮아 보이는 이유가 이런 이미지가 좀 일관성 있게 일러스트로 이렇게 들어가 있기 때문에 뭔가 괜찮아 보입니다 그래서 여러분들의 홈페이지도 이런 이미지를 이미지를 잘 뽑으셔가지고 하시는 게 중요합니다 여기는 그 제가 이전에 블랫으로 만들었던 홈페이지 노션 원본 페이지인데 요런 이미지 이런 이미지 이거 다 그 첼치피티로 뽑은 겁니다 그 첼치피티가 업데이트되면서 요즘에 이미지 너무 잘 뽑아 주거든요 그래서 여러분들의 여러분들의 회사 서비스를 소개해 줄 수 있는 그런 좀 이미지를 잘 뽑으시는 게 중요합니다 그래서 서비스 페이지도 여러분들이 내 서비스를 잘 할 수 있게 내용 구성을 하셔야 되는데 요거는 제가 참고할 수 있게 여러 블럭 활용 사례들을 넣을 테니까 그 그대로 복사 하셔가지고 쓰시면 되겠습니다 그래서 이렇게 0에서 뭔가 내가 하려면 너무 어렵거든요 그래서 기존에 이렇게 활용 사례 블럭들을 좀 가져와서 복사 붙여넣기 하셔가지고 내 이야기로 바꾸시면 됩니다 자 그 다음에 이제 블로그 페이지인데 요게 좀 처음에는 이해하기 좀 어려우실 수 있습니다 저도 저도 이게 뭐 한글 가이드도 없고 아무것도 없이 저 혼자 막 이해를 하려고 하니까 너무 어렵더라구요 처음에 그래서 이런 걸 누가 알려줬으면 좋겠다 싶었는데 여러분들은 어쨌든 제가 있으니까 쉽게 설명드리겠습니다 이 블로그 안에 또 이제 블로그 데이터베이스가 따로 있습니다 따로 세 가지가 있어요 포스트 태그 이거 저자를 설명하는 어떤 이렇게 세 가지가 있는데 이 포스트는 이제 들어가시면 이 글들 있습니다 글 블로그 글 글을 이제 여기다 쓰시면 돼요 여기다 쭉 쓰시면 되고 그 다음에 여기 태그는 뭐냐면 태그는 태그는 카테고리 입니다 카테고리 예를 들면은 들면은 어 내가 홈페이지 제작을 한다 그러면 이제 홈페이지 제작 해서 이 슬러그는 아까 말한 그 주소입니다 주소 그럼 여기에다가 어 뭐 뭐 홈페이지 빌드라고 빌드라고 해볼게요 그리고 그리고 홈페이지 뭐 유지보수라고 해보겠습니다 유지보수 그러면 홈페이지 뭐 매니지 이걸 내가 어떤 걸 해야 될지 모르겠다 하면 그냥 AI한테 물어보시면 됩니다.
06:47
내가 이렇게 블로그 카테고리 설정하려고 하는데 슬러그 슬러그 뽑아줘 라고 하시면 되고 이 포스트는 이 태그 카테고리를 나타내는 요거랑 이 포스트 안에 있는 이 블로그 글, 이 각각의 데이터베이스를 연결하는 관계형 데이터입니다.
07:05
데이터베이스 두 개가 따로 노는데 두 개를 연동해야지 이 글이 어떤 카테고리인지 알잖아요?
07:10
그래서 관계형으로 맺는 겁니다.
07:13
이미 맺어져 있기 때문에 우리는 매칭만 하면 됩니다.
07:16
그럼 여기서 제가 아까 하나 하나 유지해보고 얘는 홈페이지 제작글이라고 해보겠습니다.
07:23
이렇게 매칭이 되는 겁니다.
07:26
그리고 이 블로그 페이지에서 publish 마찬가지로 있는데 요거를 클릭하면 발행이 되고 클릭을 안 하면 발행이 안 됩니다 그리고 여기도 블로그 글에도 이 주소를 설명을 해주면 되겠죠 예를 들면은 뭐 홈페이지 제작시 제작시 요 이상 다섯가지 이렇게 하면 여기에 맞게끔 이제 이 이 슬러그를 설정해 주시면 됩니다.
07:50
예를 들면 5 뭐 가이즈 4 4 뭐 홈페이지 이거는 이거는 저도 제가 직접 하지 않고 AI한테 물어봅니다.
07:59
이 페이지 제목 이런데 여기에 맞는 슬러그를 추천해달라.
08:03
그래서 직접 다 하실 필요 없어요.
08:05
여기도 마찬가지로 뭐 홈페이지 유지관리비 합리적인 비용은 비용은 뭐 이런식으로 글있다 여기도 마찬가지로 뭐 reasonable reasonable price 뭐 이런식으로 이제 들어가는 거죠 그리고 그리고 이거 세번째 여기 이제 글쓰니 항목이 있는데 여기에도 여러분들이 힘으로 바꿔 주시면 됩니다 이미지도 여기에 여기에 업로드 하셔가지고 여러분들 이미지로 바꾸시면 돼요 아니면 이 이상한 사람 얼굴로 나갑니다 그래서 여기서 업로드 하셔서 내 사진을 넣어 주시면 됩니다 주시면 되고 그 다음에 여기는 이제 웹사이트나 뭐 내 sns 정보를 넣으시면 들어가 들어가 블렛에서 반영을 해줍니다 그리고 포스트는 이렇게 매칭을 해주면 되겠죠 사실 해야 될 게 많아요 근데 이런 정보들을 다 넣어야지 구글에서 이 정보들을 쫙 긁어다가 잘 배포를 해줍니다 그래서 다른 나의 잠재고객이 정보를 검색했을 때 내가 잘 노출되는 게 중요하잖아요 그러려면 정보가 잘 입력이 되고 그런 그런 정보들이 잘 입력만 되어 있으면 블렛에서는 검색엔진 최적화가 너무 잘 됩니다.
09:13
이거는 제가 여러 번 경험을 했기 때문에 그래서 블렛을 저는 추천을 드리는 겁니다.
09:18
그래서 귀찮더라도 이런 내용을 다 넣으셔야 되고 추가적으로 SEO 작업을 해야 될 것들 있거든요 근데 이거는 너무 어렵다 뭔가 힘들다 라고 느껴질 수 있기 때문에 지금 단계에서는 하진 않겠습니다 지금은 우리가 페이지를 다 구성을 하는 게 중요하기 때문에 자 자 그래서 정리를 해볼게요 각각의 페이지가 있습니다 주소가 여기 이렇게 설정을 하시면 되고 여기 들어가서 각각의 페이지 성격에 맞는 내용을 여러분들이 수정을 하시는 겁니다 그리고 홈 서비스 문의하기 페이지 뭐 소개하기 페이지 이렇게 하시면 각각의 페이지 내용이 들어가겠죠 그래서 여기까지는 일단 초벌 작업입니다 초벌 작업 블렛에 들어가기 전에 여기 내용들을 초벌을 먼저 하시는 거예요 그리고 그리고 블로그는 이렇게 데이터베이스가 또 따로 있다 그래서 여기에서 이 포스트에는 블로그 글을 우리가 이제 써나간다 라고 생각을 하시면 됩니다 근데 근데 이 태그는 카테고리 그리고 없더라고 되어 있는 거는 작가 그래서 이렇게 세 세 세 가지를 글을 쓰고 나서 여기서 이게 작가가 누구고 어디 카테고리 인지를 선택을 해주시면 됩니다 자 여기까지 이해되셨죠?
10:33
그러면 여기까지는 된 겁니다.
10:35
그래서 이제 여러 그 다음에 여러분들이 해야 될 거는 지금 여기 페이지 내용들부터 채우는 겁니다.