{"id":2594,"date":"2026-09-28T02:55:34","date_gmt":"2026-09-28T02:55:34","guid":{"rendered":"https:\/\/wayhope.kro.kr\/?p=2594"},"modified":"2026-10-04T02:55:54","modified_gmt":"2026-10-04T02:55:54","slug":"r3-%ec%82%ac%ec%9a%a9-%eb%b0%a9%eb%b2%95%ea%b3%bc-unity-ui-%eb%b0%94%ec%9d%b8%eb%94%a9","status":"publish","type":"post","link":"https:\/\/wayhope.kro.kr\/?p=2594","title":{"rendered":"R3 \uc0ac\uc6a9 \ubc29\ubc95\uacfc Unity UI \ubc14\uc778\ub529"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Unity\uc5d0\uc11c \uac8c\uc784\uc744 \uac1c\ubc1c\ud558\ub2e4 \ubcf4\uba74 \uc0c1\ud0dc \ubcc0\ud654\uc5d0 \ub530\ub77c UI\ub97c \uac31\uc2e0\ud574\uc57c \ud558\ub294 \uc0c1\ud669\uc774 \uacc4\uc18d \ubc1c\uc0dd\ud55c\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ud50c\ub808\uc774\uc5b4\uc758 \uccb4\ub825\uc774 \ubcc0\uacbd\ub418\uba74 HP Bar\ub97c \ubcc0\uacbd\ud574\uc57c \ud558\uace0, \uace8\ub4dc\ub97c \ud68d\ub4dd\ud558\uba74 \uace8\ub4dc UI\ub97c \uac31\uc2e0\ud574\uc57c \ud55c\ub2e4. \uc124\uc815\uac12\uc774 \ubcc0\uacbd\ub418\uba74 Toggle\uc774\ub098 Slider\uc758 \uc0c1\ud0dc\ub3c4 \ubcc0\uacbd\ud574\uc57c \ud55c\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc77c\ubc18\uc801\uc73c\ub85c\ub294 \uc774\ubca4\ud2b8\ub97c \ub9cc\ub4e4\uc5b4 \ucc98\ub9ac\ud55c\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>public event Action&lt;int&gt; OnHealthChanged;\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uadf8\ub9ac\uace0 \uac12\uc774 \ubcc0\uacbd\ub420 \ub54c\ub9c8\ub2e4 \uc774\ubca4\ud2b8\ub97c \ud638\ucd9c\ud55c\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>health = value;\nOnHealthChanged?.Invoke(health);\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">UI\uc5d0\uc11c\ub294 \uc774\ubca4\ud2b8\ub97c \uad6c\ub3c5\ud55c\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>player.OnHealthChanged += UpdateHealthUI;\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uc791\uc740 \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c\ub294 \ubb38\uc81c\uac00 \uc5c6\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ud558\uc9c0\ub9cc \ud504\ub85c\uc81d\ud2b8\uac00 \ucee4\uc9c0\uba74 \uc0c1\ud0dc, \uc774\ubca4\ud2b8, \uc774\ubca4\ud2b8 \ud638\ucd9c, \uad6c\ub3c5 \ud574\uc81c, UI \uac31\uc2e0 \ucf54\ub4dc\uac00 \uc5ec\ub7ec \uacf3\uc73c\ub85c \ubd84\uc0b0\ub418\uae30 \uc2dc\uc791\ud55c\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Reactive Programming\uc740 \uc774\ub7ec\ud55c \ubb38\uc81c\ub97c <strong>\ub370\uc774\ud130\uc758 \ud750\ub984<\/strong>\uc73c\ub85c \ud45c\ud604\ud55c\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">R3\ub294 \uc774\ub7ec\ud55c Reactive Programming\uc744 C#\uc5d0\uc11c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub3c4\ub85d \ub9cc\ub4e0 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc774\uba70, Unity\uc5d0\uc11c\ub3c4 \uc0c1\ud0dc \uad00\ub9ac\uc640 UI \ubc14\uc778\ub529\uc5d0 \ud65c\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">R3\ub780?<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">R3\ub294 Reactive Extensions\ub97c \uae30\ubc18\uc73c\ub85c \ud55c Reactive Programming \ub77c\uc774\ube0c\ub7ec\ub9ac\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ud575\uc2ec \uac1c\ub150\uc740 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Observable\nSubscribe\nOperator\nSubject\nReactiveProperty\nDispose\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uc774 \uc911 Unity\uc5d0\uc11c UI\ub97c \uc5f0\uacb0\ud560 \ub54c \ud2b9\ud788 \uc911\uc694\ud55c \uac83\uc740 <code>ReactiveProperty<\/code>\uc640 <code>Subscribe<\/code>\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uae30\ubcf8\uc801\uc778 \uad6c\uc870\ub294 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Model\n \u2193\nReactiveProperty\n \u2193\nSubscribe\n \u2193\nUI\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uc608\ub97c \ub4e4\uc5b4 \ud50c\ub808\uc774\uc5b4\uc758 \uccb4\ub825\uc744 <code>ReactiveProperty&lt;int&gt;<\/code>\ub85c \uad00\ub9ac\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>public ReactiveProperty&lt;int&gt; Health { get; }\n    = new(100);\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">UI\uc5d0\uc11c\ub294 \uc774\ub97c \uad6c\ub3c5\ud55c\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>player.Health\n    .Subscribe(value =&gt;\n    {\n        hpText.text = value.ToString();\n    });\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uc774\uc81c \ud50c\ub808\uc774\uc5b4\uc758 \uccb4\ub825\uc774 \ubcc0\uacbd\ub418\uba74 UI\ub3c4 \ubcc0\uacbd\ub41c\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>player.Health.Value = 80;\nplayer.Health.Value = 50;\nplayer.Health.Value = 10;\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">UI\ub294 \ubcc4\ub3c4\uc758 <code>Update()<\/code> \uc5c6\uc774 \uc0c1\ud0dc \ubcc0\ud654\ub97c \ubc1b\uc744 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">ReactiveProperty<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">R3\uc5d0\uc11c UI \ubc14\uc778\ub529\uc744 \uc774\ud574\ud558\ub824\uba74 \uba3c\uc800 <code>ReactiveProperty<\/code>\ub97c \uc774\ud574\ud574\uc57c \ud55c\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc77c\ubc18\uc801\uc778 \ubcc0\uc218\ub294 \ub2e8\uc21c\ud788 \uac12\uc744 \uc800\uc7a5\ud55c\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>public int Health;\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uac12\uc744 \ubcc0\uacbd\ud574\ub3c4 \ub2e4\ub978 \uac1d\uccb4\ub294 \uac12\uc774 \ubcc0\uacbd\ub410\ub2e4\ub294 \uc0ac\uc2e4\uc744 \uc54c \uc218 \uc5c6\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Health = 50;\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">UI\uac00 \uc774\ub97c \uc54c\uace0 \uc2f6\ub2e4\uba74 \uc9c1\uc811 \ud655\uc778\ud574\uc57c \ud55c\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>void Update()\n{\n    hpText.text = Health.ToString();\n}\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\ud558\uc9c0\ub9cc \uc774 \ubc29\uc2dd\uc740 \ub9e4 \ud504\ub808\uc784\ub9c8\ub2e4 \uac12\uc744 \ud655\uc778\ud55c\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">ReactiveProperty\ub97c \uc0ac\uc6a9\ud558\uba74 \uc0c1\ud0dc \ubcc0\uacbd \uc790\uccb4\ub97c \uc774\ubca4\ud2b8 \uc2a4\ud2b8\ub9bc\uc73c\ub85c \ub9cc\ub4e4 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>public ReactiveProperty&lt;int&gt; Health { get; }\n    = new(100);\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uac12\uc744 \ubcc0\uacbd\ud55c\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Health.Value = 50;\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uadf8\ub7ec\uba74 \uc774 \uac12\uc744 \uad6c\ub3c5\ud558\uace0 \uc788\ub294 \uac1d\uccb4\uc5d0\uac8c \ubcc0\uacbd \uc0ac\uc2e4\uc774 \uc804\ub2ec\ub41c\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Health\n    .Subscribe(value =&gt;\n    {\n        hpText.text = value.ToString();\n    });\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uad6c\uc870\ub294 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Health.Value \ubcc0\uacbd\n       \u2193\nReactiveProperty\n       \u2193\nSubscribe\n       \u2193\nUI \uac31\uc2e0\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uc774\uac83\uc774 R3\ub97c \uc774\uc6a9\ud55c \uac00\uc7a5 \uae30\ubcf8\uc801\uc778 UI \ubc14\uc778\ub529\uc774\ub2e4.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">Unity UI\uc640 R3 \uc5f0\uacb0\ud558\uae30<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Unity UI\uc5d0\uc11c\ub294 <code>TextMeshProUGUI<\/code>, <code>Slider<\/code>, <code>Image<\/code>, <code>Toggle<\/code>, <code>Button<\/code> \ub4f1\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc608\ub97c \ub4e4\uc5b4 \uccb4\ub825\uc744 UI Text\uc5d0 \ud45c\uc2dc\ud55c\ub2e4\uace0 \ud574\ubcf4\uc790.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>using TMPro;\nusing UnityEngine;\nusing R3;\n\npublic class Player : MonoBehaviour\n{\n    public ReactiveProperty&lt;int&gt; Health { get; }\n        = new(100);\n}\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">UI\uc5d0\uc11c\ub294 \ub2e4\uc74c\uacfc \uac19\uc774 \uad6c\ub3c5\ud55c\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>using TMPro;\nusing UnityEngine;\nusing R3;\n\npublic class PlayerUI : MonoBehaviour\n{\n    &#91;SerializeField]\n    private TMP_Text healthText;\n\n    &#91;SerializeField]\n    private Player player;\n\n    private void Start()\n    {\n        player.Health\n            .Subscribe(health =&gt;\n            {\n                healthText.text = $\"HP : {health}\";\n            })\n            .RegisterTo(this.GetCancellationTokenOnDestroy());\n    }\n}\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uc774\uc81c Player\uc758 \uc0c1\ud0dc\uc640 UI\uac00 \ubd84\ub9ac\ub41c\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Player\n \u2514\u2500 Health\n\nPlayerUI\n \u2514\u2500 healthText\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Player\ub294 UI\ub97c \uc54c \ud544\uc694\uac00 \uc5c6\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ubc18\ub300\ub85c UI\ub294 Player\uc758 \ub0b4\ubd80 \uad6c\ud604\uc744 \uc9c1\uc811 \uc870\uc791\ud558\uc9c0 \uc54a\uace0 <code>Health<\/code>\uc758 \ubcc0\ud654\ub97c \uad00\ucc30\ud55c\ub2e4.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">Slider\uc640 ReactiveProperty \uc5f0\uacb0\ud558\uae30<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">HP Bar \uac19\uc740 UI\uc5d0\ub294 <code>Slider<\/code>\uac00 \uc790\uc8fc \uc0ac\uc6a9\ub41c\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#91;SerializeField]\nprivate Slider hpSlider;\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uccb4\ub825\uc774 0~100\uc774\ub77c\uace0 \ud55c\ub2e4\uba74 \ub2e4\uc74c\uacfc \uac19\uc774 \uc5f0\uacb0\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>player.Health\n    .Subscribe(health =&gt;\n    {\n        hpSlider.value = health;\n    })\n    .RegisterTo(this.GetCancellationTokenOnDestroy());\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uadf8\ub7ec\uba74<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>player.Health.Value = 75;\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\ub97c \uc2e4\ud589\ud588\uc744 \ub54c Slider\ub3c4 75\ub85c \ubcc0\uacbd\ub41c\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Player.Health\n      \u2193\nReactiveProperty\n      \u2193\nSubscribe\n      \u2193\nSlider.value\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">UI\uac00 \uac8c\uc784 \uc0c1\ud0dc\ub97c \ub9e4 \ud504\ub808\uc784 \ud655\uc778\ud558\uc9c0 \uc54a\ub294\ub2e4\ub294 \uac83\uc774 \uc911\uc694\ud558\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc0c1\ud0dc\uac00 \ubcc0\uacbd\ub410\uc744 \ub54c\ub9cc UI\ub97c \uac31\uc2e0\ud55c\ub2e4.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">Slider\uc758 \ucd5c\ub300\uac12\uae4c\uc9c0 \uc5f0\uacb0\ud558\uae30<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">\uccb4\ub825\uc758 \ucd5c\ub300\uac12\uc774 \ud56d\uc0c1 100\uc778 \uac83\uc774 \uc544\ub2c8\ub77c\uba74 <code>Slider.maxValue<\/code>\ub3c4 \uc0c1\ud0dc\uc640 \uc5f0\uacb0\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#91;SerializeField]\nprivate Slider hpSlider;\n\nprivate void Start()\n{\n    hpSlider.maxValue = player.MaxHealth;\n\n    player.Health\n        .Subscribe(health =&gt;\n        {\n            hpSlider.value = health;\n        })\n        .RegisterTo(this.GetCancellationTokenOnDestroy());\n}\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uac8c\uc784\uc5d0\uc11c \ucd5c\ub300 \uccb4\ub825\uc774 \ubcc0\uacbd\ub420 \uac00\ub2a5\uc131\uc774 \uc788\ub2e4\uba74 <code>MaxHealth<\/code> \uc5ed\uc2dc ReactiveProperty\ub85c \uad00\ub9ac\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>public ReactiveProperty&lt;int&gt; MaxHealth { get; }\n    = new(100);\n\npublic ReactiveProperty&lt;int&gt; Health { get; }\n    = new(100);\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uadf8\ub9ac\uace0 \ub450 \uc0c1\ud0dc\ub97c \uc870\ud569\ud574\uc11c UI\ub97c \uad6c\uc131\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">UI\uc5d0 \ud45c\uc2dc\ud560 \uac12 \ubcc0\ud658\ud558\uae30<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">R3\uc758 \uc7a5\uc810\uc740 Observable\uc5d0 Operator\ub97c \uc801\uc6a9\ud560 \uc218 \uc788\ub2e4\ub294 \uac83\uc774\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc608\ub97c \ub4e4\uc5b4 \uccb4\ub825 \uac12\uc744 \uadf8\ub300\ub85c \ucd9c\ub825\ud558\ub294 \ub300\uc2e0 \ubb38\uc790\uc5f4\ub85c \ubcc0\ud658\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>player.Health\n    .Select(health =&gt; $\"HP : {health}\")\n    .Subscribe(text =&gt;\n    {\n        healthText.text = text;\n    })\n    .RegisterTo(this.GetCancellationTokenOnDestroy());\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\ub370\uc774\ud130\uc758 \ud750\ub984\uc740 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>100\n \u2193\nSelect\n \u2193\n\"HP : 100\"\n \u2193\nSubscribe\n \u2193\nTMP_Text\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">UI\uc5d0\uc11c \ud544\uc694\ud55c \ud615\ud0dc\ub85c \ub370\uc774\ud130\ub97c \ubcc0\ud658\ud55c \ub2e4\uc74c \uc804\ub2ec\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">\uc870\uac74\uc5d0 \ub530\ub77c UI \ubcc0\uacbd\ud558\uae30<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\"><code>Where<\/code>\ub97c \uc0ac\uc6a9\ud558\uba74 \ud2b9\uc815 \uc870\uac74\uc744 \ub9cc\uc871\ud558\ub294 \uac12\ub9cc \ucc98\ub9ac\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc608\ub97c \ub4e4\uc5b4 \uccb4\ub825\uc774 20 \uc774\ud558\uac00 \ub418\uc5c8\uc744 \ub54c \uacbd\uace0 UI\ub97c \ud65c\uc131\ud654\ud55c\ub2e4\uace0 \ud574\ubcf4\uc790.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>player.Health\n    .Where(health =&gt; health &lt;= 20)\n    .Subscribe(_ =&gt;\n    {\n        warningObject.SetActive(true);\n    })\n    .RegisterTo(this.GetCancellationTokenOnDestroy());\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uc774\uc81c \uccb4\ub825\uc774 20 \uc774\ud558\uac00 \ub418\ub294 \uacbd\uc6b0\uc5d0\ub9cc \ucf54\ub4dc\uac00 \uc2e4\ud589\ub41c\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ub2e4\ub9cc \uc5ec\uae30\uc11c \ud55c \uac00\uc9c0 \uc8fc\uc758\ud574\uc57c \ud55c\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uccb4\ub825\uc774 \ub2e4\uc2dc 20\ubcf4\ub2e4 \ub192\uc544\uc84c\uc744 \ub54c \uacbd\uace0 UI\ub97c \ub044\uace0 \uc2f6\ub2e4\uba74 \ub2e8\uc21c\ud788 <code>Where<\/code> \ud558\ub098\ub9cc \uc0ac\uc6a9\ud558\ub294 \uac83\uc73c\ub85c\ub294 \ucda9\ubd84\ud558\uc9c0 \uc54a\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>player.Health\n    .Subscribe(health =&gt;\n    {\n        warningObject.SetActive(health &lt;= 20);\n    })\n    .RegisterTo(this.GetCancellationTokenOnDestroy());\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uc774\ub7f0 \uc2dd\uc73c\ub85c \uc0c1\ud0dc \uc804\uccb4\ub97c \uad6c\ub3c5\ud558\ub294 \uac83\uc774 \ub354 \uc801\uc808\ud558\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc989, <strong>Reactive Programming\uc744 \uc0ac\uc6a9\ud55c\ub2e4\uace0 \ud574\uc11c \ubaa8\ub4e0 \uac83\uc744 \ubcf5\uc7a1\ud55c Operator \uccb4\uc778\uc73c\ub85c \ub9cc\ub4e4 \ud544\uc694\ub294 \uc5c6\ub2e4.<\/strong><\/p>\n\n\n\n<h1 class=\"wp-block-heading\">UI Button\uacfc R3<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Button\ub3c4 Reactive \ubc29\uc2dd\uc73c\ub85c \ucc98\ub9ac\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc77c\ubc18\uc801\uc778 Unity \ubc29\uc2dd\uc740 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>button.onClick.AddListener(OnClick);\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">R3\uc5d0\uc11c\ub294 Unity\uc758 Button \uc774\ubca4\ud2b8\ub97c Observable \ud615\ud0dc\ub85c \uc5f0\uacb0\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Unity\uc6a9 R3 \ud328\ud0a4\uc9c0\uc5d0\uc11c \uc81c\uacf5\ud558\ub294 \ud655\uc7a5 \uae30\ub2a5\uc744 \uc0ac\uc6a9\ud558\uba74 Button\uc758 \ud074\ub9ad \uc774\ubca4\ud2b8\ub97c Observable\ucc98\ub7fc \ucc98\ub9ac\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc608\ub97c \ub4e4\uc5b4 \ub2e4\uc74c\uacfc \uac19\uc740 \ud615\ud0dc\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>button.OnClickAsObservable()\n    .Subscribe(_ =&gt;\n    {\n        StartGame();\n    })\n    .RegisterTo(this.GetCancellationTokenOnDestroy());\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uadf8\ub7ec\uba74 Button\uc758 \ud074\ub9ad\uc774 \ud558\ub098\uc758 \uc774\ubca4\ud2b8 \uc2a4\ud2b8\ub9bc\uc774 \ub41c\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Button Click\n     \u2193\nObservable\n     \u2193\nSubscribe\n     \u2193\nStartGame()\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uc774 \ubc29\uc2dd\uc758 \uc7a5\uc810\uc740 \ub2e4\ub978 Observable\uacfc \uc870\ud569\ud560 \uc218 \uc788\ub2e4\ub294 \uac83\uc774\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc608\ub97c \ub4e4\uc5b4 \ubc84\ud2bc \ud074\ub9ad \uc774\ud6c4 \ud2b9\uc815 \uc870\uac74\uc744 \uac80\uc0ac\ud558\uac70\ub098 \ub2e4\ub978 \uc774\ubca4\ud2b8\uc640 \uacb0\ud569\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">UI Toggle\uacfc R3<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Toggle\ub3c4 \ube44\uc2b7\ud558\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Toggle\n \u2193\nObservable\n \u2193\nSubscribe\n \u2193\n\uac8c\uc784 \uc124\uc815 \ubcc0\uacbd\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uc608\ub97c \ub4e4\uc5b4 \uc0ac\uc6b4\ub4dc \uc124\uc815\uc744 Toggle\uacfc \uc5f0\uacb0\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>toggle.OnValueChangedAsObservable()\n    .Subscribe(isOn =&gt;\n    {\n        audioManager.SetMute(!isOn);\n    })\n    .RegisterTo(this.GetCancellationTokenOnDestroy());\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Toggle\uc758 \uac12\uc774 \ubcc0\uacbd\ub420 \ub54c\ub9c8\ub2e4 <code>isOn<\/code>\uc744 \uc804\ub2ec\ubc1b\ub294\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc774\ub807\uac8c \ud558\uba74 UI\uc5d0\uc11c \ubc1c\uc0dd\ud55c \uc785\ub825\uc744 \uac8c\uc784 \uc2dc\uc2a4\ud15c\uc73c\ub85c \uc804\ub2ec\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">UI \uc785\ub825\ub3c4 \uc0c1\ud0dc\ub85c \uad00\ub9ac\ud558\uae30<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">\uc5ec\uae30\uc11c ReactiveProperty\uc758 \uc9c4\uc9dc \uc7a5\uc810\uc774 \ub098\uc628\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">UI\uc5d0\uc11c \uc785\ub825\uc744 \ubc1b\ub294 \uac83\uacfc \uac8c\uc784 \uc0c1\ud0dc\ub97c \ubcc0\uacbd\ud558\ub294 \uac83\uc744 \uc9c1\uc811 \uc5f0\uacb0\ud558\ub294 \ub300\uc2e0 <strong>UI \uc785\ub825 \u2192 \uc0c1\ud0dc \u2192 \ub2e4\ub978 UI<\/strong>\ub77c\ub294 \uad6c\uc870\ub97c \ub9cc\ub4e4 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc608\ub97c \ub4e4\uc5b4 \ubcfc\ub968 \uc124\uc815\uc774 \uc788\ub2e4\uace0 \ud558\uc790.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>public ReactiveProperty&lt;float&gt; Volume { get; }\n    = new(1.0f);\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Slider\uc758 \uc785\ub825\uc744 \uc0c1\ud0dc\uc5d0 \ubc18\uc601\ud55c\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>volumeSlider\n    .OnValueChangedAsObservable()\n    .Subscribe(value =&gt;\n    {\n        settings.Volume.Value = value;\n    })\n    .RegisterTo(this.GetCancellationTokenOnDestroy());\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uadf8\ub9ac\uace0 \ub2e4\ub978 \uc2dc\uc2a4\ud15c\uc5d0\uc11c\ub294 <code>Volume<\/code>\uc744 \uad6c\ub3c5\ud55c\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>settings.Volume\n    .Subscribe(value =&gt;\n    {\n        audioSource.volume = value;\n    })\n    .RegisterTo(this.GetCancellationTokenOnDestroy());\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uad6c\uc870\ub294 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Slider\n  \u2193\nUI Input\n  \u2193\nVolume.Value\n  \u2193\nReactiveProperty\n  \u2193\nAudio System\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uc774\ub807\uac8c \ud558\uba74 Slider\uac00 AudioSource\ub97c \uc9c1\uc811 \uc81c\uc5b4\ud558\uc9c0 \uc54a\ub294\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">UI\ub294 \uc124\uc815\uac12\uc744 \ubcc0\uacbd\ud558\uace0, Audio \uc2dc\uc2a4\ud15c\uc740 \uc124\uc815\uac12\uc758 \ubcc0\ud654\ub97c \uad00\ucc30\ud55c\ub2e4.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">\uc591\ubc29\ud5a5 \ubc14\uc778\ub529<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">\uc5ec\uae30\uc11c \ud754\ud788 \ub9d0\ud558\ub294 <strong>Two-Way Binding<\/strong>\uc774 \ub098\uc628\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc608\ub97c \ub4e4\uc5b4 \ub2e4\uc74c\uacfc \uac19\uc740 \uad6c\uc870\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"> <code>       \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n        \u2502 ReactiveProperty \u2502\n        \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n             \u2191      \u2193\n             \u2502      \u2502\n           Input   Output\n             \u2502      \u2502\n             \u2193      \u2193\n        \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n        \u2502      UI        \u2502\n        \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Slider\uc758 \uac12\uc744 \ubcc0\uacbd\ud558\uba74 Model\uc774 \ubcc0\uacbd\ub41c\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Slider\n \u2193\nVolume.Value\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\ubc18\ub300\ub85c \uac8c\uc784 \ucf54\ub4dc\uc5d0\uc11c Volume\uc744 \ubcc0\uacbd\ud558\uba74 Slider\ub3c4 \ubcc0\uacbd\ub41c\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Volume.Value\n \u2193\nSlider\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uc608\ub97c \ub4e4\uc5b4 \ub2e4\uc74c\uacfc \uac19\uc774 \uad6c\ud604\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>settings.Volume\n    .Subscribe(value =&gt;\n    {\n        volumeSlider.SetValueWithoutNotify(value);\n    })\n    .RegisterTo(this.GetCancellationTokenOnDestroy());\n\nvolumeSlider\n    .OnValueChangedAsObservable()\n    .Subscribe(value =&gt;\n    {\n        settings.Volume.Value = value;\n    })\n    .RegisterTo(this.GetCancellationTokenOnDestroy());\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uc5ec\uae30\uc11c <code>SetValueWithoutNotify<\/code>\uac00 \uc911\uc694\ud558\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Model\uc5d0\uc11c Slider\ub97c \ubcc0\uacbd\ud588\uc744 \ub54c Slider\uc758 \uc774\ubca4\ud2b8\uae4c\uc9c0 \ub2e4\uc2dc \ubc1c\uc0dd\uc2dc\ud0a4\uba74 \ub2e4\uc74c\uacfc \uac19\uc740 \uc21c\ud658\uc774 \ubc1c\uc0dd\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Volume \ubcc0\uacbd\n \u2193\nSlider \ubcc0\uacbd\n \u2193\nSlider \uc774\ubca4\ud2b8\n \u2193\nVolume \ubcc0\uacbd\n \u2193\nSlider \ubcc0\uacbd\n \u2193\n...\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\ub530\ub77c\uc11c \ucf54\ub4dc\uc5d0 \ub530\ub77c \uc774\ubca4\ud2b8\ub97c \ubc1c\uc0dd\uc2dc\ud0a4\uc9c0 \uc54a\uace0 UI\ub9cc \uac31\uc2e0\ud574\uc57c \ud558\ub294 \uacbd\uc6b0\uac00 \uc788\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc774\uac83\uc774 \uc591\ubc29\ud5a5 \ubc14\uc778\ub529\uc5d0\uc11c \uc790\uc8fc \ubc1c\uc0dd\ud558\ub294 \ubb38\uc81c\ub2e4.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">BindableReactiveProperty\ub294 \ubb34\uc5c7\uc778\uac00?<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">R3\ub97c \uc0ac\uc6a9\ud558\ub2e4 \ubcf4\uba74 <code>BindableReactiveProperty<\/code>\ub77c\ub294 \uc774\ub984\uc744 \uc811\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc774\uac83\uc740 \uc77c\ubc18\uc801\uc778 ReactiveProperty\uc640 \ub2ec\ub9ac <strong>UI \ubc14\uc778\ub529\uc744 \ubcf4\ub2e4 \uc9c1\uc811\uc801\uc73c\ub85c \uc9c0\uc6d0\ud558\uae30 \uc704\ud55c \uac1c\ub150<\/strong>\uc774\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ud558\uc9c0\ub9cc \uc5ec\uae30\uc11c \uc911\uc694\ud55c \uac83\uc740 R3\uc758 ReactiveProperty \uc790\uccb4\uac00 WPF \uc804\uc6a9\uc774\ub77c\ub294 \uac83\uc774 \uc544\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">R3\uc758 ReactiveProperty\ub294 \uae30\ubcf8\uc801\uc73c\ub85c UI \ud504\ub808\uc784\uc6cc\ud06c\uc5d0 \uc885\uc18d\ub41c \uac1c\ub150\uc774 \uc544\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Unity\uc5d0\uc11c\ub3c4 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>ReactiveProperty&lt;int&gt;\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\ub97c \uac8c\uc784 \uc0c1\ud0dc\ub85c \uc0ac\uc6a9\ud558\uace0,<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Subscribe(...)\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\ub97c \uc774\uc6a9\ud574 Unity UI\uc640 \uc5f0\uacb0\ud558\uba74 \ub41c\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc989,<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>ReactiveProperty\n        \u2193\nUI Framework\uc5d0 \ub9de\ub294 Binding\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uc774\ub77c\ub294 \uad6c\uc870\ub85c \uc774\ud574\ud558\ub294 \uac83\uc774 \uc815\ud655\ud558\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Unity\uc5d0\uc11c\ub294 \ubc18\ub4dc\uc2dc <code>BindableReactiveProperty<\/code>\ub97c \uc0ac\uc6a9\ud574\uc57c\ub9cc UI \ubc14\uc778\ub529\uc744 \ud560 \uc218 \uc788\ub294 \uac83\uc740 \uc544\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc624\ud788\ub824 Unity \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c\ub294 <code>ReactiveProperty + Subscribe<\/code> \ubc29\uc2dd\uc73c\ub85c \uc9c1\uc811 UI\ub97c \uc5f0\uacb0\ud558\ub294 \uac83\uc774 \ub2e8\uc21c\ud558\uace0 \uba85\ud655\ud55c \uacbd\uc6b0\uac00 \ub9ce\ub2e4.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">UI \ubc14\uc778\ub529\uc744 \ubcc4\ub3c4\uc758 View\uc5d0\uc11c \uad00\ub9ac\ud558\uae30<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">\ud504\ub85c\uc81d\ud2b8 \uaddc\ubaa8\uac00 \ucee4\uc9c0\uba74 UI \ucf54\ub4dc\uc640 \uac8c\uc784 \ub85c\uc9c1\uc744 \ubd84\ub9ac\ud558\ub294 \uac83\uc774 \uc88b\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc608\ub97c \ub4e4\uc5b4 \ub2e4\uc74c\uacfc \uac19\uc774 \uad6c\uc131\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>PlayerModel\n \u251c\u2500 Health\n \u251c\u2500 Gold\n \u2514\u2500 Level\n\nPlayerView\n \u251c\u2500 HP Text\n \u251c\u2500 HP Slider\n \u251c\u2500 Gold Text\n \u2514\u2500 Level Text\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Model:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>public class PlayerModel\n{\n    public ReactiveProperty&lt;int&gt; Health { get; }\n        = new(100);\n\n    public ReactiveProperty&lt;int&gt; Gold { get; }\n        = new(0);\n\n    public ReactiveProperty&lt;int&gt; Level { get; }\n        = new(1);\n}\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">View:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>public class PlayerView : MonoBehaviour\n{\n    &#91;SerializeField]\n    private TMP_Text hpText;\n\n    &#91;SerializeField]\n    private TMP_Text goldText;\n\n    &#91;SerializeField]\n    private TMP_Text levelText;\n\n    private PlayerModel player;\n\n    public void Bind(PlayerModel player)\n    {\n        this.player = player;\n\n        player.Health\n            .Subscribe(value =&gt;\n            {\n                hpText.text = $\"HP : {value}\";\n            })\n            .RegisterTo(this.GetCancellationTokenOnDestroy());\n\n        player.Gold\n            .Subscribe(value =&gt;\n            {\n                goldText.text = $\"Gold : {value}\";\n            })\n            .RegisterTo(this.GetCancellationTokenOnDestroy());\n\n        player.Level\n            .Subscribe(value =&gt;\n            {\n                levelText.text = $\"Lv. {value}\";\n            })\n            .RegisterTo(this.GetCancellationTokenOnDestroy());\n    }\n}\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uc774\ub807\uac8c \ud558\uba74 Model\uc740 Unity UI\ub97c \uc804\ud600 \uc54c\uc9c0 \uc54a\ub294\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">View\uac00 Model\uc758 \uc0c1\ud0dc\ub97c \uad6c\ub3c5\ud558\uba74\uc11c UI\ub97c \uac31\uc2e0\ud55c\ub2e4.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">ViewModel\uc744 \uc0ac\uc6a9\ud558\ub294 \uad6c\uc870<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">\ub354 \ubcf5\uc7a1\ud55c \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c\ub294 View\uc640 Model \uc0ac\uc774\uc5d0 ViewModel\uc744 \ub458 \uc218\ub3c4 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Model\n \u2193\nViewModel\n \u2193\nView\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uc608\ub97c \ub4e4\uc5b4 Model\uc5d0\ub294 \uc22b\uc790 \ud615\ud0dc\uc758 HP\uac00 \uc788\uace0 ViewModel\uc5d0\uc11c UI\uc5d0 \ud544\uc694\ud55c \ubb38\uc790\uc5f4\ub85c \ubcc0\ud658\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>public class PlayerViewModel\n{\n    public Observable&lt;string&gt; HealthText { get; }\n\n    public PlayerViewModel(PlayerModel model)\n    {\n        HealthText = model.Health\n            .Select(x =&gt; $\"HP : {x}\");\n    }\n}\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">View\uc5d0\uc11c\ub294 ViewModel\uc744 \uad6c\ub3c5\ud55c\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>viewModel.HealthText\n    .Subscribe(text =&gt;\n    {\n        hpText.text = text;\n    })\n    .RegisterTo(this.GetCancellationTokenOnDestroy());\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uc774\ub807\uac8c \ud558\uba74 View\ub294 \uac8c\uc784 \ub370\uc774\ud130\ub97c \uc5b4\ub5bb\uac8c \uacc4\uc0b0\ud558\ub294\uc9c0 \uc54c \ud544\uc694\uac00 \uc5c6\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Model\n \u2193\n\uc6d0\ubcf8 \ub370\uc774\ud130\n \u2193\nViewModel\n \u2193\nUI\uc6a9 \ub370\uc774\ud130\n \u2193\nView\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uac8c\uc784 \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c MVVM\uc774\ub098 \uc720\uc0ac\ud55c \uad6c\uc870\ub97c \uad6c\ud604\ud560 \ub54c R3\uac00 \uc0c1\ub2f9\ud788 \uc720\uc6a9\ud558\uac8c \uc0ac\uc6a9\ub420 \uc218 \uc788\ub294 \uc774\uc720\ub2e4.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">R3\uc5d0\uc11c Dispose\uac00 \uc911\uc694\ud55c \uc774\uc720<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Reactive Programming\uc5d0\uc11c \uac00\uc7a5 \uc911\uc694\ud55c \ubb38\uc81c \uc911 \ud558\ub098\uac00 \uad6c\ub3c5\uc758 \uc218\uba85\uc774\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ub2e4\uc74c \ucf54\ub4dc\uac00 \uc788\ub2e4\uace0 \ud558\uc790.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>player.Health\n    .Subscribe(value =&gt;\n    {\n        hpText.text = value.ToString();\n    });\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">UI\uac00 \uc0ad\uc81c\ub410\ub294\ub370 \uad6c\ub3c5\uc774 \uacc4\uc18d \uc720\uc9c0\ub418\ub294 \uad6c\uc870\ub77c\uba74 \ubb38\uc81c\uac00 \ubc1c\uc0dd\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Unity\uc5d0\uc11c\ub294 GameObject\uc758 \uc0dd\uba85\uc8fc\uae30\uc640 Subscription\uc758 \uc0dd\uba85\uc8fc\uae30\ub97c \uc5f0\uacb0\ud558\ub294 \uac83\uc774 \uc911\uc694\ud558\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ub300\ud45c\uc801\uc73c\ub85c \ub2e4\uc74c\uacfc \uac19\uc774 \ucc98\ub9ac\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>player.Health\n    .Subscribe(value =&gt;\n    {\n        hpText.text = value.ToString();\n    })\n    .RegisterTo(this.GetCancellationTokenOnDestroy());\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uc774\ub807\uac8c \ud558\uba74 <code>PlayerView<\/code>\uac00 \ud30c\uad34\ub420 \ub54c \ud574\ub2f9 \uad6c\ub3c5\ub3c4 \uc815\ub9ac\ub41c\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Reactive Programming\uc744 \uc0ac\uc6a9\ud560 \ub54c\ub294 \ub2e8\uc21c\ud788 <code>Subscribe<\/code>\ud558\ub294 \uac83\ub9cc\ud07c <strong>\uc5b8\uc81c \uad6c\ub3c5\uc774 \ub05d\ub098\ub294\uc9c0<\/strong>\ub97c \uc0dd\uac01\ud574\uc57c \ud55c\ub2e4.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">R3\ub97c \uc0ac\uc6a9\ud55c\ub2e4\uace0 \ubaa8\ub4e0 \uac83\uc744 Reactive\ub85c \ub9cc\ub4e4 \ud544\uc694\ub294 \uc5c6\ub2e4<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">R3\ub97c \ub3c4\uc785\ud588\ub2e4\uace0 \ud574\uc11c \ubaa8\ub4e0 \ub370\uc774\ud130\ub97c <code>ReactiveProperty<\/code>\ub85c \ub9cc\ub4e4 \ud544\uc694\ub294 \uc5c6\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc608\ub97c \ub4e4\uc5b4 \ub2e4\uc74c\uacfc \uac19\uc740 \ucf54\ub4dc\ub294 \uad73\uc774 Reactive\ud560 \uc774\uc720\uac00 \uc5c6\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>private int damage = 10;\n\nprivate int CalculateDamage()\n{\n    return damage * 2;\n}\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uadf8\ub0e5 \uc77c\ubc18\uc801\uc778 C# \ucf54\ub4dc\ub85c \uc791\uc131\ud558\uba74 \ub41c\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ubc18\uba74 \ub2e4\uc74c\uacfc \uac19\uc740 \uad6c\uc870\ub294 Reactive Programming\uacfc \uc798 \ub9de\ub294\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\ud50c\ub808\uc774\uc5b4 HP \ubcc0\uacbd\n \u2193\nHP UI \ubcc0\uacbd\n \u2193\nHP 0\n \u2193\n\uc0ac\ub9dd \ucc98\ub9ac\n \u2193\n\uc560\ub2c8\uba54\uc774\uc158\n \u2193\n\uc0ac\uc6b4\ub4dc\n \u2193\n\ud018\uc2a4\ud2b8 \ucc98\ub9ac\n \u2193\n\ubcf4\uc0c1 \ucc98\ub9ac\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\ud558\ub098\uc758 \uc0c1\ud0dc \ubcc0\ud654\uac00 \uc5ec\ub7ec \uc2dc\uc2a4\ud15c\uc73c\ub85c \uc804\ub2ec\ub418\ub294 \uad6c\uc870\ub77c\uba74 Observable\uc774 \uac15\ub825\ud574\uc9c4\ub2e4.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">R3\uc640 UI \ubc14\uc778\ub529\uc758 \ud575\uc2ec<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Unity\uc5d0\uc11c R3\ub97c \uc774\uc6a9\ud55c UI \ubc14\uc778\ub529\uc740 \ubcf5\uc7a1\ud558\uac8c \uc0dd\uac01\ud560 \ud544\uc694\uac00 \uc5c6\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uac00\uc7a5 \uae30\ubcf8\uc801\uc778 \uad6c\uc870\ub294 \uc774\uac83\uc774\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Model\n \u2193\nReactiveProperty\n \u2193\nSubscribe\n \u2193\nUnity UI\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">UI \uc785\ub825\uae4c\uc9c0 \ud3ec\ud568\ud558\uba74 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"> <code>       \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n        \u2502 ReactiveProperty\u2502\n        \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n             \u2191       \u2193\n             \u2502       \u2502\n          UI Input   UI Output\n             \u2502       \u2502\n             \u2193       \u2193\n        \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n        \u2502      Unity UI   \u2502\n        \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uadf8\ub9ac\uace0 \uc2e4\uc81c \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c\ub294 \uc5ec\uae30\uc5d0 <code>ViewModel<\/code>, <code>Operator<\/code>, <code>Subject<\/code>, <code>Dispose<\/code> \ub4f1\uc744 \ucd94\uac00\ud558\uba74\uc11c \uad6c\uc870\ub97c \ud655\uc7a5\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uacb0\uad6d R3\uc758 \ud575\uc2ec\uc740 UI\ub97c \uc790\ub3d9\uc73c\ub85c \uc5f0\uacb0\ud574\uc8fc\ub294 \ub9c8\ubc95 \uac19\uc740 \uae30\ub2a5\uc774 \uc544\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\uc0c1\ud0dc\uc640 \uc774\ubca4\ud2b8\ub97c Observable\uc774\ub77c\ub294 \ub370\uc774\ud130 \ud750\ub984\uc73c\ub85c \ud45c\ud604\ud558\uace0, UI\ub294 \uadf8 \ud750\ub984\uc744 \uad6c\ub3c5\ud558\ub3c4\ub85d \ub9cc\ub4dc\ub294 \uac83<\/strong>\uc774\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc774 \uad6c\uc870\ub97c \uc774\ud574\ud558\uba74 <code>ReactiveProperty<\/code>, <code>Subject<\/code>, <code>Subscribe<\/code>, <code>Where<\/code>, <code>Select<\/code>, <code>Dispose<\/code> \uac19\uc740 R3 API\uac00 \uac01\uac01 \uc65c \uc874\uc7ac\ud558\ub294\uc9c0\ub3c4 \uc790\uc5f0\uc2a4\ub7fd\uac8c \uc774\ud574\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Unity\uc5d0\uc11c R3\ub97c \uc81c\ub300\ub85c \ud65c\uc6a9\ud558\ub824\uba74 \ub2e8\uc21c\ud788 \uae30\uc874 \uc774\ubca4\ud2b8 \ucf54\ub4dc\ub97c R3 \ubb38\ubc95\uc73c\ub85c \ubc14\uafb8\ub294 \uac83\ubcf4\ub2e4, <strong>\uac8c\uc784 \uc0c1\ud0dc\uc640 UI \uc0ac\uc774\uc758 \uc758\uc874\uc131\uc744 \uc5b4\ub5bb\uac8c \ub04a\uace0 \ub370\uc774\ud130\uc758 \ud750\ub984\uc744 \uc5b4\ub5bb\uac8c \uc124\uacc4\ud560 \uac83\uc778\uac00<\/strong>\ub97c \uba3c\uc800 \uc0dd\uac01\ud558\ub294 \uac83\uc774 \uc911\uc694\ud558\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Unity\uc5d0\uc11c \uac8c\uc784\uc744 \uac1c\ubc1c\ud558\ub2e4 \ubcf4\uba74 \uc0c1\ud0dc \ubcc0\ud654\uc5d0 \ub530\ub77c UI\ub97c \uac31\uc2e0\ud574\uc57c \ud558\ub294 \uc0c1\ud669\uc774 \uacc4\uc18d \ubc1c\uc0dd\ud55c\ub2e4. \ud50c\ub808\uc774\uc5b4\uc758 \uccb4\ub825\uc774 \ubcc0\uacbd\ub418\uba74 HP Bar\ub97c \ubcc0\uacbd\ud574\uc57c \ud558\uace0, \uace8\ub4dc\ub97c \ud68d\ub4dd\ud558\uba74 \uace8\ub4dc UI\ub97c \uac31\uc2e0\ud574\uc57c \ud55c\ub2e4. \uc124\uc815\uac12\uc774 \ubcc0\uacbd\ub418\uba74 Toggle\uc774\ub098 Slider\uc758 \uc0c1\ud0dc\ub3c4 \ubcc0\uacbd\ud574\uc57c \ud55c\ub2e4. \uc77c\ubc18\uc801\uc73c\ub85c\ub294 \uc774\ubca4\ud2b8\ub97c \ub9cc\ub4e4\uc5b4 \ucc98\ub9ac\ud55c\ub2e4. \uadf8\ub9ac\uace0 \uac12\uc774 \ubcc0\uacbd\ub420 \ub54c\ub9c8\ub2e4 \uc774\ubca4\ud2b8\ub97c \ud638\ucd9c\ud55c\ub2e4. UI\uc5d0\uc11c\ub294 \uc774\ubca4\ud2b8\ub97c \uad6c\ub3c5\ud55c\ub2e4. \uc791\uc740 \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c\ub294 \ubb38\uc81c\uac00 \uc5c6\ub2e4. \ud558\uc9c0\ub9cc \ud504\ub85c\uc81d\ud2b8\uac00 \ucee4\uc9c0\uba74 \uc0c1\ud0dc, \uc774\ubca4\ud2b8, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[53],"tags":[],"class_list":["post-2594","post","type-post","status-publish","format-standard","hentry","category-game"],"_links":{"self":[{"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=\/wp\/v2\/posts\/2594","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2594"}],"version-history":[{"count":1,"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=\/wp\/v2\/posts\/2594\/revisions"}],"predecessor-version":[{"id":2595,"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=\/wp\/v2\/posts\/2594\/revisions\/2595"}],"wp:attachment":[{"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2594"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2594"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2594"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}