Fitzpatrick 척도로 JavaScript 이모티콘 정렬 디코딩

JavaScript에서 배열 정렬을 생각할 때 일반적으로 문자열, 숫자, 객체까지 오름차순이나 내림차순으로 구성되어 있다고 상상합니다. 하지만 배열의 요소가 이모티콘이면 어떻게 될까요? 특히 피부색 수정자가 작용할 때 대답은 당신을 놀라게 할 것입니다!

이 블로그에서는 JavaScript가 이모티콘 정렬을 처리하는 방법을 자세히 알아보고, 이 동작에 영향을 미치는 Fitzpatrick 규모를 살펴보고, 그 과정에서 몇 가지 기발한 예를 선보일 것입니다.

---

예

스크린샷의 코드 조각부터 시작해 보겠습니다.

["??", "??", "??", "??", "??"].sort();

이 코드를 실행하면 다음과 같은 출력이 생성됩니다.

["??", "??", "??", "??", "??"]

얼핏 보면 무슨 일이 일어난 걸까?라는 생각이 들 수도 있습니다. 이모티콘은 '밝은 순서'로 정렬되어 있습니다. 왜 이런 일이 발생하는지 이해하려면 JavaScript와 유니코드의 내부를 들여다볼 필요가 있습니다.

---

정말 무슨 일이 일어나고 있는 걸까요?

1. 이모지 작동 방식

모든 이모티콘은 고유한 유니코드 코드 포인트로 표시됩니다. 예:

• ? U 1F469로 대표됩니다.
• ? (피부색 수정자)는 U 1F3FF로 표시됩니다.

"??" 같은 이모티콘이 나올 때 표시되지만 실제로는 두 개의 유니코드 문자의 조합입니다.

• 기본 이모티콘(?).
• 피부톤 보정(?).

2. JavaScript로 정렬

JavaScript의 .sort() 메서드는 배열 요소의 유니코드 값을 비교하여 기본적으로 문자열로 처리하는 방식으로 작동합니다. 즉, 이모티콘의 정렬 순서는 기본 유니코드 값에 따라 결정됩니다.

3. 피츠패트릭 스케일

Fitzpatrick 척도는 인간의 피부색을 유형 I(가장 밝은)부터 유형 VI(가장 어두운)까지 분류하는 시스템입니다. 유니코드는 이모티콘에 피부색의 다양성을 도입하기 위해 이 척도를 채택했습니다. 수정자가 Fitzpatrick 척도에 해당하는 방식은 다음과 같습니다.

• ? (유형 I): 밝음
• ? (유형 II): 경량-중간
• ? (유형 III): 중간
• ? (유형 IV): 중간-어두움
• ? (유형 V): 어두움

이러한 수정자를 사용하여 이모티콘을 정렬할 때 JavaScript는 기본적으로 Fitzpatrick 척도에 해당하는 피부색 수정자의 숫자 값을 기준으로 이모티콘을 정렬합니다.

---

실제로 살펴보겠습니다

실제 데모는 다음과 같습니다.

["??", "??", "??", "??", "??"].sort();

해부하기

• .sort() 메소드는 각 이모티콘의 유니코드 값을 비교합니다.
• 피부색 수정자(?, ? 등)의 유니코드 값이 증가합니다.
• 이모지는 가장 밝은(?) 것부터 가장 어두운(?) 순으로 정렬됩니다.

---

재미있는 실험

몇 가지 변형을 시도해 보고 결과를 관찰해 보겠습니다.

1. 혼합 이모티콘

피부색 수정 없이 기본 이모티콘을 포함하면 어떻게 되나요?

["??", "??", "??", "??", "??"]

출력:

// Array of emojis with skin-tone modifiers
const emojis = ["??", "??", "??", "??", "??"];

// Sort the array
const sortedEmojis = emojis.sort();

// Log the sorted array
console.log(sortedEmojis); 
// Output: ["??", "??", "??", "??", "??"]

여기 기본 이모티콘 ? 유니코드 값이 가장 작기 때문에 먼저 오고, 정렬된 피부색 변형이 그 뒤를 따릅니다.

---

2. 다른 이모티콘 그룹 정렬

손짓과 같은 수식어를 사용하여 다른 이모티콘 그룹을 정렬하면 어떨까요?

const mixedEmojis = ["??", "??", "?", "??", "??", "??"];
console.log(mixedEmojis.sort());

출력:

["?", "??", "??", "??", "??", "??"]

다시 한번, 피츠패트릭 척도에 따라 이모티콘이 정렬되어 있습니다.

---

유니코드 비하인드

정렬 동작을 더 깊이 이해하기 위해 각 이모티콘의 유니코드 값을 살펴보겠습니다.

const handEmojis = ["??", "??", "??", "??", "??"];
console.log(handEmojis.sort());

이렇게 하면 기본 이모티콘과 해당 수정자의 유니코드 값이 기록됩니다. 피부색 수정자의 값이 점진적으로 증가하는 것을 확인할 수 있습니다.

---

추가 자료

• 유니코드 기술 표준 #51
• MDN: Array.prototype.sort()

위 내용은 Fitzpatrick 척도로 JavaScript 이모티콘 정렬 디코딩의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!