🎨랜딩페이지제작 step2. 편집
🎨
편집기는 블록(컴포넌트) 단위로 랜딩페이지를 만드는 공간입니다. 드래그로 배치하고, 우측 속성 패널에서 속성을 편집합니다.
편집기 레이아웃
편집기는 3개 영역 + 상단 툴바로 구성됩니다.
- 상단 툴바 — 뒤로 · 경로 · 저장상태 · 설정 · DB전송 · 미리보기 · 배포
- 좌측 컴포넌트 패널 — 11종 컴포넌트 + 저장된 컴포넌트 아카이브
- 중앙 편집 영역 — 페이지 미리보기 + 블록 배치/순서 편집
- 우측 속성 패널 — 선택한 컴포넌트의 세부 설정
컴포넌트 종류 (11종)
좌측 패널에서 사용할 수 있는 블록 유형입니다.
- 이미지 — 로고, 배너, 인포그래픽 등 이미지 파일 업로드
- 텍스트 — 제목, 본문, 라벨 등 텍스트 블록 (크기·굵기·정렬·색상)
- 폼 — 리드 수집용 입력 폼 (이름·전화번호 등)
- 구분선 — 섹션 구분용 가로선
- 실시간 신청자 — 실시간 신청 현황 표시 (전환 유도)
- 카운트다운 — 마감일까지 남은 시간 카운터
- 잔여 수량 — 남은 수량 표시 (한정 프로젝트 등)
- HTML — 직접 HTML 코드를 입력해 자유 형식 블록 구성
- HTML 설문 — HTML 기반 설문 블록
- 계산기 — 간단한 계산 기능 (예: 적립금 예상 계산)
- 리드 계산기 — 리드 기반 맞춤 계산 (예: 보험료 추정)
컴포넌트 추가하기
좌측 패널에서 원하는 컴포넌트를 클릭하면 편집 영역 하단에 자동으로 추가됩니다. 블록 사이 구분선은 드래그 기준선입니다.
💡
추가된 컴포넌트를 마우스로 끌어 순서를 변경할 수 있습니다.
속성 편집 (우측 패널)
편집 영역에서 컴포넌트를 클릭하면 우측 속성 패널에 해당 컴포넌트의 설정이 표시됩니다.
예시 1. 이미지 속성
- 이미지 — 파일 선택 (PNG/JPG/WebP 등)
- 복제 — 동일한 컴포넌트를 바로 아래에 복사
- 아카이브 저장 — 다른 랜딩페이지에서도 재사용할 수 있게 저장 (아래 섹션 참고)
- 삭제 — 컴포넌트 제거
예시 2. 텍스트 속성
- 내용 — 표시할 텍스트
- 크기 — 제목/본문/캡션 등 사전 정의된 크기
- 굵기 — 보통 / 굵게
- 정렬 — 좌 / 중 / 우
- 글자 색상 · 배경 색상 — 컬러 피커 또는 HEX 코드 입력
컴포넌트 아카이브 (저장된 컴포넌트 재사용)
자주 쓰는 컴포넌트를 아카이브에 저장해두면 다른 랜딩페이지에서도 빠르게 재사용할 수 있습니다.
저장하는 방법
- 편집 영역에서 저장할 컴포넌트를 선택
- 우측 속성 패널 하단 아카이브 저장 버튼 클릭
- 저장 완료 → 좌측 하단 저장된 컴포넌트 섹션에서 조회 가능
재사용하는 방법
- 좌측 하단 저장된 컴포넌트 섹션을 펼치기 (∧/∨ 토글)
- 원하는 항목을 클릭 → 현재 편집 중인 페이지에 자동 추가
💡
같은 브랜드·여러 프로젝트에서 공용으로 쓰는 헤더/푸터/프로젝트 배너를 아카이브하면 작업 속도가 크게 올라갑니다.
다음 단계
👉
편집기 사용법을 익혔다면:
- 랜딩기본정보 설정 — 5개 탭 상세 설정 (전환 측정, 메타 데이터 등)
- 배포 · 미리보기 · 복제 — 실제 게시와 페이지 복제
- 랜딩성과추적 — 픽셀 연동으로 광고 전환 측정