← 전체 프로젝트

Business Website

법률사무소 홈페이지 '담율' — 상담 준비 도우미

처음 겪는 절차일수록 먼저 설명하는 법률사무소 홈페이지입니다. 사건 유형을 고르면 상담 때 가져올 서류 체크리스트와 절차 타임라인이 조립되고, 변호사 광고 규정에 맞춰 승소율·수임료 금액은 싣지 않았습니다.

비공개·데모 — AI 가상 데이터로 재구성한 예시입니다

데모 열기 ↗정적 HTML, Tailwind CSS(빌드), 바닐라 JS, nginx
법률사무소 홈페이지 '담율' — 상담 준비 도우미 대표 화면

문제

법률사무소 사이트는 규제가 곧 설계 제약이다. 레퍼런스 3곳 모두 '승소사례'를 전면에 걸고 '전문가'를 자처하지만, 변호사 광고 규정상 승소율·수임료·'전문' 단정은 쓸 수 없다. 결과를 못 쓰면 무엇으로 신뢰를 만드느냐가 이 프로젝트의 진짜 문제였다.

해결

결과 대신 절차를 팔았다. 사건 유형을 고르면 서류 체크리스트가 조립되고(체크 상태 유지), 통상 절차 타임라인과 상담 전 정리할 질문이 함께 열린다 — 상속·부당해고는 3개월 기한 경고가 따로 붙는다. 사례는 결과를 지우고 쟁점·진행·남은 절차만 적었고, 수임료는 금액 대신 결정 구조만 표로 냈다. 딥 네이비 다크 베이스에 골드 헤어라인, 문서·표 구간만 페이퍼로 반전해 계약서를 은유했다.

8
페이지
0
가로 오버플로(5뷰포트 전수)
6
사건 유형별 체크리스트

화면

상담 준비 도우미 — 서류 체크리스트가 조립된다
상담 준비 도우미 — 서류 체크리스트가 조립된다
가사 — 쟁점 표와 절차 타임라인
가사 — 쟁점 표와 절차 타임라인
구성원 — 인물 사진 대신 모노그램, '주요 취급 분야' 표기
구성원 — 인물 사진 대신 모노그램, '주요 취급 분야' 표기
상담 안내 — 금액 없이 수임료 결정 구조만
상담 안내 — 금액 없이 수임료 결정 구조만