아이와 가족을 지키는 학교폭력 대응 법률 웹사이트
메인 화면에서 피해자·가해자 학부모 입장 선택 → 피해자 권리 → 상담 진행 절차 → 변호사 소개 → 자주 묻는 질문 → 비밀상담 신청 → 학교폭력 칼럼 순으로 구성해, 사용자가 자신의 상황에 맞는 안내를 따라 상담까지 이어지도록 했습니다.
특히 입장 선택에 따라 안내 내용이 달라지는 구조와 “비밀 보장” 메시지, 사진 배경 위에 얹은 블루 포인트 컬러와 Pretendard 서체로 불안한 상황에서도 차분하게 읽히는 화면을 완성했습니다.
Design Concept
불안한 부모에게 건네는 차분한 안내
학교폭력 사건을 마주한 학부모가 가장 먼저 느끼는 불안과 혼란을 덜어주는 것을 디자인의 출발점으로 삼았습니다.
처음 진입할 때 피해자 학부모와 가해자 학부모 중 입장을 먼저 선택하도록 해, 이후 문구와 안내가 그 입장에 맞게 이어지도록 설계했습니다. 화이트와 라이트 그레이 바탕에 블루 계열 포인트 컬러, 사진 배경을 더해 차분하고 신뢰감 있는 분위기를 만들었습니다.
상담 내용은 담당 변호사만 확인한다는 비밀 보장 메시지를 상담 신청 앞에 두어, 상담을 망설이는 사용자가 안심하고 접수까지 이어갈 수 있도록 구성했습니다.
Design Elements
-
01
입장 선택 첫 화면
피해자·가해자 학부모 중 먼저 입장을 선택하도록 해 상황에 맞는 안내만 보이게 했습니다.
처음 방문한 사용자가 어디부터 읽어야 할지 고민하지 않고 바로 필요한 정보로 들어갈 수 있습니다. -
02
단계별 진행 절차
상담 신청부터 사건 분석·전략, 학교·심의위 대응, 결과 이후 관리까지 네 단계를 번호와 사진으로 정리했습니다.
사건이 어떤 순서로 진행되는지 한눈에 이해할 수 있습니다. -
03
비밀 보장 중심의 상담 동선
상담 내용은 상담 변호사만 확인한다는 메시지와 함께 입장·사건유형·진행상황을 고르는 접수 폼을 구성했습니다.
전화·카카오톡 상담까지 같은 흐름에서 선택할 수 있어 부담 없이 문의할 수 있습니다.
Responsive
디바이스 대응
PC · 태블릿 · 모바일 전 환경에서 정보의 순서와 사용성이 동일하게 유지되도록 반응형으로 설계했습니다.
Desktop
1920 × 1080
데스크톱
Tablet
768 × 1024
태블릿
Mobile
375 × 812
모바일
Design System
컬러 팔레트와 타이포그래피를 시스템으로 정의해 화면 전반에 일관된 규칙을 적용했습니다.
Colors
- Point Color#F39800
- Ink Black#1D1D1F
- Warm Gray#6E6E73
- Soft Gray#F5F5F7
- Deep Navy#071021
- White#FFFFFF
Typography
Aa 가나다 Pretendard
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Main Page
메인 페이지
첫 화면에서 브랜드와 핵심 서비스를 먼저 보여주고,
스크롤 흐름에 따라 필요한 정보로 자연스럽게 이어지도록 구성했습니다.
스크롤하여 전체 보기 ↓
Sub Page
서브 페이지
주요 서브 페이지를 같은 규칙으로 설계했습니다.
02 Pages
Note
메인과 칼럼 페이지가 같은 색과 서체 규칙 안에서 이어지도록 설계했습니다.
메인 랜딩과 칼럼 목록·상세 페이지가 같은 헤더와 푸터, 블루 포인트 컬러를 공유합니다. 칼럼은 상단 배너 아래 카드 목록과 본문 읽기 화면으로 나누어 정보 탐색과 상담 전환이 자연스럽게 이어지도록 했습니다.
- Grid
- 섹션마다 중앙 정렬된 콘텐츠 폭 안에서 카드와 번호형 목록을 일정한 간격으로 배열했습니다.
- Header
- 서비스 소개·진행 절차·변호사 소개·FAQ·칼럼 메뉴와 비밀상담 버튼을 상단에 두었습니다.
- CTA
- 전화상담과 카카오톡 상담, 비밀상담 신청 버튼을 화면 곳곳에 배치해 언제든 문의할 수 있게 했습니다.
Mobile
모바일 환경에서 자주 쓰는 기능을 손이 닿는 곳에 배치했습니다.
Bottom Bar
Optimization
-
Menu
PC상단 가로 메뉴와 비밀상담 버튼으로 주요 섹션과 칼럼에 바로 이동
MO모바일 전용 메뉴로 전환하고 하단 고정 바로 상담 접수 유지
-
Layout
PC넓은 화면에서 입장 선택 카드와 절차 사진을 좌우로 배치
MO세로 한 단으로 쌓아 카드와 절차를 위에서 아래로 읽도록 재배치
-
Typography
PC큰 제목과 본문 위계를 두고 Pretendard 서체로 가독성 확보
MO화면 너비에 맞춰 글자 크기를 줄이고 줄바꿈을 조정해 가독성 유지
-
Image
PC사진 배경과 아이콘으로 각 섹션의 분위기를 구분
MO배경 사진과 변호사 이미지를 모바일 비율에 맞게 조정
이런 홈페이지, 우리 법무법인도 가능할까요?
변호사 · 법무법인 홈페이지만 100개 이상. AI 검색 노출 설계까지 기본으로 넣어 드립니다.
