피해자의 시간에 끝까지 동행하는 형사전문 법률 웹사이트
메인 화면에서 “형사 전문 변호사의 마스터 솔루션”이라는 브랜드 메시지를 중심으로 신뢰를 형성하고, 이후 분야별 전문 센터와 단계별 조력 과정, 성공사례와 전문가 소개, 의뢰인 후기까지 단계적으로 구성했습니다.
특히 성범죄 피해자, 이혼·상간 파생사건, 학교폭력·소년범죄의 세 전문 센터로 정보를 나눠 사용자가 자신의 상황에 맞는 분야를 바로 찾을 수 있도록 했으며, 딥 그린과 아이보리 베이지 컬러, 손그림 라인 일러스트와 명조 서체로 차분하고 품위 있는 분위기를 완성했습니다.
Design Concept
사건의 무게를 차분한 신뢰로
형사 사건을 겪는 의뢰인이 가장 먼저 느끼는 불안과 막막함을 덜어주는 것을 디자인의 출발점으로 삼았습니다.
딥 그린과 아이보리 베이지를 기반으로 차분하고 절제된 톤을 만들고, 손그림 라인 일러스트와 명조 서체를 더해 딱딱한 법률 사이트가 아닌 사람의 이야기를 듣는 공간이라는 인상을 주었습니다.
또한 성범죄 피해자 → 이혼·상간 파생사건 → 학교폭력·소년범죄로 이어지는 세 전문 센터를 같은 구조로 정리해, 사용자가 자신의 사건에 맞는 정보를 빠르게 찾고 상담까지 자연스럽게 이어지도록 설계했습니다.
Design Elements
-
01
세 개의 전문 센터로 나눈 정보 구조
성범죄 피해자, 이혼·상간 파생사건, 학교폭력·소년범죄를 각각 독립된 센터로 구성하고, 센터마다 업무분야 · 단계별 조력 · Q&A · 퍼스널 서비스 · 유튜브를 같은 순서로 배치했습니다.
사용자는 어느 센터에 들어가도 익숙한 흐름으로 자신의 상황에 맞는 정보를 찾을 수 있습니다. -
02
라인 일러스트와 명조 서체의 절제된 톤
강한 색이나 자극적인 문구 대신 딥 그린 바탕에 손그림 라인 일러스트와 명조 서체를 사용해 차분하고 신뢰감 있는 첫인상을 만들었습니다.
민감한 사건을 상담하려는 사용자가 부담 없이 머무르며 정보를 읽을 수 있는 분위기에 집중했습니다. -
03
책처럼 펼쳐 보여주는 성공사례
성공사례를 펼친 책 형태로 구성해 사건 개요와 처분 결과, 담당 변호사, 실제 판결 문서를 한 화면에서 함께 보여주었습니다.
성공사례 · 전문가칼럼 · 언론보도 · 최신판례와 의뢰인 후기로 이어지는 흐름을 통해 전문성을 실제 결과로 증명하도록 설계했습니다.
Responsive
디바이스 대응
PC · 태블릿 · 모바일 전 환경에서 정보의 순서와 사용성이 동일하게 유지되도록 반응형으로 설계했습니다.
Desktop
1920 × 1080
데스크톱
Tablet
768 × 1024
태블릿
Mobile
375 × 812
모바일
Design System
컬러 팔레트와 타이포그래피를 시스템으로 정의해 화면 전반에 일관된 규칙을 적용했습니다.
Colors
- Point Color#362616
- Deep Green#182A23
- Ivory Beige#E8E2D2
- Walnut Brown#362616
- Ink Navy#101C24
- Warm Gray#CECDCC
- White#FFFFFF
Typography
Aa 가나다 MaruBuri
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Aa 가나다 Pretendard
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Main Page
메인 페이지
첫 화면에서 브랜드와 핵심 서비스를 먼저 보여주고,
스크롤 흐름에 따라 필요한 정보로 자연스럽게 이어지도록 구성했습니다.
스크롤하여 전체 보기 ↓
Sub Page
서브 페이지
주요 서브 페이지를 같은 규칙으로 설계했습니다.
02 Pages
Note
세 개의 전문 센터를 동일한 규칙 안에서 일관되게 확장할 수 있도록 설계했습니다.
각 센터는 다루는 사건의 성격이 다르지만 공통된 서브 비주얼과 탭 메뉴, 콘텐츠 그리드를 적용해 전체 사이트의 통일감을 유지했습니다.
각 서브페이지는 센터 비주얼 → 전담 변호사 소개 → 대응 방향 → 전문가 소개 → 성공사례 → 의뢰인 후기 · 상담 신청의 흐름으로 구성해 사용자가 어느 페이지에서도 같은 방식으로 정보를 탐색하고 상담으로 이어질 수 있도록 했습니다.
- Grid
- 1200px 기준 12컬럼 그리드를 적용해 변호사 약력, 성공사례, 후기 등 서로 다른 형태의 콘텐츠를 안정적으로 배치했습니다.
- Header
- 센터마다 같은 서브 비주얼과 탭 메뉴 구조를 적용하고, 센터별 문구와 배경 톤만 달리해 브랜드 일관성과 분야별 성격을 함께 유지했습니다.
- CTA
- 사건 정보를 확인한 사용자가 별도의 탐색 없이 바로 상담을 신청할 수 있도록 모든 페이지 하단에 빠른 상담 바와 상담신청 영역을 공통으로 배치했습니다.
Mobile
모바일 환경에서 자주 쓰는 기능을 손이 닿는 곳에 배치했습니다.
Bottom Bar
Optimization
-
Menu
PC세 전문 센터와 성공사례 · 의뢰인후기를 상단 메뉴에서 바로 탐색
MO센터별 하위 메뉴를 햄버거 메뉴에 묶어 간결하게 구성
-
Layout
PC히어로 카드와 표창 카드, 주요 사건 키워드를 한 화면에 나란히 배치
MO핵심 메시지와 상담 기능이 먼저 보이도록 세로 흐름으로 재구성
-
Typography
PC명조 제목과 고딕 본문을 조합해 품위 있고 명확한 정보 위계 구성
MO작은 화면에서도 사건 정보와 약력을 편하게 읽도록 크기와 행간 최적화
-
Image
PC라인 일러스트와 변호사 인물 사진으로 차분한 신뢰감 전달
MO인물과 핵심 문구가 잘리지 않도록 이미지 비율과 노출 영역 조정
이런 홈페이지, 우리 법무법인도 가능할까요?
변호사 · 법무법인 홈페이지만 100개 이상. AI 검색 노출 설계까지 기본으로 넣어 드립니다.
