# 런타임 스킨

스킨은 실행 시 스켈레톤이 사용하는 어태치먼트를 제어하는 데 사용됩니다. [스킨](/spine-api-reference#Skin)은 키에 슬롯과 이름이 있는 맵인데 값은 어태치먼트입니다. 이름은 Spine 편집기에 정의된 스킨 플레이스홀더 이름이며 반드시 어태치먼트의 이름일 필요는 없습니다. 이를 통해 코드 및 애니메이션은 특정 어태치먼트를 참조할 필요 없이 스킨 플레이스홀더 이름별로 어태치먼트를 설정할 수 있습니다.

예를 들어, 스킨에는 `slot=head,name=head` 키 및 `attachment=fish-head` 해당 키의 값을 가질 수 있습니다. 다른 스킨은 동일한 `slot=head,name=head` 키 및 `attachment=donkey-head` 값을 가질 수 있습니다. 스킨은 코드와 애니메이션을 실제로 사용되는 어태치먼트에서 분리합니다. 코드와 애니메이션은 `head` 이름을 사용하여 어태치먼트를 변경하지만 헤드에 표시되는 어태치먼트는 스켈레톤의 현재 스킨에 따라 다릅니다.

스켈레톤 데이터에 정의된 모든 어태치먼트는 스킨에 배치됩니다. Spine 편집기의 스킨에 없는 어태치먼트는 실행 시 'default`라는 이름의 스킨에 표시됩니다. 여기서 스킨의 이름은 어태치먼트의 이름과 동일합니다. `getAttachment` 스켈레톤이 어태치먼트를 이름으로 찾아야 할 때, 먼저 스켈레톤의 현재 스킨을 찾습니다. 어태치먼트가 없으면 SkeletonData의 기본 스킨을 찾습니다.

# 사용자 지정

스켈레톤은 Spine 편집기에 정의된 스킨에 의해 제한되지 않습니다. 실행 시 새로운 빈 스킨을 만들고 어태치먼트로 채울 수 있습니다. 예를 들어, 개 머리 또는 뱀 머리를 가질 수 있는 스켈레톤과 깃털 날개 또는 불타는 날개를 가질 수 있는 스켈레톤을 생각해보십시오. 특히 더 많은 것이 추가됨에 따라 머리와 날개의 모든 결합을 위해 스킨을 만드는 것은 따분해질 것입니다. 대신 원하는 머리, 날개 및 기타 어태치먼트를 사용하여 프로그래밍 방식으로 스킨을 만들 수 있습니다.

# 어태치먼트 분류

스킨의 기본 용도는 디커플링이지만 어태치먼트를 단순히 분류하는 경우에도 유용합니다. 가장 일반적으로 스킨은 스켈레톤의 전체 모양을 바꾸는 데 사용됩니다.

스킨을 사용하여 어태치먼트의 하위 집합을 분류할 수도 있습니다. 예를 들어, 때로는 캐릭터가 갖추어야 할 "항목"이 실제로 여러 어태치먼트로 구성됩니다. 셔츠는 몸통 어태치먼트와 각 소매에 2개 이상의 어태치먼트로 구성될 수 있습니다. 이 경우 3개의 셔츠 어태치먼트가 포함된 스킨을 만들 수 있습니다.

실행 시 스켈레톤은 하나의 스킨(대안으로 SkeletonData의 "기본" 스킨 추가)만 가질 수 있습니다. 프로그래밍 방식으로 스킨을 만든 다음 다른 스킨의 어태치먼트로 채울 수 있습니다. 이 방법으로 여러 개의 "항목" 스킨을 결합하여 스켈레톤을 구성할 수 있습니다. 앞으로 API는 스킨을 결합하는 편리한 메서드를 제공할 것이지만 지금은 수동으로 수행할 수 있습니다.

Spine 편집기에서는 현재 한 번에 하나의 스킨만 표시할 수 있으므로 어태치먼트를 여러 스킨으로 분류할 때 스켈레톤을 보기가 어려울 수 있습니다. 앞으로 편집기에서 여러 스킨을 한 번에 보여줄 수 있는 방법을 제공할 것입니다.

# 스킨 변경

새 스킨이 설정되고 이미 스켈레톤에 스킨이 없는 경우 설정 포즈에서 볼 수 있는 스킨의 어태치먼트가 첨부됩니다. 

새 스킨이 설정되고 이미 스켈레톤에 스킨이 있는 경우 첨부된 이전 스킨의 어태치먼트가 슬롯에 있더라도 새 스킨의 어태치먼트가 첨부됩니다. 그렇지 않으면 어태치먼트가 변경되지 않습니다.

모든 어태치먼트가 활성 스킨 설정을 반영하도록 하려면 어태치먼트에 영향을 미치는 모든 시스템에 슬롯을 다시 설정하라는 메시지가 필요합니다.
```
skeleton.setSkin(newSkin); // 1. 활성 스킨 설정
skeleton.setSlotsToSetupPose(); // 2. 설정 포즈를 사용하여 기본 어태치먼트를 설정하십시오.
animationState.apply(skeleton); // 3. AnimationState를 사용하여 현재 움직임에서 활성 어태치먼트를 설정하십시오.
// 4. 수동으로 변경된 어태치먼트를 설정하십시오.
```

animationState.apply가 해당 프레임에서 호출되기 전에 스킨이 설정되면 `animationState.apply`에 대한 호출은 생략될 수 있습니다.

다른 동작을 실행하려면 스킨을 변경한 후 원하는 어태치먼트를 설정해야 합니다.

# 어태치먼트 만들기

실행 시 스킨을 만드는 것과 마찬가지로 프로그래밍 방식으로 어태치먼트를 만들 수도 있습니다. 이렇게 하면 어태치먼트가 많은 경우 유용할 수 있으며, Spine에서 수동으로 만드는 것은 따분해질 수 있습니다.

Spine에서 어태치먼트는 상위 뼈대를 기준으로 배치됩니다. 프로그래밍 방식으로 어태치먼트를 만들 때 어태치먼트를 배치할 위치를 알아보려면 일부 규칙이 필요합니다. 주된 문제는 이미지의 크기가 다를 때 위치를 다르게 해야 한다는 것입니다.

이를 해결하기 위해, 모든 다른 어태치먼트에 대한 아트를 수용할 수 있는 공백이 충분한 템플릿 이미지로 스켈레톤을 구성할 수 있습니다. 이제 템플릿 이미지에서 원하는 수의 어태치먼트 이미지를 만들 수 있지만 Spine의 스켈레톤에 추가할 필요가 없습니다. 실행 시 템플릿 이미지의 어태치먼트를 복사한 다음 텍스처 영역을 변경할 수 있습니다. 모든 이미지는 해당 템플릿 이미지와 동일한 크기이기 때문에 동일한 위치의 뼈대에 부착됩니다.

템플릿 이미지에 뼈대 위치를 표시하도록 아트를 만드는 데 유용합니다. 또한 어태치먼트 이미지의 추가 공백은 텍스처 패커 또는 유사한 프로세스에 의해 제거될 수 있습니다.

[다음: API 참조](/spine-api-reference)
[이전: 런타임 스켈레톤](/spine-runtime-skeletons)
[Spine 런타임 가이드: 목차]