기준을 세우고 원칙으로 대응하는 로펌 웹사이트
메인 화면에서 “복잡한 법률 문제 명쾌한 답변으로 해결합니다”라는 메시지로 시작해 선택 이유(Why DOOYUL) → 분야별 안내 → 두율 인사이트 → 소식·공지 → 상담예약 순으로 구성했습니다.
특히 노동·산재·기업, 개인정보·인공지능, 이혼·상속, 행정·형사의 네 분야를 같은 구조로 나눠 안내하고, 인사이트를 분야 탭으로 걸러 볼 수 있도록 했으며, 브라운 골드 컬러와 명조 계열 서체로 차분하고 단정한 분위기를 완성했습니다.
Design Concept
원칙 위에 세운 단단한 기준
법률 서비스를 ‘빠른 해결’이 아닌 책임 있는 판단의 과정으로 본다는 두율의 태도를 디자인의 출발점으로 삼았습니다.
브라운 골드 계열의 절제된 색과 명조 계열 서체를 중심으로 장식을 덜어내고, 큰 제목과 충분한 여백으로 기준과 원칙을 앞세우는 인상을 만들었습니다.
또한 실무 중심의 대응, 정직한 설명과 투명한 절차, 인권과 사회적 책임, 사람 중심 상담의 네 가지 선택 이유를 같은 형식으로 정리해 사용자가 두율의 일하는 방식을 순서대로 이해하도록 설계했습니다.
Design Elements
-
01
네 가지 선택 이유의 구조화
법무법인을 선택하는 이유를 네 개의 항목으로 나눠 같은 형식으로 보여줬습니다.
각 항목이 한눈에 비교되어 두율의 대응 방식이 빠르게 읽힙니다. -
02
분야 탭으로 거르는 인사이트
인사이트 글이 늘어나도 노동·산재·기업, 개인정보·인공지능, 이혼·상속, 행정·형사 탭으로 나눠 볼 수 있게 했습니다.
방문자가 자신의 문제와 맞는 글만 바로 찾을 수 있습니다. -
03
원칙 중심의 타이포그래피
명조 계열 서체와 영문 소제목을 함께 써서 법률 사이트의 격식과 읽기 편한 흐름을 맞췄습니다.
긴 설명도 짧은 줄 단위로 끊어 차분하게 읽히도록 했습니다.
Responsive
디바이스 대응
PC · 태블릿 · 모바일 전 환경에서 정보의 순서와 사용성이 동일하게 유지되도록 반응형으로 설계했습니다.
Desktop
1920 × 1080
데스크톱
Tablet
768 × 1024
태블릿
Mobile
375 × 812
모바일
Design System
컬러 팔레트와 타이포그래피를 시스템으로 정의해 화면 전반에 일관된 규칙을 적용했습니다.
Colors
- Point Color#AF9273
- Charcoal#1E1E1E
- Warm Gray#7F7F7F
- Light Gray#E6E6E6
- White#FFFFFF
Typography
Aa 가나다 KoPub Batang
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Aa 가나다 Pretendard
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Main Page
메인 페이지
첫 화면에서 브랜드와 핵심 서비스를 먼저 보여주고,
스크롤 흐름에 따라 필요한 정보로 자연스럽게 이어지도록 구성했습니다.
스크롤하여 전체 보기 ↓
Sub Page
서브 페이지
주요 서브 페이지를 같은 규칙으로 설계했습니다.
02 Pages
Note
소개·업무분야 서브 페이지를 같은 문법으로 확장할 수 있도록 설계했습니다.
서브 페이지는 상단 배너 아래에 영문 소제목과 큰 제목, 짧은 설명이 이어지는 규칙으로 통일했습니다. 단계 안내와 분야 소개도 같은 블록 형식을 반복해 내용이 늘어나도 일관성을 유지합니다.
- Grid
- 넓은 여백 안에 영문 소제목, 제목, 설명을 순서대로 배치하는 블록을 반복했습니다.
- Header
- 법인소개·구성원·업무분야·두율소식·두율 인사이트·상담예약 메뉴를 상단에 고정해 어느 화면에서도 이동할 수 있습니다.
- CTA
- 메인 마지막 Contact Us 영역과 메뉴의 상담예약 버튼으로 상담 신청에 연결했습니다.
Mobile
모바일 환경에서 자주 쓰는 기능을 손이 닿는 곳에 배치했습니다.
Bottom Bar
Optimization
-
Menu
PC여섯 개 메뉴를 상단에 한 줄로 노출
MO메뉴 버튼을 누르면 슬라이드 메뉴가 열리는 구조
-
Layout
PC좌우 분할 레이아웃과 넓은 여백
MO한 열로 쌓아 순서대로 읽히는 구성
-
Typography
PC큰 제목과 영문 소제목 중심의 위계
MO제목 크기를 줄이고 줄 간격을 넉넉히 유지
-
Image
PC전체 폭 배경 이미지와 어두운 톤 오버레이
MO배경 이미지를 화면 폭에 맞춰 자르고 글자 가독성 유지
이런 홈페이지, 우리 법무법인도 가능할까요?
변호사 · 법무법인 홈페이지만 100개 이상. AI 검색 노출 설계까지 기본으로 넣어 드립니다.
