법률사무소 윤민

이혼·가사 전문 법률사무소 윤민의 법률사무소 홈페이지 제작 사례입니다. 조정민 대표변호사의 업무분야 20개와 자주 묻는 질문을 각각 검색 진입점으로 설계하고, 변호사 광고 규정과 운영 안정성까지 고려해 워드프레스로 구축했습니다. 완성된 사이트는 cjmlaw.co.kr에서 확인할 수 있습니다.

1. 톤 & 컬러

• 베이스: 화이트(#FFFFFF)와 웜 그레이(#F5F4F1)를 섹션마다 번갈아 배치함. 이혼·가사 사건을 맡기는 의뢰인은 이미 감정이 무거운 상태라, 법률사무소의 전형인 짙은 남색·금색 대신 밝고 조용한 배경으로 시작함.
• 포인트: 클레이 골드 한 계열로 통일. 밝은 면은 #8C6A28, 어두운 섹션은 #CBA660. 아이브로·강조어·구분선·스텝 번호까지 이 색만 씀. 금색을 쓰되 채도를 눌러서 화려함보다 신뢰 쪽으로 읽히게 함.
• 텍스트: 순검정 대신 잉크 #151515, 본문 #191919, 보조 #5C5C5C로 분리. 흰 배경에서 대비는 확보하고 눈은 덜 피로하게 함.
• 어두운 면은 신뢰를 전하는 구간에만 씀. 변호사 소개와 상담 안내에만 잉크 배경을 깔아 페이지 리듬을 만들고, 나머지는 밝게 유지함.

2. 타이포그래피

• 제목은 지마켓 산스 Medium, 본문은 Pretendard로 둠. 초안은 명조로 격식을 냈지만, 모바일에서 얇은 획이 흐려지고 정보 페이지가 무거워져서 고딕으로 바꿈.
• 격식은 서체 대신 굵기·여백·행간으로 냄. 히어로·섹션 제목·변호사 이름·메뉴까지 제목 계열은 Medium 한 가지 굵기로 통일함.
• 본문은 16px / 행간 1.75. FAQ 답변이나 업무분야 설명처럼 길게 읽히는 글이 많은 사이트라 행간을 넉넉하게 잡음.

3. 레이아웃 & UX

정보 구조를 사람 → 전문성 → 근거 → 상담 순으로 배치함:
① 변호사 실사 히어로 + 자격·경력 → ② 진료철학 격의 About → ③ 업무분야 20개(5개 그룹) → ④ 해결사례·의뢰인 메시지 → ⑤ 법률정보 → ⑥ FAQ → ⑦ 상담 안내.

• 업무분야 20개를 이혼 / 자녀 / 부정행위·혼인관계 / 친자관계 / 상속·부양 5그룹으로 묶음. 분야마다 개별 페이지를 두고 판단 기준·준비 자료·진행 순서를 같은 틀로 정리함. 검색 유입이 분야별 페이지로 바로 떨어지는 구조.
• PC 메뉴는 메가메뉴로 20개 분야를 한 화면에 펼침. 모바일(1024px 이하)은 전체화면 드로어에 그룹별 아코디언을 둬서 긴 목록이 한 번에 쏟아지지 않게 함.
• 의뢰인이 보내온 감사 메시지 8건은 캡처 이미지에 이름·연락처를 가림 처리하고, 같은 문장을 텍스트로 병기함. 화면 낭독기와 검색엔진도 내용을 읽을 수 있음.
• 모바일 하단에 상담 신청·긴급 전화 고정 바를 둠. 스크롤 위치와 관계없이 상담 버튼이 항상 엄지 아래에 있음.

4. 전환 설계 (상담 유도형)

이혼 상담은 결심 전 단계의 방문자가 대부분이라 “문의 버튼을 누르기까지의 불안”을 줄이는 쪽으로 설계함:

• 상담 흐름을 3단계로 미리 보여줌: 일정 안내 → 준비 자료(혼인관계증명서·재산 자료·상황 메모) → 비밀 유지. 무엇을 들고 가야 하는지 알면 문의가 쉬워짐.
• 채널을 두 갈래로 나눔. 정리된 상담은 상담 신청 폼, 급한 건은 긴급 전화(tel:). 모든 히어로와 하단 고정 바에 두 버튼을 같이 둠.
• 위치 노출 최소화: 가사 사건 의뢰인은 사무실 출입이 드러나는 것 자체를 부담스러워함. 그래서 ‘오시는 길’을 ‘상담 안내’로 바꾸고, 지도와 상세 주소는 본문에서 빼서 푸터에만 둠.
• 팝업 자동 오픈 없음. 감정적으로 예민한 방문자에게 들어오자마자 뭔가를 들이밀지 않음.