shared-dg05-coffeeQuokka/hgzero

Fork 0

mirror of https://github.com/hwanny1128/HGZero.git synced 2025-12-06 20:46:23 +00:00

hiondal d3c8b57116 파일 재정렬 및 프로토타입 구조 변경

2025-10-20 13:12:50 +09:00

29 KiB

Raw Blame History

회의록 작성 및 공유 개선 서비스 - 스타일 가이드

버전: 1.0 작성일: 2025-10-15 작성자: 유진 (Frontend Developer) 레퍼런스: 클로바노트 (Naver)

1. 브랜드 아이덴티티

1.1 디자인 컨셉

"Smart Collaboration" - 스마트한 협업 도구

회의록 작성 및 공유 서비스는 AI 기반의 자동화와 실시간 협업을 통해 업무 효율을 극대화하는 스마트한 협업 플랫폼입니다.

1.2 핵심 가치

가치	설명	디자인 반영
정확성	누락 없이 정확하게 기록	명확한 시각적 위계, 검증 상태 표시
효율성	AI 자동화로 작성 부담 감소	AI 제안 영역, 자동 완성 패턴
협업	실시간 동기화 및 공유	협업 인디케이터, 커서 표시
접근성	업무 지식 없이도 사용 가능	전문용어 설명, 친근한 일러스트레이션

1.3 브랜드 성격

전문적이면서도 친근한: 업무용 도구이지만 사용하기 쉬운
신뢰감 + 혁신성: AI 기능의 정확성과 미래지향적 이미지
협업 중심: 개인이 아닌 팀의 성공을 지원

1.4 비주얼 무드

색상: 밝고 활기찬 청록색 (혁신, 성장, 활력)
형태: 둥근 모서리, 부드러운 곡선 (친근함, 접근성)
일러스트레이션: 캐릭터 기반, 간결하고 현대적 (클로바노트 스타일 참조)

2. 디자인 원칙

2.1 명확성 (Clarity)

사용자가 무엇을 해야 하는지 즉시 이해 가능해야 합니다.

명확한 시각적 위계 유지
혼란스러운 요소 최소화
액션 버튼의 목적을 분명히 표현
에러 메시지는 문제와 해결 방법을 함께 제시

예시:

✅ "회의록을 저장하지 못했습니다. 네트워크 연결을 확인하고 다시 시도해주세요."
❌ "오류가 발생했습니다."

2.2 효율성 (Efficiency)

최소한의 클릭으로 목표를 달성할 수 있어야 합니다.

자주 사용하는 기능은 빠른 접근 제공 (FAB, 단축키)
불필요한 단계 제거
자동 완성 및 제안 기능 활용
키보드 단축키 지원

예시:

Ctrl+N: 새 회의 예약
Ctrl+S: 회의록 저장
Ctrl+F: 검색

2.3 일관성 (Consistency)

동일한 패턴과 예측 가능한 동작을 유지해야 합니다.

동일한 기능은 동일한 아이콘과 레이블 사용
색상, 타이포그래피, 간격의 일관된 적용
네비게이션 구조 일관성 유지
브랜드 아이덴티티 유지

2.4 피드백 (Feedback)

모든 액션에 즉각적이고 명확한 피드백을 제공해야 합니다.

버튼 클릭 시 시각적 피드백 (호버, 액티브 상태)
로딩 상태 명확히 표시 (스켈레톤 UI, 스피너)
성공/실패 토스트 알림
실시간 저장 상태 표시 ("저장됨", "저장 중...")

2.5 접근성 (Accessibility)

모든 사용자가 서비스를 쉽게 이용할 수 있어야 합니다.

WCAG 2.1 Level AA 준수
키보드 네비게이션 지원
스크린 리더 호환
충분한 색상 대비 (4.5:1 이상)
터치 영역 최소 44x44px

2.6 협업 중심 (Collaboration-First)

실시간 협업이 핵심 경험이 되어야 합니다.

다른 사용자의 활동을 명확히 표시 (커서, 아바타)
실시간 변경 사항 즉시 반영
충돌 방지 및 해결 메커니즘
버전 관리 및 변경 이력 추적

3. 컬러 시스템

3.1 Primary Color (주요 액션, 브랜드)

Teal/Emerald - 혁신, 성장, 활력을 상징

이름	HEX	RGB	사용처
Primary-Light	`#4DFFDB`	rgb(77, 255, 219)	호버, 비활성화 상태
Primary-Main	`#00D9B1`	rgb(0, 217, 177)	주요 버튼, 링크, 강조
Primary-Dark	`#00A88A`	rgb(0, 168, 138)	눌림 상태, 강조

사용 예시:

Primary 버튼 배경
링크 텍스트
체크박스, 라디오 버튼 선택 상태
진행률 바
FAB (Floating Action Button)

3.2 Secondary Color (보조, 협업 강조)

Indigo - 협업, 신뢰, 전문성을 상징

이름	HEX	RGB	사용처
Secondary-Light	`#A5B4FC`	rgb(165, 180, 252)	배경, 비활성화
Secondary-Main	`#6366F1`	rgb(99, 102, 241)	보조 버튼, 협업 요소
Secondary-Dark	`#4F46E5`	rgb(79, 70, 229)	강조

사용 예시:

협업 인디케이터 (다른 사용자 커서)
보조 버튼
배지 (검증 중 상태)
알림 아이콘

3.3 Semantic Colors (상태 표현)

Success (성공, 완료)

이름	HEX	RGB	사용처
Success-Light	`#6EE7B7`	rgb(110, 231, 183)	배경
Success-Main	`#10B981`	rgb(16, 185, 129)	완료, 검증 완료
Success-Dark	`#059669`	rgb(5, 150, 105)	강조

Warning (경고, 주의)

이름	HEX	RGB	사용처
Warning-Light	`#FCD34D`	rgb(252, 211, 77)	배경
Warning-Main	`#F59E0B`	rgb(245, 158, 11)	경고, 작성 중
Warning-Dark	`#D97706`	rgb(217, 119, 6)	강조

Error (오류, 실패)

이름	HEX	RGB	사용처
Error-Light	`#FCA5A5`	rgb(252, 165, 165)	배경
Error-Main	`#EF4444`	rgb(239, 68, 68)	오류, 긴급
Error-Dark	`#DC2626`	rgb(220, 38, 38)	강조

Info (정보, 알림)

이름	HEX	RGB	사용처
Info-Light	`#93C5FD`	rgb(147, 197, 253)	배경
Info-Main	`#3B82F6`	rgb(59, 130, 246)	정보, 알림
Info-Dark	`#2563EB`	rgb(37, 99, 235)	강조

3.4 Neutral Colors (배경, 텍스트, 테두리)

이름	HEX	RGB	사용처
Gray-50	`#F9FAFB`	rgb(249, 250, 251)	페이지 배경
Gray-100	`#F3F4F6`	rgb(243, 244, 246)	카드 배경, 호버
Gray-200	`#E5E7EB`	rgb(229, 231, 235)	테두리
Gray-300	`#D1D5DB`	rgb(209, 213, 219)	비활성화 테두리
Gray-400	`#9CA3AF`	rgb(156, 163, 175)	플레이스홀더
Gray-500	`#6B7280`	rgb(107, 114, 128)	보조 텍스트
Gray-600	`#4B5563`	rgb(75, 85, 99)	본문 텍스트
Gray-700	`#374151`	rgb(55, 65, 81)	제목
Gray-800	`#1F2937`	rgb(31, 41, 55)	강조 제목
Gray-900	`#111827`	rgb(17, 24, 39)	최고 강조
White	`#FFFFFF`	rgb(255, 255, 255)	카드, 모달 배경
Black	`#000000`	rgb(0, 0, 0)	절대 검정 (거의 사용 안 함)

3.5 다크모드 (선택적)

다크모드를 지원하는 경우 다음 색상을 사용합니다.

요소	라이트모드	다크모드
페이지 배경	Gray-50	Gray-900
카드 배경	White	Gray-800
본문 텍스트	Gray-600	Gray-100
제목	Gray-900	Gray-50
테두리	Gray-200	Gray-700
Primary	#00D9B1	#22D3B0 (밝기 조정)

3.6 색상 사용 가이드

텍스트 색상

제목: Gray-900 (라이트), Gray-50 (다크)
본문: Gray-600 (라이트), Gray-100 (다크)
보조 텍스트: Gray-500
플레이스홀더: Gray-400
링크: Primary-Main (호버 시 Primary-Dark)
에러 텍스트: Error-Main

배경 색상

페이지: Gray-50 (라이트), Gray-900 (다크)
카드: White (라이트), Gray-800 (다크)
호버: Gray-100
선택: Primary-Light (투명도 20%)

테두리 색상

기본: Gray-200
호버: Gray-300
포커스: Primary-Main (2px)
에러: Error-Main

4. 타이포그래피

4.1 폰트 패밀리

Primary Font (본문 및 UI)

한글: Pretendard

깔끔한 고딕 계열
뛰어난 가독성
다양한 굵기 지원 (100~900)
시스템 폰트와 유사한 렌더링

영문/숫자: Inter

웹 환경 최적화
명확한 문자 구분 (l, I, 1 등)
Pretendard와 조화로운 조합

폰트 스택:

font-family: 'Pretendard', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Apple SD Gothic Neo', sans-serif;

Monospace Font (코드, 데이터)

Fira Code, Consolas

코드 스니펫
API 응답
로그, 에러 메시지

폰트 스택:

font-family: 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace;

4.2 폰트 크기 스케일

1.25 배율 기반

레벨	이름	크기 (px / rem)	사용처
1	Display	48px / 3rem	랜딩 페이지 메인 제목
2	H1	36px / 2.25rem	페이지 제목
3	H2	30px / 1.875rem	주요 섹션 제목
4	H3	24px / 1.5rem	서브 섹션 제목
5	H4	20px / 1.25rem	카드 제목, 작은 섹션
6	Body-Large	18px / 1.125rem	강조 본문, 리드 텍스트
7	Body	16px / 1rem	기본 본문 (기준점)
8	Body-Small	14px / 0.875rem	보조 정보, 캡션
9	Caption	12px / 0.75rem	작은 라벨, 타임스탬프

4.3 폰트 굵기 (Font Weight)

레벨	값	사용처
Light	300	보조 정보, 긴 본문 (선택적)
Regular	400	기본 본문
Medium	500	강조 본문, 버튼 텍스트
SemiBold	600	제목 (H3, H4), 중요 정보
Bold	700	큰 제목 (H1, H2), 최고 강조

4.4 행간 (Line Height)

이름	값	사용처
Tight	1.25	큰 제목 (Display, H1, H2)
Normal	1.5	본문 텍스트 (기본)
Relaxed	1.75	긴 본문, 읽기 편안함 필요 시

4.5 자간 (Letter Spacing)

이름	값	사용처
Tight	-0.02em	큰 제목 (Display, H1)
Normal	0	본문 (기본)
Wide	0.02em	작은 캡션, 레이블 (대문자)

4.6 텍스트 스타일 예시

Display

font-size: 48px;
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.02em;

H1

font-size: 36px;
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.02em;

H2

font-size: 30px;
font-weight: 600;
line-height: 1.25;
letter-spacing: 0;

H3

font-size: 24px;
font-weight: 600;
line-height: 1.5;
letter-spacing: 0;

Body (기본)

font-size: 16px;
font-weight: 400;
line-height: 1.5;
letter-spacing: 0;

Caption

font-size: 12px;
font-weight: 400;
line-height: 1.5;
letter-spacing: 0.02em;

5. 간격 시스템

5.1 기본 단위

8px 기반 시스템

모든 간격은 8의 배수를 사용하여 일관성과 시각적 리듬을 유지합니다.

5.2 스케일

레벨	값 (px / rem)	사용처
0	0px / 0	간격 없음
1	4px / 0.25rem	최소 간격 (아이콘-텍스트)
2	8px / 0.5rem	작은 간격 (인라인 요소)
3	12px / 0.75rem	밀접한 요소 (버튼 내부)
4	16px / 1rem	기본 간격
5	20px / 1.25rem	적당한 간격
6	24px / 1.5rem	컴포넌트 간
8	32px / 2rem	섹션 내부
10	40px / 2.5rem	섹션 간
12	48px / 3rem	큰 섹션 간
16	64px / 4rem	페이지 여백
20	80px / 5rem	대형 섹션

5.3 컴포넌트별 간격

버튼

패딩: 12px (상하) × 24px (좌우) - 중형
패딩 (소형): 8px (상하) × 16px (좌우)
패딩 (대형): 16px (상하) × 32px (좌우)
아이콘-텍스트 간격: 8px

입력 필드

패딩: 12px (상하) × 16px (좌우)
레이블-필드 간격: 8px

카드

패딩: 24px
카드 간 간격: 16px (그리드), 24px (리스트)

모달

패딩: 32px
헤더-본문 간격: 24px
본문-푸터 간격: 32px

페이지 여백

데스크탑: 64px (좌우)
태블릿: 32px (좌우)
모바일: 24px (좌우)

5.4 컨테이너 최대 너비

크기	최대 너비	사용처
Small	640px	폼, 로그인 화면
Medium	768px	템플릿 선택
Large	1024px	회의 예약
XLarge	1280px	대시보드
2XLarge	1536px	회의 진행 (에디터)
Full	100%	풀 레이아웃

6. 컴포넌트 스타일

6.1 버튼 (Button)

Primary Button (주요 액션)

스타일:

배경: Primary-Main (#00D9B1)
텍스트: White
패딩: 12px (상하) × 24px (좌우)
테두리 반경: 8px
폰트: Medium (500), 16px
그림자: 없음 (기본), 0 2px 4px rgba(0, 0, 0, 0.1) (호버)

상태:

Hover: 배경 Primary-Light + transform: translateY(-1px) + 그림자 증가
Active: 배경 Primary-Dark + transform: scale(0.98)
Disabled: 배경 Gray-300 + 텍스트 Gray-500 + 커서 not-allowed

코드 예시:

.btn-primary {
  background-color: #00D9B1;
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 16px;
  transition: all 150ms ease-out;
}

.btn-primary:hover {
  background-color: #4DFFDB;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-primary:active {
  background-color: #00A88A;
  transform: scale(0.98);
}

.btn-primary:disabled {
  background-color: #D1D5DB;
  color: #6B7280;
  cursor: not-allowed;
}

Secondary Button (보조 액션)

스타일:

배경: Transparent
텍스트: Primary-Main
테두리: 1px solid Primary-Main
패딩: 12px × 24px
테두리 반경: 8px

상태:

Hover: 배경 Primary-Main (투명도 10%)
Active: 배경 Primary-Main (투명도 20%)
Disabled: 테두리 Gray-300 + 텍스트 Gray-400

Text Button (덜 중요한 액션)

스타일:

배경: Transparent
텍스트: Gray-700
패딩: 8px × 16px
테두리 반경: 8px

상태:

Hover: 배경 Gray-100
Active: 배경 Gray-200

Icon Button

스타일:

크기: 40×40px (중형), 32×32px (소형), 48×48px (대형)
테두리 반경: 50% (원형) 또는 8px (사각형)
아이콘 크기: 20px (중형), 16px (소형), 24px (대형)
배경: Transparent

상태:

Hover: 배경 Gray-100
Active: 배경 Gray-200

Floating Action Button (FAB)

스타일:

크기: 56×56px
테두리 반경: 50% (완전 원형)
배경: Primary-Main
아이콘: White, 24px
그림자: 0 4px 12px rgba(0, 0, 0, 0.15)
위치: 우측 하단 고정 (16px 여백)

상태:

Hover: 그림자 0 6px 16px rgba(0, 0, 0, 0.2) + transform: translateY(-2px)
Active: transform: scale(0.95)

6.2 입력 필드 (Input Field)

Text Input

스타일:

높이: 48px
패딩: 12px (상하) × 16px (좌우)
테두리: 1px solid Gray-300
테두리 반경: 8px
배경: White
폰트: Regular, 16px
플레이스홀더: Gray-400

상태:

Focus: 테두리 Primary-Main 2px + outline 4px Primary-Main (투명도 20%)
Error: 테두리 Error-Main + 하단 에러 메시지 (Error-Main, 14px)
Disabled: 배경 Gray-100 + 텍스트 Gray-400 + 커서 not-allowed
Success: 테두리 Success-Main (선택적)

코드 예시:

.input {
  height: 48px;
  padding: 12px 16px;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  font-size: 16px;
  transition: all 150ms ease-out;
}

.input:focus {
  border-color: #00D9B1;
  border-width: 2px;
  outline: 4px solid rgba(0, 217, 177, 0.2);
}

.input.error {
  border-color: #EF4444;
}

.input:disabled {
  background-color: #F3F4F6;
  color: #9CA3AF;
  cursor: not-allowed;
}

Textarea

스타일:

최소 높이: 120px
패딩: 12px × 16px
나머지는 Text Input과 동일
resize: vertical (세로 크기 조절 가능)

스타일:

Input과 동일
우측 아이콘: Chevron Down, 16px, Gray-500

6.3 카드 (Card)

스타일:

배경: White
테두리: 1px solid Gray-200 (선택적, 없을 수도 있음)
테두리 반경: 12px
패딩: 24px
그림자: 0 1px 3px rgba(0, 0, 0, 0.1) (기본)

상태 (인터랙티브 카드):

Hover: 그림자 0 4px 12px rgba(0, 0, 0, 0.15) + transform: translateY(-2px)
Active: 그림자 0 1px 2px rgba(0, 0, 0, 0.1) + transform: scale(0.99)

코드 예시:

.card {
  background-color: white;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 200ms ease-out;
}

.card.interactive:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

스타일:

배경: White
테두리 반경: 16px
패딩: 32px
최대 너비: 600px (중형), 800px (대형), 480px (소형)
그림자: 0 20px 25px rgba(0, 0, 0, 0.15)

백드롭 (Backdrop):

배경: rgba(0, 0, 0, 0.5)
클릭 시 모달 닫기 (선택적)

애니메이션:

등장: Fade In (200ms) + Scale (0.95 → 1.0)
사라짐: Fade Out (150ms) + Scale (1.0 → 0.95)

6.5 토스트 알림 (Toast)

스타일:

배경: White
테두리 반경: 8px
패딩: 16px × 20px
최대 너비: 400px
그림자: 0 4px 12px rgba(0, 0, 0, 0.15)
위치: 우측 상단 (16px 여백)

타입별 색상:

Success: 좌측 테두리 4px Success-Main + Success 아이콘
Error: 좌측 테두리 4px Error-Main + Error 아이콘
Warning: 좌측 테두리 4px Warning-Main + Warning 아이콘
Info: 좌측 테두리 4px Info-Main + Info 아이콘

동작:

자동 사라짐: 4초 후
닫기 버튼: 우측 상단 X 아이콘
애니메이션: 우측에서 슬라이드 인

6.6 배지 (Badge)

스타일:

패딩: 4px (상하) × 12px (좌우)
테두리 반경: 12px (완전 둥근 형태)
폰트: Medium, 12px

타입별 색상:

Primary: 배경 Primary-Light, 텍스트 Primary-Dark
Success: 배경 Success-Light, 텍스트 Success-Dark
Warning: 배경 Warning-Light, 텍스트 Warning-Dark
Error: 배경 Error-Light, 텍스트 Error-Dark
Neutral: 배경 Gray-200, 텍스트 Gray-700

사용 예시:

상태 표시: "작성 중", "검증 중", "확정됨"
카운트: "3개의 알림", "5명 참석"

7. 반응형 브레이크포인트

7.1 브레이크포인트 정의

디바이스	범위	레이아웃	주요 조정
Mobile	320px ~ 767px	단일 컬럼	햄버거 메뉴, 하단 탭, 스택 레이아웃
Tablet	768px ~ 1023px	2단 레이아웃	토글 사이드바, 터치 최적화
Desktop	1024px ~ 1439px	3단 레이아웃	고정 사이드바, 키보드 단축키
Large Desktop	1440px 이상	확장 레이아웃	더 넓은 중앙 패널, 4단 가능

7.2 디바이스별 UI 조정

Mobile (320px ~ 767px)

네비게이션:

햄버거 메뉴로 사이드바 숨김
하단 탭 네비게이션 (대시보드, 회의, Todo, 더보기)
상단 헤더 고정

레이아웃:

1단 스택 레이아웃
카드/위젯을 세로로 배치
패딩 감소 (24px → 16px)

인터랙션:

최소 터치 영역: 44×44px
버튼 크기 증가
스와이프 제스처 지원

05-회의진행 화면:

탭으로 패널 전환 (회의록 / 참석자 / AI 제안 / 용어 설명)
툴바를 하단 고정 (터치 용이성)

09-Todo관리 화면:

칸반 보드 대신 리스트 뷰 권장
상태 변경은 드롭다운으로

Tablet (768px ~ 1023px)

네비게이션:

사이드바 토글 가능 (기본 숨김)
상단 헤더에 메뉴 아이콘

레이아웃:

2단 그리드 레이아웃 (2×2 또는 2×3)
적절한 여백 유지

05-회의진행 화면:

2단 레이아웃 (에디터 + AI 제안 패널)
참석자 목록은 드로어로 표시

터치 최적화:

버튼 크기: 최소 44×44px
간격: 최소 8px

Desktop (1024px 이상)

네비게이션:

전체 사이드바 항상 표시
호버 효과 및 툴팁

레이아웃:

3단 그리드 레이아웃 (3×2)
더 많은 위젯 동시 표시

05-회의진행 화면:

3단 레이아웃 (참석자 + 에디터 + AI 제안)
모든 패널 동시 표시

키보드 단축키:

Ctrl+N: 새 회의
Ctrl+S: 저장
Ctrl+F: 검색
Ctrl+/: 단축키 가이드

7.3 미디어 쿼리 예시

/* Mobile First 접근 */
.container {
  padding: 16px;
}

/* Tablet */
@media (min-width: 768px) {
  .container {
    padding: 32px;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .container {
    padding: 64px;
  }
}

/* Large Desktop */
@media (min-width: 1440px) {
  .container {
    max-width: 1536px;
    margin: 0 auto;
  }
}

8. 회의록 서비스 특화 컴포넌트

8.1 실시간 협업 인디케이터

사용자 커서

스타일:

사용자별 색상 코드:
- User 1: Primary-Main (#00D9B1)
- User 2: Secondary-Main (#6366F1)
- User 3: Warning-Main (#F59E0B)
- User 4: Info-Main (#3B82F6)
- User 5: Error-Main (#EF4444)
커서 크기: 2px (너비) × 20px (높이)
커서 상단에 아바타 + 이름 레이블
레이블 배경: 사용자 색상, 텍스트: White
레이블 패딩: 4px × 8px, 테두리 반경: 4px

편집 중 하이라이트

스타일:

배경: 사용자 색상 (투명도 20%)
지속 시간: 사용자가 편집하는 동안 유지
애니메이션: 부드러운 페이드인

변경 하이라이트

스타일:

배경: Warning-Light (노란색)
지속 시간: 3초
애니메이션: 3초 동안 페이드아웃

8.2 상태 배지

작성 중

스타일:

배경: Warning-Light (#FCD34D)
텍스트: Warning-Dark (#D97706)
아이콘: Edit 아이콘 (선택적)

검증 중

스타일:

배경: Info-Light (#93C5FD)
텍스트: Info-Dark (#2563EB)
아이콘: Clock 아이콘 (선택적)

확정됨

스타일:

배경: Success-Light (#6EE7B7)
텍스트: Success-Dark (#059669)
아이콘: Check 아이콘 (선택적)

8.3 전문용어 하이라이트

스타일:

밑줄: 2px dotted Primary-Main
커서: pointer

호버 상태:

툴팁 표시
- 배경: Gray-800
- 텍스트: White
- 패딩: 8px × 12px
- 테두리 반경: 6px
- 최대 너비: 300px
- 화살표 표시

클릭 상태:

우측 패널의 "용어 설명" 탭으로 전환
해당 용어 상세 설명 표시

8.4 AI 제안 영역

스타일:

배경: Gray-50
테두리: 1px dashed Primary-Main
테두리 반경: 8px
패딩: 16px
아이콘: AI Sparkle 아이콘 (Primary-Main)

액션 버튼:

적용: Primary 버튼 (소형, 패딩 8px × 16px)
무시: Text 버튼

애니메이션:

등장: 페이드인 + 약간의 상승 (translateY)
업데이트: 부드러운 전환 (200ms)

8.5 Todo 카드

레이아웃:

카드 형태
패딩: 16px
테두리 반경: 8px
그림자: 0 1px 3px rgba(0, 0, 0, 0.1)

우선순위 표시:

높음: 좌측 테두리 4px Error-Main + Error 점 (8px 원)
보통: 테두리 없음, Gray 점
낮음: 표시 없음

진행률 바:

높이: 4px
배경: Gray-200
채워진 부분: Primary-Main
테두리 반경: 2px
위치: 하단

마감일 표시:

D-day 형식: "D-3", "오늘", "D+2 (지남)"
색상:
- 지남: Error-Main
- 오늘: Warning-Main
- 여유: Gray-500

드래그 핸들:

아이콘: 점 6개 (2×3)
색상: Gray-400
위치: 좌측 상단

호버 상태:

그림자 증가
드래그 핸들 색상 변경 (Gray-600)

8.6 타임라인

스타일:

세로 라인: 2px solid Gray-300
위치: 좌측 고정

이벤트 점:

크기: 12px 원
배경: Primary-Main
테두리: 2px solid White
위치: 라인 중앙

타임스탬프:

폰트: Caption (12px), Gray-500
위치: 이벤트 점 우측

이벤트 내용:

폰트: Body-Small (14px), Gray-700
위치: 타임스탬프 하단

9. 인터랙션 패턴

9.1 버튼 인터랙션

Hover:

transition: all 150ms ease-out;
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

Active (클릭):

transform: scale(0.98);

Disabled:

cursor: not-allowed;
opacity: 0.6;

9.2 카드 인터랙션 (인터랙티브 카드)

Hover:

transition: all 200ms ease-out;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

클릭:

transform: scale(0.99);

9.3 모달 애니메이션

등장:

/* Backdrop */
opacity: 0 → 1;
transition: opacity 200ms ease-out;

/* Modal */
opacity: 0 → 1;
transform: scale(0.95) → scale(1.0);
transition: all 200ms ease-out;

사라짐:

opacity: 1 → 0;
transform: scale(1.0) → scale(0.95);
transition: all 150ms ease-in;

9.4 토스트 알림 애니메이션

등장:

transform: translateX(400px) → translateX(0);
opacity: 0 → 1;
transition: all 200ms ease-out;

사라짐:

transform: translateX(0) → translateX(400px);
opacity: 1 → 0;
transition: all 150ms ease-in;

자동 사라짐: 4초 후

9.5 로딩 상태

스켈레톤 UI

스타일:

배경: Gray-200
테두리 반경: 4px
애니메이션: 펄스 (밝기 변화)

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.skeleton {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

스피너

스타일:

색상: Primary-Main
크기: 24px (소형), 40px (중형), 56px (대형)
애니메이션: 회전

@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  animation: spin 1s linear infinite;
}

9.6 드래그 앤 드롭

드래그 시작:

opacity: 0.5;
cursor: grabbing;

드롭 영역 (유효):

border: 2px dashed #00D9B1;
background-color: rgba(0, 217, 177, 0.05);

드롭 영역 (무효):

border: 2px dashed #EF4444;
background-color: rgba(239, 68, 68, 0.05);

드롭 완료:

transition: all 300ms ease-out;
transform: translate(newX, newY);

9.7 포커스 스타일

인풋/버튼 포커스:

outline: 4px solid rgba(0, 217, 177, 0.2);
outline-offset: 0;
border-color: #00D9B1;

키보드 네비게이션 포커스:

/* 마우스 클릭 시에는 outline 숨김 */
.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

/* 키보드 탐색 시에만 outline 표시 */
.focus-visible {
  outline: 2px solid #00D9B1;
  outline-offset: 2px;
}

9.8 페이지 전환 애니메이션

페이드 전환:

/* 나가는 페이지 */
opacity: 1 → 0;
transition: opacity 150ms ease-out;

/* 들어오는 페이지 */
opacity: 0 → 1;
transition: opacity 200ms ease-in;

10. 변경 이력

버전	날짜	작성자	변경 내용
1.0	2025-10-15	유진	초안 작성 - 레퍼런스 클로바노트 기반 스타일 가이드 설계 완료

부록

A. 색상 접근성 체크리스트

Primary-Main (#00D9B1) + White: 대비율 3.5:1 (AA Large) ✅
Gray-600 (#4B5563) + White: 대비율 8.6:1 (AAA) ✅
Primary-Main + Gray-900: 대비율 4.8:1 (AA) ✅
모든 상태 색상 (Success, Warning, Error, Info) + White: AA 이상 ✅

B. 디자인 도구 및 에셋

권장 디자인 도구:

Figma (프로토타입 및 디자인 시스템)
Adobe XD (대안)

아이콘 라이브러리:

Heroicons (추천)
Feather Icons
Lucide Icons

일러스트레이션:

unDraw (무료, 색상 커스터마이징 가능)
Storyset (Freepik)
자체 제작 (브랜드 일관성)

C. 프론트엔드 구현 권장사항

CSS 프레임워크:

Tailwind CSS (유틸리티 우선, 빠른 개발)
Emotion / styled-components (CSS-in-JS)

컴포넌트 라이브러리:

Headless UI (접근성 우수)
Radix UI (무스타일 프리미티브)
자체 제작 (완전한 커스터마이징)

애니메이션:

Framer Motion (React)
GSAP (고급 애니메이션)
CSS Transitions (단순 애니메이션)

D. 참고 자료

WCAG 2.1 가이드라인: https://www.w3.org/WAI/WCAG21/quickref/
클로바노트: https://clovanote.naver.com/
Pretendard 폰트: https://cactus.tistory.com/306
Tailwind CSS 컬러 팔레트: https://tailwindcss.com/docs/customizing-colors

문서 끝

29 KiB Raw Blame History Unescape Escape

회의록 작성 및 공유 개선 서비스 - 스타일 가이드

목차

1. 브랜드 아이덴티티

1.1 디자인 컨셉

1.2 핵심 가치

1.3 브랜드 성격

1.4 비주얼 무드

2. 디자인 원칙

2.1 명확성 (Clarity)

2.2 효율성 (Efficiency)

2.3 일관성 (Consistency)

2.4 피드백 (Feedback)

2.5 접근성 (Accessibility)

2.6 협업 중심 (Collaboration-First)

3. 컬러 시스템

3.1 Primary Color (주요 액션, 브랜드)

3.2 Secondary Color (보조, 협업 강조)

3.3 Semantic Colors (상태 표현)

Success (성공, 완료)

Warning (경고, 주의)

Error (오류, 실패)

Info (정보, 알림)

3.4 Neutral Colors (배경, 텍스트, 테두리)

3.5 다크모드 (선택적)

3.6 색상 사용 가이드

텍스트 색상

배경 색상

테두리 색상

4. 타이포그래피

4.1 폰트 패밀리

Primary Font (본문 및 UI)

Monospace Font (코드, 데이터)

4.2 폰트 크기 스케일

4.3 폰트 굵기 (Font Weight)

4.4 행간 (Line Height)

4.5 자간 (Letter Spacing)

4.6 텍스트 스타일 예시

Display

H1

H2

H3

Body (기본)

Caption

5. 간격 시스템

5.1 기본 단위

5.2 스케일

5.3 컴포넌트별 간격

버튼

입력 필드

카드

모달

페이지 여백

5.4 컨테이너 최대 너비

6. 컴포넌트 스타일

6.1 버튼 (Button)

Primary Button (주요 액션)

Secondary Button (보조 액션)

Text Button (덜 중요한 액션)

Icon Button

Floating Action Button (FAB)

6.2 입력 필드 (Input Field)

Text Input

Textarea

Select / Dropdown

6.3 카드 (Card)

6.4 모달 (Modal)

6.5 토스트 알림 (Toast)

6.6 배지 (Badge)

7. 반응형 브레이크포인트

7.1 브레이크포인트 정의

7.2 디바이스별 UI 조정

Mobile (320px ~ 767px)

Tablet (768px ~ 1023px)

Desktop (1024px 이상)

7.3 미디어 쿼리 예시

8. 회의록 서비스 특화 컴포넌트

8.1 실시간 협업 인디케이터

사용자 커서

편집 중 하이라이트

29 KiB

Raw Blame History