LecturePro Design System

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

신뢰 (Trust)

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

명확 (Clarity)

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

효율 (Efficiency)

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

기술 스택

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

Brand

심볼 마크

워드마크

LecturePro

LecturePro

사이즈 가이드

16px

24px

32px (nav)

48px

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-3xl	30px	강사 매칭 플랫폼
text-2xl	24px	강사 매칭 플랫폼
text-xl	20px	강사 매칭 플랫폼
text-lg	18px	강사 매칭 플랫폼
text-base	16px	강사 매칭 플랫폼 LecturePro
text-sm	14px	강사 매칭 플랫폼 LecturePro
text-xs	12px	강사 매칭 플랫폼 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

Replay

slide-up

Replay

slide-down

Replay

Button

Variants

Primary Secondary Accent Danger Ghost Disabled

<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>

Copy

Sizes

Small Default Large

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>

Copy

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>

Copy

Alert

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

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

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

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

Toast

Show Success Show Error Show Warning Show Info

Form

강의 제목

이메일

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

상세 설명

카테고리 선택해주세요 IT/프로그래밍 리더십/경영 마케팅

옵션 (Checkbox)

온라인 가능 출장 가능

유형 (Radio)

단기 교육 장기 과정

Modal

Open Modal

견적 수락

이 견적을 수락하시겠습니까? 수락 후 계약서가 자동 생성됩니다.

취소 수락

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>

Copy