법률·전문서비스
법률사무소 홈페이지 '담율' — 상담 준비 도우미
처음 겪는 절차일수록 먼저 설명하는 법률사무소 홈페이지입니다. 사건 유형을 고르면 상담 때 가져올 서류 체크리스트와 절차 타임라인이 조립되고, 변호사 광고 규정에 맞춰 승소율·수임료 금액은 싣지 않았습니다.
비공개·데모 — AI 가상 데이터로 재구성한 예시입니다
문제
법률사무소 사이트는 규제가 곧 설계 제약이다. 레퍼런스 3곳 모두 '승소사례'를 전면에 걸고 '전문가'를 자처하지만, 변호사 광고 규정상 승소율·수임료·'전문' 단정은 쓸 수 없다. 결과를 못 쓰면 무엇으로 신뢰를 만드느냐가 이 프로젝트의 진짜 문제였다. 실마리는 방문자 쪽에 있었다. 법률사무소를 찾는 사람 대부분은 그 절차가 처음이다. 출석요구서를 받았거나 빌려준 돈이 막힌 상태에서 상담에 무엇을 가져가야 하는지, 어떤 순서로 얼마나 걸리는지 모른 채 전화부터 걸게 된다. 상속포기나 부당해고 구제신청처럼 기한이 있는 절차는 모르고 지나치면 쓸 수 있는 수단이 줄어든다. 이 공백을 채우는 화면이라면 결과를 걸지 않아도 사무소가 일하는 방식이 드러난다.
해결
결과 대신 절차를 팔았다. 유형은 이혼·형사·대여금·상속·부동산·부당해고 여섯 가지다. 사건 유형을 고르면 서류 체크리스트가 조립되고(체크 상태 유지), 통상 절차 타임라인과 상담 전 정리할 질문이 함께 열린다 — 상속·부당해고는 3개월 기한 경고가 따로 붙는다. 체크리스트에는 진행 바와 챙긴 개수가 달리고 목록 복사 버튼으로 준비물을 휴대폰 메모에 옮겨 갈 수 있다. 소요 기간은 확답 대신 통상 범위로만 적어 사건마다 다르다는 전제를 지켰다. 사례는 결과를 지우고 쟁점·진행·남은 절차만 적었고, 수임료는 금액 대신 결정 구조만 표로 냈다. 딥 네이비 다크 베이스에 골드 헤어라인, 문서·표 구간만 페이퍼로 반전해 계약서를 은유했다.
- 8
- 페이지
- 0
- 가로 오버플로(5뷰포트 전수)
- 6
- 사건 유형별 체크리스트
제작 노트
상황 선택으로 열리는 세 칸
이혼을 고민 중, 형사 고소를 당함, 대여금을 못 받음 같은 여섯 상황 중 하나를 고르면 화면 세 칸이 그 사건에 맞게 다시 짜입니다. 첫 칸은 가져올 서류 체크리스트로 차용증이나 계좌 이체 내역처럼 유형마다 다른 항목이 나열되고 체크한 개수가 진행 바에 쌓입니다. 둘째 칸은 상담부터 판결과 집행까지 통상 절차를 단계로 풀고 대략의 소요 기간을 덧붙입니다. 셋째 칸은 상담 전에 정리할 질문 목록입니다. 유형을 오가도 체크 상태는 유지되고 상속과 부당해고에는 3개월 기한 경고가 먼저 뜹니다.
서버 없이 도는 도우미
여덟 페이지 전부 정적 HTML과 빌드한 Tailwind CSS, 바닐라 JS로 구성했습니다. 상담 준비 도우미의 유형별 데이터도 스크립트 안에 있고 화면만 갈아 끼우는 방식이라 서버도 데이터베이스도 없습니다. 로그인이나 저장이 없는 안내 사이트에는 이 편이 빠르고 호스팅과 보안 부담도 적습니다. 절차나 서류 목록이 바뀌면 스크립트의 목록 한 줄을 고치면 되니 법이 개정될 때 따라가기에도 무리가 없습니다. 체크 상태는 어디에도 전송하지 않고 보고 있는 화면 안에서만 살아 있습니다.
결과 없이 쌓는 신뢰
첫 화면 도입부에서 곧바로 상황 선택으로 이어지게 해 방문자가 자기 사건부터 고르게 했습니다. 그 아래로 업무분야 여섯 개와 처음 왔을 때 진행되는 순서, 구성원 소개가 차례로 이어지고 사례 구간은 승소 문구 대신 쟁점과 진행 경과만 적었습니다. 어느 화면에나 상담 신청으로 가는 버튼이 붙고 신청 페이지는 수임료가 정해지는 구조를 착수금과 성공보수 항목으로만 안내합니다. 승소율이나 금액을 싣지 않는 이유도 광고 규정과 함께 화면에 그대로 적어 규정을 지키는 방식 자체가 소개가 되게 했습니다.
화면
