# 홈페이지 디자인 가이드

{% hint style="info" %}
**홈페이지를 이용해주시고 계시는 분들 모두 감사드립니다!**

**아래로는 기본적인 디자인 꾸미기의 최적화 사이즈 안내 모음입니다.**

**디자인 커미션 요청 등에 사용하실 수 있습니다.**
{% endhint %}

{% hint style="warning" %}

#### **홈페이지의 특정 요소에 디자인 커미션을 사용하시는 경우, (배경, 메뉴, 로고 등)** **'홈페이지 개발자 무공'이 임의로 해당 디자인이 포함된 홈페이지를 홍보 샘플로 사용할 수 있다는 점을** **의뢰자분께 꼭 고지드렸으면 하고 부탁드립니다!**

이후 출처 표기를 원하신다면, 오픈카톡으로 알려주시면 샘플 사용시에 출처를 남겨드립니다.

제가 모든 홈페이지 디자인의 출처요소를 파악할 수 없는 관계로 필수사항은 아니지만

디자이너분과 서로의 작업물을 존중하기 위한 절차라고 생각하므로, 권장드리고자 합니다.

홈페이지 샘플 사용에 대한 안내는 공지에 언급되어 있으며, 샘플 비공개 요청도 가능하십니다. 
{% endhint %}

> ### **기준 브라우저**
>
> **최신 chrome / 데스크톱**

> ### **모든 이미지 기본 해상도 / 확장자**
>
> **72dpi / .webp**

모바일 최적화는 따로 고려되지 않은 점, 양해 부탁드립니다.

\
❗**아래로는 홈페이지 분위기에 가장 영향을 끼치는 이미지 종류입니다.**

![](https://firebasestorage.googleapis.com/v0/b/ts-boilerplate-b2b14.appspot.com/o/posting%2F%E1%84%80%E1%85%AF%E1%86%AB%E1%84%8C%E1%85%A1%E1%86%BC.jpg_603ea34e-12a4-4c75-a08f-c32626a63c2b?alt=media\&token=0e5ca03c-765a-4746-afe8-70e90866f2a4)

홈페이지는 기본적으로 **'메뉴 레이아웃'** 그리고 **'메인 홈 레이아웃'** 유형에 따라 작업하실 이미지 방향성이 결정됩니다.

> 현재 제공중인 레이아웃 타입은 총 **4가지** 이며,\
> 홈페이지 전반이 **반응형**으로 레이아웃 크기가 유동적으로 변하기 때문에 권장 사이즈가 있을 뿐\
> **대부분의 경우 어느 환경이든, 브라우저 사이즈를 모두 충족시키는 완벽한 이미지 사이즈를 제안드리는 것은 어렵습니다. (메뉴/로고제외)**\
> \
> **유저의 홈페이지 사용 환경은 매우 다양하다는 점 이해해 주셨으면 좋겠습니다!**

<br>

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

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

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

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

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

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

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

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

<mark style="color:blue;">**\[9]**</mark> [#less-than-greater-than-and](#less-than-greater-than-and "mention")

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

<h3 align="center"><strong>기본 레이아웃 조합</strong></h3>

아래는 모두 홈페이지 수령시 기본적으로 조합 가능한 레이아웃이며 **회색부분이 이미지로 대체 가능합니다.**(배경 및 메뉴란도 이미지로 대체 가능)

### **3단 레이아웃 + 메인 홈 커스텀 형**

<figure><img src="https://370831306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODJXq0uhOJ46oP3YIDsO%2Fuploads%2F6Im0J1Thjc89ihktOLbX%2FFrame%2030925.png?alt=media&#x26;token=d494a74d-dcbb-43ef-b320-1b29c0f8c680" alt=""><figcaption></figcaption></figure>

### **왼쪽정렬형 레이아웃 + 메인 홈 슬라이드형**

<figure><img src="https://370831306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODJXq0uhOJ46oP3YIDsO%2Fuploads%2Fb9J1tbCTArVydeyg4Svx%2FFrame%2030927.png?alt=media&#x26;token=b4a3648e-8abc-483c-887c-cae965a2f221" alt=""><figcaption></figcaption></figure>

### **미니홈피형 레이아웃 + 메인 홈 마이룸형**

<figure><img src="https://370831306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODJXq0uhOJ46oP3YIDsO%2Fuploads%2FPEs3QGk51JmbRsKN6ZIb%2Fdfsdfdfdf.png?alt=media&#x26;token=2c875b6a-13de-4e33-ab01-0337f4f2cd5b" alt=""><figcaption></figcaption></figure>

### **상단 형 레이아웃 + 메인 홈 3단 카드형**&#x20;

<figure><img src="https://370831306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODJXq0uhOJ46oP3YIDsO%2Fuploads%2Fl7AC7zcRi7LnDCw9dmBj%2F%EC%83%81%EB%8B%A8%ED%98%95%20%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83%20%2B%20%EB%A9%94%EC%9D%B8%20%ED%99%88%203%EB%8B%A8%20%EC%B9%B4%EB%93%9C%ED%98%95.png?alt=media&#x26;token=fa170ef8-7b60-4ed6-b86e-dc39701f38e4" 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%2Fgrkk5wB4i2OXAzyzdUAm%2F%EB%B8%94%EB%A1%9C%EA%B7%B8%ED%98%95%20%2B%20%EB%A9%94%EC%9D%B8%ED%99%88%20%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C%ED%98%95.png?alt=media&#x26;token=6bce1c8e-6248-4b42-a797-1dc5fa478136" alt=""><figcaption></figcaption></figure>

### **미니메모 형 레이아웃 + 메인 홈 3단 카드형**&#x20;

<figure><img src="https://370831306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODJXq0uhOJ46oP3YIDsO%2Fuploads%2FVQ16Nfdjd4ess7MXjaaL%2F%EB%AF%B8%EB%8B%88%EB%A9%94%EB%AA%A8%ED%98%95%20%2B%203%EB%8B%A8%20%EC%B9%B4%EB%93%9C%ED%98%95.png?alt=media&#x26;token=5d022f9a-3d01-4df1-9ccf-02a3ad619f0f" alt=""><figcaption></figcaption></figure>

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

<h3 align="center"><strong>전체 배경 이미지</strong></h3>

{% hint style="warning" %}
가로 3840 \* 세로 2160 / 72dpi .webp (사이즈가 크므로 해상도 및 확장자 강력권장)
{% endhint %}

데스크톱 해상도 중 가장 많은 유저비율을 차지하는 **1920\*1080의 2배수** 입니다.\
모니터의 해상도에 따라 상이하지만, **기본 2배수\~4배수** 권장합니다.

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

<h3 align="center"><strong>로고 이미지</strong></h3>

> **1)   메뉴에 나타나는 대표 로고**
>
> 사이즈 자유\
> **메뉴디자인**과 조화로울 수 있습니다.
>
> ![](https://370831306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODJXq0uhOJ46oP3YIDsO%2Fuploads%2FdfCEvKo3errtrgvLoup0%2Fimage.png?alt=media\&token=e272963b-25a9-4496-8647-2b1afe28a523)

> **2)   메인 홈에 부분적으로 보이는 이미지 로고**
>
> 사이즈 자유\
> **메인 홈 디자인**과 조화로울 수 있습니다.
>
> <img src="https://370831306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODJXq0uhOJ46oP3YIDsO%2Fuploads%2FPiHFaNa8JFVzdgUpt5uK%2Fimage.png?alt=media&#x26;token=d37cafa6-53d2-408c-a358-e863ff6fb16a" alt="" data-size="original">

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

<h3 align="center"><strong>메뉴 이미지</strong></h3>

{% hint style="warning" %}
최대 **가로 220 \* 세로 80** (일반 텍스트로 교체 가능)
{% endhint %}

**① 텍스트타입** /    ② **이미지타입** 선택 가능합니다.\
아래는 **메뉴 로고 디자인 + 메뉴 이미지 디자인** 조합 형태입니다.

{% hint style="info" %}
참고 이미지는 현선생님 커미션 @hyunmission 께서 제공해주셨습니다.
{% 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%202023-02-16%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%201.26.37.png_0e453249-e998-4a89-a9e6-245c167d1e13?alt=media\&token=f67a2d98-56c1-4467-97b4-2056d59fc517)

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

<h3 align="center"><strong>[옵션] 배너 이미지 &#x26; 보더 이미지</strong></h3>

{% hint style="info" %}
**배너 이미지**&#x20;

사이즈 자유 / 대중적 크기 **가로 200 \* 세로 40**
{% endhint %}

배너는 말그대로 주인장이 원하는 대로, 홈페이지를 가장 잘 나타낼 수 있는 대표이미지 설정이기 때문에 \
사이즈가 자유롭습니다.

<figure><img src="https://370831306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODJXq0uhOJ46oP3YIDsO%2Fuploads%2FWfcIQjIic8LoNqrR1fIS%2Fimage.png?alt=media&#x26;token=2122778f-c862-4f15-8c15-144fc58c2bc1" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**보더 이미지**&#x20;

사이즈 자유 / 대중적 크기 **가로 90 \* 세로 90**
{% endhint %}

<figure><img src="https://370831306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODJXq0uhOJ46oP3YIDsO%2Fuploads%2FanxjPL5JWhRbwGeDduLL%2Fimage.png?alt=media&#x26;token=437e8896-0cc6-48d9-a74e-dce4f1c83d37" alt=""><figcaption></figcaption></figure>

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

<h3 align="center"><strong>[옵션] 슬라이드 이미지 / 메인 이미지</strong></h3>

메인 홈 레이아웃 중&#x20;

\[**커스텀형**] 또는 \[**슬라이드형**] 또는 \[**3단 카드형**] 선택 시 꾸미기 용도의 분위기 이미지입니다.

{% hint style="warning" %}
**⛳️ 각 이미지의 위치는 가장 상단의 '기본 레이아웃 조합' 이미지 참고해주세요**
{% endhint %}

1. **자유 보드형**

사이즈 유동적으로 조절 가능

2. **슬라이드형**

{% hint style="info" %}
**최대 가로 920 \* 세로 310** (브라우저 사이즈에 따라 상이할 수 있습니다.)
{% endhint %}

\[**커스텀** 형]에서 슬라이드를 지정할 경우, 슬라이드의 위치 및 비중에 따라 작업영역이 상이합니다.

개발자 도구를 통해 최대 높이를 확인해주시는 방법이 가장 확실합니다.

[🔗 슬라이드 최적 사이즈 확인 방법 >](https://gomiwork.notion.site/15df7c527d568014a7c0dafc7781c5b3)

<figure><img src="https://370831306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODJXq0uhOJ46oP3YIDsO%2Fuploads%2FQXQdQXmCZjWbN8tkfgos%2F%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C%ED%98%95.png?alt=media&#x26;token=33b3f7f9-55fb-4501-b9e3-d38d2004d584" alt=""><figcaption></figcaption></figure>

3. **3단 카드형**

최대 가로 300 \* 세로 530\
브라우저 사이즈에 따라 상이할 수 있습니다.

<figure><img src="https://370831306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODJXq0uhOJ46oP3YIDsO%2Fuploads%2FahpL14svEToSYtQRDqDQ%2F3%EB%8B%A8%ED%98%95.png?alt=media&#x26;token=183d36cd-f914-4bd1-ab57-e3aefa67bf7e" alt=""><figcaption></figcaption></figure>

4. **커스텀형**

사이즈 자유\
브라우저 사이즈에 따라 상이할 수 있습니다.

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

<h3 align="center"><strong>[옵션] 홈페이지 메타태그 이미지</strong></h3>

{% hint style="info" %}
**메타 태그 이미지**란, 홈페이지 링크를 공유할 때 트위터 또는 카카오톡 등에 홈페이지 미리보기 이미지를 띄우는 작업입니다.\
\
**권장 가로 1200 \* 세로 630 / .png**
{% endhint %}

![](https://firebasestorage.googleapis.com/v0/b/ts-boilerplate-b2b14.appspot.com/o/posting%2FFjcXT1iVUAEjAVd.jpg_df89549f-85dd-4ebf-a37d-6dda88ab09fc?alt=media\&token=ef169b8e-874d-48a8-9a44-e3822d8039d0)

<h2 align="center"><strong>#8</strong></h2>

<h3 align="center"><strong>[옵션] 파비콘</strong></h3>

{% hint style="info" %}
**파비콘**이란,  브라우저 타이틀과 함께 표시되는 작은 아이콘 입니다.\
\
**권장 가로 32 \* 세로 32 / .png**
{% endhint %}

![](https://370831306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODJXq0uhOJ46oP3YIDsO%2Fuploads%2FhwthjowIlkHVOPIQS02t%2F%ED%8C%8C%EB%B9%84%EC%BD%98.png?alt=media\&token=57d6bbd7-2bc7-493f-9fef-ddb412ca6b9d)

<h2 align="center"><strong>#9</strong></h2>

<h3 align="center"><strong>[옵션] &#x3C;포토카드형> 진영 이미지 &#x26; 프로필 내용 상세 이미지</strong></h3>

{% hint style="warning" %}
**\[홈페이지 설정] - \[게시판별 기능] - \[포토카드형 일괄 설정]**
{% endhint %}

{% hint style="info" %}
**포토카드형 게시판의 진영 이미지** 입니다.

**권장 사이즈 200\*200**&#x20;
{% endhint %}

<figure><img src="https://370831306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODJXq0uhOJ46oP3YIDsO%2Fuploads%2FzycSl1lcqJvKdqapisZ8%2Fimage.png?alt=media&#x26;token=dd0a54fc-7615-417b-8c4a-5393f7d79f14" alt=""><figcaption></figcaption></figure>

<figure><img src="https://370831306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODJXq0uhOJ46oP3YIDsO%2Fuploads%2FpbQrNbHEEOTuhTVruRLz%2Fimage.png?alt=media&#x26;token=6875269c-f873-4dd7-9f1f-2aacab86d65f" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**포토카드형 게시판의 캐릭터 상세 내용 관리란** 입니다.

포토카드의 '프로필' 항목 내용을 미리 지정합니다.
\
**저장된 시점 이후부터 적용 됩니다. (기존에 등록 되어 있는 포토카드 탭은 적용 X)**

**사이즈 자유**
{% endhint %}

<figure><img src="https://370831306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODJXq0uhOJ46oP3YIDsO%2Fuploads%2FTV6LNM1ESyDAVG9xeW2W%2Fimage.png?alt=media&#x26;token=ca3fcfaa-9046-4d4f-9b3d-ff6c923d4f74" alt=""><figcaption></figcaption></figure>

<figure><img src="https://370831306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODJXq0uhOJ46oP3YIDsO%2Fuploads%2FDCZAimcMZ4Awu3PuKjRn%2Fimage.png?alt=media&#x26;token=de4a5955-a572-44ea-834c-21f6483a156d" alt=""><figcaption></figcaption></figure>