마음이 시리지 않도록 곁을 지키는 성범죄 피해자 법률 웹사이트
메인 화면은 “당신의 마음이 더는 시리지 않도록” 메시지에서 시작해 피해 유형 선택 → 24시간 상담 신청 → 유형별 안내 → 변호사 소개 → 성공사례 → 후기 → FAQ → 단계별 진행 절차 → 상황 진단 순서로 이어집니다.
특히 강간·강제추행·카메라등이용촬영 등 피해 유형별로 정보를 나누고 1분 상황 진단과 상담 신청을 곳곳에 배치했으며, 블루에서 라벤더로 이어지는 부드러운 그라데이션으로 차분하고 따뜻한 분위기를 완성했습니다.
Design Concept
시린 마음을 따뜻하게
성범죄 피해자가 사이트에 들어오는 순간 느끼는 두려움과 막막함을 덜어주는 것을 디자인의 출발점으로 삼았습니다.
블루와 라벤더, 코랄이 이어지는 부드러운 그라데이션과 나비 이미지로 차갑지 않은 법률 사이트라는 인상을 주고, 문구는 “다쳤을 때 의사를 찾아가듯이 변호사를 먼저 찾아주세요”처럼 사람의 말투로 정리했습니다.
피해 유형 선택에서 상담 신청, 단계별 절차, 상황 진단까지 같은 흐름으로 이어 사용자가 자신의 상황에 맞는 정보를 찾고 부담 없이 상담에 닿도록 설계했습니다.
Design Elements
-
01
피해 유형별 정보 구조
성폭행·성추행·카메라등이용촬영·스토킹·데이트폭력·미성년자로 나눠 유형마다 증거와 대응 방법을 안내했습니다.
사용자가 자신의 상황에 맞는 내용을 바로 읽을 수 있습니다. -
02
1분 상황 진단 폼
신고 전후, 사건 유형, 가해자와의 관계, 증거 유무, 인정 여부를 다섯 단계로 나눠 간단히 선택하도록 했습니다.
긴 입력 없이 상담 신청까지 부담 없이 이어집니다. -
03
6단계 진행 절차 안내
전화·방문상담부터 수사, 불복, 재판, 민사, 합의단계까지 변호사의 조력 내용을 단계별로 정리했습니다.
앞으로의 과정을 한눈에 이해할 수 있습니다.
Responsive
디바이스 대응
PC · 태블릿 · 모바일 전 환경에서 정보의 순서와 사용성이 동일하게 유지되도록 반응형으로 설계했습니다.
Desktop
1920 × 1080
데스크톱
Tablet
768 × 1024
태블릿
Mobile
375 × 812
모바일
Design System
컬러 팔레트와 타이포그래피를 시스템으로 정의해 화면 전반에 일관된 규칙을 적용했습니다.
Colors
- Point Color#FCA6A6
- Sky Blue#7EAEFF
- Indigo#7279FF
- Lavender#BCAAF4
- Charcoal#252525
- Light Gray#F3F4F5
- White#FFFFFF
Typography
Aa 가나다 Pretendard
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Aa 가나다 SeoulHangang
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Main Page
메인 페이지
첫 화면에서 브랜드와 핵심 서비스를 먼저 보여주고,
스크롤 흐름에 따라 필요한 정보로 자연스럽게 이어지도록 구성했습니다.
스크롤하여 전체 보기 ↓
Sub Page
서브 페이지
주요 서브 페이지를 같은 규칙으로 설계했습니다.
02 Pages
Note
유형별·단계별 안내를 같은 규칙으로 반복해 정보가 늘어나도 일관되게 확장되도록 설계했습니다.
서브 페이지는 공통 헤더와 상담 신청 영역 아래에 변호사 소개, 성공사례, 조력시스템 등 콘텐츠를 같은 틀로 배치했습니다.
지역별 위치 안내 페이지도 같은 구조를 사용합니다.
- Grid
- 카드와 본문을 같은 폭과 간격으로 정렬해 페이지가 바뀌어도 읽는 리듬이 유지됩니다.
- Header
- 상단에 치유의 봄 소개, 변호사 소개, 성공사례 찾기 등 메뉴와 대표번호 1668-2329를 함께 두었습니다.
- CTA
- 전화 연결과 상담 신청 버튼을 메인 곳곳에 두어 어느 위치에서도 바로 문의할 수 있습니다.
Mobile
모바일 환경에서 자주 쓰는 기능을 손이 닿는 곳에 배치했습니다.
Bottom Bar
Optimization
-
Menu
PC헤더에 메뉴와 지역별 위치, 전화번호 노출
MO펼침 메뉴 안에 전화 버튼을 포함해 간결하게 구성
-
Layout
PC유형별 카드와 상담 폼을 가로로 배치
MO카드를 세로 한 열로 정렬해 스크롤 중심으로 구성
-
Typography
PC큰 감성 문구와 본문의 위계를 분명하게 구성
MO문구 크기를 줄여 줄바꿈과 가독성 최적화
-
Image
PC나비 일러스트와 배너 이미지 사용
MO모바일 전용 배너와 버튼 이미지로 교체
이런 홈페이지, 우리 법무법인도 가능할까요?
변호사 · 법무법인 홈페이지만 100개 이상. AI 검색 노출 설계까지 기본으로 넣어 드립니다.
