사건의 시작부터 결과까지 책임지는 법률 웹사이트
Design Concept
전문성과 책임감을 하나의 경험으로
법률 서비스를 선택하는 사용자가 중요하게 생각하는 전문성, 책임감, 실제 결과를 중심으로 전체 화면을 구성했습니다.
다크 네이비와 블루 계열의 컬러를 기반으로 신뢰감과 전문성을 표현하고, 대표변호사와 분야별 서비스, 사건 처리 프로세스, 성공사례를 순차적으로 배치해 법무법인 대온의 업무 방식을 자연스럽게 이해할 수 있도록 설계했습니다.
특히 단순히 “잘하는 법무법인”이라고 말하기보다, 누가 담당하는지 → 어떻게 대응하는지 → 어떤 결과를 만들어냈는지를 단계적으로 보여주는 구조에 집중했습니다.
Design Elements
-
01
끝까지 함께하는 책임감
메인 카피부터 사건 처리 프로세스까지 “사건을 맡은 이후 끝까지 함께한다”는 브랜드 메시지가 일관되게 전달되도록 구성했습니다.
단순 상담이 아니라 사건 전 과정을 책임지는 파트너라는 인상을 형성하는 데 집중했습니다. -
02
분야별 전문성을 명확하게
형사, 민사, 이혼·상속, 기업법무 등 주요 업무 분야를 독립적인 카드 구조로 구분해 사용자가 자신의 상황에 맞는 법률 서비스를 쉽게 찾을 수 있도록 했습니다.
각 분야는 시각적으로 구분하면서도 동일한 디자인 규칙을 적용해 전체 사이트의 통일감을 유지했습니다. -
03
결과와 후기로 증명하는 신뢰
실제 성공사례와 의뢰인 후기를 후반부에 배치해 전문성을 구체적인 결과로 보여주었습니다.
전문성 → 대응 과정 → 성공사례 → 후기로 이어지는 흐름을 통해 법률 서비스 선택에 필요한 신뢰를 단계적으로 형성하도록 설계했습니다.
Responsive
디바이스 대응
PC · 태블릿 · 모바일 전 환경에서 정보의 순서와 사용성이 동일하게 유지되도록 반응형으로 설계했습니다.
Desktop
1920 × 1080
데스크톱
Tablet
768 × 1024
태블릿
Mobile
375 × 812
모바일
Design System
컬러 팔레트와 타이포그래피를 시스템으로 정의해 화면 전반에 일관된 규칙을 적용했습니다.
Colors
- Point Color#394FC0
- Deep Navy#14253A
- Royal Blue#394FC0
- Soft Blue Gray#F2F5F9
- Charcoal#292929
- White#FFFFFF
Typography
Aa 가나다 Pretendard
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Aa 가나다 Gilroy
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Main Page
메인 페이지
첫 화면에서 브랜드와 핵심 서비스를 먼저 보여주고,
스크롤 흐름에 따라 필요한 정보로 자연스럽게 이어지도록 구성했습니다.
스크롤하여 전체 보기 ↓
Sub Page
서브 페이지
주요 서브 페이지를 같은 규칙으로 설계했습니다.
02 Pages
Note
업무분야와 사건 정보를 동일한 구조 안에서 일관되게 확장할 수 있도록 설계했습니다.
형사, 민사, 이혼·상속, 기업법무 등 각 업무분야는 콘텐츠 성격이 다르지만 동일한 그리드와 정보 구조를 적용해 전체 사이트의 통일성을 유지했습니다.
각 서브페이지는 공통 비주얼 → 분야 소개 → 주요 쟁점 → 대응 방향 → 관련 사례 → 상담 CTA의 흐름으로 구성해 사용자가 어느 페이지에서도 익숙한 방식으로 정보를 탐색할 수 있도록 설계했습니다.
- Grid
- 1200px 기준 12컬럼 그리드를 적용해 업무분야, 사례, 변호사 정보 등 다양한 콘텐츠를 안정적으로 확장할 수 있도록 구성했습니다.
- Header
- 각 서브페이지에 동일한 헤더 구조와 비주얼 규칙을 적용하고, 분야별 제목과 이미지만 변경해 브랜드 일관성과 각 업무분야의 개성을 함께 유지했습니다.
- CTA
- 업무분야와 사례를 충분히 확인한 사용자가 별도의 탐색 없이 바로 상담을 신청할 수 있도록 모든 주요 서브페이지 하단에 공통 상담 영역을 배치했습니다.
Mobile
모바일 환경에서 자주 쓰는 기능을 손이 닿는 곳에 배치했습니다.
Bottom Bar
Optimization
-
Menu
PC대표변호사, 업무분야, 사례, 상담 등 전체 콘텐츠를 구조적으로 탐색
MO업무분야와 상담 중심으로 핵심 메뉴를 간결하게 구성
-
Layout
PC변호사 소개, 분야별 서비스, 프로세스, 사례를 넓은 화면에 구조적으로 배치
MO핵심 정보 우선순위에 따라 세로 흐름으로 재구성해 빠른 탐색 지원
-
Typography
PC강한 헤드라인과 명확한 정보 위계로 전문성과 신뢰감 강조
MO작은 화면에서도 사건 정보와 법률 콘텐츠를 빠르게 읽을 수 있도록 크기와 행간 최적화
-
Image
PC대표변호사와 법률 공간 이미지를 활용해 브랜드 신뢰도를 강화
MO핵심 인물과 메시지 중심으로 이미지 비율과 노출 영역을 최적화
Thanks for
Watching!
