법무법인 굿플랜 음주운전 전문 랜딩페이지 구축
첫 화면에서 혈중알코올농도 기준을 선택하도록 구성해 사용자가 자신의 사건 상황을 즉시 분류할 수 있도록 하고, 이후 초기 대응 필요성 → 실제 사례 → 형사전문 변호사 신뢰 → 사무실 안내로 이어지는 구조를 적용했습니다.
다크 네이비와 브라운·골드 계열의 포인트 컬러를 활용해 법률 서비스의 무게감과 전문성을 표현하고, 상담 전환에 필요한 핵심 정보만 압축적으로 배치해 짧은 탐색 안에서도 필요한 판단과 행동이 가능하도록 구성했습니다.
Design Concept
상황을 먼저 이해하는 법률 경험
음주운전 사건은 사용자의 상황과 수치, 진행 단계에 따라 대응 방향이 달라질 수 있다는 점을 고려해 상황 판단과 빠른 상담 진입을 중심으로 설계했습니다.
첫 화면에서 혈중알코올농도 기준을 직접 선택할 수 있도록 해 사용자가 자신의 상태를 빠르게 확인하고, 이후 사례와 전문성 정보를 통해 법률 대응의 필요성을 자연스럽게 인식하도록 구성했습니다.
다크한 배경과 절제된 골드·브라운 포인트를 사용해 사건의 긴장감과 법률 서비스의 전문성을 표현했습니다.
Design Elements
-
01
내 상황을 먼저 확인하는 구조
사용자가 혈중알코올농도 기준을 선택하도록 구성해 랜딩페이지 진입 직후 자신의 상황부터 확인할 수 있도록 했습니다.
일반적인 법률 설명보다 먼저 개인 상황과 연결되는 인터랙션을 제공해 콘텐츠 집중도를 높였습니다. -
02
사례로 보여주는 실제 대응 경험
음주운전 관련 사건 사례를 카드 형태로 노출해 법무법인의 실무 경험을 구체적으로 보여주었습니다.
단순한 전문성 주장보다 실제 사건과 대응 결과를 통해 신뢰를 형성하도록 구성했습니다. -
03
전문 자격으로 강화하는 신뢰
형사전문변호사 등 전문분야 등록 정보를 별도의 핵심 영역으로 구성해 사건 대응에 필요한 전문성을 객관적으로 전달했습니다.
전문분야 등록증을 시각적으로 제시해 사용자가 법률 서비스의 신뢰 근거를 즉시 확인할 수 있도록 했습니다.
Responsive
디바이스 대응
PC · 태블릿 · 모바일 전 환경에서 정보의 순서와 사용성이 동일하게 유지되도록 반응형으로 설계했습니다.
Desktop
1920 × 1080
데스크톱
Tablet
768 × 1024
태블릿
Mobile
375 × 812
모바일
Design System
컬러 팔레트와 타이포그래피를 시스템으로 정의해 화면 전반에 일관된 규칙을 적용했습니다.
Colors
- Point Color#A48667
- Deep Navy#182334
- Warm Brown#A48667
- Soft Gray#F3F3F1
- Charcoal#2D3034
- White#FFFFFF
Typography
Aa 가나다 Pretendard
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Main Page
메인 페이지
첫 화면에서 브랜드와 핵심 서비스를 먼저 보여주고,
스크롤 흐름에 따라 필요한 정보로 자연스럽게 이어지도록 구성했습니다.
스크롤하여 전체 보기 ↓
Mobile
모바일 환경에서 자주 쓰는 기능을 손이 닿는 곳에 배치했습니다.
Bottom Bar
Optimization
-
Menu
PC사례, 전문성, 위치 등 전체 콘텐츠를 한 흐름으로 탐색
MO상담과 핵심 정보 중심으로 메뉴를 간결하게 구성
-
Layout
PC상황 선택 UI와 사례, 전문성 정보를 넓은 화면에 구조적으로 배치
MO선택형 UI와 핵심 콘텐츠를 세로 흐름으로 재구성해 한 손 탐색 최적화
-
Typography
PC강한 헤드라인과 짧은 설명으로 사건의 긴급성과 전문성 강조
MO작은 화면에서도 수치와 사건 정보를 빠르게 읽을 수 있도록 크기와 행간 최적화
-
Image
PC법률 공간과 등록증, 지도 이미지를 활용해 신뢰를 보강
MO핵심 증빙과 위치 정보가 잘 보이도록 이미지 영역을 단순화
이런 홈페이지, 우리 법무법인도 가능할까요?
변호사 · 법무법인 홈페이지만 200개 이상. AI 검색 노출 설계까지 기본으로 넣어 드립니다.
