노션으로 웹사이트 만들기: 블록과 데이터베이스로 D-SKET으로 웹사이트 제작하는 법

우리는 지난 4편의 가이드를 통해 노션의 핵심 기술을 모두 익혔습니다.

"그런데 이걸로 뭘 할 수 있나요?🤔"라고 물으신다면 오늘이 바로 그 대답이 되는 날입니다.

여러분이 지금까지 무심코 쌓았던 '블록'과 '데이터베이스'가 사실은 웹사이트를 만드는 가장 훌륭한 재료였다는 사실을 알고 계셨나요?

오늘은 노션에 D-SKET을 사용해서 코딩 한 줄 없이 '여러분만의 웹사이트'가 어떻게 탄생하게 되는지 보여드릴게요.

1. 노션이 '설계도'라면, 웹사이트는 '완성된 집' 🏗️

노션으로 웹사이트를 만든다고 해서 전혀 어렵게 생각할 필요 없어요.

우리가 배운 기능들이 웹사이트에서 어떤 역할을 하는지 딱 정리해 드릴게요. 여러분이 노션에서 블록을 차곡차곡 쌓는 순간 이미 웹사이트의 뼈대를 세우고 계셨던 겁니다.

[노션 기능 ↔️ 웹사이트 요소 매칭]

즉, 노션을 활용하면 복잡한 HTML/CSS 코딩 기술이 없어도 나만의 웹사이트를 지을 준비는 이미 끝난 것입니다. 😎

재료 준비는 끝났으니, 이제 D-SKET을 활용해 실전 조립을 해볼까요? 웹사이트는 크게 대문 역할을 하는 '메인 페이지(랜딩 페이지)'와 구체적인 내용을 담은 '상세 페이지'로 나뉩니다.

노션의 기능을 어떻게 배치해야 하는지 딱 정해드릴게요.

웹사이트의 첫인상을 결정하는 메인 페이지, 이제 디자인하느라 고민할 필요가 전혀 없습니다.

블록을 이것저것 쌓을 필요 없이 디자인이 적용된 데이터베이스 하나만 딱 활용해보세요.

콘텐츠 입력만으로 웹사이트 완성
- D-SKET에서 웹사이트를 만든 후 “메인 페이지 설정” 페이지에서 콘텐츠를 수정해보세요.
- 여기에 보여주고 싶은 제목, 썸네일 사진, 간단한 태그만 입력하면 됩니다.
D-SKET의 디자인 템플릿에 콘텐츠 자동 적용
- 복잡한 갤러리 뷰 설정조차 필요 없습니다. 기본 제공된 데이터베이스 안에 데이터만 있으면 D-SKET이 이를 전문적인 랜딩 페이지 레이아웃으로 변환해줍니다.
- 데이터베이스의 행(Row)들이 세련된 카드 형태로 바뀌어 방문자를 맞이하게 되죠.

방문자가 메인 페이지에서 상단 헤더 메뉴를 클릭하고 들어왔을 때 보이는 화면입니다.

여기는 블록과 데이터베이스 두 가지 기능을 모두 쓰면 더욱 전문적인 웹사이트로 보일 수 있습니다.

블록으로 스토리텔링:
- 자유롭게 글을 쓸 수 있는 공간입니다.
- 텍스트, 인용구, 이미지를 레고 쌓듯 배치하여 프로젝트의 과정이나 상품의 상세 정보를 블로그 글처럼 매력적으로 작성하세요.
데이터베이스로 정보 연결:
- 데이터베이스를 만들어 여러분의 프로젝트를 갤러리처럼 보여주세요.
- 데이터베이스로 만들었기 때문에 각 행은 ‘개별 페이지’로서 텍스트나 이미지 등의 블록을 활용할 수 있습니다.

축하합니다! 👏 이로써 노션 왕초보 가이드 시리즈를 통해, 여러분은 노션의 기초 사용법부터 웹사이트 제작 원리까지 모두 익히셨습니다.

하지만 노션과 D-SKET으로 할 수 있는 일은 무궁무진합니다. 기초를 탄탄히 다졌으니, 앞으로는 이 도구들을 '어떻게 더 잘 활용할지'에 대해 구체적으로 다뤄보려 합니다.

🔜 앞으로 D-SKET 블로그에서는...

다양한 노션 활용법: 업무 효율을 5배 높여주는 템플릿과 고급 기능 활용 팁
실전 웹사이트 제작 튜토리얼:
- "노션으로 10분 만에 채용 사이트 만들기"
- "프리랜서 포트폴리오 사이트 구축하기"
- "스타트업 랜딩 페이지 제작 가이드"

단순히 기능을 배우는 것을 넘어, 실제로 비즈니스 성과를 만드는 구체적인 방법들을 계속해서 공유해 드릴 예정입니다.

여러분의 비즈니스와 일상을 바꾸는 여정을 D-SKET이 계속 함께하겠습니다.

다음 글에서 더 유익하고 재미있는 주제로 만나요! 👋