Pure Engine Design System

퓨어엔진 디자인 시스템

AI 마케팅 성과 분석, 인사이트, 모니터링, 리포트 제작까지 하나의 SaaS 경험으로 연결합니다.

데이터 기반AI 인사이트실시간 모니터링리포트 자동화기본 접근성 준수

기본 서체 Pretendard · 포인트 서체 Poppins · 협업 기준 2026.06.24

클라이언트 보기 툴 보기

로고

Primary, White, Black, Soft 버전 사용 가이드입니다.

Primary

밝은 배경에서 가장 먼저 사용합니다.

variant: primaryLockup

White

어두운 배경에서는 White 로고를 사용합니다.

variant: whiteLockup

Black

어두운 배경, 이미지 위, 강조 배너에서 사용합니다.

variant: black

Soft

오렌지 계열의 연한 배경에서 부드럽게 사용합니다.

variant: soft

버튼

입력 · 선택

상태

수집중정상주의위험대기

피드백 · 모달

KPI 카드

전체 캠페인

145,231

이전 기간 대비 12.4% 증가

활성 캠페인

이전 기간 대비 3.2% 증가

평균 참여율

4.8%

이전 기간 대비 0.6%p 감소

패턴 · 모니터링 대시보드

모니터링 대시보드

API 정상수집기 실행중AI 엔진 주의리포트 정상

실시간 알림

최근 1시간 동안 검토가 필요한 신호가 3건 발생했습니다.

실시간 알림

TikTok 채널에서 응답 지연이 감지되었습니다. 데이터 수집 상태를 확인해 주세요.

전체 정상주의 2건위험 1건수집중 3건

패턴 · 캠페인 테이블

캠페인명	채널	상태	최종 업데이트
브랜드 인지도 캠페인	Instagram	수집중	2026-06-22 14:32
신제품 런칭 프로모션	YouTube	정상	2026-06-22 13:10
여름 시즌 이벤트	TikTok	주의	2026-06-22 12:45
인플루언서 협찬	Instagram	위험	2026-06-22 11:20
리타겟팅 광고	Facebook	대기	2026-06-22 10:05

데이터 시각화 (Chart.js)

선형 차트

막대 차트

도넛 차트

전체 23,456 · 주요 비중 45%

퍼널 차트

방문

클릭

전환 후보

구매

패턴 · 리포트 대시보드

월간 리포트 템플릿

표지, 요약, KPI, AI 인사이트까지 한 번에 검토하는 리포트 구성 패턴입니다.

표지

Monthly Report

2026.06

Report

요약

Executive Summary

핵심 지표와 이슈

Report

KPI 요약

KPI Snapshot

+18.4%

KPI

AI 인사이트

AI Insight

Visual Libraries

화면 디자인에 주로 쓰이는 라이브러리입니다.

Chart.js

데이터 시각화 라이브러리

막대 차트, 선 그래프, 파이 차트, 도넛 차트 등 다양한 형태의 데이터 시각화를 구현할 수 있는 JavaScript 라이브러리입니다. 반응형을 기본 지원하며 대시보드, 통계 페이지, 리포트 화면에 주로 사용됩니다.

chart.js문서 보기

Swiper

터치 기반 슬라이더 라이브러리

모바일과 웹 환경에서 부드러운 슬라이드, 캐러셀, 배너, 카드 스와이프 UI를 구현할 수 있는 라이브러리입니다. 자동 재생, 무한 루프, 썸네일 연동, 세로/가로 슬라이드 등을 지원합니다.

swiper문서 보기

Fancybox

이미지·미디어 팝업 라이브러리

이미지, 동영상, iframe, HTML 콘텐츠 등을 모달(Lightbox) 형태로 표시하는 라이브러리입니다. 갤러리 보기, 확대/축소, 슬라이드 이동, 썸네일 네비게이션 기능을 제공합니다.

@fancyapps/ui문서 보기

Lottie Files

JSON 기반 모션 애니메이션 라이브러리

After Effects에서 제작한 애니메이션을 JSON 형태로보내 웹·앱에서 가볍게 재생할 수 있는 라이브러리입니다. 로딩, 성공, 오류, 빈 상태, 마이크로 인터랙션 등에 주로 사용됩니다.

lottie-react문서 보기

Swiper 데모

캠페인 성과 요약

주간 KPI와 채널별 전환율을 한눈에 확인합니다.

AI 인사이트

추천 액션과 이상 신호를 카드로 스와이프합니다.

리포트 미리보기

월간 리포트 섹션을 캐러셀로 탐색합니다.

실시간 모니터링

수집기·API·AI 엔진 상태를 슬라이드로 전환합니다.

Fancybox 데모

썸네일을 클릭하면 Fancybox Lightbox가 열립니다.

Lottie 데모

AI 분석 중

리포트 생성 중

데이터 동기화

업로드 중

아이콘 라이브러리

Figma 05 Icon 페이지 기준 64개 제품 아이콘 세트입니다.

아이콘 컬러 토큰

Default

color/icon/default

Secondary

color/icon/secondary

Muted

color/icon/muted

Brand

color/icon/brand

Success

color/icon/success

Warning

color/icon/warning

Info

color/icon/info

Error

color/icon/error

데이터 / 분석

대시보드Icon/Dashboard

선형 차트Icon/LineChart

막대 차트Icon/BarChart

도넛 차트Icon/PieChart

활동 지표Icon/Activity

상승 추이Icon/TrendingUp

게이지Icon/Gauge

데이터베이스Icon/Database

상태 / 알림

알림Icon/Bell

주의Icon/AlertTriangle

정상Icon/CheckCircle

오류Icon/XCircle

정보Icon/Info

대기Icon/Clock

긴급Icon/Zap

검증Icon/ShieldCheck

운영 / 액션

검색Icon/Search

필터Icon/Filter

캘린더Icon/Calendar

다운로드Icon/Download

업로드Icon/Upload

새로고침Icon/Refresh

설정Icon/Settings

더보기Icon/MoreHorizontal

문서 / 리포트

문서Icon/FileText

체크리스트Icon/Clipboard

메일Icon/Mail

가이드Icon/Book

폴더Icon/Folder

태그Icon/Tag

메시지Icon/Message

외부 링크Icon/ExternalLink

시스템 / 계정

사용자Icon/Users

조직Icon/Building

잠금Icon/Lock

서버Icon/Server

프로세서Icon/Cpu

글로벌Icon/Globe

권한Icon/KeyRound

연결Icon/Link

AI / 자동화

AI 생성Icon/Sparkles

AI 봇Icon/Bot

AI 모델Icon/BrainCircuit

자동 보정Icon/WandSparkles

프롬프트Icon/MessageCircleQuestion

워크플로우Icon/Workflow

AI 분석Icon/ScanSearch

에이전트 연결Icon/Network

사이트 / 웹

반응형Icon/MonitorSmartphone

템플릿Icon/LayoutTemplate

레이아웃Icon/PanelsTopLeft

인터랙션Icon/MousePointerClick

코드Icon/CodeXml

런칭Icon/Rocket

다국어Icon/Languages

사이트맵Icon/Sitemap

보안 접근Icon/GlobeLock

미디어 추가Icon/ImagePlus

홈Icon/Home

메뉴Icon/Menu

애니메이션 카탈로그

Lottie 기반 서비스 모션 에셋 카드입니다. JSON 파일을 연결하면 미리보기가 업데이트됩니다.

AI 분석 중

1.6s / Loop

import Lottie from "lottie-react";
import animationData from "@/assets/lottie/ai-processing.json";

export function AiProcessing() {
  return (
    <Lottie
      animationData={animationData}
      loop={true}
      autoplay
      aria-label="AI 분석 중"
    />
  );
}

리포트 생성 중

1.6s / Loop

import Lottie from "lottie-react";
import animationData from "@/assets/lottie/report-generating.json";

export function ReportGenerating() {
  return (
    <Lottie
      animationData={animationData}
      loop={true}
      autoplay
      aria-label="리포트 생성 중"
    />
  );
}

데이터 동기화

1.6s / Loop

import Lottie from "lottie-react";
import animationData from "@/assets/lottie/data-sync.json";

export function DataSync() {
  return (
    <Lottie
      animationData={animationData}
      loop={true}
      autoplay
      aria-label="데이터 동기화"
    />
  );
}

업로드 중

1.6s / Loop

import Lottie from "lottie-react";
import animationData from "@/assets/lottie/uploading.json";

export function Uploading() {
  return (
    <Lottie
      animationData={animationData}
      loop={true}
      autoplay
      aria-label="업로드 중"
    />
  );
}

빈 상태

1.6s / Loop

import Lottie from "lottie-react";
import animationData from "@/assets/lottie/empty-state.json";

export function EmptyState() {
  return (
    <Lottie
      animationData={animationData}
      loop={true}
      autoplay
      aria-label="빈 상태"
    />
  );
}

성공 완료

1.6s / Once

import Lottie from "lottie-react";
import animationData from "@/assets/lottie/success-complete.json";

export function SuccessComplete() {
  return (
    <Lottie
      animationData={animationData}
      loop={false}
      autoplay
      aria-label="성공 완료"
    />
  );
}

오류

1.6s / Once

import Lottie from "lottie-react";
import animationData from "@/assets/lottie/error-state.json";

export function ErrorState() {
  return (
    <Lottie
      animationData={animationData}
      loop={false}
      autoplay
      aria-label="오류"
    />
  );
}

권한 없음

1.6s / Once

import Lottie from "lottie-react";
import animationData from "@/assets/lottie/no-permission.json";

export function NoPermission() {
  return (
    <Lottie
      animationData={animationData}
      loop={false}
      autoplay
      aria-label="권한 없음"
    />
  );
}

CSS 유틸리티

Spin

Pulse

Bounce

Fade

퓨어엔진 디자인 시스템

로고

Primary

White

Black

Soft

버튼

입력 · 선택

상태

피드백 · 모달

KPI 카드

패턴 · 모니터링 대시보드

모니터링 대시보드

패턴 · 캠페인 테이블

데이터 시각화 (Chart.js)

선형 차트

막대 차트

도넛 차트

퍼널 차트

패턴 · 리포트 대시보드

Visual Libraries

Chart.js

Swiper

Fancybox

Lottie Files

Swiper 데모

Fancybox 데모

리포트 표지

요약 페이지

KPI 스냅샷

AI 인사이트

Lottie 데모

아이콘 라이브러리

아이콘 컬러 토큰

데이터 / 분석

상태 / 알림

운영 / 액션

문서 / 리포트

시스템 / 계정

AI / 자동화

사이트 / 웹

애니메이션 카탈로그

AI 분석 중

리포트 생성 중

데이터 동기화

업로드 중

빈 상태

성공 완료

오류

권한 없음

CSS 유틸리티