행사 대행과 취업 솔루션을 한눈에 보여주는 기업 웹사이트

취업박람회와 해커톤, 컨퍼런스 등 행사 대행 사업과 솔루션을 가진 (주)미래를꿈꾸는사람들의 사업 영역을 소개하기 위해 구축한 기업 웹사이트입니다. 메인 화면은 취업박람회, 회사소개서 다운로드, 컨퍼런스·학술제·포럼, 해커톤, 링크사업, 헤드헌팅, 상담문의로 이어지는 아이콘 배너로 시작하고, 이후 ABOUT → BUSINESS → SOLUTION → PORTFOLIO → NEWSROOM 메뉴로 세부 정보를 확인할 수 있게 구성했습니다. 특히 사업 영역마다 말풍선이 달린 아이콘을 메인에 배치해 방문자가 원하는 사업 페이지로 바로 이동하도록 했으며, 오렌지와 청록, 인디고 컬러와 GmarketSans 서체로 젊고 활기찬 회사 분위기를 표현했습니다.

#미래를꿈꾸는사람들
#미꿈사
#행사대행
#취업박람회
#해커톤
#컨퍼런스
#기업홈페이지
#홈페이지제작
#반응형웹
#UIUX

Client: 미래를꿈꾸는사람들
Category: 기업홈페이지

Design Concept

꿈을 현실로 잇는 아이콘

여러 갈래의 사업을 하는 회사인 만큼, 방문자가 어디부터 봐야 할지 헤매지 않게 하는 것을 디자인의 출발점으로 삼았습니다.
메인 첫 화면을 사업별 아이콘과 말풍선으로 구성해 회사가 하는 일을 한 장면에서 파악하도록 하고, 오렌지와 청록, 인디고 컬러에 GmarketSans 서체를 더해 젊고 활기찬 인상을 주었습니다.
또한 ABOUT, BUSINESS, SOLUTION, PORTFOLIO 순으로 메뉴를 정리해 회사 소개에서 사업 내용, 실제 수행 사례까지 자연스럽게 이어지도록 설계했습니다.

Design Elements

01

사업별 아이콘 배너

취업박람회, 해커톤, 링크사업 등 사업 영역을 말풍선 아이콘으로 풀어 메인에 배치했습니다.
방문자가 스크롤 없이 원하는 사업 페이지로 바로 이동할 수 있습니다.
02

서비스별 설명 구성

전시·박람회 대행, 포럼·컨퍼런스 대행, 국제회의 대행을 항목별로 나누어 설명했습니다.
행사 유형마다 수행 범위를 구분해 확인할 수 있습니다.
03

실적형 포트폴리오 게시판

행사일시, 주최, 행사구성을 같은 틀로 정리해 수행 사례를 보여줍니다.
회사의 실제 운영 경험을 목록에서 바로 읽을 수 있습니다.

Responsive

디바이스 대응

PC · 태블릿 · 모바일 전 환경에서 정보의 순서와 사용성이 동일하게 유지되도록 반응형으로 설계했습니다.

Desktop
1920 × 1080
데스크톱
Tablet
768 × 1024
태블릿
Mobile
375 × 812
모바일

Design System

컬러 팔레트와 타이포그래피를 시스템으로 정의해 화면 전반에 일관된 규칙을 적용했습니다.

Colors

Main Color#1998BF

Sub Color#F1922F

Point Color#59669D
Ocean Teal#1998BF
Sunset Orange#F1922F
Indigo#59669D
Royal Blue#3466FF
Charcoal#222222
Light Gray#E6E6E6
White#FFFFFF

Typography

Aa 가나다 GmarketSansBold

가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789

Weight

가나다 Aa
가나다 Aa

Regular · Bold

Aa 가나다 Noto Sans KR

가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789

Weight

가나다 Aa
가나다 Aa

Regular · Bold

Main Page

메인 페이지

첫 화면에서 브랜드와 핵심 서비스를 먼저 보여주고,
스크롤 흐름에 따라 필요한 정보로 자연스럽게 이어지도록 구성했습니다.

www.example.com

스크롤하여 전체 보기 ↓

Sub Page

서브 페이지

주요 서브 페이지를 같은 규칙으로 설계했습니다.

02 Pages

행사 대행과 취업 솔루션을 한눈에 보여주는 기업 웹사이트 서브 페이지 1 — Sub Page MICE 사업 소개 페이지 01

행사 대행과 취업 솔루션을 한눈에 보여주는 기업 웹사이트 서브 페이지 2 — Sub Page 포트폴리오 페이지 02

Note

서브 페이지를 같은 헤더와 제목 규칙으로 일관되게 확장할 수 있도록 설계했습니다.

서브 페이지는 상단 헤더를 고정된 형태로 두고 페이지 제목과 하위 탭을 같은 위치에 배치했습니다. 회사 소개, 사업, 솔루션, 포트폴리오가 같은 틀 안에서 읽히도록 했습니다.

Grid: 본문을 중앙 정렬 컨테이너 안에 두고 섹션별로 정보를 나누어 배치했습니다.
Header: 메인에서는 투명한 헤더, 서브 페이지에서는 별도 스타일의 헤더로 전환되도록 구성했습니다.
CTA: 상담문의 버튼과 회사소개서 다운로드를 메인 배너와 푸터에 두어 문의 동선을 확보했습니다.

Mobile

모바일 환경에서 자주 쓰는 기능을 손이 닿는 곳에 배치했습니다.

Bottom Bar

햄버거 메뉴모바일에서는 전체 메뉴를 햄버거 아이콘 하나로 정리

사업별 아이콘 배너메인의 아이콘 버튼으로 주요 사업 페이지로 바로 이동

Optimization

Menu

PC헤더에 ABOUT·BUSINESS·SOLUTION·PORTFOLIO·NEWSROOM 메뉴를 가로로 노출

MO햄버거 버튼을 눌러 전체 메뉴가 펼쳐지도록 최적화
Layout

PC메인 배너 안에 사업별 아이콘을 넓게 흩어 배치

MO화면 폭에 맞춰 아이콘 배치를 조정해 한 화면에서 확인
Typography

PCGmarketSans 제목과 Noto Sans KR 본문을 넉넉한 크기로 구성

MO작은 화면에서도 읽히도록 제목과 본문 크기 조정
Image

PC아이콘 일러스트와 말풍선 이미지로 사업 영역 표현

MO이미지를 화면 폭에 맞춰 비율을 유지하며 축소