위드회계법인 홈페이지 구축
5개 전문 본부의 업무를 본부별 화면으로 나눠 보여 주고, 상담신청까지 바로 잇는 위드회계법인 홈페이지
- 클라이언트명
- 위드회계법인(WITH Accounting)
- 기술
- PHP · CodeIgniter · MySQL · Tailwind CSS · Lenis
- 프로젝트 유형
- 회계법인 홈페이지 · 기업 홈페이지 · 반응형 웹
- 담당 범위
- 기획 · 디자인 · 퍼블리싱 · 개발
- 주요 기능
-
- 메인: 5개 본부 카드 가로 넘김, 화면에 들어오면 0부터 올라가는 숫자(30년 · 5개 본부 · 2개 수상), 공익법인운영지원센터 · ESG인증센터 두 장 넘김
- 법인소개 5화면 · 업무분야 5개 본부 화면: 화면 위 하위 메뉴 탭으로 옮겨 다니기
- 오시는 길: 「지도에서 위치 보기」를 누르면 네이버 지도에서 주소를 엶
- 상담신청: 상담 분야를 5개 본부 중에서 골라 접수, 숨긴 칸과 같은 IP 10분 5건 제한으로 자동 등록 막기
- 관리자: 상담신청 목록(신규 · 처리완료, 선택 삭제), 자료실 글 등록(분류 · 첨부 · 비밀글)
- 사이트 검색, 화면별 검색 설명 · 구조화 데이터 · 사이트맵
- 첫 화면과 구역별 등장 움직임('동작 줄이기' 설정이면 움직이지 않음)
- 프로젝트 개요
-
- 위드회계법인은 30년 경험을 쌓아 온 공인회계사 · 세무사들이 인증본부, 세무자문본부, 컨설팅 자문본부, 공익법인운영지원본부, ESG인증본부 5개 본부에서 회계감사 · 세무 · 컨설팅 · 공익법인 운영지원 · ESG 인증 업무를 하는 회계법인입니다.
- 법인에서 받은 소개 원고를 읽고 하위 메뉴까지 모두 화면으로 나눈 사이트맵(메인 1 · 서브 13)을 먼저 만들었습니다.
- 사이트맵으로 와이어프레임과 피그마 디자인 시안을 만들고, 시안대로 사이트를 구축했습니다. 시안에 없던 모바일 화면은 데스크톱 짜임을 세로로 쌓아 만들었습니다.
- 개발 목표
-
- 5개 본부의 업무를 본부마다 한 화면에 정리해, 필요한 업무를 찾은 고객이 바로 상담을 신청하게 합니다.
- 상담신청 접수와 자료실 글은 위드회계법인이 관리자에서 직접 관리하게 합니다.
DESIGN SYSTEM
DESIGN
원고를 14화면으로 나누고,
본부마다 상담으로 이어지게
받은 원고는 법인 소개와 5개 본부의 업무가 한 문서에 이어져 있었습니다. 하위 메뉴를 모두 화면으로 나눠 법인소개 5화면, 업무분야 5화면, 구성원 · 상담신청 · 자료실 각 1화면으로 정리했습니다. 머리글의 상담신청 버튼과 본부 화면 아래 상담 배너로, 업무를 읽다가 바로 상담신청으로 넘어가게 했습니다.
-
메인
첫 화면 아래에서 5개 본부 카드를 가로로 넘겨 봅니다. 30년 · 5개 본부 · 2개 수상 숫자는 화면에 들어오면 0부터 올라가고, 공익법인운영지원센터와 ESG인증센터는 두 장으로 넘겨 봅니다.
-
법인소개
인사말, 윤리경영, 조직 구성, 수상 내역, 오시는 길 5화면입니다. 화면 위 탭으로 옮겨 다니고, 오시는 길의 「지도에서 위치 보기」는 네이버 지도에서 주소를 엽니다.
-
업무분야 5개 본부
본부마다 한 화면을 두고, 본부 사진과 한 줄 소개 아래에 세부 업무를 분야별로 나눠 적었습니다. 화면 위 탭으로 다른 본부로 넘어갑니다.
-
구성원
대표이사와 파트너 회계사 25명의 명단, 고유업무와 특유업무로 나눈 주요 업무, 대표 연락처를 한 화면에 둡니다.
-
상담신청
이름, 연락처, 이메일, 상담 분야, 문의 제목과 내용, 개인정보 동의를 받습니다. 기업 · 기관명은 선택이고, 상담 분야는 5개 본부 중에서 고릅니다. 숨긴 칸과 같은 IP의 10분 5건 제한으로 자동 등록을 막습니다.
-
관리자에서 하는 일
들어온 상담신청을 신규와 처리완료로 나눠 보고 골라서 지웁니다. 자료실에는 인증 · 세무자문 · 컨설팅 · 비영리 · ESG인증 분류로 글을 올리고 파일을 첨부합니다.
움직임과 검색 정보도
화면마다 맞춰 넣었습니다
피그마 시안에는 데스크톱 화면만 있어서, 휴대폰에서는 같은 내용을 같은 순서로 세로로 쌓았습니다. 움직임은 글을 가리지 않는 범위에서 넣고, 검색 엔진이 읽는 설명은 각 화면의 실제 글로 채웠습니다.
-
움직임
첫 화면은 사진이 천천히 자리 잡고 제목이 한 줄씩 나타납니다. 아래 구역은 화면에 들어올 때 떠오르고, 기기에서 '동작 줄이기'를 켠 방문자에게는 움직임 없이 보여 줍니다.
-
검색 정보
화면마다 검색 설명을 본문 글로 쓰고, 메인에는 회사 정보 구조화 데이터, 서브 화면에는 현재 위치 정보를 넣었습니다. robots.txt와 사이트맵도 새로 만들었습니다.
-
모바일 화면
1920 · 1440 · 1280 · 1024 · 390 폭에서 가로로 넘치는 곳이 없는지 확인했습니다. 휴대폰에서는 메뉴가 펼침 메뉴로 열리고, 그 안에도 상담신청 버튼을 두었습니다.
-
14화면
사이트맵과 디자인 시안 (메인 1 · 서브 13)
-
5개
업무분야 본부 화면
-
26명
구성원 명단 (대표이사 1 · 파트너 회계사 25)
-
5개
자료실 분류
업무 분야가 여러 갈래인 법인이라면,
분야별로 나눠 보여 주고 상담까지 잇게 만듭니다.
본부와 업무가 많아 홈페이지에서 정리하기 어려우신가요?
사이트맵부터 디자인, 상담 접수 관리까지 상담해 드립니다.
지금 웹셀러에 상담하세요.
카카오 1:1 문의