플러스프로젝트 배경
1) 문제점 - 전략·제작·광고를 각기 다른 대행사에 맡기며 브랜드 메시지가 분산됨 - AI 검색(ChatGPT·Perplexity) 확산으로 기존 키워드 SEO만으로는 노출 확보가 어려워짐 - 대행사 문의 채널이 메일 주소 노출에 그쳐 리드 정보가 구조화되지 않음 2) 프로젝트 목표 - 통합 역량 전달: 8개 서비스를 하나의 흐름으로 보여주는 정보 구조 설계 - AI 검색 대응 증명: AEO·
프로젝트 성과
색상 대비 접근성 위반 13건 → 0건
자동 검사에서 검출된 WCAG AA 미달 13건을 토큰 재설계로 전량 해소. 로고 그라디언트에 이미 쓰던 색을 재사용해 브랜드 손상 없이 기준을 충족했습니다.
스크롤 중 강제 리플로우 421ms → 0회
배경 엔진이 매 프레임 레이아웃을 조회하던 구조를 ResizeObserver로 전환. 유휴 3초와 전체 스크롤 구간 모두 레이아웃 조회 0회를 달성했습니다.
초기 클라이언트 번들 45KB 감축
히어로를 서버 컴포넌트로 환원하고 WebGL 엔진을 지연 로딩으로 분리. 실행되지 않을 수도 있는 모듈을 초기 경로에서 제외했습니다.
핵심 기능
서비스 상세 패널
8개 서비스 카드 중 선택 시 상세가 펼쳐지는 인터랙션. 서비스마다 콘텐츠 길이가 달라 CSS로는 불가능한 auto 높이 전환을 구현했습니다.
진행 단계
기획 및 요구사항 정의
2026.07.
8개 서비스 정보 구조 확정, 문의 폼 수집 항목(서비스·예산·연락처)과 메일 발송 방식 정의
프로젝트 상세
1) 포트폴리오 소개 브랜드 전략·AI 검색 최적화(AEO·GEO)·바이럴 마케팅을 통합 제공하는 디지털 그로스 스튜디오의 공식 웹사이트 개발. 메인 타깃은 마케팅 대행사를 여러 곳 나눠 쓰며 메시지 일관성에 어려움을 겪는 중소·중견 브랜드 담당자. 2) 작업 범위 화면 설계, UI/UX 디자인, Front-end 개발, 문의 메일 발송 API 구축, SEO/구조화 데이터, 접근성 대응, 배포 환경
