{"id":36951,"date":"2024-11-01T09:53:36","date_gmt":"2024-11-01T09:53:36","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=36951"},"modified":"2024-11-01T13:01:50","modified_gmt":"2024-11-01T13:01:50","slug":"%ec%bd%94%ed%8b%80%eb%a6%b0-%ec%95%88%eb%93%9c%eb%a1%9c%ec%9d%b4%eb%93%9c-%ec%95%b1%ea%b0%9c%eb%b0%9c-%ea%b0%95%ec%a2%8c-%eb%a9%94%ec%8b%a0%ec%a0%80-%ec%95%b1%ec%9d%98-%ec%9d%b8%ed%8a%b8%eb%a1%9c-2","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/36951\/","title":{"rendered":"Kotlin Android app development course, creating an intro screen for a messenger app"},"content":{"rendered":"

<\/p>\n

Hello! In this tutorial, I will explain in detail how to create an intro screen for an Android messenger app using Kotlin. The intro screen is what the user sees when they first launch the app, typically containing a logo or slogan. It’s an important element that builds expectations for the app.<\/p>\n

1. Create a Project<\/h2>\n

After launching Android Studio, create a new project. Select ‘Empty Activity’ from the suggested templates, and name the project ‘MessengerApp’. Then select Kotlin as the language.<\/p>\n

2. Gradle Configuration<\/h2>\n

Since we plan to use Jetpack Compose, we need to add the necessary dependencies to the Gradle file. Write the following in the build.gradle (Module: app)<\/code> file:<\/p>\n

dependencies {\n    implementation \"androidx.compose.ui:ui:1.1.0\"\n    implementation \"androidx.compose.material:material:1.1.0\"\n    implementation \"androidx.compose.ui:ui-tooling-preview:1.1.0\"\n    implementation \"androidx.lifecycle:lifecycle-runtime-ktx:2.5.0\"\n    implementation \"androidx.activity:activity-compose:1.5.0\"\n}<\/code><\/pre>\n
This configuration brings in libraries related to Jetpack Compose. Now sync Gradle to complete the setup.<\/p>\n
3. Structure Intro Screen UI<\/h2>\n
The intro screen of the messenger app will include a logo and a slogan. To build the intro screen, we need to create a new Composable function. Open the MainActivity.kt<\/code> file and add the following code:<\/p>\n
import android.os.Bundle\nimport androidx.activity.ComponentActivity\nimport androidx.activity.compose.setContent\nimport androidx.compose.foundation.Image\nimport androidx.compose.foundation.layout.*\nimport androidx.compose.material.Text\nimport androidx.compose.runtime.Composable\nimport androidx.compose.ui.Alignment\nimport androidx.compose.ui.Modifier\nimport androidx.compose.ui.res.painterResource\nimport androidx.compose.ui.text.font.FontWeight\nimport androidx.compose.ui.unit.dp\nimport androidx.compose.ui.unit.sp\nimport androidx.compose.ui.tooling.preview.Preview\n\nclass MainActivity : ComponentActivity() {\n    override fun onCreate(savedInstanceState: Bundle?) {\n        super.onCreate(savedInstanceState)\n        setContent {\n            IntroScreen()\n        }\n    }\n}\n\n@Composable\nfun IntroScreen() {\n    Column(\n        modifier = Modifier\n            .fillMaxSize()\n            .padding(16.dp),\n        horizontalAlignment = Alignment.CenterHorizontally,\n        verticalArrangement = Arrangement.Center\n    ) {\n        Image(\n            painter = painterResource(id = R.drawable.logo),\n            contentDescription = null,\n            Modifier.size(128.dp)\n        )\n        Spacer(modifier = Modifier.height(16.dp))\n        Text(\n            text = \"Connecting your messages!\",\n            fontSize = 24.sp,\n            fontWeight = FontWeight.Bold\n        )\n    }\n}\n\n@Preview\n@Composable\nfun PreviewIntroScreen() {\n    IntroScreen()\n}<\/code><\/pre>\n
Here we created a Composable function called IntroScreen<\/code> to structure the intro screen. We used Column<\/code> to vertically arrange the logo image and the slogan text. The logo is used by adding a logo.png<\/code> file to the drawable folder, and the slogan can be changed to any desired message.<\/p>\n
4. Add Animation Effects<\/h2>\n
Instead of simply displaying the logo and text on the intro screen, we can add animation effects to make it visually more appealing for the user. Let’s add animations using the androidx.compose.animation<\/code> library.<\/p>\n
You can implement a Fade-in animation by adding the following code inside the IntroScreen<\/code> function:<\/p>\n
import androidx.compose.animation.core.*\nimport androidx.compose.runtime.LaunchedEffect\nimport androidx.compose.runtime.remember\nimport androidx.compose.ui.tooling.preview.Preview\n\n@Composable\nfun IntroScreen() {\n    val transition = rememberInfiniteTransition()\n    val alpha by transition.animateFloat(\n        initialValue = 0f,\n        targetValue = 1f,\n        animationSpec = infiniteRepeatable(\n            animation = tween(durationMillis = 2000, easing = FastOutSlowInEasing)\n        )\n    )\n\n    Column(\n        modifier = Modifier\n            .fillMaxSize()\n            .padding(16.dp)\n            .graphicsLayer(alpha = alpha),\n        horizontalAlignment = Alignment.CenterHorizontally,\n        verticalArrangement = Arrangement.Center\n    ) {\n        Image(\n            painter = painterResource(id = R.drawable.logo),\n            contentDescription = null,\n            Modifier.size(128.dp)\n        )\n        Spacer(modifier = Modifier.height(16.dp))\n        Text(\n            text = \"Connecting your messages!\",\n            fontSize = 24.sp,\n            fontWeight = FontWeight.Bold\n        )\n    }\n}<\/code><\/pre>\n
In the above code, we defined the animation using rememberInfiniteTransition()<\/code>. We apply the Fade effect by adjusting the alpha value through the animateFloat<\/code> function.<\/p>\n
5. Set Intro Duration and Transition to Next Screen<\/h2>\n
You can set it so that the user moves to the next screen after a certain time on the intro screen. To do this, we add a delay using LaunchedEffect<\/code>. Add the following code to the IntroScreen<\/code> function:<\/p>\n
import androidx.compose.runtime.rememberCoroutineScope\nimport kotlinx.coroutines.delay\nimport kotlinx.coroutines.launch\n\n@Composable\nfun IntroScreen() {\n    val coroutineScope = rememberCoroutineScope()\n    \n    LaunchedEffect(Unit) {\n        delay(3000) \/\/ Wait for 3 seconds\n        \/\/ Add logic to transition to the next screen\n    }\n    \/\/ Remaining code ...\n}<\/code><\/pre>\n
Here, you need to add logic to transition to the next screen after waiting for 3 seconds. For example, you can transition to a function called MainScreen<\/code>. Write the MainScreen<\/code> function and modify it to call that function after the intro screen is finished.<\/p>\n
6. Organize Complete Code<\/h2>\n
Let’s put everything together to complete the MainActivity.kt<\/code> file.<\/p>\n
import android.os.Bundle\nimport androidx.activity.ComponentActivity\nimport androidx.activity.compose.setContent\nimport androidx.compose.foundation.Image\nimport androidx.compose.foundation.layout.*\nimport androidx.compose.material.Text\nimport androidx.compose.runtime.Composable\nimport androidx.compose.runtime.LaunchedEffect\nimport androidx.compose.runtime.remember\nimport androidx.compose.runtime.rememberCoroutineScope\nimport androidx.compose.ui.Alignment\nimport androidx.compose.ui.Modifier\nimport androidx.compose.ui.res.painterResource\nimport androidx.compose.ui.text.font.FontWeight\nimport androidx.compose.ui.unit.dp\nimport androidx.compose.ui.unit.sp\nimport androidx.compose.animation.core.*\nimport kotlinx.coroutines.delay\nimport kotlinx.coroutines.launch\n\nclass MainActivity : ComponentActivity() {\n    override fun onCreate(savedInstanceState: Bundle?) {\n        super.onCreate(savedInstanceState)\n        setContent {\n            IntroScreen()\n        }\n    }\n}\n\n@Composable\nfun IntroScreen() {\n    val coroutineScope = rememberCoroutineScope()\n    val transition = rememberInfiniteTransition()\n    val alpha by transition.animateFloat(\n        initialValue = 0f,\n        targetValue = 1f,\n        animationSpec = infiniteRepeatable(\n            animation = tween(durationMillis = 2000, easing = FastOutSlowInEasing)\n        )\n    )\n\n    LaunchedEffect(Unit) {\n        delay(3000)\n        \/\/ Add logic to transition to the next screen\n    }\n    \n    Column(\n        modifier = Modifier\n            .fillMaxSize()\n            .padding(16.dp)\n            .graphicsLayer(alpha = alpha),\n        horizontalAlignment = Alignment.CenterHorizontally,\n        verticalArrangement = Arrangement.Center\n    ) {\n        Image(\n            painter = painterResource(id = R.drawable.logo),\n            contentDescription = null,\n            Modifier.size(128.dp)\n        )\n        Spacer(modifier = Modifier.height(16.dp))\n        Text(\n            text = \"Connecting your messages!\",\n            fontSize = 24.sp,\n            fontWeight = FontWeight.Bold\n        )\n    }\n}\n\n@Composable\nfun MainScreen() {\n    \/\/ Structure the next screen UI\n}\n\n@Preview\n@Composable\nfun PreviewIntroScreen() {\n    IntroScreen()\n}<\/code><\/pre>\n
7. Structure the Next Screen<\/h2>\n
Structure the MainScreen<\/code> function that will be used after the intro screen is finished. Essentially, you need to design the main screen UI for the messenger app. Here\u2019s an example of a simple main screen structure:<\/p>\n
@Composable\nfun MainScreen() {\n    Column(\n        modifier = Modifier\n            .fillMaxSize()\n            .padding(16.dp),\n        horizontalAlignment = Alignment.CenterHorizontally,\n        verticalArrangement = Arrangement.Center\n    ) {\n        Text(\n            text = \"Welcome to the Messenger App!\",\n            fontSize = 32.sp,\n            fontWeight = FontWeight.Bold\n        )\n        \/\/ Additional UI structure\n    }\n}<\/code><\/pre>\n
Now, you need to add the logic to transition from IntroScreen<\/code> to MainScreen<\/code>. Modify the setContent<\/code> function to switch to the main screen after the intro screen:<\/p>\n
super.onCreate(savedInstanceState)\nsetContent {\n    var isIntroVisible by remember { mutableStateOf(true) }\n    if (isIntroVisible) {\n        IntroScreen { isIntroVisible = false }\n    } else {\n        MainScreen()\n    }\n}<\/code><\/pre>\n
And add a lambda function as a parameter to the IntroScreen<\/code> function to facilitate the transition to the main screen:<\/p>\n
@Composable\nfun IntroScreen(onFinish: () -> Unit) {\n    \/\/ ...\n    LaunchedEffect(Unit) {\n        delay(3000)\n        onFinish()\n    }\n}<\/code><\/pre>\n
8. Folder Structure and Image Addition<\/h2>\n
You need to add the logo image that will be used on the intro screen to the res\/drawable<\/code> folder of the project. The image should be named logo.png<\/code>. This way, you can retrieve the logo with painterResource(id = R.drawable.logo)<\/code>.<\/p>\n
9. Final Testing<\/h2>\n
After all the setups and configurations, test the app to see if the intro screen and main screen transition smoothly. The intro screen should display the logo and slogan for 3 seconds before transitioning smoothly to the main screen.<\/p>\n
10. Conclusion<\/h2>\n
In this tutorial, we learned how to create an intro screen for a messenger app using Kotlin and Jetpack Compose. By implementing the design and animation effects of the intro screen, as well as the transition logic to the next screen, we gained a foundational understanding of effectively structuring UI elements.<\/p>\n
Going forward, explore more topics in Android app development and implement rich and diverse features. I hope this becomes a valuable experience in your development journey!<\/p>\n
<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"
Hello! In this tutorial, I will explain in detail how to create an intro screen for an Android messenger app using Kotlin. The intro screen is what the user sees when they first launch the app, typically containing a logo or slogan. It’s an important element that builds expectations for the app. 1. Create a … \ub354 \ubcf4\uae30 “Kotlin Android app development course, creating an intro screen for a messenger app”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[143],"tags":[],"class_list":["post-36951","post","type-post","status-publish","format-standard","hentry","category-kotlin-android-app-development"],"yoast_head":"\nKotlin Android app development course, creating an intro screen for a messenger app - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/atmokpo.com\/w\/36951\/\" \/>\n<meta property=\"og:locale\" content=\"ko_KR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Kotlin Android app development course, creating an intro screen for a messenger app - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\" \/>\n<meta property=\"og:description\" content=\"Hello! In this tutorial, I will explain in detail how to create an intro screen for an Android messenger app using Kotlin. The intro screen is what the user sees when they first launch the app, typically containing a logo or slogan. It’s an important element that builds expectations for the app. 1. Create a … \ub354 \ubcf4\uae30 "Kotlin Android app development course, creating an intro screen for a messenger app"\" \/>\n<meta property=\"og:url\" content=\"https:\/\/atmokpo.com\/w\/36951\/\" \/>\n<meta property=\"og:site_name\" content=\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-01T09:53:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-01T13:01:50+00:00\" \/>\n<meta name=\"author\" content=\"root\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@bebubo4\" \/>\n<meta name=\"twitter:site\" content=\"@bebubo4\" \/>\n<meta name=\"twitter:label1\" content=\"\uae00\uc4f4\uc774\" \/>\n\t<meta name=\"twitter:data1\" content=\"root\" \/>\n\t<meta name=\"twitter:label2\" content=\"\uc608\uc0c1 \ub418\ub294 \ud310\ub3c5 \uc2dc\uac04\" \/>\n\t<meta name=\"twitter:data2\" content=\"6\ubd84\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/atmokpo.com\/w\/36951\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/atmokpo.com\/w\/36951\/\"},\"author\":{\"name\":\"root\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7\"},\"headline\":\"Kotlin Android app development course, creating an intro screen for a messenger app\",\"datePublished\":\"2024-11-01T09:53:36+00:00\",\"dateModified\":\"2024-11-01T13:01:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/atmokpo.com\/w\/36951\/\"},\"wordCount\":631,\"publisher\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#organization\"},\"articleSection\":[\"Kotlin Android app development\"],\"inLanguage\":\"ko-KR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/atmokpo.com\/w\/36951\/\",\"url\":\"https:\/\/atmokpo.com\/w\/36951\/\",\"name\":\"Kotlin Android app development course, creating an intro screen for a messenger app - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\",\"isPartOf\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#website\"},\"datePublished\":\"2024-11-01T09:53:36+00:00\",\"dateModified\":\"2024-11-01T13:01:50+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/atmokpo.com\/w\/36951\/#breadcrumb\"},\"inLanguage\":\"ko-KR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/atmokpo.com\/w\/36951\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/atmokpo.com\/w\/36951\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\ud648\",\"item\":\"https:\/\/atmokpo.com\/w\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Kotlin Android app development course, creating an intro screen for a messenger app\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/atmokpo.com\/w\/#website\",\"url\":\"https:\/\/atmokpo.com\/w\/\",\"name\":\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/atmokpo.com\/w\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ko-KR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/atmokpo.com\/w\/#organization\",\"name\":\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\",\"url\":\"https:\/\/atmokpo.com\/w\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/atmokpo.com\/w\/wp-content\/uploads\/2024\/11\/logo.png\",\"contentUrl\":\"https:\/\/atmokpo.com\/w\/wp-content\/uploads\/2024\/11\/logo.png\",\"width\":400,\"height\":400,\"caption\":\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\"},\"image\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/bebubo4\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7\",\"name\":\"root\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/708197b41fc6435a7ce22d951b25d4a47e9e904270cb1f04682d4f025066f80c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/708197b41fc6435a7ce22d951b25d4a47e9e904270cb1f04682d4f025066f80c?s=96&d=mm&r=g\",\"caption\":\"root\"},\"sameAs\":[\"http:\/\/atmokpo.com\/w\"],\"url\":\"https:\/\/atmokpo.com\/w\/author\/root\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Kotlin Android app development course, creating an intro screen for a messenger app - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/atmokpo.com\/w\/36951\/","og_locale":"ko_KR","og_type":"article","og_title":"Kotlin Android app development course, creating an intro screen for a messenger app - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","og_description":"Hello! In this tutorial, I will explain in detail how to create an intro screen for an Android messenger app using Kotlin. The intro screen is what the user sees when they first launch the app, typically containing a logo or slogan. It’s an important element that builds expectations for the app. 1. Create a … \ub354 \ubcf4\uae30 \"Kotlin Android app development course, creating an intro screen for a messenger app\"","og_url":"https:\/\/atmokpo.com\/w\/36951\/","og_site_name":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","article_published_time":"2024-11-01T09:53:36+00:00","article_modified_time":"2024-11-01T13:01:50+00:00","author":"root","twitter_card":"summary_large_image","twitter_creator":"@bebubo4","twitter_site":"@bebubo4","twitter_misc":{"\uae00\uc4f4\uc774":"root","\uc608\uc0c1 \ub418\ub294 \ud310\ub3c5 \uc2dc\uac04":"6\ubd84"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/atmokpo.com\/w\/36951\/#article","isPartOf":{"@id":"https:\/\/atmokpo.com\/w\/36951\/"},"author":{"name":"root","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7"},"headline":"Kotlin Android app development course, creating an intro screen for a messenger app","datePublished":"2024-11-01T09:53:36+00:00","dateModified":"2024-11-01T13:01:50+00:00","mainEntityOfPage":{"@id":"https:\/\/atmokpo.com\/w\/36951\/"},"wordCount":631,"publisher":{"@id":"https:\/\/atmokpo.com\/w\/#organization"},"articleSection":["Kotlin Android app development"],"inLanguage":"ko-KR"},{"@type":"WebPage","@id":"https:\/\/atmokpo.com\/w\/36951\/","url":"https:\/\/atmokpo.com\/w\/36951\/","name":"Kotlin Android app development course, creating an intro screen for a messenger app - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","isPartOf":{"@id":"https:\/\/atmokpo.com\/w\/#website"},"datePublished":"2024-11-01T09:53:36+00:00","dateModified":"2024-11-01T13:01:50+00:00","breadcrumb":{"@id":"https:\/\/atmokpo.com\/w\/36951\/#breadcrumb"},"inLanguage":"ko-KR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/atmokpo.com\/w\/36951\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/atmokpo.com\/w\/36951\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\ud648","item":"https:\/\/atmokpo.com\/w\/en\/"},{"@type":"ListItem","position":2,"name":"Kotlin Android app development course, creating an intro screen for a messenger app"}]},{"@type":"WebSite","@id":"https:\/\/atmokpo.com\/w\/#website","url":"https:\/\/atmokpo.com\/w\/","name":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","description":"","publisher":{"@id":"https:\/\/atmokpo.com\/w\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/atmokpo.com\/w\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ko-KR"},{"@type":"Organization","@id":"https:\/\/atmokpo.com\/w\/#organization","name":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","url":"https:\/\/atmokpo.com\/w\/","logo":{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/logo\/image\/","url":"https:\/\/atmokpo.com\/w\/wp-content\/uploads\/2024\/11\/logo.png","contentUrl":"https:\/\/atmokpo.com\/w\/wp-content\/uploads\/2024\/11\/logo.png","width":400,"height":400,"caption":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8"},"image":{"@id":"https:\/\/atmokpo.com\/w\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/bebubo4"]},{"@type":"Person","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7","name":"root","image":{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/708197b41fc6435a7ce22d951b25d4a47e9e904270cb1f04682d4f025066f80c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/708197b41fc6435a7ce22d951b25d4a47e9e904270cb1f04682d4f025066f80c?s=96&d=mm&r=g","caption":"root"},"sameAs":["http:\/\/atmokpo.com\/w"],"url":"https:\/\/atmokpo.com\/w\/author\/root\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/36951","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/comments?post=36951"}],"version-history":[{"count":2,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/36951\/revisions"}],"predecessor-version":[{"id":38136,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/36951\/revisions\/38136"}],"wp:attachment":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/media?parent=36951"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/categories?post=36951"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/tags?post=36951"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}