조세 분쟁의 복잡함을 명료하게 푸는 법률 웹사이트
Design Concept
복잡한 조세를 명료한 신뢰로
복잡한 세무·법률 사건을 맡기려는 의뢰인이 가장 먼저 찾는 것은 어디서부터 읽어야 하는지에 대한 명확함이라고 보고, 디자인의 출발점을 “복잡한 것을 단순하게”라는 브랜드 메시지에 두었습니다.
짙은 네이비를 기반으로 절제된 톤을 만들고, 명조 서체의 제목과 풀스크린 이미지를 더해 무게감 있으면서도 열린 인상을 주었습니다.
또한 업무분야와 구성원, 소식·기고를 같은 구조로 정리해 사용자가 필요한 정보를 빠르게 찾고 문의하기까지 자연스럽게 이어지도록 설계했습니다.
Design Elements
-
01
풀페이지 스크롤 메인 구성
메인을 비주얼, 업무분야, 소식, 오시는 길의 네 장면으로 나누어 한 화면에 하나의 메시지만 담았습니다.
긴 페이지를 내려가는 부담 없이 로펌의 핵심 정보를 순서대로 확인할 수 있습니다. -
02
이미지 기반 업무분야 카드
조세, 기업법무, 부동산, 가업·승계, 상속·신탁을 번호와 분야별 대표 이미지로 구분해 한눈에 비교할 수 있게 했습니다.
카드를 누르면 분야별 상세 페이지로 바로 이어져 필요한 업무로 곧장 이동할 수 있습니다. -
03
구성원·제휴법인 구분 소개
변호사, 고문진, 제휴법인 탭으로 구성원을 나누고 직함과 연락처를 함께 정리했습니다.
세무·회계 전문가와 함께하는 원펌 체계를 사이트 구조에서도 확인할 수 있습니다.
Responsive
디바이스 대응
PC · 태블릿 · 모바일 전 환경에서 정보의 순서와 사용성이 동일하게 유지되도록 반응형으로 설계했습니다.
Desktop
1920 × 1080
데스크톱
Tablet
768 × 1024
태블릿
Mobile
375 × 812
모바일
Design System
컬러 팔레트와 타이포그래피를 시스템으로 정의해 화면 전반에 일관된 규칙을 적용했습니다.
Colors
- Point Color#FFB500
- Royal Navy#162C81
- Deep Navy#0D3776
- Ink Black#1A1A1A
- Signal Gold#FFB500
- Warm Bronze#6A5947
- Light Gray#F7F7F7
- White#FFFFFF
Typography
Aa 가나다 NanumSquare
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Aa 가나다 Noto Serif KR
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Aa 가나다 Montserrat
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Main Page
메인 페이지
첫 화면에서 브랜드와 핵심 서비스를 먼저 보여주고,
스크롤 흐름에 따라 필요한 정보로 자연스럽게 이어지도록 구성했습니다.
스크롤하여 전체 보기 ↓
Sub Page
서브 페이지
주요 서브 페이지를 같은 규칙으로 설계했습니다.
02 Pages
Note
다섯 개의 업무분야를 동일한 규칙 안에서 일관되게 확장할 수 있도록 설계했습니다.
업무분야 서브 페이지는 업무소개, 주요서비스, 주요 업무사례, 주요전문가, 관련분야 순서의 탭으로 통일했습니다. 분야가 달라져도 같은 순서로 읽을 수 있어 정보를 찾는 시간을 줄였습니다.
- Grid
- 상단 서브 비주얼 아래 탭과 본문 영역을 같은 폭으로 맞춰 모든 서브 페이지가 같은 틀로 보이도록 했습니다.
- Header
- 업무분야, 구성원·제휴법인, 소식·사례, 두현소개의 1차 메뉴를 펼침 메뉴로 묶어 어느 페이지에서도 같은 위치에서 이동할 수 있습니다.
- CTA
- 메인 비주얼의 “문의하기”와 “인재채용” 버튼, 오시는 길의 지도 이동 버튼으로 문의와 방문 동선을 이어지게 했습니다.
Mobile
모바일 환경에서 자주 쓰는 기능을 손이 닿는 곳에 배치했습니다.
Bottom Bar
Optimization
-
Menu
PC상단 가로 메뉴와 하위 메뉴가 함께 펼쳐지는 구조
MO햄버거 버튼으로 여는 전체 화면 메뉴로 전환
-
Layout
PC풀스크린 섹션을 한 화면씩 넘기는 풀페이지 레이아웃
MO한 단으로 정리된 업무분야 카드와 소식 목록
-
Typography
PC명조 서체의 큰 제목과 나눔스퀘어 본문 조합
MO화면 폭에 맞춰 제목과 본문 크기를 줄여 읽기 편하게 조정
-
Image
PC화면 전체를 채우는 메인 비주얼과 분야별 대표 이미지
MO이미지를 화면 폭에 맞춰 잘라 보여 주며 핵심 문구가 가려지지 않도록 배치
