공장·창고 설비 유지보수 견적을 잇는 B2B 매칭 플랫폼 웹사이트
Design Concept
역할마다 다른 화면, 하나의 거래 흐름
설비 고장과 유지보수는 고객에게 낯설고 급한 문제라는 점에서 출발해, 누가 보든 지금 무엇을 하면 되는지 바로 보이는 화면을 목표로 했습니다.
고객·전문가·관리자 세 역할의 화면을 따로 설계하되 같은 카드 규칙과 아이콘 체계를 써서, 견적 요청부터 응답과 관리까지 하나의 흐름으로 이어지도록 했습니다.
블루와 그린의 역할별 색, 로봇 캐릭터를 더해 딱딱한 B2B 서비스를 친근하게 풀어냈습니다.
Design Elements
-
01
역할별로 나눈 세 가지 화면
견적을 요청하는 고객, 견적에 응답하는 전문가, 거래를 관리하는 관리자의 화면을 각각 설계했습니다.
역할마다 필요한 정보만 보여 줘 처음 쓰는 사람도 헤매지 않도록 했습니다. -
02
견적 현황을 한눈에
진행 중인 견적과 분야별 전문가를 표와 카드로 정리해 서비스가 실제로 움직이고 있다는 신뢰를 주었습니다.
고객은 비슷한 요청 사례를 보며 자신의 문제를 바로 맡길 수 있습니다. -
03
캐릭터와 색으로 쉽게
로봇 캐릭터와 역할별 대표색으로 어려운 설비 용어 대신 직관적인 시각 언어를 만들었습니다.
고객은 블루, 전문가는 그린으로 지금 어느 화면에 있는지 바로 알 수 있습니다.
Responsive
디바이스 대응
PC · 태블릿 · 모바일 전 환경에서 정보의 순서와 사용성이 동일하게 유지되도록 반응형으로 설계했습니다.
Desktop
1920 × 1080
데스크톱
Tablet
768 × 1024
태블릿
Mobile
375 × 812
모바일
Design System
컬러 팔레트와 타이포그래피를 시스템으로 정의해 화면 전반에 일관된 규칙을 적용했습니다.
Colors
- Point Color#FFC83D
- Factory Blue#3B5BFD
- Expert Green#2EB462
- Deep Navy#1C2B5A
- Light Gray#F3F5FA
- White#FFFFFF
Typography
Aa 가나다 Pretendard
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Main Page
메인 페이지
첫 화면에서 브랜드와 핵심 서비스를 먼저 보여주고,
스크롤 흐름에 따라 필요한 정보로 자연스럽게 이어지도록 구성했습니다.
스크롤하여 전체 보기 ↓
Sub Page
서브 페이지
주요 서브 페이지를 같은 규칙으로 설계했습니다.
02 Pages
Note
고객과 전문가 화면을 같은 규칙 안에서 역할에 맞게 나눠 설계했습니다.
서비스 소개, 이용 안내, 신청 영역은 같은 그리드와 카드 구성을 쓰고 역할별 대표색만 달리해 일관성을 지켰습니다.
전문가 화면은 파트너 혜택과 등록 안내 중심으로, 고객 화면은 견적 요청과 전문가 찾기 중심으로 흐름을 정리했습니다.
- Grid
- 1200px 기준 그리드로 서비스 소개 카드, 견적 현황 표, 전문가 목록을 안정적으로 배치했습니다.
- Header
- 역할별로 같은 헤더 구조를 쓰고 대표색만 바꿔 고객·전문가 화면을 한눈에 구분하도록 했습니다.
- CTA
- 각 화면 하단에 견적 요청과 전문가 등록 버튼을 두어 정보를 본 뒤 바로 다음 단계로 이어지게 했습니다.
Mobile
모바일 환경에서 자주 쓰는 기능을 손이 닿는 곳에 배치했습니다.
Bottom Bar
Optimization
-
Menu
PC서비스 소개, 견적, 전문가, 이용 안내를 상단 메뉴로 탐색
MO핵심 메뉴만 남긴 햄버거 메뉴로 간결하게 구성
-
Layout
PC견적 표와 전문가 카드를 넓은 화면에 여러 열로 배치
MO한 화면에 하나의 카드가 보이도록 세로 흐름으로 재구성
-
Typography
PC굵은 제목과 짧은 설명으로 서비스 흐름을 강조
MO작은 화면에서도 견적 정보가 읽히도록 크기와 행간 조정
-
Image
PC로봇 캐릭터와 설비 사진으로 서비스 성격을 전달
MO캐릭터와 핵심 문구가 잘리지 않도록 이미지 비율 조정
Admin
담당자가 직접 수정하는 영역을 정하고, 각 영역에서 할 수 있는 작업을 정의했습니다.
Editable
Functions
