LecturePro Design System

LecturePro Design System

기업/기관과 전문 강사를 연결하는 B2B 강사 매칭 플랫폼의 디자인 시스템

신뢰 (Trust)

전문적이고 안정적인 인터페이스로 기업과 강사 모두에게 신뢰감 전달

명확 (Clarity)

정보 계층을 명확히 하여 사용자가 빠르게 원하는 정보에 접근

효율 (Efficiency)

최소한의 단계로 매칭 프로세스를 완료할 수 있는 간결한 UI

기술 스택

Django 5 Tailwind CSS (CDN) Alpine.js 3 HTMX 2 Pretendard PostgreSQL

Brand

심볼 마크

LecturePro Symbol - Color
LecturePro Symbol - White

워드마크

LecturePro LecturePro
LecturePro LecturePro

사이즈 가이드

16px

16px

24px

24px

32px

32px (nav)

48px

48px

64px

64px

사용자별 컬러 역할

강사 (Instructor)

Primary Blue 계열. 전문성과 신뢰를 상징

기업 (Client)

Accent Emerald 계열. 성장과 기업을 상징

Color

tailwind.config.js에 정의된 커스텀 컬러 팔레트

Primary (Blue)

Secondary (Navy/Slate)

Accent (Emerald)

Semantic Colors

Success

#22C55E

Warning

#F59E0B

Error

#EF4444

Typography

Pretendard 웹폰트 기반의 타이포그래피 스케일

Class Size Sample
text-3xl30px강사 매칭 플랫폼
text-2xl24px강사 매칭 플랫폼
text-xl20px강사 매칭 플랫폼
text-lg18px강사 매칭 플랫폼
text-base16px강사 매칭 플랫폼 LecturePro
text-sm14px강사 매칭 플랫폼 LecturePro
text-xs12px강사 매칭 플랫폼 LecturePro

Font Weight

font-medium 500 미디엄 Medium

font-semibold 600 세미볼드 SemiBold

font-bold 700 볼드 Bold

Border Radius

rounded-lg

8px

rounded-xl

12px

rounded-2xl

16px

rounded-full

9999px

Spacing

4px 기본 단위 (Tailwind 기본값)

Shadow

shadow-sm

shadow-card

shadow-soft

shadow-lg

Animation

fade-in
slide-up
slide-down

Button

Variants

<button class="px-5 py-2.5 bg-primary-500 text-white text-sm font-semibold rounded-lg hover:bg-primary-600 shadow-sm hover:shadow transition-all">
  Primary
</button>

Sizes

Icon Button

Card

게시중 2일 전

AI 활용 디지털 전환 교육

기업 임직원 대상 AI 리터러시 및 업무 자동화 교육

견적 3건 강남구 · 2시간
<div class="bg-white rounded-xl border border-secondary-200 shadow-card overflow-hidden hover:shadow-soft transition-shadow">
  <div class="p-5">
    <h3 class="font-semibold text-secondary-900">Card Title</h3>
    <p class="mt-1 text-sm text-secondary-500">Card description</p>
  </div>
</div>

Badge

Status

게시중 마감임박 마감 만료 진행중 완료

Role

강사 기업 관리자
<!-- Status Badge -->
<span class="px-2.5 py-1 bg-success-50 text-success-600 text-xs font-semibold rounded-full">게시중</span>

<!-- Role Badge -->
<span class="px-2 py-0.5 bg-accent-500 text-white text-xs font-bold rounded">기업</span>

Alert

계약이 성공적으로 체결되었습니다.

견적 마감일이 2일 남았습니다.

결제 처리 중 오류가 발생했습니다.

프로필을 완성하면 더 많은 매칭 기회를 받을 수 있습니다.

Toast

Form

이미 사용 중인 이메일입니다.

Table

강의명 상태 강사 금액
AI 활용 디지털 전환 진행중 김전문 2,500,000원
리더십 워크숍 견적대기 박리더 1,800,000원
데이터 분석 기초 완료 이분석 3,200,000원

Empty State

아직 의뢰가 없습니다

첫 번째 의뢰를 작성해보세요

Loading

Spinner

Skeleton

Bouncing Dots

Chat Bubble

안녕하세요, 교육 일정 관련해서 문의드립니다.

오후 2:30

네, 확인했습니다. 3월 첫째 주 가능합니다!

오후 2:32

좋습니다. 그럼 견적서 보내주시면 검토하겠습니다.

오후 2:35

Patterns

페이지 레이아웃 패턴

Dashboard

List

Detail

Form

반응형 그리드

grid-cols-1 md:grid-cols-2 lg:grid-cols-4

1
2
3
4

grid-cols-1 md:grid-cols-3

1
2
3

HTMX 인터랙션 패턴

<!-- 파셜 로드 (목록) -->
<div hx-get="/htmx/instructor/stats/"
     hx-trigger="load"
     hx-swap="innerHTML">
  <!-- Loading placeholder -->
</div>

<!-- 폼 제출 -->
<form hx-post="/htmx/messages//send/"
      hx-target="#message-list"
      hx-swap="innerHTML">
  <input name="content" />
  <button type="submit">전송</button>
</form>

<!-- 주기적 폴링 (채팅) -->
<div hx-get="/htmx/messages//poll/"
     hx-trigger="every 5s"
     hx-swap="innerHTML">
</div>

<!-- 알림 뱃지 폴링 -->
<div hx-get="/htmx/notifications/badge/"
     hx-trigger="load, every 30s"
     hx-swap="innerHTML">
</div>