Part 5-11. 테마로 브랜드 컨셉 적용하기

Part 5-11. 테마로 브랜드 컨셉 적용하기

Bullet 테마(Theme) 설정 가이드

테마가 왜 중요한가요?

테마는 여러분의 웹사이트 첫인상을 결정하는 중요한 요소예요. 브랜드 색상, 글꼴, 레이아웃 등이 모두 테마 설정에 포함됩니다. 마치 나만의 집을 꾸미는 것처럼, 웹사이트에도 개성과 분위기를 불어넣는 과정이라고 할 수 있습니다.
notion image

라이트 모드와 다크 모드는 어떻게 설정하나요?

Theme Settings의 맨 위에 보이는 "Default color mode" 섹션에서 기본 테마 색상을 설정할 수 있어요.
notion image
  • LIGHT MODE: 밝은 배경에 어두운 글자 - 일반적이고 친숙한 느낌이에요
  • DARK MODE: 어두운 배경에 밝은 글자 - 세련되고 현대적인 느낌이 들어요
그 아래 "Enable light and dark mode toggle"을 켜면 방문자가 직접 라이트/다크 모드를 전환할 수 있는 버튼이 웹사이트에 추가됩니다. 잠재고객의 성향이 따라 다크 모드를 선호하는 사람들도 있어요.
 

브랜드 색상은 어떻게 설정하나요?

"Brand colors" 섹션에서 웹사이트의 전체적인 색상 테마를 설정할 수 있어요
notion image
  • Brand Color: 가장 중요한 메인 색상으로, 버튼이나 강조 요소에 사용됩니다
  • Text: 웹사이트 전체에 사용되는 글자 색상이에요
  • Background: 웹사이트의 배경 색상입니다
색상 박스를 클릭하면 색상 선택기가 나타나서 원하는 색상을 고를 수 있어요. 브랜드 로고나 이미지와 어울리는 색상을 선택하는 것이 좋습니다.
 

내비게이션 바 색상은 어떻게 바꾸나요?

"Navbar colors" 섹션에서 웹사이트 상단에 위치한 내비게이션 바의 색상을 설정할 수 있어요
notion image
  • Background: 내비게이션 바 자체의 배경 색상
  • Text: 내비게이션 바의 메뉴 텍스트 색상
  • Call to action text: 눈에 띄는 행동 유도 버튼의 텍스트 색상
내비게이션 바는 모든 페이지에 표시되기 때문에, 브랜드 이미지와 일치하면서도 가독성이 좋은 색상 조합을 선택하는 것이 중요해요.
 

푸터 색상은 어떻게 설정하나요?

"Footer colors" 섹션에서 웹사이트 하단의 푸터 색상을 설정할 수 있어요
notion image
  • Background: 푸터의 배경 색상
  • Text: 푸터에 들어가는 텍스트 색상
푸터는 웹사이트의 마무리 부분이니만큼, 전체 디자인과 조화를 이루는 색상을 선택하세요. 보통 내비게이션 바와 비슷한 색상이나 약간 어두운 색상을 사용하는 경우가 많아요.
 

사이드바 색상은 어떻게 바꾸나요?

"Sidebar colors" 섹션에서 사이드바(있는 경우)의 색상을 세밀하게 설정할 수 있어요
notion image
  • Background: 기본 사이드바 배경 색상
  • Hover Background: 마우스를 올렸을 때 바뀌는 배경 색상
  • Active Background: 현재 선택된 메뉴 항목의 배경 색상
사이드바가 있는 레이아웃을 선택한 경우, 이 설정을 통해 사용자 경험을 더 풍부하게 만들 수 있어요!
 

노션 색상은 무엇인가요?

"Notion colors" 섹션은 특별해요! 여기서는 노션에서 사용되는 색상 블록(예: 회색, 갈색, 주황색 등)의 실제 색상을 커스터마이징할 수 있습니다.
notion image
  • 노션에서 텍스트에 색상을 적용했거나 색상 블록을 사용했다면, 이 설정을 통해 해당 색상이 웹사이트에서 어떻게 보일지 변경할 수 있어요
  • 예를 들어, 노션에서 '빨간색'으로 표시한 텍스트를 웹사이트에서는 '분홍색'으로 바꿀 수 있답니다
  • Checkbox background는 노션에서 체크박스 배경 색상을 설정합니다
 

테마 설정에서 알아두면 좋은 팁은 무엇인가요?

notion image
 
  1. 색상 조합 고려하기: 너무 많은 색상은 산만해 보일 수 있어요. 2-3가지 주요 색상과 중립 색상(검정, 흰색, 회색)을 조합하는 것이 좋습니다.
  1. 미리보기 활용하기: 상단의 "See live preview" 버튼을 클릭하면 변경사항이 실제로 어떻게 보이는지 확인할 수 있어요.
  1. 초기화 옵션: 각 섹션마다 "Reset" 버튼이 있어서 실수로 색상을 잘못 설정했을 때 초기화할 수 있어요.
  1. 저장 잊지 않기: 각 섹션마다 또는 전체 페이지 상단의 "Save" 버튼을 클릭해야 변경사항이 적용됩니다!
  1. 브랜드 일관성: 로고, 소셜 미디어, 명함 등 다른 브랜드 자산과 일치하는 색상을 사용하면 전문적인 느낌을 줄 수 있어요.
 

설정을 완료한 후에는 어떻게 하나요?

모든 색상 설정을 마친 후에는 상단의 다른 탭(Typography, Layout, Database Views 등)도 살펴보세요. 색상뿐만 아니라 글꼴, 레이아웃, 데이터베이스 스타일 등 다양한 요소를 설정하여 완벽한 웹사이트를 만들 수 있답니다!
모든 설정을 마치고 "Save" 버튼을 누르면, 변경사항이 즉시 웹사이트에 적용됩니다. 다양한 기기(데스크톱, 태블릿, 모바일)에서 확인해보고 필요하다면 추가로 조정해보세요.
이렇게 간단한 설정만으로도 노션 페이지를 멋진 전문 웹사이트로 변신시킬 수 있어요! ✨
 

후기 이벤트

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