법무법인 굿플랜 음주운전 전문 랜딩페이지 구축
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핵심 증빙과 위치 정보가 잘 보이도록 이미지 영역을 단순화
