템플릿과 디자인 고르기
템플릿을 미리 보고 사이트의 색상, 글꼴, 레이아웃 옵션, 로고를 설정해요.
팀 소유자 및 관리자 · 11단계
먼저 필요한 것
- 팀에 사이트 구독이 있어야 해요. 무료 팀의 관리에는 템플릿 대신 사이트 받기가 보여요.
- 팀의 소유자 또는 관리자여야 해요.
단계
1단계: 템플릿 열기
왼쪽 메뉴에서 템플릿 메뉴를 눌러요.
이렇게 보여요: 템플릿이라는 제목의 페이지에 템플릿마다 카드가 하나씩 있어요. 지금 사이트가 쓰는 템플릿에는 사용 중 표시가 있어요. 사이트에 아직 템플릿이 없으면 각 카드에 대신 선택 버튼이 보여요. 누르면 그 템플릿이 첫 번째 팔레트와 함께 적용되고 디자인 페이지가 열려요.
2단계: 템플릿 미리보기
템플릿 카드에서 미리보기 버튼을 눌러요.
이렇게 보여요: 그 템플릿을 적용한 내 사이트가 미리보기라고 적힌 바 아래에 보여요. 팀 관리자만 열 수 있어요. 다 봤으면 관리로 돌아가기 버튼을 눌러요.
3단계: 디자인 열기
템플릿 페이지로 돌아와서 오른쪽 위의 디자인 버튼을 눌러요.
이렇게 보여요: 디자인이라는 제목의 페이지가 열려요. 한쪽에는 양식이, 그 옆에는 내 사이트의 실시간 미리보기가 있어요(좁은 화면에서는 아래에 있어요).
4단계: 팔레트 고르기
팔레트에서 템플릿의 프리셋 하나를 골라요.
이렇게 보여요: 고른 프리셋이 강조 표시되고, 사이트 미리보기가 그 색상으로 바뀌어요. 프리셋은 다섯 가지 색상과 두 글꼴을 한 번에 정해요.
5단계: 색상 바꾸기
색상에서 대표, 강조색, 하이라이트, 배경, 텍스트 칸에
#7dd3fc같은 색상 코드를 입력해요. 옆의 사각형을 눌러 색을 골라도 돼요.이렇게 보여요: 사이트 미리보기가 바뀌고, 팔레트에서 사용자 지정이 강조 표시돼요. 각 색상에는 템플릿 기본값이 표시돼요. 초기화 버튼을 누르면 그 색상이 기본값으로 돌아가요.
6단계: 텍스트와 표면에 색상 따로 지정하기
텍스트와 표면에서 제목, 캡션, 카드, 선, 링크와 라벨, 버튼, 버튼 텍스트 옆의 색상 선택 버튼을 누른 다음, 색상 코드를 입력하거나 옆의 사각형을 눌러요. 처음에는 모두 자동이에요. 자동은 템플릿 방식대로 다섯 가지 색상을 따라가요. 자동 사용 버튼을 누르면 다시 자동으로 돌아가요.
이렇게 보여요: 사이트 미리보기가 바뀌고, 글자가 들어가는 색상 아래에 7.2:1 · 읽기 쉬움 같은 숫자가 보여요. 배경과 카드에 비해 얼마나 잘 보이는지 알려 주는 숫자예요. 4.5:1(제목은 3:1)보다 낮으면 읽기 어려움이라고 나오고, 방문자에게 대신 보일 색상과 읽기 쉽게 만들기 버튼이 보여요. 이 버튼을 누르면 그 색상이 칸에 들어가요.
7단계: 글꼴 고르기
타이포그래피에서 제목 글꼴 또는 본문 글꼴 메뉴를 열고 글꼴을 골라요. 각 글꼴은 그 글꼴 모양으로 표시되고, Heavy display, Condensed, Tech, Clean sans, Serif, Handwritten, Monospace 그룹으로 나뉘어 있어요. 이름을 입력해서 찾을 수도 있어요.
이렇게 보여요: 사이트 미리보기가 그 글꼴로 바뀌어요. 글꼴을 바꿔도 팔레트가 사용자 지정으로 바뀌어요.
8단계: 로고 추가하기
로고에서 워드마크, 정사각형 로고, 파비콘 옆의 이미지 선택 버튼을 눌러요(이미지를 설정한 뒤에는 교체 버튼으로 바뀌어요). 이미지 삽입 창에서 이미지를 고르거나 업로드하고(JPEG, PNG, WebP, AVIF, 최대 5MB) 삽입 버튼을 눌러요. 로고에는 대체 텍스트가 필요 없어요.
- 정사각형 로고는 사이트 내비게이션, 홈 상단, 로스터에 표시돼요.
- 워드마크는 선택 사항이에요. 팀 이름을 이미지로 만든 것으로, 모양은 상관없어요. 설정하면 내비게이션과 홈 상단에서 정사각형 로고와 팀 이름 대신 표시돼요.
- 파비콘은 브라우저 탭에 보이는 작은 아이콘이에요.
로고는 절대 잘리거나 바뀌지 않아요. 모든 이미지가 전체 그대로 표시되고, 투명한 배경은 투명하게 유지돼요. 그래서 정사각형 로고와 파비콘은 정사각형이어야 하고, 최소 256 × 256픽셀이어야 해요. 다른 모양의 이미지는 저장할 때 거부되고, 이미지 크기를 알려 주는 메시지가 나와요. 이 규칙이 생기기 전에 고른 로고는 바꿀 때까지 계속 표시돼요.
이렇게 보여요: 칸 옆에 이미지 이름이 보여요. 프리셋은 로고를 바꾸지 않아요.
9단계: 템플릿 옵션 설정하기
아래쪽 Broadcast 옵션에서 Hero layout 옵션(Image behind the text 또는 Image beside the text)과 Card edges 옵션(Cut corners 또는 Square corners)을 골라요. 다른 템플릿은 여기에 각자의 옵션이 나와요. Neon Grid의 Motion 옵션은 Full motion 또는 Calm(모두 멈춤) 중에서 고르고, Hero glow 옵션은 Bright(홈 페이지 상단이 배경색에서 강조색으로 바뀌어요) 또는 다크(대표 색상과 강조색을 섞은 어두운 회색으로 바뀌어 더 어두워 보여요) 중에서 골라요. Crosshair의 Hero layout 옵션은 Split(왼쪽에 글, 오른쪽에 이미지와 그 위에 다음 경기) 또는 Full-width image 중에서 골라요. Faceoff의 Hero alignment 옵션은 Centered 또는 Left, Home roster 옵션은 Scattered(큰 "Meet the squad" 문구 주위에 선수 카드가 흩어져 있어요) 또는 Grid 중에서 골라요. Clutch의 Hero layout 옵션은 Bento(히어로 옆에 최신 뉴스 패널) 또는 Full width, Corners 옵션은 Rounded 또는 Square 중에서 골라요. Varsity의 배경 옵션은 Pinstripe(모든 페이지 뒤에 옅은 대각선 줄무늬) 또는 기본, Hero size 옵션은 Full(메뉴가 위에 겹쳐진 큰 사진) 또는 Banner(더 낮은 사진) 중에서 골라요. Redline의 Photo tint 옵션은 Duotone(사진이 대표 색상으로 물들어요) 또는 Natural(원래 색상), Panels 옵션은 Offset(사진과 섹션 뒤에 어두운 블록이 놓여요) 또는 Flat 중에서 골라요.
이렇게 보여요: 사이트 미리보기의 레이아웃이 바뀌어요.
10단계: 저장하기
양식 아래쪽의 저장 버튼을 눌러요.
이렇게 보여요: "디자인을 저장했어요". 방문자에게는 아직 보이지 않아요. 저장한 변경 사항은 게시할 때까지 초안에 남아 있어요.
11단계: 사이트 게시하기
왼쪽 메뉴에서 게시 메뉴를 눌러 게시해요. 사이트 게시하기를 참고하세요.
이렇게 보여요: 게시하기 전에는 변경 사항 목록에 디자인이 보이고, 게시한 뒤에는 사이트가 새 모습으로 바뀌어요.
제대로 됐는지 확인하는 방법
- 템플릿 페이지에서 내 템플릿에 사용 중 표시가 있어요.
- 게시한 뒤 사이트에 내 색상, 글꼴, 로고가 잘리지 않고 그대로 보여요.
- 글자가 들어가는 모든 색상에 읽기 쉬움이 표시되거나, 방문자에게 대신 보이는 읽기 쉬운 색조를 받아들였어요.
뭔가 이상한가요?
색상을 바꿨는데 사이트가 그대로예요
저장하면 초안에만 남아요. 메뉴에서 게시를 눌러 게시하세요(11단계).
색상에 "읽기 어려움"이라고 나와요
그 색상의 글자가 배경이나 카드와 충분히 구분되지 않아서 모두가 읽기는 어려워요. 일반 텍스트는 4.5:1, 제목은 3:1이 필요해요. 방문자에게는 읽기 어려운 색상이 절대 보이지 않아요. 사이트에는 대신 가장 가까운 읽기 쉬운 색조가 표시되고, 양식에 그 색조가 나와요. 읽기 쉽게 만들기 버튼을 눌러 그 색조를 쓰거나, 읽기 쉬움이 나올 때까지 직접 색을 고르세요. 자동으로 둔 색상은 묻지 않고 같은 방식으로 조정돼요. 게시할 때도 경고가 나오지만, 게시를 막지는 않아요.
사이트 전체가 한 가지 색이라 읽기 어려워요
텍스트와 표면에서 텍스트 종류마다 색상을 따로 지정하세요(6단계). 예를 들어 제목은 빨간색, 문단의 텍스트는 밝은 회색, 카드는 조금 더 밝은 색으로 하면 패널이 페이지에서 잘 보여요. 페이지의 일부 영역을 다른 색으로 칠하려면(어두운 사이트 안의 밝은 상점, 강조색 띠 등) 사이트 영역별로 색상 지정하기를 참고하세요.
템플릿을 바꾸면 콘텐츠가 삭제되나요?
아니요. 콘텐츠는 템플릿이 아니라 사이트에 속해요. 색상과 글꼴은 새 템플릿이 쓰는 곳에 그대로 옮겨지고, 템플릿 고유 옵션은 기본값으로 돌아가며, 새 템플릿이 표시할 수 없는 섹션은 삭제되지 않고 숨겨져요. 바꾸기 전에 열리는 창에 이 세 가지가 모두 나오고, 취소할 수 있어요. 사이트가 아직 플랫폼 기본 색상과 글꼴이라면(팔레트를 고르거나 색상을 바꾼 적이 없다면) 새 템플릿의 첫 번째 팔레트가 적용되어 템플릿 사진처럼 보여요. 창의 색상 및 글꼴 항목에 이렇게 안내돼요. 템플릿은 모두 7개예요. Broadcast는 경기 당일 느낌이에요. Neon Grid는 검은 네온 스타일로, 히어로 뒤에 움직이는 그리드와 빛나는 그라데이션이 있고, 그 위에 로고가 떠 있으며, 숫자 카운터와 영상 월이 있어요. Crosshair는 검고 기술적인 스타일로, 프레임 패널, 괄호 라벨, 큰 푸터 워드마크, 가운데에 크게 놓인 사진이 특징이에요. Faceoff는 검푸른색과 아이스 시안 스타일로, 모든 경기 카드에서 내 로고와 상대 로고가 마주 보고, 큰 히어로와 거대한 헤드라인 주위에 흩어진 스쿼드가 있어요. Clutch는 밝은 스타일로, 흰색 둥근 카드, 넓은 대문자 제목, 밝은 색 하나를 쓰고, 다음 경기가 히어로에, 넓은 화면에서는 모든 페이지 상단에도 표시돼요. Varsity는 캠퍼스 스타일로, 네이비 띠, 골드 한 가지, 로스터 위의 최고 대회 성적, 일정표 형식의 경기 목록이 있어요. Redline은 거의 검은 바탕에 빨간색 하나를 쓰고, 사진이 대표 색상(기본은 빨간색)으로 물들며, 사각형 버튼과 VS를 사이에 두고 양 팀 로고가 놓인 사진 줄 형식의 경기 목록이 있어요. Clutch의 제목은 Archivo Expanded 글꼴이고, 어떤 템플릿에서든 Heavy display에서 고를 수 있어요. 컴퓨터나 태블릿에서는 Faceoff의 모든 페이지 상단에 있는 Join our Discord 버튼이 소셜에 Discord 링크를 추가했을 때만 보여요(소셜 추가하기). 모든 템플릿은 라이브 방송을 같은 방식으로 보여 줘요. 당일에는 카운트다운, 방송 중에는 홈 페이지 상단에 Twitch 플레이어, 다른 모든 페이지에는 Live 바가 나와요(방송 예약하기).
"페이지를 연 뒤 사이트가 변경됐어요"라고 나와요
다른 관리자가 먼저 저장해서 내 변경 사항은 저장되지 않았어요. 새로고침을 누른 다음 다시 변경하세요.
"이 로고는 … 정사각형 이미지를 업로드하세요"라고 나와요
정사각형 로고와 파비콘은 너비와 높이가 같은 정사각형이어야 하고, 최소 256 × 256픽셀이어야 해요. 로고를 절대 자르지 않기 때문이에요. 메시지에 이미지 크기가 나와요. 정사각형 버전을 만들어(가로로 긴 로고 주위에 투명한 빈 공간을 추가) 업로드하고 다시 저장하세요. 정사각형이 아닌 로고는 워드마크에 넣으세요.
"이 로고는 크기 정보가 없어요"라고 나와요
이미지 크기를 몰라서 정사각형인지 확인할 수 없어요. 다시 업로드하고 새로 올린 이미지를 고른 다음 저장하세요.
입력 칸과 저장 버튼이 회색으로 비활성화돼 있어요
팀 구독이 만료되어 다시 활성화될 때까지 사이트 페이지를 읽기만 할 수 있어요. 구독을 갱신하세요. 결제 관리하기를 참고하세요.
관련 도움말
아직 해결되지 않았나요? 고객 지원 문의를 하거나 support@spawnfront.com로 이메일을 보내 주세요. 지금 있는 페이지와 단계 번호를 알려 주세요.