coastdigitalgroup/coastai-skills

타임라인 활동 시스템

목적

타임라인 활동 시스템은 이벤트의 연대기적 순서, 히스토리 로그 또는 로드맵을 설계하기 위한 방법론을 제공합니다. 이를 통해 사용자는 진행 상황을 추적하고, 시간적 관계를 이해하며, 과거 데이터를 효율적으로 스캔할 수 있습니다. 이 시스템은 정보 밀도와 공간적 리듬의 균형을 맞추어 모든 뷰포트에서 '언제'와 '무엇이' 일어났는지에 대한 서사가 명확하게 전달되도록 합니다.

사용 사례

• SaaS 대시보드용 활동 피드 설계 (예: 프로젝트 히스토리)
• 제품 로드맵 또는 릴리스 노트 구조화
• 회사 연혁 또는 '회사 소개' 마일스톤 구성
• 전자상거래 주문 추적 또는 배송 내역 구현
• 다단계 프로세스 시각화 관리 (예: 지원 상태)

사용하지 말아야 할 경우

• 선형 단계 진행: 사용자가 실시간으로 완료해야 하는 간단한 단계 순서는 step-progress-system을 사용하세요.
• 순수 표 형식 데이터: 여러 열로 정렬 및 필터링이 주요 목적인 경우(예: 전체 재무 감사 로그) data-table-ui-system을 사용하세요.
• 전체 탐색: 사이트 전체 구조에는 site-navigation-system을 사용하세요.
• 간단한 블로그 피드: 시각적 '스레드'나 시간 마커 없이 그리드 또는 목록의 표준 카드로 충분한 경우에는 사용하지 마세요.

입력

1. 이벤트 인벤토리: 이벤트, 타임스탬프 및 관련 메타데이터 목록
2. 시간 해상도: 사용자가 초, 일 또는 연도 단위를 신경 쓰나요?
3. 이벤트 유형: 이벤트 분류 (예: 정보, 성공, 경고, 오류 또는 마일스톤 vs. 부수 작업)
4. 공간 제약: 타임라인이 사이드바, 전체 페이지 보기 또는 좁은 카드에 표시되나요?
5. 브랜드 토큰: 색상, 타이포그래피 스케일 및 간격 토큰

출력

1. 타임라인 구조 명세: '스레드'(세로/가로 선), '노드'(마커) 및 '콘텐츠 블록'의 정의
2. 그룹화 전략: 이벤트 클러스터링 규칙 (예: '오늘', '어제', '2023년 10월')
3. 상태 및 상태 매트릭스: 다양한 이벤트 유형 및 상호작용 상태에 대한 시각적 처리
4. 반응형 청사진: 타임라인이 중앙 정렬 또는 번갈아 나타나는 레이아웃에서 단일 열 모바일 보기로 전환되는 방식

워크플로우

1. 시간 스레드 및 방향 정의

시간의 방향을 결정합니다:

• 세로(표준): 가변적인 콘텐츠 길이와 긴 히스토리에 가장 적합
• 가로: 가로 공간이 충분한 높은 수준의 로드맵 또는 짧은 프로세스에 가장 적합

'스레드'(이벤트를 연결하는 선)를 설정하고 일관된 시각적 무게와 색상(보통 중성의 부드러운 톤)을 유지합니다.

2. 이벤트 노드 및 마커 설정

각 이벤트에 대한 시각적 앵커를 설계합니다:

• 심플 노드: 부수 작업을 위한 작은 점 또는 원
• 아이콘 노드: 이벤트 유형을 나타내는 원 안의 아이콘 (예: '완료'의 체크 표시)
• 날짜 마커: 노드 옆이나 위에 떠 있는 레이블

3. 공간 리듬 및 그룹화 적용

시간대별로 이벤트를 그룹화하여 시각적 혼란을 방지합니다:

• 상대적 그룹화: '방금 전', '2시간 전'
• 절대적 그룹화: '2023년 10월 23일 월요일', '2023년 9월'

fluid-spacing-system을 사용하여 이벤트 간 일관된 세로 간격을 유지합니다. 우선순위가 높은 마일스톤은 부수 활동 항목보다 더 많은 여백을 가져야 합니다.

4. 콘텐츠 블록 구성

각 노드 옆에 있는 콘텐츠에 visual-hierarchy-system을 적용합니다:

• 제목: 핵심 작업 또는 이벤트 이름
• 메타데이터: 타임스탬프, 실행자(사용자 아바타/이름) 및 카테고리
• 본문/설명: 선택적 세부 정보 또는 확장 콘텐츠
• 액션: 상황별 버튼 (예: '세부 정보 보기', '실행 취소')

5. 반응형 적응 계획

• 번갈아 나타나는 레이아웃(Z-패턴): 데스크톱에서는 이벤트가 스레드의 왼쪽과 오른쪽을 번갈아 표시됩니다. 모바일에서는 단일 열(스레드는 왼쪽, 콘텐츠는 오른쪽)로 축소됩니다.
• 한쪽 레이아웃: 가독성을 극대화하기 위해 모바일에서는 '스레드-왼쪽, 콘텐츠-오른쪽'으로 표준화합니다.

의사 결정 규칙

• '스레드' 규칙: 시간상 논리적 간격이나 '더 보기' 작업이 없는 한 선이 끊어져서는 안 됩니다.
• 그룹화 임계값: 같은 날에 5개 이상의 이벤트가 발생하면 중복 텍스트를 줄이기 위해 단일 날짜 제목 아래에 그룹화합니다.
• '노드' 계층 구조: '마일스톤'에는 더 큰 노드나 브랜드 색상을 사용하고, '활동'에는 더 작고 중성적인 노드를 사용합니다.
• 타임스탬프 위치: 세로 타임라인의 경우 가장 빠른 스캔을 위해 데스크톱에서는 스레드 왼쪽에, 모바일에서는 제목 바로 아래에 타임스탬프를 배치합니다.

제약 조건

• 접근성: 타임라인은 목록(<ul> 또는 <ol>)으로 탐색 가능해야 합니다. 아이콘이 포함된 노드에는 스크린 리더를 위한 aria-label 또는 숨겨진 텍스트가 있어야 합니다. 타임스탬프를 <time datetime="..."> 요소로 감싸서 상대적 레이블('2시간 전')이 기계 판독 가능하도록 합니다. 실시간 업데이트 활동 피드의 경우 전체 목록이 아닌 aria-live="polite" 영역 내부에 새 항목을 추가하여 스크린 리더 사용자가 위치를 잃지 않고 새 이벤트를 들을 수 있도록 합니다.
• 반응형: 타임라인이 뷰포트를 넘치지 않도록 해야 합니다. 가로 타임라인은 모바일에서 세로로 전환되거나 가로 스크롤을 사용해야 합니다.
• 시각적 대비: 스레드와 노드는 배경에 대해 3:1 대비 비율을 충족해야 합니다.

일반적인 실패 패턴

• 끊어진 스레드: 세로선이 임의로 시작하고 끝나서 순서를 따라가기 어렵게 만듭니다.
• 정보 과부하: 모든 이벤트에 너무 많은 본문 텍스트를 포함시켜 타임라인을 텍스트 벽으로 만듭니다.
• 일관성 없는 정렬: 명확한 논리 없이 같은 타임라인 내에서 중앙 정렬과 왼쪽 정렬 텍스트를 혼합합니다.
• 모바일 좌우 대칭 유지: 모바일에서 번갈아 나타나는(왼쪽/오른쪽) 레이아웃을 유지하려고 하여 텍스트를 위한 좁은 열만 남깁니다.

검증 기준

• 이벤트가 명확하고 일관된 시간 순서(오름차순 또는 내림차순)를 따릅니다.
• 시각적 마커(노드)와 연결 스레드가 일관되게 스타일링됩니다.
• 시간별 그룹화(예: '오늘')를 사용하여 인지 부하를 줄입니다.
• 반응형 동작(예: 단일 열로 축소)이 정의되고 기능합니다.
• 접근성: 타임라인이 시맨틱 목록으로 마크업되고 타임스탬프가 <time datetime="...">를 사용합니다.
• 실시간 피드가 스크린 리더 포커스를 방해하지 않고 범위가 지정된 aria-live="polite" 영역을 통해 새 항목을 알립니다.
• 주요 마일스톤이 부수 활동과 시각적으로 구분됩니다.