수사부터 재판까지 대응하는 형사전담 법률 랜딩페이지
첫 화면에서 형사사건 초기 대응의 중요성을 강조한 뒤, 형사사건 대응 필요성 → 형사전담시스템 프로세스 → 단계별 법률서비스 → 사건 유형 → 전담 변호인단 → 성공사례 → 실제 판결 사례 → FAQ → 상담 신청으로 이어지는 흐름을 구성했습니다.
딥 그린과 화이트를 중심으로 전문성과 신뢰감을 표현하면서, 카드형 UI와 단계별 콘텐츠 구조를 적용해 복잡한 형사 법률 정보를 사용자가 부담 없이 이해할 수 있도록 설계했습니다.
Design Concept
사건의 시작부터 결과까지
형사사건을 처음 경험하는 사용자가 복잡한 수사와 재판 절차 속에서도 현재 상황과 필요한 대응을 명확하게 이해할 수 있도록 체계성과 신뢰를 중심으로 디자인했습니다.
딥 그린 계열의 컬러를 중심으로 안정감과 전문성을 표현하고, 프로세스·서비스 영역·사건 유형·사례·FAQ를 명확한 단위로 구분해 정보 탐색의 부담을 줄였습니다.
또한 사건의 긴급성을 지나치게 자극적으로 표현하기보다, 전문가가 사건을 구조적으로 분석하고 대응한다는 인상을 전달하는 데 집중했습니다.
Design Elements
-
01
사건을 구조적으로 분석하는 전략
형사사건의 단계와 유형에 따라 필요한 대응이 달라진다는 점을 고려해 사건 분석부터 수사, 재판까지의 흐름을 체계적으로 보여주었습니다.
사용자가 단순한 상담 서비스가 아닌 사건 전반을 관리하는 전문 법률 시스템으로 인식할 수 있도록 구성했습니다. -
02
복잡한 법률 정보를 명확하게
형사절차, 범죄 유형, 단계별 대응 방식처럼 정보량이 많은 콘텐츠를 카드와 단계형 UI로 구분했습니다.
긴 설명을 한 번에 제공하기보다 핵심 내용을 나누어 보여줘 필요한 정보를 빠르게 찾고 이해할 수 있도록 설계했습니다. -
03
결과와 사례로 보여주는 전문성
전담 변호사 소개뿐 아니라 실제 성공사례와 판결 사례를 함께 배치해 전문성을 구체적인 근거로 전달했습니다.
서비스 설명 → 전문가 → 성공사례 → 판결사례의 흐름을 통해 실제 대응 역량을 자연스럽게 확인할 수 있도록 구성했습니다.
Responsive
디바이스 대응
PC · 태블릿 · 모바일 전 환경에서 정보의 순서와 사용성이 동일하게 유지되도록 반응형으로 설계했습니다.
Desktop
1920 × 1080
데스크톱
Tablet
768 × 1024
태블릿
Mobile
375 × 812
모바일
Design System
컬러 팔레트와 타이포그래피를 시스템으로 정의해 화면 전반에 일관된 규칙을 적용했습니다.
Colors
- Point Color#C6A968
- Deep Green#0F5149
- Forest Green#174F49
- Soft Gray#F5F7F6
- Warm Gold#C6A968
- Deep Charcoal#222222
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 검색 노출 설계까지 기본으로 넣어 드립니다.
