월 변제금을 4번의 클릭으로 확인하는 개인회생 법률 웹사이트
Design Concept
막막한 채무에 쉬운 첫걸음
채무 문제로 막막한 의뢰인이 사무실을 찾아가기 전에 스스로 가능성을 확인해 볼 수 있도록 하는 것을 디자인의 출발점으로 삼았습니다.
무겁고 딱딱한 법률 사이트 대신 오렌지와 다크 그레이, 따뜻한 화이트를 중심으로 친근하면서도 선명한 톤을 만들고, 큰 제목과 짧은 문장으로 정보를 정리했습니다.
또한 자가진단, 월 변제금 조회, 5회 분납 수임료, 성공사례, 상담 신청까지 의사결정 순서대로 이어 사용자가 자연스럽게 상담으로 이동하도록 설계했습니다.
Design Elements
-
01
단계형 자가진단 위젯
직업, 월 평균 수입, 미성년 자녀 수, 최근 대출 여부를 한 번에 한 질문씩 선택하도록 구성했습니다.
복잡한 신청 조건을 부담 없이 확인하고 바로 상담으로 넘어가게 했습니다. -
02
월 변제금 조회 기능
직업, 월 수입, 자녀 수, 채무 금액을 4단계로 입력하면 월 변제금을 보여주도록 했습니다.
비용이 가장 궁금한 시점에 바로 결과를 확인하게 해 상담 신청 동기를 만들었습니다. -
03
신뢰를 더하는 후기와 약속
실제 의뢰인 후기와 변호사 직접 상담, 5회 분납 수임료 안내를 연속해서 배치했습니다.
선택 이유를 후기와 조건으로 함께 확인하고 안심하게 했습니다.
Responsive
디바이스 대응
PC · 태블릿 · 모바일 전 환경에서 정보의 순서와 사용성이 동일하게 유지되도록 반응형으로 설계했습니다.
Desktop
1920 × 1080
데스크톱
Tablet
768 × 1024
태블릿
Mobile
375 × 812
모바일
Design System
컬러 팔레트와 타이포그래피를 시스템으로 정의해 화면 전반에 일관된 규칙을 적용했습니다.
Colors
- Point Color#FF9778
- Revival Orange#E8552A
- Charcoal#373737
- Soft Coral#FF9778
- Blush#FFE4DC
- Warm White#FAF7F8
- Violet#7772D3
- White#FFFFFF
Typography
Aa 가나다 Pretendard
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Aa 가나다 Poppins
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Main Page
메인 페이지
첫 화면에서 브랜드와 핵심 서비스를 먼저 보여주고,
스크롤 흐름에 따라 필요한 정보로 자연스럽게 이어지도록 구성했습니다.
스크롤하여 전체 보기 ↓
Sub Page
서브 페이지
주요 서브 페이지를 같은 규칙으로 설계했습니다.
02 Pages


Note
자가진단과 상담 접수를 모든 페이지에서 같은 방식으로 이용할 수 있도록 설계했습니다.
서브 페이지마다 같은 헤더 메뉴와 하단 고정 상담 바, 푸터 사무소 정보를 공통으로 적용했습니다.
성공사례와 서비스 소개도 같은 타이포그래피와 컬러 규칙을 따라 브랜드 인상이 이어지도록 했습니다.
- Grid
- 후기, 성공사례, 서비스 소개를 카드와 슬라이드 형태로 같은 간격에 맞춰 배치했습니다.
- Header
- 상단 고정 헤더에 회생이슈, 서비스, 자가진단, 월변제금 조회, 성공사례 메뉴와 365일 전화상담을 두었습니다.
- CTA
- 본문 곳곳의 “상담신청하기” 버튼과 개인회생신청자격 확인으로 상담 동선을 이어지게 했습니다.
Mobile
모바일 환경에서 자주 쓰는 기능을 손이 닿는 곳에 배치했습니다.
Bottom Bar
Optimization
-
Menu
PCMenu · 상단 고정 헤더에 주요 메뉴와 전화상담 노출
MOMenu · 모바일에 맞춘 메뉴와 하단 고정 상담 바로 최적화
-
Layout
PCLayout · 넓은 화면에서 후기·성공사례를 나란히 배치
MOLayout · 단일 컬럼과 슬라이드 중심으로 재구성
-
Typography
PCTypography · 큰 제목과 짧은 문장으로 핵심 강조
MOTypography · 제목과 본문 크기를 줄여 읽기 쉽게 조정
-
Image
PCImage · 아이콘과 이미지로 부담을 덜어주는 친근한 분위기 구성
MOImage · 이미지 크기와 비율을 모바일 화면에 맞춰 최적화



