색상, 글꼴, 레이아웃 설정하기

사이트 디자인 탭에서 스토어의 색상, 서체, 글자 크기, 모서리 둥글기를 한 번만 설정하면 모든 페이지에 한꺼번에 적용됩니다.

사이트 디자인에는 스토어 전체를 하나의 브랜드처럼 보이게 하는 설정, 즉 색상, 서체, 글자 크기, 모서리 둥글기가 모여 있습니다. 각 항목을 한 번만 설정하면 모든 페이지가 그에 따릅니다. 원하는 경우 개별 블록에서 이 설정을 덮어쓸 수도 있습니다.

사이트 디자인 열기

에디터를 엽니다. 에디터 한눈에 보기를 참고하세요.
오른쪽 설정 패널에서 사이트 디자인 탭을 클릭합니다.
제목을 클릭해 엽니다. 아이덴티티, 색상, 타이포그래피, 레이아웃 중에서 선택할 수 있습니다.

변경 내용은 페이지에 바로 표시되고 자동으로 저장됩니다. 게시한 스토어는 게시할 때 변경됩니다.

색상

색상을 열면 모든 페이지의 바탕이 되는 일곱 가지 색상이 보입니다.

강조색: 스토어의 대표 색상입니다. 버튼과 링크에 사용됩니다.
강조색 위 텍스트: 버튼 라벨처럼 강조색 위에 놓이는 글자의 색상입니다.
페이지 배경: 페이지 뒤쪽의 색상입니다.
표면: 상품 카드나 양식 상자 같은 카드와 패널의 색상입니다.
텍스트: 제목과 그 밖의 주요 텍스트의 색상입니다.
보조 텍스트: 본문 단락, 설명, 작은 글씨에 사용하는 더 차분한 색상입니다.
테두리: 가는 선과 윤곽선의 색상입니다.

색상 선택하기

색상 상자를 클릭합니다.
열리는 선택기에서 다음 중 원하는 방법을 사용합니다.
- 큰 사각형을 클릭하거나 드래그해 색의 밝기와 선명도를 정하고, 그 아래 띠를 드래그해 색 자체를 바꿉니다.
- 입력란에 #2B2622와 같은 헥스 코드를 입력하거나 붙여넣습니다.
- 테마 색상 아래의 색상 견본을 클릭해 이미 사용 중인 색을 다시 쓰거나, 최근 사용 아래의 견본을 클릭해 최근에 고른 색을 사용합니다.
선택기 바깥을 클릭하거나 Esc 키를 눌러 닫습니다.

텍스트가 읽기 쉬운지 확인하기

일곱 가지 색상 아래에서 Payly는 각 텍스트 색상이 그 뒤의 색상 위에서 읽기 쉬운지 확인합니다. 문제가 없으면 모든 색상 조합이 읽기 편합니다라고 표시됩니다. 너무 흐린 조합이 있으면 목록에 해당 조합의 이름, 대비율, 필요한 대비율이 표시되고, 텍스트 색상을 대신 조정해 주는 수정 버튼이 나타납니다.

페이지 위의 보조 텍스트와 카드 위의 보조 텍스트가 각각 대비율과 수정 버튼과 함께 나열된 대비 경고

Payly는 대비가 낮은 조합을 선택하는 것을 막지 않지만, 밝은 배경 위의 연한 회색 글자는 특히 햇빛 아래의 휴대폰에서 읽기 어렵습니다.

타이포그래피

타이포그래피를 열어 글꼴과 글자 크기를 선택합니다.

본문 서체: 단락, 메뉴, 버튼에 사용하는 글꼴입니다.
기본 글자 크기: 일반 텍스트의 크기입니다.
본문 줄 간격: 텍스트 줄 사이의 간격입니다. 숫자가 클수록 간격이 넓어집니다.
제목 서체: 제목에 사용하는 글꼴입니다. 사이트 서체 사용을 선택하면 제목에도 본문 글꼴이 적용됩니다.
제목 크기: 모든 제목을 백분율로 더 크게 또는 더 작게 만듭니다.
제목 굵기: 제목이 얼마나 굵은지를 정합니다.
제목 자간: 제목 글자 사이의 간격을 좁히거나 넓힙니다.

서체 선택하기

본문 서체 또는 제목 서체 상자를 클릭합니다.
각 이름이 해당 글꼴로 표시되는 목록을 스크롤합니다. 맨 위의 추천 그룹에는 대부분의 스토어에 어울리는 글꼴이 있습니다.
이름으로 글꼴을 찾으려면 서체 검색…에 입력합니다.
사용할 글꼴을 클릭합니다.

목록에는 Google Fonts 라이브러리 전체가 들어 있습니다. 사용하는 글꼴은 게시할 때 스토어에 포함됩니다. 목록에 없는 글꼴이 있다면 검색창에 Google Fonts에 등록된 정확한 이름을 입력하고 그래도 사용에서 선택하세요.

레이아웃

레이아웃을 열면 두 가지 설정이 있습니다.

모서리 둥글기는 버튼, 카드, 이미지의 모서리가 얼마나 둥글지를 정합니다. 0으로 맞추면 각진 모서리가 되고 오른쪽으로 갈수록 부드러워집니다. 자체 모서리 둥글기가 자동인 블록은 이 설정을 따릅니다.
텍스트 방향은 대부분의 언어에서 왼쪽에서 오른쪽입니다. 오른쪽에서 왼쪽을 선택하면 아랍어, 히브리어, 페르시아어, 우르두어를 위해 전체 레이아웃이 좌우로 뒤집힙니다.

아이덴티티

아이덴티티를 열어 브라우저 탭에 표시되는 작은 그림인 브라우저 아이콘을 설정합니다. 약 16픽셀 크기로 표시되므로 전체 로고보다는 단순한 마크를 사용하세요. 이미지 추가 및 미디어 라이브러리 사용에 설명된 대로 이미지 업로드 또는 업로드한 이미지 보기를 클릭합니다. 비워 두면 로고가 사용됩니다.

로고 설정은 여기에 없습니다. 로고는 표시되는 위치인 헤더에서 설정합니다. 헤더와 푸터 사용자 지정하기를 참고하세요.

블록 하나만 변경하기

모든 텍스트 블록, 제목, 버튼은 사이트의 서체, 크기, 색상을 덮어쓸 수 있습니다. 블록을 선택하고 타이포그래피 또는 모양 그룹을 엽니다. 텍스트, 제목, 버튼 편집하기를 참고하세요.

팁: 완전히 다른 분위기를 원한다면 준비된 디자인 중 하나에서 처음부터 다시 시작할 수 있습니다. 다른 사이트 디자인으로 변경하기를 참고하세요.