기본 제공 명명된 셀 템플릿 갤러리

SpreadJS 디자이너에는 일반적인 재무 서식, 상태 추적, 데이터 시각화 및 상호 작용 동작을 위한 다양한 기본 제공 명명된 셀 템플릿이 포함되어 있습니다.

이 페이지에서는 각 템플릿을 적용했을 때 구성되는 내용을 요약합니다.

템플릿은 다음 세 가지 범주로 구분됩니다.

• 재무

• 상태 및 점수

• 데이터 및 상호 작용

재무 템플릿

이 템플릿들은 재무 보고 및 분석에 일반적으로 사용되는 표준 숫자 서식을 제공합니다.

재무 금액

일반적인 재무 보고를 위한 숫자 값 서식을 적용합니다.

구성

• 숫자 서식: #,##0.00

• 맞춤: 오른쪽

• 조건부 서식: 0보다 작은 값은 빨간색(Accent 2)으로 표시

• 데이터 유효성 검사: 숫자 값만 허용

효과

천 단위 구분 기호와 소수점 둘째 자리까지 표시하며, 음수 금액을 시각적으로 구분합니다.

성장률

양수 및 음수 값을 시각적으로 구분하여 백분율 기반 지표를 표시합니다.

구성

• 숫자 서식: 0.00%

• 맞춤: 오른쪽

• 조건부 서식:

  • 0보다 큰 값 → 녹색 글꼴(Accent 6)

  • 0보다 작은 값 → 빨간색 글꼴(Accent 2)

효과

백분율 표시를 표준화하고 증가 및 감소를 강조합니다.

예산 차이

유리한 결과와 불리한 결과를 명확하게 구분하여 재무 차이를 표시합니다.

구성

• 숫자 서식: +#,##0.00;-#,##0.00;0.00

• 맞춤: 오른쪽

• 조건부 서식:

  • 양수 값 → 녹색 배경 및 진한 녹색 텍스트

  • 음수 값 → 빨간색 배경 및 진한 빨간색 텍스트

효과

배경색을 사용하여 차이 방향을 강조하고 비교를 쉽게 합니다.

통화

미국 달러 통화 서식을 적용합니다.

구성

• 숫자 서식: $#,##0.00

• 맞춤: 오른쪽

효과

달러 기호와 천 단위 구분 기호를 사용하여 값을 표시합니다.

회계 형식

공식 재무제표용 회계 스타일 숫자 서식을 적용합니다.

구성

• 통화 기호가 정렬된 회계 숫자 서식

• 음수 값은 괄호로 표시

• 맞춤: 오른쪽

효과

일관된 회계 형식을 제공하고 음수 값을 표준 방식으로 표시합니다.

상태 및 점수 템플릿

이 템플릿들은 상태 관리, 점수 시스템 및 진행 상황 추적을 지원합니다.

워크플로 상태

색상으로 구분된 상태 선택기를 제공합니다.

구성

• 맞춤: 가운데

• 데이터 유효성 검사: 드롭다운 목록(Not Started / In Progress / Completed / Blocked)

• 조건부 서식:

  • Completed → 녹색 배경

  • In Progress → 파란색 배경

  • Not Started → 회색 배경

  • Blocked → 빨간색 배경

효과

상태 값을 일관되게 유지하면서 워크플로 단계를 시각적으로 구분합니다.

완료 진행률 막대

진행 상황을 데이터 막대로 표시합니다.

구성

• 숫자 서식: 백분율

• 맞춤: 가운데

• 조건부 서식: 데이터 막대(0~100% 범위)

• 데이터 유효성 검사: 0~1 사이의 소수

효과

실제 값을 유지하면서 완료율을 시각적으로 표시합니다.

우선순위 수준

색상으로 구분된 우선순위 선택기를 제공합니다.

구성

• 맞춤: 가운데

• 데이터 유효성 검사: 드롭다운 목록(High / Medium / Low)

• 조건부 서식:

  • High → 빨간색 배경

  • Medium → 노란색 배경

  • Low → 녹색 배경

효과

우선순위를 표준화하고 긴급도를 시각적으로 강조합니다.

마감일

셀을 날짜 형식으로 표시하고 마감일을 강조합니다.

구성

• 날짜 형식: yyyy-mm-dd

• 맞춤: 가운데

• 데이터 유효성 검사: 유효한 날짜 범위

• 조건부 서식:

  • 기한 초과 → 빨간색 배경

  • 오늘 마감 → 노란색 배경

효과

시간에 민감한 항목의 가시성을 높이고 임박하거나 지난 마감일을 강조합니다.

성적 점수

점수에 따른 색상 등급을 적용합니다.

구성

• 맞춤: 가운데

• 데이터 유효성 검사: 0~100 사이의 정수

• 조건부 서식:

  • 90~100 → 진한 녹색

  • 80~89 → 연한 녹색

  • 70~79 → 노란색

  • 60~69 → 연한 빨간색

  • 60 미만 → 진한 빨간색

효과

점수 구간에 따라 성과를 시각적으로 평가합니다.

재고 수준

임계값 기반 색상으로 재고 수준을 강조합니다.

구성

• 숫자 서식: #,##0

• 맞춤: 오른쪽

• 데이터 유효성 검사: 0 이상의 정수

• 조건부 서식:

  • 100 미만 → 빨간색(부족)

  • 100~500 → 노란색(보통)

  • 500 초과 → 녹색(충분)

효과

재고 수량을 수준별로 시각적으로 분류합니다.

별점

1~5점 평가 척도를 색상과 함께 표시합니다.

구성

• 맞춤: 가운데

• 데이터 유효성 검사: 1~5 사이의 정수

• 조건부 서식:

  • 5 → 진한 녹색

  • 4 → 연한 녹색

  • 3 → 노란색

  • 1~2 → 빨간색

효과

평가 입력을 표준화하고 점수 수준을 시각적으로 구분합니다.

예/아니요 전환

색상으로 구분된 Boolean 선택기를 제공합니다.

구성

• 맞춤: 가운데

• 데이터 유효성 검사: 드롭다운 목록(Yes / No)

• 조건부 서식:

  • Yes → 녹색 배경

  • No → 빨간색 배경

효과

Boolean 입력을 표준화하고 즉각적인 시각적 피드백을 제공합니다.

데이터 및 상호 작용 템플릿

이 템플릿들은 데이터 시각화 및 상호 작용 기능을 향상시킵니다.

히트 맵

상대적인 셀 값을 기준으로 3색 그라데이션을 적용합니다.

구성

• 맞춤: 가운데

• 조건부 서식: 3색 눈금

  • 최저값 → 빨간색(Accent 2)

  • 중간값 → 노란색(Accent 4)

  • 최고값 → 녹색(Accent 6)

효과

그라데이션 색상을 사용하여 값 분포를 강조합니다.

편집 가능 필드

입력 필드 스타일의 셀과 상호 작용 피드백을 제공합니다.

구성

• 기본 스타일: 흰색 배경 + Accent 5 하단 테두리

• 셀 상태:

  • Hover → 연한 파란색 배경

  • Edit → 파란색 배경 및 전체 테두리

  • Active → Accent 1 테두리

효과

편집 가능한 필드에 양식 스타일의 상호 작용 피드백을 제공합니다.

상위/하위

범위 내 상위 10% 및 하위 10% 값을 강조합니다.

구성

• 맞춤: 오른쪽

• 조건부 서식:

  • 상위 10% → 녹색 배경

  • 하위 10% → 빨간색 배경

효과

데이터 집합에서 극단적인 값을 빠르게 식별할 수 있습니다.

중복 확인

범위 내 중복 값을 강조합니다.

구성

• 조건부 서식: 중복 값 규칙(노란색 배경 + 진한 노란색 텍스트)

효과

데이터 검증 및 정리 시 중복 항목을 쉽게 찾을 수 있습니다.

이메일 주소

이메일 입력용 셀 서식 및 형식 검증을 제공합니다.

구성

• 맞춤: 왼쪽

• 글꼴 색상: Accent 1(파란색)

• 데이터 유효성 검사: 이메일 형식 검증 규칙 및 입력 안내

효과

올바른 이메일 입력을 유도하고 이메일 필드를 시각적으로 구분합니다.

활성 행

현재 활성 셀이 포함된 전체 행을 강조합니다.

구성

• 조건부 서식: 행 상태 규칙(Active 상태)

• 배경색: Accent 1(반투명)

효과

대규모 데이터에서 현재 행을 쉽게 추적할 수 있습니다.

마우스 오버 행

마우스를 올린 행을 강조합니다.

구성

• 조건부 서식: 행 상태 규칙(Hover 상태)

• 배경색: Accent 5(반투명)

효과

데이터 탐색 시 가독성을 향상시킵니다.

십자선

선택한 셀의 행과 열을 모두 강조합니다.

구성

• 조건부 서식:

  • 행 상태 규칙(Selected 상태)

  • 열 상태 규칙(Selected 상태)

• 셀 상태 조정:

  • 중첩 표시를 방지하기 위해 선택된 셀 배경을 투명하게 설정

효과

행렬 형태 데이터에서 정확한 위치를 쉽게 파악할 수 있습니다.