대표변호사의 전문성을 중심으로 설계한 법률 웹사이트

이로움 법률사무소의 대표변호사 이성숙을 중심으로, 전문성과 신뢰를 명확하게 전달하기 위해 구축한 공식 웹사이트입니다. 첫 화면에서 법률사무소의 핵심 메시지를 강하게 전달한 뒤, 대표변호사 소개와 주요 경력, 업무 분야, 등록증 및 위촉장, 상담 영역까지 순차적으로 배치해 사용자가 자연스럽게 신뢰를 형성할 수 있도록 구성했습니다. 특히 이혼·가사, 형사소송, 회생·파산, 민사소송 등 주요 업무분야를 카드형 UI로 구분하고, 블루 계열의 컬러를 중심으로 전문성과 안정감을 강조했습니다.

#이로움법률사무소
#이성숙변호사
#변호사홈페이지
#법률웹사이트
#전문변호사
#반응형웹
#UIUX
#웹디자인

Client: 이로움 법률사무소
Category: 법무법인

Design Concept

전문성을 사람으로 보여주는 법률 경험

법률 서비스를 선택하는 과정에서 사용자가 가장 중요하게 보는 요소인 변호사의 전문성과 신뢰를 중심으로 화면을 설계했습니다.
대표변호사의 사진과 메시지를 핵심 영역에 배치하고, 경력과 전문 분야, 자격 및 위촉 이력 등 객관적인 정보를 단계적으로 보여주어 신뢰가 자연스럽게 형성되도록 구성했습니다.
블루와 네이비 계열의 컬러를 중심으로 전문성과 안정감을 표현하고, 밝은 배경과 충분한 여백을 활용해 무겁고 딱딱한 법률 사이트의 인상을 줄였습니다.

Design Elements

01

사람을 중심으로 형성하는 신뢰

대표변호사의 메시지와 인물 이미지를 전면에 배치해 법률사무소보다 먼저 누가 사건을 담당하는지를 명확하게 보여주었습니다.
전문성을 추상적인 문구가 아닌 경력과 이력을 통해 구체적으로 전달했습니다.
02

분야별 전문성을 명확하게

이혼·가사, 형사소송, 회생·파산, 민사소송 등 주요 업무분야를 카드형 UI로 구분해 사용자가 자신의 상황에 맞는 분야를 빠르게 확인할 수 있도록 설계했습니다.
각 분야는 독립적으로 보이면서도 동일한 디자인 구조를 적용해 전체적인 일관성을 유지했습니다.
03

자격과 경력으로 증명하는 전문성

전문분야 등록증, 위촉장 등 객관적인 자료를 별도의 콘텐츠 영역으로 구성해 신뢰를 강화했습니다.
단순한 홍보 문구보다 실제 자격과 경력을 보여줌으로써 전문성을 시각적으로 증명하는 구조를 적용했습니다.

Responsive

디바이스 대응

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

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

Design System

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

Colors

Main Color#0E1726

Sub Color#1673B8

Point Color#EAF4FA
Deep Navy#0E1726
Royal Blue#1673B8
Soft Blue#EAF4FA
Light Gray#F5F6F7

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인물과 핵심 메시지에 집중할 수 있도록 이미지 비율과 노출 영역 최적화