---
type: how-to
title: 게임의 스킨 맞춤화하기
summary: 스킨 탭에서 게임의 색상과 시각 자산을 모드(라이트, 다크, 또는 둘 다)별로 묶어 재정의하세요; Alpha 요금제 이상에서 쓸 수 있습니다.
---

게임은 기본 외형으로 출시됩니다. 게임 편집기의 **스킨** 탭에서 당신은 그 색상을 재정의하고, 시각 자산(이미지, 그리고 게임이 그것들을 쓰는 곳에서는 오디오와 비디오)을 바꾸고, 작성자가 노출한 비색상 손잡이(토글, 숫자, 선택)를 설정해 챌린지가 당신의 브랜드에 맞게 할 수 있으며, 그 변경이 렌더링된 게임에 적용됩니다.

스킨 맞춤화는 **Alpha 요금제 이상**(Alpha, Troop, Apex)에서 쓸 수 있습니다.

## 색상, 자산, 그 밖의 손잡이 설정하기

사이트 키(또는 팀)의 **게임** 페이지에서 게임을 열고, 그다음 **스킨** 탭을 여세요. 탭은 게임 작성자가 노출한 슬롯을 보여 줍니다. 대부분은 색상과 자산이지만, 작성자는 **토글**(켜짐/꺼짐), **숫자**(흔히 최솟값과 최댓값과 함께), 또는 고정 목록에서의 **선택**도 노출할 수 있습니다. 색상은 hex나 `rgb()` 값으로 설정하고; 자산은 파일을 업로드하거나 URL을 붙여넣어 설정하고(아래 참고); 그 밖의 슬롯은 보이는 컨트롤로 설정하세요. 슬롯을 손대지 않은 채 두면 게임의 번들 값을 유지합니다.

## 런타임에 스킨이 고르는 방식

각 프리셋은 자기가 동작하는 **모드**를 선언합니다: 라이트, 다크, 또는 **any**(둘 다의 배경에서 잘 읽힙니다). 모드당 하나의 기본값이 있으니, 방문자의 기기가 어느 모드를 선호하든 게임이 올바르게 보입니다. `any`로 표시된 프리셋은 라이트, 다크, 또는 둘 다의 기본값이 될 자격이 있습니다. 하나를 고르는 일은 두 단계로 일어납니다.

먼저 위젯이 어떤 스킨을 요청할지 정합니다:

1. 페이지가 설정했다면, 위젯의 `skin` 속성: 정확한 프리셋 이름(예를 들어 `midnight`), 또는 단축 `light` / `dark`.
2. 아니면, 방문자의 시스템 선호(`prefers-color-scheme`), 그것은 `light`나 `dark`로 해소됩니다.

그다음 서버가 당신의 재정의를 병합한 뒤(사이트 키가 팀 위, 팀이 게임의 번들 묶음 위) 그것을 프리셋에 맞춥니다. 속성의 정확한 프리셋 이름이 단번에 이깁니다. 아니면, 고른 모드에 대해 서버는 선언 순서로, 그 모드에 자격이 있고 **기본값**으로 표시된 첫 프리셋을 취합니다(프리셋은 그 모드가 해당 모드이거나 `any`일 때 자격이 있습니다); 아무것도 기본값으로 표시되지 않으면 자격 있는 첫 프리셋을 취합니다.

`any` 프리셋은 두 모드 모두에 자격이 있으니, 한 스킨을 어디서나 기본값으로 만들거나, 한 모드에 전용 스킨을 주고 `any` 스킨이 다른 모드를 덮게 할 수 있습니다. 스킨 탭에서 `any` 스킨은 라이트와 다크 그룹 둘 다 아래에 나타나며, 당신은 그것을 둘 중 하나나 둘 다의 기본값으로 설정합니다.

`<caputchin-game>` 요소에서는 인라인 `skin` 객체도 넘길 수 있습니다: 속성 값으로 쓰인 JSON 객체, 예를 들어 `skin='{"primary":"#7c3aed"}'`. 위젯은 그것을 그 마운트의 스킨 신호로 서버에 보내고, 서버는 그것을 파싱해 해소된 프리셋 위에 층으로 얹으니, 당신의 인라인 색상과 자산이 위 모든 것(당신의 팀과 사이트 키 재정의 포함)을 이깁니다. 그것은 당신 자신의 마크업의 속성이라, 어떤 요금제에서든 동작합니다. 체크박스 `<caputchin-widget>`은 인라인 스킨을 받지 않습니다; 그 `skin` 속성은 `light` / `dark`나 프리셋 이름만 받습니다. 이 임베드별 작성이 왜 무료인지는 [우리의 철학](/docs/understanding-caputchin/philosophy)을 보세요.

## 자산: 업로드 또는 링크

자산 슬롯(이미지, 오디오, 또는 비디오)은 업로드된 파일이나 당신이 붙여넣는 URL을 받습니다:

- **업로드**: Caputchin이 파일의 스냅샷을 저장합니다. 그것은 고정되어 있으니, 당신이 다시 업로드하지 않는 한 바뀌지 않습니다.
- **링크**: 당신이 호스팅하는 파일에 `https` URL을 붙여넣습니다. 그것은 라이브이니, 그 URL의 파일을 교체하면 다음 로드 때 게임이 갱신됩니다.

게임은 샌드박스된 프레임에서 도니, 링크된 자산은 그 오리진이 허용될 때만 로드됩니다. Caputchin이 그것을 당신을 위해 처리합니다: 당신의 스킨 프리셋이 가리키는 오리진만 정확히 허용하고, 그 밖에는 아무것도 허용하지 않습니다. 당신은 어떤 정책도 직접 바꾸지 않습니다.

각 자산 타입은 고정된 포맷 묶음을 받습니다(예를 들어 이미지에는 PNG, JPEG, WebP, SVG, GIF). 정확한 포맷과 색상 규칙은 [스키마 레퍼런스](/docs/references/customization-schema)에 있습니다.

## 무엇이 적용되고, 어디서

스킨 재정의는 서버에서 가장 구체적인 것이 이깁니다로 해소됩니다: 사이트 키 프리셋이 팀 프리셋을 이기고, 팀 프리셋이 게임의 번들 스킨을 이깁니다. 번들 프리셋을 확장해 원하는 슬롯만 재정의하고 나머지는 물려받을 수 있습니다.

## 스킨 값이 게임에 닿는 방식 [#how-a-skin-value-reaches-the-game]

서버는 당신의 스킨(번들 묶음 위에 병합된 당신의 재정의)을 해소해 그 결과를 **게임 자체의 코드**에 건네고, 그것이 그것으로 자기를 그립니다. 색상과 자산 URL은 텍스트로 도착하고; 토글은 진짜 `true` / `false`로, 숫자는 진짜 숫자로, 선택은 고른 문자열로 도착합니다. 각 값이 어떻게 쓰이는지는 게임 작성자가 정하니, 슬롯이 실제로 무엇을 바꾸는지는 게임에 달렸습니다. 당신은 게임을 위한 어떤 CSS도 쓰지 않습니다: 그것은 당신의 페이지에서 스타일을 줄 수 없는 샌드박스된 프레임에서 돕니다.

**위젯 셸**(게임을 둘러싼 Caputchin 크롬, 그리고 독립 체크박스)은 다릅니다: 그 해소된 스킨은 `--cpt-skin-<token>`이라는 CSS 커스텀 속성으로 당신의 페이지에도 노출되며, 당신은 자신의 스타일시트에서 그것을 읽거나 재정의할 수 있습니다. 그 표면, 그리고 셸을 화이트라벨링하는 법은 [CSS로 위젯 스타일링하기](/docs/widget-customization/css-parts)에서 다룹니다. 그 변수들은 셸의 것뿐입니다; 그것들은 게임의 스킨을 지니지 않습니다.

## 함께 보기

- [게임 맞춤화 개요](/docs/game-customization/overview): 게임을 등록하고 관리하기.
- [구성](/docs/game-customization/configurations)과 [언어](/docs/game-customization/locale): 다른 두 축.
- [스키마 레퍼런스](/docs/references/customization-schema): 색상 규칙, 자산 포맷, 그리고 프리셋 모델.
- [CSS로 위젯 스타일링하기](/docs/widget-customization/css-parts): 셸의 `--cpt-skin-*` 변수와 섀도 파트.