← 베이스캠프

공통

대시보드 스프린트별 디자인 스프린트별 문서 에이전트별 현황 디자인 히스토리 문서보관함 팀 현황

특화

디자인 시스템 컴포넌트 갤러리

⭐ DESIGN · BASECAMP 2 · 핵심

디자인

⭐ 위젯 디자인 품질 — 프로젝트 핵심. Cosmic Design System. Team 2 디자인팀 이 운영합니다.

⭐ 2차 베이스캠프 — 영역 1: 위젯 디자인 품질 (DD 주도 · 13명) — 프로젝트 핵심

Cosmic Design 원칙

모든 디자인 결정의 근간이 되는 4가지 핵심 원칙입니다.

🌌

Infinite Depth

무한한 우주의 깊이감을 레이어, 블러, 그라디언트로 표현합니다. 배경부터 전경까지 z-depth를 활용한 공간감 설계.

🌈

Nebula Flow

성운처럼 유기적으로 흐르는 전환과 애니메이션. 급격한 변화 대신 자연스러운 모핑과 페이드를 사용합니다.

⭐

Starlight Clarity

어둠 속에서 빛나는 별처럼 핵심 정보가 명확하게 드러납니다. 높은 대비와 정제된 타이포그래피로 가독성 확보.

⏳

Gravitational Hierarchy

중력처럼 자연스러운 시각적 위계. 중요도에 따라 크기, 색상, 간격이 일관된 비율로 변화합니다.

스프린트별 디자인

디자인팀의 스프린트별 참여 현황과 디자인 산출물입니다.

Sprint 0 — 기반 구축

Cosmic Design System v4 확정, 컬러 토큰/타이포그래피/모션 토큰 정의, 디자인 원칙 4종 수립.

Sprint 1 — 코어 컴포넌트

Nebula Card, Pulsar Button, Service Card, Project Card 컴포넌트 스펙 완료. 접근성 가이드라인 적용.

📅 다음 스프린트 예정

Sprint 2에서는 Dash 카드 UI, Dynamic Space 레이아웃, 앱 홈 화면 디자인을 진행합니다.

스프린트별 문서

디자인팀이 각 스프린트에서 산출한 문서 목록입니다.

Sprint 0 문서

• Cosmic Design System 원칙서
• 컬러 토큰 명세
• 타이포그래피 가이드
• 모션 토큰 명세

Sprint 1 문서

• 컴포넌트 스펙 (Nebula Card, Pulsar Button, Service Card, Project Card)
• 접근성 가이드라인 (WCAG 2.1 AA)
• 스크린샷 갤러리 초안

에이전트별 현황

디자인팀 에이전트의 개별 작업 현황입니다.

DD 팀장

Design Director

Cosmic Design System 총괄, 디자인 원칙 수립, 에셋 관리, 디자인 리뷰

📌 Cosmic Design v4 확정

FD

Frontend Design

컬러 토큰, 타이포그래피, 컴포넌트 스펙, 반응형 레이아웃 설계

MD

Motion Designer

모션 토큰, Fusion 합체 애니메이션, Dash 모프 전환, Spring 커브 설계

UX

UX Engineer

접근성 WCAG 2.1 AA, TalkBack, 인터랙션 패턴, 사용자 플로우

AUD

App UI Designer

앱 전체 UI 시안, Dash 카드 디자인, Space/홈/앱드로어 화면 설계

UR NEW

User Researcher

사용자 리서치, 유저빌리티 테스트, A/B 테스트 설계, 인사이트 보고

디자인 히스토리

디자인팀의 주요 결정 이력과 변경 사항을 기록합니다.

2026-03 — Cosmic Design System v4 확정

4가지 디자인 원칙(Infinite Depth, Nebula Flow, Starlight Clarity, Gravitational Hierarchy) 수립. 다크 테마 기반 컬러 토큰 8종, 모션 토큰 6종 정의 완료.

2026-03 — 디자인팀 6명 구성 완료

DD(팀장), FD, MD, UX, AUD 5명 + UR(User Researcher) 신규 합류. 총 6명 체제로 운영 시작.

2026-03 — 접근성 가이드라인 적용

WCAG 2.1 AA 기준 색상 대비, 키보드 네비게이션, 모션 감소, 시맨틱 마크업 가이드라인 확정.

문서보관함

디자인 관련 전체 문서를 보관합니다.

📂 디자인 시스템 문서

• Cosmic Design 원칙서
• 컬러 토큰 명세서
• 타이포그래피 가이드
• 모션 토큰 명세서
• 접근성 가이드라인

📂 컴포넌트 문서

• Nebula Card 스펙
• Pulsar Button 스펙
• Service Card 스펙
• Project Card 스펙

📂 팀 운영 문서

• 디자인팀 역할 정의서
• 디자인 리뷰 프로세스
• 에셋 관리 가이드

디자인팀 현황 — Team 2 ()

핵심 미션: Cosmic Design System을 확립하고 앱 UI의 모든 시각 경험을 설계한다.

DD 팀장

Design Director

Cosmic Design System 총괄, 디자인 원칙 수립, 에셋 관리, 디자인 리뷰

📌 Cosmic Design v4 확정

FD

Frontend Design

컬러 토큰, 타이포그래피, 컴포넌트 스펙, 반응형 레이아웃 설계

MD

Motion Designer

모션 토큰, Fusion 합체 애니메이션, Dash 모프 전환, Spring 커브 설계

UX

UX Engineer

접근성 WCAG 2.1 AA, TalkBack, 인터랙션 패턴, 사용자 플로우

AUD

App UI Designer

앱 전체 UI 시안, Dash 카드 디자인, Space/홈/앱드로어 화면 설계

UR NEW

User Researcher

사용자 리서치, 유저빌리티 테스트, A/B 테스트 설계, 인사이트 보고

컬러 토큰

우주 테마에서 영감을 받은 컬러 시스템입니다. 다크 모드를 기본으로 설계되었습니다.

BASE

Cosmic Void

#000000

Nebula Blue

#4E7CFF

Nebula Violet

#8B5CF6

Supernova Magenta

#D946EF

Aurora Teal

#2DD4BF

TEXT

Starlight

#E8E8F0

Dust

#9892B0

CARD

Deep Space

rgba(15,15,30,0.6)

/* CSS Custom Properties */
:root {
  --background: #000000;
  --foreground: #e8e8f0;
  --card: rgba(15, 15, 30, 0.6);
  --border: rgba(255, 255, 255, 0.1);
  --muted-foreground: #9892B0;
  --primary: #e8e8f0;
}
        

타이포그래피

우주적 정밀함과 기하학적 아름다움을 표현하는 서체 시스템입니다.

Heading — Space Grotesk

The Universe

Dynamic Space AI OS

Dash — 자율 AI 에이전트

Body — Inter

The Universe는 AI가 사용자의 의도를 이해하고, 상황에 맞게 최적의 경험을 자율적으로 구성하는 Dynamic Space AI Operating System입니다.

Caption: 보조 텍스트, 레이블, 메타데이터에 사용됩니다.

/* Font Families */
--fh: 'Space Grotesk', sans-serif;  /* Headings */
--fb: 'Inter', -apple-system, sans-serif;  /* Body */

/* Heading Scale */
h1 { font-size: clamp(2.5rem, 5vw, 4rem); letter-spacing: -2px; }
h2 { font-size: 24px; letter-spacing: -0.5px; }
h3 { font-size: 16px; }

/* Body */
body { font-size: 16px; line-height: 1.6; }
        

모션 토큰

일관된 애니메이션 경험을 위한 6종 모션 토큰입니다.

토큰	Duration	Easing	용도
`--motion-page`	600ms	cubic-bezier(.25,.1,.25,1)	페이지 전환
`--motion-card`	300ms	cubic-bezier(.25,.1,.25,1)	카드 호버, 리프트
`--motion-scroll`	400ms	ease-out	스크롤 기반 애니메이션
`--motion-nav`	250ms	ease	네비게이션 전환
`--motion-particle`	2000ms	linear	파티클 이동
`--motion-glow`	1500ms	ease-in-out	글로우 펄스

/* Motion Tokens */
:root {
  --motion-page: 600ms cubic-bezier(.25,.1,.25,1);
  --motion-card: 300ms cubic-bezier(.25,.1,.25,1);
  --motion-scroll: 400ms ease-out;
  --motion-nav: 250ms ease;
  --motion-particle: 2000ms linear;
  --motion-glow: 1500ms ease-in-out;
}
        

접근성

WCAG 2.1 AA 기준을 준수하며, 모든 사용자가 콘텐츠에 접근할 수 있도록 설계합니다.

👁

색상 대비

일반 텍스트 최소 4.5:1, 큰 텍스트 3:1 대비 비율을 유지합니다. #e8e8f0 on #000000 = 18.2:1

⌨

키보드 네비게이션

모든 인터랙티브 요소는 키보드로 접근 가능합니다. :focus-visible 스타일이 기본 적용됩니다.

🎬

모션 감소

prefers-reduced-motion: reduce 미디어 쿼리로 애니메이션을 비활성화합니다.

📰

시맨틱 마크업

적절한 heading 레벨, landmark 역할, ARIA 레이블을 사용하여 스크린 리더 호환성을 보장합니다.

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* Focus Visible */
:focus-visible {
  outline: 2px solid #8b5cf6;
  outline-offset: 2px;
}
        

컴포넌트

Cosmic Design System의 핵심 UI 컴포넌트입니다.

Nebula Card

정보를 담는 기본 컨테이너입니다. 호버 시 보라색 글로우와 리프트 효과를 제공합니다.

Preview

Weather Dash

현재 위치의 날씨 정보를 실시간으로 표시하는 AI Dash입니다.

.nebula-card {
  background: rgba(15,15,30,0.6);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 24px;
  backdrop-filter: blur(4px);
  transition: all 300ms;
}
.nebula-card:hover {
  border-color: rgba(139,92,246,.5);
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(139,92,246,.15);
}
        

Pulsar Button

주요 액션에 사용되는 그라디언트 버튼입니다.

Preview

.pulsar-btn {
  background: linear-gradient(135deg, #a78bfa, #ec4899);
  color: #0a0a1a;
  padding: 12px 24px;
  border-radius: 12px;
  font-weight: 600;
  transition: all 200ms;
}
.pulsar-btn:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 32px rgba(139,92,246,.3);
}
        

Service Card

서비스 소개에 사용되는 카드입니다. 상단 컬러 보더와 아이콘을 포함합니다.

.service-card {
  background: rgba(15,15,30,0.6);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 32px;
  backdrop-filter: blur(4px);
}
.service-card .top-border {
  height: 4px;
  border-radius: 16px 16px 0 0;
  opacity: 0;
  transition: opacity 300ms;
}
.service-card:hover .top-border { opacity: 1; }
        

Project Card

프로젝트 쇼케이스에 사용되는 풀-이미지 카드입니다.

.project-card {
  height: 400px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
}
.project-card:hover {
  border-color: rgba(139,92,246,.5);
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(139,92,246,.2);
}
        

스크린샷 갤러리

The Universe 앱의 주요 화면 스크린샷입니다. 디자인 구현 레퍼런스로 활용합니다.

📷 갤러리 준비 중

앱 개발이 진행되면 주요 화면의 스크린샷이 이곳에 추가됩니다. Home Screen, Dynamic Space, Dash Cards, Settings 등의 화면이 포함될 예정입니다.