노션 AI로 홈페이지 기획하고 제작하기

1) 이번 강의에서 다루는 것

준비물 2가지와 전체 작업 흐름 이해하기

Bullet 템플릿 골라서 내 노션으로 복제하기

노션 AI에 맥락 주기: 개인화 지침 + 랜딩 맥락 페이지

노션 AI로 홈·소개 페이지 자동 구성하기

Bullet에 발행하고 내비바·푸터·도메인 마무리하기

💡

홈페이지는 만드는 것보다 관리하는 게 훨씬 중요합니다. 노션 기반으로 만드는 가장 큰 이유는 매일 쓰는 도구 안에서 글을 쓰고 그게 곧 발행으로 이어진다는 점 입니다. 노션에 쓴 글이 한 시간 단위로 블로그에 자동 발행되니, 따로 접속할 필요 없이 꾸준한 콘텐츠 발행이 가능해집니다.

2) 준비물

도구	역할	비고
노션 계정	콘텐츠 작성·관리의 본진	노션 AI는 유료 부가 기능 (활성화 권장)
Bullet 계정	노션 페이지를 진짜 홈페이지처럼 발행	커스텀 도메인 연결 시 월 9달러

🎯

추천 학습 페이스

한 주 동안 바짝 노션과 Bullet에 손에 익혀보세요. 노션이 익숙해지면 홈페이지 운영은 자연스럽게 따라옵니다.

3) 전체 작업 흐름 한눈에 보기

단계	작업 내용	예상 시간
① 템플릿 선택·복제	Bullet 템플릿 → 내 노션 계정으로 복제	5분
② 맥락 준비	개인화 지침 + 랜딩 맥락 페이지 작성	20~30분
③ 노션 AI로 페이지 채우기	홈·소개·기타 페이지를 AI에게 요청	20~30분
④ Bullet에 발행	공유 링크 → Bullet에 붙여 발행	5~10분
⑤ 내비바·푸터 수정	대시보드에서 메뉴 구조 정리	10분
⑥ 도메인 연결 (선택)	커스텀 도메인 구매·연결	30~60분

4) Step 1. Bullet 템플릿 고르고 복제하기

처음부터 디자인을 짜려고 하지 마세요. Bullet에는 랜딩 페이지·블로그형·개인 포트폴리오 등 다양한 템플릿이 준비되어 있고, 글자색 효과·호버 효과 같은 디자인 코드가 이미 입혀져 있습니다. 우리는 그 위에 내용만 채워 넣으면 됩니다.

따라하기

Bullet 템플릿 갤러리에서 마음에 드는 템플릿을 고릅니다.

Use Template 클릭 → Let's Create New Site 선택.

사이트 이름을 입력합니다 (예: 노션 웹).

Duplicate 클릭 → 내 노션 계정으로 이동, 개인 페이지에 추가.

복제된 페이지가 노션에 열리는지 확인합니다.

💡

복제된 페이지는 노션 데이터베이스 블록으로 보입니다. 각 행이 한 페이지(홈·포트폴리오·디렉토리 등)에 해당한다고 생각하시면 됩니다. 영어로 된 화면이라 처음에는 낯설지만, 페이지 하나씩 열어보면 구조는 단순합니다.

5) Step 2. 노션 AI에 맥락 주기

GPT·제미나이로 초안을 만들어도 결국 노션에 옮겨 붙이는 시간이 만만치 않습니다. 노션 AI를 쓰면 그 과정 자체가 사라집니다. 단, AI는 여러분의 비즈니스 맥락을 모르기 때문에, 맥락을 먼저 만들어주는 단계가 핵심입니다.

맥락은 두 곳에 나눠서 둡니다

위치	무엇을 담나요	언제 적용되나요
개인화하기(지침 페이지)	AI가 어떤 역할로, 어떤 절차로 일할지	모든 대화에 항상 적용
랜딩 맥락 페이지	제품·서비스·고객·카피·FAQ 등 콘텐츠 재료	요청할 때 페이지 멘션으로 끌어옴

5-1. 지침 페이지 만들고 개인화하기

노션 우측 하단 AI 캐릭터 얼굴 아이콘을 클릭합니다.

개인화하기 버튼 → 기존 페이지 사용 선택.

미리 만들어둔 지침 페이지(예: 노션 홈페이지 초안 에이전트)를 지정합니다.

지침 페이지에는 다음 항목을 정리해 두는 게 좋습니다.

맥락 — 누가 어떤 목적으로 홈페이지를 만드는지

역할 — AI가 어떤 입장에서 글을 써야 하는지

절차 — 페이지를 작성할 때 따라야 하는 순서

출력 형식 — 블록 구성·섹션 개수 등

금지사항 — 광고성 표현, 출처 추측 등

5-2. 랜딩 맥락 페이지 작성하기

저는 노션 홈페이지 전자책을 판매하기 위한 홈페이지를 만들 거였기 때문에, 랜딩 페이지 전체 전략 이라는 페이지를 따로 만들어 다음 정보를 정리했습니다.

📦 커리큘럼·구성 — 어떤 챕터로 들어가는지

🎁 제공물(Offer) — 무엇을 받게 되는지

🎯 타겟 고객 — 누구를 위한 상품인지, 어떤 분께 딱 맞는지

✍️ 메인 카피·서브 카피 — 톤·표현 가이드

👤 만드는 사람 소개

❓ 자주 묻는 질문(FAQ)

💡

맥락을 미리 잘 정리해두면 0에서 시작하는 것과 비교가 안 될 만큼 결과 품질이 좋아집니다. 노션 AI는 "무엇을 쓸지"보다 "어떤 맥락을 참고할지"에 훨씬 민감합니다.

6) Step 3. 노션 AI로 홈·소개 페이지 채우기

이제 맥락이 준비됐으니, 템플릿 페이지 안에 들어가서 AI에게 페이지 단위로 요청하면 됩니다.

6-1. 홈 페이지 만들기

복제된 데이터베이스에서 홈 페이지를 엽니다.

노션 AI 채팅을 켜고, 다음과 같은 한 줄 요청을 보냅니다.


@참고할페이지 기반으로 홈 화면을 구성해주세요. 지금 보는 페이지의 레이아웃을 최대한 활용해서 만들어주세요.

맥락 페이지가 다 들어가 있고, 지침은 개인화에서 적용되기 때문에 이 정도 요청만으로도 메인 카피 · 타겟 고객 멘트 · 패키지 구성 · 비교표 · 이미지 자리까지 한꺼번에 채워줍니다.

6-2. 소개(포트폴리오) 페이지 만들기

데이터베이스에서 포트폴리오 페이지를 엽니다.

동일하게 노션 AI에 요청합니다.

💬

이전에 작성한 저에 대한 맥락을 담은 페이지 기반으로 임선우 소개 페이지를 작성해주세요. 지금 보는 페이지 레이아웃을 활용해주세요.

주요 활동, 소개 멘트, 연락처, 주요 프로젝트, 전문 분야, 콘텐츠 영역까지 한꺼번에 채워집니다. 간격 조절 같은 미세한 정렬만 직접 손보면 됩니다.

⚠️

삭제 승인은 꼭 직접 확인하세요. 노션 AI가 페이지를 새로 구성할 때 기존 데이터베이스 블록을 지우려는 경우가 있는데, 데이터베이스는 중요한 자산이라 사용자 승인이 필요합니다. 필요 없는 블록만 삭제, 살릴 건 거부하기로 남겨두세요.

7) Step 4. Bullet에 발행하고 디자인 다듬기

노션에서 페이지를 다 만들었으면, 이제 Bullet에 연결해서 진짜 홈페이지처럼 만들 차례입니다.

7-1. 노션 페이지를 Bullet에 등록하기

복제된 노션 데이터베이스 페이지에서 공유 → 게시 를 누릅니다.

공개 링크를 복사합니다.

Bullet 대시보드로 돌아가 링크를 붙여넣고 등록 버튼을 클릭합니다.

2~3분 정도 처리가 끝나면 Visit 을 눌러 발행된 사이트를 확인합니다.

노션에서 보던 페이지와 살짝 다른 모습이 보일 거예요. 글자 색·크기·호버 효과 등 템플릿에 내장된 코드가 입혀져서 그렇습니다.

7-2. Bullet AI로 세부 커스터마이징 하기

Bullet 에디터 안에도 AI가 붙어 있습니다. 블록을 선택하고 자연어로 요청하면 해당 블록에 맞는 코드를 짜서 반영해줍니다.

💬

예: "이 페이지 너비를 1080픽셀로 고정해주세요"

⚠️

Bullet AI는 강력하지만, 블록 구조와 웹사이트에 대한 이해가 있어야 잘 쓸 수 있습니다. 초보 단계에서는 테마·디자인 메뉴의 기본 기능(글자 크기 조절, 색상 변경 등)부터 익히세요. 코드를 잘못 건드리면 레이아웃이 뒤틀릴 수 있습니다

수정 후에는 반드시 Save → Publish 를 눌러야 실제 사이트에 반영됩니다.

8) Step 5. 내비바·푸터 세팅 (필수)

홈페이지의 첫인상은 내비바와 푸터에서 갈립니다. 이 두 가지는 반드시 직접 수정해주세요.

8-1. 내비바 수정

사이트 세팅 → 대시보드 로 이동합니다.

내비바(Navbar) 섹션을 엽니다.

기존 메뉴 중 필요 없는 항목은 삭제, 드롭다운에서 안 쓰는 페이지도 삭제합니다.

연필 아이콘 으로 메뉴명을 수정합니다 (예: 포트폴리오 → About).

연결할 페이지(소개 페이지)를 선택 → 저장 → Publish.

8-2. 푸터 수정

대시보드에서 푸터(Footer) 섹션을 엽니다.

표시할 페이지를 Add 버튼으로 추가합니다 (예: 홈, 소개, 콘텐츠).

소셜 아이콘 영역에 인스타그램·유튜브 등 운영 채널 링크를 추가합니다.

저장 → Publish.

🎯

가장 중요한 두 가지 — 내비바·푸터는 무조건 수정. 기본값 그대로 두면 "미완성 사이트" 인상을 줍니다.

9) Step 6. 도메인 연결하기 (선택)

Bullet은 기본 도메인을 제공해주지만, 본인 브랜드용 사이트라면 커스텀 도메인 연결을 권장합니다.

💰 요금 — 월 9달러 (커스텀 도메인 사용을 위한 Bullet 업그레이드)

🌐 이유 — 브랜딩, 구글 노출, 명함·SNS에 적기 좋은 짧은 주소

🔗 연결 흐름 — 도메인 구매 → DNS 레코드 설정 → Bullet 대시보드에서 연결

💡

기본 Bullet 링크를 쓰셔도 되지만, 활성화가 안 되어 있으면 자동으로 만료될 수 있습니다. 지속적인 노출과 브랜딩이 필요하다면 도메인은 무조건 연결하시는 걸 권장합니다.

도메인 구매·연결 상세 절차는 다음 챕터에서 따로 다룹니다.

Part 5-15. 도메인 구매하기

Part 5-16. 도메인 연결하기

자주 막히는 지점

⚠️

"노션 AI가 내 비즈니스 맥락을 모르고 이상한 글을 써요"

거의 100% 맥락 부족이 원인입니다. 개인화 지침 페이지를 먼저 세팅하고, 요청할 때 랜딩 페이지 전체 전략 같은 맥락 페이지를 명시적으로 멘션해주세요.

⚠️

"노션 AI가 데이터베이스 블록을 지우려고 해요"

데이터베이스는 중요 자산이라 사용자 승인이 필요합니다. 필요 없는 블록만 삭제, 살릴 건 거부하기를 눌러 남겨두세요.

⚠️

"Bullet에서 발행한 사이트의 디자인이 노션이랑 달라요"

템플릿에 내장된 CSS 코드가 입혀져서 그렇습니다. 의도된 동작이며, 폰트·색상은 Bullet 테마/디자인 메뉴에서 추가로 조절할 수 있습니다.

⚠️

"Bullet AI에게 요청했더니 레이아웃이 깨졌어요"

코드 영역을 잘못 건드린 경우입니다. Bullet에서는 버전 되돌리기로 직전 상태로 복구할 수 있으니, 큰 수정 전에는 반드시 저장 시점을 확인하세요.

⚠️

"기본 Bullet 도메인이 갑자기 안 열려요"

유료 업그레이드 없이 활성화되지 않은 상태로 두면 자동 만료될 수 있습니다. 지속 운영이 필요하다면 커스텀 도메인 연결이 안전합니다.

응용 팁

맥락 페이지를 자산처럼 관리하기

랜딩 페이지 전체 전략, 브랜드 톤 가이드, 자주 묻는 질문 등 핵심 맥락 페이지 3~5개를 워크스페이스에 갖춰두면 어떤 콘텐츠든 빠르게 뽑아낼 수 있습니다.

개인화 지침을 목적별로 분리하기

"홈페이지 초안용", "블로그 글쓰기용", "강의 자료용" 등 목적별 지침 페이지를 따로 두고 그때그때 바꿔서 적용하면 결과 품질이 안정됩니다.

콘텐츠 발행 자동화

Bullet을 유료로 쓴다면 하루 단위로 자동 발행해줍니다. 노션에 글만 쓰면 운영이 굴러갑니다. 별도 챕터에서 자세히 다룹니다.

빠르게 만들고, 길게 관리하기

디자인이 다소 아쉽더라도 "완성→발행→꾸준한 콘텐츠"가 진짜 성장 동력입니다.