🖥️ 디자인 레이아웃 설정 안내
⚙️ 설정 경로
- [첫화면 설정] > [사이트 설정] 탭 클릭
- [사이트/SEO 설정] > [디자인 설정] 탭 클릭
🔧 주요 기능
- 레이아웃 관리: 사이트 제작 시 선택한 반응형 또는 모바일 전용 레이아웃을 확인하고 변경할 수 있습니다.
- 화면 모드 설정: 브랜드 아이덴티티에 맞춰 사이트의 **화면 모드(다크/라이트 등)**를 커스텀 설정할 수 있습니다.
🎨 헤더 디자인 설정 가이드
📍 헤더(Header)란?
- 화면 최상단에 고정되는 영역으로, 로고·메뉴·로그인 등 사이트 탐색을 위한 핵심 요소들이 배치됩니다.
🎨 디자인 스타일 및 너비 설정
- 3가지 스타일 제공: 사이트 컨셉에 맞는 최적의 레이아웃을 선택할 수 있습니다.
- 너비 선택: 본문 너비와 동일하게 설정하면 안정적인 통일감을, '넓게' 설정하면 시원하고 개방감 있는 화면을 연출할 수 있습니다. 또한 본문 너비와의 일치 여부에 따라 디자인 통일감을 조절할 수 있습니다.
- 유틸 노출: 로그인, 멤버십, 카트의 아이콘이 설정되어 있으며 해당 설정은 PC와 모바일 공통으로 적용됩니다.
💡 투명 배경 설정 시 유의사항
- 배경을 '투명'으로 설정하면 헤더가 첫 번째 섹션 위로 겹쳐지게 됩니다. 이때 배경 이미지나 색상으로 인해 로고와 메뉴 글자가 보이지 않을 수 있으므로, 대비되는 색상으로 조정하여 가독성을 확보해 주세요.
2-1. 헤더 스타일
✅ 1번 스타일
 |
|
✅ 2번 스타일
 |
|
✅ 3번 스타일
 |
|
2-2. 헤더 정렬
2-3. 헤더 배경
|
✅ 불투명
|
|
|
✅ 투명
 * 투명 배경을 선택할 경우 본문의 높이가 헤더만큼 위로 올라갑니다.
|
|
3-1. 모바일 헤더 스타일
|
✅ 1번 스타일
|
✅ 2번 스타일
|
|
3-2. 모바일 헤더 정렬
|
✅ 왼쪽 정렬
|
✅ 가운데 정렬
|
✅ 오른쪽 정렬
|
3-3. 모바일 헤더 유틸 노출
|
✅ 유틸 노출
|
✅ 멤버십만 노출
|
✅ 유틸 비노출 + 오른쪽 정렬
|
3-4. 모바일 메뉴 스타일
|
✅ 1번 스타일
|
✅ 2번 스타일
|
✅ 3번 스타일
|
🎨 상세 디자인 설정 안내
🛠️ 맞춤형 디자인 구성
사이트의 브랜드 이미지에 맞춰 아래 항목들을 자유롭게 변경할 수 있습니다.
- 서체(Font): 사이트 전체의 분위기를 결정하는 최적의 폰트를 선택하세요.
- 포인트 컬러: 사이트의 핵심 강조 색상을 지정합니다.
- 버튼 스타일: 서비스 컨셉에 어울리는 버튼 디자인을 선택할 수 있습니다.
- 버튼 텍스트 컬러: 버튼 내부 글자 색상을 설정합니다.
⚠️ 색상 조합 주의사항
- 버튼 배경 자동 지정: 시각적 일관성과 가독성을 위해, 설정하신 [포인트 색상]이 버튼의 배경색으로 자동 적용됩니다.
- 가독성 확인: 포인트 색상(버튼 배경)과 버튼 글자 색상이 대비가 잘 되어 글자가 잘 보이는지 반드시 확인해 주세요. (예: 어두운 배경에는 밝은 글자색 권장)
💡 관리자 팁
- 브랜드 컬러 활용: 회사의 로고 색상을 포인트 컬러로 지정하면 브랜드 정체성이 더욱 살아납니다.
- 대비 테스트: 버튼 배경이 노란색이나 하늘색처럼 밝은 경우, 글자색을 검정이나 진한 회색으로 설정해야 가독성이 높아집니다.
