오늘의 인사이드
- 노션을 활용한 웹사이트 빌딩 팁과 노하우
- 기존 웹사이트와 템플릿에서 레이아웃 아이디어 얻기
- Google Analytics 4(GA4)를 통해 방문자 데이터를 분석하는 방법
- 노션 기능 확장 서비스로 더 강력한 웹사이트 만들기
- 웹사이트 빌딩을 도와주는 노션 템플릿
✋ 잠깐!! 🤚
구독자님의 가장 맘에 들었던 뉴스레터는 뭔가요?🤔
최근 노션 업데이트를 통해 노션으로 홈페이지를 만드는 사람이 늘어나고 있습니다. 사실 노션은 업데이트 전에도 단순한 노트 앱을 넘어, 간단한 웹페이지 빌더로도 충분히 매력적인 도구였어요.
덕분에 전부터 많은 분들이 노션을 통해 사이트를 만들었습니다. 개인 홈페이지, 포트폴리오, 채용 페이지, FAQ 등 다양한 분야에서 제작되고 있죠.
복잡한 페이지는 어려울 수 있지만, 노션의 직관적인 인터페이스와 다양한 템플릿 덕분에 간단한 웹사이트는 만들기 매우 편한 편입니다. 특히, 웹사이트 구축에 대한 지식이 많지 않은 초보자들도 자신만의 웹페이지를 만들 수 있다는 점이 매력적이죠.
노션을 활용한 웹사이트 빌딩 팁과 노하우
1번
기존 웹사이트/템플릿에서 레이아웃 아이디어 얻고, 커스터마이징 하기
노션으로 만들어진 웹사이트가 제법 있다는 건 이미 아실 거에요. 이런 사이트를 검색해서 노션을 오랫동안 사용한 유저와 엠버서더 분들이 제작한 웹사이트나 템플릿을 보다 보면, 노션의 레이아웃을 어떻게 활용하는지에 대한 인사이트를 얻을 수 있어요.
물론, 노션으로 사이트를 만들면 단조로울 수 있습니다. 개발자가 코드로 작성하는 것보다는 자유도가 떨어지니까요. 하지만 전반적으로 커스터마이징이 용이하기 때문에 기존 템플릿을 자신만의 스타일로 변형하기 쉽습니다.
다양한 색상 조합, 배치 방식, 사용자 인터페이스(UI) 요소 등을 비교하면서 나만의 스타일을 찾아가 보세요. 독창적인 아이디어를 얻어가면서 디자인의 일관성도 유지할 수 있습니다.
또한, 성공적인 웹사이트는 사용자의 경험(UX)을 최우선으로 고려한 디자인을 갖추는 편입니다. 사용자 경험이 좋아야 방문자가 재방문 할 확률이 높아지고, 서비스에 대한 인식이 좋아지니까요. UX가 좋은 웹사이트들은 대체로 쉽게 네비게이션하고, 필요한 정보를 빠르게 찾을 수 있습니다.
따라서, 다양한 템플릿과 웹사이트를 참고하면서 사용자가 만족할 수 있는 레이아웃을 찾는 것이 중요합니다. 노션의 템플릿 갤러리나 다른 웹사이트 빌더의 템플릿을 활용해 다양한 디자인을 시도해보세요. 내 사이트에 가장 적합한 레이아웃을 선택하고, 필요에 따라 커스터마이징 하면서 UX를 발전시킬 수 있을 거에요.
노션으로 만들어진 용도별 사이트 바로가기
- 소개 페이지 : 왓챠 바로가기➯
- 채용 페이지 : 레몬베이스 바로가기➯
- 행사 소개 페이지 : Make Story with Notion 바로가기➯
- DB 시각화 페이지 샘플 : 먼데이닷컴 자동화 레시피 매뉴얼 바로가기➯
Notion Deep Inside: 아이디어 얻을 수 있는 검색 TIP
- ‘노션 공식 템플릿 사이트’에서 '웹사이트 구축 템플릿’ 카테고리 검색
- ‘핀터레스트’에서 영문으로 검색 (ex. notion site idea)
- 인기 웹사이트를 분석하여 어떤 디자인 요소가 효과적인지 파악하세요. 색상 조합, 글꼴 선택, 이미지 배치 등을 참고해서 적용할 수 있어요.
2번
GA4를 통해 방문자 데이터를 분석하는 방법
구글 애널리틱스(Google Analytics 4, GA4)는 웹사이트 방문자의 행동을 추적하고 분석하는 데 유용한 도구입니다. 방문자의 유입 경로, 체류 시간, 페이지 뷰 수 등, 무료로도 방문자 데이터를 폭 넓게 확인할 수 있죠.
방문자의 데이터를 분석하면 어떤 콘텐츠가 인기가 있는지, 방문자들이 어떤 경로를 통해 사이트에 접속했는지 등, 사용자 데이터, 즉 퍼스트 파티 데이터를 상당수 파악할 수 있습니다. 더군다나 서드파티 쿠키 지원 중단이 가까워지고 있는 지금, 이러한 퍼스트 파티 데이터는 마케팅에 빼놓을 수 없는 중요 데이터로 분류되고 있어요.
또한, GA4는 사용자 정의 보고서를 제공하여 특정 목표를 설정하고, 해당 목표 달성 여부를 확인할 수 있습니다. 덕분에 웹사이트의 성과를 지속적으로 모니터링하고, 필요하면 전략을 수정할 수 있죠.
예를 들어 우리 서비스의 강점과 약점을 파악하고, 이를 바탕으로 더 나은 사용자 경험을 제공할 수 있을 겁니다. 구체적으로는 특정 페이지의 이탈률이 높을 때, 해당 페이지의 콘텐츠나 디자인을 개선하는 등의 조치를 취할 수 있게 되는 거죠.
방문자 데이터 활용 TIP
- GA4 & 검색 엔진 인덱싱 설정: 노션 웹페이지를 처음 공유할 때 GA4와 검색 엔진 인덱싱을 설정해서, SEO 최적화와 사용자 데이터를 둘 다 잡으세요.
- 데이터 분석: KPI로 설정할 데이터를 정하고, 수집된 데이터를 분석하여 달성률을 체크합니다. 방문자의 행동 패턴을 파악하고, 어떤 콘텐츠가 인기가 있는지 확인하는 식으로도 활용할 수 있어요.
- 전략 수정: 적합한 결과 데이터를 설정하고 데이터를 모아 분석했다면, 결과를 바탕으로 웹사이트 전략을 수정할 수 있습니다. 자연스레 더 나은 사용자 경험을 제공할 수 있게 되죠.
Notion Deep Inside: GA4 트래킹 코드 추가 및 활용 TIP
- GA4 계정 생성 방법
- GA4 계정 설정 후, 가급적 꼭 해주면 좋을 5가지 단계
- 노션 웹페이지에 GA4 트래킹 코드 추가하는 방법
- 한 줄 요약: 공유 내의 ‘사이트 사용자 지정’에서 GA4의 측정 ID만 추가하면 됩니다.
- GA4의 탐색 기능을 통한 데이터 세부 분석하기
3번
노션 기능 확장 서비스로 더 강력한 웹사이트 만들기
노션은 다양한 외부 서비스와의 연동을 통해 기능을 확장할 수 있습니다. 가령 위젯 서비스를 통해 노션 웹페이지에 다양한 위젯을 추가할 수 있습니다.
캘린더, 차트, 소셜 미디어 피드 등 다양한 위젯이 존재하여 웹페이지의 디자인과 기능성을 높일 수 있습니다. 방문자는 더 많은 정보를 얻을 수 있고, 사용자 경험(UX)도 올라가면서 신뢰도가 높아지겠죠.
노션의 업데이트된 헤더 조작 기능이 아쉽거나 GA4를 설치하는 것으로 만족하지 못했다면 사이트 최적화 서비스를 이용해보세요.
국내의 Oopy나 해외의 Super.so 같은 서비스를 활용하면 고정 헤더, 푸터를 넣을 수도 있고, 테마 색상을 변경해서 더욱 전문적인 디자인을 구축할 수 있어요.
사용자 데이터를 수집할 때도, Google Tag Manager(GTM), Facebook Pixel 등 다양한 서비스를 추가로 이용할 수 있게 되죠. 다만, 다소의 추가 비용 발생은 감수해야해요.
마지막으로 노션의 DB 수식이나 버튼 기능 정도로는 성에 차지 않았다면, 자동화 도구를 사용해 보세요. Zapier나 Make를 통해 노션과 다른 앱 간의 자동화를 설정하면, 반복적인 작업을 줄이고 효율성을 높일 수 있어요.
Zapier와 Make 연동이 가능한 서비스라면 노션에서 추가한 항목을 해당 서비스에 반영할 수 있고, 반대로 해당 서비스에서 진행한 항목을 노션에 추가할 수도 있어요. 예를 들어 새 항목이 추가하면 자동으로 Slack에 알림을 받게 되는 거죠.
기능 확장 서비스 활용 TIP
- 방문자수 위젯 추가: 다양한 위젯이 있지만, 그 중 방문자수 위젯을 추가하면 빠르게 오늘의 방문자수를 확인할 수 있어요.
- 헤더 추가: 노션의 고정된 ‘커버-타이틀’ 상단 UI에서 벗어나보세요. 페이지 이동 버튼이 있는 고정 헤더는 어느 사이트에나 존재하는 UI이기에 사용성이 확 올라갈 거에요.
- 폼을 통한 자동 업데이트: 노션과 구글폼, 탈리 등 각종 폼을 연결시켜 자동으로 페이지를 등록하거나 자동화 작업을 해보세요.
Notion Deep Inside: 기능 확장 서비스 바로가기
웹사이트 빌딩을 도와주는 노션 템플릿
국내에는 아쉽게도 랜딩 페이지 템플릿이 많이 없습니다. 초대장 템플릿, 포트폴리오 템플릿은 이번 사이트와 결이 다소 다른 것 같아 제외했어요.
구독자님께서 아시는 템플릿이 있다면 오픈카톡방에서 알려주세요! 큰 도움이 될 거에요:)
대신 랜딩 페이지를 다양한 형태로 만들 수 있는 올인원 템플릿을 찾아서 소개드립니다!
레이아웃 복붙으로 만드는 나만의 랜딩페이지
- 페이지 단위로 완성된 템플릿 뿐 아니라, 섹션별 레이아웃을 제공하여 자유롭게 조합할 수도 있습니다.
- 섹션별 레이아웃은 헤더, 소개, 서비스, 갤러리, 팀, 리뷰, 연락처, 푸터, Copyright 등, 다양하게 존재합니다.
- 페이지 단위로 완성된 템플릿은, 패션, 건강, 음악, 디자인, 홈서비스 등 업무 분야별로 나뉘어 있어 레이아웃을 참고하기에 좋습니다.
- 노션으로 홈페이지화 하는 방법, 개인 도메인을 거는 방법 등 사용법이 다 나와있습니다.
- 영문이지만 영상으로도 활용법이 나와있어 따라하기 쉬운 편입니다.
활용법
노션으로 레이아웃 만드는게 어렵지만, 다채로운 레이아웃을 만들어보고 싶은 분께 추천드려요.
난이도: 중
DB와 수식을 딥하게 사용하지는 않아서 기본적으로 쉽습니다.
하지만 처음 복붙과 대체가 어려울 수도 있고, 설명이 영문이라 약간 난이도를 올렸어요!제작자: The Minimal Startup
가격: $29.99
혹시 포트폴리오나 개인 홈페이지 템플릿이나 샘플이 궁금하신 분들은
이쪽 뉴스레터를 참고해보세요!
오늘의 생산성 팁, 요약
- 간단한 웹사이트를 만들기에 노션은 충분히 매력적인 웹사이트 빌더입니다.
- 기존 웹사이트와 템플릿에서 레이아웃 아이디어를 얻으면, 다채로운 디자인 중 내 상황과 UX에 적합한 디자인을 찾아 나만의 사이트를 만드는데 도움이 됩니다.
- Google Analytics 4(GA4)를 통해 방문자 데이터를 분석하면, 웹사이트 성과를 모니터링해서 사이트를 키우기 위해 필요한 전략을 세울 수 있습니다.
- 노션 기능 확장 서비스를 활용하면, UX와 기능을 강화시킨 강력한 웹사이트를 만들 수 있습니다.
댓글
의견을 남겨주세요