컨벤션 인재와 기업을 잇는 인력 플랫폼 웹사이트
Design Concept
컨벤션 인재가 만나는 길
컨벤션 업계에 진입하려는 구직자와 인재를 찾는 기업이 같은 플랫폼에서 각자의 목적에 맞게 움직일 수 있도록 하는 것을 디자인의 출발점으로 삼았습니다.
메인 화면에서 개인회원과 기업 담당자를 큰 카드로 나누고 각각 그린과 틸 컬러, 일러스트를 적용해 첫 화면에서 역할을 구분했습니다.
컨벤션 기획사 소개와 전문기업 목록, 채용공고, 자료실 등 정보 페이지는 같은 헤더와 카드 규칙으로 정리해 협회 플랫폼다운 안정감을 유지했습니다.
Design Elements
-
01
개인·기업 역할별 진입 카드
개인회원은 공고 확인과 이력서 등록, 기업 담당자는 인재풀 확인과 공고 등록으로 버튼을 나눴습니다.
방문자가 자신의 목적에 맞는 경로를 첫 화면에서 바로 선택할 수 있습니다. -
02
커리어 로드맵 카드
진로 탐색, 채용·인재 매칭, 경력 인증 및 포트폴리오 관리의 세 단계를 일러스트 카드로 보여줍니다.
플랫폼이 제공하는 서비스를 순서대로 이해할 수 있습니다. -
03
그린·틸 컬러 구분 체계
개인회원은 그린, 기업은 틸, 단계 강조에는 앰버를 사용했습니다.
색만으로도 사용자 유형과 기능 영역을 구분하도록 정리했습니다.
Responsive
디바이스 대응
PC · 태블릿 · 모바일 전 환경에서 정보의 순서와 사용성이 동일하게 유지되도록 반응형으로 설계했습니다.
Desktop
1920 × 1080
데스크톱
Tablet
768 × 1024
태블릿
Mobile
375 × 812
모바일
Design System
컬러 팔레트와 타이포그래피를 시스템으로 정의해 화면 전반에 일관된 규칙을 적용했습니다.
Colors
- Point Color#EEA01E
- Leaf Green#729E2F
- Teal#00A0AF
- Amber#EEA01E
- Deep Blue#005288
- Charcoal#222222
- White#FFFFFF
Typography
Aa 가나다 SUIT
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Aa 가나다 Paperlogy
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Aa 가나다 Pretendard
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Main Page
메인 페이지
첫 화면에서 브랜드와 핵심 서비스를 먼저 보여주고,
스크롤 흐름에 따라 필요한 정보로 자연스럽게 이어지도록 구성했습니다.
스크롤하여 전체 보기 ↓
Sub Page
서브 페이지
주요 서브 페이지를 같은 규칙으로 설계했습니다.
02 Pages
Note
메뉴가 늘어나도 같은 규칙으로 확장할 수 있도록 설계했습니다.
컨벤션 기획사란, 전문기업, 인재풀, 경력인증센터, 인사이트, 자료실, 공지사항, FAQ를 하나의 상단 메뉴로 묶었습니다.
서브 페이지는 같은 제목 영역과 카드·목록 형식을 따릅니다.
- Grid
- 1200px 안팎의 중앙 정렬 폭에 카드와 목록을 균일한 간격으로 배치했습니다.
- Header
- 로고와 로그인, 8개 메뉴를 두 줄 헤더로 구성하고 전체 메뉴 버튼을 함께 두었습니다.
- CTA
- 채우기 버튼은 주요 행동, 테두리 버튼은 보조 행동으로 구분해 반복했습니다.
Mobile
모바일 환경에서 자주 쓰는 기능을 손이 닿는 곳에 배치했습니다.
Bottom Bar
Optimization
-
Menu
PC로고 아래 가로 메뉴와 전체 메뉴 버튼
MO중앙 로고와 햄버거 메뉴로 최적화
-
Layout
PC카드를 가로로 나눈 좌우 레이아웃
MO일러스트와 설명을 위아래로 쌓은 단일 컬럼
-
Typography
PCSUIT와 Paperlogy 기반의 제목·본문 위계
MO제목과 버튼 글자를 키워 터치 영역 확보
-
Image
PC히어로 그라데이션과 일러스트 카드 배치
MO일러스트를 카드 상단에 맞춰 크게 노출
