채무 해결의 새로운 시작을 제안하는 법률 웹사이트
상담 전 사용자가 자신의 상황을 빠르게 확인하고 자연스럽게 문의까지 이어질 수 있도록 고민 유형 → 서비스 강점 → 진행 절차 → 상담 신청 → FAQ의 흐름으로 콘텐츠를 구성했습니다.
무게감 있는 블랙 컬러와 신뢰를 상징하는 블루 컬러를 중심으로 전문성을 유지하면서도, 카드형 UI와 명확한 정보 위계를 적용해 기존 법률 웹사이트의 경직된 이미지를 현대적으로 재해석했습니다.
Design Concept
신뢰에서 시작되는 새로운 출발
채무 문제로 어려움을 겪는 사용자가 사이트에 진입하는 순간부터 불안보다 해결 가능성을 느낄 수 있도록 디자인했습니다.
법률 서비스가 가져야 할 전문성과 신뢰감은 블랙과 딥 블루 컬러로 표현하고, 넓은 여백과 화이트 영역을 함께 사용해 답답하거나 무거운 인상을 줄였습니다.
또한 복잡한 법률 내용을 카드, 단계별 프로세스, FAQ 등으로 구조화하여 사용자가 필요한 정보를 빠르게 확인하고 상담까지 자연스럽게 이동할 수 있도록 설계했습니다.
Design Elements
-
01
신뢰와 전문성
법률 서비스의 전문성을 전달하기 위해 블랙과 딥 블루를 핵심 컬러로 사용했습니다. 법률 관련 이미지와 절제된 그래픽 요소를 조합해 무게감은 유지하면서도 지나치게 권위적인 인상을 줄였습니다.
-
02
직관적인 정보 구조
복잡하게 느껴질 수 있는 회생·파산 정보를 카드형 UI와 단계별 콘텐츠로 구분했습니다. 사용자가 자신의 고민과 필요한 정보를 빠르게 발견할 수 있도록 명확한 시각적 위계를 적용했습니다.
-
03
상담으로 연결되는 UX
사용자의 고민 확인부터 법률 서비스의 강점, 진행 과정, 상담 신청까지 하나의 흐름으로 연결했습니다. 주요 지점마다 상담 CTA를 배치해 정보 탐색이 실제 문의 행동으로 이어지도록 구성했습니다.
Responsive
디바이스 대응
PC · 태블릿 · 모바일 전 환경에서 정보의 순서와 사용성이 동일하게 유지되도록 반응형으로 설계했습니다.
Desktop
1920 × 1080
데스크톱
Tablet
768 × 1024
태블릿
Mobile
375 × 812
모바일
Design System
컬러 팔레트와 타이포그래피를 시스템으로 정의해 화면 전반에 일관된 규칙을 적용했습니다.
Colors
- Point Color#1E3F8C
- Blue#0066FA
- Light Gray#EDEDED
- White#FFFFFF
Typography
Aa 가나다 Pretendard
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Aa 가나다 Gilroy
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Main Page
메인 페이지
첫 화면에서 브랜드와 핵심 서비스를 먼저 보여주고,
스크롤 흐름에 따라 필요한 정보로 자연스럽게 이어지도록 구성했습니다.
스크롤하여 전체 보기 ↓
Mobile
모바일 환경에서 자주 쓰는 기능을 손이 닿는 곳에 배치했습니다.
Bottom Bar
Optimization
-
Menu
PC전체 메뉴 및 주요 서비스 노출
MO핵심 상담 메뉴 중심으로 간결하게 구성
-
Layout
PC정보 탐색에 최적화된 다단형 레이아웃
MO세로 흐름에 맞춘 직관적인 콘텐츠 배치
-
Typography
PC정보 위계가 명확한 타이포그래피
MO작은 화면에서도 읽기 편한 크기와 간격 적용
-
Image
PC넓은 화면을 활용한 브랜드 이미지 구성
MO핵심 메시지에 집중할 수 있도록 이미지 최적화
이런 홈페이지, 우리 법무법인도 가능할까요?
변호사 · 법무법인 홈페이지만 100개 이상. AI 검색 노출 설계까지 기본으로 넣어 드립니다.
