# 이미지빌더 소개

#### <span style="color: rgb(230, 126, 35);">**이미지빌더 소개**</span>  


이미지빌더란 **이미지호스팅 설치시 제공되는 상세페이지 제작툴**입니다.

원하는 디자인 블럭이나 요소블럭을 선택해서 이미지와 텍스트만 수정하면 상세페이지를 만들 수 있습니다.

별도의 코딩 기술이나 그래픽 편집 기술이 없어도 다양한 디자인과 요소들을 블럭 쌓듯이 조립해서 쉽게 상세페이지를 제작할 수 있습니다.

이미지 빌더에 자세한 사용방법은 아래 안내를 참고해 주시기 바랍니다.

["이미지빌더 사용방법" 바로가기 &gt;](https://imagebuilder.dothome.co.kr/manual)


#### <span style="color: rgb(230, 126, 35);">**이미지빌더 로그인 하기**</span>  


이미지빌더에 접속하는 방법에 대한 안내입니다.  
  
이미지빌더 로그인 URL은 FTP아이디.dothome.co.kr/editor 입니다.

아래와 같은 로그인 창이 나타나면, FTP 접속 정보를 입력하여 로그인 할 수 있습니다.

[![image_builder_01.jpg](https://docs.dothome.co.kr/uploads/images/gallery/2025-09/scaled-1680-/image-builder-01.jpg)](https://docs.dothome.co.kr/uploads/images/gallery/2025-09/image-builder-01.jpg)

<span style="color: rgb(22, 145, 121);">\[이미지빌더 로그인 화면\]</span>

#### <span style="color: rgb(230, 126, 35);">**이미지빌더 구성**</span>  


##### **<span style="color: #397b21;">대시보드</span>**

이미지빌더에 등록된 상세페이지, 사용자블럭, 샘플을 요약해서 볼수 있는 페이지 입니다.

[![image_builder_02.jpg](https://docs.dothome.co.kr/uploads/images/gallery/2025-09/scaled-1680-/image-builder-02.jpg)](https://docs.dothome.co.kr/uploads/images/gallery/2025-09/image-builder-02.jpg)

<span style="color: rgb(22, 145, 121);">\[이미지빌더 대시보드\]</span>

##### **<span style="color: #397b21;">상세페이지 목록</span>**

제작한 상세페이지 목록 입니다.

\* 새로 만들기 : 새로운 상세페이지를 만들 수 있습니다.

\* 상세페이지 편집 : 상세페이지에 마우스를 올리면 \[편집하기\], \[미리보기\] 제공

\* 상세페이지 설정 : 복제, 설정, HTML 소스복사, 이미지 다운로드, iframe 소스복사, URL 복사

[![image_builder_03.jpg](https://docs.dothome.co.kr/uploads/images/gallery/2025-09/scaled-1680-/image-builder-03.jpg)](https://docs.dothome.co.kr/uploads/images/gallery/2025-09/image-builder-03.jpg)

<span style="color: rgb(22, 145, 121);">\[이미지빌더 상세페이지 목록\]</span>

##### **<span style="color: #397b21;">상세페이지 샘플 목록</span>**

닷홈이미지빌더에서 제공되는 상세페이지 샘플입니다.

각 샘플에 마우스를 올리면 \[사용하기\], \[미리보기\] 기능이 제공됩니다.

[![image_builder_04.jpg](https://docs.dothome.co.kr/uploads/images/gallery/2025-09/scaled-1680-/image-builder-04.jpg)](https://docs.dothome.co.kr/uploads/images/gallery/2025-09/image-builder-04.jpg)

<span style="color: rgb(22, 145, 121);">\[이미지빌더 상세페이지 샘플 목록\]</span>

##### **<span style="color: #397b21;">사용자블럭 목록</span>**

사용자블럭이란 자주사용하는 디자인을 사용자가 직접 블럭으로 만들어서 상세페이지 제작시 사용할 수 있게 하는 기능입니다.

  
배송정보 등 자주사용하는 디자인을 사용자블럭으로 만들어두시고 편하게 사용할 수 있습니다.

사용자블럭 역시 필요시 언제라도 편집이 가능합니다.

마우스 오버시 \[편집하기\], \[미리보기\] 기능을 제공합니다.

[![image_builder_05.jpg](https://docs.dothome.co.kr/uploads/images/gallery/2025-09/scaled-1680-/image-builder-05.jpg)](https://docs.dothome.co.kr/uploads/images/gallery/2025-09/image-builder-05.jpg)

<span style="color: rgb(22, 145, 121);">\[이미지빌더 사용자 블럭 목록\]</span>

##### **<span style="color: #397b21;">외부 API 연동</span>**

지도 블럭 사용시 네이버 지도, 카카오 지도 서비스와 연동하기 위한 API 키값을 등록하는 기능입니다.

[![image_builder_06.jpg](https://docs.dothome.co.kr/uploads/images/gallery/2025-09/scaled-1680-/image-builder-06.jpg)](https://docs.dothome.co.kr/uploads/images/gallery/2025-09/image-builder-06.jpg)

<span style="color: rgb(22, 145, 121);">\[이미지빌더 외부 API 연동\]</span>

##### **<span style="color: #397b21;">이미지호스팅 파일 관리</span>**

이미지빌더에서 사용할 이미지 파일을 업로드 하고 관리하는 기능입니다.  
  
이곳에 올린 이미지는 FTP아이디.dothome.co.kr/img/이미지파일명 형태의 URL로 사용합니다.

별도로 폴더를 생성해서 이미지를 분류할 수도 있습니다.

[![image_builder_07.jpg](https://docs.dothome.co.kr/uploads/images/gallery/2025-09/scaled-1680-/image-builder-07.jpg)](https://docs.dothome.co.kr/uploads/images/gallery/2025-09/image-builder-07.jpg)

<span style="color: rgb(22, 145, 121);">\[이미지빌더 파일 관리자\]</span>

##### **<span style="color: #397b21;">이미지빌더 블럭</span>**

이미지빌더 편집화면에서 블럭추가(+) 버튼을 누르면 화면 왼쪽으로 다양한 블럭이 제공됩니다.

[![image_builder_08.jpg](https://docs.dothome.co.kr/uploads/images/gallery/2025-09/scaled-1680-/image-builder-08.jpg)](https://docs.dothome.co.kr/uploads/images/gallery/2025-09/image-builder-08.jpg)

<span style="color: rgb(22, 145, 121);">\[이미지빌더 편집 화면\]</span>

<div class="col-xl-9 col-lg-9" id="bkmrk-%EB%94%94%EC%9E%90%EC%9D%B8-%EB%B8%94%EB%9F%AD-%ED%83%80%EC%9D%B4%ED%8B%80%2C-%EC%83%81%ED%92%88%EC%86%8C%EA%B0%9C%2C-%EC%83%81%ED%92%88"><div class="contents"><table class="table table-bordered" style="width: 100%;"><thead><tr><td style="width: 24.2263%;"><span style="color: #212529;">항목</span></td><td style="width: 75.8929%;"><span style="color: #212529;">내용</span></td></tr></thead><tbody><tr><td style="width: 24.2263%;"><span style="color: #212529;">디자인 블럭</span></td><td style="width: 75.8929%;"><span style="color: #212529;">타이틀, 상품소개, 상품정보 등의 상세페이지 컨텐츠를 가져다 사용할 수 있도록 미리 디자인한 블럭입니다.</span></td></tr><tr><td style="width: 24.2263%;"><span style="color: #212529;">이미지+텍스트 블럭</span></td><td style="width: 75.8929%;"><span style="color: #212529;">이미지와 텍스트가 함께 어우러진 블럭입니다.</span></td></tr><tr><td style="width: 24.2263%;"><span style="color: #212529;">이미지 블럭</span></td><td style="width: 75.8929%;"><span style="color: #212529;">이미지를 추가할 수 있는 블럭입니다.</span></td></tr><tr><td style="width: 24.2263%;"><span style="color: #212529;">텍스트 블럭</span></td><td style="width: 75.8929%;">텍스트를 입력할 수 있는 블럭입니다.</td></tr><tr><td style="width: 24.2263%;"><span style="color: #424242;">동영상 블럭</span></td><td style="width: 75.8929%;"><span style="color: #424242;">동영상을 추가할 수 있는 블럭입니다.</span></td></tr><tr><td style="width: 24.2263%;"><span style="color: #424242;">표 블럭</span></td><td style="width: 75.8929%;"><span style="color: #424242;">표를 편집할 수 있는 블럭입니다.</span></td></tr><tr><td style="width: 24.2263%;"><span style="color: #424242;">도형 블럭 </span></td><td style="width: 75.8929%;"><span style="color: #424242;">도형을 이용해 텍스트를 꾸밀 수 있는 블럭입니다.</span></td></tr><tr><td style="width: 24.2263%;"><span style="color: #424242;">인용구 블럭</span></td><td style="width: 75.8929%;"><span style="color: #424242;">인용구를 이용해 텍스트를 꾸밀 수 있는 블럭입니다.</span></td></tr><tr><td style="width: 24.2263%;"><span style="color: #424242;">구분선 블럭</span></td><td style="width: 75.8929%;"><span style="color: #424242;">블럭과 블럭 사이에 구분을 위해 구분선을 주는 블럭입니다</span></td></tr><tr><td style="width: 24.2263%;"><span style="color: #424242;">여백 블럭 </span></td><td style="width: 75.8929%;"><span style="color: #424242;">블럭과 블럭 사이의 간격을 띄워줄 수 있는 블럭입니다.</span></td></tr><tr><td style="width: 24.2263%;"><span style="color: #424242;">지도 블럭</span></td><td style="width: 75.8929%;"><span style="color: #424242;">지도를 삽입할 수 있는 블럭입니다.</span></td></tr><tr><td style="width: 24.2263%;"><span style="color: #424242;">기능 블럭</span></td><td style="width: 75.8929%;"><span style="color: #424242;">상품목록, 견적 계산기 등 기본 요소 외에 추가적인 기능을 사용할 수 있는 블럭입니다.</span></td></tr><tr><td style="width: 24.2263%;">사용자 블럭</td><td style="width: 75.8929%;">사용자가 직접 추가한 블럭입니다.</td></tr></tbody></table>

</div></div>