Memory.Wiki v8 — UI & Brand Direction

Companion to v8 Plan (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

현재:

Copy
--background:   #09090b  (zinc 950)
--surface:      #18181b  (zinc 900)
--text-primary: #fafafa  (zinc 50)
--accent:       #fb923c  (orange 400)
--border:       #27272a  (zinc 800)

v8 변경:

Copy
--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:

표준 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 → 평이함. 후보:

→ 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 개

   • <Button> (3 variant: primary, secondary, ghost)
   • <Card> (2 variant: user-owned, AI-generated)
   • <Badge> (status: AI, edited, locked)
   • <Modal> (glass backdrop, elevated surface)
   • <TimelineCard> (timeline 의 단일 entry)

3. Symbol Option A prototype

   • Figma 또는 raw SVG
   • 4 size (16, 24, 64, 1024)
   • Light + dark 변종
   • Animated variant (logo entrance, subtle pulse)

4. Motion playground

   • Storybook 또는 단일 page 에서 5 micro-interaction 다 실행
   • 디자인 reviewer (founder) 가 feel 검토

5. Brand voice doc 1-pager

   • product copy 의 tone: direct, calm, slightly playful
   • never: enterprise-y, corporate, overly formal
   • examples: "Saved." vs "Your document has been successfully saved." → 전자

6. Type & spacing reference page

   • 1 페이지에 모든 heading + body + UI text 의 visual hierarchy
   • 다른 페이지 만들 때 reference

6. Brand Phase 2 — Final polish (Week 17)

Phase 1 이 시스템 셋업, Phase 2 가 마무리:

• Marketing assets (social cards, demo video, GIF)
• Landing page final visual
• Onboarding 일러스트 (4-5 장면, custom)
• App Store / Play Store screenshots (8 surfaces × 5 screenshots = 40 장)
• Brand guideline PDF (외부 reference 용)
• Audio identity (선택, app launch sound)

7. Anti-patterns — 절대 안 할 것

8. 결정 매트릭스

9. 다음 step (action)

1. 이 doc Hyunsang 검토 + 미세 수정
2. Phase 1 Week 1 시작
   • design tokens 파일
   • serif font 3 후보 mock
   • Symbol Option A 3-4 variant Figma
3. Week 2 review + lock
4. Week 3+ 부터 feature 작업이 design system 위에 build

한 줄 정리 현재 UI 는 2023 dev tool 의 표준 좋은 버전. v8 는 2026 AI-native + warm 정서로 reposition. 핵심 lever: warm-tinted color + serif display + calm motion + AI tint + Layered M symbol.

Companion to v8 Plan (memory.wiki/SKaY7VJP) Author: Hyunsang × Claude pair Brand Phase 1: Week 1-2 of v8 Brand Phase 2: Week 17 of v8