빚의 무게를 덜어주는 회생파산 법률 웹사이트
메인 화면에서 독촉으로 힘든 상황을 짚는 문구로 시작해 확실한 내편 → 남다른 내편 → 든든한 내편(성공사례) → 진정한 내편(유튜브 ‘회생이 답이지’) → 상담신청 순서로 구성했습니다.
특히 총 채무액·월 변제금·탕감률을 숫자로 보여주는 성공사례 카드와 1분 자가진단, 하단 고정 상담 바를 두어 첫 방문부터 상담까지 끊기지 않게 하고, 딥 그린과 골드 컬러로 안정감 있는 분위기를 완성했습니다.
Design Concept
빚 앞에서 든든한 내 편
독촉과 채무로 지친 의뢰인이 가장 먼저 느끼는 막막함을 덜어주는 것을 디자인의 출발점으로 삼았습니다.
딥 그린을 바탕으로 골드를 포인트로 더해 신뢰감과 희망의 인상을 만들고, 번호가 붙은 네 개의 ‘내편’ 섹션으로 이야기를 순서대로 읽을 수 있게 했습니다.
또한 자가진단과 성공사례, 유튜브 콘텐츠, 하단 상담 바를 한 흐름으로 이어 의뢰인이 자신의 상황을 확인하고 바로 상담까지 이어지도록 설계했습니다.
Design Elements
-
01
번호로 이어지는 내편 스토리
확실한·남다른·든든한·진정한 내편 네 단계를 번호와 함께 이어 보여줬습니다.
변호사 소개가 하나의 이야기처럼 자연스럽게 읽힙니다. -
02
숫자로 보여주는 성공사례 카드
관할 법원, 총 채무액, 월 변제금, 탕감률을 카드 한 장에 담았습니다.
방문자가 자신과 비슷한 사례의 결과를 바로 가늠할 수 있습니다. -
03
1분 자가진단 단계형 문답
소득, 부양가족, 채무, 재산, 신청 경험을 한 문항씩 묻는 방식으로 구성했습니다.
결과에 따라 개인회생·파산 가능 여부를 안내하고 상담신청으로 연결합니다.
Responsive
디바이스 대응
PC · 태블릿 · 모바일 전 환경에서 정보의 순서와 사용성이 동일하게 유지되도록 반응형으로 설계했습니다.
Desktop
1920 × 1080
데스크톱
Tablet
768 × 1024
태블릿
Mobile
375 × 812
모바일
Design System
컬러 팔레트와 타이포그래피를 시스템으로 정의해 화면 전반에 일관된 규칙을 적용했습니다.
Colors
- Point Color#D1A765
- Deep Green#124137
- Sage Green#446158
- Charcoal#222222
- 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
자가진단과 성공사례가 같은 헤더와 상담 바를 공유하도록 설계했습니다.
서브 페이지는 HOME 경로와 페이지 제목이 있는 상단 영역 아래로 본문이 이어지는 규칙을 적용했습니다. 어느 페이지에서든 하단 상담 바가 유지되어 신청 동선이 끊기지 않습니다.
- Grid
- 성공사례는 카드형 목록으로 정리해 사례를 빠르게 훑어볼 수 있습니다.
- Header
- 소개·1분 자가진단·성공사례·미디어·상담예약 메뉴와 빠른 상담신청 버튼을 상단에 두었습니다.
- CTA
- 전화, 카톡상담, 블로그, 유튜브 플로팅 버튼과 하단 빠른 상담신청 바를 함께 두었습니다.
Mobile
모바일 환경에서 자주 쓰는 기능을 손이 닿는 곳에 배치했습니다.
Bottom Bar
Optimization
-
Menu
PC소개·자가진단·성공사례·미디어·상담예약을 상단에 노출
MO메뉴 버튼으로 여는 슬라이드 메뉴
-
Layout
PC넓은 화면에 이미지와 문구를 좌우로 배치
MO한 열로 쌓아 순서대로 읽히는 구성
-
Typography
PC큰 인용 문구와 번호 제목 중심
MO문구 크기를 줄여 줄바꿈 없이 읽히도록 조정
-
Image
PC변호사 사진과 말풍선 이미지를 크게 활용
MO이미지를 화면 폭에 맞춰 축소하고 문구와 겹치지 않도록 정리
이런 홈페이지, 우리 법무법인도 가능할까요?
변호사 · 법무법인 홈페이지만 100개 이상. AI 검색 노출 설계까지 기본으로 넣어 드립니다.
