디자인 방향 설정
디자인 방향 설정 단계에서는 테마 빌더가 전체 테마를 생성하기 전에 테마의 시각적 디자인을 검토하고, 다듬고, 최종 확정할 수 있습니다.
개요
디스커버리 인터뷰를 완료하면, 테마 빌더가 데스크톱 및 모바일 미리보기 렌더링을 통해 디자인 방향을 제시합니다. 이를 통해 테마를 확정하기 전에 디자인이 다양한 기기에서 정확히 어떻게 보일지 확인할 수 있습니다.
디자인 방향 구성 요소
1. 색상 팔레트
테마의 색상 구성은 다음을 포함합니다.
- 기본 색상(Primary color) — 버튼, 링크, 강조에 사용되는 주요 브랜드 색상
- 보조 색상(Secondary color) — 다양성을 위한 보완 색상
- 강조 색상(Accent color) — 중요한 요소를 강조하는 색상
- 중성 색상(Neutral colors) — 배경 및 텍스트에 사용되는 회색 및 흰색
- 텍스트 색상(Text color) — 가독성을 위한 주요 텍스트 색상
2. 타이포그래피
다음 항목에 대한 글꼴 선택입니다.
- 제목용 글꼴(Heading font) — 페이지 제목 및 섹션 헤더에 사용
- 본문용 글꼴(Body font) — 단락 텍스트 및 콘텐츠에 사용
- 글꼴 크기(Font sizes) — 다양한 화면 크기에 대한 반응형 크기
- 줄 간격(Line height) — 가독성을 위한 줄 사이의 간격
- 글꼴 두께(Font weights) — 굵게, 보통, 얇게 등 다양한 변화
3. 레이아웃 및 간격
- 컨테이너 너비(Container width) — 콘텐츠의 최대 너비
- 패딩 및 마진(Padding and margins) — 요소 주변의 간격
- 그리드 시스템(Grid system) — 반응형 디자인을 위한 컬럼 레이아웃
- 컴포넌트 간 간격(Component spacing) — UI 요소 간의 거리
4. 시각적 요소
- 버튼 스타일(Button styles) — 기본, 보조, 강조 버튼 디자인
- 카드 디자인(Card designs) — 콘텐츠 블록 레이아웃
- 아이콘(Icons) — 아이콘 스타일 및 크기
- 테두리 및 그림자(Borders and shadows) — 은은한 시각적 깊이
- 호버 효과(Hover effects) — 상호작용 상태 스타일링
미리보기 렌더링
데스크톱 미리보기
데스크톱 미리보기는 전체 너비(일반적으로 1200px 이상)에서 디자인을 보여줍니다.
- 전체 내비게이션 메뉴
- 모든 컬럼을 포함한 완전한 레이아웃
- 큰 타이포그래피와 간격
- 모든 시각적 요소가 전체 크기로 표시됨
모바일 미리보기
모바일 미리보기는 모바일 너비(일반적으로 375px)에서 디자인을 보여줍니다.
- 반응형 내비게이션 (햄버거 메뉴)
- 단일 컬럼 레이아웃
- 조정된 타이포그래피 및 간격
- 터치하기 쉬운 버튼 크기
반응형 브레이크포인트
테마 빌더는 다음 브레이크포인트에서 미리보기를 렌더링합니다.
| 기기 | 너비 | 미리보기 |
|---|---|---|
| 모바일 | 375px | 세로형 휴대폰 |
| 태블릿 | 768px | 가로형 태블릿 |
| 데스크톱 | 1200px | 전체 너비 데스크톱 |
| 대형 데스크톱 | 1920px | 초광대역 디스플레이 |
디자인 다듬기
조정하기
다음 방법을 통해 디자인 방향을 다듬을 수 있습니다.
- 색상 조정 — 팔레트의 모든 색상을 변경합니다.
- 글꼴 변경 — 다른 서체를 선택합니다.
- 간격 수정 — 패딩과 마진을 조정합니다.
- 레이아웃 업데이트 — 컨테이너 너비와 그리드 컬럼을 변경합니다.
- 요소 사용자 정의 — 버튼 스타일, 카드 디자인 등을 수정합니다.
미리보기 업데이트
변경 사항은 실시간으로 반영됩니다.
- 데스크톱 미리보기가 즉시 업데이트됩니다.
- 모바일 미리보기가 즉시 업데이트됩니다.
- 모든 반응형 브레이크포인트가 업데이트됩니다.
- 미리보기 간 전환하며 변경 사항을 확인할 수 있습니다.
비교 보기
다음 항목과 디자인 방향을 비교할 수 있습니다.
- 원본 디자인 — 무엇이 변경되었는지 확인합니다.
- 경쟁사 디자인 — 참고 사이트와 비교합니다.
- 이전 버전 — 이전 디자인 방향으로 되돌립니다.
디자인 방향 승인
디자인에 만족했다면 다음 단계를 따릅니다.
- 두 미리보기 검토 — 데스크톱과 모바일 모두 보기 좋은지 확인합니다.
- 모든 색상 확인 — 대비와 접근성이 확보되었는지 확인합니다.
- 타이포그래피 테스트 — 모든 크기에서 가독성을 확인합니다.
- 레이아웃 확정 — 간격과 정렬을 점검합니다.
- 디자인 승인 — 테마 생성을 진행합니다.
다음 단계
디자인 방향을 승인한 후:
- 테마 빌더가 전체 테마를 생성합니다.
- 테마가 WordPress 사이트에 설치됩니다.
- WordPress 사용자 정의 도구를 사용하여 추가로 사용자 정의할 수 있습니다.
- Hospitality Menus 또는 다른 기능을 진행합니다.
모범 사례
- 실제 기기에서 테스트하기 — 가능하다면 실제 휴대폰과 태블릿을 사용하세요.
- 가독성 확인하기 — 모든 크기에서 텍스트가 읽기 쉬운지 확인합니다.
- 대비 확인하기 — 접근성을 위해 Validate Palette Contrast를 사용하세요.
- 성능 고려하기 — 속도를 위해 이미지와 글꼴을 최적화합니다.
- 콘텐츠 계획하기 — 레이아웃이 실제 콘텐츠와 잘 작동하는지 확인합니다.
문제 해결
미리보기가 업데이트되지 않음
- 페이지를 새로고침합니다.
- 브라우저 캐시를 지웁니다.
- 다른 브라우저를 사용해 봅니다.
- 인터넷 연결을 확인합니다.
색상이 다르게 보임
- 모니터 색상 설정을 확인합니다.
- 다른 기기에서 테스트해 봅니다.
- 접근성 도구로 색상 대비를 확인합니다.
- 색맹 시뮬레이터를 고려해 봅니다.
타이포그래피 문제
- 글꼴 파일이 로드되는지 확인합니다.
- 다양한 브레이크포인트에서 글꼴 크기를 확인합니다.
- 실제 콘텐츠로 테스트합니다.
- 가독성을 위해 줄 길이를 고려합니다.
관련 문서
- Discovery Interview — 디자인 정보 수집
- Hospitality Menus — 구조화된 메뉴 페이지 생성
- Validate Palette Contrast — 색상 접근성 확인
- Generate Logo SVG — 사용자 지정 로고 생성