# 메인 홈 꾸미기

![](https://firebasestorage.googleapis.com/v0/b/ts-boilerplate-b2b14.appspot.com/o/posting%2Ftag.svg_55a2cbef-a60f-4d3c-b978-1fe702b61fe1?alt=media\&token=45ea3992-4fa6-49ad-a46d-7ef1fe8d6ecc)

<h3 align="center"><strong>메인 홈 꾸미기</strong></h3>

<p align="center">유저를 가장 처음 맞이하는 공간을 더욱 풍성하고 예쁘게 꾸미기</p>

<br>

<br>

![](https://370831306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODJXq0uhOJ46oP3YIDsO%2Fuploads%2FpddEnNdjZGGr7NaWrCO5%2F%ED%99%88%ED%8E%98%EC%9D%B4%EC%A7%80%EC%84%A4%EC%A0%95.png?alt=media\&token=ecd861ca-72a4-41e6-b706-2513f909c304)

<figure><img src="https://370831306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODJXq0uhOJ46oP3YIDsO%2Fuploads%2FQDXHYrwu3xpxg6D2BlAm%2F%ED%99%88%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%84%A4%EC%A0%95%EC%83%B7.png?alt=media&#x26;token=fd917256-7bb3-48aa-85d7-58d6fa7b471d" alt=""><figcaption></figcaption></figure>

<p align="center">메인 홈을 꾸미는 기능이 모여있는 페이지 입니다. <br><strong>관리자 권한</strong>으로만 진입 가능합니다.</p>

<mark style="color:blue;">**\[1]**</mark>   [#undefined-1](#undefined-1 "mention")

<mark style="color:blue;">**\[2]**</mark>  [#undefined-8](#undefined-8 "mention")

<mark style="color:blue;">**\[3]**</mark>   [#undefined-9](#undefined-9 "mention")

<mark style="color:blue;">**\[4]**</mark>  [#undefined-13](#undefined-13 "mention")

<mark style="color:blue;">**\[5]**</mark>   [#undefined-14](#undefined-14 "mention")

<mark style="color:blue;">**\[6]**</mark>  [#undefined-16](#undefined-16 "mention") <sub>*+*</sub>&#x20;*&#x20;*<sub>*<mark style="color:purple;">5,000₩</mark>*</sub>

<mark style="color:blue;">**\[7]**</mark> [#undefined-17](#undefined-17 "mention")  <sub>*+*</sub>&#x20;*&#x20;*<sub>*<mark style="color:purple;">20,000₩</mark>*</sub>

<h2 align="center">#1</h2>

<h3 align="center"><strong>메인 홈 디자인</strong></h3>

> **메인 홈 디자인 유형**
>
> * **자유보드형**
> * **슬라이드형**
> * **마이룸형**
> * **카드형**
> * **커스텀형**

<figure><img src="https://370831306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODJXq0uhOJ46oP3YIDsO%2Fuploads%2FRSAnaMQLBP7srtjptsBl%2Fimage.png?alt=media&#x26;token=feb44646-c8a5-4af8-b532-7d475e759432" alt=""><figcaption></figcaption></figure>

{% tabs %}
{% tab title="자유보드형" %}
원하는 텍스트로만 꾸밀 수 있는 유형입니다.\
\&#xNAN;**'메인 공지 편집**' 탭에서 자유롭게 편집 가능합니다.

![](https://firebasestorage.googleapis.com/v0/b/ts-boilerplate-b2b14.appspot.com/o/posting%2F4.png_c58cd8f7-c454-47c4-a710-ef4f38df5edf?alt=media\&token=fbb7474d-08df-4ad0-978a-245c93e724b6)
{% endtab %}

{% tab title="슬라이드형" %}
슬라이드 편집은 '메인 홈 설정' 에서 가능합니다.

![](https://370831306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODJXq0uhOJ46oP3YIDsO%2Fuploads%2FJBqiGbQwsf2v1O7swDfQ%2F%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C%ED%8E%B8%EC%A7%91%EA%B0%80%EB%8A%A5.png?alt=media\&token=630e1baa-3c81-4762-b49a-ecf3abede91d)

<figure><img src="https://370831306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODJXq0uhOJ46oP3YIDsO%2Fuploads%2FJAblpjbvyKy3Hwx7yt4E%2Fimage.png?alt=media&#x26;token=856e4e0e-ed41-4fa6-8575-f38cce25d797" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="마이룸형" %}
관리자 권한이 있다면, 홈에서 아이템 추가 및 이동이 바로 가능합니다.\
이미지 뿐만 아닌 코멘트만 작성 후 추가할 수 있습니다.

![](https://firebasestorage.googleapis.com/v0/b/ts-boilerplate-b2b14.appspot.com/o/posting%2F2.png_38464707-e70d-4c8b-a549-1bc044dc8938?alt=media\&token=ba99f871-086b-49b0-89d7-b79d05f48fcc)

<figure><img src="https://370831306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODJXq0uhOJ46oP3YIDsO%2Fuploads%2FgVJbzSMCn7kIdR6qheTr%2Fimage.png?alt=media&#x26;token=29ff7cca-ba28-4bad-a9b2-5194d721cb02" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="카드형" %}
카드형은 슬라이드 형의 레이아웃 변형 버전입니다.\
역시 메인 로고 적용이 가능하며, 슬라이드 이미지가 적용됩니다.

![](https://firebasestorage.googleapis.com/v0/b/ts-boilerplate-b2b14.appspot.com/o/posting%2F1.png_03d1d609-2391-4bf4-9fd7-af5334134f74?alt=media\&token=a2468556-a4a0-4ae6-afb7-f03fbca89541)
{% endtab %}

{% tab title="커스텀형" %}
그리드를 활용하여 자유롭게 메인 홈을 구성합니다.<br>

1. **컬러를 선택해, 보드판 위를 드래그 합니다.**\
   같은 컬러로 칠하면 섹션의 역할이 합쳐집니다.

   예를 들어, #FF5733 이라는 컬러의 섹션은 여러 곳에 칠해도 합쳐져 하나만 존재합니다.<br>
2. **컬러에 해당하는 역할(위젯 등)을 지정합니다.**<br>

   <div data-gb-custom-block data-tag="hint" data-style="warning" class="hint hint-warning"><p>각 컬러그룹 - 섹션 역할을 지정한 후에는 반드시 한 줄씩 저장해 주세요.<br></p><ul><li><strong>메인 공지</strong><br><strong>=</strong> [메인 홈 꾸미기] - [메인 공지 관리]에서 관리합니다.</li><li><strong>슬라이드 이미지</strong><br>= [메인 홈 꾸미기] - [슬라이드 편집]에서 관리합니다.</li><li><strong>포스팅 공지</strong><br>= 포스팅 게시판에서 [공지] 로 설정된 게시글을 모아 표시합니다.</li><li><strong>미니캘린더</strong><br>= 캘린더형 게시판이 있을 시, 연동됩니다.</li><li><strong>움직이는 한줄 텍스트</strong><br>= [메인 공지 관리] - [움직이는 한줄 텍스트] 에서 관리합니다.</li><li><strong>X (트위터) 위젯</strong><br>= [메인 홈 꾸미기] - [위젯 관리] - [X 아이디 설정]으로 관리합니다.</li><li><strong>배너란</strong><br>= [메인 홈 꾸미기] - [베너 편집]에서 관리합니다.</li><li><strong>미니갤러리</strong><br>= 갤러리형 게시판이 있을 시, 연동됩니다.</li><li><strong>스티커보드</strong><br>= 스티커보드형 게시판이 있을 시, 연동됩니다.</li><li><strong>미니방명록</strong><br>= 방명록형 게시판이 있을 시, 연동됩니다.</li></ul><p></p><ul><li><strong>로고</strong></li><li><strong>시계</strong></li><li><strong>음악 플레이어</strong></li><li><strong>마스터(주인장) 정보</strong></li><li><strong>로그인/유저 정보</strong></li><li><strong>최신글</strong></li></ul></div>

<figure><img src="https://370831306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODJXq0uhOJ46oP3YIDsO%2Fuploads%2FaXhq352aXAnVzFFcelIf%2Fimage.png?alt=media&#x26;token=e6f2bbff-4fa7-474e-a15e-8309065cc60b" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

<h2 align="center">#2</h2>

<h3 align="center"><strong>메인 공지 편집</strong></h3>

**메인 공지**를 편집합니다. **html 편집**도 가능합니다.

<figure><img src="https://370831306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODJXq0uhOJ46oP3YIDsO%2Fuploads%2FXO2lHX46xTAA3OB88QHU%2Fimage.png?alt=media&#x26;token=2b2635fa-ace7-4a10-b207-5d71044303e2" alt=""><figcaption></figcaption></figure>

<figure><img src="https://370831306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODJXq0uhOJ46oP3YIDsO%2Fuploads%2FOqKCji74l92iZimO6wW8%2F%EC%83%98%ED%94%8C%EC%9E%85%EB%8B%88%EB%8B%A4.png?alt=media&#x26;token=c2f701fc-06eb-4474-bc12-5f228971465d" alt=""><figcaption></figcaption></figure>

\
**움직이는 한 줄 텍스트** 는\[**메인 홈 디자인]** 탭에서 지정할 수 있습니다.&#x20;

<figure><img src="https://370831306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODJXq0uhOJ46oP3YIDsO%2Fuploads%2F63JzgW0uceV2tlzlOF0E%2Fimage.png?alt=media&#x26;token=8c3cd88c-7f4d-49f5-9a0e-48697406043c" alt=""><figcaption></figcaption></figure>

<figure><img src="https://370831306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODJXq0uhOJ46oP3YIDsO%2Fuploads%2Fz1MTGjCnUu8QJsLyUSf6%2Fimage.png?alt=media&#x26;token=f5f7174d-1c60-4947-9a69-b77e815da028" alt=""><figcaption></figcaption></figure>

<h2 align="center">#3</h2>

<h3 align="center"><strong>배너 편집</strong></h3>

> ### **유동배너 설정**

{% hint style="info" %}
**유동배너**란, 이미지의 url을 고정하되, 언제든 이미지를 교체할 수 있는 특정 주소입니다.

주소명은 고정됩니다.

[https://홈페이지주소/banner.png](https://xn--9l4b11iv7anw737a61d/banner.png)
{% endhint %}

![](https://firebasestorage.googleapis.com/v0/b/ts-boilerplate-b2b14.appspot.com/o/posting%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202024-11-22%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%2011.02.05.png_ea9cfa89-22cf-47f0-a7f2-4d2da9afd06b?alt=media\&token=346a6fe3-5785-4324-b283-c0198f5cf9d8)

> ### **타 사이트 배너 추가**

특정 이미지에 다른 홈페이지로 이동하는 링크를 설정할 수 있습니다.

이미지 크기는 정해져 있지 않습니다. (자유롭게 가능)

드래그 , 드롭으로 순서 변경 가능합니다.

![](https://firebasestorage.googleapis.com/v0/b/ts-boilerplate-b2b14.appspot.com/o/posting%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202024-11-22%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%2011.02.20.png_02bfb11d-0b47-494f-aca3-dc94121a3289?alt=media\&token=4a85fe87-bca2-415a-a916-f543a2b14f36)

배너 추가 시 외부 이미지 링크를 이용할 수 있는데,

**이미지 유동 링크** 는 보안상 **https\://** 로 시작하는 url만 연결 가능합니다.

![](https://firebasestorage.googleapis.com/v0/b/ts-boilerplate-b2b14.appspot.com/o/posting%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202024-11-22%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%2011.03.04.png_0308fb0e-fdbf-4748-9cd8-4e715033e50e?alt=media\&token=1e203f10-b685-4fec-928f-7eea72ada688)

> ### **배너 단독 페이지 추가**&#x20;

배너 관련 공지 및, 배너만 단독으로 추려서 볼 수 있는 페이지를 추가합니다.

메뉴에 추가 가능한 주소는 아래와 같습니다.

{% hint style="info" %}
**https\://\[내 홈페이지 주소]/banners**
{% endhint %}

<figure><img src="https://370831306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODJXq0uhOJ46oP3YIDsO%2Fuploads%2Ff3rLPEPQoGtbeewGrVHH%2Fimage.png?alt=media&#x26;token=f109282c-eeba-423b-bf8c-8d35631cb84b" alt=""><figcaption></figcaption></figure>

<figure><img src="https://370831306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODJXq0uhOJ46oP3YIDsO%2Fuploads%2FR9Z7p6y1IWkHFZiBj1xR%2Fimage.png?alt=media&#x26;token=befd04e4-e1f0-4ddd-a188-ca6569701130" alt=""><figcaption></figcaption></figure>

<h2 align="center">#4</h2>

<h3 align="center"><strong>슬라이드 편집</strong></h3>

메인 홈에 나타나는 슬라이드 이미지와 순서를 편집합니다.

슬라이드 클릭 시 특정 페이지로 이동도 가능합니다.\
슬라이드 이미지에 () <-괄호 가 포함되면 이미지가 액박으로 표시될 수 있습니다.

<figure><img src="https://370831306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODJXq0uhOJ46oP3YIDsO%2Fuploads%2FXlTZYe1Gr5Ebt7FXdB8u%2Fimage.png?alt=media&#x26;token=f6884122-749b-4792-b674-85099681d18d" alt=""><figcaption></figcaption></figure>

<h2 align="center">#5</h2>

<h3 align="center"><strong>위젯 관리</strong></h3>

> ### **X(구 트위터) 위젯 아이디 설정**

최신 트윗을 연동할 수 있습니다.

<figure><img src="https://firebasestorage.googleapis.com/v0/b/ts-boilerplate-b2b14.appspot.com/o/posting%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202024-11-22%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%2011.09.37.png_c9e1e35e-748d-450f-85a8-2a3168a2a60a?alt=media&#x26;token=dc2a31a6-7a40-401b-a013-c458b13020de" alt=""><figcaption></figcaption></figure>

![](https://firebasestorage.googleapis.com/v0/b/ts-boilerplate-b2b14.appspot.com/o/posting%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202024-11-22%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%2011.10.31.png_4014ed8c-b9b9-44e7-866c-75d81a31bef4?alt=media\&token=0fcbe7fc-6c74-4ff5-bd54-4c9231c0bbbd)

{% hint style="danger" %}
**현재 해당 기능은 Xapi정책이 바뀌면서 위젯 적용이 되지 않습니다.** 😭\
방법을 찾아보는 중에 있으니 조금만 더 기다려주세요!
{% endhint %}

> ### **이웃 랜덤 방문 위젯 설정**

배너목록을 랜덤으로 순회하는 버튼이 홈페이지 가장 하단에 등장합니다.

<figure><img src="https://firebasestorage.googleapis.com/v0/b/ts-boilerplate-b2b14.appspot.com/o/posting%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202024-11-22%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%2011.02.14.png_1f5b176f-b053-48a0-a2c0-e57eca8fd43e?alt=media&#x26;token=582711f1-cf48-4038-8039-3e5ab639f16a" alt=""><figcaption></figcaption></figure>

<figure><img src="https://firebasestorage.googleapis.com/v0/b/ts-boilerplate-b2b14.appspot.com/o/posting%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202024-11-22%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%2011.02.25.png_0299d908-0993-4031-807d-1bb4e37323c6?alt=media&#x26;token=4339af96-6923-43a3-8851-08bf263988c7" alt=""><figcaption></figcaption></figure>

> ### **\[추가 옵션] 디데이 위젯**   <sub>*+*</sub><sub>*&#x20;*</sub><sub>*&#x20;*</sub><sub>*<mark style="color:purple;">10,000₩</mark>*</sub>

\[**디데이 추가**]  버튼으로 여러 디데이를 추가 할 수 있습니다. \[**텍스트형 / 이미지형**] 설정 가능

{% hint style="info" %}
**목표일까지 D-day수능일 , 매년 있는 기념일 등**&#x20;

* 목표일까지 D-day
  * 수능일 , 매년 있는 기념일 등

**날짜 세기 (목표일로부터 +n일) 커플 생성일 등**

* 날짜 세기 (목표일로부터 +n일)
  * 커플 생성일 등
    {% endhint %}

<figure><img src="https://370831306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODJXq0uhOJ46oP3YIDsO%2Fuploads%2FLRN5IUkgMpT32rr37fV6%2Fimage.png?alt=media&#x26;token=7f80c78d-99d4-42e4-ac95-bcfe71ca111c" alt=""><figcaption></figcaption></figure>

자유보드형을 제외한\
**슬라이드형, 마이룸형, 카드형, 커스텀형 에서** 표시 가능합니다.

{% hint style="info" %}
**빈칸**으로 남겨둘 시에는 **여백**으로 표시됩니다.
{% endhint %}

<figure><img src="https://370831306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODJXq0uhOJ46oP3YIDsO%2Fuploads%2FhmY8gpQwUpU1HebQx2QK%2Fimage.png?alt=media&#x26;token=fb56f1f4-c87d-41f1-90f8-bfa1399056bd" alt=""><figcaption></figcaption></figure>

<h2 align="center">#6</h2>

<h3 align="center"><strong>[추가 기능] 대문 페이지 관리</strong></h3>

<p align="center"><sub><em>+</em></sub> <em> </em><sub><em><mark style="color:purple;">5,000₩</mark></em></sub></p>

대문(게이트) 페이지란 홈페이지 최초 진입 시 보여지는 페이지 입니다.

<figure><img src="https://370831306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODJXq0uhOJ46oP3YIDsO%2Fuploads%2FUZnvxKIW0WdZEK3ovyGa%2Fimage.png?alt=media&#x26;token=36646c9c-ab48-4828-9296-2e9a09ba7a03" alt=""><figcaption></figcaption></figure>

활성화 또는 비활성화 가능하며 개별 배경, 로고를 등록할 수 있고 진입 방식 선택이 가능합니다.

**- 로그인 후 진입**\
**- 버튼 클릭 시 진입**

대문 페이지는 기본적으로 **'로그인 하지 않은 유저**'에게 보여지며, \
**로그인 캐시가 있는 경우 바로 메인 홈으로 진입**합니다.&#x20;

<figure><img src="https://370831306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODJXq0uhOJ46oP3YIDsO%2Fuploads%2FNqxV9H8j8TAHeWADvSMg%2Fimage.png?alt=media&#x26;token=81203e31-4d4b-4846-aaba-d1db4e85cae4" alt=""><figcaption></figcaption></figure>

<figure><img src="https://370831306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODJXq0uhOJ46oP3YIDsO%2Fuploads%2FQ9r0PL55VsNEmiN2fMpp%2Fimage.png?alt=media&#x26;token=887ece59-5e9e-4098-a6ed-8fea94f4a2ef" alt=""><figcaption></figcaption></figure>

<h2 align="center">#7</h2>

<h3 align="center"><strong>[추가기능] 시메지 관리</strong></h3>

<p align="center"><sub><em>+</em><em> </em><em> </em><em><mark style="color:purple;">20,000₩</mark></em></sub></p>

![](https://firebasestorage.googleapis.com/v0/b/ts-boilerplate-b2b14.appspot.com/o/posting%2FFrame%2031033.png_9f3e365c-30e4-459a-94e1-073a679e9a22?alt=media\&token=cd5675de-403d-4608-ba46-7ca0ee87e61d)

{% hint style="info" %}
**‘시메지**’란 바탕화면 등을 자유롭게 부유하며 움직이는 캐릭터 애니메이션입니다.

보통은 운영체제를 기반으로 작동하는 프로그램 명칭이지만

&#x20;**해당 시메지는 무공 갠홈 에서만 작동합니다.**
{% endhint %}

자세한 설명은 아래를 확인 부탁드립니다.   &#x20;

{% content-ref url="undefined-6/undefined" %}
[undefined](https://moogong-guide.gitbook.io/guide/undefined-6/undefined)
{% endcontent-ref %}

<br>

<br>