그림 이모티콘 표시

모든 유형의 앱에서 그림 이모티콘을 사용하는 사용자가 급속히 늘어나면서 표준 세트의 그림 이모티콘이 매년 유니코드로 새롭게 태어나고 있습니다.

앱에서 인터넷 콘텐츠를 표시하거나 텍스트 입력을 제공하는 경우 최신 그림 이모티콘 글꼴을 지원하는 것이 좋습니다. 그러지 않으면 최신 그림 이모티콘이 두부 (☐)라는 작은 정사각형 상자나 잘못 렌더링된 다른 그림 이모티콘 시퀀스로 표시될 수 있습니다.

Android 버전 11 (API 수준 30) 이하에서는 그림 이모티콘 글꼴을 업데이트할 수 없으므로 이러한 버전에서 그림 이모티콘을 표시하는 앱은 수동으로 업데이트해야 합니다.

다음은 최신 그림 이모티콘의 몇 가지 예입니다.

예 버전
🫩 🪉 🇨🇶 16.0 (2024년 9월)
🐦‍🔥 🧑‍🧑‍🧒‍🧒 👩🏽‍🦽‍➡️ 🇲🇶 15.1 (2023년 9월)
🩷 🫸🏼 🐦‍⬛ 15.0 (2022년 9월)
🫠 🫱🏼‍🫲🏿 🫰🏽 14.0(2021년 9월)
😶‍🌫️ 🧔🏻‍♀️ 🧑🏿‍❤️‍🧑🏾 13.1(2020년 9월)
🥲 🥷🏿 🐻‍❄️ 13.0(2020년 3월)
🧑🏻‍🦰 🧑🏿‍🦯 👩🏻‍🤝‍👩🏼 12.1(2019년 10월)
🦩 🦻🏿 👩🏼‍🤝‍👩🏻 12.0 (2019년 2월)

BOM 2023년 3월 (Compose UI 1.4)은 API 21까지 이전 Android 버전과의 이전 버전과의 호환성을 포함하여 최신 그림 이모티콘 버전을 지원합니다.

이 지원에는 앱을 변경할 필요가 없습니다.— Text 및 TextField (Material 2 또는 Material 3) 또는 BasicText 및 BasicTextField를 사용하는 경우 기본적으로 최신 그림 이모티콘 지원을 받을 수 있습니다.

앱에서 최신 그림 이모티콘을 테스트하는 가장 좋은 방법은 API 30 이하의 실제 기기를 사용하는 것입니다.

맞춤 그림 이모티콘 솔루션을 사용하거나 다른 이유로 Compose에서 기본 그림 이모티콘 해결을 사용 중지해야 하는 경우 PlatformTextStyle(emojiSupportMatch)를 사용할 수 있습니다.

Text(
    text = "Hello $EMOJI_TEXT",
    style = TextStyle(
        platformStyle = PlatformTextStyle(
            emojiSupportMatch = EmojiSupportMatch.None
        )/* ... */
    )
)
EmojiSnippets.kt

상호 운용성

앱에서 동일한 Activity에 뷰와 Compose를 모두 사용하는 경우 적절한 API를 사용하여 그림 이모티콘을 올바르게 구성해야 합니다. 다음 섹션에서는 각 API를 사용해야 하는 경우를 설명합니다.

ComponentActivity에서 확장

Activity가 Compose ComponentActivity 대신 AppCompatActivity에서 확장되는 경우 AppCompat 없이 그림 이모티콘 지원 안내를 따르세요.

AppCompatActivity를 확장하지 않으므로 종속 항목에 Emoji2 라이브러리를 추가하고 다음 스니펫과 같이 뷰에서 TextView 위젯 대신 EmojiTextView를 사용합니다.

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val emojiTextView: EmojiTextView = findViewById(R.id.emoji_text_view)
        emojiTextView.text = getString(R.string.emoji_text_view, EMOJI_TEXT)

        val composeView: ComposeView = findViewById(R.id.compose_view)

        composeView.apply {
            setContent {
                // compose code
            }
        }
    }
}
EmojiSnippets.kt

그런 다음 XML 파일에서 다음을 실행합니다.

<androidx.emoji2.widget.EmojiTextView
    android:id="@+id/emoji_text_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    />
example_view.xml

AppCompatActivity에서 확장

Activity가 AppCompatActivity에서 확장되는 경우 ComposeView를 사용하여 구성 가능한 함수를 호출할 수 있습니다. 텍스트 구성 가능 항목을 사용하면 Android 버전 전반에서 그림 이모티콘이 올바르게 렌더링됩니다.

AppCompatActivity에서 확장하는 경우 XML 에서 TextView를 확장하여 그림 이모티콘이 올바르게 렌더링되도록 합니다.

이는 XML을 확장하는 경우에 적용됩니다.

  • Activity의 ComposeView 외부 다음 스니펫에서 AppCompatActivity 및 TextView의 사용에 유의하세요.

class MyActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val emojiTextView: TextView = findViewById(R.id.emoji_text_view)
        emojiTextView.text = getString(R.string.emoji_text_view, EMOJI_TEXT)

        val composeView: ComposeView = findViewById(R.id.compose_view)

        composeView.apply {
            setContent {
                // compose code
            }
        }
    }
}
EmojiSnippets.kt

class MyActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContentView(
            ComposeView(this).apply {
                setContent {
                    Column {
                        Text(EMOJI_TEXT)

                        AndroidViewBinding(ExampleViewBinding::inflate) {
                            emojiTextView.text = EMOJI_TEXT
                        }
                    }
                }
            }
        )
    }
}
EmojiSnippets.kt

ComposeView 내에서 AndroidView를 사용하여 텍스트를 확장하려면 AppCompatTextView를 사용하여 그림 이모티콘을 올바르게 렌더링합니다.

class MyActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContentView(
            ComposeView(this).apply {
                setContent {
                    Column {
                        Text(EMOJI_TEXT)

                        AndroidView(
                            factory = { context -> AppCompatTextView(context) },
                            update = { it.text = EMOJI_TEXT }
                        )
                    }
                }
            }
        )
    }
}
EmojiSnippets.kt

자세한 내용은 상호 운용성 API 문서를 참고하세요.

문제 해결

그림 이모티콘 대신 두부 (☐)가 표시되는 경우 먼저 문제가 특정 테스트 기기에 있는지 확인하세요. 확인할 수 있는 몇 가지 주요 사항은 다음과 같습니다.