위드회계법인 홈페이지 구축

5개 전문 본부의 업무를 본부별 화면으로 나눠 보여 주고, 상담신청까지 바로 잇는 위드회계법인 홈페이지

SCROLL
클라이언트명
위드회계법인(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

primary Color
secondary Color
text Color
Kor Pretendard
Eng Bodoni Moda
위드회계법인 홈페이지 목업 — 모니터에 메인 첫 화면, 노트북에 조직 구성 화면을 띄우고 서류철 · 계산기 · 만년필을 둔 모습

DESIGN

위드회계법인 메인 화면 — 첫 화면, 5개 본부 카드, 30년 · 5개 본부 · 2개 수상 숫자, 전문센터, 위드 스토리, 전문 서비스 바로가기, 푸터
상담신청 화면 — 전화 상담 번호와 이름 · 기업·기관명 · 연락처 · 이메일 · 상담 분야 · 문의 제목 · 문의 내용 · 개인정보 동의
법인소개 인사말 화면 — 하위 메뉴 탭과 인사말 본문
법인소개 조직 구성 화면 — 위드회계법인 아래 5개 본부 조직도
업무분야 세무자문본부 화면 — 본부 사진과 소개, 분야별 세부 업무 목록
구성원 화면 — 대표이사와 파트너 회계사 명단, 고유업무 · 특유업무, 대표 연락처

원고를 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 문의