가장 어두운 순간 다시 떠오르는 전담센터형 법률 웹사이트
Design Concept
어둠 뒤에 떠오르는 신뢰
채무와 분쟁 앞에서 막막함을 느끼는 의뢰인이 가장 먼저 만나는 화면이 위로와 신뢰를 함께 주도록 설계하는 것에서 출발했습니다.
짙은 딥 그린을 바탕으로 골드 포인트와 아이보리 톤을 더하고, “다시 떠오르는 해”라는 메시지를 메인 비주얼의 흐름으로 이어 어두운 순간 뒤에 희망이 오는 이미지를 담았습니다.
또한 송무, 개인회생·파산, 학교분쟁 세 전담센터를 같은 구조로 정리하고 센터별 성공사례와 상담 신청까지 한 흐름으로 연결해, 사용자가 자신의 사건에 맞는 정보를 빠르게 찾을 수 있도록 했습니다.
Design Elements
-
01
세 전담센터 중심의 정보 구조
송무·개인회생파산·학교분쟁을 별도 센터로 나눠 메뉴와 본문에서 같은 순서로 안내했습니다.
사용자가 자신의 상황에 맞는 센터를 바로 찾아 들어갈 수 있도록 했습니다. -
02
판결문 기반 성공사례 목록
분야별 판결문과 사례를 제목, 요약, 자세히 보기 순으로 반복 구성해 한눈에 훑어볼 수 있게 했습니다.
실제 결과를 먼저 확인한 뒤 상담으로 이어지도록 했습니다. -
03
다섯 가지 신뢰 근거 섹션
전문 분야 등록증서와 함께 전담센터 운영, 전문변호사 직접 담당 등 다섯 가지 이유를 번호로 정리했습니다.
믿어도 되는 이유를 짧은 문장으로 확인할 수 있도록 했습니다.
Responsive
디바이스 대응
PC · 태블릿 · 모바일 전 환경에서 정보의 순서와 사용성이 동일하게 유지되도록 반응형으로 설계했습니다.
Desktop
1920 × 1080
데스크톱
Tablet
768 × 1024
태블릿
Mobile
375 × 812
모바일
Design System
컬러 팔레트와 타이포그래피를 시스템으로 정의해 화면 전반에 일관된 규칙을 적용했습니다.
Colors
- Point Color#D1A765
- Deep Forest#07261F
- Pine Green#0A2D22
- Moss Green#446158
- Warm Ivory#EEEAE7
- Sunrise Gold#D1A765
- Cocoa Brown#3C3229
- White#FFFFFF
Typography
Aa 가나다 Pretendard
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Aa 가나다 KoPub Batang
가나다라마바사아자차카타파하
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
PC명조 계열 제목과 Pretendard 본문으로 신뢰감 있는 위계 구성
MO제목 크기와 줄 길이를 줄여 작은 화면에서도 문장이 끊기지 않도록 조정
-
Image
PC딥 그린 배경과 풀 와이드 이미지로 메인 메시지의 분위기 강조
MO이미지를 화면 폭에 맞춰 재배치하고 텍스트 가독성을 우선 확보
