# 11. 고정버튼 다루기

# 탑버튼 사용하기

탑버튼은 클릭시 페이지를 제일 상단으로 이동해주는 기능의 버튼입니다.

퀵메뉴와 마찬가지로 우측하단에 항상 고정되어 보여집니다.

\[디자인 편집\] - \[퀵메뉴 관리\] - 탑버튼 \[사용하기\] 버튼을 이용해서 활성화할 수 있습니다.

탑버튼은 편집모드마다 각각 설정해주어야 하며, 모바일에서도 탑버튼을 사용할 경우 편집모드를 모바일 버전으로 변경한 후에 버튼을 추가해주세요.

자세한 내용은 아래 안내를 참고해 주시기 바랍니다.

[https://docs.dothome.co.kr/books/11/page/40008/edit](https://docs.dothome.co.kr/books/11/page/40008/edit)

##### ●탑버튼 사용하기

[![topbutton_01.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/topbutton-01.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/topbutton-01.png)

<span style="color: rgb(22, 145, 121);">\[퀵메뉴 관리 버튼 화면\]</span>

편집 메뉴에서 \[퀵메뉴 관리\]버튼을 눌러 관리창을 열어줍니다. 탑버튼 사용하기 버튼을 누르시면 페이지 우측 하단에 탑버튼이 추가됩니다.

##### ●고정 버튼 위치 변경하기

[![topbutton_02.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/topbutton-02.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/topbutton-02.png)

<span style="color: rgb(22, 145, 121);">\[고정버튼 설정 버튼 화면\]</span>

하단의 추가된 고정버튼 위에 마우스를 올리면 \[설정\] 버튼이 표시됩니다.

제일 상단에 있는 \[설정\] 버튼을 눌러 고정버튼 레이아웃 설정창을 열어줍니다.

[![topbutton_03.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/topbutton-03.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/topbutton-03.png)

<span style="color: rgb(22, 145, 121);">\[고정버튼 레이아웃 설정 화면\]</span>

고정버튼 레이아웃 설정 변경시 탑버튼과 퀵버튼이 함께 적용됩니다.

우측 여백과 하단 여백을 입력할 수 있습니다.

원하는 값을 입력한 후 적용하기 버튼을 누르면 변경된 레이아웃을 확인 할 수 있습니다.

##### <span style="color: #333333;">● 탑버튼 디자인 수정하기</span>

<span style="color: #333333;">  
</span>

<span style="color: rgb(22, 145, 121);">[![topbutton_05.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/topbutton-05.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/topbutton-05.png)</span>

<span style="color: rgb(22, 145, 121);">\[탑버튼 설정 버튼 화면\]</span>

<span style="color: #333333;">  
</span>

탑버튼 위에 마우스를 올린 뒤 \[설정\] 버튼을 클릭하여 탑버튼 설정창을 열어줍니다.<span style="color: #333333;">  
</span>

<span style="color: #333333;">  
</span>

[![topbutton_05.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/topbutton-05.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/topbutton-05.png)

<span style="color: rgb(22, 145, 121);">\[탑버튼 설정창 화면\]</span>

탑버튼 설정창에서 원하는 색상으로 변경이 가능합니다.

입력항목 아래의 미리보기를 통해 적용할 색상을 미리 확인할 수 있습니다.

색상을 변경한 후 \[적용하기\]를 누르면 변경사항이 적용됩니다.

# 퀵버튼 사용하기

퀵버튼은 페이지 페이지 이동, 채팅하기 등의 기능을 빠르게 사용할 수 있도록 모든 페이지의 우측 하단에 항상 고정되어 보여지는 버튼입니다.

\[디자인 편집\] - \[퀵메뉴 관리\] - 퀵버튼 \[사용하기\] 버튼을 이용해서 활성화할 수 있습니다.

퀵버튼은 편집모드마다 각각 설정해주어야 합니다. 모바일에서도 퀵버튼을 사용할 경우 편집모드를 모바일 버전으로 변경한 후에 버튼을 추가해주세요.

자세한 내용은 아래 안내를 참고해 주시기 바랍니다.

[https://docs.dothome.co.kr/books/11/page/19ca1](https://docs.dothome.co.kr/books/11/page/19ca1)

##### ● 퀵버튼 사용하기  


[![q-botton_01.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/q-botton-01.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/q-botton-01.png)

<span style="color: rgb(22, 145, 121);">\[퀵메뉴 관리 버튼 화면\]</span>

편집 메뉴에서 \[퀵메뉴 관리\] 버튼을 눌러 관리창을 열어줍니다.

[![q-botton_02.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/q-botton-02.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/q-botton-02.png)

<span style="color: rgb(22, 145, 121);">\[퀵메뉴 관리창 화면\]</span>

퀵버튼 \[사용하기\] 버튼을 누르시면 페이지 우측 하단에 퀵버튼이 추가됩니다.

##### ● 고정버튼 위치 변경하기

[![q-botton_03.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/q-botton-03.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/q-botton-03.png)

<span style="color: rgb(22, 145, 121);">\[고정버튼 설정 버튼 화면\]</span>

하단의 추가된 퀵버튼 위에 마우스를 올리면 \[설정(톱니바퀴)\]버튼이 표시됩니다.

제일 상단에 있는 \[설정(톱니바퀴)\]버튼을 눌러 고정버튼 레이아웃 설정창을 열어줍니다.

[![q-botton_04.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/q-botton-04.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/q-botton-04.png)

<span style="color: rgb(22, 145, 121);">\[고정버튼 레이아웃 설정창 화면\]</span>

고정버튼 레이아웃 설정 변경시 탑버튼과 퀵버튼이 함께 적용됩니다.

우측 여백과 하단 여백을 입력할 수 있습니다.

원하는 값을 입력한 후 \[적용하기\] 버튼을 누르면 레이아웃을 확인 할 수 있습니다.

##### ● 퀵버튼 목록 추가하기

<span style="color: rgb(22, 145, 121);">[![q-botton_05.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/q-botton-05.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/q-botton-05.png)</span>

<span style="color: rgb(22, 145, 121);">\[퀵버튼 설정 버튼 화면\]</span>

퀵버튼 위에 마우스를 올린 뒤 \[설정(톱니바퀴)\]버튼을 클릭하여 퀵버튼 설정창을 열어줍니다.

[![q-botton_06.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/q-botton-06.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/q-botton-06.png)

<span style="color: rgb(22, 145, 121);">\[퀵버튼 추가 화면\]</span>

퀵버튼 설정창에서 현재 추가되어있는 퀵버튼 목록을 확인할 수 있습니다.

\[퀵버튼 추가하기\]버튼을 눌러 버튼을 추가할 수 있습니다.

<table class="table table-bordered" id="bkmrk-%ED%95%AD%EB%AA%A9-%EC%84%A4%EB%AA%85-%EC%A7%81%EC%A0%91-%EC%B6%94%EA%B0%80-%ED%8E%98%EC%9D%B4%EC%A7%80-%EB%98%90%EB%8A%94-%EB%A7%81" style="width: 100%; height: 258.849px;"><tbody><tr style="height: 41.6903px;"><td style="width: 27.5319%; height: 41.6903px;">항목</td><td style="width: 72.4573%; height: 41.6903px;">설명</td></tr><tr style="height: 41.6903px;"><td style="width: 27.5319%; height: 41.6903px;">직접 추가</td><td style="width: 72.4573%; height: 41.6903px;">페이지 또는 링크를 직접 입력하여 버튼 클릭시 해당 주소로 이동할 수 있도록 합니다.</td></tr><tr style="height: 64.0909px;"><td style="width: 27.5319%; height: 64.0909px;">네이버 톡톡</td><td style="width: 72.4573%; height: 64.0909px;">네이버 톡톡 버튼을 추가합니다. 네이버 톡톡 기능을 사용하려면 연동이 필요합니다. **[<span style="color: #759fff;">네이버 톡톡 연동하기&gt;</span>](https://docs.dothome.co.kr/books/02/page/32072)**</td></tr><tr style="height: 64.0909px;"><td style="width: 27.5319%; height: 64.0909px;">카카오톡 채널 채팅</td><td style="width: 72.4573%; height: 64.0909px;">카카오톡 채널 채팅 버튼을 추가합니다. 카카오톡 재널 채팅 기능을 사용하려면 연동이 필요합니다. **[<span style="color: #759fff;">카카오톡 채널 채팅 연동하기&gt;</span>](https://docs.dothome.co.kr/books/02/page/01161)**</td></tr><tr style="height: 47.2869px;"><td style="width: 27.5319%; height: 47.2869px;">채널톡</td><td style="width: 72.4573%; height: 47.2869px;">채널톡 버튼을 추가합니다. 채널톡 기능을 사용하려면 연동이 필요합니다. [<span style="color: #759fff;">채널톡 연동하기&gt;</span>](https://builder20.dothome.co.kr/manual/info/15)</td></tr></tbody></table>

##### ● 퀵버튼 수정하기

[![q-botton_07.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/q-botton-07.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/q-botton-07.png)

<span style="color: rgb(22, 145, 121);">\[퀵버튼 수정 메뉴 화면\]</span>

직접 추가를 선택하여 추가한 퀵버튼은 아이콘, 색상, 동작 등을 수정할 수 있습니다.

수정하려는 버튼 우측의 설정버튼을 누르면 설정 메뉴가 나옵니다.

수정 버튼을 눌러 수정창을 열어줍니다.

[![q-botton_08.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/q-botton-08.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/q-botton-08.png)

<span style="color: rgb(22, 145, 121);">\[퀵버튼 설정창 화면\]</span>

퀵버튼 수정창에서 내용을 수정한 뒤 \[저장\]을 눌러주시고, 퀵버튼 설정창 하단의 \[적용하기\]를 눌러주시면 변경한 내용으로 적용됩니다.

##### ● 더보기 버튼 디자인 변경하기

[![q-botton_09.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/q-botton-09.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/q-botton-09.png)

<span style="color: rgb(22, 145, 121);">\[더보기 버튼 디자인 변경 버튼 화면\]</span>

더보기 버튼 \[디자인 변경하기\]를 누르면 변경창이 열립니다.

[![q-botton_10.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/q-botton-10.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/q-botton-10.png)

<span style="color: rgb(22, 145, 121);">\[더보기 버튼 디자인 변경 설정 화면\]</span>

원하는 색상을 선택하여 저장해주세요.

퀵버튼 설정창 하단의 \[적용하기\] 버튼을 눌러주시면 수정사항이 적용됩니다.

##### ● 퀵버튼 펼치기

퀵버튼은 더보기 버튼을 클릭하면 퀵버튼 목록이 보이도록 설정되어 있습니다.

더보기 버튼 없이 버튼 목록이 항상 보이도록 변경해보도록 하겠습니다.

[![q-botton_11.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/q-botton-11.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/q-botton-11.png)

<span style="color: rgb(22, 145, 121);">\[퀵버튼 항상 펼치기 옵션 화면\]</span>

퀵버튼 설정창 상단의 '퀵버튼 항상 펼지키'에 체크한 뒤 \[적용하기\]를 누르면 퀵버튼이 항상 펼쳐져 보입니다.

# 탑버튼 사용 해제하기

탑버튼을 사용하지 않으시려면 사용해제 처리할 수 있으며 아래의 두가지 방법으로 가능합니다.

\[디자인 편집\] - 우측 하단의 탑버튼의 \[휴지통\] 또는

\[디자인 편집\] - \[퀵메뉴 관리\] - 탑버튼의 \[사용해제\] 버튼을 이용해서 비활성화 할 수 있습니다.

사용해제 역시 PC, 모바일 별도로 설정해주어야 합니다.

자세한 내용은 아래 안내를 참고해 주시기 바랍니다.

[https://docs.dothome.co.kr/books/11/page/54229](https://docs.dothome.co.kr/books/11/page/54229)

[![t-button_del_01.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/t-button-del-01.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/t-button-del-01.png)

<span style="color: rgb(22, 145, 121);">\[탑버튼의 삭제 버튼 화면\]</span>

탑버튼 위에 마우스를 올리면 \[설정(작은 톱니바퀴 모양)\] 버튼이 표시됩니다.

오른쪽의 \[삭제(쓰레기통 모양)\]을 누르면 탑버튼 사용이 해제됩니다.

[![t-button_del_02.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/t-button-del-02.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/t-button-del-02.png)

<span style="color: rgb(22, 145, 121);">\[퀵메뉴 관리창의 사용해제 화면\]</span>

또한, 상단의 \[퀵메뉴 관리\]에서 \[사용해제\]버튼을 통하여 해제할 수 있습니다.

# 퀵버튼 사용 해제하기

퀵버튼을 사용하지 않으시려면 사용해제 처리할 수 있으며 아래의 두가지 방법으로 가능합니다.

\[디자인 편집\] - 우측 하단의 퀵버튼의 \[휴지통\] 버튼 또는

\[디자인 편집\] - \[퀵메뉴 관리\] - 퀵버튼의 \[사용해제\] 버튼을 이용해서 비활성화 할 수 있습니다.

사용해제 역시 PC, 모바일 별도로 설정해주어야 합니다.

자세한 내용은 아래 안내를 참고해 주시기 바랍니다.

[https://docs.dothome.co.kr/books/11/page/496e0](https://docs.dothome.co.kr/books/11/page/496e0)

[![q-button_del_01.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/q-button-del-01.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/q-button-del-01.png)

<span style="color: rgb(22, 145, 121);">\[퀵버튼 삭제 버튼 화면\]</span>

퀵버튼 위에 마우스를 올리면 \[설정(작은 톱니바퀴 모양)\] 버튼이 표시됩니다.

오른쪽의 \[삭제(쓰레기통 모양)\]을 누르면 퀵버튼 사용이 해제됩니다.

[![q-button_del_02.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/q-button-del-02.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/q-button-del-02.png)

<span style="color: rgb(22, 145, 121);">\[퀵버튼 관리에서 퀵버튼 사용해제 화면\]</span>

<div id="bkmrk--8">  
</div>  
또한, 상단의 \[퀵메뉴 관리\]에서 \[사용해제\]버튼을 통하여 해제할 수 있습니다.