학교폭력 상담 신청을 쉽게 연결하는 법무법인 랜딩페이지
상단 상담 신청 폼 → 실시간 상담 현황 → 학교폭력 유형 4가지 → 오늘학교와 테헤란의 협업 소개 → 전문가 라인업 → 365일 상담 안내 → 오시는 길·방문상담 예약 → 단계별 상담 신청 순서로 구성했습니다.
밝은 블루와 옐로 그라데이션, 친근한 아이콘과 교실 사진으로 무거운 법률 상담의 부담을 낮추고, 첫 화면부터 입장·나이·연락처만 남기면 되도록 신청 동선을 짧게 설계했습니다.
Design Concept
무겁지 않게, 상담은 바로
학교폭력 앞에서 막막한 학생과 학부모가 가장 먼저 찾는 것은 믿을 수 있는 상담 창구입니다.
그래서 상담 신청을 첫 화면에 두고, 이어지는 섹션에서 상황별 안내와 전문가 신뢰 요소를 차례로 보여 주도록 구성했습니다.
법률 사이트의 딱딱함을 덜기 위해 밝은 색감과 부드러운 일러스트·사진 톤을 사용했습니다.
Design Elements
-
01
첫 화면 상담 신청 폼
입장·나이·휴대폰 번호만 입력하면 되는 폼을
히어로 바로 아래에 두어 신청 단계를 줄였습니다. -
02
학교폭력 유형 카드
피해·가해·형사·쌍방 네 가지 상황을 사진 카드로 나눠
방문자가 자기 상황을 쉽게 찾도록 했습니다. -
03
신뢰를 주는 전문가 구성
교육청 출신 변호사, 400명의 전문가, 24시간 상담센터를 카드로 정리하고
전문가 인물 사진 열로 규모감을 보여 줍니다.
Responsive
디바이스 대응
PC · 태블릿 · 모바일 전 환경에서 정보의 순서와 사용성이 동일하게 유지되도록 반응형으로 설계했습니다.
Desktop
1920 × 1080
데스크톱
Tablet
768 × 1024
태블릿
Mobile
375 × 812
모바일
Design System
컬러 팔레트와 타이포그래피를 시스템으로 정의해 화면 전반에 일관된 규칙을 적용했습니다.
Colors
- Point Color#1F5BD8
- Sky#DCEBFF
- Charcoal#222222
- White#FFFFFF
Typography
Aa 가나다 Pretendard
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Main Page
메인 페이지
첫 화면에서 브랜드와 핵심 서비스를 먼저 보여주고,
스크롤 흐름에 따라 필요한 정보로 자연스럽게 이어지도록 구성했습니다.
스크롤하여 전체 보기 ↓
Mobile
모바일 환경에서 자주 쓰는 기능을 손이 닿는 곳에 배치했습니다.
Bottom Bar
Optimization
-
Menu
PC상단 고정 상담 버튼
MO상단 로고 + 상담 버튼
-
Layout
PC가로 4열 카드
MO세로 1열 카드
-
Typography
PC큰 제목 + 중간 본문
MO제목 크기 축소, 줄바꿈 최적화
-
Image
PC와이드 사진·배경 그라데이션
MO화면 폭에 맞춘 사진 크롭
이런 홈페이지, 우리 법무법인도 가능할까요?
변호사 · 법무법인 홈페이지만 100개 이상. AI 검색 노출 설계까지 기본으로 넣어 드립니다.
