사건마다 가장 좋은 플랜을 제시하는 법률 웹사이트
메인 화면에서 “좋은 결과는 좋은 플랜에서 시작됩니다”라는 메시지로 시작해 분야별 전문가 → 센터별 업무 안내 → 고객 후기 → 상담신청 순으로 구성했습니다.
특히 기업법무, 가상자산, 재개발·재건축, 형사, 손해배상·대여금 다섯 분야를 같은 3단계 구조로 정리하고, 하단 고정 상담 바와 모바일 고정 메뉴를 더했으며, 네이비와 베이지 컬러로 신뢰감 있는 분위기를 완성했습니다.
Design Concept
사건의 수만큼 다른 플랜
사건의 수만큼 플랜도 다르다는 굿플랜의 메시지를 디자인의 출발점으로 삼았습니다.
짙은 네이비와 베이지 톤을 바탕으로 골드 포인트를 더해 차분하면서도 신뢰감 있는 인상을 만들고, 풀페이지 스크롤로 한 화면에 하나의 메시지가 읽히도록 구성했습니다.
또한 기업법무, 가상자산, 재개발·재건축, 형사, 손해배상·대여금을 모두 사건 분석, 맞춤 전략, 책임 수행의 3단계로 정리해 사용자가 분야는 달라도 같은 방식으로 정보를 이해하도록 설계했습니다.
Design Elements
-
01
풀페이지 스크롤 메인
메인을 섹션 단위 풀페이지 스크롤로 구성해 화면마다 하나의 메시지를 전달했습니다.
긴 업무 안내도 흐름을 잃지 않고 읽을 수 있습니다. -
02
분야별 3단계 Step 구조
각 분야를 분석, 전략 수립, 책임 수행 세 단계로 같은 형식으로 보여줬습니다.
분야가 달라도 굿플랜의 일하는 방식이 일관되게 전달됩니다. -
03
세부 업무 키워드와 성공사례 연결
분야마다 세부 업무를 키워드로 나열하고 성공사례 보러가기 버튼을 두었습니다.
방문자가 내 사건과 비슷한 업무와 결과를 바로 확인할 수 있습니다.
Responsive
디바이스 대응
PC · 태블릿 · 모바일 전 환경에서 정보의 순서와 사용성이 동일하게 유지되도록 반응형으로 설계했습니다.
Desktop
1920 × 1080
데스크톱
Tablet
768 × 1024
태블릿
Mobile
375 × 812
모바일
Design System
컬러 팔레트와 타이포그래피를 시스템으로 정의해 화면 전반에 일관된 규칙을 적용했습니다.
Colors
- Point Color#D9AD76
- Deep Navy#0F1C2E
- Taupe Brown#917962
- Warm Gray#8C8279
- Charcoal#222222
- White#FFFFFF
Typography
Aa 가나다 Pretendard
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Main Page
메인 페이지
첫 화면에서 브랜드와 핵심 서비스를 먼저 보여주고,
스크롤 흐름에 따라 필요한 정보로 자연스럽게 이어지도록 구성했습니다.
스크롤하여 전체 보기 ↓
Sub Page
서브 페이지
주요 서브 페이지를 같은 규칙으로 설계했습니다.
02 Pages
Note
전문가 소개와 업무사례를 같은 틀 안에서 확장할 수 있도록 설계했습니다.
서브 페이지는 상단 배너와 골드 타이틀 바 아래에 게시 목록이 이어지는 규칙으로 통일했습니다. 전문가, 업무사례, 고객후기 모두 같은 목록 형식을 써서 내용이 늘어나도 일관성을 유지합니다.
- Grid
- 전문가와 사례를 카드형 목록으로 정리해 한눈에 비교할 수 있습니다.
- Header
- 굿플랜 소개·주요업무·고객후기·소식·상담신청을 상단에 두고 세부 업무를 하위 메뉴로 나눴습니다.
- CTA
- 하단 고정 상담 바와 우측 플로팅 메뉴로 전화, 1:1 상담신청, 카카오톡 상담에 연결했습니다.
Mobile
모바일 환경에서 자주 쓰는 기능을 손이 닿는 곳에 배치했습니다.
Bottom Bar
Optimization
-
Menu
PC주요 메뉴와 하위 업무 메뉴를 상단에 노출
MO슬라이드 메뉴로 업무분야와 소식을 펼쳐 이동
-
Layout
PC섹션 단위 풀페이지 레이아웃
MO한 열로 쌓아 스크롤 흐름에 맞게 재배치
-
Typography
PC큰 헤드라인과 굵은 강조어 중심의 위계
MO헤드라인 크기를 줄이고 줄바꿈 위치를 조정
-
Image
PC전체 폭 배경 이미지와 네이비 톤 섹션
MO배경 이미지를 화면 폭에 맞춰 자르고 문구 가독성 유지
이런 홈페이지, 우리 법무법인도 가능할까요?
변호사 · 법무법인 홈페이지만 100개 이상. AI 검색 노출 설계까지 기본으로 넣어 드립니다.
