--- title: "Memory.Wiki v8 — UI & Brand Direction" url: https://memory.wiki/37MqmCM- updated: 2026-05-22T17:03:34.942Z hub: https://memory.wiki/hub/raymindai concept_count: 12 source: "mcp" --- # Memory.Wiki v8 — UI & Brand Direction > Companion to v8 Plan ([memory.wiki/SKaY7VJP](https://memory.wiki/SKaY7VJP)). > Brand Phase 1 (Week 1-2) input. Decision-oriented, not exploratory. > **Captured 2026-05-23.** --- # 1. 진단 — 왜 현재 UI 가 올드스쿨 느낌인가 크게 5 가지 원인: ## A. "2023 Dev Tool" 시각 언어 - Dark zinc + 오렌지 accent + Geist sans - 단순 border + card 레이아웃 - 모든 모서리가 똑같은 radius - Vercel dashboard / Linear 2023 / Notion 2022 와 시각적으로 구분 안 됨 → "Linear 처럼 보이는데 Linear 아닌 product" 의 곤란. 2026 의 user 는 이미 이 미감에 saturated. ## B. Motion 부재 - Page transitions 없음 또는 default Next.js - Card hover 가 단순 background 변화 - Loading state 가 spinner 또는 skeleton (둘 다 cliché) - AI 가 생성한 결과가 그냥 갑자기 나타남 (streaming feel 없음) - 클릭 / drag 의 tactile feedback 없음 → 2026 의 user 는 streaming, 자연스러운 진입/퇴장, depth animation 에 익숙. 우리 UI 는 정적. ## C. 균질한 typography - Heading / body 모두 Geist sans - size scale 만 다름, character 없음 - code 만 Geist Mono - 모든 페이지가 같은 폰트 weight 분포 → Roam, Linear, Notion 셋 다 비슷. 식별 가능한 typographic identity 없음. ## D. 색이 너무 정직함 - `var(--accent)` = #fb923c orange - `var(--background)` = #09090b near-black - `var(--text-primary)` = #fafafa white - gradient 거의 없음 (단조) - 한 화면에 색이 2-3 개만 (배경/텍스트/accent) → 2026 의 trend 는 색이 더 풍부 + 더 organic. Apple Liquid Glass, Granola 의 subtle gradient, Arc 의 color spaces. ## E. 모든 UI 가 같은 trust level - 사용자가 쓴 doc 과 AI 가 만든 doc 이 시각적으로 같음 - 원본과 AI metadata 가 같은 카드 안에 평등하게 배치 - "이건 너 자신" / "이건 AI 가 도와준 것" 의 visual distinction 없음 → v8 의 dual-layer 철학 (original sacred, AI assistive) 이 UI 에서 안 보임. 이게 v8 의 가장 큰 visual 작업. --- # 2. 가야 할 방향 — "2026 AI-native warm" 세 가지 단어로 lock: > **Warm. Dimensional. AI-native.** 각 단어가 무엇을 의미하는지: ## Warm (정서적) Memory 는 차가운 데이터 저장소가 아님. 따뜻한 인격적 layer. - 색: 단조 dark 대신 약간 brown-tinted, 오렌지 accent 가 진짜로 빛나는 base - 폰트: serif 또는 humanist sans 의 character 있는 display - 여백: 더 generous, 빽빽한 dashboard 느낌 탈피 - 사진 / 일러스트: empty state 가 generic SVG 대신 인격적 비교: Granola 의 calm warm vs Linear 의 cold sharp. 우리는 **Granola 쪽**. ## Dimensional (공간적) 평면 카드 대신 깊이가 있는 surface. 2026 의 OS-level trend (Liquid Glass) 와 일치. - Glassy / blurred backgrounds (특히 modal, popover) - 살짝 elevation 있는 카드 (shadow + subtle border) - 호버 시 lift / scale 미세하게 - Parallax-ish scroll behavior (가벼운) - AI 가 생성한 element 는 깊이가 살짝 다름 (떠 있는 느낌) 비교: Apple Notes 2026 의 글래스 톤 vs 우리 현재의 flat dark card. ## AI-native (시간적) AI 가 product 의 핵심 actor 라는 게 매 frame 에서 보임. - Streaming text (AI summary 가 typing 효과로 나타남) - Generative loading (스피너 대신 "AI thinking" 의 시각화) - Subtle pulse / glow 가 AI-active element 에 - Auto-organize 가 진행 중일 때 "백그라운드 활동" 의 표시 (방해되지 않게) - AI vs user 의 시각적 distinction (border style, color tint, badge) 비교: Granola 의 "AI is working" 의 calm wave vs 우리의 무표정 spinner. --- # 3. 구체적 결정 — 5 영역 ## 3.1 Color system 현재: ``` --background: #09090b (zinc 950) --surface: #18181b (zinc 900) --text-primary: #fafafa (zinc 50) --accent: #fb923c (orange 400) --border: #27272a (zinc 800) ``` v8 변경: ``` --background: #0d0b08 (warm-black, 살짝 brown 빛) --surface: #1a1714 (warm zinc, 따뜻한 dark) --surface-elevated: #232019 (1단계 위, modal/popover) --text-primary: #faf5ed (warm white, 약간 cream) --text-secondary: #b8b0a0 (warm muted) --accent: #fb923c (그대로 — brand 핵심) --accent-glow: #fb923c1a (10% 투명 오렌지, glow 용) --ai-tint: #c4b5fd (light purple, AI 활동 표시용) --border: #2d2823 (warm border) --border-glass: #ffffff14 (8% white, glass effect) ``` 핵심 변화: **모든 회색이 warm-tinted**. neutral zinc 아니라 살짝 brown. Memory 의 "오래된 책" 정서. AI tint 신규: AI-generated element 에 light purple 약간. 사용자 영역 (orange + warm) 과 시각적 차별. ## 3.2 Typography 현재: Geist sans (모든 곳) v8: - **Display heading** (h1, hero text): "**Instrument Serif**" 또는 "**Editorial New**" — character 있는 serif - **Body / UI**: Geist sans 그대로 — 가독성 + brand 유지 - **Mono / code**: JetBrains Mono 또는 Geist Mono 유지 - **Numbers / data**: Tabular variant Geist (`font-variant-numeric: tabular-nums`) Why serif heading: AI/dev tool 들이 다 sans 만 씀. Serif 가 differentiation + literary warm 느낌. Granola, Mymind 가 이 방향. Linear / Vercel 과 즉시 구분. → Phase 1 (Week 1-2) 에 font 선택 final lock. 라이센스 + load weight 검토 필요. ## 3.3 Motion / animation 5 가지 micro-interaction lock: | Interaction | Behavior | | --- | --- | | **Page enter** | content slides up 8px + fades in over 220ms cubic-bezier(0.16, 1, 0.3, 1) | | **Card hover** | translateY(-1px) + shadow lift, 120ms | | **AI element appearance** | scale 0.96 → 1.0 + fade, 320ms, subtle purple glow pulse 1x | | **Streaming AI text** | char-by-char appear, 18ms per token (typing feel) | | **Save / capture confirm** | green checkmark scale-bounce, then fade after 1.4s | 표준 cubic-bezier: - `entrance`: cubic-bezier(0.16, 1, 0.3, 1) — strong overshoot-less ease-out - `exit`: cubic-bezier(0.4, 0, 1, 1) — fast departure - `tactile`: cubic-bezier(0.2, 0, 0, 1) — natural snap durations: 120ms (tactile), 220ms (transition), 320ms (entrance), 1.4s (success linger) ## 3.4 Layout & spacing 현재: 8px grid (Tailwind 기본) v8: - **Layout 단위**: 4px micro grid + 8px macro grid 병행 - **Content max-width**: 720px (현재 ~768) — 약간 좁아지면 reading 더 친밀 - **Asymmetric whitespace**: 좌측 narrow sidebar (288px), 우측 generous reading area - **Vertical rhythm**: 1.6 leading body, 1.15 leading display heading Modal / popover: - `backdrop-filter: blur(12px) saturate(140%)` (glass) - `background: var(--surface-elevated)` + 8% white border - Inner padding 24px (현재 16px) — breathing room ## 3.5 AI vs User visual distinction **Dual-layer 의 핵심**. 두 종류 element 의 visual rule: ### User-written / User-owned - Border: solid `var(--border)` - Background: `var(--surface)` - Avatar: 사용자 프로필 아이콘 - Badge: 없음 (default) - Hover: subtle lift ### AI-generated / AI-managed - Border: solid `var(--border-glass)` with subtle `var(--ai-tint)` outer glow (1px) - Background: `var(--surface)` + 2% AI-tint overlay - Avatar: `✨` Sparkle icon + agent name (e.g. "Claude") - Badge: `Generated by Memory.Wiki AI` (작은 chip, top-right) - Hover: lift + tint glow stronger ### Edited-by-you (was AI) - Border: solid `var(--border)` (사용자 영역으로 변환됨) - Badge: `🪶 Edited by you · originally AI` (작은 footnote) - Hover: 사용자 영역과 동일 → 한눈에 "내가 쓴 것" vs "AI 가 도와준 것" vs "edited" 구분. --- # 4. 로고 방향 현재: "Memory" (orange) + ".Wiki" (white/primary) 두-톤 wordmark, no symbol. ## 4.1 평가 **잘된 것**: - 도메인 = 브랜드. URL 의 시각화로 직관. - 두 톤이 분명 (오렌지 / 흰색). 무채색 회피. - 텍스트 기반 → scalable, accessible. **문제**: - **아이콘 없음**. 앱 아이콘, favicon, 작은 surface 에서 wordmark 가 안 읽힘. - character 가 약함. Geist 같은 generic sans 의 변형. - 한국어 surface 에서 "Memory.Wiki" 만 떠 있으면 약간 cold. - 모바일 앱 아이콘 자리에 wordmark 못 씀 (정사각형 비율 안 맞음). ## 4.2 V8 방향 — 두 layer 시스템 **Layer 1: Symbol (신규)** - 정사각형, app icon / favicon / 작은 곳 모두 사용 - 후보 (시각 brainstorm): - `M` 또는 `M.W` letter mark with weight contrast - 오버랩되는 두 사각형 (memory + wiki = layered) - `@` 의 stylized 변형 (v8 의 @username URL 과 연결) - 책갈피 / bookmark 형태 - 무한 / spiral (memory continuity) - URL 괄호 `[ ]` 또는 슬래시 `/` motif **Layer 2: Wordmark (현재 + 살짝 polish)** - 두-톤 (orange Memory + warm white .Wiki) 유지 - 단 폰트 weight / spacing 재검토 — 현재 Geist 800 너무 generic - 후보: Custom letterspacing, 살짝 condensed, 또는 다른 sans (Söhne, Greycliff CF) ## 4.3 추천 방향 — Symbol 후보 3 내가 가장 강하다고 보는 3 가지 symbol 방향: ### Option A: Layered M - "M" 두 개가 살짝 어긋나게 겹침 (orange + warm white) - "Memory" 의 layered identity 시각화 - 비교 reference: Notion 의 N, Linear 의 L - App icon 으로 적합 — 정사각형, scale OK - "Memory.Wiki" 의 M 을 직접 차용 → wordmark 와 자연 연결 ### Option B: @ symbol stylized - @ 의 inner spiral 을 더 강조한 mark - v8 의 `@username` URL 패턴과 직접 연결 - Identity layer 의 시각적 표현 - 비교 reference: Twitter 의 bird, Mastodon 의 elephant, Bluesky 의 butterfly - 위험: @ 는 이미 social media 가 점유 → 차별 어려움 ### Option C: Bookmark / sliver - 책갈피 모양의 minimal mark, 한쪽 끝이 살짝 휘어짐 - "기억한다" 의 가장 오래된 메타포 (책갈피) - 무한히 미니멀 가능 → favicon 16x16 에서도 작동 - AI 기술이 아닌 "warmth + memory" 강조 - 비교 reference: Pocket 의 P-with-tag, Raindrop 의 drop → 내 권고: **Option A (Layered M)**. 이유: - Wordmark 의 "M" 을 직접 차용 → brand consistency 최강 - App icon 으로 매우 적합 (정사각형, 두 색 분리 가능) - 추상이지만 의미 있음 (memory 의 첫 글자 + layered) - favicon 16x16 부터 1024 까지 다 작동 - "@ symbol" 의 social media 함정 회피 - 책갈피보다 더 "data + AI" 시대적 ## 4.4 Wordmark polish 현재 Geist 800 → 평이함. 후보: | 폰트 후보 | tone | trade-off | | --- | --- | --- | | **Söhne Buch / Halbfett** | Swiss modernist, premium feel | 라이센스 비용 | | **Greycliff CF** | 친근 + clean, geometric | 약간 generic 가능 | | **JetBrains Display** | 개발자 친화, 우리 ICP 와 일치 | technical 느낌 | | **Geist 800 + custom kerning** | 무료, 현재 유지 | improvement 폭 적음 | → Phase 1 Week 2 에 3 폰트로 mock 만들어서 비교 후 final lock. --- # 5. 즉시 적용 — Brand Phase 1 의 첫 deliverable Week 1-2 안에 production-ready 로 만들 것: 1. **Design tokens 파일** (`apps/web/src/styles/tokens.css`) - 위 color 시스템 + spacing + typography scale + motion curves - Tailwind config 에 mirror 2. **Component primitive 5 개** - `