디자인 방향 설정

디자인 방향 설정 단계에서는 테마 빌더가 전체 테마를 생성하기 전에 테마의 시각적 디자인을 검토하고, 다듬고, 최종 확정할 수 있습니다.

개요

디스커버리 인터뷰를 완료하면, 테마 빌더가 데스크톱 및 모바일 미리보기 렌더링을 통해 디자인 방향을 제시합니다. 이를 통해 테마를 확정하기 전에 디자인이 다양한 기기에서 정확히 어떻게 보일지 확인할 수 있습니다.

디자인 방향 구성 요소

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를 사용하세요.
성능 고려하기 — 속도를 위해 이미지와 글꼴을 최적화합니다.
콘텐츠 계획하기 — 레이아웃이 실제 콘텐츠와 잘 작동하는지 확인합니다.

문제 해결

미리보기가 업데이트되지 않음

페이지를 새로고침합니다.
브라우저 캐시를 지웁니다.
다른 브라우저를 사용해 봅니다.
인터넷 연결을 확인합니다.

색상이 다르게 보임

모니터 색상 설정을 확인합니다.
다른 기기에서 테스트해 봅니다.
접근성 도구로 색상 대비를 확인합니다.
색맹 시뮬레이터를 고려해 봅니다.

타이포그래피 문제

글꼴 파일이 로드되는지 확인합니다.
다양한 브레이크포인트에서 글꼴 크기를 확인합니다.
실제 콘텐츠로 테스트합니다.
가독성을 위해 줄 길이를 고려합니다.

개요​

디자인 방향 구성 요소​

1. 색상 팔레트​

2. 타이포그래피​

3. 레이아웃 및 간격​

4. 시각적 요소​

미리보기 렌더링​

데스크톱 미리보기​

모바일 미리보기​

반응형 브레이크포인트​

디자인 다듬기​

조정하기​

미리보기 업데이트​

비교 보기​

디자인 방향 승인​

다음 단계​

모범 사례​

문제 해결​

미리보기가 업데이트되지 않음​

색상이 다르게 보임​

타이포그래피 문제​

관련 문서​

개요