웹·앱 개발

마케팅 운영 대시보드 구축과 검색엔진 등록 통합 엔지니어링

5분 읽기
마케팅 대시보드검색엔진 등록SEO 자동화프론트엔드 엔지니어링

1. 시스템 아키텍처 및 구현 배경

본 테크니컬 리포트는 TOVLAB 프론트엔드 관리자 시스템 내 마케팅 운영 대시보드(/admin/marketing-operations) 구축 배경과 설계 의사결정, 외부 도구 통합 엔지니어링 방식을 종합 정리한 문서입니다.

웹사이트 배포 이후 발생하는 외부 도구 분산, 계정 충돌, 수작업 URL 색인 요청의 비효율을 해결하기 위해 개발되었습니다.

TOVLAB 관리자 마케팅 운영판 상단 아키텍처 및 긴급 작업 대시보드 TOVLAB 관리자 마케팅 운영판 상단 개요 및 진행률 요약

2. 핵심 엔지니어링 요구사항과 해결 방안

2.1 멀티 구글 계정 라우팅 및 딥링크 세션 안정화

운영자가 개인 구글 계정과 회사 프로필 계정을 혼용할 때 발생하는 세션 충돌을 방지하기 위해 URL 생성 유틸리티 함수(googleAccountUrl)를 구현하여 authuser=taigi0909@gmail.com 파라미터를 자동 주입했습니다.

네이버 서치어드바이저의 경우, 세부 딥링크의 세션 만료 에러를 방지하고자 단일 콘솔 보드(searchadvisor.naver.com/console/board)를 엔드포인트로 통합했습니다.

검색엔진 및 웹마스터 도구 바로가기 묶음 UI 검색엔진/색인 통합 바로가기 카드 UI

2.2 데이터 분석 및 전환 추적 파이프라인 연계

Google Analytics 4(측정 ID: G-5Y810825WS)와 Microsoft Clarity 히트맵, PageSpeed Insights를 그룹화하여 유입 후 전환율 및 UX 성능을 즉시 모니터링할 수 있는 대시보드 인터페이스를 설계했습니다.

분석, 홍보 및 키워드 도구 그룹화 UI 분석/개선 및 마케팅 도구 그룹화 뷰

3. 멀티채널 콘텐츠 배포 파이프라인 및 워크플로

단일 원본 콘텐츠(블로그)를 기반으로 LinkedIn(B2B), Instagram(카드뉴스), Threads/X(단문 배포)로 확장하는 콘텐츠 재활용 워크플로 매트릭스를 시스템 UI에 직접 녹여내어 운영 일관성을 확보했습니다.

SNS 멀티채널 콘텐츠 전략 및 재활용 루틴 화면 채널별 역할 정의 및 OSMU 콘텐츠 재활용 워크플로

4. 색인 수집 요청 자동화 및 상태 관리

운영 도메인의 핵심 라우트 URL 리스트를 관리하고 클립보드 API를 통한 일괄 복사 및 서치콘솔 URL 검사기 연동 기능을 제공합니다. 작업 체크리스트는 클라이언트 localStorage와 동기화되어 새로고침 후에도 유지됩니다.

색인 및 수집 요청 URL 목록과 운영 가이드 수집 요청 대상 URL 목록 및 마케팅 가이드라인 마케팅 실천 체크리스트 우선순위별 마케팅 작업 체크리스트 모바일 반응형 레이아웃 화면 모바일 뷰포트 반응형 렌더링 검증

5. 검증 및 빌드 결과

  • ESLint & TypeScript: Type-check 및 Lint 100% 통과
  • Next.js Production Build: /admin/marketing-operations 정적/동적 라우팅 빌드 검증 완료
  • Playwright 반응형 UI 테스트: 데스크톱(1432px) 및 모바일(382px) 뷰포트 정상 동작 확인
마케팅 운영 대시보드 구축과 검색엔진 등록 통합 엔지니어링 | TOVLAB Blog