프로젝트 개요: 유퍼스트 서초지사(GA 법인보험대리점) 공식 홈페이지 퍼블리싱 및 SEO 반영, 보험설계사 채용 중심의 신뢰형 콘텐츠 사이트 제작
https://2026ysicysic.imweb.me/

기술 스택: 아임웹(Imweb), HTML5/CSS3, Vanilla JS, Responsive Web Design, IntersectionObserver 기반 스크롤 애니메이션, Swiper.js
디자인 방향성: 35년 경력 지사장과 장기근속 조직이라는 신뢰감을 전면에 두고, 숫자·그래프·인터랙션으로 근거를 보여주는 데이터 중심의 차분한 브랜드 UI/UX 구현
핵심 기능:
ㆍSEO 기획서 기반 전체 반영: 클라이언트가 검색량을 참고해 작성한 SEO 기획서(페이지별 타겟 키워드, Title, Meta Description, URL)를 페이지별 SEO 설정, 제목 구조, 최상단 소개 문단, 이미지 alt까지 일관되게 적용하고 기획서와 실제 페이지 주소의 불일치를 점검
ㆍ모듈형 인터랙션 위젯: 카운트업 숫자, 52명 점 그래프, 근속 막대 그래프, 순차 활성화 카드 등 데이터 시각화 위젯을 독립 구조로 개발하고 하나의 통합 스크립트로 관리
ㆍ스크롤 연동 마이크로 모션: 화면 진입 시 한 번만 재생되는 페이드업, 순차 등장, 강조 밑줄 효과 적용
ㆍ적응형 반응형 레이아웃: PC의 다열·좌우 분할 구조를 모바일의 단일 열·카드 구조로 재구성하고, 사이트 전역 CSS 간섭을 해결하여 PC·모바일 모두 최적화
ㆍ커스텀 UI 컴포넌트: 플로팅 퀵메뉴, 카카오맵 연동, 푸터 약관·등록증 모달, 영상 위젯 라운딩 처리 등 사이트 전반의 기능 요소 구현
결과물 & 성과:
ㆍ검색 노출 기반 구축: 기획서의 Title·Description·URL·키워드 체계를 전 페이지에 이식하여 보험설계사 채용 관련 검색어 대응 기반 마련
ㆍ퍼포먼스 최적화: 애니메이션을 transform·opacity 중심으로 구성하고 화면 진입 시점에만 실행해 렌더링 부하 최소화
ㆍ유지보수성 향상: 위젯별 독립 구조와 통합 스크립트로 기존 코드와의 충돌을 방지하고 수정 범위를 최소화
ㆍ신뢰도 높은 정보 전달: 근속률, 우수인증설계사·GA명장 비율 등을 그래프와 출처 문구로 시각화하여 채용 대상자에게 객관적 근거 제공
ㆍ반응형 UX 완성도 확보: 기기별 줄바꿈·글자 크기·간격을 분리 적용해 PC와 모바일 모두에서 일관된 가독성 확보