학교폭력 피해·가해 변호사 상담 안내 홈페이지
첫 화면의 상담 신청 바 → 센터 소개 → 대표 변호사 이력 → 업무분야 → 업무사례 → 변호사칼럼·보도자료 → 유관기관 기록 → 지사 안내 → 고객스토리 → 오시는 길·상담문의 순으로 구성했습니다.
안개 낀 숲 사진과 짙은 녹색·베이지 톤으로 차분한 분위기를 만들어, 민감한 학교폭력 상담도 부담 없이 시작할 수 있도록 설계했습니다.
Design Concept
안식의 숲, 차분한 상담
학교폭력은 당사자와 가족 모두에게 무겁고 조심스러운 주제라서, ‘쉼’을 뜻하는 숲의 이미지를 전면에 두었습니다.
안개가 낀 숲 사진과 낮은 채도의 녹색·베이지 톤으로 불안한 마음을 가라앉히는 분위기를 만들었습니다.
화려한 장식보다 상담 신청과 변호사 신뢰 정보가 먼저 보이도록 구성했습니다.
Design Elements
-
01
첫 화면 상담 신청 바
메인 비주얼 하단에 분야·이름·연락처 입력 바를 두었습니다.
방문 즉시 상담을 신청할 수 있도록 설계했습니다. -
02
유형별 업무분야 안내
학교폭력 피해, 가해, 소년법·촉법소년으로 나누어 카드로 보여 줍니다.
상황에 맞는 분야를 바로 찾을 수 있도록 구성했습니다. -
03
사례·칼럼 중심 콘텐츠
업무사례, 변호사 칼럼, 보도자료, 고객스토리를 섹션별로 배치했습니다.
검색으로 유입된 방문자가 정보를 읽고 상담으로 이어지도록 설계했습니다.
Responsive
디바이스 대응
PC · 태블릿 · 모바일 전 환경에서 정보의 순서와 사용성이 동일하게 유지되도록 반응형으로 설계했습니다.
Desktop
1920 × 1080
데스크톱
Tablet
768 × 1024
태블릿
Mobile
375 × 812
모바일
Design System
컬러 팔레트와 타이포그래피를 시스템으로 정의해 화면 전반에 일관된 규칙을 적용했습니다.
Colors
- Point Color#A9714F
- Beige#E3D5CD
- Ivory#F3F1EE
- White#FFFFFF
Typography
Aa 가나다 Pretendard
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Main Page
메인 페이지
첫 화면에서 브랜드와 핵심 서비스를 먼저 보여주고,
스크롤 흐름에 따라 필요한 정보로 자연스럽게 이어지도록 구성했습니다.
스크롤하여 전체 보기 ↓
Mobile
모바일 환경에서 자주 쓰는 기능을 손이 닿는 곳에 배치했습니다.
Bottom Bar
Optimization
-
Menu
PCMenu · 상단 로고와 상담 버튼
MOMenu · 햄버거 메뉴로 정리
-
Layout
PCLayout · 3단 카드·가로 슬라이드
MOLayout · 1단 세로 배치
-
Typography
PCTypography · 섹션 제목을 크게 강조
MOTypography · 본문 크기를 조정해 가독성 확보
-
Image
PCImage · 와이드 숲 풍경 비주얼
MOImage · 화면 비율에 맞춰 크롭
이런 홈페이지, 우리 법무법인도 가능할까요?
변호사 · 법무법인 홈페이지만 100개 이상. AI 검색 노출 설계까지 기본으로 넣어 드립니다.
