변호사 홈페이지 제작, 정언법률사무소 제작기
요약 변호사 홈페이지 제작에서 저희가 가장 먼저 정한 것은 "상담한 변호사가 끝까지 직접 맡는다"는 한 문장이었습니다. 정언법률사무소는 실제 고객이 아니라, 블러썸팩토리가 서울 서초의 가상 가사 전문 법률사무소를 정하고 실제 의뢰처럼 대표 변호사의 강점부터 잡아 만든 포트폴리오 홈페이지입니다. 활판 조판 첫 화면, 대표 변호사의 서문, 책장이 넘어가는 사건 진행 과정을 왜 이렇게 설계했는지 디자이너가 직접 풀어 드립니다.
서초의 가상 가사 전문 법률사무소, 이렇게 가정했습니다
이혼이나 상속 문제로 법률사무소를 찾는 분은 대부분 변호사를 처음 만나 봅니다. 그리고 거의 같은 불안을 안고 들어옵니다. "상담은 대표 변호사가 해 주는데, 실제 서면은 다른 사람이 쓰고 법정에는 또 다른 사람이 나가지 않을까." 사정을 몇 번이고 다시 설명해야 하는 일이 의뢰인에게는 가장 지치는 순간입니다.
그래서 가상의 법률사무소 '정언법률사무소'를 정하고, 윤서정 대표 변호사라는 가상 인물에게 강점 하나를 주었습니다. "이혼과 상속 사건을 대표 변호사가 첫 상담부터 서면, 기일, 종결까지 직접 맡는다"입니다. 헤드라인은 "사건을 넘기지 않습니다. 끝까지 제가 맡습니다."로 정했고, 이 문장이 첫 화면부터 마지막 상담 신청서까지 모든 섹션의 기준이 되었습니다.
법률사무소 홈페이지는 약속의 범위를 정하는 일이 특히 중요합니다. 변호사 광고에는 결과를 보장하거나 오해를 부를 수 있는 표현을 피해야 한다는 원칙이 있어서, 승소율이나 결과 약속은 한 줄도 넣지 않았습니다. 대신 "과정의 모든 순간에 제가 있겠다"는 과정에 대한 약속만 담았습니다. 사진은 포트폴리오라 연출 사진(AI 생성 이미지와 무료 사진)을 썼고, 실제 제작에서는 대표 변호사님과 상담실을 저희가 직접 촬영합니다.
첫 화면: 활판 조판 문장과 대표 변호사의 얼굴
사이트를 열면 제목 글자가 금속 활자 블록으로 먼저 놓이고, 그 위에 잉크가 찍히듯 한 줄씩 문장이 나타납니다. 마지막에 '제가 맡습니다' 아래로 버건디 밑줄이 손으로 긋듯 그려집니다. 법률사무소 사이트에 흔한 법원 건물이나 저울 사진 대신, 서면을 쓰는 사람의 무게를 첫 장면에 담고 싶었습니다.
오른쪽에는 대표 변호사의 사진을 '도판(Plate I)'으로 걸었습니다. 문장 아래에는 Counsel(대표 변호사 직접 상담·수행), Private(비공개 1:1 상담실), In writing(비용은 상담 후 서면 안내) 세 줄을 두어, 의뢰인이 가장 먼저 궁금해하는 세 가지를 첫 화면에서 답했습니다.
바로 아래에는 대표 변호사가 직접 쓴 서문을 두었습니다. "이야기를 들은 사람이, 끝까지 서면을 씁니다."라는 제목에 첫 글자 '가'를 크게 키운 책 조판을 쓰고, 왼쪽 여백에는 'Preface — 대표 변호사가 직접 쓴 글입니다'라는 방주를 달았습니다. 글 끝에서는 서명이 그려지고, 이어서 첫 상담부터 대표 변호사, 서면과 기일 직접 수행, 맡는 사건 수 제한이라는 세 가지 약속이 정리됩니다.
디자인 언어: 아이보리 종이 위의 법서 한 권
이 사이트의 디자인 콘셉트는 '한 권의 법서'입니다. 바탕은 아이보리 페이퍼(#F3EEE3)와 페이퍼 섀도(#EAE3D3), 글자는 잉크 블랙(#16130F)과 잉크 그레이(#4A443B)로 깔았고, 포인트는 딥 버건디(#5E1622) 한 가지로 제한했습니다. 법률사무소 홈페이지는 남색과 금색 조합이 많지만, 가사 사건 의뢰인에게는 위압감보다 차분하고 단단한 인상이 먼저라고 판단했습니다.
섹션은 모두 장(Chapter)으로 나누고 사진은 도판(Plate), 단계는 쪽 번호로 매겼습니다. 이중 괘선과 여백 메모 같은 책 조판 요소를 반복해 한 권을 읽는 느낌을 만들었습니다. 오른쪽 위의 버건디 책갈피 리본은 읽은 만큼 길어져 지금 어디쯤 읽고 있는지 알려 줍니다.
| 요소 | 고른 것 | 이유 |
|---|---|---|
| 바탕색 | 아이보리 페이퍼, 페이퍼 섀도 | 오래된 법서처럼 차분한 종이의 질감 |
| 포인트 색 | 딥 버건디 하나만 | 약속의 문장과 책갈피에만 써서 시선을 모음 |
| 한글 제목 | Hahmlet(함렛) | 세리프의 단정함으로 서면을 쓰는 사람의 인상 |
| 장 번호와 캡션 | EB Garamond Italic | Chapter, Plate 같은 책 조판의 품격 |
| 본문 | Pretendard | 긴 설명도 편하게 읽히는 가독성 |
섹션 구성: 의뢰인의 망설임을 장마다 하나씩
스크롤 흐름은 의뢰인이 품는 질문 순서를 따랐습니다. "누가 맡나"에는 서문과 대표 변호사 소개가, "내 사건도 하나"에는 업무 분야 목차가, "남이 알게 되지 않을까"에는 상담 방식이, "얼마나 들까"에는 비용 안내 원칙이 답합니다.
| 섹션 | 담은 것 | 풀어 주는 망설임 |
|---|---|---|
| 서문 | 대표 변호사의 글, 세 가지 약속 | 상담만 대표가 하고 일은 다른 사람이 하지 않을까 |
| 업무 분야 | 이혼, 재산분할, 양육권, 상속, 유류분 | 내 사건도 맡아 줄까 |
| 상담 방식 | 비공개 1:1 상담실, 예약 시간 분리 | 다른 사람과 마주치거나 알려지지 않을까 |
| 사건 진행 과정 | 상담부터 종결까지 다섯 단계 | 앞으로 무슨 일이 생기고 누가 하나 |
| 비용 안내 원칙 | 서면 안내서 양식, 추가 비용 사전 동의 | 나중에 비용이 불어나지 않을까 |
| 자주 묻는 질문과 상담 예약 | 비밀유지, 준비물, 비공개 상담 신청서 | 무엇을 들고 어떻게 연락하나 |
업무 분야는 '가사 사건만, 다섯 갈래로 깊게'라는 제목 아래 법전 목차처럼 §1부터 §5까지 나열했습니다. "형사·기업 사건은 맡지 않습니다"라는 문장을 일부러 넣었는데, 하지 않는 일을 밝히는 것이 전문 분야를 가장 분명하게 보여 주기 때문입니다. 분야마다 의뢰인이 실제로 검색하는 말을 태그로 달았습니다.
가장 공들인 곳은 사건 진행 과정입니다. 스크롤을 내리면 펼친 책의 책장이 3D로 넘어가며 상담, 증거 정리, 조정, 소송, 종결이 차례로 펼쳐집니다. 오른쪽 면에는 단계 설명이, 왼쪽 면에는 'Lawyer's note'라는 이름으로 그 단계에서 대표 변호사가 직접 하는 일이 적힙니다. 다섯 장을 넘기는 동안 같은 사람의 메모가 이어지니, '처음부터 끝까지 같은 사람'이라는 약속이 눈으로 확인됩니다. 아래에는 "기간은 일반적인 경우의 예시이며, 사건마다 다릅니다"라는 문구를 붙였습니다.
비용은 금액표를 걸지 않았습니다. 가사 사건은 사정마다 범위가 크게 달라 숫자 하나가 오히려 오해를 부르기 때문입니다. 대신 "비용은 말이 아니라, 서면으로 드립니다"라는 원칙과 함께 착수금, 성공보수, 실비, 담당 변호사 칸이 있는 비용 안내서 양식을 보여 주고, 스크롤에 맞춰 직인이 '쾅' 찍히게 했습니다. 양식 아래에는 '안내용 예시'임을 적었습니다.
휴대폰 화면: 밤에 혼자 검색하는 의뢰인을 위해
이혼이나 상속을 알아보는 분은 대개 늦은 밤 휴대폰으로 혼자 검색합니다. 그래서 모바일에서는 약속의 문장을 맨 위에 두고 바로 아래에 대표 변호사의 도판을 이었습니다. 화면 아래에는 '전화'와 '비공개 상담 예약' 두 버튼을 고정해, 어느 장을 읽다가도 엄지 한 번이면 연락할 수 있게 했습니다.
책장 넘김은 휴대폰 폭에 맞춰 한 면씩 넘어가는 방식으로 바꿨고, 자주 묻는 질문은 첫 번째 질문 "상담한 내용이 밖으로 알려지지 않을까요?"를 펼친 상태로 두었습니다. 가사 사건 의뢰인이 가장 먼저 묻는 것이 비밀유지이기 때문입니다. 상담 신청서도 이름과 연락처, 상담 분야, 연락 방법(문자 가능 여부)만 받고 자세한 사정은 상담에서 듣도록 짧게 줄였습니다.
검색 세팅, 그리고 우리 법률사무소에 적용한다면
정성 들인 법률사무소 홈페이지도 검색에 나오지 않으면 의뢰인을 만나지 못합니다. 페이지 제목은 "정언법률사무소 | 이혼·상속 가사 사건 · 서초"로, 설명 문구에는 다섯 업무 분야와 "대표 변호사가 첫 상담부터 종결까지 직접", "비공개 1:1 상담"을 담았습니다. 실제 제작에서는 "서초 이혼 변호사", "상속 변호사 + 지역"처럼 의뢰인이 실제로 치는 검색어를 제목과 소제목, 업무 분야 태그에 넣습니다.
첫 화면 사진을 뺀 이미지는 지연 로딩으로 불러오고, 효과는 가벼운 움직임 위주로 만들었습니다. 포트폴리오 자체는 가상 사무소라 검색에 잡히지 않도록 noindex로 막아 두었습니다. 실제 의뢰라면 사무소 정보를 담은 구조화 데이터를 넣고 네이버 서치어드바이저와 구글 서치 콘솔에 등록한 뒤, 업무 분야별 검색 노출용 칼럼을 함께 발행합니다. 법률 업종에 맞춘 구성과 진행 방식은 「법률사무소 홈페이지 제작」에 따로 정리해 두었습니다.
제작은 대표 변호사님 인터뷰에서 시작합니다. 의뢰인이 왜 우리 사무소를 끝까지 믿고 맡기는지 들어 보고 강점을 한 문장으로 정한 뒤, 그 문장에 맞춰 섹션과 업무 분야 페이지 구조를 짭니다. 이어서 직접 촬영, 디자인과 효과, 검색 세팅을 거쳐 오픈하고, 오픈 후에는 상담 신청과 전화 클릭 같은 숫자를 함께 확인합니다.
비용은 330만 원(부가세 포함)이며 직접 촬영이 포함되고 페이지 수와 수정 횟수에 제한이 없습니다. 검색 노출용 칼럼 6편과 오픈 후 3개월 유지보수도 무료입니다. 이후 유지보수 정기권은 월 110만 원입니다. 다른 업종으로 만든 사례는 홈페이지 포트폴리오에서 보실 수 있고, 지금 홈페이지에서 무엇부터 바꾸면 좋을지는 무료 상담으로 먼저 물어보셔도 됩니다.
자주 묻는 질문
변호사 홈페이지 제작 비용은 얼마인가요?
블러썸팩토리는 330만 원(부가세 포함)이며 직접 촬영, 페이지와 수정 횟수 제한 없음, 검색 노출용 칼럼 6편, 오픈 후 3개월 유지보수가 포함됩니다.
변호사 광고 규정에 어긋나지 않게 만들 수 있나요?
승소율이나 결과를 약속하는 표현은 쓰지 않고 업무 방식과 과정에 대한 설명으로 강점을 보여 드리며, 최종 문구는 대표 변호사님께서 확인하신 뒤 오픈합니다.
책장이 넘어가는 효과가 많으면 휴대폰에서 느리지 않나요?
첫 화면 외 이미지는 지연 로딩하고 휴대폰에서는 한 면씩 넘기는 가벼운 방식으로 바꿔, 실제 기기에서 직접 검수한 뒤 오픈합니다.
병원이 아닌 법률사무소도 맡길 수 있나요?
네, 마케팅 대행은 병의원 전문으로만 하지만 홈페이지 제작과 유지보수 정기권은 업종과 상관없이 맡기실 수 있습니다.
업무 분야나 비용 안내 문구가 바뀌면 수정해 주시나요?
오픈 후 3개월은 무료로 수정해 드리고, 이후에는 유지보수 정기권으로 업무 분야, 소개 문구, 칼럼 추가를 맡기실 수 있습니다.