피해 회복을 위해 곁을 지키는 민형사 법률 랜딩페이지
메인 화면에서 “피해자도 변호사가 필요합니다”라는 메시지로 시작해 변호사 소개, 업무분야, 업무절차, 유튜브, 상담예약, 오시는 길까지 한 페이지 안에서 이어지도록 구성했습니다.
특히 대한변호사협회 인증 전문분야와 주요경력을 한눈에 정리하고, 딥 그린과 브라운 컬러, 우드 톤의 라인 포인트로 차분하고 믿음직한 분위기를 완성했습니다.
Design Concept
피해자 곁의 든든한 동행
범죄 피해와 금전적 손해를 입고도 어디서부터 대응해야 할지 몰라 막막한 피해자의 입장을 디자인의 출발점으로 삼았습니다.
딥 그린을 바탕으로 우드 브라운과 베이지를 더해 차분하고 절제된 톤을 만들고, “피해자도 변호사가 필요합니다”라는 메시지를 첫 화면의 중심에 두어 사이트의 목적이 바로 전달되도록 했습니다.
또한 변호사 소개에서 업무분야, 업무절차, 상담예약까지 이어지는 흐름을 한 페이지에 정리해, 사용자가 신뢰를 확인한 뒤 자연스럽게 상담 신청으로 이동하도록 설계했습니다.
Design Elements
-
01
메시지 중심의 메인 비주얼
형사고소와 민사소송에 대한 두려움을 한 문장으로 짚고 두 가지 약속을 번호로 정리했습니다.
방문자가 첫 화면에서 어떤 변호사인지 바로 이해하도록 구성했습니다. -
02
전문성을 보여주는 프로필
대한변호사협회 인증 전문분야와 주요경력을 現·前 순서로 나눠 정리했습니다.
여러 기관의 활동 이력을 한 화면에서 확인할 수 있습니다. -
03
카드형 업무분야 그리드
형사와 민사를 아우르는 업무를 키워드 카드로 나눠 배치했습니다.
자신의 사건과 맞는 분야를 한눈에 찾을 수 있도록 했습니다.
Responsive
디바이스 대응
PC · 태블릿 · 모바일 전 환경에서 정보의 순서와 사용성이 동일하게 유지되도록 반응형으로 설계했습니다.
Desktop
1920 × 1080
데스크톱
Tablet
768 × 1024
태블릿
Mobile
375 × 812
모바일
Design System
컬러 팔레트와 타이포그래피를 시스템으로 정의해 화면 전반에 일관된 규칙을 적용했습니다.
Colors
- Point Color#836248
- Deep Green#446158
- Warm Tan#A68164
- Walnut Brown#836248
- Soft Gold#EDC872
- Blush Beige#F2EAE6
- Ink Gray#4C4C4C
- 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업무분야 2열 카드로 재배치
-
Typography
PCPretendard 기반의 큰 타이틀과 본문 위계
MO타이틀과 카드 글자 크기를 줄여 줄바꿈 최적화
-
Image
PC업무절차 PC용 이미지
MO업무절차 모바일 전용 이미지로 교체
이런 홈페이지, 우리 법무법인도 가능할까요?
변호사 · 법무법인 홈페이지만 100개 이상. AI 검색 노출 설계까지 기본으로 넣어 드립니다.
