Part 5-12. 디자인 커스터마이징 하기

Bullet AI · Design Mode 레이어별 디자인 수정 가이드

Bullet AI와 Design Mode는 어떻게 다른가요?

Bullet에서 노션 페이지를 웹사이트로 꾸미는 방법은 크게 두 가지예요. 같은 사이트 위에서 함께 사용할 수 있고, Bullet 공식 문서에서도 두 방식을 조합해서 쓰는 것을 권장합니다.
  • Bullet AI: 자연어 프롬프트나 참고 이미지로 색상, 폰트, 여백, 테두리 등 복합적인 스타일 조합을 한 번에 만들고 싶을 때
  • Design Mode: 폰트 크기 18px, 우측 정렬, 패딩 10px처럼 정확하고 결정적인(deterministic) 수치로 다듬고 싶을 때
 
💡
  • Notion = structure (구조는 노션에서)
  • Bullet AI = style (스타일은 AI에게)
  • Design Mode = quick fixes (즉시 수정은 디자인 모드에서)
  • CSS = full control (정교한 제어는 CSS로)
  • AI = inspiration and combos (영감과 복합 조합은 AI로)
 
참고로 Bullet AI는 현재 CSS만 적용되고, JavaScript를 추가하거나 노션 페이지의 HTML 구조를 바꾸지는 않아요. 그리고 Bullet AI 기능은 Pro 플랜 전용입니다.
 

모든 요소가 "블록"으로 다뤄진다는 점부터 이해하세요

Bullet에서는 사이트의 텍스트, 콜아웃, 이미지, 헤딩 등 모든 요소가 하나의 블록으로 취급돼요. 이 개념이 레이어별 디자인의 출발점입니다.
  • 같은 종류의 블록 전체(예: 모든 콜아웃)를 한꺼번에 스타일링할 수 있어요.
  • 또는 특정 한 블록(One block)만 골라서 다르게 스타일링할 수도 있어요.
  • 즉, "전체 레이어 스타일" ↔ "개별 블록 스타일"을 자유롭게 오갈 수 있다는 뜻이에요.
 

레이어(블록)는 어떻게 선택하나요?

Bullet AI든 Design Mode든, 스타일을 적용하기 전에 어떤 요소(레이어)를 수정할지 먼저 선택해야 해요. 정확히 선택해야 AI에게도 더 명확한 컨텍스트가 전달됩니다.
  1. 사이트 위에서 원하는 요소에 마우스 오버 후 클릭합니다.
  1. 기본값은 "같은 종류의 블록 전체"에 변경 사항이 적용돼요. (예: 콜아웃 하나를 수정하면 모든 콜아웃이 함께 바뀜)
  1. 딱 하나의 블록만 수정하고 싶다면, 파란색 타겟 아이콘(blue target icon)을 클릭하세요. 내부적으로 해당 블록의 block id를 사용해 스타일을 적용하기 때문에 다른 요소에는 영향이 가지 않아요.
 

Bullet AI로 스타일 적용하기

자연어로 "이렇게 만들어줘"라고 말하면 Bullet AI가 즉시 스타일을 입혀주는 방식이에요.
  1. 스타일을 적용할 블록을 선택합니다.
  1. AI Chat 패널을 엽니다.
  1. 원하는 변경을 자연어로 입력합니다. 예) "make the background light blue with rounded corners" (배경을 연한 파란색에 둥근 모서리로).
  1. AI가 스타일을 즉시 적용하고, 적용된 CSS 코드까지 함께 보여줍니다.
 
Bullet AI는 자연어 프롬프트로 배경 변경, 모서리 라운딩, 여백/간격 조정 같은 작업을 한 번에 처리할 수 있도록 설계되어 있어요.
 

참고 이미지로 디자인 따라하기

레퍼런스 사이트의 히어로 섹션이나 카드 디자인을 그대로 따라가고 싶을 때 쓰는 방법이에요.
  1. AI Chat 안의 이미지 아이콘을 클릭합니다.
  1. 따라하고 싶은 스크린샷을 업로드합니다.
  1. AI에게 "이 섹션처럼 만들어줘"라고 프롬프트를 입력합니다.
  1. AI가 레이아웃·여백·색상·스타일을 분석해 선택한 블록에 적용해 줍니다.
 
공식 문서 기준, 이미지로 따라했을 때 약 90% 정도 일치한다고 안내합니다. 더 가깝게 맞추고 싶다면 다음 팁을 따르세요.
  • 노션에서 블록 배치를 스크린샷의 레이아웃에 맞게 정리하세요.
  • 관련 있는 블록들은 하나의 콜아웃 안에 묶어 그룹으로 만드세요.
  • 정확한 높이/너비가 필요하면 이미지 사이즈를 일치시키세요.
단 아이콘이나 그래픽 자체가 똑같이 복제되지는 않습니다. 스타일만 비슷하게 맞춰진다는 점을 기억해두세요.
 

Design Mode로 정밀하게 수정하기

이미 "이렇게 보이게 하고 싶다"는 그림이 명확할 때는 Design Mode가 더 빠르고 정확해요. 예측 가능한 작은 수정에 적합합니다.
Design Mode를 열면 다음과 같은 작업을 할 수 있어요.
  • Typography(타이포그래피), Colors(색상), Spacing(여백), Borders(테두리), Shadows(그림자) 조정
  • 픽셀 단위로 정확한 정렬(alignment) 과 패딩(padding) 조정
  • AI에게 요청하는 것보다 빠르고 결정적(deterministic) 인 작은 변경 처리
 
또한 Bullet은 개별 노션 블록을 코딩 없이 정밀 수정할 수 있는 Block Editor(블록 에디터) 도 제공해요.
  • 블록 단위로 폰트 크기, 정렬, 색상 등을 클릭만으로 변경할 수 있어요.
  • 변경 사항은 새로고침 없이 실시간으로 반영됩니다.
  • 접근 경로: Pages → Editor
 

AI 결과가 마음에 안 들 때 — Reject & Rollback

Bullet AI의 결과를 되돌리는 두 가지 방법이 있어요.
  • Reject Style: 가장 최근에 적용된 스타일 한 단계만 폐기합니다.
  • Rollback: 이전에 저장된 스타일 시점으로 되돌리고, 그 이후의 모든 변경 사항을 함께 제거합니다.
⚠️ Reject나 Rollback을 하더라도 소모된 크레딧은 환불되지 않습니다.
 

적용된 코드 확인 · 편집 · 글로벌화

AI나 에디터로 적용한 모든 스타일은 CSS 탭에 쌓여요. 고급 사용자라면 직접 편집할 수도 있습니다.
  • Code 버튼을 누르면 AI가 적용한 스타일을 확인할 수 있어요.
  • Publish 전까지는 Code Editor에서 스타일을 수정하거나 제거할 수 있습니다.
  • Save as Global Code로 저장하면, 해당 변경 사항이 사이트 전체에 적용돼요.
 

데스크탑 · 태블릿 · 모바일 반응형 작업

  • 스타일은 데스크탑이 기본값이며, 데스크탑에서 변경한 내용은 모든 디바이스에 전역적으로 적용됩니다.
  • 상단 툴바에서 태블릿 / 모바일로 전환하면, 해당 디바이스 전용 미리보기와 수정이 가능합니다.
  • 만약 "데스크탑에서만" 적용되는 변경을 원한다면, CSS를 직접 추가해야 합니다.
 

크레딧은 어떻게 쓰이나요?

  • 각 사이트에는 100 크레딧이 기본 제공되며, Billing 섹션에서 잔량을 확인할 수 있어요.
  • 크레딧은 AI 스타일을 적용할 때마다 차감됩니다.
  • 블록 단위 스타일링은 크레딧 소모가 적고, 페이지 전체 스타일링은 더 많이 소모됩니다.
  • 앞서 안내한 대로, Reject나 Rollback을 해도 크레딧은 돌아오지 않아요.
 

Bullet 공식 Best Practices

Bullet 공식 문서에서 안내하는 작업 원칙이에요. 레이어별로 디자인을 수정할 때 그대로 따라가면 안전합니다.
  • 사이트 전체가 깔끔해 보이도록 스타일 일관성을 유지하세요.
  • 공통 블록에는 글로벌 스타일, 일회성 요소에는 로컬 스타일을 사용하세요.
  • 퍼블리시(Publish) 전 항상 미리보기로 확인하세요.
  • AI + Design Mode를 함께 조합해 사용할 때 가장 좋은 결과가 나옵니다.
 

스타일이 적용되는 우선순위 (Style Application Hierarchy)

Bullet은 다음과 같은 구조적인 우선순위로 스타일을 적용합니다. 어떤 변경이 어디에 영향을 주는지 헷갈릴 때 이 순서를 기억하면 좋아요.
  1. Default Notion Styles (Base Styles) — 노션 기반의 기본 타이포그래피 · 여백 · 색상
  1. Theme Styles — 색상, 폰트, 레이아웃 등을 사이트 전반에 적용하는 디자인 시스템
  1. Global Code — 워크스페이스 전체에 적용되는 사용자 정의 CSS
  1. Page-level Styles — 특정 페이지에만 적용되는 스타일
  1. Block Editor Styles — 개별 블록(레이어)에만 적용되는 가장 구체적인 스타일
 
뒤에 적용되는 스타일이 앞 단계의 스타일을 덮어씁니다. 즉, 블록 단위 스타일이 가장 우선순위가 높다는 뜻이에요.
 

정리: 어떤 상황에 무엇을 쓰면 되나요?

🎯
  • 새 테마, 영감, 복합 스타일 조합이 필요할 때 → Bullet AI (Words / Images)
  • 수치 기반의 정확한 수정이 필요할 때 → Design Mode
  • 개별 블록만 빠르게 다듬고 싶을 때 → Block Editor (Pages → Editor)
  • 사이트 전체에 일괄 적용하고 싶을 때 → Global Code 저장
  • 세밀한 커스터마이징이 필요할 때 → CSS 직접 편집
 

후기 이벤트

후기 작성(클릭)하고 내 홈페이지 SEO 피드백 보고서 받아보세요!