마케팅 대행사 그루브플랜 홈페이지 리뉴얼기

안녕하세요, 그루브플랜 오주연입니다. 오늘은 저희 홈페이지 개편 후기를 나눠보려고 합니다.

지난 2월, 웹플로우를 이용하다 안티그래비티로 랜딩 페이지를 새로 만들었을 때만 해도 외부 웹 빌더 없이 홈페이지를 운영할 수 있다는 점에 꽤 만족했었습니다. 하지만 그로부터 딱 두 달 만에, 저희는 다시 한 번 홈페이지를 완전히 갈아엎기로 결정했습니다.

마케팅 대행사 홈페이지를 2달 만에 갈아엎은 이유

“대체 왜 2달만에?”라는 얘기가 나올 법한데요. 저희가 홈페이지를 다시 개편하기로 한 이유는 아래와 같습니다.

1. 홈페이지를 개방형 온드 미디어로 운영

본격적으로 회사 블로그를 운영하기 위해 플랫폼을 고민하던 중, AI 모델들에게 폐쇄적인 네이버 블로그만으로는 변화하는 GEO(AI 답변 최적화) 환경에 유연하게 대응하기 어렵다는 결론을 내렸습니다. 그래서 홈페이지 내에 직접 블로그를 구축해 원본 콘텐츠를 쌓고, 네이버 블로그는 이를 요약해 확산하는 채널로 이원화하여 운영하기로 했습니다.

그래서 제미나이와 상담을 하면서 기존 홈페이지에 블로그를 붙일 수 있는 방법을 논의했었는데요. 기술적인 면들을 검토해본 결과, 블로그 글을 꾸준히 올릴 것을 고려한다면 홈페이지 구조 자체를 바꾸는 것이 필요하다는 결론에 이르렀습니다. 그래서 고민 끝에 아예 홈페이지를 전면 개편하기로 한 것이지요.

2. 지속가능한 성장을 위한 오가닉 마케팅 강화

기존 홈페이지는 광고를 통한 유입에는 효과적이었지만, 검색 엔진이나 AI 답변에 대한 고려는 부족했습니다. 광고를 통해 인스타그램 관리 대행이나 브이라우드 체험단 서비스가 꾸준히 계약으로 이어지고 있지만, 장기적으로는 광고 의존도를 낮추고 ‘찾아오는 브랜드’가 되어야 한다고 생각했습니다.

3. 자체 GEO 실험

마지막으로, 사람들이 검색창에 검색하는 것을 넘어 AI에게 질문하고 답을 얻는 시대가 된 만큼, 저희 스스로도 GEO 대응을 실천하고 그 과정에서 데이터와 인사이트를 축적하고 싶었습니다.

리뉴얼 전과 후, 무엇이 달라졌나요?

이번 리뉴얼 역시 안티그래비티를 활용했지만, 구조적으로는 큰 변화를 주었습니다.

항목	기존	변경
페이지 구성	– 랜딩 페이지(One page)	– 회사소개 – 서비스 소개 – 블로그 – 문의
프레임워크 및 언어	– HTML5	– Next.js – React – TypeScript
디자인 및 스타일링	– CSS	– Tailwind CSS
사전 기획/디자인 작업	– 노션으로 PRD 정리 – 프롬프트로 모두 입력	– 안티그래비티에서 PRD 기획, 작성 – 구글 Stitch 2.0에서 사전 기획+디자인 (MCP를 통해 개발 진행)
홈페이지 블로그	– 없음	– 워드프레스 연동 (Headless)
스키마 마크업	– 최소/기본	– 각 페이지별 스키마 마크업 진행 – 워드프레스 Rank Math SEO 스키마 적용

단순한 원페이지 구조에서 벗어나 회사 소개 / 서비스 소개 / 블로그 / 컨택 페이지로 구조화했고, 지난 버전에서 소홀했던 스키마 마크업(Schema Markup) 작업을 각 페이지 성격에 맞게 진행했습니다.

또한, 안정적인 블로그 운영을 위해 워드프레스를 헤드리스 방식으로 연동해 CMS로 활용하고, 작성자의 신뢰도를 높일 수 있도록 저자 카드를 생성해 연동했습니다. 아직은 시작 단계지만, 안티그래비티 개발의 유연함을 활용해 다양한 가설들을 빠르게 테스트하며 최적화해나갈 예정입니다.

비개발자가 AI와 함께 홈페이지를 구축한 과정, 그리고 AI 뜨개질

이번 프로젝트는 기획부터 검수까지 AI를 동료 삼아 진행되었습니다.

1. PRD(제품 요구사항 문서) 기획 : 이번에는 PRD를 작성하는 과정부터 안티그래비티를 활용해, 제품의 목적을 설명하고, 이를 달성하기 위해 필요한 기술 스택들이 무엇이 있는지, 아이데이션 단계부터 동료처럼 함께 논의했습니다.
2. 홈페이지 디자인 : 구글 Stitch 2.0으로 PRD 내용을 시각화하며 그루브플랜만의 톤앤매너를 잡아나갔습니다.
3. 개발 및 워드프레스 연동 : 안티그래비티 환경에서 제미나이 3.1 Pro와 3 Flash를 번갈아 활용해 진행했습니다.
4. 스키마 마크업 : 생성된 마크업을 Schema.org의 Validate 도구로 검사하고 정돈했습니다.

이번 홈페이지를 구축하면서 가장 난감했던 부분은 구글 Stitch 2.0을 활용한 홈페이지 디자인이었습니다. 1.0 버전을 간략하게 사용해보았던 경험으로는 2.0이 이전 버전 보다 톤앤매너를 잡는 능력이 탁월해졌지만, 일관성을 유지하는 과정은 여전히 쉽지 않았습니다.

특정 영역을 수정하면 다른 곳이 럭비공처럼 튀며 바뀌는 문제 때문에, 프롬프트마다 “수정 영역 외에는 디자인을 유지할 것”을 매번 강조하며 밀착 디렉팅을 진행해야 했습니다. 밀착 디렉팅에도 불구하고 일관성이 틀어지는 부분이 발생하면, 해당 디자인을 지우고 다시 생성하는 작업을 진행했습니다.

AI 디자인이 초안은 순식간에 내놓지만, 우리가 원하는 정교한 디테일을 완성하기까지는 결국 마이크로 매니징이 필수적이었습니다. ‘딸깍’ 한 번에 끝나는 작업이라기보다, 한 땀 한 땀 뜨개질을 하다가 코가 빠지면 다시 풀고 짜는 과정의 연속에 더 가까웠습니다.

그루브플랜 블로그에서 계속 인사드리겠습니다

지금 이 글을 읽고 계신 공간이 바로 그 집요한 ‘AI 뜨개질’을 통해 탄생한 결과물입니다. 이번 리뉴얼은 단순히 저희를 알리는 수단을 넘어, 제작-구축-최적화-콘텐츠 발행의 전 과정을 직접 실험하며 얻은 인사이트를 고객사에게 더 고도화된 서비스로 돌려드리기 위한 준비 과정이기도 합니다.

앞으로 이곳에서 그루브플랜의 마케팅 인사이트와 현장에서 겪으며 얻은 진솔한 이야기들을 꾸준히 전해드리려 합니다.

그루브플랜의 새로운 소식과 마케팅 인사이트를 가장 빠르게 확인하고 싶으시다면, 아래 링크드인 페이지를 팔로우해 주세요. 새 글이 발행될 때마다 소식을 전해드리겠습니다:)