누구나 쉽게 시작하는 99LAW 법률서비스 웹사이트
메인 화면은 “누구나 쉽게 법률 서비스를 이용할 수 있도록” 메시지 → 상황별 고민 → 99내용증명 진행 단계 → 서비스 소개 → 해결 사례 → 언론 보도 → 상담 안내 순서로 구성했습니다.
특히 서비스를 99내용증명, 99고소장, 99명도소송 등 8개 브랜드로 나눠 보여주고, 블랙 배경과 레드·블루 조명 이미지로 강렬하고 신뢰감 있는 분위기를 완성했습니다.
Design Concept
법률의 첫걸음을 쉽게
법률 문제를 처음 겪는 방문자가 어떤 절차부터 해야 할지 막막해한다는 점을 디자인의 출발점으로 삼았습니다.
블랙 배경에 레드·블루 조명 이미지와 굵은 99LAW 문구를 사용해 강한 첫인상을 만들고, 이어지는 화면에서는 “이럴 땐 어떻게 해야 하지?” 같은 일상의 질문으로 방문자의 상황에 말을 걸도록 했습니다.
서비스마다 같은 카드 형식으로 한 줄 설명과 자세히 보기를 붙여 8개 법률 서비스를 비교하며 고를 수 있도록 설계했습니다.
Design Elements
-
01
블랙과 레드·블루 조명 히어로
어두운 배경 위에 붉은색과 푸른색 조명 이미지를 겹치고 서비스명을 크게 노출했습니다.
첫 화면에서 브랜드와 대표 서비스가 강하게 각인됩니다. -
02
상황 질문과 진행 단계 구성
보증금, 대여금, 협박 같은 대표 고민을 질문으로 보여주고 99내용증명의 진행 단계를 번호로 정리했습니다.
방문자가 자신의 상황에서 무엇을 하면 되는지 바로 이해할 수 있습니다. -
03
8개 서비스 브랜드 카드
99내용증명부터 99합의서까지 서비스명과 한 줄 설명을 같은 카드 형식으로 정리했습니다.
필요한 서비스를 비교하고 상세 페이지로 이동하기 쉽습니다.
Responsive
디바이스 대응
PC · 태블릿 · 모바일 전 환경에서 정보의 순서와 사용성이 동일하게 유지되도록 반응형으로 설계했습니다.
Desktop
1920 × 1080
데스크톱
Tablet
768 × 1024
태블릿
Mobile
375 × 812
모바일
Design System
컬러 팔레트와 타이포그래피를 시스템으로 정의해 화면 전반에 일관된 규칙을 적용했습니다.
Colors
- Point Color#CB4B40
- Charcoal#212121
- Deep Red#B4342D
- Warm Gray#999999
- Light Gray#F5F5F5
- Talk Green#00D255
- White#FFFFFF
Typography
Aa 가나다 Pretendard
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Aa 가나다 Poppins
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Main Page
메인 페이지
첫 화면에서 브랜드와 핵심 서비스를 먼저 보여주고,
스크롤 흐름에 따라 필요한 정보로 자연스럽게 이어지도록 구성했습니다.
스크롤하여 전체 보기 ↓
Sub Page
서브 페이지
주요 서브 페이지를 같은 규칙으로 설계했습니다.
02 Pages
Note
새 서비스가 추가되어도 같은 규칙으로 확장할 수 있도록 설계했습니다.
법률서비스 메뉴 아래 서비스별 페이지를 두고, 변호사 소개·성공사례·언론보도·정보센터를 같은 헤더와 푸터 안에서 연결했습니다.
서비스 페이지는 공통된 문구 구조와 상담 안내를 따릅니다.
- Grid
- 서비스 카드를 균일한 간격의 격자로 배열해 비교하기 쉽게 했습니다.
- Header
- 로고와 소개·법률서비스·성공사례 메뉴, 상담신청 버튼을 상단에 두었습니다.
- CTA
- 전화, 카카오톡, 네이버 톡톡 상담을 한곳에 모아 안내했습니다.
Mobile
모바일 환경에서 자주 쓰는 기능을 손이 닿는 곳에 배치했습니다.
Bottom Bar
Optimization
-
Menu
PC상단 가로 메뉴와 상담신청 버튼
MO햄버거 메뉴와 카톡 아이콘으로 최적화
-
Layout
PC넓은 화면의 섹션별 가로 배치
MO서비스 카드를 한 열로 쌓은 구성
-
Typography
PCPretendard 기반의 큰 굵은 제목
MO제목 크기를 줄이고 줄바꿈을 정리
-
Image
PC전체 폭 조명 이미지와 흐르는 문구 띠
MO세로 화면에 맞춰 조명 이미지와 문구 띠 축소
이런 홈페이지, 우리 법무법인도 가능할까요?
변호사 · 법무법인 홈페이지만 100개 이상. AI 검색 노출 설계까지 기본으로 넣어 드립니다.
