공개: alpha.5 기준선 갱신

README.md

@@ -1,5 +1,9 @@
 # KoTalk
 
+<p align="center">
+  <img src="branding/png/kotalk-transparent-256.png" alt="KoTalk mark" width="96" height="96">
+</p>
+
 <p align="center">
   <strong>한국어 중심의 차분한 메시징 경험을 다시 설계하는 오픈소스 프로젝트.</strong>
 </p>
@@ -26,6 +30,7 @@
   <a href="PROJECT_STATUS.md">Project Status</a> ·
   <a href="SHOWCASE.md">Showcase</a> ·
   <a href="BACKGROUND.md">Background</a> ·
+  <a href="branding/BRAND_GUIDE.md">Brand Guide</a> ·
   <a href="FAQ.md">FAQ</a> ·
   <a href="RELEASING.md">Releases</a> ·
   <a href="TRUST_CENTER.md">Trust Center</a> ·
@@ -44,7 +49,7 @@
 </table>
 
 <p align="center">
-  <img src="docs/assets/latest/hero-shell.png" alt="KoTalk desktop shell" width="920">
+  <img src="docs/assets/latest/hero-shell.png" alt="KoTalk desktop shell" width="920" height="652">
 </p>
 <p align="center">
   <em>플랫한 화이트 톤과 컴팩트한 창 밀도를 기준으로 정리한 현재 데스크톱 셸</em>
@@ -88,16 +93,53 @@ KoTalk는 이 배경을 리스크 문구로 숨기지 않고, 왜 이 프로젝
 
 현재 저장소에서 바로 볼 수 있는 화면과 산출물은 아래와 같습니다.
 
-| Surface | What to look at | Visual |
-|---|---|---|
-| Desktop shell | 레일 + 목록 + 대화 중심의 3단 구조, 플랫한 보더, 멀티 윈도우 전제 | [hero-shell.png](docs/assets/latest/hero-shell.png) |
-| Desktop onboarding | 첫 실행 시 서버 주소보다 사용자 흐름을 먼저 보여주는 가벼운 진입 | [onboarding.png](docs/assets/latest/onboarding.png) |
-| Desktop conversation | 메시지 흐름, 읽기 상태, 입력 패널의 조밀한 배치 | [conversation.png](docs/assets/latest/conversation.png) |
-| Mobile web onboarding | 빠른 진입과 한국어 중심의 간결한 가입 흐름 | [vstalk-web-onboarding.png](docs/assets/latest/vstalk-web-onboarding.png) |
-| Mobile web inbox | 최근 대화, 필터, 검색 진입의 기본 구조 | [vstalk-web-list.png](docs/assets/latest/vstalk-web-list.png) |
-| Mobile web search | 대화 재발견과 보관 흐름의 1차 구현 | [vstalk-web-search.png](docs/assets/latest/vstalk-web-search.png) |
-| Mobile web saved | 나중에 답장, 중요 대화, 다시 열기 허브 | [vstalk-web-saved.png](docs/assets/latest/vstalk-web-saved.png) |
-| Mobile web chat | 모바일 입력창, 상단 정보 밀도, 복귀 동선 | [vstalk-web-chat.png](docs/assets/latest/vstalk-web-chat.png) |
+<table>
+  <tr>
+    <td align="center">
+      <img src="docs/assets/latest/hero-shell.png" alt="Desktop shell" width="420" height="298"><br>
+      <strong>Desktop shell</strong><br>
+      <sub>레일 + 목록 + 대화 중심의 3단 구조</sub>
+    </td>
+    <td align="center">
+      <img src="docs/assets/latest/onboarding.png" alt="Desktop onboarding" width="420" height="298"><br>
+      <strong>Desktop onboarding</strong><br>
+      <sub>첫 진입을 짧게 정리한 온보딩</sub>
+    </td>
+  </tr>
+  <tr>
+    <td align="center">
+      <img src="docs/assets/latest/conversation.png" alt="Desktop conversation" width="390" height="400"><br>
+      <strong>Desktop conversation</strong><br>
+      <sub>대화 흐름과 입력 패널 밀도</sub>
+    </td>
+    <td align="center">
+      <img src="docs/assets/latest/vstalk-web-list.png" alt="Mobile web inbox" width="220" height="513"><br>
+      <strong>Mobile web inbox</strong><br>
+      <sub>최근 대화와 필터 구조</sub>
+    </td>
+  </tr>
+</table>
+
+<table>
+  <tr>
+    <td align="center">
+      <img src="docs/assets/latest/vstalk-web-onboarding.png" alt="Mobile web onboarding" width="220" height="476"><br>
+      <strong>Mobile web onboarding</strong>
+    </td>
+    <td align="center">
+      <img src="docs/assets/latest/vstalk-web-search.png" alt="Mobile web search" width="220" height="513"><br>
+      <strong>Mobile web search</strong>
+    </td>
+    <td align="center">
+      <img src="docs/assets/latest/vstalk-web-saved.png" alt="Mobile web saved" width="220" height="513"><br>
+      <strong>Mobile web saved</strong>
+    </td>
+    <td align="center">
+      <img src="docs/assets/latest/vstalk-web-chat.png" alt="Mobile web chat" width="220" height="513"><br>
+      <strong>Mobile web chat</strong>
+    </td>
+  </tr>
+</table>
 
 전체 화면 묶음은 [SHOWCASE.md](SHOWCASE.md)에서 더 자세히 볼 수 있습니다.