해결 경험과 신뢰를 중심으로 설계한 법률 웹사이트

법무법인 원결의 구성원과 전문 분야, 사건 해결 경험을 효과적으로 전달하기 위해 구축한 공식 웹사이트입니다. 첫 화면에서 브랜드의 핵심 메시지를 전달한 뒤, 원결을 선택하는 이유 → 변호사 구성원 → 전문 분야 → 해결사례 → 언론 및 스토리 → 위치 안내 → 상담 신청으로 이어지는 흐름을 구성했습니다. 특히 법률 서비스에서 중요한 전문성과 신뢰를 단순한 소개 문구보다 구성원, 사건 결과, 실제 콘텐츠와 경험을 통해 보여주도록 설계했으며, 네이비와 골드 계열의 색상을 활용해 안정감과 무게감을 표현했습니다.

#법무법인원결
#법무법인
#법률웹사이트
#변호사홈페이지
#형사전문
#기업법무
#반응형웹
#UIUX

Client: 법무법인 원결
Category: 법무법인

Design Concept

해결 경험으로 완성하는 신뢰

법률 서비스를 선택하는 사용자가 가장 중요하게 보는 전문성, 경험, 실제 결과를 중심으로 전체 화면을 구성했습니다.
다크 네이비 계열의 메인 비주얼과 골드 포인트를 활용해 법률 브랜드의 신뢰와 무게감을 표현하고, 이후 밝은 콘텐츠 영역으로 전환해 변호사와 업무분야, 해결사례를 편안하게 탐색할 수 있도록 설계했습니다.
또한 단순한 홍보 문구보다 구성원 → 전문 분야 → 해결사례 → 언론 콘텐츠의 순서로 구체적인 근거를 제시해 사용자가 자연스럽게 원결의 전문성을 이해할 수 있도록 구성했습니다.

Design Elements

01

구성원을 중심으로 만드는 신뢰

담당 변호사의 사진과 이름, 역할을 명확하게 보여줘 법률사무소라는 조직보다 먼저 누가 사건을 담당하는지를 확인할 수 있도록 구성했습니다.
인물 중심의 콘텐츠를 통해 서비스의 신뢰도를 보다 직접적으로 전달했습니다.
02

분야별 경험을 명확하게

형사, 가사, 민사, 노동, 기업 등 주요 업무분야를 카드형 콘텐츠로 구분해 사용자가 자신의 상황과 관련된 서비스를 쉽게 찾을 수 있도록 했습니다.
각 분야의 차이를 명확하게 보여주면서도 동일한 디자인 규칙을 적용해 사이트 전체의 일관성을 유지했습니다.
03

해결사례로 증명하는 전문성

대표 성공사례와 실제 해결 내용을 별도의 콘텐츠 영역으로 구성해 원결의 업무 역량을 결과 중심으로 보여주었습니다.
단순한 전문성 강조보다 실제 사건과 해결 경험을 근거로 신뢰를 형성하는 구조에 집중했습니다.

Responsive

디바이스 대응

PC · 태블릿 · 모바일 전 환경에서 정보의 순서와 사용성이 동일하게 유지되도록 반응형으로 설계했습니다.

Desktop
1920 × 1080
데스크톱
Tablet
768 × 1024
태블릿
Mobile
375 × 812
모바일

Design System

컬러 팔레트와 타이포그래피를 시스템으로 정의해 화면 전반에 일관된 규칙을 적용했습니다.

Colors

Main Color#162033

Sub Color#F4F4F2

Point Color#C4A15A
Deep Navy#162033
Charcoal#292929
Warm Gray#F4F4F2
Gold#C4A15A

Typography

Aa 가나다 Pretendard

가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789

Weight

가나다 Aa
가나다 Aa

Regular · Bold

Aa 가나다 Gilroy

가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789

Weight

가나다 Aa
가나다 Aa

Regular · Bold

Main Page

메인 페이지

첫 화면에서 브랜드와 핵심 서비스를 먼저 보여주고,
스크롤 흐름에 따라 필요한 정보로 자연스럽게 이어지도록 구성했습니다.

www.example.com

스크롤하여 전체 보기 ↓

Sub Page

서브 페이지

주요 서브 페이지를 같은 규칙으로 설계했습니다.

02 Pages

해결 경험과 신뢰를 중심으로 설계한 법률 웹사이트 서브 페이지 1 — Sub Page 법무법인 소개 페이지 01

해결 경험과 신뢰를 중심으로 설계한 법률 웹사이트 서브 페이지 2 — Sub Page 업무분야 페이지 02

Note

구성원·업무분야·사례 콘텐츠를 동일한 구조 안에서 확장할 수 있도록 설계했습니다.

변호사 소개, 업무분야, 사건사례, 언론 콘텐츠 등 각 서브페이지의 성격은 다르지만 공통된 그리드와 정보 위계를 적용해 브랜드 일관성을 유지했습니다.
각 페이지는 공통 비주얼 → 핵심 메시지 → 상세 정보 → 관련 콘텐츠 → 상담 CTA의 흐름을 기본으로 사용해 사용자가 어느 페이지에서도 익숙한 방식으로 정보를 탐색할 수 있도록 구성했습니다.

Grid: 1200px 기준 12컬럼 그리드를 적용해 인물, 사례, 분야별 콘텐츠를 다양한 레이아웃으로 안정적으로 확장할 수 있도록 설계했습니다.
Header: 각 서브페이지에 동일한 헤더 구조와 비주얼 규칙을 적용하고, 페이지별 제목과 배경 이미지만 변경해 통일성과 개별성을 함께 확보했습니다.
CTA: 업무분야와 사례를 충분히 확인한 사용자가 별도의 탐색 없이 바로 상담을 신청할 수 있도록 모든 주요 서브페이지 하단에 공통 상담 영역을 배치했습니다.

Mobile

모바일 환경에서 자주 쓰는 기능을 손이 닿는 곳에 배치했습니다.

Bottom Bar

하단 고정 바전화 · 상담 · 오시는 길 등 주요 기능 상시 노출

퀵 메뉴변호사, 업무분야, 상담 메뉴에 빠르게 접근

Optimization

Menu

PC구성원, 업무분야, 사례, 언론 등 전체 콘텐츠를 구조적으로 탐색

MO업무분야와 상담 중심으로 핵심 메뉴를 간결하게 구성
Layout

PC변호사, 전문 분야, 해결사례 등 다양한 콘텐츠를 넓은 화면에 구조적으로 배치

MO정보 우선순위에 따라 세로 흐름으로 재구성해 빠른 탐색 지원
Typography

PC강한 헤드라인과 명확한 정보 위계로 전문성과 무게감 강조

MO사건 정보와 법률 콘텐츠가 작은 화면에서도 쉽게 읽히도록 크기와 행간 최적화
Image

PC도시, 변호사, 사건 관련 이미지를 활용해 전문성과 신뢰도를 강조

MO핵심 인물과 메시지에 집중할 수 있도록 이미지 비율과 크롭 최적화