홈페이지 디자인 가이드

홈페이지를 이용해주시고 계시는 분들 모두 감사드립니다!

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

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

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

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

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

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

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

기준 브라우저

최신 chrome / 데스크톱

모든 이미지 기본 해상도 / 확장자

72dpi / .webp

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

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

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

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

[1] 기본 레이아웃 조합

[2] 전체 배경 이미지

[3] 로고 이미지

[4] 메뉴 이미지

[5] [옵션] 배너 이미지 & 보더 이미지

[6] [옵션] 슬라이드 이미지 / 메인 이미지

[7] [옵션] 홈페이지 메타태그 이미지

[8] [옵션] 파비콘

[9] [옵션] <포토카드형> 진영 이미지 & 프로필 내용 상세 이미지

#1

기본 레이아웃 조합

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

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

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

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

상단 형 레이아웃 + 메인 홈 3단 카드형

블로그 형 레이아웃 + 메인 홈 슬라이드형

미니메모 형 레이아웃 + 메인 홈 3단 카드형

#2

전체 배경 이미지

가로 3840 * 세로 2160 / 72dpi .webp (사이즈가 크므로 해상도 및 확장자 강력권장)

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

#3

로고 이미지

1) 메뉴에 나타나는 대표 로고

사이즈 자유 메뉴디자인과 조화로울 수 있습니다.

2) 메인 홈에 부분적으로 보이는 이미지 로고

사이즈 자유 메인 홈 디자인과 조화로울 수 있습니다.

#4

메뉴 이미지

최대 가로 220 * 세로 80 (일반 텍스트로 교체 가능)

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

참고 이미지는 현선생님 커미션 @hyunmission 께서 제공해주셨습니다.

#5

[옵션] 배너 이미지 & 보더 이미지

배너 이미지

사이즈 자유 / 대중적 크기 가로 200 * 세로 40

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

보더 이미지

사이즈 자유 / 대중적 크기 가로 90 * 세로 90

#6

[옵션] 슬라이드 이미지 / 메인 이미지

메인 홈 레이아웃 중

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

⛳️ 각 이미지의 위치는 가장 상단의 '기본 레이아웃 조합' 이미지 참고해주세요

1. 자유 보드형

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

1. 슬라이드형

최대 가로 920 * 세로 310 (브라우저 사이즈에 따라 상이할 수 있습니다.)

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

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

🔗 슬라이드 최적 사이즈 확인 방법 >

1. 3단 카드형

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

1. 커스텀형

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

#7

[옵션] 홈페이지 메타태그 이미지

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

#8

[옵션] 파비콘

파비콘이란, 브라우저 타이틀과 함께 표시되는 작은 아이콘 입니다. 권장 가로 32 * 세로 32 / .png

#9

[옵션] <포토카드형> 진영 이미지 & 프로필 내용 상세 이미지

[홈페이지 설정] - [게시판별 기능] - [포토카드형 일괄 설정]

포토카드형 게시판의 진영 이미지 입니다.

권장 사이즈 200*200

포토카드형 게시판의 캐릭터 상세 내용 관리란 입니다.

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

사이즈 자유