월 변제금을 4번의 클릭으로 확인하는 개인회생 법률 웹사이트
메인 화면은 “다시 시작하다, 바로회생” 자가진단 → 의뢰인 후기 → 담당 매니저 안내 → 월 변제금 조회 → 5회 분납 수임료 → 성공사례 → 상담 시작 순서로 구성했습니다.
특히 자가진단과 월 변제금 조회를 단계별 질문 형식으로 만들어 사용자가 직접 조건을 선택하게 했고, 오렌지 컬러와 다크 그레이, Pretendard 서체로 부담을 덜어주는 친근하고 선명한 분위기를 완성했습니다.
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 · 이미지 크기와 비율을 모바일 화면에 맞춰 최적화
이런 홈페이지, 우리 법무법인도 가능할까요?
변호사 · 법무법인 홈페이지만 100개 이상. AI 검색 노출 설계까지 기본으로 넣어 드립니다.
