3. Notion 콘텐츠를 웹사이트에 적용하기
D-SKET에서는 여러분의 웹사이트를 고치려고 코딩이나 에디터를 배울 필요가 없습니다. 여러분이 매일 쓰는 Notion에서 글을 쓰고 사진을 바꾸면, 웹사이트도 자동으로 변신합니다!
1️⃣ 텍스트 수정하기: 두 가지만 기억하세요!
텍스트를 수정하는 방법은 데이터베이스에서 수정하는 것과 노션 페이지에서 수정하기 두 가지가 있습니다.
A. 01. 메인 페이지 설정(데이터베이스)에서 수정하기
- 언제 쓰나요? 메인 페이지의 제목이나 짧은 설명을 고칠 때.
- 방법: 엑셀처럼 **칸(Cell)**을 클릭하고 내용을 입력하면 끝!
- 주의사항:
- 제목 크기(Heading 1~3)는 조절할 수 없어요.
- 줄바꿈 꿀팁:
Enter를 치면 다음 칸으로 넘어가 버리죠?Shift + Enter를 누르면 줄바꿈이 됩니다! - 참고: 배경 색상은 아직 지원되지 않아요.
B. 03. 페이지 설정(노션 페이지)에서 수정하기
- 언제 쓰나요? 회사 소개, 블로그 글 등 긴 내용을 작성할 때.
- 방법: 평소 노션 쓰듯이 자유롭게 작성하세요!
- 가능한 기능: 제목(Heading), 글머리 기호, 인용구, 표, 코드 등 노션의 멋진 기능들을 마음껏 쓸 수 있습니다.
- 상세 페이지에서 텍스트 수정 시 적용할 수 있는 유형은 다음과 같습니다:
- 기본 텍스트
- Heading 1~3
- 목록 유형
- 글머리
- 번호
- 할 일
- 토글
- 콜아웃
- 인용
- 표
- 코드
- 2~5개의 열 각 유형은 텍스트 배경 색상을 제외하고, 모든 효과를 적용할 수 있습니다.
- 참고: 배경 색상은 아직 지원되지 않아요.
- 상세 페이지에서 텍스트 수정 시 적용할 수 있는 유형은 다음과 같습니다:
2️⃣ 이미지 수정하기
이미지를 넣는 방법도 텍스트를 수정하는 방법과 유사합니다. **01.메인 페이지 설정(데이터베이스)**와 **03.페이지 설정(상세 페이지)**에서 이미지를 넣을 수 있습니다.
A. 01. 메인 페이지 설정에서 수정하기
- 방법: 이미지를 넣고 싶은 칸을 클릭 →
파일 또는 이미지 추가→ 업로드 - 🚨 핵심 규칙 (⭐⭐⭐⭐⭐):
- 이미지를 여러 장 넣을 수도 있습니다. 하지만 웹사이트에는 맨 위에 있는 사진 1장만 보입니다.
- 사진을 바꾸고 싶다면? 지울 필요 없이, 원하는 사진을 드래그해서 맨 위로 순서만 올려주세요.
B. 03. 페이지 설정에서 수정하기
- 방법: 상세 페이지 안에서 **
/이미지**를 입력 → 업로드 - 🚨 핵심 규칙 (⭐⭐⭐⭐⭐):
- 노션 무료 사용자의 경우 업로드 시 5MB 이하의 이미지만 사용할 수 있어요.
3️⃣ 상세 페이지를 더 잘 활용해서 웹사이트 퀄리티 높이기
상세 페이지를 더 전문가처럼 보이게 만드는 3가지 기능을 소개합니다.
1.다단 배치 (옆으로 나란히)
이미지와 글을 위아래가 아니라, 좌우로 나란히 배치해보세요. 노션의 '열(Column)' 기능을 쓰면 훨씬 세련되어 보입니다.
2. 구글 지도 넣기 (오시는 길)
회사 위치를 설명할 때 주소만 쓰지 마세요. 구글 지도를 노션에 심으면(Embed), 웹사이트에서도 지도가 그대로 작동합니다.
3. 상품 리스트 만들기 (마트료시카 🪆)
포트폴리오나 뉴스 목록이 필요하신가요?
그럼 상세 페이지 안에 **또 다른 데이터베이스(표)**를 만들어보세요! 마치 인형 안에 인형이 있는 **'마트료시카'**처럼요! 방문자가 클릭해서 볼 수 있는 멋진 게시판이 됩니다.
- 아래 예시를 한 번 살펴볼까요?
“비즈니스” 라는 상세 페이지에 “주력 사건”이라는 데이터베이스로 만든 페이지입니다. 왼쪽이 노션에서 보이는 데이터베이스이고, 오른쪽이 홈페이지에서 보이는 모습입니다. 이렇게 생성한 “주력 사건” 데이터베이스 내에 존재하는 페이지들은 각각의 노션 페이지로 만들어져 활용할 수 있습니다.
상세 페이지 내 데이터베이스 추가 및 페이지 생성하기
영상을 보면서 천천히 따라해보세요!