테마 디자인 가이드
테마에서는 QuizWitz 테마를 만드는 방법을 설명합니다. Adobe Animate로 제작하여 CreateJS 라이브러리로 내보냅니다. 이 페이지는 그 이전 단계인 테마 디자인을 다룹니다.
이 문서는 그래픽 디자이너를 위해 작성되었으며, 디자인과 Animate 제작을 서로 다른 사람이 맡는다고 가정합니다. 지금은 Adobe Animate로 작업하는 디자이너가 드물기 때문에, 보통 디자이너가 아트워크를 전달하고 다른 사람이 테마를 조립합니다. 아트워크가 조립에 쓸 수 있는 형태로 전달되기만 하면 이 방식은 잘 작동합니다. 이 페이지는 그 형태를 설명하며, 디자이너에게 견적을 요청할 때 전달 항목 목록으로도 쓸 수 있습니다.
이 페이지는 네 부분으로 구성됩니다.
- 디자인할 대상 - 테마가 다루는 화면.
- 여덟 개의 프레임과 요소 시트를 스크린샷과 함께 하나씩 설명합니다.
- 디자인 규칙 - 엔진이 사용할 수 있도록 파일을 만드는 방법.
- 전달할 항목 - 소스 파일, 전달 항목, 작업 순서.
색상, 글꼴, 배경만 바꾸고 싶다면 이 모든 것이 필요하지 않습니다 - 대신 Emerald 테마를 커스터마이즈하세요.
여기에 설명된 모든 화면은 client.quizwitz.com/test.html의 테마 테스터에서 샘플 데이터로 직접 실행해 볼 수 있습니다. 테마를 불러오면 테스트 화면 메뉴가 제공됩니다. 첨부 파일이 있거나 없는 문제, 소규모 및 대규모 그룹의 답변 분포, 순위표, 라운드 인트로, 고객 로고가 있거나 없는 접속 화면 등이 있습니다. 주소에 ?theme=emerald를 추가하면 Emerald 테마를 볼 수 있습니다. 테마를 조립하는 사람도 조립하는 동안 같은 페이지로 테마를 확인합니다.
디자인할 대상
QuizWitz 게임은 한 공간에 있는 모두가 동시에 플레이하며, 항상 두 개의 화면이 사용됩니다.
- 게임 화면 - 프로젝터 또는 TV, 1920 × 1080. 문제, 답변, 참가자들의 답변 분포, 순위표. 여러분이 디자인하는 것은 바로 이 화면입니다.
- 답을 입력하는 각 플레이어의 휴대폰. 고정 레이아웃의 웹 페이지이며, 여러분이 배치하는 것이 아니라 색상 목록에 따라 스타일이 적용됩니다.
테마는 게임 화면의 전체 시각적 외관입니다. 배경, 타이포그래피, 색상, 선택지 4개짜리 문제를 보여 주는 방식, 순위표가 쌓이는 방식, 라운드를 알리는 방식이 모두 포함됩니다.
여덟 개의 프레임과 요소 시트
게임에는 수십 가지의 서로 다른 화면 상태가 있지만, 대부분은 같은 레이아웃의 변형입니다. 여러분은 여덟 개의 프레임과 한 장의 요소 시트를 디자인하며, 나머지는 모두 여기에서 파생됩니다. 이것은 편법이 아니라 엔진의 작동 방식입니다. 자체 아트워크가 없는 화면은 범용 프레임을 대신 사용합니다.
시트는 프레임만큼 중요합니다. 범용 프레임을 사용하는 화면도 콘텐츠 영역 안에 패널, 행, 선 같은 구성품이 필요하기 때문입니다.
| # | 프레임 | 함께 적용되는 화면 |
|---|---|---|
| 1 | 범용 프레임 | 자체 아트워크가 없는 13가지 화면 상태 |
| 2 | 접속 화면 | 두 번 그리기: 고객 로고가 있는 버전과 없는 버전 |
| 3 | 대기 화면 | - |
| 4 | 문제 화면 | - |
| 5 | 첨부 파일이 있는 문제 | 전체 화면 첨부 파일, 그리고 문제 사이에 표시되는 첨부 파일 |
| 6 | 정답 화면 | 주관식 문제와 첨부 파일이 있는 문제의 정답 화면 |
| 7 | 순위표와 우승자 | 라운드 사이의 순위표와 최종 우승자 |
| 8 | 라운드 인트로 | 여섯 가지 라운드 카테고리 전체 |
아래 화면은 기존 테마에서 가져온 것입니다. 스크린샷은 각 화면에 어떤 요소가 언제 나타나는지를 보여 줍니다. 스타일이나 레이아웃의 참고 자료가 아닙니다. 이 테마가 문제, 선택지, 타이머를 어디에 두는지는 이 테마만의 결정이며, 여러분의 테마는 완전히 달라도 됩니다.
프레임 1 - 범용 프레임
구성 요소: 배경, 헤더 제목, 그 아래의 빈 콘텐츠 영역. 완성된 구성이 아니라, 나머지 요소가 그 안에 만들어지는 틀입니다.
적용 범위: 13가지 화면 상태 - 라운드 설명, 순위표, 플레이어 소개, 객관식 변형, 긴 문제, Seats 경고, 설정. 각 화면은 요소 시트의 요소로 콘텐츠 영역을 저마다 다르게 채우므로, 프레임은 전혀 다르게 생긴 것들을 담을 수 있어야 합니다. 원한다면 문제 선택 화면과 긴 문제 화면에 별도의 구성을 줄 수 있습니다. 그렇지 않으면 이 프레임을 사용합니다.
같은 프레임 위의 두 가지 게임 순간: 문제 선택 화면과 점수 사다리.
둘 사이에 공통점이 얼마나 적은지 살펴보세요. 선택 화면은 세 개의 행을 테두리가 있는 패널 안에 넣고, 사다리에는 패널이 전혀 없이 얇은 선으로 구분된 행만 있습니다. 둘이 공유하는 것은 배경과 그 위의 헤더 띠입니다 - 그 아래의 모든 것은 개별 화면에 속하며, 여러분이 아니라 게임이 채웁니다.
그 패널과 선은 이 프레임이 아니라 요소 시트에서 옵니다. 이 프레임이 해야 할 일은 그것들을 담는 것입니다. 콘텐츠 영역을 비어 있고, 중립적이며, 넉넉한 공간으로 디자인하여 테두리가 있는 패널, 단순한 목록, 행으로 된 표 모두와 어울리게 하세요. 가운데가 복잡한 배경이나, 바로 아래에 패널이 붙어 있어야만 어울리는 헤더는 이 원칙이 무너지는 지점입니다.
프레임 2 - 접속 화면
구성 요소: 참가자들이 참여하는 데 필요한 모든 것.
- 다섯 줄의 안내 문구
- 엔진이 생성하는 게임 코드와 QR 코드 - QR 코드를 넣을 정사각형 공간을 확보하세요
- 접속한 플레이어 수를 보여 주는 한 줄
- 하나둘 들어오는 플레이어 목록
두 번 그리세요: 게임 코드 옆에 고객 로고가 있는 버전과, 로고 없이 테마 자체 아트워크가 화면을 채우는 버전.
프레임 3 - 대기 화면
구성 요소: 거의 없음 - 퀴즈 자체 로고 또는 테마 아트워크.
접속 화면과는 배경만 공유하므로 독립된 구성으로 디자인하세요. 퀴즈마스터가 문제를 소리 내어 읽는 동안 계속 표시되므로, 게임에서 거의 어떤 화면보다도 오래 노출됩니다. 보통의 빈 화면보다 더 많은 관심을 기울일 가치가 있습니다.
프레임 4 - 문제 화면
구성 요소: 문제, 타이머, 답변 선택지 4개, 피드백 한 줄. 참가자들이 가장 오래 보는 화면입니다. 선택지가 이모지 하나로만 이루어질 수 있다는 점에 유의하세요.
선택지가 없는 문제 - 플레이어는 휴대폰에 답을 입력합니다. 화면이 거의 비어 있고 타이머가 주요 요소가 됩니다.
시간이 다 된 순간입니다. 피드백 말풍선이 화면 위에 나타나고 타이머는 비어 있습니다.
프레임 5 - 첨부 파일이 있는 문제
구성 요소: 프레임 4와 같은 요소를 이미지나 동영상 주위에 배치합니다. 구성이 달라도 됩니다. 첨부 파일은 여러분이 그린 상자 안에 맞게 크기가 조정되므로, 가로 이미지와 세로 이미지 모두 그 안에서 보기 괜찮아야 합니다.
적용 범위: 전체 화면 첨부 파일, 그리고 문제 사이에 표시되는 첨부 파일.
이 예시에서는 선택지가 첨부 파일의 왼쪽과 오른쪽에 있습니다.
화면을 가득 채운 첨부 파일 단독 화면:
프레임 6 - 정답 화면
구성 요소: 어떤 답이 정답이었는지, 참가자들의 답변이 선택지별로 어떻게 분포했는지, 그리고 피드백 한 줄.
적용 범위: 주관식 문제와 첨부 파일이 있는 문제의 정답 화면.
이 화면은 세 단계를 거칩니다. 먼저 아직 아무것도 표시되지 않은 답변 분포가 나옵니다.
그다음 정답 선택지에 체크 표시가, 오답 선택지에 X 표시가 됩니다.
문제에 해설이 있으면 아트워크 위로 말풍선이 내려옵니다. 말풍선을 위한 공간을 남겨 두세요 - 디자인한 것이 무엇이든 그 위에 겹쳐 나타납니다.
소규모 그룹에서는 같은 순간이 차트 대신 점수 목록으로 표시됩니다.
주관식 문제의 경우 차트에 정답을 맞힌 플레이어 수가 표시됩니다.
프레임 7 - 순위표와 우승자
구성 요소: 순위, 아바타, 이름, 점수가 있는 플레이어 목록. 플레이어 행은 별도의 재사용 가능한 요소로 제공하세요. 기본적으로 6번, 최대 10번까지 반복됩니다.
적용 범위: 라운드 사이의 순위표와 최종 우승자.
플레이어 6명의 행이 있는 라운드 종료 후 순위표:
최종 카운트다운은 꼴찌부터 1위까지 한 번에 플레이어 한 명씩 호명합니다 - 순위, 점수, 팀 이름이 주목을 받습니다. 날아다니는 이모지가 가장 많이 나오는 곳도 여기입니다.
프레임 8 - 라운드 인트로
구성 요소: 라운드 카테고리별 짧은 안내. 카테고리는 과학 및 기술, 자연, 엔터테인먼트 및 음악, 스포츠, 예술, 역사의 여섯 가지입니다.
적용 범위: 여섯 카테고리 전체. 하나의 디자인으로 여러 카테고리를 담당해도 됩니다.
이 예시는 하나의 구성에 카테고리별 변형을 준 것입니다.
캐릭터는 선택 사항입니다. 기본 QuizWitz 테마에는 말하고 반응하는 캐릭터가 있지만, Emerald 테마에는 없습니다. 캐릭터를 빼면 가장 비용이 많이 드는 애니메이션 작업(립싱크, 눈, 팔)이 사라집니다.
캐릭터가 없으면 라운드 인트로는 그래픽, 타이포그래피 또는 일러스트로 표현하는 순간이 됩니다. 작업량을 적절하게 유지하는 방법은 두 가지입니다. 카테고리마다 색상이나 아이콘만 바꾼 하나의 구성을 쓰거나, 라운드 이름만 바뀌는 하나의 공통 안내 화면을 쓰는 것입니다. 완전히 다른 인트로 여섯 개는 몇 초의 화면 노출 시간에 비해 작업량이 많습니다.
요소 시트
두 그룹의 요소를 한 장의 시트에 담습니다. 각각 한 번만 그리고 모든 곳에서 재사용합니다.
콘텐츠 구성 요소. 범용 프레임의 콘텐츠 영역을 채웁니다. 범용 프레임을 대신 사용하는 화면은 이 요소들로 조립되므로, 여기에서 그리는 것이 그 모든 화면의 모양을 결정합니다.
- 패널: 채우기, 테두리, 모서리 반경 - 목록이나 텍스트 블록이 들어가는 컨테이너
- 목록 행: 모든 목록의 반복 단위로, 자체 배경이 있거나 없습니다
- 구분선: 패널이 없는 곳에서 행 사이에 들어가는 선
- 레이블과 값 쌍: 왼쪽에는 짧은 레이블, 오른쪽에는 값
컨트롤. 한 번 그려서 모든 화면에서 사용합니다.
- 네 가지 상태의 버튼: 기본, 마우스 오버, 누름, 비활성
- 정답 및 오답 기호
- 스크롤바, 체크박스, 선택 상자
- QuizWitz 로고의 위치
미리 정해져 있는 것
- 플레이어의 휴대폰. 고정된 HTML 레이아웃입니다.
- 엔진이 직접 그리는 몇 가지 요소 - 점수 사다리의 행 사이 선, 문제 선택 화면의 강조된 행, QR 코드. 이 요소들의 색상은 색상 목록에서 가져옵니다.
- 어떤 화면이 범용 프레임을 대신 사용하며, 어떻게 사용하는지.
- 여섯 카테고리를 라운드 인트로 아트워크에 연결하는 방식. 이 연결은 설정 항목이므로 인트로 하나를 여러 카테고리에 재사용할 수 있습니다.
- 모든 타이밍과 애니메이션 길이.
- 사운드. 테마에 자체 음악과 효과음을 넣을 수 있지만, 이는 별도의 전달 항목이며 디자인 의뢰 범위에 포함되지 않습니다.
디자인 규칙
이 규칙들은 시각 디자인을 제한하지 않습니다. 파일을 만드는 방식에 관한 규칙입니다.
형식
- 정확히 1920 × 1080 픽셀. 화면당 프레임 하나.
- 가능하면 벡터로 작업하세요. 래스터(사진, 텍스처)를 사용하는 경우 표시 크기의 최소 2배로 준비하세요.
- Animate 문서는 초당 24프레임으로 실행됩니다. 모션 아이디어를 제공하는 경우에 해당합니다.
- 가장자리에 5% 여백을 두고 그 안에는 중요한 정보를 넣지 마세요. 프로젝터는 화면 가장자리를 잘라냅니다.
레이어 구조 - 가장 중요한 규칙
움직이거나, 나타나거나, 값이 바뀔 수 있는 모든 요소는 이름이 지정된 별도의 레이어에 둡니다. 병합하거나 평면화하지 마세요.
실제로는:
- 답변 선택지 4개는 하나가 아니라 4개의 별도 레이어입니다
- 타이머는 배경과 분리되어 있습니다
- 버튼과 버튼 레이블은 두 개의 요소입니다
- 플레이어 행은 복제할 수 있는 하나의 그룹입니다
병합해도 되는 것: 하나의 정지 이미지로 충분한 순수 장식용 배경 아트워크.
지키지 않으면 정말로 곤란해지는 유일한 규칙입니다 - 그러면 아트워크를 분해하거나 다시 그려야 하는데, 이는 바로 이 방식이 피하고자 하는 비용입니다.
유지되지 않는 효과
엔진은 HTML5 캔버스에 그립니다. 다음 효과는 이미지에 굽거나 빼야 합니다.
| 효과 | 대신 해야 할 일 |
|---|---|
| 필터로 적용한 실시간 흐림, 그림자, 광선 효과 | 아트워크로 제공하세요 |
| 혼합 모드(곱하기, 스크린, 오버레이) | 단색으로 변환하세요 |
| 레이어 효과와 조정 레이어 | 이미지에 구워 넣으세요 |
| 텍스트 내부의 그라데이션, 또는 글자마다 외곽선이 있는 텍스트 | 빼세요 |
| 프레임마다 바뀌는 마스크 | 빼세요 |
도형 안의 그라데이션은 괜찮습니다. 투명도는 괜찮습니다. 고정 아트워크로 된 그림자는 괜찮습니다.
텍스트의 동작 방식
QuizWitz용 디자인이 일반 디자인 작업과 가장 크게 다른 부분입니다.
글꼴 크기를 정하지 않습니다. 상자를 그립니다.
모든 텍스트는 두 가지를 전달받는 컴포넌트가 실시간으로 그립니다. 바로 문자열과 여러분이 그린 사각형입니다. 그런 다음 문자열을 여러 줄로 줄바꿈했을 때 상자 안에 들어가는 가장 큰 글꼴 크기를 찾습니다. 긴 문자열은 맞도록 줄어들고, 짧은 문자열은 상자가 꽉 찰 때까지 커집니다.
세 개의 행, 세 개의 똑같은 상자 - 그리고 오로지 텍스트의 길이 때문에 완전히 다른 세 가지 글꼴 크기. “Where is love”는 높이를 모두 차지하고, 그 위의 문제는 작은 두 줄로 만족해야 합니다. 왼쪽의 레이블도 같은 방식으로 동작합니다.
이로부터 다음과 같은 결과가 나옵니다.
- 같은 문제라도 다른 게임에서는 다르게 보입니다. 여섯 단어짜리 문제는 크게 화면을 채우고, 서른다섯 단어짜리 문제는 정확히 같은 상자 안에서 다섯 줄에 걸쳐 작게 표시됩니다. 두 경우 모두 보기 좋아야 합니다.
- 모든 텍스트 상자를 두 번 디자인하세요. 한 번은 아주 짧은 샘플로, 한 번은 아주 긴 샘플로 채워 보고 두 경우 모두 구성이 유지되는지 확인하세요. 대략적인 기준: 답변 선택지는 한 단어에서 여덟 단어 정도, 문제는 다섯 단어에서 마흔 단어, 플레이어 이름은 2자에서 20자입니다.
- 고정된 줄 수를 기대하지 마세요. “항상 한 줄에 들어가는” 제목은 여기에 존재하지 않습니다.
- 텍스트를 다른 요소와 눈대중으로 정렬하지 마세요. 선이나 도형과 맞춰야 하는 텍스트는 길이가 짧아지거나 길어지는 순간 어긋납니다. 정확한 위치 대신 충분히 넉넉한 상자와 정렬 방식(왼쪽, 가운데, 오른쪽)을 사용하세요.
- 12개 언어. 독일어 합성어는 길고, 헝가리어도 만만치 않습니다. 영어에서 빠듯한 상자는 독일어에서 읽을 수 없을 만큼 작은 크기로 줄어듭니다.
- 텍스트 안에 이모지가 나올 수 있습니다. 플레이어는 팀 이름 옆에 이모지를 하나 고르고, 문제나 선택지에도 이모지가 들어갈 수 있습니다 - 선택지가 이모지 하나뿐인 경우도 있습니다. 이모지는 컬러로 그려지며 주변 글자보다 키가 큽니다.
조립하는 사람이 각 텍스트 상자에 대해 알아야 할 것: 위치, 크기, 정렬 방식, 색상, 글꼴. 몇 포인트 크기인지는 필요하지 않습니다.
이 특성을 활용할 수 있습니다. 짧은 텍스트가 들어간 큰 상자는 그 자체로 강렬한 타이포그래피 구성이 되고, 일부러 좁고 길게 만든 상자는 텍스트를 세로 단으로 만듭니다. 자동 맞춤을 디자인 장치로 활용하세요. 다만 이를 거스르는 디자인은 하지 마세요.
타이머 - 필수이며, 애니메이션입니다
모든 문제 화면에는 타이머가 있습니다. 참가자들이 남은 시간을 볼 수 있어야 합니다.
타이머는 숫자가 줄어드는 카운터가 아니라, 엔진이 재생 헤드를 움직이는 애니메이션입니다. “가득 참”에서 “비어 있음”으로 가는 진행을 디자인하세요 - 줄어드는 막대, 닫히는 원, 모래시계, 짧아지는 선 등. 엔진은 마지막 프레임이 문제 종료 시점과 정확히 일치하는 속도로 이 애니메이션을 재생합니다.
이로부터 다음과 같은 결과가 나옵니다.
- 문제 시간은 고정되어 있지 않습니다. 퀴즈마다 설정되며 보통 20~30초이지만, 더 짧거나 길 수도 있습니다. 애니메이션은 길이에 맞게 늘어나거나 압축됩니다.
- 숫자나 초 단위 눈금은 넣지 마세요. “20, 19, 18...”처럼 세는 타이머는 시간이 바뀌는 순간 맞지 않게 됩니다.
- 마지막 몇 초는 게임에서 가장 긴장되는 순간입니다. 끝으로 갈수록 진행이 더 뚜렷하거나 긴박해지면 도움이 됩니다.
- 공간 맨 뒤에서도 한눈에 읽을 수 있어야 합니다.
- 타이머를 여러 개 사용할 수 있습니다. 각각의 이름이
timer이기만 하면 상단의 막대와 문제 근처의 원형 타이머가 모두 작동합니다.
타이머는 키프레임 시리즈나 진행에 대한 설명으로 제공하세요 - “막대가 오른쪽에서 왼쪽으로 줄어들며 초록색에서 빨간색으로 바뀐다” 정도면 충분합니다.
날아다니는 이모지는 모든 것 위에 겹쳐 나타납니다
모든 플레이어는 참여할 때 이모지를 하나 고르며, 게임은 그 이모지를 화면 곳곳에 날려 보냅니다. 이모지는 엔진이 테마 위의 레이어에 그립니다. 여기서 디자인할 것은 없습니다 - 하지만 이모지는 가끔 나오는 장식이 아니므로, 이를 고려하여 디자인해야 합니다.
이모지는 세 가지 순간에 나타납니다.
- 플레이어가 답할 때. 해당 플레이어의 이모지가 무작위 가로 위치에서 하단 가장자리로부터 솟아올라 호를 그리며 올라갔다가 화면 밖으로 떨어집니다.
- 플레이어가 이모지를 던질 때. 플레이어는 휴대폰에서 이모지를 던질 수 있습니다. 각도와 속도는 스와이프에 따라 정해지며, 하단 가운데에서 회전하며 날아갑니다.
- 최종 카운트다운에서 순위가 공개될 때. 호명된 플레이어의 이모지가 한꺼번에 터져 나옵니다. 일반 순위는 20개, 3위는 50개, 2위는 75개, 그리고 우승자는 150개입니다.
디자인에 미치는 영향:
- 순위표와 우승자 화면의 하단 3분의 1에는 작거나 중요한 요소를 두지 마세요. 카운트다운 동안 그 부분은 정말로 붐빕니다.
- 이모지가 팔레트와 충돌한다고 가정하세요. 유니코드 차트 곳곳에서 온 풀컬러 이모지이며, 어떤 테마도 이를 제어할 수 없습니다. 좁은 색상 범위에서만 조화를 이루는 디자인은 그 몇 초 동안 의도하지 않은 것처럼 보입니다.
- 이미지나 동영상이 표시되는 동안에는 던지기가 억제되므로, 첨부 파일 화면은 깔끔하게 유지됩니다.
- 이 레이어 전체를 게임마다 끌 수 있으므로, 이모지가 있어야만 성립하는 구성도 만들지 마세요.
글꼴
- 글꼴은 임베드할 수 있어야 합니다.
.ttf또는.otf파일과 함께, 애플리케이션 임베드를 허용하는 라이선스가 필요합니다. 웹폰트 전용이나 인쇄 전용으로만 라이선스된 글꼴은 사용할 수 없습니다. 디자인에 사용하기 전에 확인하세요. 나중에 수정하려면 비용이 많이 듭니다. - 어센더나 디센더가 유난히 큰 글꼴은 보정할 수 있지만, 그런 글꼴을 사용한다면 미리 알려 주세요.
색상 목록
테마는 설정 파일에서 색상 목록을 읽으며, 플레이어의 휴대폰도 같은 목록으로 스타일이 지정됩니다. 팔레트는 아트워크 속 색상으로만이 아니라 이름이 붙은 목록으로도 제공하세요.
| 위치 | 색상 |
|---|---|
| 게임 화면 | 메인 색상, 강조 색상, 배경, 패널 또는 컨테이너 색상, 타이머 배경, 기본 텍스트 색상, 헤더 텍스트 색상, 문제 텍스트 색상, 버튼 텍스트, 대화 상자 및 해설 텍스트, 플레이어 이름 및 점수 텍스트, 정답 색상, 오답 색상 |
| 답변 선택지 4개 | 각 선택지마다: 배경 색상, 테두리 색상, 그리고 휴대폰과 차트에 쓰이는 단색 하나 |
| 플레이어의 휴대폰 | 배경, 텍스트 색상, 외곽선 색상, 선택지 외곽선 색상, 답변 컨테이너의 배경 및 텍스트 색상 |
게임 화면에는 그라데이션을 사용할 수 있습니다. 16진수 값 두 개로 지정하세요.
몇몇 색상은 엔진이 직접 그리는 부분을 조정할 수 있는 유일한 수단이므로, 기본값에 맡기기보다 직접 정할 가치가 있습니다.
- 구분선 - 패널이 없는 곳과 점수 사다리에서 행 사이에 들어가는 선
- 문제 선택 화면에서 행의 활성, 비활성, 선택됨 상태
- 대화 상자 텍스트
- QR 코드의 전경과 배경
이 색상을 지정하지 않으면 기본 제공 값 - 흰색, 회색, 빨간색, 검은색, 흰색 - 으로 대체되며, 이는 디자인과 거의 맞지 않습니다.
QuizWitz 로고
맞춤 디자인에는 QuizWitz 로고가 포함됩니다. 디자인에 방해가 되지 않는 곳에 로고 자리를 마련해 두세요.
전달할 항목
소스 파일 - Illustrator 권장
테마는 Adobe Animate로 만들어지며, Animate가 무엇을 가져올 수 있는지에 따라 작업물이 전달 과정에서 얼마나 온전히 유지되는지가 결정됩니다.
| 도구 | 가져올 때 일어나는 일 | 용도 |
|---|---|---|
Adobe Illustrator(.ai) | Animate가 직접 가져와 레이어를 Animate 레이어나 별도의 심볼로 변환하며, 레이어 이름을 유지하고 벡터를 편집 가능한 상태로 둡니다. 바로 이 단계 덕분에 아트워크를 손으로 다시 만들지 않아도 됩니다. | 최종 전달물에 권장 |
| Adobe Photoshop | Illustrator처럼 레이어가 그대로 유지된 채 가져와지지만, 벡터 대신 래스터가 됩니다. | 가능 |
| Figma | 모든 것이 SVG 및 PNG 내보내기를 거치며, 바로 그 과정에서 여기에 필요한 레이어 구조가 사라집니다. Figma를 사용한다면 구조를 손으로 다시 만들 수 있도록 각 요소를 SVG로 따로 제공하고, 파일 이름은 레이어 이름과 일치시키세요. | Figma에서 더 빠르게 작업한다면 콘셉트 단계 |
파일 구조:
- 화면당 아트보드 하나, 이름은 위의 프레임 이름을 따릅니다.
- 재사용되는 부분(버튼, 플레이어 행, 답변 선택지, 타이머)은 흩어진 복사본이 아니라 심볼이나 컴포넌트로 만드세요.
- 레이어 이름은 공백 없이 영어로:
question,option1부터option4,timer,feedback,header,background,playerScore. - 색상은 개체마다 따로 지정하지 말고 이름이 붙은 견본으로, 텍스트는 이름이 붙은 스타일로 정의하세요.
전달 항목 체크리스트
- 위와 같은 구조로 된 소스 파일.
- 각 프레임의 PNG, 1920 × 1080 - 어떻게 보여야 하는지에 대한 참고 자료입니다. 프레임 2는 고객 로고가 있는 버전과 없는 버전 모두.
- 하나의 아트보드로 된 요소 시트: 콘텐츠 구성 요소와 컨트롤.
- 각 그래픽 요소를 2배 크기의 투명 PNG로 따로, 한 폴더에 담고, 파일 이름은 레이어 이름과 일치시킵니다.
- 키프레임 또는 진행에 대한 서면 설명으로 된 타이머.
.ttf또는.otf형식의 글꼴과 라이선스 증빙.- 색상 목록의 색상 목록, 16진수 값으로.
- 반 페이지 분량의 메모: 아이디어가 무엇인지, 선택지가 어떻게 나타나야 하는지, 무엇이 움직이고 무엇이 고정되는지. 열 페이지짜리 디자인 근거는 필요 없습니다 - 테마를 조립하는 사람은 무엇을 만들어야 하는지만 알면 됩니다. 모션 아이디어는 설명으로 전달하거나 대략적인 애니매틱으로 제공해도 됩니다.
작업 순서
- 프레임 4(문제 화면)와 요소 시트를 함께. 나머지보다 먼저 두 가지 모두 승인을 받으세요. 이 둘에 타이머, 선택지, 패널, 모든 컨트롤이 담겨 있으므로 테마 전체의 스타일이 이 둘로 정해집니다.
- 프레임 1~3. 처음 두 가지에서 자연스럽게 이어집니다.
- 프레임 6~8은 마지막에 작업합니다.
부록 - 심볼 이름
완전성을 위해, 그리고 아트워크가 정확히 어디에 쓰이는지 알고 싶은 분을 위해 싣습니다. 작업하는 데 이 내용을 읽을 필요는 없습니다. 위의 여덟 개 프레임과 요소 시트면 충분합니다. 이 이름을 레이어 이름으로 사용하면 변환 단계를 줄일 수 있습니다.
| 프레임 | 심볼 이름 | 필수 요소 |
|---|---|---|
| 1. 범용 프레임 | GeneralPurposeScreen; GeneralPurposeScreenWithHeader(선택 사항) | placeholder(콘텐츠 영역); title 텍스트 상자(선택 사항) |
| 1b. 문제 선택 화면, 긴 문제 | MultiQuestionScreen, LongQuestionScreen; 둘 다 선택 사항이며, 없으면 범용 프레임을 사용 | 선택 화면: questions 플레이스홀더, timer; 긴 문제: question 플레이스홀더 |
| 2. 접속 화면 | PresentationConnectScreen; logo 플레이스홀더가 있는 PresentationConnectScreenWithLogo(선택 사항) | instructions.line1부터 line5, connectedPlayers; 프레임 레이블 showQrCode가 있는 qrCode 플레이스홀더(선택 사항) |
| 3. 대기 화면 | PendingScreen; PendingScreenWithLogo(선택 사항) | header.text |
| 4. 문제 화면 | QuestionScreen | question.text, timer, feedback.text, option1부터 option4, 프레임 레이블 showOptions 및 showFeedback |
| 5. 첨부 파일이 있는 문제 | QuestionScreenAttachment | 위와 동일, attachment.placeholder 추가 |
| 5b. 전체 화면 첨부 파일 | AttachmentScreen | placeholder |
| 6. 정답 화면 | AnswerPieScreen; AnswerPieScreenAttachment(선택 사항) | option1부터 option4, answer.text, feedback.text |
| 6b. 주관식 문제 정답 | AnswerScreen, AnswerOpenQuestionPieScreen; …Attachment 변형(선택 사항) | answer.text, feedback.text, players, piechart |
| 7. 순위표 | WinnerScreen + PlayerScore; WinnerScreen_round, WinnerScreen_game, PlayerScoreNoImage(선택 사항) | header.text, players, feedback.text(playAgain.text는 선택 사항); 행 안에: position, name, score, avatar(선택 사항) |
| 8. 라운드 인트로 | 이름에 상관없이 하나 이상의 심볼; 설정 파일이 여섯 카테고리를 각각 심볼에 연결합니다 | - |
| - | LoadingScreen | text, progress |
| - | Button, Checkbox, Slider, QuestionSelect, Scrollbar, SettingsScreenScrollarea, SymbolCorrect, SymbolWrong, PackListItem | 별도의 아트워크가 필요 없음 - 프레임에 나오는 요소로 만들어집니다 |
| - | IntroScreen, IntroScreenBranded, MenuScreen, SettingsScreen, AlertScreen, ActivityScreen, ActivityVotePieScreen | 데스크톱 앱에서만 표시되며, 라이브 퀴즈에서는 표시되지 않습니다. 디자인 의뢰 범위가 아닙니다. 테마 템플릿에서 가져와 여러분의 배경과 버튼으로 스타일을 다시 적용합니다 |
기본 테마의 라운드 인트로 심볼 이름은 RoundIntroScienceAndTech, RoundIntroFloraAndFauna, RoundIntroTedMusic, RoundIntroTedSport, RoundIntroTedCultHist이며, 예술과 역사는 마지막 심볼을 함께 사용합니다. 이 이름의 “Ted”는 원래 테마의 캐릭터에서 남은 흔적일 뿐이며, 인트로에 캐릭터가 반드시 등장해야 한다는 뜻이 아닙니다.
.text가 뒤에 붙은 모든 요소는 텍스트의 동작 방식에서 설명한 자동 맞춤 텍스트 상자입니다. 즉, 엔진이 직접 채우는 사각형입니다. timer 요소는 자체 타임라인이 있는 무비 클립입니다. 엔진은 프레임 수를 읽고 경과 시간에 비례하여 재생 헤드를 최대 초당 24번 이동합니다.
설정 파일이 디자인에서 가져가는 것
{
"fontFiles": { "<body font>": "fonts/body.ttf", "<heading font>": "fonts/heading.ttf" },
"fonts": { "default": "<body font>", "header": "<heading font>" },
"colors": {
"_accent_": "#…", "_main_": "#…", "_background_": "#…-#…",
"_container_": "#…", "_timerBackground_": "#…",
"default": "#…", "header": "#…", "question": "#…",
"buttons": "#…", "dialog": "#…", "player": "#…",
"_optionColors_": [ { "background": "#…-#…", "border": "#…" } ]
},
"optionColors": [ "#…", "#…", "#…", "#…" ],
"booleanResultColors": { "correct": "#…", "wrong": "#…" },
"remoteColors": {
"background": "#…", "text": "#…", "outline": "#…",
"options-outline": "#…", "container-background": "#…", "container-text": "#…"
},
"roundIntros": { "science": "<symbol>", "nature": "<symbol>", "entertainment": "<symbol>",
"sports": "<symbol>", "art": "<symbol>", "history": "<symbol>" },
"overlay": "light | dark"
}