피해자의 시간에 끝까지 동행하는 형사전문 법률 웹사이트
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인물과 핵심 문구가 잘리지 않도록 이미지 비율과 노출 영역 조정
Thanks for
Watching!
