이혼 상담·자가진단을 안내하는 이혼전문 법무법인 홈페이지
디자인 보드에서는 메인 히어로 → RE:ON 자가진단 → ABOUT RE:ON → 도움 주시는 분들(변호사 소개) → 변호사 상세(경력·학력·업무사례) 순으로 이어지며, 화면 하단에는 1:1 실시간 상담 바가 고정되어 있습니다.
흑백 기반의 절제된 톤에 핑크-퍼플 그라데이션 버튼을 포인트로 써서 세련되고 신뢰감 있는 법률 사이트 분위기를 구성했습니다.
Design Concept
다시 켜는 인생, RE:ON
이혼을 고민하는 방문자에게 '다시 켠다(RE:ON)'는 메시지를 전하며 부담 없는 상담 진입을 유도하는 홈페이지입니다.
전원 버튼 형태의 자가진단 인터랙션으로 첫 접점을 쉽게 만들었습니다.
변호사 소개 섹션을 길게 구성해 상담 전 신뢰를 쌓을 수 있도록 설계했습니다.
Design Elements
-
01
전원 버튼 자가진단
'지금 RE:ON 하시겠습니까?' 문구와 전원 버튼을 함께 배치했습니다.
테스트 참여가 자연스럽게 이어지도록 구성했습니다. -
02
변호사 소개 카드
변호사별 인물 사진과 이름을 카드로 정리했습니다.
상세 페이지에서는 경력·학력·업무사례를 보여줍니다. -
03
실시간 상담 바
1:1 실시간 상담 번호와 연락처 입력을 하단에 고정했습니다.
어느 화면에서도 상담 신청이 가능하도록 설계했습니다.
Responsive
디바이스 대응
PC · 태블릿 · 모바일 전 환경에서 정보의 순서와 사용성이 동일하게 유지되도록 반응형으로 설계했습니다.
Desktop
1920 × 1080
데스크톱
Tablet
768 × 1024
태블릿
Mobile
375 × 812
모바일
Design System
컬러 팔레트와 타이포그래피를 시스템으로 정의해 화면 전반에 일관된 규칙을 적용했습니다.
Colors
- Point Color#E070C4
- Violet#9A7BE0
- Lilac#F2DDEB
- Gray#E7E6E4
- White#FFFFFF
Typography
Aa 가나다 Pretendard
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Main Page
메인 페이지
첫 화면에서 브랜드와 핵심 서비스를 먼저 보여주고,
스크롤 흐름에 따라 필요한 정보로 자연스럽게 이어지도록 구성했습니다.
스크롤하여 전체 보기 ↓
Mobile
모바일 환경에서 자주 쓰는 기능을 손이 닿는 곳에 배치했습니다.
Bottom Bar
Optimization
-
Menu
PC상단 가로 메뉴 + 상담 버튼
MO햄버거 메뉴
-
Layout
PC와이드 풀스크린 섹션
MO세로 스택 섹션
-
Typography
PC얇은 산세리프 대형 카피
MO카피 크기 축소
-
Image
PC와이드 풍경·인물 사진
MO세로 비율 크롭
이런 홈페이지, 우리 법무법인도 가능할까요?
변호사 · 법무법인 홈페이지만 100개 이상. AI 검색 노출 설계까지 기본으로 넣어 드립니다.
