법원 앞에서 끝까지 함께하는 상주 변호사 법률 랜딩페이지
메인 화면에서 “서울동부법조타운에 상주하는 변호사가 처음부터 끝까지 함께합니다”라는 메시지로 시작해 맞춤형 법률서비스 → 구성원 소개 → 성공사례 → 오시는 길과 상담 신청까지 한 화면 흐름으로 이어지도록 구성했습니다.
특히 서울동부지방법원·검찰청·구치소 앞이라는 위치 강점을 지도와 사무소 탭으로 정리하고, 딥 그린과 골드 포인트 컬러, 두꺼운 고딕 타이포로 차분하면서도 신뢰감 있는 분위기를 완성했습니다.
Design Concept
가까이 있어야, 빨라집니다
서울동부지방법원·검찰청·구치소 바로 앞이라는 서울사무소의 위치를 의뢰인이 가장 빠르게 이해하도록 디자인의 출발점으로 삼았습니다.
딥 그린 배경에 골드 하이라이트를 더해 절제된 신뢰감을 만들고, 핵심 문구의 일부에만 형광펜처럼 골드 밑줄이 그려지도록 해 시선이 자연스럽게 따라가도록 했습니다.
또한 상주 변호사가 직접 상담하고 처리한다는 메시지를 서비스 4가지, 구성원 5인, 성공사례, 오시는 길로 이어 한 번의 스크롤 안에서 상담 신청까지 도달하도록 설계했습니다.
Design Elements
-
01
상주 변호사 중심의 히어로
흰 바탕에서 법원 사진이 서서히 드러나는 히어로 화면으로
서울사무소의 위치와 상주 메시지를 첫 화면에서 바로 전달합니다. -
02
다섯 변호사 구성원 카드
딥 그린 배경 위에 구성원 카드를 나란히 배치해
형사·이혼·민사 전문성을 갖춘 변호인단을 한눈에 확인하도록 했습니다. -
03
사무소 탭 지도와 상담 폼
서울·동탄 사무소를 탭으로 전환하며 지도와 연락처를 보여주고
방문 희망 사무소와 자가 진단까지 2단계 폼으로 이어지게 했습니다.
Responsive
디바이스 대응
PC · 태블릿 · 모바일 전 환경에서 정보의 순서와 사용성이 동일하게 유지되도록 반응형으로 설계했습니다.
Desktop
1920 × 1080
데스크톱
Tablet
768 × 1024
태블릿
Mobile
375 × 812
모바일
Design System
컬러 팔레트와 타이포그래피를 시스템으로 정의해 화면 전반에 일관된 규칙을 적용했습니다.
Colors
- Point Color#C9A96A
- Dark Green#0C3736
- Deep Forest#0D322F
- Warm Tan#BDA485
- Accent Green#1F7A5C
- Ink#142927
- Warm Gray#CECDCC
- White#FFFFFF
Typography
Aa 가나다 Pretendard
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Main Page
메인 페이지
첫 화면에서 브랜드와 핵심 서비스를 먼저 보여주고,
스크롤 흐름에 따라 필요한 정보로 자연스럽게 이어지도록 구성했습니다.
스크롤하여 전체 보기 ↓
Mobile
모바일 환경에서 자주 쓰는 기능을 손이 닿는 곳에 배치했습니다.
Bottom Bar
Optimization
-
Menu
PC상단 고정 헤더에 4개 메뉴와 대표번호를 가로로 배치
MO햄버거 버튼으로 열리는 드로어 메뉴와 전화 버튼
-
Layout
PC서비스 4열, 구성원 5열 가로 그리드와 좌우 분할 상담 영역
MO서비스 카드 2열, 지도와 상담 폼은 세로로 쌓아 정리
-
Typography
PC큰 제목과 짧은 설명으로 위계를 나눈 두꺼운 고딕 타이포
MO제목과 본문 크기를 줄이고 줄바꿈을 조정해 가독성 유지
-
Image
PC법원 배경 히어로와 구성원 인물 사진을 크게 사용
MO이미지는 비율을 유지한 채 카드 폭에 맞춰 축소
이런 홈페이지, 우리 법무법인도 가능할까요?
변호사 · 법무법인 홈페이지만 100개 이상. AI 검색 노출 설계까지 기본으로 넣어 드립니다.
