노션 기반 웹사이트 빌더인 Bullet의 대시보드 설정부터 내비게이션 바, 블로그 페이지 커스터마이징까지 전반적인 사용법을 상세히 설명합니다. 사이트 최적화와 배포 설정 방법을 확인해보세요.
Part 5-6. Bullet 대시보드 살펴보기
Sunwoo Lim
노션 기반 웹사이트 빌더인 Bullet의 대시보드 설정부터 내비게이션 바, 블로그 페이지 커스터마이징까지 전반적인 사용법을 상세히 설명합니다. 사이트 최적화와 배포 설정 방법을 확인해보세요.
Chapters
00:00
Introduction to Bullet
Overview of the Bullet dashboard and how to edit site designs.
00:28
Customizing Design with AI
02:51
Site Settings Overview
04:36
General Site Configuration
06:11
Publishing and Automation
09:00
Navigation Bar Setup
17:15
Footer and Blog Settings
Transcript
00:00
다음은 블렛 데시보드와 화면에 대해서 좀 전반적인 설명을 좀 해드리려고 합니다.
00:05
먼저 이렇게 블렛데시보드에 블렛데시보드에 들어오면 이 개별적인 사이트별 설정은 여기 Edit에서 하실 수 있습니다.
00:15
Edit로 들어가시면 노션에서 블렛으로 보여지는 이 화면에 세세한 디자인이라든지 테마 이런 걸 변경을 하실 수 있고 그리고 여기 왼쪽에 보이는 이거는 뭐냐면 블렛에 내장된 이 블렛에 예를 예를 들면 이런 색깔이라든지 뭐 이런 것들을 여기에 여기에 요청을 해서 직접 코드를 짜줍니다.
00:42
그래서 우리가 보통 커스텀 코드로 코딩을 해서 짜야 되는 영역을 여기서 대화 창에서 요청을 하셔가지고 바꿀 수 있습니다.
00:52
간단한 예시로 예를 들면 여기에 지금 이 h1을 크기를 예를 예를 들면 폰트 폰트 색깔을 파란색으로 해주세요 라고 하면 제가 제가 요청한 바에 따라서 얘가 코드를 짜줘서 입혀줍니다.
01:08
원래는 이렇게 색깔 같은 거라든지 꾸미는 거는 우리가 우리가 CSS라고 해가지고 별도의 코드를 짜서 넣어야 되거든요 근데 이런 부분을 보시는 것처럼 이렇게 바꿔줍니다 근데 요거를 이제 이제 그냥 한글로 명령을 해도 이렇게 바꿔주는 거 보실 수 있죠 그래서 돌리려면 이 Reject Style을 하시면 되고 코드를 보시려면 요렇게 코드를 코드를 눌러주시면 이렇게 확인을 하실 수 있습니다 그래서 웬만한 수정은 이런식으로 하셔도 되고 그리고 여기 오른쪽 상단에 여기 코드 에디터를 들어가시면 이 이 csx 코드가 이렇게 들어간 것을 확인을 하실 수 있습니다 요거는 제가 별도로 한번 또 따로 설명을 드리도록 하겠습니다 그래서 그래서 에디트에서 방금 이제 그런 화면들을 설정을 할 수 있고 요거는 전체 데시보드 입니다 전체 데시보드에서 이런 지금 요금제라든지 요금제라든지 이런 부분을 확인을 하실 수 있고 이 사이트의 Edit에 들어가서 이 사이트에 대한 설정을 또 하실 수 있습니다.
02:12
그래서 그거는 여기 왼쪽 사이드바에 여기 톱니바퀴 이게 사이트 세팅입니다.
02:18
여기 들어가시면 이제 이 화면에서 우리가 세부적인 설정을 할 수 있습니다.
02:24
이게 좀 들어가는 경로가 헷갈리실 수 있어요.
02:28
그래서 다시 한번 보여드리면 여기 여기 톱니바퀴 여기 들어가셔서 들어오시면 됩니다.
02:33
그러면 지금 하나씩 설명을 드리겠습니다 이 overview라는 것은 전반적인 이제 계열을 보여주는 거죠 그래서 지금 사이트 만들어졌고 내비게이션 바 커스터마이즈 됐고 커스텀 코드 들어갔고 지금 어프터를 커스터마이즈 해야 된다 그래서 도메인까지 지금 아직은 된 상태는 아닌 거죠 이 라이트하우스 스코어는 뭐냐면 구글에서 사이트의 속도를 체크를 하는 겁니다 그래서 이 정도면 상당히 좋은 수치입니다 블렛의 좋은 점 중에 하나가 이런 라이트하우스 점수를 잘 받을 수 있도록 좀 최적화가 되어 있습니다.
03:13
이미지를 올리면 이미지가 압축이 되서 WEP 파일이 있거든요.
03:21
그걸로 변환을 해준다던지 그런 식의 어떤 최적화 세팅이 미리 되어 있습니다.
03:27
그래서 이런 점수 관리가 좀 수월하다 라는 점이고 그리고 이거는 지금 퍼블리시된 내역을 이렇게 확인을 하실 수 있습니다.
03:35
여러분들이 계속 사이트를 수정하시면 이런 우리가 우리가 보통 배포라고 하거든요.
03:41
그래서 이런 배포된 내역들을 쭉 쌓이는데 특정 시점으로 돌리고 싶다 그럴 때가 있거든요.
03:47
그래서 그렇게 되돌리는 기능도 있습니다.
03:49
자 그 다음 제너럴로 넘어가서 여기에서 이제 사이트 이름을 써주시면 돼요.
03:53
예를 들면 뭐 한스 그래서 노션 컨설턴트 뭐 이런식으로 여러분들의 사이트를 넣으시면 되고 이거는 이제 노션 페이지입니다 노션 페이지 URL 주소고 그리고 그리고 만약에 만약에 업그레이드를 하시면 요거는 이제 랭기즈를 코리안으로 해야겠죠 이 이 블렛에서 다국어 세팅도 가능합니다 저도 해본 적은 없는데 다국어 세팅도 가능하고 우리는 여기서 코리안이니까 Korean을 찾아서 이렇게 업데이트를 해주시면 됩니다.
04:22
그리고 이거는 뭐 사이트가 인베드 되도록 이제 허락을 하겠냐 그런 내용이고 사실 크게 뭐 상관은 없을 것 같구요 그리고 그리고 여기 파비콘이라고 있습니다 파비콘은 뭐냐면 이 홈페이지 보면 이제 요런거 요런 것들 요 블렛도 보면 블렛 로고가 들어갔죠 요게 파비콘 입니다 그래서 요것도 요소가 들어갔냐 안 들어갔냐 이런게 또 중요하거든요 그래서 이 파비콘도 여기서 업로드 하시면 되고 이 OG 이미지 같은 경우에는 우리가 카카오톡이라든지 혹은 페이스북, 링크드인, SNS에 올릴 때 미리 표시된 화면이라고 생각을 하면 됩니다.
05:02
그래서 여기 사이즈에 맞게 제작을 해서 업로드를 하시면 이게 보입니다.
05:08
그리고 밑에 Publish Frequency는 뭐냐면 이걸 얼마나 지금 발행을 자동화 하겠냐라는 거거든요.
05:17
보통 무료 요금제에서는 이제 제가 이 publish를 누르면 그때 발행이 됩니다.
05:22
그래서 예를 들면은 지금 발행된 상태에서 제가 노션 페이지 원본을 수정을 했어요.
05:29
그러면 홈페이지도 수정이 돼야 되겠죠.
05:31
근데 자동으로 수정이 되는 게 아닙니다.
05:33
노션의 페이지를 수정을 하고 나서 이 publish를 눌러야 해당된 수정된 버전으로 홈페이지가 보여집니다 실시간이 아니고 사용자가 요 발행 버튼 눌러야지 이게 됩니다 그러면 예를 들면은 나는 노션의 블로그 글을 매일매일 쓰는데 매일매일 그런 불렛도 들어와서 퍼블리시를 해줘야지 그 글이 발행이 되는 거죠 근데 뉴로 뉴로 기능에서는 요게 데일리 매일매일 매일매일 자동으로 발행이 됩니다 그러면 노션의 글만 쓰시면은 자동으로 이제 발행이 되니까 엄청 편하겠죠 그리고 이거는 매시간 도 가능합니다 밑에는 사이트 삭제할 때는 요거 델리트를 누르시면 됩니다 그래서 기본적인 설정이고 설정이고 그리고 요거는 이제 분석 데이터인데 요거 같은 경우에는 지금 무료버전에서는 한 주 단위로 이렇게 보여집니다.
06:23
유료버전에서는 30일, 90일 뭐 이렇게 어떤 어떤 키워드로 들어갔는지까지 이제 볼 수 있습니다.
06:29
도메인은 여러분들이 내 도메인을 구매를 해가지고 연결을 하실 때 쓰는 겁니다 그래서 그래서 커스텀 도메인을 선택을 하셔가지고 쓰시면 되고 서브 서브 딜렉토리는 뭐냐면 만약에 만약에 나는 이제 도메인이 따로 있고 이걸 블로그 전용 페이지로 쓰겠다 그럴 때 쓰는 개념이라고 생각을 해주시면 됩니다 그리고 이제 요런 것들은 구글봇이라던지 검색엔진 봇들이 이렇게 이 사이트의 정보를 끌고 갈 때 주는 가이드 정도라고 생각을 하시면 됩니다 그래서 어떤 거는 끌고 갈 수 있게 어떤 거는 못 끌고 가게 이런 걸 설정을 하는데 기본적으로 Bullet에서 세팅이 되어 있는 기준들이 있어요 그래서 사실 웬만한 건 우리가 건드릴 필요가 없기 때문에 그냥 놔두시면 되고 그 redirect는 뭐냐면 만약에 여러분들이 기존의 홈페이지 사이트가 있다고 했을 때 그 사이트의 모든 링크들이 접속이 다 잘 돼야 되는데 그게 예를 들면 네버슬립의 네버슬립의 주소의 노션이라고 해보겠습니다.
07:36
이제 요런 링크가 있었는데 요거가 내용이 사라지면서 다른 주소로 내가 옮기고 싶다 그러면 여기에 여기에 노션에서 예를 예를 들면은 노션 페이지 이런 식으로 이 주소가 바뀌었으면 요런 것들을 추가해 놓으면 알아서 이 이 redirect 재지정을 해줘서 글로 보내줍니다 그래서 이거는 이제 홈페이지가 기존에 있고 뭔가 페이지 링크가 연결이 안 되는 상황일 때 쓰는 기능이다 그래서 처음 홈페이지를 만드시는 분한테는 해당사항이 없습니다 그 그 다음 이제 네비바 입니다 네비바 네비바는 뭐냐면 우리가 홈페이지에서 예를 들면은 뭐 이런 홈페이지 위에 상단에 있는 요런 것들을 네비바라고 하고 참고로 요 밑에 있는 거는 이제 푸터라고 합니다 홈페이지를 홈페이지를 구성하는 위, 아래 요소라고 생각을 하시면 되고 이 노션에서는, 이 블렛에서는 이렇게 만들 만들 수 있습니다.
08:26
그래서 처음에 보면은 이 브랜드, 브랜드, 홈페이지에 우리가 들어갔을 때 여기 들어가는 로고라든지, 로고가 없으면 텍스트로도 넣으실 수 있어요.
08:34
그래서 여기서 텍스트로 넣으셔가지고 하셔도 되고 혹은 이미지가 있으면 로고해서 이미지를 넣어 주시면 됩니다.
08:43
그리고 사이트 설치를 활성화 시키면 이제 사이트에 검색 창이 붙습니다.
08:47
그래서 사이트 내에 어떤 정보를 검색을 사용자가 하면 할 이즈가 많다 라고 하면 활성화를 해주시면 되고 굳이 이런거 필요 없다 라고 하면 비활성화를 해주시면 됩니다.
09:00
이거 한 다음에 꼭 Save를 누르셔야지 이게 반영이 반영이 됩니다.
09:05
안 누르시면 반영이 안 돼요.
09:08
그래서 Save를 꼭 눌러 주셔야 되고, Save 한 다음에 반영이 바로 되는 게 아니고, Publish를 해야 수정된 상황들이 반영이 됩니다.
09:17
그래서 지금 이렇게 기본으로 지금 들어간 게 보이시죠?
09:21
그래서 우리가 이거 하나하나씩 좀 바꿔볼 텐데 여기서 이 드롭다운 이라는 개념을 좀 아시면 아시면 좋습니다 좋습니다 여기 사실 뭐 워딩이 워딩이 영어고 뭔가 처음 보니까 어렵게 느껴지는 거지 별거 없거든요 우리가 이렇게 그냥 클릭을 하는 경우가 있고 요소가 이렇게 있는 경우가 있어요 요런 거를 드롭다운 이라고 합니다 이렇게 마우스를 올리면 이제 드롭다운된 드롭다운된 형태로 이렇게 여러가지 항목들을 선택을 할 수 있습니다.
09:46
만약에 서비스를 우리가 여러개를 제공한다 그러면 서비스 1, 2, 3, 4 이렇게 들어가겠죠.
09:52
그래서 이런식으로 들어가고 각각의 페이지는 그냥 페이지로 들어갑니다.
09:57
그리고 순서를 이렇게 바꿔주실 수 있습니다.
10:01
이걸 이렇게 올리면 순서가 이렇게 내려가구요 버퍼가 있는데 이런식으로 내리면 이렇게 순서를 변경하실 수 있습니다.
10:09
그러면 예를 들면은 이거를 사이트를 이제 이제 뭐 소개라고 해보겠습니다.
10:15
그리고 그리고 이 선택은 페이지냐 URL이냐 두 개가 있거든요.
10:21
그 페이지는 Notion 페이지입니다.
10:23
그래서 지금 우리가 블렛에 연결했던 그 Notion에 Notion에 이 페이지가 있어야 여기서 그 페이지들이 뜹니다.
10:32
쭉 스크롤을 스크롤을 내려시면 지금 노션에 있는 페이지들이 이렇게 보이실 거예요.
10:37
소개해서 이 페이지를 넣고 그 그 다음에 가격 안내라고 하겠습니다.
10:41
그리고 그리고 이거는 일단은 일단은 뭐 이런 페이지로 해볼게요.
10:46
그리고 블로그는 블로그 하면 되고 컴포넌치 요거는 문의하기로 해보겠습니다.
10:52
그 다음에 여기는 이제 한글로 해야 사람들이 좀 알아보겠죠.
10:58
여기는 일단 요거는 제가 지우고 페이지를 서비스라고 해보겠습니다.
11:04
서비스 여기를 케이스 스터디라고 되어 있네요.
11:07
케이스 스터디 페이지는 뭐 아무거나 일단 해놓겠습니다.
11:11
일단 필요 없는 건 좀 지우고 자 그 다음에 뭐 노션 강의 노션 컨설팅 이건 각각의 다른 페이지가 돼요 저는 예시여서 지금 이렇게 보여드렸는데 이렇게 해서 변경된 사항을 여기 세이브를 누르셔야 반영이 됩니다.
11:27
그 다음에 이 퍼블리시를 누르면 변경된 사항이 사이트에서 지금 지금 이렇게 생겼는데 요 상단에 요게 바뀔 겁니다.
11:34
그래서 요거는 지금 퍼블리싱 되는데 시간이 좀 걸리거든요.
11:38
지금 이제 됐는데 한번 볼까요.
11:39
했더니 위에 상단은 안 바뀌었고 여기만 바뀌었습니다.
11:42
확인을 해보면 여기 체크 표시를 이렇게 해줘야 수정이 완료가 됩니다.
11:48
그리고 save 버튼을 누르시고 발행을 하셔야 됩니다.
11:52
그래서 저처럼 방금 제가 실수를 했는데 수정을 한 다음에 체크를 꼭 누르시고 하셔야 된다.
11:58
자 그럼 사이트 다시 가면 바뀌어 있죠.
12:00
소개, 강요간내, 블로그, 서비스 이렇게.
12:03
그래서 이거는 사실 로고가 있으면 로고로 무조건 바꿔 주셔야겠죠.
12:08
그 다음에 여기 이쪽에 버튼인 cta 버튼이라고 하는데 여기 여기 맨 밑에 call to action 이 버튼입니다.
12:14
그래서 이 버튼은 이렇게 지금 미리 설정이 되어있는 게 Use Template이라고 되어 있는데 여기를 이제 이제 뭐 무료 상담이라고 해보겠습니다.
12:23
무료 상담이라고 해가지고 이제 이제 여기에 제가 뭐 문의를 넣고 싶은 폼을 하나 만들어서 링크를 넣어 가지고 Save Save 해서 이렇게 하시면 이게 이게 반영이 되겠죠.
12:33
그 다음 푸터입니다.
12:34
푸터는 아까 설명드린 것처럼 여기 밑에 하단에 이렇게 이거를 바꾸는 작업인데 이거는 이따가 자세히 다뤄보도록 하겠습니다.
12:43
그리고 사이드바 이거는 뭐냐면 지금 보통 우리가 메뉴가 위에 상단에 있는데 가끔 홈페이지 보면은 왼쪽에 사이드바가 있는 게 있거든요 그래서 나는 홈페이지를 좀 특별하게 꾸미고 싶다 그러면 이렇게 활성화를 하시고 이 이 네비바 구성한 것처럼 메뉴를 구성하시면 됩니다 멤버십은 이거는 이제 유료 사용자만 가능한데 예를 들면 나는 우리 사이트에 특정 멤버 멤버 혹은 협력사만 특정 페이지를 보게끔 하고 싶다 이런 기능들은 여기서 가능합니다 그리고 이제 블로그 페이지에 대한 설정을 하는 곳인데 예를 들면 여기서 이제 이런 거를 바꿔주시면 좋겠죠 블록으로 바꾸고 밑에 이 페이지 네이션은 한 페이지에 몇 개나 보여줄 거냐 하거든요 그래서 너무 많은 걸 또 보여주면은 접속을 했을 때 좀 느림 현상이 있습니다 그래서 적당한 수준에서 설정을 해주시면 되고 그 그 다음에 여기 있는 거는 이제 보통 영어에서는 Featured Post 라고 많이 표현을 하더라구요.
13:44
그래서 이거는 꼭 꼭 보셔야 하는 글 뭐 이렇게 표현을 하셔도 되고 아니면 가장 많이 조회된 글 이렇게 하면 보통 사람들이 궁금해하니까 이제 이런 것을 수정을 해주시면 되겠죠.
13:55
그래서 Post 혹은 글 모두 보기 이런 식으로 이거는 이제 목차 이거는 이거는 관련글 이렇게 이렇게 한글로 바꿔주시면 되겠습니다.
14:05
글 모두 보기 마찬가지로 여기도 글 모두 보기 이렇게 바꿔주시고 이거는 이제 포스트 페이지를 커스터마이징 하는 건데 요거는 요거는 이 썸네일 위에 있냐 밑에 있냐 이렇게 설정을 하는 거고 이거는 아무 이미지가 없을 때 보여지는 이미지입니다 그래서 그래서 나는 이거를 투명으로 하겠다 나는 회색 바탕으로 하겠다 이렇게 이렇게 설정을 해주시면 되고 그리고 목차는 보여주기 안 보여주기 이렇게 하실 수 있는데 웬만하면은 목차는 보여주기를 하시는 게 좋고 또 날짜를 어떻게 보여줄 거냐 근데 우리가 한국어 사이트니까 이거는 요 5월 10일 이 기준을 하시는 것을 추천을 드립니다.
14:48
보통 영어는 우리가 좀 쓰지 않죠.
14:51
그래서 이렇게 표현하시기를 추천드리고 수정을 한 다음에 save를 하시면 그 그 그 다음에 이제 publish를 누르면 이게 반영이 됩니다.
15:00
그래서 사이트의 어떤 전반적인 수정을 할 때는 여기서 한다 그래서 도메인 연결부터 뭐 내비바 밑에 부터 이런 이런 설정들을 여기 사이트 세팅해서 이제 한다고 보시면 됩니다 방금 이제 블로그 페이지 한번 들어가 볼까요 그러면 이제 이제 여기 보시는 화면처럼 이렇게 나오고 이제 글 이게 아까 한글로 우리 바꾼 거죠 모두 보기 이렇게 설정이 되어 있고 여기서도 목차 목차 이렇게 나오고 관련글 이렇게 나옵니다