아이와 가족을 지키는 학교폭력 대응 법률 웹사이트

법무법인 두현의 학교폭력 전담 서비스 「도와줘학폭」의 대응 방식과 상담 과정을 학부모에게 쉽게 전달하기 위해 구축한 웹사이트입니다. 메인 화면에서 피해자·가해자 학부모 입장 선택 → 피해자 권리 → 상담 진행 절차 → 변호사 소개 → 자주 묻는 질문 → 비밀상담 신청 → 학교폭력 칼럼 순으로 구성해, 사용자가 자신의 상황에 맞는 안내를 따라 상담까지 이어지도록 했습니다. 특히 입장 선택에 따라 안내 내용이 달라지는 구조와 “비밀 보장” 메시지, 사진 배경 위에 얹은 블루 포인트 컬러와 Pretendard 서체로 불안한 상황에서도 차분하게 읽히는 화면을 완성했습니다.

#법무법인두현도와줘학폭
#법무법인두현
#도와줘학폭
#학교폭력변호사
#학폭위대응
#학교폭력상담
#법률웹사이트
#변호사홈페이지
#반응형웹
#UIUX

Client: 법무법인 두현 도와줘학폭
Category: 법무법인

Design Concept

불안한 부모에게 건네는 차분한 안내

학교폭력 사건을 마주한 학부모가 가장 먼저 느끼는 불안과 혼란을 덜어주는 것을 디자인의 출발점으로 삼았습니다.
처음 진입할 때 피해자 학부모와 가해자 학부모 중 입장을 먼저 선택하도록 해, 이후 문구와 안내가 그 입장에 맞게 이어지도록 설계했습니다. 화이트와 라이트 그레이 바탕에 블루 계열 포인트 컬러, 사진 배경을 더해 차분하고 신뢰감 있는 분위기를 만들었습니다.
상담 내용은 담당 변호사만 확인한다는 비밀 보장 메시지를 상담 신청 앞에 두어, 상담을 망설이는 사용자가 안심하고 접수까지 이어갈 수 있도록 구성했습니다.

Design Elements

01

입장 선택 첫 화면

피해자·가해자 학부모 중 먼저 입장을 선택하도록 해 상황에 맞는 안내만 보이게 했습니다.
처음 방문한 사용자가 어디부터 읽어야 할지 고민하지 않고 바로 필요한 정보로 들어갈 수 있습니다.
02

단계별 진행 절차

상담 신청부터 사건 분석·전략, 학교·심의위 대응, 결과 이후 관리까지 네 단계를 번호와 사진으로 정리했습니다.
사건이 어떤 순서로 진행되는지 한눈에 이해할 수 있습니다.
03

비밀 보장 중심의 상담 동선

상담 내용은 상담 변호사만 확인한다는 메시지와 함께 입장·사건유형·진행상황을 고르는 접수 폼을 구성했습니다.
전화·카카오톡 상담까지 같은 흐름에서 선택할 수 있어 부담 없이 문의할 수 있습니다.

Responsive

디바이스 대응

PC · 태블릿 · 모바일 전 환경에서 정보의 순서와 사용성이 동일하게 유지되도록 반응형으로 설계했습니다.

Desktop
1920 × 1080
데스크톱
Tablet
768 × 1024
태블릿
Mobile
375 × 812
모바일

Design System

컬러 팔레트와 타이포그래피를 시스템으로 정의해 화면 전반에 일관된 규칙을 적용했습니다.

Colors

Main Color#0071E3

Sub Color#2EA7E0

Point Color#F39800
Ink Black#1D1D1F
Warm Gray#6E6E73
Soft Gray#F5F5F7
Deep Navy#071021
White#FFFFFF

Typography

Aa 가나다 Pretendard

가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789

Weight

가나다 Aa
가나다 Aa

Regular · Bold

Main Page

메인 페이지

첫 화면에서 브랜드와 핵심 서비스를 먼저 보여주고,
스크롤 흐름에 따라 필요한 정보로 자연스럽게 이어지도록 구성했습니다.

www.example.com

스크롤하여 전체 보기 ↓

Sub Page

서브 페이지

주요 서브 페이지를 같은 규칙으로 설계했습니다.

02 Pages

아이와 가족을 지키는 학교폭력 대응 법률 웹사이트 서브 페이지 1 — Sub Page 학교폭력 칼럼 목록 페이지 01

아이와 가족을 지키는 학교폭력 대응 법률 웹사이트 서브 페이지 2 — Sub Page 칼럼 상세 페이지 02

Note

메인과 칼럼 페이지가 같은 색과 서체 규칙 안에서 이어지도록 설계했습니다.

메인 랜딩과 칼럼 목록·상세 페이지가 같은 헤더와 푸터, 블루 포인트 컬러를 공유합니다. 칼럼은 상단 배너 아래 카드 목록과 본문 읽기 화면으로 나누어 정보 탐색과 상담 전환이 자연스럽게 이어지도록 했습니다.

Grid: 섹션마다 중앙 정렬된 콘텐츠 폭 안에서 카드와 번호형 목록을 일정한 간격으로 배열했습니다.
Header: 서비스 소개·진행 절차·변호사 소개·FAQ·칼럼 메뉴와 비밀상담 버튼을 상단에 두었습니다.
CTA: 전화상담과 카카오톡 상담, 비밀상담 신청 버튼을 화면 곳곳에 배치해 언제든 문의할 수 있게 했습니다.

Mobile

모바일 환경에서 자주 쓰는 기능을 손이 닿는 곳에 배치했습니다.

Bottom Bar

하단 고정 바전화·상담 접수 메뉴를 화면 하단에 상시 노출

플로팅 버튼카카오톡 상담·전화·맨 위로 이동 버튼을 우측에 고정

Optimization

Menu

PC상단 가로 메뉴와 비밀상담 버튼으로 주요 섹션과 칼럼에 바로 이동

MO모바일 전용 메뉴로 전환하고 하단 고정 바로 상담 접수 유지
Layout

PC넓은 화면에서 입장 선택 카드와 절차 사진을 좌우로 배치

MO세로 한 단으로 쌓아 카드와 절차를 위에서 아래로 읽도록 재배치
Typography

PC큰 제목과 본문 위계를 두고 Pretendard 서체로 가독성 확보

MO화면 너비에 맞춰 글자 크기를 줄이고 줄바꿈을 조정해 가독성 유지
Image

PC사진 배경과 아이콘으로 각 섹션의 분위기를 구분

MO배경 사진과 변호사 이미지를 모바일 비율에 맞게 조정