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

1. 왜 노션으로 랜딩페이지를 만드나요?

1) 이유 1: 빠른 제작 (드래그 앤 드롭)

• 래그 앤 드롭 방식
• 템플릿 활용
• 실시간 미리보기

2) 이유 2: 비용 절감

- 무료로 사용 가능한 기능

• 무제한 페이지 생성
• 무제한 블록 사용
• 이미지 업로드 (5MB까지)
• 웹 퍼블리싱 (공유 링크)
• 기본 협업 기능
• 모바일 반응형 자동

3) 이유 3: 편의성

• 노션 (코딩 불필요)
• 즉시 배울 수 있음
• 마케터의 언어로 작업
• 실험과 수정이 쉬움
• 디자인 감각 불필요

4) 이유 4: 협업 용이

• 실시간 동시 편집
• 코멘트&피드백
• 권한 관리
• 버전 히스토리

5) 이유 5: 템플릿 공유

- 효과

• 매번 처음부터 만들 필요 없음
• 팀 전체 디자인 일관성 유지
• 신입도 바로 시작 가능

2. 노션이 부족한 상황

• 매우 복잡한 인터랙션 필요
• 결제 시스템 직접 연동
• 완전히 커스텀한 디자인
• 공식 브랜드 웹사이트 (도메인 필수)

3. 노션 기본 블록

• 텍스트 : 가장 기본적인 일반 텍스트입니다.
• 페이지 : 클릭하여 페이지 안에 새 페이지를 만들 수 있습니다. 페이지를 무한대로 중첩해 보세요.
• 할 일 목록 : 해야 할 일을 체크박스 목록으로 만들 수 있습니다. 단축키로 [] 을 사용하세요.
• 제목 1 : 가장 큰 크기의 제목으로 /h1 단축키를 이용하여 쉽게 추가할 수 있습니다.
• 제목 2 : 중간 크기의 제목으로 /h2 단축키를 이용하여 쉽게 추가할 수 있습니다.
• 제목 3 : 가장 작은 제목으로 /h3 단축키를 이용하여 쉽게 추가할 수 있습니다.
• 표 : 행과 열로 구성된 간단한 표를 만듭니다.
• 글머리 기호 목록 : 글머리 기호 목록입니다. 단축키로  -키 다음 space 키를 누르세요.
• 번호 매기기 목록 : 목록을 들여쓰고 자동으로 다음 번호를 생성합니다.
• 토글 목록 : 다른 콘텐츠를 포함할 수 있고, 열거나 닫을 수도 있는 토글을 만듭니다. 단축키 > + 스페이스를 사용하여 토글을 만들 수 있습니다. 현재는 토글을 수동으로 열고 닫아야 합니다. 토글을 한꺼번에 열고 닫거나, 열림 또는 닫힘이 기본 설정이 되게 할 방법은 없습니다.
• 인용 : 문서에서 인용하려는 부분을 빼내고 큰 텍스트로 강조 처리합니다.
• 구분선 : 텍스트를 나누기 위한 가는 회색선을 생성합니다. 단축키로 --을 사용하세요.
• 페이지 링크: 워크스페이스의 다른 페이지로 연결되는 링크 역할의 블록을 생성합니다.
• 콜아웃 : 팁, 경고, 법적 고지 사항 등 중요한 텍스트를 담는 상자를 생성합니다. 이모티콘도 포함할 수 있어요.

4. 랜딩페이지 섹션별 디자인

1) 섹션 1: 히어로 섹션 (Hero Section)

- 목표: 3초 안에 시선을 사로잡고 핵심 가치 전달

- 구성

1. 커버 이미지 (대표 비주얼)
2. 헤드라인 (제목1)
3. 서브헤드라인 (텍스트)
4. CTA 버튼

2) 섹션 2: 혜택/기능 섹션

- 목표: 3가지 핵심 혜택을 시각적으로 전달

- 구성

1. 섹션 제목 (제목2)
2. 3개의 열
3. 각 열: 이모지+제목+설명

3) 섹션 3: 신뢰 요소 (Social Proof)

- 목표: 불안감 해소, 신뢰 구축

- 구성

1. 섹션 제목 (제목2)
2. 통계 (콜아웃)
3. 고객 후기 (인용)
4. 언론 보도 (텍스트+이미지)

4) 섹션 4: FAQ

- 목표: 구매 직전 마지막 의심 해소

- 구성

1. Toggle 블록으로 Q&A 구성

5) 섹션 5: 최종 CTA

- 목표: 마지막 행동 유도

-  구성

1. 강력한 헤드라인
2. 긴급성 문구
3. 큰 CTA 버튼
4. 신뢰 문구 추가(선택)

5. 모바일 반응형 테스트

1) 모바일 테스트 방법

- 방법 1: 실제 모바일 기기

• 스마트폰 브라우저로 직접 접속 → 가장 정확한 테스트

- 방법 2: 크롬 개발자 도구

• PC 크롬에서 페이지 열기 → F12 또는 우클릭 → 검사 → 좌측 상단 모바일 아이콘 클릭 → 기기 선택 (iPhone, Galaxy 등) → 화면 확인

2) 모바일 테스트 체크리스트

- 레이아웃 확인

• [ ] 텍스트가 화면에 잘 맞는가?
• [ ] 이미지가 비율에 맞게 조정되는가?
• [ ] 컬럼 레이아웃이 세로로 잘 배치되는가?
• [ ] 여백이 적절한가?

- 버튼 크기 확인

• [ ] CTA 버튼을 손가락으로 쉽게 누를 수 있는가?
• [ ] 버튼 간 간격이 충분한가?
• [ ] 버튼 텍스트가 읽히는가?

권장 크기는 최소 44x44px (애플 가이드라인)

버튼은 텍스트 크기 조정 필요

 

- 이미지 로딩 확인

• [ ] 이미지가 3초 이내에 로드되는가?
• [ ] 고화질 이미지가 깨지지 않는가?
• [ ] 이미지가 화면을 벗어나지 않는가?

- 이미지 최적화 팁

• 이미지 크기: 최대 500KB 이하
• 해상도: 1920px 이하로 조정
• 포맷: JPG (사진), PNG (로고)
• 압축: Figma 툴 사용 (내보내기 시에 크기 0.5x 등으로 조정)

- 텍스트 가독성

• [ ] 헤드라인이 2줄 이내인가?
• [ ] 본문 텍스트가 읽기 편한가?
• [ ] 폰트 크기가 적절한가? (최소 16px)
• [ ] 줄 간격이 충분한가?

- 모바일 텍스트 팁

• 헤드라인: 짧고 임팩트 있게
• 서브헤드: 2-3줄 이내
• 본문: 문단 간격 넓게
• 리스트: 불릿 포인트 활용

6. [실습] 나만의 랜딩페이지 만들기

[과제] 아래 브랜드 중 1개, 혹은 실제 브랜드를 선택하여 랜딩페이지를 만들어 보세요.

브랜드 1: “퓨어슬립” (수면 베개 브랜드)

브랜드 2: “플랜티” (실내 공기정화 식물 브랜드)

브랜드 3: “마이보이스” (온라인 보이스 트레이닝 서비스)

STEP 1: 페이지 기본 설정

• 새 페이지 생성
• 커버 이미지 추가
• 페이지 아이콘 추가 (선택)

STEP 2: 히어로 섹션 만들기

• 헤드라인 작성 → 가치 제안 한 문장
• 서브헤드라인 작성 → 헤드라인 보완 설명 (2-3줄)
• CTA 버튼 추가

STEP 3: 혜택/기능 섹션 만들기

• 섹션 제목
• 3가지 핵심 혜택 정의
• 콜아웃 블록으로 3개 생성
• 3개의 열로 배치

STEP 4: 신뢰 요소 추가

• 섹션 제목
• 통계 콜아웃
• 고객 후기 (최소 2개)

STEP 5: FAQ 섹션

• 섹션 제목
• FAQ 항목 5개 작성 (토글 이용)

STEP 6: 최종 CTA 섹션

• 헤드라인
• 긴급성 요소 (선택)
• 콜아웃으로 큰 CTA 버튼
• 신뢰 문구 

 

 

 

※ 본 글은 학습을 목적으로 작성된 게시물로, 특정 브랜드·제품·서비스명이 언급될 수 있습니다. 이는 순수한 예시일 뿐이며, 상업적 목적은 전혀 없음을 밝힙니다.