공개: alpha.5 기준선 갱신

2026-04-16 12:04:40 +09:00 · 2026-04-16 12:04:40 +09:00 · 00da320d96
commit 00da320d96
parent b63832706b
62 changed files with 883 additions and 175 deletions
--- a/src/PhysOn.Desktop/Assets/kotalk-mark-128.png
+++ b/src/PhysOn.Desktop/Assets/kotalk-mark-128.png
--- a/src/PhysOn.Desktop/Assets/kotalk.ico
+++ b/src/PhysOn.Desktop/Assets/kotalk.ico
--- a/src/PhysOn.Desktop/PhysOn.Desktop.csproj
+++ b/src/PhysOn.Desktop/PhysOn.Desktop.csproj
@ -4,7 +4,18 @@
    <TargetFramework>net8.0</TargetFramework>
    <ImplicitUsings>enable</ImplicitUsings>
    <Nullable>enable</Nullable>
+    <AssemblyName>KoTalk</AssemblyName>
    <ApplicationManifest>app.manifest</ApplicationManifest>
+    <ApplicationIcon>Assets\kotalk.ico</ApplicationIcon>
+    <Company>PHYSIA</Company>
+    <Authors>PHYSIA</Authors>
+    <Product>KoTalk</Product>
+    <Description>한국어 중심의 차분한 메시징 경험을 다시 설계하는 Windows-first 메신저</Description>
+    <AssemblyTitle>KoTalk</AssemblyTitle>
+    <AssemblyVersion>0.1.0.5</AssemblyVersion>
+    <FileVersion>0.1.0.5</FileVersion>
+    <Version>0.1.0-alpha.5</Version>
+    <InformationalVersion>0.1.0-alpha.5</InformationalVersion>
    <AvaloniaUseCompiledBindingsByDefault>true</AvaloniaUseCompiledBindingsByDefault>
  </PropertyGroup>

--- a/src/PhysOn.Desktop/ViewModels/MainWindowViewModel.cs
+++ b/src/PhysOn.Desktop/ViewModels/MainWindowViewModel.cs
@ -329,7 +329,7 @@ public partial class MainWindowViewModel : ViewModelBase, IAsyncDisposable
                    $"desktop-{Environment.MachineName.ToLowerInvariant()}",
                    "windows",
                    Environment.MachineName,
-                    "0.1.0-alpha.4"));
+                    "0.1.0-alpha.5"));

            var response = await _apiClient.RegisterAlphaQuickAsync(apiBaseUrl, request, CancellationToken.None);
            ApiBaseUrl = apiBaseUrl;
--- a/src/PhysOn.Desktop/Views/ConversationWindow.axaml
+++ b/src/PhysOn.Desktop/Views/ConversationWindow.axaml
@ -7,55 +7,55 @@
        Height="748"
        MinWidth="340"
        MinHeight="520"
-        Background="#F3F4F6"
+        Background="#F7F3EE"
        Title="{Binding ConversationTitle}">

    <Window.Styles>
        <Style Selector="Border.surface">
            <Setter Property="CornerRadius" Value="2" />
            <Setter Property="Background" Value="#FFFFFF" />
-            <Setter Property="BorderBrush" Value="#E5E7EB" />
+            <Setter Property="BorderBrush" Value="#E8DDD2" />
            <Setter Property="BorderThickness" Value="1" />
        </Style>
        <Style Selector="Border.muted">
            <Setter Property="CornerRadius" Value="2" />
-            <Setter Property="Background" Value="#F7F8FA" />
-            <Setter Property="BorderBrush" Value="#E8EAEE" />
+            <Setter Property="Background" Value="#FBF7F2" />
+            <Setter Property="BorderBrush" Value="#ECE1D6" />
            <Setter Property="BorderThickness" Value="1" />
        </Style>
        <Style Selector="Border.bubble">
            <Setter Property="CornerRadius" Value="2" />
            <Setter Property="Padding" Value="9,7" />
            <Setter Property="Margin" Value="0,0,0,6" />
-            <Setter Property="Background" Value="#F7F8FA" />
-            <Setter Property="BorderBrush" Value="#E4E7EB" />
+            <Setter Property="Background" Value="#FBF7F2" />
+            <Setter Property="BorderBrush" Value="#E6D8CC" />
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="HorizontalAlignment" Value="Left" />
        </Style>
        <Style Selector="Border.bubble.mine">
-            <Setter Property="Background" Value="#EEF1F4" />
+            <Setter Property="Background" Value="#F0E5D8" />
            <Setter Property="HorizontalAlignment" Value="Right" />
        </Style>
        <Style Selector="Button.icon">
            <Setter Property="CornerRadius" Value="2" />
            <Setter Property="Padding" Value="8,6" />
-            <Setter Property="Background" Value="#F7F8FA" />
-            <Setter Property="BorderBrush" Value="#D9DDE2" />
+            <Setter Property="Background" Value="#FBF7F2" />
+            <Setter Property="BorderBrush" Value="#DCCFC4" />
            <Setter Property="BorderThickness" Value="1" />
        </Style>
        <Style Selector="Button.primary">
            <Setter Property="CornerRadius" Value="2" />
            <Setter Property="Padding" Value="11,8" />
-            <Setter Property="Background" Value="#111418" />
+            <Setter Property="Background" Value="#394350" />
            <Setter Property="Foreground" Value="#FFFFFF" />
        </Style>
        <Style Selector="TextBlock.caption">
            <Setter Property="FontSize" Value="11.5" />
-            <Setter Property="Foreground" Value="#69727D" />
+            <Setter Property="Foreground" Value="#82766D" />
        </Style>
        <Style Selector="TextBlock.body">
            <Setter Property="FontSize" Value="13" />
-            <Setter Property="Foreground" Value="#111418" />
+            <Setter Property="Foreground" Value="#20242B" />
        </Style>
    </Window.Styles>

@ -67,14 +67,14 @@
                               VerticalAlignment="Center"
                               Text="{Binding ConversationGlyph}"
                               FontWeight="SemiBold"
-                               Foreground="#111418" />
+                               Foreground="#20242B" />
                </Border>

                <StackPanel Grid.Column="1" Spacing="2">
                    <TextBlock Text="{Binding ConversationTitle}"
                               FontSize="14.5"
                               FontWeight="SemiBold"
-                               Foreground="#111418"
+                               Foreground="#20242B"
                               TextTrimming="CharacterEllipsis" />
                    <TextBlock Text="{Binding ConversationSubtitle}"
                               Classes="caption"
@ -97,7 +97,7 @@
                Padding="9"
                IsVisible="{Binding HasErrorText}">
            <TextBlock Text="{Binding ErrorText}"
-                       Foreground="#C62828"
+                       Foreground="#C9573C"
                       Classes="caption"
                       TextWrapping="Wrap" />
        </Border>
--- a/src/PhysOn.Desktop/Views/MainWindow.axaml
+++ b/src/PhysOn.Desktop/Views/MainWindow.axaml
@ -14,7 +14,7 @@
        Height="900"
        MinWidth="980"
        MinHeight="640"
-        Background="#F3F4F6">
+        Background="#F7F3EE">

    <Design.DataContext>
        <vm:MainWindowViewModel />
@ -24,112 +24,112 @@
        <Style Selector="Border.surface">
            <Setter Property="CornerRadius" Value="2" />
            <Setter Property="Background" Value="#FFFFFF" />
-            <Setter Property="BorderBrush" Value="#E5E7EB" />
+            <Setter Property="BorderBrush" Value="#E8DDD2" />
            <Setter Property="BorderThickness" Value="1" />
        </Style>
        <Style Selector="Border.surface-muted">
            <Setter Property="CornerRadius" Value="2" />
-            <Setter Property="Background" Value="#F7F8FA" />
-            <Setter Property="BorderBrush" Value="#E8EAEE" />
+            <Setter Property="Background" Value="#FBF7F2" />
+            <Setter Property="BorderBrush" Value="#ECE1D6" />
            <Setter Property="BorderThickness" Value="1" />
        </Style>
        <Style Selector="Border.rail-surface">
            <Setter Property="CornerRadius" Value="2" />
            <Setter Property="Background" Value="#FFFFFF" />
-            <Setter Property="BorderBrush" Value="#E5E7EB" />
+            <Setter Property="BorderBrush" Value="#E8DDD2" />
            <Setter Property="BorderThickness" Value="1" />
        </Style>
        <Style Selector="Border.row-card">
            <Setter Property="CornerRadius" Value="2" />
            <Setter Property="Background" Value="#FFFFFF" />
-            <Setter Property="BorderBrush" Value="#ECEFF3" />
+            <Setter Property="BorderBrush" Value="#ECE2D8" />
            <Setter Property="BorderThickness" Value="1" />
        </Style>
        <Style Selector="Border.row-card.active">
-            <Setter Property="Background" Value="#F3F5F7" />
-            <Setter Property="BorderBrush" Value="#D7DCE3" />
+            <Setter Property="Background" Value="#F4ECE3" />
+            <Setter Property="BorderBrush" Value="#DCCABA" />
        </Style>
        <Style Selector="Border.inline-alert">
            <Setter Property="CornerRadius" Value="2" />
            <Setter Property="Background" Value="#FFFFFF" />
-            <Setter Property="BorderBrush" Value="#D14B3F" />
+            <Setter Property="BorderBrush" Value="#C9573C" />
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="Padding" Value="10,8" />
        </Style>
        <Style Selector="Border.status-chip">
            <Setter Property="CornerRadius" Value="2" />
-            <Setter Property="Background" Value="#F7F8FA" />
-            <Setter Property="BorderBrush" Value="#E4E7EB" />
+            <Setter Property="Background" Value="#FBF7F2" />
+            <Setter Property="BorderBrush" Value="#E6D8CC" />
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="Padding" Value="8,3" />
        </Style>
        <Style Selector="Border.unread-badge">
            <Setter Property="CornerRadius" Value="2" />
-            <Setter Property="Background" Value="#111418" />
+            <Setter Property="Background" Value="#394350" />
            <Setter Property="Padding" Value="6,1" />
        </Style>
        <Style Selector="Border.message-bubble">
            <Setter Property="CornerRadius" Value="2" />
-            <Setter Property="Background" Value="#F7F8FA" />
-            <Setter Property="BorderBrush" Value="#E4E7EB" />
+            <Setter Property="Background" Value="#FBF7F2" />
+            <Setter Property="BorderBrush" Value="#E6D8CC" />
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="MaxWidth" Value="560" />
            <Setter Property="Margin" Value="0,0,0,6" />
            <Setter Property="HorizontalAlignment" Value="Left" />
        </Style>
        <Style Selector="Border.message-bubble.mine">
-            <Setter Property="Background" Value="#EEF1F4" />
+            <Setter Property="Background" Value="#F0E5D8" />
            <Setter Property="HorizontalAlignment" Value="Right" />
        </Style>
        <Style Selector="Border.message-bubble.pending">
            <Setter Property="Opacity" Value="0.72" />
        </Style>
        <Style Selector="Border.message-bubble.failed">
-            <Setter Property="BorderBrush" Value="#C9392C" />
+            <Setter Property="BorderBrush" Value="#C9573C" />
        </Style>
        <Style Selector="TextBlock.display-title">
            <Setter Property="FontSize" Value="30" />
            <Setter Property="FontWeight" Value="SemiBold" />
-            <Setter Property="Foreground" Value="#111418" />
+            <Setter Property="Foreground" Value="#20242B" />
        </Style>
        <Style Selector="TextBlock.section-title">
            <Setter Property="FontSize" Value="15" />
            <Setter Property="FontWeight" Value="SemiBold" />
-            <Setter Property="Foreground" Value="#111418" />
+            <Setter Property="Foreground" Value="#20242B" />
        </Style>
        <Style Selector="TextBlock.body">
            <Setter Property="FontSize" Value="12.5" />
-            <Setter Property="Foreground" Value="#1D232B" />
+            <Setter Property="Foreground" Value="#2E3640" />
        </Style>
        <Style Selector="TextBlock.caption">
            <Setter Property="FontSize" Value="11.5" />
-            <Setter Property="Foreground" Value="#69727D" />
+            <Setter Property="Foreground" Value="#82766D" />
        </Style>
        <Style Selector="TextBlock.eyebrow">
            <Setter Property="FontSize" Value="10.5" />
            <Setter Property="FontWeight" Value="SemiBold" />
-            <Setter Property="Foreground" Value="#69727D" />
+            <Setter Property="Foreground" Value="#8B7B6C" />
        </Style>
        <Style Selector="TextBox.input">
            <Setter Property="CornerRadius" Value="2" />
            <Setter Property="Padding" Value="11,8" />
            <Setter Property="Background" Value="#FFFFFF" />
-            <Setter Property="BorderBrush" Value="#D8DDE4" />
+            <Setter Property="BorderBrush" Value="#DCCFC4" />
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="FontSize" Value="13" />
        </Style>
        <Style Selector="TextBox.search-input">
            <Setter Property="CornerRadius" Value="2" />
            <Setter Property="Padding" Value="9,7" />
-            <Setter Property="Background" Value="#F7F8FA" />
-            <Setter Property="BorderBrush" Value="#E5E7EB" />
+            <Setter Property="Background" Value="#FBF7F2" />
+            <Setter Property="BorderBrush" Value="#E8DDD2" />
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="FontSize" Value="13" />
        </Style>
        <Style Selector="Button.primary-button">
            <Setter Property="CornerRadius" Value="2" />
            <Setter Property="Padding" Value="12,9" />
-            <Setter Property="Background" Value="#111418" />
+            <Setter Property="Background" Value="#394350" />
            <Setter Property="Foreground" Value="#FFFFFF" />
            <Setter Property="FontWeight" Value="SemiBold" />
        </Style>
@ -137,8 +137,8 @@
            <Setter Property="CornerRadius" Value="2" />
            <Setter Property="Padding" Value="10,8" />
            <Setter Property="Background" Value="#FFFFFF" />
-            <Setter Property="Foreground" Value="#1E252C" />
-            <Setter Property="BorderBrush" Value="#D8DDE4" />
+            <Setter Property="Foreground" Value="#394350" />
+            <Setter Property="BorderBrush" Value="#DCCFC4" />
            <Setter Property="BorderThickness" Value="1" />
        </Style>
        <Style Selector="Button.icon-button">
@ -146,9 +146,9 @@
            <Setter Property="MinWidth" Value="30" />
            <Setter Property="CornerRadius" Value="2" />
            <Setter Property="Padding" Value="8,0" />
-            <Setter Property="Background" Value="#F7F8FA" />
-            <Setter Property="Foreground" Value="#1E252C" />
-            <Setter Property="BorderBrush" Value="#E5E7EB" />
+            <Setter Property="Background" Value="#FBF7F2" />
+            <Setter Property="Foreground" Value="#394350" />
+            <Setter Property="BorderBrush" Value="#E8DDD2" />
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="FontSize" Value="12" />
        </Style>
@ -162,16 +162,16 @@
        <Style Selector="Button.filter-button">
            <Setter Property="CornerRadius" Value="2" />
            <Setter Property="Padding" Value="9,5" />
-            <Setter Property="Background" Value="#F7F8FA" />
-            <Setter Property="Foreground" Value="#69727D" />
-            <Setter Property="BorderBrush" Value="#E5E7EB" />
+            <Setter Property="Background" Value="#FBF7F2" />
+            <Setter Property="Foreground" Value="#7F736A" />
+            <Setter Property="BorderBrush" Value="#E8DDD2" />
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="FontSize" Value="12" />
        </Style>
        <Style Selector="Button.filter-button.selected">
-            <Setter Property="Background" Value="#111418" />
+            <Setter Property="Background" Value="#394350" />
            <Setter Property="Foreground" Value="#FFFFFF" />
-            <Setter Property="BorderBrush" Value="#111418" />
+            <Setter Property="BorderBrush" Value="#394350" />
        </Style>
        <Style Selector="Button.rail-button">
            <Setter Property="Width" Value="38" />
@ -179,15 +179,15 @@
            <Setter Property="CornerRadius" Value="2" />
            <Setter Property="Padding" Value="0" />
            <Setter Property="Background" Value="#FFFFFF" />
-            <Setter Property="Foreground" Value="#1E252C" />
-            <Setter Property="BorderBrush" Value="#E5E7EB" />
+            <Setter Property="Foreground" Value="#394350" />
+            <Setter Property="BorderBrush" Value="#E8DDD2" />
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="FontSize" Value="13" />
        </Style>
        <Style Selector="Button.rail-button.active">
-            <Setter Property="Background" Value="#111418" />
+            <Setter Property="Background" Value="#394350" />
            <Setter Property="Foreground" Value="#FFFFFF" />
-            <Setter Property="BorderBrush" Value="#111418" />
+            <Setter Property="BorderBrush" Value="#394350" />
        </Style>
        <Style Selector="Button.row-button">
            <Setter Property="Background" Value="Transparent" />
@ -199,8 +199,8 @@
            <Setter Property="CornerRadius" Value="2" />
            <Setter Property="Padding" Value="9,5" />
            <Setter Property="Background" Value="#FFFFFF" />
-            <Setter Property="Foreground" Value="#4A5560" />
-            <Setter Property="BorderBrush" Value="#E5E7EB" />
+            <Setter Property="Foreground" Value="#7F736A" />
+            <Setter Property="BorderBrush" Value="#E8DDD2" />
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="FontSize" Value="11.5" />
        </Style>
@ -215,13 +215,9 @@
                <StackPanel Spacing="14">
                    <StackPanel Spacing="8">
                        <TextBlock Text="KO · TALK" Classes="eyebrow" />
-                        <Border Width="50" Height="50" Classes="surface-muted" HorizontalAlignment="Left">
-                            <TextBlock HorizontalAlignment="Center"
-                                       VerticalAlignment="Center"
-                                       Text="KO"
-                                       FontSize="18"
-                                       FontWeight="Bold"
-                                       Foreground="#111418" />
+                        <Border Width="50" Height="50" Classes="surface-muted" HorizontalAlignment="Left" Padding="7">
+                            <Image Source="avares://PhysOn.Desktop/Assets/kotalk-mark-128.png"
+                                   Stretch="Uniform" />
                        </Border>
                        <TextBlock Text="KoTalk" Classes="display-title" />
                    </StackPanel>
@ -250,7 +246,7 @@
                    <Border Classes="inline-alert" IsVisible="{Binding HasErrorText}">
                        <TextBlock Text="{Binding ErrorText}"
                                   Classes="caption"
-                                   Foreground="#C9392C"
+                                   Foreground="#C9573C"
                                   TextWrapping="Wrap" />
                    </Border>

@ -273,12 +269,9 @@
            <Border Grid.Column="0" Classes="rail-surface" Padding="8">
                <Grid RowDefinitions="Auto,*,Auto">
                    <StackPanel Spacing="8">
-                        <Border Width="38" Height="38" Classes="surface-muted">
-                            <TextBlock HorizontalAlignment="Center"
-                                       VerticalAlignment="Center"
-                                       Text="KO"
-                                       FontWeight="Bold"
-                                       Foreground="#111418" />
+                        <Border Width="38" Height="38" Classes="surface-muted" Padding="6">
+                            <Image Source="avares://PhysOn.Desktop/Assets/kotalk-mark-128.png"
+                                   Stretch="Uniform" />
                        </Border>

                        <Button Classes="rail-button active" ToolTip.Tip="받은함">
@ -292,7 +285,7 @@
                                       VerticalAlignment="Center"
                                       Text="{Binding CurrentUserMonogram}"
                                       FontWeight="SemiBold"
-                                       Foreground="#1E252C" />
+                                       Foreground="#394350" />
                        </Border>
                        <Button Classes="rail-button"
                                ToolTip.Tip="로그아웃"
@ -397,7 +390,7 @@
                                                                   VerticalAlignment="Center"
                                                                   Text="{Binding AvatarText}"
                                                                   FontWeight="SemiBold"
-                                                                   Foreground="#111418" />
+                                                                   Foreground="#20242B" />
                                                    </Border>

                                                    <TextBlock Grid.Column="1"
@ -444,7 +437,7 @@
            <GridSplitter Grid.Column="2"
                          Width="6"
                          IsVisible="{Binding IsConversationPaneExpanded}"
-                          Background="#E5E7EB"
+                          Background="#E8DDD2"
                          ResizeDirection="Columns"
                          ShowsPreview="True" />

@ -456,7 +449,7 @@
                                       VerticalAlignment="Center"
                                       Text="{Binding SelectedConversationGlyph}"
                                       FontWeight="SemiBold"
-                                       Foreground="#111418" />
+                                       Foreground="#20242B" />
                        </Border>

                        <StackPanel Grid.Column="1" Spacing="2">
@ -503,7 +496,7 @@
                                IsVisible="{Binding HasErrorText}">
                            <TextBlock Text="{Binding ErrorText}"
                                       Classes="caption"
-                                       Foreground="#C9392C"
+                                       Foreground="#C9573C"
                                       TextWrapping="Wrap" />
                        </Border>

@ -526,7 +519,7 @@
                                                           IsVisible="{Binding ShowSenderName}" />
                                                <TextBlock Text="{Binding Text}"
                                                           FontSize="13"
-                                                           Foreground="#111418"
+                                                           Foreground="#20242B"
                                                           TextWrapping="Wrap" />
                                                <TextBlock Text="{Binding MetaText}" Classes="caption" />
                                            </StackPanel>
--- a/src/PhysOn.Desktop/app.manifest
+++ b/src/PhysOn.Desktop/app.manifest
@ -3,7 +3,7 @@
  <!-- This manifest is used on Windows only.
       Don't remove it as it might cause problems with window transparency and embedded controls.
       For more details visit https://learn.microsoft.com/en-us/windows/win32/sbscs/application-manifests -->
-  <assemblyIdentity version="1.0.0.0" name="PhysOn.Desktop.Desktop"/>
+  <assemblyIdentity version="1.0.0.0" name="KoTalk.Desktop"/>

  <compatibility xmlns="urn:schemas-microsoft-com:compatibility.v1">
    <application>
--- a/src/PhysOn.Web/index.html
+++ b/src/PhysOn.Web/index.html
@ -3,7 +3,7 @@
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
-    <meta name="theme-color" content="#101826" />
+    <meta name="theme-color" content="#394350" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="apple-mobile-web-app-title" content="KoTalk" />
@ -11,8 +11,11 @@
      name="description"
      content="업무 대화와 일상 대화를 같은 흐름 안에서 가볍게 이어 주는 KoTalk 웹앱입니다."
    />
+    <link rel="icon" href="/favicon.ico" sizes="any" />
    <link rel="icon" href="/icon.svg" type="image/svg+xml" />
-    <link rel="apple-touch-icon" href="/apple-touch-icon.svg" />
+    <link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32" />
+    <link rel="icon" href="/favicon-16x16.png" type="image/png" sizes="16x16" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
    <link rel="manifest" href="/manifest.webmanifest" />
    <title>KoTalk</title>
  </head>
--- a/src/PhysOn.Web/package-lock.json
+++ b/src/PhysOn.Web/package-lock.json
@ -1,12 +1,12 @@
 {
  "name": "physon-web",
-  "version": "0.1.0-alpha.4",
+  "version": "0.1.0-alpha.5",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "physon-web",
-      "version": "0.1.0-alpha.4",
+      "version": "0.1.0-alpha.5",
      "dependencies": {
        "react": "^18.3.1",
        "react-dom": "^18.3.1"
--- a/src/PhysOn.Web/package.json
+++ b/src/PhysOn.Web/package.json
@ -1,7 +1,7 @@
 {
  "name": "physon-web",
  "private": true,
-  "version": "0.1.0-alpha.4",
+  "version": "0.1.0-alpha.5",
  "type": "module",
  "scripts": {
    "dev": "vite --host 0.0.0.0",
--- a/src/PhysOn.Web/public/apple-touch-icon.png
+++ b/src/PhysOn.Web/public/apple-touch-icon.png
--- a/src/PhysOn.Web/public/apple-touch-icon.svg
+++ b/src/PhysOn.Web/public/apple-touch-icon.svg
@ -1,5 +1,7 @@
-<svg width="180" height="180" viewBox="0 0 180 180" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <rect width="180" height="180" rx="50" fill="#101826"/>
-  <path d="M42 55C42 47.268 48.268 41 56 41H124C131.732 41 138 47.268 138 55V104C138 111.732 131.732 118 124 118H89.285L65.86 136.409C61.252 140.031 54.55 136.752 54.55 130.896V118H56C48.268 118 42 111.732 42 104V55Z" fill="#F6F2EA"/>
-  <path d="M63 77.5L78.363 100.438L92.545 77.727L107.223 100.438L122.5 77.5" stroke="#101826" stroke-width="8.5" stroke-linecap="round" stroke-linejoin="round"/>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="none">
+  <path d="M 240.00 312.00 H 780.00 A 22.00 22.00 0 0 1 802.00 334.00 V 892.00 A 22.00 22.00 0 0 1 780.00 914.00 H 240.00 A 22.00 22.00 0 0 1 218.00 892.00 V 334.00 A 22.00 22.00 0 0 1 240.00 312.00 Z" fill="#394350" />
+  <path d="M 304.00 602.00 L 304.00 736.00 L 438.00 602.00 Z" fill="#394350" />
+  <path d="M 468.00 312.00 H 1236.00 A 22.00 22.00 0 0 1 1258.00 334.00 V 892.00 A 22.00 22.00 0 0 1 1236.00 914.00 H 468.00 A 22.00 22.00 0 0 1 446.00 892.00 V 334.00 A 22.00 22.00 0 0 1 468.00 312.00 Z" fill="#F05B2B" />
+  <path d="M 668.00 602.00 L 742.00 602.00 L 742.00 694.00 L 694.00 650.00 Z" fill="#F05B2B" />
+  <path d="M 490.00 328.00 L 582.00 328.00 L 446.00 457.00 L 582.00 586.00 L 490.00 586.00 L 338.00 457.00 Z" fill="#FFFFFF" />
 </svg>
--- a/src/PhysOn.Web/public/favicon-16x16.png
+++ b/src/PhysOn.Web/public/favicon-16x16.png
--- a/src/PhysOn.Web/public/favicon-32x32.png
+++ b/src/PhysOn.Web/public/favicon-32x32.png
--- a/src/PhysOn.Web/public/favicon.ico
+++ b/src/PhysOn.Web/public/favicon.ico
--- a/src/PhysOn.Web/public/icon-192.png
+++ b/src/PhysOn.Web/public/icon-192.png
--- a/src/PhysOn.Web/public/icon-512.png
+++ b/src/PhysOn.Web/public/icon-512.png
--- a/src/PhysOn.Web/public/icon.svg
+++ b/src/PhysOn.Web/public/icon.svg
@ -1,5 +1,7 @@
-<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <rect width="512" height="512" rx="144" fill="#101826"/>
-  <path d="M120 150C120 127.909 137.909 110 160 110H352C374.091 110 392 127.909 392 150V304C392 326.091 374.091 344 352 344H251.232L184.314 396.674C171.148 407.041 152 397.656 152 380.899V344H160C137.909 344 120 326.091 120 304V150Z" fill="#F6F2EA"/>
-  <path d="M171 201.5L214.894 267L255.4 202.15L297.35 267L341 201.5" stroke="#101826" stroke-width="24" stroke-linecap="round" stroke-linejoin="round"/>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="none">
+  <path d="M 240.00 312.00 H 780.00 A 22.00 22.00 0 0 1 802.00 334.00 V 892.00 A 22.00 22.00 0 0 1 780.00 914.00 H 240.00 A 22.00 22.00 0 0 1 218.00 892.00 V 334.00 A 22.00 22.00 0 0 1 240.00 312.00 Z" fill="#394350" />
+  <path d="M 304.00 602.00 L 304.00 736.00 L 438.00 602.00 Z" fill="#394350" />
+  <path d="M 468.00 312.00 H 1236.00 A 22.00 22.00 0 0 1 1258.00 334.00 V 892.00 A 22.00 22.00 0 0 1 1236.00 914.00 H 468.00 A 22.00 22.00 0 0 1 446.00 892.00 V 334.00 A 22.00 22.00 0 0 1 468.00 312.00 Z" fill="#F05B2B" />
+  <path d="M 668.00 602.00 L 742.00 602.00 L 742.00 694.00 L 694.00 650.00 Z" fill="#F05B2B" />
+  <path d="M 490.00 328.00 L 582.00 328.00 L 446.00 457.00 L 582.00 586.00 L 490.00 586.00 L 338.00 457.00 Z" fill="#FFFFFF" />
 </svg>
--- a/src/PhysOn.Web/public/manifest.webmanifest
+++ b/src/PhysOn.Web/public/manifest.webmanifest
@ -1,24 +1,24 @@
 {
-  "name": "PhysOn",
-  "short_name": "PhysOn",
+  "name": "KoTalk",
+  "short_name": "KoTalk",
  "description": "업무 소통과 친근한 대화를 한 손 흐름으로 이어 주는 모바일 중심 메신저 웹앱",
  "start_url": "/",
  "display": "standalone",
-  "background_color": "#101826",
-  "theme_color": "#101826",
+  "background_color": "#FFFFFF",
+  "theme_color": "#394350",
  "lang": "ko-KR",
  "icons": [
    {
-      "src": "/icon.svg",
-      "sizes": "any",
-      "type": "image/svg+xml",
+      "src": "/icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png",
      "purpose": "any"
    },
    {
-      "src": "/mask-icon.svg",
-      "sizes": "any",
-      "type": "image/svg+xml",
-      "purpose": "maskable"
+      "src": "/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any maskable"
    }
  ]
 }
--- a/src/PhysOn.Web/public/mask-icon.svg
+++ b/src/PhysOn.Web/public/mask-icon.svg
@ -1,4 +1,8 @@
-<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <rect width="512" height="512" rx="144" fill="#101826"/>
-  <path d="M120 150C120 127.909 137.909 110 160 110H352C374.091 110 392 127.909 392 150V304C392 326.091 374.091 344 352 344H251.232L184.314 396.674C171.148 407.041 152 397.656 152 380.899V344H160C137.909 344 120 326.091 120 304V150Z" fill="#F6F2EA"/>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="none">
+  <path d="M 0.00 0.00 H 1024.00 A 0.00 0.00 0 0 1 1024.00 0.00 V 1024.00 A 0.00 0.00 0 0 1 1024.00 1024.00 H 0.00 A 0.00 0.00 0 0 1 0.00 1024.00 V 0.00 A 0.00 0.00 0 0 1 0.00 0.00 Z" fill="#141922" />
+  <path d="M 240.00 312.00 H 780.00 A 22.00 22.00 0 0 1 802.00 334.00 V 892.00 A 22.00 22.00 0 0 1 780.00 914.00 H 240.00 A 22.00 22.00 0 0 1 218.00 892.00 V 334.00 A 22.00 22.00 0 0 1 240.00 312.00 Z" fill="#F7F3EE" />
+  <path d="M 304.00 602.00 L 304.00 736.00 L 438.00 602.00 Z" fill="#F7F3EE" />
+  <path d="M 468.00 312.00 H 1236.00 A 22.00 22.00 0 0 1 1258.00 334.00 V 892.00 A 22.00 22.00 0 0 1 1236.00 914.00 H 468.00 A 22.00 22.00 0 0 1 446.00 892.00 V 334.00 A 22.00 22.00 0 0 1 468.00 312.00 Z" fill="#F05B2B" />
+  <path d="M 668.00 602.00 L 742.00 602.00 L 742.00 694.00 L 694.00 650.00 Z" fill="#F05B2B" />
+  <path d="M 490.00 328.00 L 582.00 328.00 L 446.00 457.00 L 582.00 586.00 L 490.00 586.00 L 338.00 457.00 Z" fill="#141922" />
 </svg>
--- a/src/PhysOn.Web/public/sw.js
+++ b/src/PhysOn.Web/public/sw.js
@ -1,5 +1,12 @@
-const CACHE_NAME = 'vs-talk-shell-v2';
-const SHELL = ['/manifest.webmanifest', '/icon.svg', '/apple-touch-icon.svg', '/mask-icon.svg'];
+const CACHE_NAME = 'ko-talk-shell-v3';
+const SHELL = [
+  '/manifest.webmanifest',
+  '/icon.svg',
+  '/icon-192.png',
+  '/icon-512.png',
+  '/apple-touch-icon.png',
+  '/favicon.ico',
+];

 self.addEventListener('install', (event) => {
  event.waitUntil(caches.open(CACHE_NAME).then((cache) => cache.addAll(SHELL)));
--- a/src/PhysOn.Web/public/vs-mark.svg
+++ b/src/PhysOn.Web/public/vs-mark.svg
@ -1,5 +1,7 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" fill="none">
-  <rect width="128" height="128" rx="34" fill="#17372F"/>
-  <path d="M27 33h23l14 25 14-25h23L75 95H53L27 33Z" fill="#F6E8D5"/>
-  <path d="M60 39h8v50h-8z" fill="#DDB07B"/>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="none">
+  <path d="M 240.00 312.00 H 780.00 A 22.00 22.00 0 0 1 802.00 334.00 V 892.00 A 22.00 22.00 0 0 1 780.00 914.00 H 240.00 A 22.00 22.00 0 0 1 218.00 892.00 V 334.00 A 22.00 22.00 0 0 1 240.00 312.00 Z" fill="#394350" />
+  <path d="M 304.00 602.00 L 304.00 736.00 L 438.00 602.00 Z" fill="#394350" />
+  <path d="M 468.00 312.00 H 1236.00 A 22.00 22.00 0 0 1 1258.00 334.00 V 892.00 A 22.00 22.00 0 0 1 1236.00 914.00 H 468.00 A 22.00 22.00 0 0 1 446.00 892.00 V 334.00 A 22.00 22.00 0 0 1 468.00 312.00 Z" fill="#F05B2B" />
+  <path d="M 668.00 602.00 L 742.00 602.00 L 742.00 694.00 L 694.00 650.00 Z" fill="#F05B2B" />
+  <path d="M 490.00 328.00 L 582.00 328.00 L 446.00 457.00 L 582.00 586.00 L 490.00 586.00 L 338.00 457.00 Z" fill="#FFFFFF" />
 </svg>
--- a/src/PhysOn.Web/src/App.css
+++ b/src/PhysOn.Web/src/App.css
@ -106,6 +106,17 @@
  fill: currentColor;
 }

+.brand-mark__image {
+  display: block;
+  width: 18px;
+  height: 18px;
+}
+
+.brand-mark--small .brand-mark__image {
+  width: 16px;
+  height: 16px;
+}
+
 .brand-mark--small {
  width: 32px;
  height: 32px;
@ -239,7 +250,7 @@
 .field input::placeholder,
 .search-field input::placeholder,
 .composer textarea::placeholder {
-  color: #a0a7b1;
+  color: #aaa095;
 }

 .text-action,
@ -411,20 +422,20 @@
  width: 7px;
  height: 7px;
  border-radius: 2px;
-  background: #9ca3af;
+  background: #b6a292;
 }

 .status-chip--connecting .status-dot,
 .status-chip--idle .status-dot {
-  background: #f59e0b;
+  background: #d08a44;
 }

 .status-chip--connected .status-dot {
-  background: #1f9d55;
+  background: #698869;
 }

 .status-chip--fallback .status-dot {
-  background: #2563eb;
+  background: #6c84ab;
 }

 .search-field {
--- a/src/PhysOn.Web/src/App.tsx
+++ b/src/PhysOn.Web/src/App.tsx
@ -53,7 +53,7 @@ type IconName =
  | 'group'

 const DEFAULT_API_BASE_URL = import.meta.env.VITE_API_BASE_URL?.trim() ?? ''
-const APP_VERSION = 'web-0.1.0-alpha.4'
+const APP_VERSION = 'web-0.1.0-alpha.5'

 const CONNECTION_LABEL: Record<ConnectionState, string> = {
  idle: '준비 중',
@ -220,7 +220,15 @@ function Icon({ name }: { name: IconName }) {
    case 'mark':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
-          <path d="M5 6.5a2.5 2.5 0 0 1 2.5-2.5h9A2.5 2.5 0 0 1 19 6.5v6A2.5 2.5 0 0 1 16.5 15H10l-3.5 3v-3H7.5A2.5 2.5 0 0 1 5 12.5z" />
+          <path
+            fill="#394350"
+            d="M4.2 7.1A1.2 1.2 0 0 1 5.4 5.9h8.4A1.2 1.2 0 0 1 15 7.1v5.8a1.2 1.2 0 0 1-1.2 1.2H10l-2.7 2.7v-2.7H5.4a1.2 1.2 0 0 1-1.2-1.2z"
+          />
+          <path
+            fill="#F05B2B"
+            d="M9.8 7.1A1.2 1.2 0 0 1 11 5.9h7.6a1.2 1.2 0 0 1 1.2 1.2v5.8a1.2 1.2 0 0 1-1.2 1.2h-1.1v2.2l-1.8-2.2H11a1.2 1.2 0 0 1-1.2-1.2z"
+          />
+          <path fill="#FFFFFF" d="M11.1 6.8h2L9.8 12l3.3 5.2h-2l-4-5.2z" />
        </svg>
      )
    case 'refresh':
@ -1060,7 +1068,7 @@ function App() {
          <header className="onboarding__chrome">
            <div className="brand-lockup">
              <span className="brand-mark" aria-hidden="true">
-                <Icon name="mark" />
+                <img className="brand-mark__image" src="/vs-mark.svg" alt="" />
              </span>
              <div className="brand-lockup__text">
                <strong>KoTalk</strong>
@ -1159,7 +1167,7 @@ function App() {
            <header className="appbar">
              <div className="appbar__leading">
                <span className="brand-mark brand-mark--small" aria-hidden="true">
-                  <Icon name="mark" />
+                  <img className="brand-mark__image" src="/vs-mark.svg" alt="" />
                </span>
                <div className="appbar__title">
                  <h2>{activeDestinationMeta.title}</h2>
--- a/src/PhysOn.Web/src/index.css
+++ b/src/PhysOn.Web/src/index.css
@ -8,25 +8,25 @@
    sans-serif;
  line-height: 1.5;
  font-weight: 500;
-  color: #111111;
-  background: #f5f5f6;
+  color: #20242b;
+  background: #f7f3ee;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
-  --surface-page: #f5f5f6;
+  --surface-page: #f7f3ee;
  --surface-base: #ffffff;
-  --surface-raised: #fcfcfc;
-  --surface-muted: #f6f6f7;
-  --surface-selected: #eef2f6;
-  --surface-chat-mine: #f1f1f2;
-  --border-subtle: #ececef;
-  --border-strong: #d8d8dd;
-  --border-contrast: #18181b;
-  --text-strong: #141416;
-  --text-soft: #333338;
-  --text-muted: #7b7b84;
-  --focus-ring: #1a73e8;
+  --surface-raised: #fdfaf6;
+  --surface-muted: #faf6f1;
+  --surface-selected: #f3ece4;
+  --surface-chat-mine: #f0e5d8;
+  --border-subtle: #e8ddd2;
+  --border-strong: #dbcdbf;
+  --border-contrast: #394350;
+  --text-strong: #20242b;
+  --text-soft: #3b414b;
+  --text-muted: #82766d;
+  --focus-ring: #c07a43;
 }

 * {