부산 지역 상담을 분야별로 연결하는 변호사 웹사이트

법무법인 PK의 부산 본사·경상권 중심 법률 서비스와 검사 출신 대표변호사를 중심으로 한 변호인단을 알리기 위해 구축한 공식 홍보 웹사이트입니다. 메인 화면은 “혼자 고민하지 마세요” 메시지의 첫 화면 → 부산 본사 중심 Service → 변호인단 Member → 성공사례 Case → 오시는 길 Location 순으로 구성했습니다. 특히 형사, 이혼, 성범죄, 음주운전, 중대재해, 강제추행, 마약, 학교폭력까지 분야별 전용 페이지를 메뉴로 묶고, 딥 네이비와 샌드 베이지 컬러, 우측 고정 상담 버튼으로 상담 접근성을 높였습니다.

#법무법인PK
#부산변호사
#형사전문변호사
#이혼전문변호사
#중대재해
#마약전문변호사
#학교폭력
#변호사홈페이지
#반응형웹
#UIUX

Client: 법무법인 PK
Category: 법무법인

Design Concept

가까이서 듣는 부산 로펌

사건을 앞두고 막막한 의뢰인이 지역 변호사를 빠르게 찾고 바로 연락할 수 있게 하는 것을 디자인의 출발점으로 삼았습니다.
딥 네이비를 중심에 두고 샌드 베이지를 포인트로 더해 무겁지 않지만 신뢰감 있는 분위기를 만들었고, 부산지방검찰청 바로 앞이라는 위치와 부산 사무실 상주 변호사를 핵심 메시지로 앞세웠습니다.
또한 분야별 전용 페이지를 같은 구조로 만들어 사용자가 자신의 사건 유형에 맞는 정보를 찾고 전화, 카톡, 블로그 등 원하는 방식으로 상담까지 이어지도록 설계했습니다.

Design Elements

01

분야별 전용 페이지 구조

형사, 이혼, 마약, 학교폭력 등 여덟 개 분야를 각각 독립된 페이지로 나눴습니다.
사용자가 메뉴에서 자신의 사건 유형을 바로 찾을 수 있습니다.
02

우측 고정 상담 버튼

공식 사이트, 카톡 문의, 네이버 블로그, 전화문의를 원형 버튼으로 화면 우측에 고정했습니다.
스크롤 위치와 관계없이 원하는 방식으로 바로 문의할 수 있습니다.
03

변호인단과 성공사례 구성

변호인단 사진과 사건별 성공사례를 이미지 카드로 구성했습니다.
사건 유형과 결과를 제목에서 바로 알 수 있도록 정리했습니다.

Responsive

디바이스 대응

PC · 태블릿 · 모바일 전 환경에서 정보의 순서와 사용성이 동일하게 유지되도록 반응형으로 설계했습니다.

Desktop
1920 × 1080
데스크톱
Tablet
768 × 1024
태블릿
Mobile
375 × 812
모바일

Design System

컬러 팔레트와 타이포그래피를 시스템으로 정의해 화면 전반에 일관된 규칙을 적용했습니다.

Colors

Main Color#001431

Sub Color#B99D87

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

Weight

가나다 Aa
가나다 Aa

Regular · Bold

Aa 가나다 Paperlogy

가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789

Weight

가나다 Aa
가나다 Aa

Regular · Bold

Main Page

메인 페이지

첫 화면에서 브랜드와 핵심 서비스를 먼저 보여주고,
스크롤 흐름에 따라 필요한 정보로 자연스럽게 이어지도록 구성했습니다.

www.example.com

스크롤하여 전체 보기 ↓

Sub Page

서브 페이지

주요 서브 페이지를 같은 규칙으로 설계했습니다.

02 Pages

부산 지역 상담을 분야별로 연결하는 변호사 웹사이트 서브 페이지 1 — Sub Page 형사전문변호사 페이지 01

부산 지역 상담을 분야별로 연결하는 변호사 웹사이트 서브 페이지 2 — Sub Page 이혼전문변호사 페이지 02

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배경과 인물 이미지를 화면 폭에 맞춰 크롭하고 비율 조정