형사처벌과 면허를 함께 지키는 음주교통 법률 랜딩페이지
메인 화면에서 “면허만 잃는 것에서 끝나지 않습니다”라는 메시지로 시작해 대응 강점 → 전담 변호인단 → 입건부터 종결까지의 절차 → 12가지 사건 유형 → 성공사례 → 오시는 길 → 상담 신청으로 이어지도록 구성했습니다.
특히 형사 변론과 운전면허 구제를 한 팀이 함께 맡는다는 점을 강점·절차·사건 유형 전반에 일관되게 풀어냈고, 짙은 딥 그린과 네이비, 골드 포인트로 무게감 있으면서도 안정적인 인상을 완성했습니다.
Design Concept
적발 직후 24시간의 대응
음주·교통 사건은 적발 직후의 진술과 절차가 결과를 좌우한다는 점을 디자인의 출발점으로 삼았습니다.
짙은 딥 그린과 네이비 위에 골드 포인트를 더해 신중하고 무게감 있는 톤을 만들고, 사건 유형을 번호로 나열해 자신의 상황을 빠르게 찾을 수 있도록 했습니다.
또한 처벌과 면허를 따로 다투지 않는다는 메시지를 강점, 변호인단, 절차 섹션에 반복해 배치해 상담 신청까지 흐름이 끊기지 않도록 설계했습니다.
Design Elements
-
01
형사와 면허를 잇는 대응 강점
신속한 대응, 위드마크 검증, 행정심판 병행, 합의·공탁 설계를 네 가지로 나눠
형사처벌과 운전면허를 함께 방어한다는 점이 한눈에 읽히도록 했습니다. -
02
5단계 절차와 12가지 사건 유형
긴급 상담부터 공판 대응까지 다섯 단계와 단순 음주운전에서 뺑소니까지 열두 유형을 번호로 정리해
자신의 사건 단계와 유형을 바로 확인할 수 있도록 했습니다. -
03
카드형 성공사례 슬라이더
불기소·불송치·집행유예·벌금 등 결과를 대괄호 태그로 먼저 보여주고 담당 변호사를 함께 표기해
결과 중심으로 훑어보며 신뢰를 확인하도록 구성했습니다.
Responsive
디바이스 대응
PC · 태블릿 · 모바일 전 환경에서 정보의 순서와 사용성이 동일하게 유지되도록 반응형으로 설계했습니다.
Desktop
1920 × 1080
데스크톱
Tablet
768 × 1024
태블릿
Mobile
375 × 812
모바일
Design System
컬러 팔레트와 타이포그래피를 시스템으로 정의해 화면 전반에 일관된 규칙을 적용했습니다.
Colors
- Point Color#C9A96A
- Deep Green#0D322F
- Forest Green#285C4C
- Slate Green#2E413F
- Navy#132846
- White#FFFFFF
Typography
Aa 가나다 Pretendard
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Main Page
메인 페이지
첫 화면에서 브랜드와 핵심 서비스를 먼저 보여주고,
스크롤 흐름에 따라 필요한 정보로 자연스럽게 이어지도록 구성했습니다.
스크롤하여 전체 보기 ↓
Mobile
모바일 환경에서 자주 쓰는 기능을 손이 닿는 곳에 배치했습니다.
Bottom Bar
Optimization
-
Menu
PC상단 고정 헤더에 6개 앵커 메뉴를 가로 배치
MO햄버거 버튼으로 여는 우측 슬라이드 메뉴로 전환
-
Layout
PC사건 유형 4열 그리드와 카드형 변호인단 구성
MO한 열 중심으로 재배열하고 성공사례는 좁은 카드 슬라이더로 조정
-
Typography
PC히어로 제목 52px 중심의 큰 위계로 메시지를 강조
MO화면 폭에 맞춰 제목과 본문 크기를 줄여 줄바꿈을 정돈
-
Image
PC전면 배경 이미지 위에 어두운 그라데이션을 겹친 히어로
MO같은 배경을 유지하고 퀵메뉴를 축소해 콘텐츠를 가리지 않도록 배치
이런 홈페이지, 우리 법무법인도 가능할까요?
변호사 · 법무법인 홈페이지만 100개 이상. AI 검색 노출 설계까지 기본으로 넣어 드립니다.
