법무법인 SLB 분야별 법률상담 랜딩페이지 구축
음주운전, 성범죄 등 사건 유형별로 사용자가 가장 궁금해하는 핵심 정보를 우선적으로 전달하고, SLB의 대응 역량과 전문 변호인단, 사건 처리 프로세스, 실제 사례를 자연스럽게 확인할 수 있도록 콘텐츠를 구성했습니다.
각 분야별 특성에 맞춰 메인 비주얼과 메시지는 차별화하면서도, 전문성 · 신뢰 · 상담 전환이라는 공통된 디자인 원칙을 유지하여 하나의 브랜드 경험으로 연결했습니다.
특히 모바일과 검색광고를 통해 유입되는 사용자가 복잡한 탐색 없이 사건 정보를 확인하고 바로 상담까지 이어질 수 있도록 랜딩페이지 목적에 집중한 UX 구조로 설계했습니다.
Design Concept
분야를 넘어, 하나의 전문성으로
법률 사건을 마주한 사용자가 짧은 시간 안에 “이곳에서 내 사건을 제대로 다룰 수 있는가”를 판단할 수 있도록 전문성과 신뢰감을 중심으로 디자인했습니다.
분야별 사건 특성에 맞는 메인 비주얼과 핵심 메시지를 전면에 배치하고, 이후 SLB의 강점 → 변호인단 → 사건 진행 과정 → 해결 사례 → 상담 신청으로 이어지는 명확한 정보 흐름을 구축했습니다.
네이비와 딥 그린 계열을 기반으로 법률 서비스 특유의 안정감을 표현하면서, 중요한 정보와 CTA에는 포인트 컬러를 사용해 시선의 우선순위를 분명하게 설정했습니다.
Design Elements
-
01
사건별 전문성
각 사건 분야별 사용자가 필요로 하는 정보가 다르다는 점을 고려해 랜딩페이지마다 콘텐츠와 메시지를 별도로 구성했습니다.
음주운전과 성범죄 등 사건 성격에 따라 핵심 대응 포인트를 전면에 배치하여 분야별 전문성이 즉시 전달되도록 설계했습니다. -
02
신뢰를 만드는 정보 구조
SLB의 변호인단과 사건 대응 시스템, 진행 절차, 사건 사례를 단계적으로 배치하여 사용자가 법률사무소의 역량을 자연스럽게 확인할 수 있도록 구성했습니다.
단순한 홍보 문구보다 구체적인 정보와 실제 대응 구조를 통해 신뢰를 형성하는 방식에 집중했습니다. -
03
상담으로 이어지는 UX
랜딩페이지의 핵심 목적을 상담 전환으로 설정하고, 주요 콘텐츠를 확인한 이후 자연스럽게 문의 행동으로 이어질 수 있도록 CTA를 반복적으로 배치했습니다.
상담 신청 영역은 입력 항목을 최소화하고 전화, 온라인 상담 등 다양한 접근 경로를 제공해 사용자의 상담 진입 장벽을 낮췄습니다.
Responsive
디바이스 대응
PC · 태블릿 · 모바일 전 환경에서 정보의 순서와 사용성이 동일하게 유지되도록 반응형으로 설계했습니다.
Desktop
1920 × 1080
데스크톱
Tablet
768 × 1024
태블릿
Mobile
375 × 812
모바일
Design System
컬러 팔레트와 타이포그래피를 시스템으로 정의해 화면 전반에 일관된 규칙을 적용했습니다.
Colors
- Point Color#1E3F8C
- SLB Green#12594C
- 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 검색 노출 설계까지 기본으로 넣어 드립니다.
