# 닷홈빌더 FAQ
# 닷홈빌더와 무료홈페이지는 다른건가요?
##### **닷홈빌더와 무료홈페이지**
무료홈페이지는 닷홈빌더의 무료상품명입니다.
닷홈빌더의 모든 기능을 제한없이 사용하실 수 있으며, 무료 상품이지만 광고 배너가 없어 홈페이지로 실사용 할 수 있는 서비스 입니다.
# 닷홈빌더란 무엇인가요?
##### **닷홈빌더 소개**
무료홈페이지 반응형, 모바일 홈페이지를 쉽게 제작할 수 있는 서비스입니다.
다양한 업종에 사용할 수 있도록 수십 종의 템플릿이 제공되고 있으며,
원하는 템플릿을 선택하여 간단한 이미지 등을 수정해 나만의 홈페이지를 쉽게 제작할 수 있습니다.
아래 서비스 소개 매뉴얼을 참고해 주시기 바랍니다.
[https://docs.dothome.co.kr/books/a516a/page/ac627](https://docs.dothome.co.kr/books/941e1/page/ac627)
# 무료홈페이지에 도메인을 연결할 수 있나요?
##### **무료홈페이지 도메인 연결**
닷홈빌더 무료홈페이지는 닷홈에서 제공하는 기본도메인만 사용하실 수 있으며
보유하고 계신 도메인은 연결할 수 없는 상품입니다.
닷홈빌더 무료홈페이지 도메인플러스 또는 유료 닷홈빌더 상품을 사용하시면 도메인을 연결 하실수 있습니다.
# 무료홈페이지 서비스에도 광고 배너가 표시되나요?
##### **무료홈페이지 배너**
무료홈페이지 서비스에는 광고 배너를 표시하지 않아 실제 홈페이지처럼 사용하실 수 있습니다.
# 코딩을 전혀 모르는데 홈페이지를 만들 수 있을까요?
##### **닷홈빌더는 코딩을 알아야 하나요?**
닷홈빌더는 코딩을 전혀 모르셔도 쉽게 만드실 수 있도록 사용자 친화적인 홈페이지 빌더입니다.
각 기능별로 샘플 블럭들을 제공하고 있으며 클릭 몇번으로 페이지를 금방 만드실수 있습니다.
물론 코딩을 알고 계시다면 더 다양하게 꾸밀수 있습니다.
닷홈빌더에는 html, css, javascript 코딩을 추가할 수 있는 기능도 제공됩니다.
# 네이버, 구글에 노출 시킬 수 있나요?
##### **닷홈빌더 검색엔진 등록**
네. 닷홈빌더로 만든 홈페이지는 네이버, 구글 등 검색엔진에 등록이 가능합니다.
SEO 설정은 닷홈 블로그에서 쉽게 설명하고 있으니 아래 링크를 참고해 주시기 바랍니다.
[https://blog.naver.com/anysecure3/223999429888](https://blog.naver.com/anysecure3/223999429888)
참고로, SEO측면에선 기본제공 도메인이 아닌 개인 도메인을 연결하여 사용하는 것이 유리하여
상위노출 등을 원하신다면 닷홈빌더 무료홈페이지 도메인플러스
또는 유료 닷홈빌더를 사용하셔서 개인도메인을 연결하시는 걸 추천드립니다.
# 무료홈페이지로 제작 가능한 홈페이지엔 어떤 것들이 있나요?
##### **닷홈빌더 활용**
기업 홈페이지, 포트폴리오, 제품 소개, 이벤트 페이지, 블로그, 숙박예약, 부동산, 교육등등..
다양한 분야의 홈페이지들을 제작하실 수 있습니다.
# 무료홈페이지는 FTP를 통해 작업한 파일을 업로드 할 수 있나요?
#####
**무료홈페이지 (닷홈빌더) 파일관리자**
무료홈페이지(닷홈빌더)는 FTP를 이용한 파일업로드를 제공하고 있지 않습니다.
닷홈빌더 자체의 파일관리자를 이용해서 이미지 파일을 업로드 및 관리 하실 수 있습니다.
닷홈빌더 관리자 페이지에 접속 후 좌측 메뉴 가장 하단의 "파일관리자"를 클릭합니다.
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-09/QAAccc31.jpg)
\[닷홈빌더 관리자 페이지\]
아래와 같은 파일관리자 창이 열리면 드래그 앤 드롭을 통해서 파일을 업로드 하실 수 있습니다.
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-09/ccc32.jpg)
\[파일관리자 화면\]
닷홈빌더에서 파일 업로드 및 이미지 변경에 대해서는 아래의 닷홈빌더 시작하기 블로그를 참고해보시기 바랍니다.
[닷홈빌더 시작하기 - 이미지 변경하기 ](https://blog.naver.com/anysecure3/223950771556)
# 무료홈페이지에서 사용할 수 있는 특별한 기능들은 어떤 것들이 있나요?
#### **무료홈페이지 기능**
무료홈페이지는 닷홈빌더의 무료 서비스 입니다.
따라서 홈페이지 제작 솔루션인 닷홈빌더의 모든 편집기능이 사용 가능합니다.
블로그형 게시판형 썸네일형 등.. 다양한 형태의 게시판과 갤러리 샘플 블럭들을 제공하고 있으며
소셜을 연동하여 지도를 추가하거나 유튜브 동영상 컨텐츠들의 동영상 번호를 기입하여 손쉽게 홈페이지에 동영상 또한 추가할 수 있습니다.
또 커스텀 주문폼 기능을 이용하여 간단한 예약기능도 추가할 수 있습니다.
이 외에도 많은 편리한 기능들이 많이 있으므로 무료로 서비스를 신청하여 이용해보시기 바랍니다.
# 무료홈페이지를 이용하여 쇼핑몰로도 이용할 수 있나요?
##### **무료홈페이지 / 닷홈빌더 쇼핑몰**
아쉽게도 무료홈페이지(닷홈빌더)는 PG사와의 연동을 지원하지 않아 빌더로 제작한 홈페이지를 쇼핑몰 자체로 이용은 불가능합니다.
다만 결제만 지원하지 않을 뿐 상품 소개나 안내와 같은 카탈로그 기능의 홈페이지로 활용 가능합니다.
또한 상품게시판을 제공하여 스마트스토어나 상품페이지가 있는 경우 해당 페이지로 연결할 수 있습니다.
# 이미지 대신 동영상 삽입도 가능한가요?
##### **닷홈빌더 / 무료홈페이지 동영상**
유튜브, 비메오 등 비디오 컨텐츠의 동영상 번호를 삽입하여 동영상을 불러올 수 있습니다.
또한 블럭 배경으로도 삽입이 가능하여 동영상 위에 텍스트를 얹는 형태의 디자인도 가능합니다.
아래 매뉴얼을 참고해 주시기 바랍니다.
**동영상 주소 확인하기**
[https://builder20.dothome.co.kr/manual/info/53](https://builder20.dothome.co.kr/manual/info/53)
**동영상 블럭 다루기**
[https://builder20.dothome.co.kr/manual/info/137](https://builder20.dothome.co.kr/manual/info/137)
# 관리자 비밀번호를 잃어 버렸어요.
#### **닷홈빌더 관리자 비밀번호**
닷홈빌더 관리자 번호를 잃어버리신 경우 마이닷홈에서 직접 변경하실 수 있습니다.
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-09/ppp10.jpg)
\[닷홈빌더 상세보기 페이지\]
\[마이다홈\] - \[닷홈빌더 관리\] - \[닷홈빌더 목록\] - \[상세보기\] 페이지로 이동해 주세요.
"빌더 관리자 정보" 부분의 "관리자 암호" \[변경\] 버튼을 눌러주세요.
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-09/ppp11.jpg)
\[닷홈 회원 정보 인증 페이지\]
닷홈 회원 정보 인증이 필요합니다. 닷홈 회원아이디의 비밀번호를 입력해 주세요.
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-09/ppp12.jpg)
\[닷홈빌더 관리자 비밀번호 변경 페이지\]
빌더 관리자 비밀번호 변경 페이지 입니다. 원하시는 비밀번호를 설정하시고 \[변경하기\] 누르시면 됩니다.
##### 관리자 아이디가 admin이 아닌 경우
관리자 아이디를 admin에서 다른 아이디로 변경하셨다면 위의 페이지에서 비밀번호 설정이 불가능합니다.
이 경우는 닷홈 고객센터 1:1 문의통해 변경된 관리자 아이디를 기록하셔서 임시비밀번호 발급을 기술지원 접수해 주시기 바랍니다.
\[고객센터\] - \[1:1문의\] - \[글쓰기\]
문의유형 : 기술지원
# 파일 업로드 방법 / 이미지 변경 방법
#### **닷홈빌더 / 무료홈페이지 파일 업로드**
닷홈빌더에서 파일관리자를 통해서 이미지 파일과 pdf 파일을 업로드 할 수 있습니다.
닷홈빌더 관리자 페이지에서 좌측 메뉴 가장 아래에 "파일 관리자"를 실행하면 됩니다.
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-09/ccc31.jpg)
\[닷홈빌더 관리자 페이지\]
파일을 업로드하고 이미지를 변경하는 방법은 아래 블로그에 자세히 안내하고 있으니 참고해 주시기 바랍니다.
\* 닷홈빌더 시작하기 - 이미지 변경하기
[https://blog.naver.com/anysecure3/223950771556](https://blog.naver.com/anysecure3/223950771556)
# 로그인이 안되요.
#### **닷홈빌더 / 무료홈페이지 로그인 실패**
맞는 아이디와 비밀번호로 로그인을 시도했는데, 오류도 없고 로그인이 되질 않고 메인페이지로 돌아오나요?
사용하시는 닷홈빌더의 디스크 공간을 모두 사용해서 그럴 수 있습니다.
\[마이닷홈\] - \[닷홈빌더 관리\] - \[닷홈빌더 목록\] - \[상세보기\] 페이지에서 확인하실 수 있습니다.
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-09/ppp14.jpg)
\[닷홈빌더 상세페이지 디스크 사용량 화면\]
##### **디스크 용량이 초과된 경우 **
업로드한 파일들을 계속 사용해야 하고, 업로드 파일을 계속 추가해야 한다면
위의 상세페이지에서 \[서비스 변경\]을 통해 상위 서비스로 변경하시거나, \[디스크 용량추가\]를 통해 디스크만 추가하실 수도 있습니다.
용량을 늘리지 않고 필요없는 파일들을 삭제해서 사용하시려면
닷홈 고객센터 1:1 문의통해 변경된 관리자 아이디를 기록하셔서 임시비밀번호 발급을 기술지원 접수해 주시기 바랍니다.
\[고객센터\] - \[1:1문의\] - \[글쓰기\]
문의유형 : 기술지원
# 지도가 안보여요.
#### **닷홈빌더 / 무료홈페이지 지도**
닷홈빌더에서는 네이버 지도, 카카오 지도를 사용하실 수 있습니다.
다만, 지도를 표시하기 위해서는 각 지도 사이트에서 API 키를 받아서 닷홈빌더에 연동해 줘야 합니다.
##### **API 인증이 안된 화면**
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-09/ppp20.jpg)\[네이버 지도 인증 실패 화면\]
네이버 지도의 경우 연동이 안된 경우 "네이버 지도 Open API 인증이 실패했습니다." 라는 문구가 보이며 지도가 표시되지 않습니다.
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-09/ppp21.jpg)
\[카카오 지도 인증 실패 화면\]
카카오 지도의 경우 인증이 실패하면 하얀 화면만 보여집니다.
##### **지도 API 인증**
각각의 지도 API를 인증하는 방법은 아래 블로그 및 닷홈빌더 매뉴얼에서 확인하실 수 있습니다.
블로그 글을 먼저 보시고 연동 매뉴얼을 보시길 권장드립니다.
\* 닷홈빌더 시작하기 - 지도 추가하기
[https://blog.naver.com/anysecure3/223983594892](https://blog.naver.com/anysecure3/223983594892)
\* 네이버 지도 API 연동하기
[https://builder20.dothome.co.kr/manual/info/9](https://builder20.dothome.co.kr/manual/info/9)
\* 카카오 지도 & SNS API 연동하기
[https://builder20.dothome.co.kr/manual/info/10](https://builder20.dothome.co.kr/manual/info/10)
##### **지도 API 인증 시 체크사항**
블로그에서도 설명하는 내용이지만 간단히 안내드립니다.
**\[네이버 지도 API\]**
1\. Dynamic Map, Geocoding 2개의 API 가 선택되어 있는지 체크
2\. 지도를 사용할 내 홈페이지 주소가 잘 등록되어 있는지 체크
\- 홈페이지 주소는 세부 주소가 아닌 메인 주소를 입력
3\. 닷홈빌더에 API키를 정확히 입력했는지 체크
**\[카카오 지도 API\]**
1\. 카카오맵 사용설정이 "ON" 상태인지 확인!
2\. 내 홈페이지 URL이 정확하게 등록되었는지 확인!!
\- 홈페이지 주소는 세부 주소가 아닌 메인 주소를 입력
3\. Javascript 키를 복사했는지 확인!!!
4\. 복사한 Javascript 키를 닷홈빌더에 정확히 등했는지 확인!!!
# 구글지도를 추가할 수 있나요?
#### **닷홈빌더 / 무료홈페이지 구글지도**
닷홈빌더에서는 구글지도를 추가하는 기능은 제공되지 않습니다.
하지만, 구글지도의 공유 기능을 이용해서 닷홈빌더에 구글 지도를 추가할 수 있습니다.
아래 내용을 참고하셔서 구글 지도의 HTML 코드를 복사하신 후
닷홈빌더에서 코드블럭이나 요소코드를 사용해서 적용하시면 됩니다.
구글 지도 검색후 화면에서 **\[공유\] > \[지도퍼가기\] > \[HTML 복사\]**
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-09/1024px-hh050.jpg)
\[구글지도 홈페이지 공유 버튼\]
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-09/1024px-hh051.jpg)
\[구글지도 홈페이지 지도퍼가기 화면\]
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-09/1024px-hh052.jpg)
\[구글지도 홈페이지 HTML 복사 버튼\]
# 폰트를 추가할 수 있나요?
#### **닷홈빌더 / 무료홈페이지 폰트 추가**
텍스트 에디터 자체 기능에 폰트를 추가할 수는 없으나 웹폰트는 이용 가능합니다.
공통코드 입력 기능을 통해 웹폰트를 설정하신 후 .section-inner 또는 특정 영역에
폰트를 적용하는 css를 추가해 주시면 활용 가능할 것으로 보입니다.
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-09/1024px-cs-manusl-20250125-02.jpg)\[웹폰트 적용 전의 화면\]
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-09/1024px-ca-manual-20250125-03.jpg)\[공통코드 기능을 통해 폰트 추가 css 작성\]
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-09/1024px-ca-manual-20250125-04.jpg)\[폰트 적용 후 화면\]
아래 코드는 공통코드에 폰트를 추가한 예시입니다.
웹폰트 적용 방식은 폰트 제공업체에 따라 다를 수 있으므로 해당 업체에서 확인하시면 정확합니다.
공통코드 입력 기능은 아래 매뉴얼을 참고해 주시기 바랍니다.
[https://builder20.dothome.co.kr/manual/info/23](https://builder20.dothome.co.kr/manual/info/23)
```
```
# 템플릿 변경하기
##### **닷홈빌더 / 무료홈페이지 템플릿 변경**
닷홈빌더의 템플릿은 언제라도 변경이 가능합니다.
템플릿 변경은 아래 페이지에서 진행하실 수 있습니다.
\[마이닷홈\] - \[닷홈빌더 관리\] - \[닷홈빌더 목록\] - \[상세보기\] - \[템플릿 재설치\]
(주의) 템플릿을 재설치 할 경우 기존에 작업했던 내용은 모두 사라지고 새로운 템플릿 디자인으로 초기화 됩니다.
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-09/1024px-jjj30.jpg)
\[닷홈빌더 상세보기 페이지\]
\[마이닷홈\] - \[닷홈빌더 관리\] - \[닷홈빌더 목록\] - \[상세보기\] 페이지에서 \[템플릿 재설치\] 버튼을 클릭합니다.
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-09/1024px-jjj31.jpg)
\[템플릿 선택 화면\]
변경을 원하는 템플릿의 \[이 템플릿으로 선택하기\] 버튼을 클릭합니다.
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-09/1024px-jjj32.jpg)\[템플릿 설치 정보 입력 화면\]
템플릿 설치를 위해 관리자 비밀번호를 입력한 후 \[설치\] 버튼을 클릭합니다.
# 닷홈빌더 FTP, DB 접속 문의
#### **닷홈빌더 / 무료홈페이지 FTP, DB 접속**
닷홈빌더는 공용 솔루션으로 FTP 및 DB 접속을 지원하지 않습니다.
홈페이지 작업을 위한 이미지 파일은 파일관리자를 이용해서 업로드 하시면 됩니다.
파일관리자 사용법은 아래 블로그 및 매뉴얼을 참고해 주시기 바랍니다.
\* 닷홈빌더 시작하기 - 이미지 변경하기
[https://blog.naver.com/anysecure3/223950771556](https://blog.naver.com/anysecure3/223950771556)
\* 파일 관리자 매뉴얼
[https://builder20.dothome.co.kr/manual/info/27](https://builder20.dothome.co.kr/manual/info/27)
파일관리자 / FTP / DB
# 비회원 게시판 만들기
#### **닷홈빌더 / 무료홈페이지 비회원 게시판**
게시판 상세 설정에서 권한 설정을 통해 비회원 게시판 생성이 가능합니다.
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-09/Dw3rr001.jpg)
\[게시판 상세 설정 화면\]
게시판의 권한 설정에서 목록, 읽기, 글쓰기를 모두 “모든 방문자”로 설정해주시면 됩니다.
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-09/rr002.jpg)
\[캡챠 설정 안내 팝업\]
다만, 글쓰기 권한이 “모든 방문자”인 경우는 캡챠를 필수로 사용해야 하므로 아래 매뉴얼을 참고하셔서 캡챠 설정을 추가해주시기 바
랍니다.
[https://builder20.dothome.co.kr/manual/info/81](https://builder20.dothome.co.kr/manual/info/81)
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-09/1024px-rr003.jpg)
\[비회원게시판 글작성 화면\]
글작성시 "작성자", "비밀번호"를 입력하게 됩니다.
# 비밀게시판 만들기
#### **닷홈빌더 / 무료홈페이지 비밀게시판**
비밀게시판은 글쓰기 권한이 회원, 읽기 권한이 관리자인 경우만 가능합니다.
아래와 같이 게시판 권한을 설정해 보시기 바랍니다.
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-09/nnn01.jpg)
\[게시판 상세 설정 화면\]
권한 : 읽기 - 관리자, 글쓰기 - 회원
노출항목 : "작성자" 체트해제
위와 같이 설정한 경우 글을 작성한 회원은 자신이 작성한 글만 읽기, 수정이 가능하며 다른 회원의 글은 확인할 수 없게 됩니다.
물론 관리자는 모든 글을 확인할 수 있습니다.
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-09/nnn02.jpg)\[비밀 게시판 목록 화면\]
목록에서는 작성자 본인만 자신의 글을 확인 및 수정할 수 있습니다. (물론 관리자는 모든 게시물을 확인할 수 있습니다.)
작성자 부분을 감춤처리했기에 작성자도 표시되지 않습니다.
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-09/nnn03.jpg)\[게시판 상세 설정에서 기타 설정 화면\]
참고로, 목록 권한을 "회원"으로 설정하면 목록의 조회를 회원만 가능하게 할 수도 있습니다.
작성자 부분을 아예 감춤처리하는 것이 아니라 "숨김 처리된 아이디"나 "숨김 처리된 이름"으로 표시할 수도 있습니다.
이 경우 아이디, 이름의 일부가 가려진 형태로 표시됩니다.
# 카카오톡 오픈그래프 캐시 초기화 (카톡 링크의 정보가 닷홈으로 나와요)
#### **카카오톡 오픈그래프 캐시 초기화**
카카오톡에 URL 입력시 아래와 같이 홈페이지 정보가 표시됩니다.
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-09/nnn24.jpg)
카카오톡 등 SNS에 링크시 정보를 보여주는 설정은 SEO기능의 오픈그래프(Open Graph, 줄여서 OG 태그)입니다.
링크에서 보여지는 정보가 닷홈으로 표시된다면 아래 SEO 설정 메뉴에서 오픈그래프를 확인해 보시기 바랍니다.
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-09/qqq03.jpg)
\[오픈그래프 설정 화면\]
닷홈빌더 관리자 페이지에서 \[홈페이지 설정\] 탭 > \[기본 설정\] 메뉴를 클릭한후 페이지에서 화면 하단에서 확인할 수 있습니다.
아래 각 항목의 내용을 확인하셔서 설정해 주시기 바랍니다.
| 항목
| 태그
| 내용
|
| 대표 이미지
| og:image
| 공유 시 보여줄 대표 이미지(썸네일)
|
| 홈페이지 제목
| og:title
| 공유 시 표시될 제목
|
| 홈페이지 설명
| og:description
| 공유 시 표시될 설명
|
| 홈페이지 URL
| og:url
| 해당 페이지의 대표 주소
|
홈페이지 URL을 변경하지 않는 경우가 간혹 있는데, 홈페이지 URL도 꼭 맞춰 주셔야 합니다.
오픈그래프 정보를 설정한 후에도 닷홈이 표시되거나 수정한 정보가 반영되지 않는 경우는 기존에 캐시가 남아있어 그렇습니다.
설정이나 수정 후 처음 링크를 사용하면 괜찮으나 이미 해당 링크를 보았던 경우라면 기존 오픈그래프 캐시가 남게됩니다.
참고로, 카카오 디벨로퍼스 사이트에서 제공하는 공유 디버거 기능으로 오픈 그래프 캐시를 초기화 할 수 있습니다.
[https://developers.kakao.com/tool/debugger/sharing](https://developers.kakao.com/tool/debugger/sharing)
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-09/nnn26.jpg)
\[카카오 디벨로퍼스 공유 디버거 페이지\]
URL 부분에 홈페이지 주소를 입력하고 \[디버그\] 버튼을 누릅니다.
미리보기를 확인하신 후 이상이 없으면 \[캐시 초기화\] 눌러 줍니다.
# 페이스북 오픈그래프 캐시데이터 초기화
관리페이지에서 오픈그래프 정보를 변경하여도 각 SNS별 캐시데이터가 남아있어 이미지가 변경되지 않은 것으로 보일 수 있는데요.
이럴 때는 각 SNS별 캐시데이터 삭제 페이지에서 캐시를 삭제해주셔야 해요.
페이스북 오픈그래프 캐시데이터 삭제 방법에 대해 알려드릴게요!
먼저 페이스북 공유 디버거 페이지로 이동합니다.
[**페이스북 공유 디버거 바로가기>**](https://developers.facebook.com/tools/debug)
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/298f95e1bf9136124592c8d4825a06fc.jpg)
\[페이스북 공유 디버거 사이트\]
로그인 버튼을 눌러 페이스북 계정으로 로그인해 주세요~
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/d86ea612dec96096c5e0fcc8dd42ab6d.jpg)
\[페이스북 공유 디버거 URL 입력 화면\]
URL 입력란에 사이트 주소를 입력하신 뒤 디버그 버튼을 눌러주세요
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/20f07591c6fcb220ffe637cda29bb3f6-2.jpg)
\[페이스북 공유 디버거 캐시 초기화 화면\]
다시 스크랩 버튼을 누르면 캐시데이터가 삭제됩니다.
하단의 링크 미리 보기에서 확인할 수 있습니다.
만약 다시 스크랩을 눌러도 이전 이미지로 나온다면 브라우저를 닫았다가 다시 열어서 확인해주세요
# 트위터(X) 오픈그래프 캐시데이터 삭제하기
관리페이지에서 오픈그래프 정보를 변경하여도 각 SNS별 캐시데이터가 남아있어 이미지가 변경되지 않은 것으로 보일 수 있는데요.
이럴 때는 각 SNS별 캐시데이터 삭제 페이지에서 캐시를 삭제해주셔야 해요.
트위터(X) 오픈그래프 캐시데이터 삭제 방법에 대해 알려드릴게요!
먼저 트위터 카드 미리보기 페이지로 이동합니다.
[**트위터 카드 미리보기 바로가기>**](https://cards-dev.twitter.com/validator)
[
](https://cards-dev.twitter.com/validator)
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/xxx01.jpg)
\[트위터 로그인 화면\]
먼저 트위터 계정으로 로그인해주세요.
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/xxx02.jpg)
\[트위터 캐시 초기화 화면\]
URL 입력란에 사이트 주소를 입력하신 뒤 Preview card 버튼을 눌러주세요.
우측에서 미리보기로 확인할 수 있습니다.
만약 다시 캐시를 삭제해도 이전 이미지로 나온다면 브라우저를 닫았다가 다시 열어서 확인해주세요
# 블럭 기본 여백 변경하기 (기본 여백 제거)
블럭의 여백은 상세 설정에서 수정할 수 있는데요.
다만, 상단과 하단 여백을 0으로 설정하여도 기본 여백으로 인해 28px의 여백이 더 남아있습니다.
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dc6a6489640ca02b0d42dabeb8e46bb7.jpg)
\[닷홈빌더 블럭의 기본 여백\]
이 부분은 편집기에서는 줄일 수 없고 별도의 css를 추가해 주어야 해요!
css를 추가하면 편집 화면에서는 이 여백 값을 줄일 수 없지만 실제 페이지에서 여백 값을 줄여서 보여줄 수 있어요!
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/y6r01.jpg)
\[닷홈빌더 공통코드 입력 화면\]
닷홈빌더 관리자에서 홈페이지 설정 > 공통코드 입력 페이지로 이동하여 아래에서 해당하는 코드를 추가한 뒤 저장해 주세요.
**\[모든 블럭의 여백을 조절하려는 경우\]**
**\[특정 블럭의 여백을 조절하려는 경우\]**
*블럭ID 확인하는 방법은 [**여기**](https://docs.dothome.co.kr/books/09/page/id)를 참고하세요.
**\[모바일 전용 블럭의 여백을 조절하려는 경우\]**
---
**\[변경된 모습\]**
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/Js758238e9ae2dd305d79c2ebc8c1883422-1.jpg)
\[닷홈빌더 블럭의 기본 여백이 제거된 화면\]
여백을 0으로 설정하면 위와 같이 조절된답니다!
다만, 앞서 설명한 것과 같이 편집화면에서는 기본 여백이 그대로이고, 실제 페이지에서만 변경되는 것이니 이점 참고해 주세요~
# 버튼 또는 메뉴에 블럭 링크하기
블럭 ID를 이용하여 버튼 또는 메뉴를 클릭했을 때 해당 블럭으로 화면이 이동하는 방법을 알려드리겠습니다!
먼저, 링크해 줄 블럭의 ID를 알아야겠죠?
블럭 ID는 아래의 매뉴얼을 통해 확인하실 수 있어요!
[**블럭 ID 확인하기 >** ](https://docs.dothome.co.kr/books/09/page/id)
블럭 ID 확인 매뉴얼을 통해 블럭 ID를 복사한 뒤 진행해 주세요!
##### **버튼에 블럭 링크하기**
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/5737034557ef5b8c02c0e46513b98f90.jpg)
\[버튼 상세 설정 열기\]
블럭을 링크해 줄 버튼 블럭 위에 마우스를 올려 상세 설정 버튼을 눌러주세요
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/470e7a4f017a5476afb7eeb3f8b96f9b.jpg)
\[요소블럭 상세 설정 수정\]
변경할 버튼의 설정 > 수정 버튼을 눌러주세요.
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/3435c378bb76d4357324dd7e69f3cd18.jpg)
\[버튼 링크 URL 입력 화면\]
링크 URL에 복사한 블럭 ID를 입력합니다. 아래와 같은 형식으로 입력해주세요.
/해당 블럭이 위치한 페이지명/#블럭ID
하단의 적용하기 버튼을 눌러 저장한 뒤, 블럭 상세 설정 창 하단의 적용하기 버튼을 누르면 수정 사항이 적용됩니다.
##### 메뉴에 블럭 링크하기
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/2a79ea27c279e471f4d180b08d62b00a.jpg)
\[메뉴 설정창 열기\]
메뉴 관리 버튼을 눌러 메뉴 관리 창을 연 뒤 수정하려는 메뉴의 설정 버튼을 눌러줍니다.
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/cf004fdc76fa1a4f25f62e0eb5261ca3.jpg)
\[메뉴 URL 입력 화면\]
URL에 복사한 블럭 ID를 입력합니다. 아래와 같은 형식으로 입력해주세요.
도메인 주소/해당 블럭이 위치한 페이지명/#블럭ID
하단의 저장 버튼을 눌러 저장하면 수정 사항이 적용됩니다.
# 텍스트에 링크 추가하기
텍스트에 링크를 넣는 방법을 알려드릴게요!
먼저 편집기를 열어 수정할 페이지로 이동해 주세요~
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/f4be00279ee2e0a53eafdaa94a151e2c.jpg)
\[텍스트 선택 화면\]
링크를 삽입할 텍스트를 드래그한 뒤 링크 버튼을 눌러주세요!
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/48aedb8880cab8c45637abc7493ecddd-1.jpg)
\[텍스트에 URL 등록 화면\]
이동할 URL에 링크주소를 입력해주시고 하단의 링크 삽입을 눌러주시면 해당 텍스트에 링크가 추가됩니다.
현재 페이지에서 이동시키려면 새창으로 열기를 해제하고 적용해주세요~
추가된 링크는 편집화면에서는 동작하지 않고 실제 페이지에서만 동작합니다!
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/82489c9737cc245530c7a6ebef3753ec.jpg)
\[변경 사항 저장 및 게시 화면\]
이제 우측 상단의 '저장하기'와 '게시하기' 버튼을 눌러 주시면 실제 페이지에도 링크가 들어간 것을 확인할 수 있어요!
# 아이콘 블럭으로 페이지 경로 표시하기
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/nav01.jpg)
주로 기업 홈페이지를 보시면 페이지 상단 타이틀 영역 하단이나 상단에 위 이미지처럼 페이지 경로를 표시하는 것을 많이 보셨을 거에요.
오늘은 이러한 페이지 경로 표시해주는 방법을 알아 보려고 합니다!
먼저 디자인 편집모드에서 페이지 경로를 넣어줄 페이지로 이동해주세요!
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/nav02.jpg)
\[블럭 추가 버튼\]
페이지를 이동하셨다면 페이지 경로를 표시해줄 위치에 프레임 블럭을 추가할 거에요.
저는 타이틀 영역 하단에 추가하려고 해요! 원하는 위치에 + 버튼을 눌러주세요.
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/nav03.jpg)
\[프레임 블럭 추가 화면\]
블럭 선택창에서 프레임 > 제일 상단의 1단 프레임 블럭을 선택해주세요.
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/aBLnav04.jpg)
\[요소 블럭 추가 화면\]
프레임이 추가 되었죠? 이제 이 프레임 안에 아이콘 박스를 추가해줄거에요:)
프레임 안의 + 버튼을 누른 뒤 요소 블럭 선택창에서 아이콘박스를 선택해주세요!
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/nav05.jpg)
\[요소 블럭 설정 버튼\]
아이콘 박스 블럭이 추가되었어요!
저는 페이지 경로를 우측에 표시하려고 해요. 프레임 블럭 위에 마우스를 올려 설정 버튼을 클릭해주세요.
(프레임 블럭의 설정버튼은 우측 상단의 파란색, 아이콘박스 블럭의 설정버튼은 좌측 상단의 보라색이니 프레임 블럭의 설정 버튼을 클릭해주세요!)
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/nav06.jpg)
\[요소 블럭 설정 화면\]
레이아웃을 눌러 이동한 뒤, 정렬을 우측으로 선택해주세요.
하단의 적용하기 버튼을 눌러주세요.
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/nav07.jpg)
\[요소 블럭 텍스트 수정 화면\]
이제 경로를 작성해줄거에요. 아래의 형식에 맞게 입력해주세요.
› 페이지명
그리고 '›' 아이콘의 크기를 20으로 키워주세요.
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/nav08.jpg)
\[요소 블럭 설정 버튼\]
이제 별모양 아이콘을 홈 아이콘으로 변경해볼게요.
아이콘박스 블럭의 좌측 상단의 설정버튼을 눌러 설정창을 열어주세요.
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/nav09.jpg)
\[요소 블럭 아이콘 변경 화면\]
상세 설정창에서 변경하기 버튼을 누른뒤 홈 아이콘을 찾아 클릭해주세요.
하단의 적용하기 버튼을 눌러 적용해주세요.
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/nav10.jpg)
\[요소 블럭 상세 설정 화면\]
아이콘 크기는 제일 작은 사이즈로 조절하고, 수직 정렬을 가운데로 설정해주세요.
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/nav11.jpg)
\[요소 블럭 링크 설정 화면\]
이제 홈 버튼을 누르면 메인페이지로 이동할 수 있도록 홈 아이콘에 링크를 추가해주려고 해요!
링크 사용하기에 체크하면 URL 입력창이 나옵니다.
URL 입력란에 / 를 입력한 뒤 하단의 적용하기를 눌러주세요.
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/nav12.jpg)
\[변경사항 저장 및 게시 화면\]
페이지 경로 표시하기가 완료됐어요!!
상단의 저장하기를 눌러 수정사항을 저장할 수 있고 게시하기를 누르면 실제 페이지에도 반영됩니다!!
만약 서브메뉴를 사용하여 페이지 경로를 한단계 더 늘려주어야 한다면 아래의 방법대로 따라해주세요!
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/nav13.jpg)
\[요소 블럭 텍스트 수정 화면\]
텍스트 입력란에 아래의 형식으로 페이지 경로를 입력해주세요
› 상위 페이지 또는 메뉴명 › 현재 페이지명
만약 상위페이지에 링크를 걸고 싶다면 해당 페이지명을 드래그한 뒤, 링크 버튼을 눌러주세요.
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/nav14.jpg)
\[요소 블럭 텍스트 링크 설정 화면\]
이동할 URL에 상위페이지명을 입력한 뒤, 새창으로 열기는 선택 해제하고 링크 삽입 버튼을 눌러주세요.
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/nav15.jpg)
\[변경사항 저장 및 게시 화면\]
페이지 경로 수정이 완료되었어요~
저장하기 또는 게시하기를 눌러 수정사항을 반영해주세요~!
# 프레임 블럭으로 인트로 디자인하기
홈페이지에서 인트로 디자인은 가장 첫 번째로 보이는 곳으로써 정말 중요한 영역이죠!
프레임 블럭에 동영상 배경을 적용하여 눈길을 끄는 인트로 디자인을 만들어 보겠습니다.
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/intro01.gif)
\[동영상 인트로 블럭\]
위와 같이 프레임 블럭으로 동영상 배경이 깔린 인트로 디자인을 만드는 방법을 알려드릴게요!
먼저 배경에 들어갈 동영상이 필요한데요~
유튜브에서 배경에 사용할 동영상을 준비해 주시면 됩니다!
직접 촬영하여 업로드한 동영상의 경우 저작권에 문제 되지 않지만, 다른 사용자의 동영상을 함부로 사용할 경우 문제가 생길 수 있으므로
저작권 프리 동영상을 준비해 주셔야 합니다.
유튜브 검색창에서 no copyright video 또는 copyright free video로 검색하시면 저작권 무료 동영상을 쉽게 찾으실 수 있습니다~
(제목 또는 영상 설명란에 있는 저작권 문구를 꼭 확인하시고 사용해 주세요!)
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/intro02.jpg)
\[유튜부 공유 링크 화면\]
사용할 동영상을 찾으셨다면 공유 버튼을 누른 뒤 코드를 복사해 줍니다.
[https://youtube.be/](https://youtube.be/) 뒤의 코드를 복사해 주세요!
이제 빌더 편집화면으로 이동해 주세요!
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/intro03.jpg)
\[닷홈빌더 프레임 블럭 추가 화면\]
\+ 버튼을 누른 뒤 프레임 > 제일 상단의 1단 프레임 블럭을 눌러 추가해 주세요.
(이미 블럭이 있는 경우 제일 상단에 있는 블럭 위의 + 버튼을 눌러주시면 됩니다!)
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/intro04.jpg)
\[닷홈빌더 프레임 블럭 설정 버튼\]
프레임 블럭이 추가되었어요!
이제 이 프레임 블럭 배경에 동영상을 적용해 줄 거예요.
프레임 블럭 우측 상단의 설정 버튼을 눌러주세요.
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/intro05.jpg)
\[닷홈빌더 프레임 블럭 상세 설정 화면\]
스타일 탭을 눌러 이동해 주세요.
배경 타입을 동영상으로 선택한 뒤, 주소 입력란에 아까 복사했던 코드를 붙여 넣어 주세요.
하단의 적용하기 버튼을 눌러주세요.
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/intro06.jpg)
\[닷홈빌더 프레임 블럭 배경 적용 화면\]
동영상 배경이 적용되었어요.
이제 안에 글자와 여백 등을 추가해 줄 차례에요!
프레임 블럭 안의 + 버튼을 눌러 요소 블럭 선택 창을 열어주세요.
요소 블럭 선택 창에서 여백 블럭을 선택하여 추가해 주세요.
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/intro07.jpg)
\[닷홈빌더 프레임 블럭에 요소 블럭 추가 화면\]
요소 블럭이 추가되었어요!
이제 소개 문구를 넣을 수 있도록 텍스트 블럭을 추가해 줄 차례입니다!
여백 블럭 하단의 + 버튼을 눌러주세요
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/intro08.jpg)
\[닷홈빌더 텍스트 요소 블럭 추가 화면\]
텍스트 블럭을 선택해 주세요.
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/intro09.jpg)
\[닷홈빌더 텍스트 요소 블럭 수정 화면\]
텍스트 블럭이 추가되었어요.
이제 소개 문구를 작성해 주세요!
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/intro10.jpg)
\[닷홈빌더 요소 블럭 추가 버튼\]
하단에도 여백을 추가해 주어야 합니다.
\+ 버튼을 눌러 블럭 선택창을 열어주세요.
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/intro11.jpg)
\[닷홈빌더 여백 요소 블럭 추가 화면\]
여백 블럭을 선택하여 추가합니다.
이번에는 아래 이미지처럼 아이콘 버튼을 누르면 하단의 블럭 위로 스크롤 되는 기능을 넣어보려고 합니다!
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/intro12.gif)
\[스크롤 기능 샘플 화면\]
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/intro13.jpg)
\[닷홈빌더 요소 블럭 추가 버튼\]
여백 블럭 하단의 + 버튼을 눌러주세요.
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/intro14.jpg)
\[닷홈빌더 아이콘 요소 블럭 추가 화면\]
아이콘 박스를 추가해 주세요.
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/intro15.jpg)
\[닷홈빌더 아이콘 요소 블럭 아이콘 변경 화면\]
아이콘을 아랫방향 화살표 아이콘으로 변경해 주어야겠죠?
변경하기 버튼을 누른 뒤, 화살표 아이콘을 찾아 선택한 뒤 적용하기를 눌러주세요.
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/intro16.jpg)
\[닷홈빌더 요소 블럭 상세 설정 화면\]
동영상 위에서도 아이콘이 잘 보일 수 있도록 배경을 적용해 주려고 해요!
아이콘 배경을 원형으로 선택한 뒤, 아이콘 색상과 배경 색상을 설정해 주세요~
배경색은 살짝 투명도를 주어야 예쁘답니다!ㅎㅎ
배경에 사용된 동영상이 어두운 경우 아이콘은 밝은 색상을, 동영상이 밝은 경우에는 아이콘은 어두운 색상을 적용해 주어야 잘 보인답니다!
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/intro17.jpg)
\[닷홈빌더 요소 블럭 상세 설정 링크 추가 화면\]
이번에는 아이콘을 클릭했을 때 화면이 이동할 수 있도록 아이콘에 링크를 추가해 줄 차례입니다.
링크 사용하기에 체크한 뒤, URL에 이동할 블럭ID를 입력해 주세요.
\#블럭ID의 형태로 입력해 주시면 됩니다.
만약 메인 페이지가 아닌 다른 페이지에서 사용할 경우에는 아래와 같이 입력해 주세요~
/페이지명/#블럭ID
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/intro18.jpg)
\[닷홈빌더 요소 블럭 상세 설정 정렬방식 설정 화면\]
아이콘이 가운데로 올 수 있도록 레이아웃에서 정렬을 가운데로 설정해 준 뒤 적용하기를 눌러줍니다.
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/intro19.jpg)
\[변경사항 저장 및 게시 화면\]
이제 인트로 디자인 편집이 끝났어요! 상단의 저장하기와 게시하기를 눌러 실제 페이지에도 반영될 수 있도록 해주세요~
실제 페이지에서는 이렇게 동작한답니다~
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/intro20.gif)
\[동영상 인트로 적용 화면\]