# 디자인·위젯 꾸미기 > DBADS 사용 가이드 04편 — 대표 색상 · 이미지 · 테마 · 접수 카운터 등 위젯 > 웹 페이지: https://dbads.co.kr/manuals/design-widgets > 마지막 업데이트: 2026-09-28 랜딩페이지를 우리 브랜드에 맞게 꾸미는 방법입니다. 대표 색상·테마·이미지(콘텐츠 블록)를 설정하고, 접수 카운터·목표 카운터·마감 타이머·실시간 접수 현황·전화연결·팝업 위젯을 켭니다. 카카오톡·페이스북에 공유했을 때 보이는 모습(SNS 공유 설정)까지 정합니다. 랜딩페이지를 우리 회사 분위기에 맞게 꾸미는 과정입니다. 대표 색상과 테마를 정하고, 이미지를 넣고, 신청을 늘려주는 위젯(접수 카운터·마감 타이머·팝업 등)을 켜 봅니다. 오른쪽 **미리보기**에 모든 변경이 바로바로 반영되니, 저장 전에 마음껏 바꿔 보세요. --- ## 1. 편집 화면 한눈에 보기 ![](/manuals/images/design-widgets/01-edit-overview.webp) 프로젝트 목록에서 프로젝트를 누르면 편집 화면이 열립니다. - ① **기본정보 탭** — 색상, 테마, 이미지 등 디자인 설정이 모여 있습니다. - ② **위젯 탭** — 접수 카운터, 타이머, 팝업 같은 부가 기능을 켜고 끕니다. - ③ **미리보기** — 고객이 휴대폰에서 보게 될 모습입니다. 설정을 바꾸면 **저장하기 전에도 즉시** 여기에 반영됩니다. ## 2. 대표 색상 바꾸기 ![](/manuals/images/design-widgets/02-primary-color.webp) 기본정보 탭을 아래로 내리면 **대표 색상**이 있습니다. 버튼과 주요 요소에 쓰이는 우리 브랜드의 색입니다. - ① **색상 네모**를 누르면 색상판이 열려 눈으로 고를 수 있습니다. - ② 브랜드 색상 코드를 알고 있다면 `#C2410C`처럼 **직접 입력**해도 됩니다. ![](/manuals/images/design-widgets/03-primary-color-preview.webp) 색을 바꾸면 미리보기의 **다음** 버튼이 바로 새 색으로 바뀝니다. 이렇게 확인하면서 우리 로고 색과 어울리는 색을 찾아 보세요. ## 3. 테마 — 밝기와 배경 연출 ![](/manuals/images/design-widgets/04-theme-options.webp) **테마**에서는 랜딩 전체의 분위기를 정합니다. - **화면 모드**: 라이트(밝은 배경, 기본) / ① **다크**(어두운 배경, 고급스러운 인상) - **배경 연출**: ② **글로우**(대표 색상의 은은한 광원)를 비롯해 네트워크·오로라·격자·도트 중에서 고를 수 있습니다. ![](/manuals/images/design-widgets/05-theme-dark-glow.webp) 다크 + 글로우를 고르면 미리보기가 이렇게 바뀝니다. 프리미엄 시공, 하이엔드 브랜드처럼 고급스러운 인상을 주고 싶을 때 잘 어울립니다. ## 4. 이미지 넣기 (콘텐츠 블록) ![](/manuals/images/design-widgets/06-content-blocks.webp) 시공 사례 사진, 상세 설명 이미지는 **콘텐츠 블록**에서 넣습니다. ① **이미지** 버튼을 누르면 이미지 블록이 하나 추가됩니다. (유튜브 영상, 텍스트, 지도, 이미지 슬라이더 등도 같은 방법으로 추가합니다.) ![](/manuals/images/design-widgets/07-image-upload-ui.webp) - ① **클릭하여 이미지 업로드**를 누르고 내 컴퓨터의 사진을 고르세요. - 업로드 영역 아래에 **권장 크기**가 적혀 있습니다 (본문 이미지는 너비 1440px 이상 권장). 권장 크기에 맞춰 올리면 어떤 휴대폰에서도 선명하게 보입니다. - 일반 이미지는 5MB, 움직이는 GIF는 10MB까지 올릴 수 있습니다. 업로드가 끝나면 블록 안에 사진이 보입니다. 블록 왼쪽의 점 여섯 개 손잡이를 끌면 순서를 바꿀 수 있고, 오른쪽 빨간 휴지통으로 삭제합니다. ![](/manuals/images/design-widgets/08-image-upload-failed.webp) 인터넷 연결 문제 등으로 업로드가 실패하면 위처럼 "이미지 업로드에 실패했습니다" 안내가 뜹니다. 잠시 후 같은 자리를 눌러 다시 업로드하면 됩니다. ## 5. 저장하기 ![](/manuals/images/design-widgets/09-save-design.webp) 설정을 바꾸면 화면 아래에 "저장하지 않은 변경사항이 있습니다" 막대가 나타납니다. ① **모두 저장**을 누르면 지금까지의 디자인 변경이 저장됩니다. **미리보기에 보인다고 저장된 것이 아니니**, 꾸미기를 마치면 꼭 저장을 누르세요. ## 6. 위젯 — 신청을 늘려주는 장치들 ![](/manuals/images/design-widgets/10-widgets-overview.webp) **위젯 탭**에는 랜딩에 얹을 수 있는 부가 기능이 카드로 나열되어 있습니다. 쓰고 싶은 위젯의 ① **스위치를 켜면** 상세 설정이 열립니다. 하나씩 살펴볼게요. ### 6-1. 접수 카운터 ![](/manuals/images/design-widgets/11-submission-counter.webp) "지금까지 몇 명이 신청했는지"를 보여줘서 신뢰를 높입니다. - ① **표시 위치** — 폼 위/아래, 특정 블록 위/아래 중에서 고릅니다. - ② **표시 문구** — `{count}` 자리에 실제 신청 수가 자동으로 들어갑니다. 예: "지금까지 {count}명이 견적을 신청했어요" 켜자마자 미리보기 맨 위에 문구가 나타나는 것을 확인할 수 있습니다. ### 6-2. 목표 카운터 ![](/manuals/images/design-widgets/12-goal-counter.webp) "선착순 마감까지 30명 남았습니다"처럼 **남은 자리**를 보여줘 서두르게 만듭니다. - ① **목표 인원수** — 이 숫자에서 실제 신청 수를 뺀 값이 표시됩니다. - ② **앞/뒤 문구** — "선착순 마감까지 / 명 남았습니다"를 원하는 표현으로 바꾸세요. ### 6-3. 마감 타이머 ![](/manuals/images/design-widgets/13-deadline-timer.webp) 이벤트 마감까지 초 단위 카운트다운을 보여줍니다. - ① **마감 일시** — 달력에서 날짜와 시간을 고릅니다. - ② **표시 형식** — 일/시/분/초 또는 시/분/초. - 마감이 지나면 타이머 대신 "이벤트가 종료되었습니다" 문구(수정 가능)가 표시됩니다. ### 6-4. 실시간 접수 현황 ![](/manuals/images/design-widgets/14-realtime-privacy-notice.webp) "박OO님이 신청했습니다"처럼 최근 신청자를 팝업으로 보여주는 기능입니다. 신청자의 이름·전화번호 **일부가 가려진 채** 랜딩에 노출되기 때문에, 켜면 먼저 개인정보 안내가 나옵니다. - ② **개인정보처리방침 예시 문구 복사** — 이 문구를 회사 개인정보처리방침에 넣어 주세요. - ① 내용을 확인했으면 **동의 스위치**를 켭니다. 그래야 상세 설정이 열립니다. ![](/manuals/images/design-widgets/15-realtime-on-preview.webp) 동의 후 표시 건수·간격·위치를 정하면, 미리보기에 샘플 팝업("박OO님이 신청했습니다")이 주기적으로 나타납니다. 실제 랜딩에서는 진짜 신청자 정보가 가려진 채 표시됩니다. ### 6-5. 전화연결 플로팅 ![](/manuals/images/design-widgets/16-phone-float.webp) 화면 구석에 떠 있는 전화 버튼입니다. 고객이 누르면 바로 전화가 걸립니다. - ① **전화번호** — 상담 전화번호를 입력하세요. - ② **위치** — 우측/좌측 하단. 기본은 모바일에서만 보이도록 되어 있습니다. ### 6-6. 팝업 ![](/manuals/images/design-widgets/17-popup-widget.webp) 방문하자마자, 또는 나가려는 순간에 띄우는 안내 팝업입니다. - ① **실행 조건** — 페이지 로드 시 / 이탈 시도 시 / 스크롤 위치 / 시간 지연. - ② **텍스트** — "지금 신청하면 시공 견적 10% 할인!" 같은 혜택 문구를 넣으세요. 이미지 팝업도 올릴 수 있습니다. 입력하는 즉시 미리보기에 팝업이 떠서 모양을 확인할 수 있습니다. ### 위젯 저장 ![](/manuals/images/design-widgets/18-widgets-save.webp) 위젯 설정을 마쳤으면 ① **위젯 저장**을 누르세요. "위젯 설정이 저장되었습니다" 메시지가 보이면 완료입니다. ## 7. 카카오톡·페이스북 공유 모습 정하기 (SNS 공유 설정) ![](/manuals/images/design-widgets/19-og-settings.webp) 고객이 링크를 카카오톡으로 공유할 때 보이는 **제목·설명·이미지**입니다. **고급 탭**의 "SNS 공유 설정"에서 정합니다. - ① **공유 제목** — 예: "모던인테리어 무료 견적 신청" - ② **공유 설명** — 한 줄 소개. 예: "우리집에 딱 맞는 인테리어, 30초 만에 무료 견적을 받아보세요." - ③ **공유 이미지** — 권장 1200×630px, 가로형. 대표 시공 사진을 넣으면 좋습니다. - ④ **공유 설정 저장**을 눌러 마무리합니다. ![](/manuals/images/design-widgets/20-og-upload-failed.webp) 이미지 업로드가 실패하면 이런 빨간 안내가 나타납니다. 인터넷 연결을 확인하고 다시 시도해 주세요. --- ## 자주 묻는 질문 **Q. 미리보기에서는 바뀌었는데 실제 랜딩에는 반영이 안 돼요.** 미리보기는 저장 전에도 보여주는 "가상 화면"입니다. 화면 아래 저장 막대(모두 저장 / 위젯 저장)를 눌러야 실제 랜딩에 반영됩니다. **Q. 위젯을 여러 개 켜도 되나요?** 됩니다. 다만 같은 위치에 여러 위젯을 두면 겹칠 수 있어요. 겹칠 위험이 있으면 위젯 탭 맨 위에 노란색/빨간색 경고가 자동으로 표시되니, 경고가 보이면 위치를 나눠 주세요. **Q. 실시간 접수 현황을 켜면 고객 정보가 그대로 노출되나요?** 아니요. 이름과 전화번호는 "박OO", "010-****-5678"처럼 일부가 가려진 채 표시됩니다. 다만 이렇게 표시된다는 사실을 회사 개인정보처리방침에 적어야 하므로, 켤 때 나오는 예시 문구를 복사해 방침에 넣어 주세요. **Q. 다크 테마를 골랐는데 채팅형 화면은 그대로예요.** 테마(밝기·배경 연출)는 채팅형 질문 화면과 룰렛 이벤트 화면에는 적용되지 않습니다. 그 화면들은 전용 디자인을 사용합니다.