부산 지역 상담을 분야별로 연결하는 변호사 웹사이트
메인 화면은 “혼자 고민하지 마세요” 메시지의 첫 화면 → 부산 본사 중심 Service → 변호인단 Member → 성공사례 Case → 오시는 길 Location 순으로 구성했습니다.
특히 형사, 이혼, 성범죄, 음주운전, 중대재해, 강제추행, 마약, 학교폭력까지 분야별 전용 페이지를 메뉴로 묶고, 딥 네이비와 샌드 베이지 컬러, 우측 고정 상담 버튼으로 상담 접근성을 높였습니다.
Design Concept
가까이서 듣는 부산 로펌
사건을 앞두고 막막한 의뢰인이 지역 변호사를 빠르게 찾고 바로 연락할 수 있게 하는 것을 디자인의 출발점으로 삼았습니다.
딥 네이비를 중심에 두고 샌드 베이지를 포인트로 더해 무겁지 않지만 신뢰감 있는 분위기를 만들었고, 부산지방검찰청 바로 앞이라는 위치와 부산 사무실 상주 변호사를 핵심 메시지로 앞세웠습니다.
또한 분야별 전용 페이지를 같은 구조로 만들어 사용자가 자신의 사건 유형에 맞는 정보를 찾고 전화, 카톡, 블로그 등 원하는 방식으로 상담까지 이어지도록 설계했습니다.
Design Elements
-
01
분야별 전용 페이지 구조
형사, 이혼, 마약, 학교폭력 등 여덟 개 분야를 각각 독립된 페이지로 나눴습니다.
사용자가 메뉴에서 자신의 사건 유형을 바로 찾을 수 있습니다. -
02
우측 고정 상담 버튼
공식 사이트, 카톡 문의, 네이버 블로그, 전화문의를 원형 버튼으로 화면 우측에 고정했습니다.
스크롤 위치와 관계없이 원하는 방식으로 바로 문의할 수 있습니다. -
03
변호인단과 성공사례 구성
변호인단 사진과 사건별 성공사례를 이미지 카드로 구성했습니다.
사건 유형과 결과를 제목에서 바로 알 수 있도록 정리했습니다.
Responsive
디바이스 대응
PC · 태블릿 · 모바일 전 환경에서 정보의 순서와 사용성이 동일하게 유지되도록 반응형으로 설계했습니다.
Desktop
1920 × 1080
데스크톱
Tablet
768 × 1024
태블릿
Mobile
375 × 812
모바일
Design System
컬러 팔레트와 타이포그래피를 시스템으로 정의해 화면 전반에 일관된 규칙을 적용했습니다.
Colors
- Point Color#3A8AFD
- Deep Navy#001431
- Sand Beige#B99D87
- Sky Blue#3A8AFD
- Royal Blue#1976DE
- Charcoal#222222
- Light Gray#E6E6E6
- White#FFFFFF
Typography
Aa 가나다 Pretendard
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Aa 가나다 Paperlogy
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Main Page
메인 페이지
첫 화면에서 브랜드와 핵심 서비스를 먼저 보여주고,
스크롤 흐름에 따라 필요한 정보로 자연스럽게 이어지도록 구성했습니다.
스크롤하여 전체 보기 ↓
Sub Page
서브 페이지
주요 서브 페이지를 같은 규칙으로 설계했습니다.
02 Pages
Note
분야별 페이지를 같은 구성 규칙으로 확장할 수 있도록 설계했습니다.
모든 분야 페이지는 첫 화면, Service, Member, Case, Location 순서의 같은 섹션 흐름을 따릅니다.
페이지마다 포인트 컬러와 본문 메시지는 분야 성격에 맞춰 달라집니다.
- Grid
- 변호인단 사진과 성공사례 카드를 같은 비율의 그리드로 정렬했습니다.
- Header
- 상단에 분야 메뉴와 전화번호 버튼을 함께 두어 어느 페이지에서도 바로 연락할 수 있습니다.
- CTA
- 각 분야 페이지에 공식 홈페이지 바로가기와 전화 상담 동선을 동일하게 배치했습니다.
Mobile
모바일 환경에서 자주 쓰는 기능을 손이 닿는 곳에 배치했습니다.
Bottom Bar
Optimization
-
Menu
PC분야 드롭다운과 섹션 앵커 메뉴, 전화번호 버튼을 상단에 배치
MO메뉴를 접고 전화 버튼은 아이콘만 남겨 상단을 간결하게 정리
-
Layout
PC변호인단과 성공사례를 다단 그리드로 배치
MO카드를 줄여 세로로 쌓고 슬라이드형 사례로 넘겨보도록 조정
-
Typography
PCPretendard 본문과 Paperlogy 제목으로 위계를 구분
MO제목 크기를 줄이고 줄바꿈을 정리해 좁은 화면에서도 읽히도록 구성
-
Image
PC전면 배경 이미지와 변호인단 사진을 크게 노출
MO배경과 인물 이미지를 화면 폭에 맞춰 크롭하고 비율 조정
이런 홈페이지, 우리 법무법인도 가능할까요?
변호사 · 법무법인 홈페이지만 100개 이상. AI 검색 노출 설계까지 기본으로 넣어 드립니다.
