노션 랜딩페이지 제작부터 우피·Short.io 클릭률 측정까지 — 노코드 마케팅 실전 가이드

코딩 없이 1~2시간 안에 랜딩페이지를 만들고, 어떤 채널에서 얼마나 클릭됐는지 수치로 확인하는 방법을 다룹니다.
노션으로 구조를 잡고, 우피로 실제 웹사이트처럼 배포하고, Short.io로 채널별 성과를 측정하는 흐름입니다.
블록 구성부터 UTM 설정까지 순서대로 정리합니다.

노션으로 랜딩페이지를 만드는 이유
노션 핵심 블록 사용법
랜딩페이지 5개 섹션 구성
모바일 반응형 테스트
우피(Oopy)로 전문 웹사이트로 전환하기
Short.io로 채널별 클릭률 측정하기
핵심 정리

Chapter 5-3 — 노션으로 랜딩페이지 기획 및 디자인

1. 노션으로 랜딩페이지를 만드는 이유

외주 개발비도 없고, 웹빌더 월정액도 아깝고, 코딩은 모를 때 노션이 현실적인 선택지입니다. 드래그 앤 드롭으로 1~2시간 안에 배포할 수 있고, 무제한 페이지·블록·이미지 업로드까지 무료입니다.

쓰기 좋은 상황

빠른 제작이 필요할 때
예산이 없거나 적을 때
코딩을 모를 때
팀 협업이 필요할 때

맞지 않는 상황

복잡한 인터랙션 필요
결제 시스템 직접 연동
완전 커스텀 디자인

2. 노션 핵심 블록 사용법

노션의 모든 요소는 독립적인 블록입니다. '/' 슬래시 커맨드나 드래그로 추가·이동합니다.

텍스트

H1 / H2 / H3

히어로 헤드라인, 섹션 제목에 사용. 크기로 시각적 위계를 만듭니다.

강조

콜아웃 (Callout)

특별 혜택·신뢰 요소 강조 박스. 안에 링크를 넣어 CTA 버튼처럼 씁니다.

인용

인용 블록

고객 후기를 강조할 때 씁니다. 배경선이 붙어 가독성이 좋습니다.

레이아웃

열 (Column)

블록을 옆으로 드래그하면 2~3열이 생깁니다. 모바일에서는 자동 세로 배치됩니다.

인터랙티브

토글 (Toggle)

클릭하면 내용이 펼쳐집니다. FAQ, 상세 설명에 씁니다.

노션에는 기본 버튼 블록이 없습니다. 텍스트에 링크를 걸고 콜아웃 안에 배치하면 버튼처럼 보입니다. 배경색을 바꾸면 눈에 더 잘 띕니다.

3. 랜딩페이지 5개 섹션 구성

SECTION1

히어로 섹션
커버 이미지 + H1 헤드라인(가치 제안) + 서브 헤드라인 + 링크 포함 콜아웃(CTA)

커버 이미지 → H1 → 텍스트 → 콜아웃(CTA)

SECTION2

혜택·기능 섹션
H2 제목 아래 핵심 혜택 3가지를 콜아웃으로 만들어 3열 레이아웃으로 배치합니다.

H2 → [콜아웃 | 콜아웃 | 콜아웃] (3열)

SECTION3

신뢰 요소 (Social Proof)
통계 수치 콜아웃 + 고객 후기 인용 블록 3개 + 언론 로고 이미지

콜아웃(수치) → 인용×3 → 이미지(로고)

SECTION4

FAQ 섹션
H2 제목 아래 토글 블록 5~7개로 구매 전 마지막 의심을 해소합니다.

H2 → 토글×5~7

SECTION5

최종 CTA
강력한 H2 헤드라인 + 긴급성 문구 + 눈에 띄는 색상의 큰 콜아웃(CTA 버튼)

H2 → 텍스트(긴급성) → 콜아웃(CTA, 강조색)

4. 모바일 반응형 테스트

트래픽의 60~70%가 모바일에서 발생합니다. 배포 전에 반드시 모바일 화면을 확인합니다.

테스트 방법은 두 가지입니다. 실제 스마트폰으로 링크를 열거나, PC 크롬에서 F12 → 개발자 도구의 모바일 뷰를 씁니다.

모바일 최적화 체크리스트

열 레이아웃이 세로로 자동 배치되는가

CTA 버튼 높이 최소 44px — 손가락으로 쉽게 탭 가능한가

이미지 파일 크기 500KB 이하 — 로딩이 빠른가

헤드라인이 2줄 이내로 표시되는가

Chapter 5-4 — 우피(Oopy) 소개 및 클릭률 측정법

5. 우피(Oopy)로 전문 웹사이트로 전환하기

노션으로 만든 페이지는 기본적으로 notion.site 주소가 붙습니다. 우피를 쓰면 커스텀 도메인으로 바꿔주고, GA·메타 픽셀 연동, Sticky CTA 추가, SEO 설정까지 코딩 없이 가능합니다.

커스텀
도메인

notion.site 대신 브랜드 도메인 사용. 고객에게 신뢰감과 전문성을 줍니다.

실시간
동기화

노션에서 수정하면 별도 배포 없이 웹사이트에 즉시 반영됩니다.

스타일
커스텀

Sticky CTA 버튼 추가, 전체 색상·폰트 일괄 변경, 모서리 둥글기, 페이지 너비 조절이 가능합니다.

플러그인
연동

구글 애널리틱스, 메타 픽셀, 채널톡, 카카오 채널을 코딩 없이 연동합니다.

SEO

메타 태그 최적화, 사이트맵 자동 생성, 모바일 친화성 지원으로 검색 노출에 유리합니다.

자체
통계

콘솔에서 최근 30일 페이지뷰와 상위 노출 페이지 Top 10을 확인할 수 있습니다.

우피 연동 2단계

노션 페이지 우측 상단 '공유' → '게시' → '웹에 게시' 활성화 후 링크 복사.
우피 로그인 → 복사한 링크 입력 → 커스텀 도메인 설정 → 완료.

6. Short.io로 채널별 클릭률 측정하기

어떤 채널에서 링크를 뿌렸을 때 클릭이 가장 많이 발생했는지 수치로 알 수 있는 서비스입니다. 무료 버전에서 월 1,000개 링크를 생성할 수 있습니다. (Bitly는 무료 버전에서 클릭 수 제공을 중단했기 때문에 대체제로 씁니다.)

STEP 1

긴 URL 입력

›

STEP 2

채널별 단축 링크 생성

›

STEP 3

각 채널에 배포

›

STEP 4

대시보드에서 클릭 수 확인

인스타그램용, 페이스북용, 블로그용 링크를 각각 따로 만들어 배포하면 채널별 클릭 수가 분리됩니다. 어떤 채널의 마케팅 효율이 가장 좋은지 한눈에 파악할 수 있습니다.

더 정밀한 분석이 필요하다면 — UTM 파라미터

채널만이 아니라 캠페인, 소재 단위까지 추적하려면 UTM 파라미터를 붙인 URL을 만들어 Short.io로 단축합니다. 무료 UTM Builder(Google의 Campaign URL Builder)를 씁니다.

utm_source

유입 출처
(instagram)

utm_medium

채널 유형
(social)

utm_campaign

캠페인명
(summer_sale)

전체 워크플로우

노션에서 랜딩페이지 제작 → 우피로 커스텀 도메인 배포 → Short.io로 채널별 단축 링크 생성 → 배포 → 대시보드에서 클릭 수 확인 → 성과 좋은 채널에 예산 집중

코딩 없이, 비용 최소로, 데이터 기반으로 광고를 운영하는 기본 구조입니다.

7. 핵심 정리

이것만 기억하세요

1노션 랜딩페이지는 히어로 → 혜택 → 신뢰 → FAQ → 최종 CTA 순서로 5개 섹션을 구성합니다

2노션에는 기본 버튼이 없습니다 — 콜아웃 블록 안에 링크를 넣어 CTA 버튼처럼 만듭니다

3배포 전 모바일 테스트 필수 — 열 레이아웃 세로 배치, CTA 최소 44px, 이미지 500KB 이하

4우피로 커스텀 도메인·GA·메타 픽셀을 연동하면 노션 페이지가 전문 웹사이트가 됩니다

5채널별로 Short.io 링크를 따로 만들면 인스타·페북·블로그 중 어디서 클릭이 많은지 수치로 비교할 수 있습니다

노션 → 우피 → Short.io로 이어지는 이 흐름이 무료 혹은 최소 비용으로 랜딩페이지를 운영하고 성과를 측정하는 현실적인 방법입니다. 오늘 정리한 순서대로 첫 번째 노션 랜딩페이지를 직접 만들어보세요.

'콘텐츠 마케터 5기' 카테고리의 다른 글

콘텐츠 마케터 5기 본캠프 46일차 새로운 팀의 만남 (0)	2026.06.26
콘텐츠 마케터 5기 본캠프 45일차 랜딩페이지 전환율 측정 방법 (0)	2026.06.25
콘텐츠 마케터 5기 본캠프 43일차 랜딩페이지 구조와 ChatGPT 기획법 (0)	2026.06.23
콘텐츠 마케터 5기 본캠프 42일차 CapCut 음향·영상 편집 가이드 (0)	2026.06.22
콘텐츠 마케터 5기 본캠프 41일차 CATCut 기본 분석 (0)	2026.06.19

judyabot 님의 블로그

콘텐츠 마케터 5기 본캠프 44일차 노션 랜딩페이지 제작