첫 조사 전에 진술 기조를 설계하는 성범죄 대응 법률 랜딩페이지
히어로 화면에서 비공개 원칙과 신속대응을 먼저 제시하고, 강점 → 구성원 소개 → 접수부터 공판까지의 5단계 프로세스 → 12개 대응 분야 → 성공사례 → 오시는 길과 상담 신청 순서로 구성했습니다.
특히 피의자 방어와 피해자 대리를 모두 다루는 분야 구성과 2단계 상담 신청(기본 정보 → 현재 신분·진행 단계·구속 여부 자가 진단), 딥 그린과 골드 컬러의 절제된 톤으로 민감한 사건을 상담하는 의뢰인이 부담 없이 접근하도록 설계했습니다.
Design Concept
민감한 사건을 차분한 질서로
성범죄 사건을 마주한 의뢰인은 누구에게도 쉽게 말하기 어려운 상황에서 상담을 시작한다는 점을 디자인의 출발점으로 삼았습니다.
딥 그린과 슬레이트 그린, 절제된 골드 포인트로 차분하고 신중한 톤을 만들고, 어두운 그라데이션을 얹은 히어로 이미지로 무게감 있는 첫인상을 주었습니다.
또한 “비공개 접수”에서 “공판 대응”까지 이어지는 5단계 프로세스와 12개 분야를 번호 체계로 정리해, 사용자가 자신의 사건 위치를 빠르게 확인하고 상담 신청까지 자연스럽게 이어지도록 설계했습니다.
Design Elements
-
01
5단계 비공개 프로세스 구조
비공개 접수, 담당 배정, 사전 상담, 조사 동행, 공판 대응을 번호 순서로 정리했습니다.
조사 전에 무엇을 준비하고 어느 단계에서 무엇을 결정하는지 한눈에 보이도록 했습니다. -
02
번호형 12개 대응 분야 목록
강제추행부터 구속영장·구속적부심, 피해자 고소 대리까지 12개 분야를 번호로 나열했습니다.
피의자 방어와 피해자 대리를 한 목록에서 구분 없이 찾을 수 있도록 했습니다. -
03
결과 라벨형 성공사례 카드
무죄·무혐의·불송치·구속영장기각 등 결과를 카드 상단 라벨로 먼저 보여주었습니다.
죄명과 담당 변호사를 함께 표기하고 상세 내용은 더보기로 연결했습니다.
Responsive
디바이스 대응
PC · 태블릿 · 모바일 전 환경에서 정보의 순서와 사용성이 동일하게 유지되도록 반응형으로 설계했습니다.
Desktop
1920 × 1080
데스크톱
Tablet
768 × 1024
태블릿
Mobile
375 × 812
모바일
Design System
컬러 팔레트와 타이포그래피를 시스템으로 정의해 화면 전반에 일관된 규칙을 적용했습니다.
Colors
- Point Color#C9A96A
- Deep Green#0D322F
- Slate Green#2E413F
- Forest Green#17423A
- Sage Mint#9BBFAE
- Ink Black#1B2220
- White#FFFFFF
Typography
Aa 가나다 Pretendard
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Main Page
메인 페이지
첫 화면에서 브랜드와 핵심 서비스를 먼저 보여주고,
스크롤 흐름에 따라 필요한 정보로 자연스럽게 이어지도록 구성했습니다.
스크롤하여 전체 보기 ↓
Mobile
모바일 환경에서 자주 쓰는 기능을 손이 닿는 곳에 배치했습니다.
Bottom Bar
Optimization
-
Menu
PCMenu · 상단 고정 헤더에 5개 섹션 메뉴와 상담문의 버튼 배치
MOMenu · 햄버거 버튼으로 여는 우측 슬라이드 메뉴
-
Layout
PCLayout · 강점 3열, 분야 12개, 사례 카드 격자 배열
MOLayout · 1열 세로 흐름으로 재배치하고 좌우 여백 축소
-
Typography
PCTypography · 히어로 대형 타이틀과 영문 소제목 위계
MOTypography · 본문 15px 기준으로 줄바꿈과 자간 조정
-
Image
PCImage · 어두운 그라데이션을 얹은 풀스크린 히어로 이미지
MOImage · 로고와 퀵메뉴 아이콘을 축소해 화면 가림 최소화
이런 홈페이지, 우리 법무법인도 가능할까요?
변호사 · 법무법인 홈페이지만 100개 이상. AI 검색 노출 설계까지 기본으로 넣어 드립니다.
