자체 시안
[법률 · 세무] 법률사무소 홈페이지 「법무법인 너른들」
고객 의뢰 없이 직접 기획하고 만든 예시 작업입니다
- PC
- Mobile
법률사무소 홈페이지 「법무법인 너른들」
사건 진행 조회를 첫 화면에 둔 법률사무소 홈페이지 시안
- 제작 방식
- HTML · CSS · JavaScript (디자인 시안)
- 작업 기간
- 2026년 9월
- 타입
- 법률사무소 홈페이지 · 상담 신청 · 의뢰인 진행 조회
- 메인 컬러
- #0e1a31#b8924a#f5f6f8
- 폰트
- Noto Serif KR · Pretendard
시안을 직접 띄워 둔 주소입니다. 눌러 보며 움직임까지 확인하실 수 있습니다.
작업 리포트
법률사무소 홈페이지를 새로 만든다면 어떤 모습이 좋을지 가정하고 직접 기획한 시안입니다. 「법무법인 너른들」과 변호사 · 사례 · 수치는 모두 가상이며, 변호사 사진 대신 이니셜 초상을 그렸습니다. 아래 「사이트 보러가기」에서 실제로 눌러 볼 수 있습니다.
무엇을 중심에 두었나
법률사무소 사이트는 대개 규모와 수치를 앞세웁니다. 하지만 방문자가 정말 궁금한 것은 「맡기면 어떻게 진행되나」입니다. 그래서 첫 화면 오른쪽에 의뢰인 전용 사건 진행 조회 카드를 두어, 수임 뒤에도 진행 상황을 링크로 볼 수 있다는 점을 가장 먼저 보여 줍니다.
- 전화 · 카톡 · 간단 상담을 히어로 바로 아래 한 줄에 모아, 스크롤 없이 연락할 수 있게
- 업무분야는 분야마다 한 줄 설명을 붙인 격자로, 해결사례는 결과(무혐의 · 전액 회수 등)를 크게
- 상담 절차 네 단계에 「안 될 수 있는 부분까지 먼저 말씀드립니다」처럼 신뢰를 주는 문장을 넣었습니다
휴대폰에서
한 페이지가 화면 폭에 맞춰 바뀝니다. 휴대폰에서는 아래에 전화 · 카톡 · 상담 신청 바를 고정하고, 상담 폼은 분야를 버튼으로 골라 입력을 줄였습니다.
실제로 만든다면
변호사 광고 규정에 맞춰 광고책임변호사 표기와 후기 · 사례 문구를 함께 검토합니다. 상담 폼은 사무소 메일 · 문자로 바로 받고, 진행 조회는 이음웍스의 고객 진행 링크처럼 만들 수 있습니다.
첫 화면의 사건 진행 조회
수치 대신 「맡기면 이렇게 진행된다」를 먼저 보여 줍니다. 단계 막대와 최근 기록 세 줄로 의뢰 뒤의 모습을 그렸습니다.
스크롤 없이 닿는 상담
히어로 바로 아래 한 줄에 대표 전화 · 카톡 · 간단 상담 폼을 모으고, 오른쪽에는 떠 있는 퀵메뉴를 두었습니다.
휴대폰 하단 상담 바
전화 · 카톡 · 상담 신청을 화면 아래에 고정하고, 상담 분야는 버튼으로 골라 입력을 줄였습니다.
제공 서비스
- 홈페이지 기획
- 웹디자인
- 반응형 웹
- 모바일 최적화
- 검색엔진최적화 (SEO)