김앤장 출신 변호사의 실력을 담은 프리미엄 법률 웹사이트
메인 화면은 비주얼 메시지 → 모먼트 소개와 대표변호사 → 민사·형사·가사·행정·기업 업무분야 → 성공 이야기 → 의뢰인 경험담 → 서울·인천 사무소 안내 및 상담 신청 순서로 구성해, 신뢰를 쌓은 뒤 상담까지 자연스럽게 이어지도록 했습니다.
특히 네이비 계열의 컬러와 섹션마다 다른 배경 이미지로 묵직하면서도 세련된 인상을 만들었고, 대표변호사 소개와 성공사례 게시판을 별도 페이지로 두어 변호사의 경력과 결과를 직접 확인할 수 있도록 했습니다.
Design Concept
위기의 순간을 신뢰로
법률 문제를 앞둔 의뢰인이 가장 먼저 확인하고 싶은 것은 누가 내 사건을 맡는지, 그리고 어떤 결과를 만들어 왔는지라고 보았습니다.
그래서 딥 네이비와 미드나이트 블루를 기반으로 묵직한 신뢰감을 만들고, 스카이 블루를 포인트로 더해 무겁기만 하지 않은 프리미엄 이미지를 주었습니다. 섹션마다 다른 배경 이미지를 사용해 스크롤하는 동안 화면이 단조롭지 않도록 했습니다.
또한 대표변호사 소개와 성공사례를 메인에서 바로 보여주고 상세 페이지로 연결해, 변호사의 경력과 실제 결과를 확인한 뒤 상담 예약까지 이어지도록 설계했습니다.
Design Elements
-
01
대표변호사 중심의 신뢰 구조
메인 화면에서 두 대표변호사의 사진과 한 줄 메시지를 먼저 보여주도록 구성했습니다.
자세히보기로 학력·경력·주요 업무 사례까지 이어져 변호사의 이력을 바로 확인할 수 있습니다. -
02
다섯 개 업무분야 카드
민사·형사·가사·행정·기업을 분야별 배경 이미지를 가진 카드로 나눠 한눈에 보이도록 했습니다.
각 카드는 분야별 상세 페이지로 연결되어 필요한 정보를 빠르게 찾을 수 있습니다. -
03
성공사례·경험담 게시판
성공 이야기와 의뢰인 경험담을 메인 섹션과 별도 게시판으로 함께 운영하도록 구성했습니다.
사건별 결과를 제목으로 요약해 목록에서 먼저 확인할 수 있습니다.
Responsive
디바이스 대응
PC · 태블릿 · 모바일 전 환경에서 정보의 순서와 사용성이 동일하게 유지되도록 반응형으로 설계했습니다.
Desktop
1920 × 1080
데스크톱
Tablet
768 × 1024
태블릿
Mobile
375 × 812
모바일
Design System
컬러 팔레트와 타이포그래피를 시스템으로 정의해 화면 전반에 일관된 규칙을 적용했습니다.
Colors
- Point Color#779DE1
- Deep Navy#262649
- Midnight Blue#20304F
- Sky Blue#779DE1
- Royal Blue#0B337A
- Charcoal#222222
- Light Gray#E4E4E4
- White#FFFFFF
Typography
Aa 가나다 Pretendard
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Main Page
메인 페이지
첫 화면에서 브랜드와 핵심 서비스를 먼저 보여주고,
스크롤 흐름에 따라 필요한 정보로 자연스럽게 이어지도록 구성했습니다.
스크롤하여 전체 보기 ↓
Sub Page
서브 페이지
주요 서브 페이지를 같은 규칙으로 설계했습니다.
02 Pages
Note
서브 페이지도 메인과 같은 네이비 톤과 구조 안에서 일관되게 확장했습니다.
변호사 소개, 업무분야, 성공 이야기, 의뢰인 경험담은 같은 헤더와 하단 사무소 정보를 공유합니다. 페이지마다 상단 소개 문구와 본문 영역을 같은 규칙으로 배치해 어떤 페이지에서도 상담 예약으로 이동할 수 있습니다.
- Grid
- 업무분야 카드와 성공사례 목록을 일정한 간격의 격자로 정렬해 정보를 비교하기 쉽게 했습니다.
- Header
- 상단 고정 헤더가 메인 상단에서는 투명, 스크롤 후에는 흰 배경으로 바뀌며 메뉴와 상담 버튼을 항상 제공합니다.
- CTA
- 헤더의 빠른 상담예약 버튼과 사무소별 상담 신청하기 버튼으로 어느 위치에서든 상담에 연결됩니다.
Mobile
모바일 환경에서 자주 쓰는 기능을 손이 닿는 곳에 배치했습니다.
Bottom Bar
Optimization
-
Menu
PC가로형 메뉴와 상담예약 버튼
MO햄버거 버튼과 슬라이드 메뉴로 전환
-
Layout
PC대표변호사 2인과 업무분야 5개를 가로로 배치
MO세로 흐름으로 재배치해 한 화면에 하나씩 확인
-
Typography
PCPretendard 기반의 큰 타이틀과 본문 위계
MO화면 폭에 맞춰 글자 크기와 줄 간격을 조정
-
Image
PC섹션별 풀스크린 배경 이미지
MO배경 이미지를 모바일 비율에 맞춰 크롭
이런 홈페이지, 우리 법무법인도 가능할까요?
변호사 · 법무법인 홈페이지만 100개 이상. AI 검색 노출 설계까지 기본으로 넣어 드립니다.
