Design index · OfferMate AI redesignOfferMate AI 리디자인 시안

원티드 디자인 시스템에서 영감을 받은 차분·중성·단단한 톤으로 16개 핵심 화면을 새로 그렸습니다. 한·영 병기, Pretendard 본문, 200+ 템플릿을 가진 AI 이력서 빌더 제품에 맞춰 톤을 조율했습니다.

Brand

OfferMate AI · 오퍼메이트

Style

Wanted DS · 차분·단단함

Type

Pretendard · Wanted Sans

Primary

#0066FF

Pages

16개 · 6 인터랙티브

Phase 1.5 · 컴포넌트 검수 보드

Button · Card · Input · Tag · StatusBadge · KpiTile · EmptyState · Skeleton · Modal · Drawer · Toast 의 모든 variant 및 상태를 한 페이지에서 확인합니다.

컴포넌트 카탈로그 열기 →

핵심 인터랙티브

Core interactive · 6탭하여 열어보세요

히어로 · 기능 · 사용 방법 · 템플릿 · 후기 · 가격 · FAQ · 최종 CTA. Tweaks로 라이트/다크 히어로 전환.

인터랙티브2 베리에이션Tweaks

이력서 빌더

3-패널 구조: 좌측 아웃라인 + AI 프롬프트, 중앙 A4 종이 미리보기, 우측 스타일·JD 매칭·AI 챗.

인터랙티브3-paneAI inline

03 · INTERVIEW

면접 시뮬레이션

실시간 AI 면접 세션. 녹음 · 실시간 코칭 · 키워드 추적 · 이전 질문 점수.

인터랙티브LiveSTT

04 · TEMPLATES

템플릿 갤러리

200여 종 템플릿. 카테고리·경력·언어·플랜으로 필터. 미니 미리보기 9종 표시.

인터랙티브필터

05 · CONSULTING

전문가 컨설팅

현직 시니어 38명 디렉토리 · 3가지 서비스 · 달력 예약 흐름.

인터랙티브예약

Free / Pro / Master 3-tier · 월·연 토글 · 상세 비교표 · 결제 수단 안내.

인터랙티브3-tier

서포팅 화면

Supporting · 6

공채 캘린더

월간 그리드 + 임박 마감 리스트 + 사이드 필터.

시안캘린더

08 · DASHBOARD

내 이력 · 대시보드

KPI 4종 + 내 이력서 카드 + 최근 활동 + 오늘의 할 일.

시안대시보드

KPI · 주간 바 차트 · 도넛 · 합격 퍼널 · JD 매칭 히트맵 · 지원 내역 테이블.

시안애널리틱스

시장가 벤치마크 + 계산기 + 협상 플레이북 6가지 + 오퍼 시뮬레이터.

시안의사결정

스플릿 스크린 · 좌측 후기 · 우측 폼.

시안소셜 로그인

3-step 진행 표시 · 역할 선택 · 필수/선택 동의 분리.

도움말 · 정책 문서

Help & Policies · 4

검색 + 8개 카테고리 + 인기 문서 + 연락처.

스티키 TOC + 본문 11개 조항.

개인정보처리방침

수집 항목·목적·보유기간 등 9개 섹션 표 포함.

7일 전액 환불 · 일할 환불 예시 · 결제수단별 처리 기간.

Design system · 요약

Wanted-leaning 톤, 단단한 한·영 병기 시스템

차분한 무채색 베이스 · Wanted 블루 #0066FF 단일 액센트 · Pretendard 본문 + Wanted Sans 디스플레이 · 1px 헤어라인 rgba(112,115,124,0.22) · 그라데이션·이모지·과한 컬러 사용 없음.

Primary

Wanted Blue 600

Neutrals

Neutral ramp

Typography

Pretendard · Wanted Sans

11 · 12 · 13 · 14 · 15 · 16 · 18 · 20 · 22 · 24 · 28 · 32 · 36 · 40 · 56

Radius

8 · 12 · 16 · 24

Notes · 적용 사항

원티드 디자인 시스템을 그대로 계승: Wanted Blue #0066FF, Pretendard 본문, rgba(112,115,124,0.22) 1px 헤어라인, 배경 그라데이션·이모지·과한 컬러 사용 없음.
실제 이력서 프리뷰·프로필·로고는 모두 mock UI 페이퍼로 처리했습니다. 실 데이터로 교체해주세요.
홈에서 우측 Tweaks 버튼으로 라이트/다크 히어로, Primary 색상(Wanted 팔레트 내 4종), 콜아웃/로고 스트립 표시를 전환할 수 있습니다.
원본 사이트의 모든 페이지(홈 · 빌더 · 템플릿 · 요금 · 공채 · 면접 · 컨설팅 · 통계 · 연봉 · 도움말 · 정책)을 포함했습니다.

피드백 보내기