동기

Misskey의 커스텀 이모지에는 각각 태그를 붙일 수 있습니다.

태그를 붙이면 이모지를 검색하는 사람들이 이모지의 정확한 이름을 입력하지 않더라도 검색 기능을 통해 이모지를 입력할 수 있게 됩니다.

그리고 이 태그는 로마자뿐 아니라 한국어나 일본어로도 설정할 수 있어요.

그런데 이 기능은 (당연하게도) 유니코드 이모지에는 적용되지 않아서, 사람들이 유니코드 이모지를 입력하려면 직접 이모지의 영어이름을 검색해야 했어요.

1차 수정(2023년?)

이 기능을 처음 수정한 것은 작년이었던 걸로 기억합니다.

먼저 emojilist.json 을 다음과 같이 변경하였습니다.

...
	["🧑‍🌾", "farmer", 1, "농부"],
...

이는 기존의 emojilist.json 의 각 배열에 3번째 인덱스를 추가하고 한국어 태그를 입력해 준 것입니다.

그 다음 이모지를 사용하는 컴포넌트 (리액션, 오토컴플리트 등) 에서 커스텀 이모지와 같은 방식으로 유니코드 이모지를 불러오도록 적용했습니다.

그렇지만 태그를 하나밖에 쓸 수 없었습니다. 공백으로 분리되지 않았어요. 아마도 이것은 당시 저의 능력이 짧았기 때문일 것입니다.

그래서 오늘 아침 이것을 수정해 주었습니다.

2차 수정(2024년 12월 20일)

먼저 packages/frontend-shared/js/emojilist.json 의 '👍' 이모지를 다음과 같이 수정했습니다.

...
	["👍", "+1", 1, "붐업 엄지척 굿잡 따봉"],
...

이것은 👍이라는 이모지에 '붐업', '엄지척', '굿잡', '따봉' 이라는 네 개의 태그를 부여해 준 것입니다.

다음으로 packages/frontend-shared/js/emojilist.ts 의 일부를 수정했습니다.

다음은 기존 Misskey의 코드입니다.

export type UnicodeEmojiDef = {
	name: string;
	char: string;
	category: typeof unicodeEmojiCategories[number];
}

// initial converted from https://github.com/muan/emojilib/commit/242fe68be86ed6536843b83f7e32f376468b38fb
import _emojilist from './emojilist.json';

export const emojilist: UnicodeEmojiDef[] = _emojilist.map(x => ({
	name: x[1] as string,
	char: x[0] as string,
	category: unicodeEmojiCategories[x[2] as number],
}));

다음은 제가 수정한 코드입니다.

export type UnicodeEmojiDef = {
	name: string;
	char: string;
	category: typeof unicodeEmojiCategories[number];
	aliases: string[];
}

// initial converted from https://github.com/muan/emojilib/commit/242fe68be86ed6536843b83f7e32f376468b38fb
import _emojilist from './emojilist.json';

export const emojilist: UnicodeEmojiDef[] = _emojilist.map(x => ({
	name: x[1] as string,
	char: x[0] as string,
	category: unicodeEmojiCategories[x[2] as number],
	aliases: typeof x[3] === 'string' ? x[3].split(' ') : []
}));

x[3], 그러니까 Array의 세번째 인덱스를 공백으로 분리해서 Array로 반환하게 되었습니다.

이게 끝이라고 생각했는데, 리액션 픽커에서만 작동하고 오토컴플리트에선 작동을 안하더라구요.

packages/frontend/src/components/MkAutocomplete.vue 의 오토컴플리트 일부분을 다음과 같이 수정해주어야 했습니다.

다음은 기존 Misskey의 코드입니다.

	const unicodeEmojiDB: EmojiDef[] = lib.map(x => ({
		emoji: x.char,
		name: x.name,
		url: char2path(x.char),
	}));

	for (const index of Object.values(defaultStore.state.additionalUnicodeEmojiIndexes)) {
		for (const [emoji, keywords] of Object.entries(index)) {
			for (const k of keywords) {
				unicodeEmojiDB.push({
					emoji: emoji,
					name: k,
					aliasOf: getEmojiName(emoji),
					url: char2path(emoji),
				});
			}
		}
	}

다음은 제가 변경한 코드입니다.

	const unicodeEmojiDB: EmojiDef[] = lib.map(x => ({
		emoji: x.char,
		name: x.name,
		url: char2path(x.char),
	}));

    //이모지에 지정된 모든 태그를 등록합니다.
	for (const x of lib) {
		if (x.aliases) {
			for (const alias of x.aliases) {
				unicodeEmojiDB.push({
					name: alias,
					aliasOf: x.name,
					emoji: x.char,
					url: char2path(x.char),
				});
			}
		}
	}

	for (const index of Object.values(defaultStore.state.additionalUnicodeEmojiIndexes)) {
		for (const [emoji, keywords] of Object.entries(index)) {
			for (const k of keywords) {
				unicodeEmojiDB.push({
					emoji: emoji,
					name: k,
					aliasOf: getEmojiName(emoji),
					url: char2path(emoji),
				});
			}
		}
	}

결과

오늘 변경한 건 이 정도였고, 혹.. 시라도 적용이 안되는 경우가 있다면 레포지토리에 오셔서 체리픽 해가시길 바랍니다.