그림 이모티콘 표시

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

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

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

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

예 버전
🫠 🫱🏼‍🫲🏿 🫰🏽 14.0(2021년 9월)
😶‍🌫️ 🧔🏻‍♀️ 🧑🏿‍❤️‍🧑🏾 13.1(2020년 9월)
🥲 🥷🏿 🐻‍❄️ 13.0(2020년 3월)
🧑🏻‍🦰 🧑🏿‍🦯 👩🏻‍🤝‍👩🏼 12.1(2019년 10월)
🦩 🦻🏿 👩🏼‍🤝‍👩🏻 12.0(2019년 2월)

2023년 3월 BOM (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가 AppCompatActivity 대신 Compose ComponentActivity에서 확장되는 경우 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을 확장하는 경우에 적용됩니다.

  • ComposeView 외부, Activity에 있습니다. 다음 스니펫에서 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 문서를 참고하세요.

문제 해결

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