30년 보험 전문가의 리스크 관리를 담은 보험중개 웹사이트
Design Concept
복잡한 보험을 신뢰로 풀다
보험은 꼭 필요하지만 어렵고 복잡하다는 대표님들의 부담을 덜어주는 것을 디자인의 출발점으로 삼았습니다.
파란색을 중심으로 한 안정적인 톤에 오렌지 포인트를 더해, 신뢰감을 주면서도 상담 신청 버튼이 자연스럽게 눈에 들어오도록 구성했습니다.
또한 이런 고민 있으신가요?라는 질문으로 방문자의 상황에 먼저 공감한 뒤 핵심가치와 핵심역량, 사업영역으로 이어지는 흐름을 만들어 회사의 전문성을 단계적으로 이해할 수 있도록 설계했습니다.
Design Elements
-
01
고민에서 시작하는 Vision 섹션
보험 가입이 복잡하고 보상이 불안한 대표님의 상황을 먼저 짚고 설명을 시작하도록 했습니다.
방문자가 자신의 이야기라고 느끼며 다음 섹션으로 자연스럽게 이어집니다. -
02
핵심가치·핵심역량 카드
신뢰·전문성·동반성장의 세 가지 가치와 다섯 가지 핵심역량을 짧은 카드로 나누어 정리했습니다.
긴 이력도 한눈에 훑어볼 수 있습니다. -
03
질문 중심의 Q&A 구성
보험중개사와 보험대리점의 차이, 비용 발생 여부처럼 자주 묻는 내용을 질문과 답으로 풀어냈습니다.
낯선 개념을 쉽게 이해하고 상담 문의 전 불안을 줄일 수 있습니다.
Responsive
디바이스 대응
PC · 태블릿 · 모바일 전 환경에서 정보의 순서와 사용성이 동일하게 유지되도록 반응형으로 설계했습니다.
Desktop
1920 × 1080
데스크톱
Tablet
768 × 1024
태블릿
Mobile
375 × 812
모바일
Design System
컬러 팔레트와 타이포그래피를 시스템으로 정의해 화면 전반에 일관된 규칙을 적용했습니다.
Colors
- Point Color#DE6E19
- Sky Blue#3A8AFD
- Charcoal#222222
- Mid Gray#7F7F7F
- Light Gray#E6E6E6
- White#FFFFFF
Typography
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
보험 종류별 사례를 같은 규칙으로 찾아볼 수 있도록 설계했습니다.
사업영역의 보험 종류 버튼을 누르면 컨설팅 사례 게시판이 해당 종류로 필터링되어 열립니다.
게시판 페이지는 상단 헤더와 하단 정보를 메인과 동일하게 유지해 사이트 안에서 이동하는 느낌이 끊기지 않도록 했습니다.
- Grid
- 컨설팅 사례는 게시판 목록 구조로 정리해 보험 종류별로 사례를 바로 찾아볼 수 있습니다.
- Header
- 상단 고정 헤더에 메뉴와 상담신청 버튼을 두어 어느 화면에서든 문의로 이동할 수 있습니다.
- CTA
- “무료 보험 컨설팅 신청하기” 버튼과 상담신청 폼을 메인과 메뉴에서 같은 문구로 연결했습니다.
Mobile
모바일 환경에서 자주 쓰는 기능을 손이 닿는 곳에 배치했습니다.
Bottom Bar
Optimization
-
Menu
PCMenu · 상단 고정 헤더에 섹션 메뉴와 상담신청 버튼 배치
MOMenu · 햄버거 버튼으로 여는 슬라이드 메뉴
-
Layout
PCLayout · 섹션별 가로 카드와 2단 구성
MOLayout · 카드를 세로로 쌓은 1단 구성
-
Typography
PCTypography · 큰 헤드라인 중심의 위계
MOTypography · 줄바꿈을 고려해 크기를 줄인 헤드라인
-
Image
PCImage · 보험 종류 아이콘과 대표 인사말 사진
MOImage · 화면 폭에 맞춰 비율을 유지한 이미지
