워드프레스(Wordpress)에서 자체 개발 홈페이지로 전환한 이유

웹사이트가 고객이 클릭하고 몇 초 만에 열리나요? 만약 3초 이상 걸린다면, 이미 잠재 고객의 50%는 뒤로 가기 버튼을 눌렀을 겁니다. 특히 기술, 디자인, 사운드와 같은 웹사이트의 퍼포먼스는 곧 회사의 기술력으로 비춰집니다.

많은 분이 웹사이트 제작을 '워드프레스'를 선택합니다. 하지만 운영하다 보면 늘어나는 플러그인, 느려지는 로딩 속도, 매달 나가는 호스팅 비용에 지치기 마련입니다. 저 역시 그랬습니다. 그래서 결심했습니다. 워드프레스를 버리고, 아예 처음부터 개발하기로 말이죠.

이 글은 전문 개발자가 아닌 사람이 바이브 코딩(Vibe Coding, AI와 대화하듯 코딩하는 방식)을 통해 홈페이지를 자체 개발한 기록입니다. 개발 지식이 없어도 어떻게 고성능 웹사이트를 만들 수 있었는지, 그 과정을 통해 얻은 비용 절감과 속도 개선의 구체적인 수치를 공유합니다.

1. 워드프레스의 장단점

워드프레스는 전 세계 웹사이트의 40% 이상을 차지하는 강력한 CMS입니다. 하지만 '모든 것을 할 수 있다'는 장점은 역설적으로 '무엇을 하든 무겁다'는 치명적인 단점이 됩니다. 무엇이든 하기 위해 존재하기 때문에 기본적으로 로드해야 할 스크립트가 너무 많습니다.

가장 큰 문제는 '플러그인 의존성(Plugin Dependency)'이었습니다. 오디오 플레이어 기능을 넣기 위해 플러그인을 설치하면, 그 플러그인은 필요 없는 CSS와 자바스크립트 파일까지 모조리 불러옵니다. 디자인을 조금 수정하려면 페이지 빌더(WP Bakery, Elementor 등)를 써야 하고, 이는 사이트 속도를 기하급수적으로 떨어뜨립니다. 마치 자전거를 타고 동네 마트에 가려는데, 대형 트럭의 시동을 거는 것과 같습니다.

비용 문제도 무시할 수 없습니다. 워드프레스가 무거워질수록 이를 감당하기 위해 더 비싼 호스팅 서버를 써야 합니다. 트래픽이 조금만 몰려도 사이트가 뻗어버리는 현상을 막기 위해, 혹은 단순히 인스턴스의 CPU와 메모리의 이슈로 매월 수만 원에서 수십만 원의 고정 비용을 지출해야 했습니다. '홈페이지 자체 개발'은 단순한 기술적 도전이 아니라, 비즈니스의 생존을 위한 필수적인 선택이었습니다.

💡 Pro Tip: 현재 운영 중인 워드프레스 사이트의 속도가 궁금하다면 'PageSpeed Insights'를 돌려보세요. 주황, 빨간불이 많다면, 기본적인 시스템 개선부터 플러그인 다이어트가 시급하거나 플랫폼 이전을 고려해야 할 때입니다.

간단하게 몇개의 플러그인만 설치하면 괜찮을줄 알았지만, 이상적인 테마와 구조, 기능을 구현하기 위해서 엄청난 수의 플러그인이 설치되었습니다.

2. 바이브 코딩(Vibe Coding)

'자체 개발'이라고 하면 검은 화면에 흰 글씨를 타닥거리는 코딩을 떠올리며 겁부터 먹기 쉽습니다. 하지만 바이브 코딩(Vibe Coding)의 시대가 열리면서 판도가 바뀌었습니다. 바이브 코딩이란 엄밀한 문법(Syntax)을 암기해서 짜는 코딩이 아니라, AI에게 자연어로 의도를 설명하고(Vibe), AI가 작성한 코드를 조립하여 결과물을 만드는 방식을 말합니다.

저희는 VS Code에서 Claude와 함께 작업을 진행했습니다. 제가 할 일은 "헤더는 스크롤 할 때 반투명하게 바뀌고, 오디오 플레이어는 하단에 고정해줘"라고 명확하게 지시하는 것뿐이었습니다. 과거에는 자바스크립트의 비동기 처리나 CSS의 레이아웃 구조를 이해해야만 가능했던 기능들이, 이제는 '기획, 아이디어와 정확한 질문'만 있으면 구현 가능합니다.

이 방식은 단순히 코드를 복사해서 붙여넣는 수준을 넘어서, 전체적인 프로젝트 구조를 AI가 제안해줍니다. 사운드 스튜디오에 필요한 '반응형 오디오 파형 시각화' 기능도 라이브러리 문서를 뒤적일 필요 없이, AI에게 "WaveSurfer.js를 사용해서 파형을 보여줘"라고 요청하면 순식간에 기본 코드가 완성됩니다. 기술의 장벽이 무너진 자리에 기획의 창의성이 들어선 것입니다.

3. 구조 설계 : 덜어낼수록 빨라진다 (웹사이트 경량화)

워드프레스를 버리고 자체 개발을 시작하면서 세운 제1원칙은 '사용자 경험과 성능의 최적화'였습니다. 워드프레스의 무거운 테마와 플러그인 의존성을 걷어내고, Next.js 16과 NestJS를 기반으로 한 현대적인 웹 아키텍처를 도입했습니다. 단순히 가벼운 사이트가 아니라, React Server Components와 Redis 캐싱을 적극 활용해 로딩 속도는 비약적으로 높이되 필요한 동적 기능은 놓치지 않는 탄탄한 시스템을 구축했습니다.

개발의 자유도가 확보되면서 SEO(검색 엔진 최적화)와 구조적 효율성도 극대화되었습니다. 기존 워드프레스 환경에서는 테마와 플러그인이 강제하는 불필요한 스크립트와 스타일을 완벽히 제어하기 어려웠습니다. 하지만 자체 개발을 통해 페이지별로 꼭 필요한 코드만 로드되도록 설계하고, 시맨틱 태그를 적재적소에 배치하여 검색 엔진이 사이트를 명확하게 이해할 수 있는 탄탄한 구조를 완성했습니다.

이미지와 폰트 등 리소스 최적화 역시 한층 정교해졌습니다. 워드프레스가 자동으로 생성하던 무의미한 썸네일과 비대한 코드를 걷어내고, Next.js의 기능을 활용해 최신 이미지 포맷인 WebP를 적용했습니다. 또한 폰트 로딩 전략을 수정하여 렌더링 차단 리소스를 최소화함으로써 초기 로딩 속도를 잡았습니다. 이 모든 과정은 '무엇을 더할까'가 아니라 '무엇을 뺄 수 있을까'에 대한 치열한 고민의 결과였습니다.

4. 호스팅 비용 절감 : 월 16만 원에서 6만원으로

자체 개발의 또 다른 성과는 호스팅 비용의 합리화입니다. 기존 워드프레스 환경에서는 PHP와 DB의 무거운 처리를 감당하기 위해, 실제 트래픽이나 콘텐츠 규모에 비해 과도하게 비싼 고사양 호스팅을 사용해야 했습니다. 성능 저하를 막기 위해 울며 겨자 먹기로 지출하던 비용은 약 16만 원 선이었으며, 이는 비즈니스 관점에서 명백한 비효율이었습니다.

현재는 AWS Lightsail로 인프라를 이전하여 비용을 6만 원대로 낮췄습니다. Lightsail은 고성능 EC2 인스턴스에 비해 상대적으로 스펙이 낮지만, 군살을 뺀 최적화된 아키텍처 덕분에 현재의 사양으로도 차고 넘치는 퍼포먼스를 보여줍니다. 하드웨어의 힘으로 버티는 것이 아니라, 효율적인 코드로 가볍게 구동하기 때문입니다. 여기에 Cloudflare의 무료 플랜을 연동해 보안과 전역 캐싱(CDN)까지 강화함으로써, 비용은 60% 이상 절감하면서도 안정성과 속도는 오히려 개선되는 결과를 얻었습니다.

💡 Pro Tip: 워드프레스의 필수 플러그인인 'Contact Form 7'은 모든 페이지에서 스크립트를 로드해 사이트 속도를 저하시키는 주범이기도 합니다. 자체 백엔드(NestJS)를 구축했다면, 간단한 API 연동만으로도 이메일 전송 기능을 완벽하게 구현할 수 있습니다. 불필요한 외부 서비스나 플러그인에 의존하지 않고도, 스팸 필터링부터 데이터 처리까지 직접 제어하는 가볍고 안전한 문의 시스템을 갖추게 되는 셈입니다.

5. 퍼포먼스 비교 (라이트하우스)

개발을 완료하고 가장 먼저 한 일은 구글 라이트하우스(Lighthouse) 점수를 측정하는 것이었습니다. 결과는 충격적이었습니다.

• 워드프레스 : 80점~

• 자체 개발 후: 95점~

결과는 구글 라이트하우스(Lighthouse) 점수가 객관적으로 증명합니다. 성능(Performance) 점수는 79점에서 91점으로 상승했고, 특히 SEO 점수는 61점에서 만점인 100점을 기록했습니다. 무엇보다 고무적인 것은 자체 개발을 통해 기존 사이트보다 훨씬 다채로운 애니메이션과 동적 요소를 구현했음에도, 구동 속도는 비교할 수 없이 빨라졌다는 점입니다. 워드프레스의 고질병이었던 CLS(누적 레이아웃 이동) 역시 0으로 만들어, 화면이 덜컥거리는 현상 없이 안정적인 시각 경험을 제공하게 되었습니다.

이러한 기술적 개선은 방문자에게 즉각적인 쾌적함을 선사합니다. 페이지 로딩을 기다리는 지루함이 사라지면서, 고객은 오직 우리의 포트폴리오와 콘텐츠에만 온전히 집중할 수 있게 되었습니다. '더 화려하지만 더 빠른' 모순적인 목표를 달성함으로써, 비즈니스의 성장을 위한 가장 탄탄한 디지털 기반을 다진 셈입니다. 이제 완벽해진 SEO 환경을 바탕으로, 더 많은 잠재 고객에게 우리 스튜디오의 가치가 막힘없이 전달될 것이라 확신합니다.

이 모든 성과가 호스팅 비용을 획기적으로 낮추면서 이루어졌다는 점은 시사하는 바가 큽니다. 매달, 매년 지불해야 했던 유료 테마와 플러그인 구독료는 이제 '0원'이 되었습니다. 개발 과정 역시 효율의 극치였습니다. 바이브 코딩으로 복잡한 아키텍처와 기능을 단기간에 구축했습니다. 결국 비용은 최소화하고 기술의 주도권은 온전히 가져오면서, AI와 사람의 협업으로 고성능 웹사이트를 만들어낸 성공적인 사례가 되었습니다.

6. 유지보수의 자유

워드프레스를 쓸 때 가장 스트레스였던 것은 '업데이트'였습니다. 워드프레스 코어 업데이트, 테마 업데이트, 플러그인 업데이트... 버튼 하나 잘못 눌렀다가 사이트 전체가 깨져버린 경험, 다들 한 번쯤 있으실 겁니다. 보안 취약점 때문에 어쩔 수 없이 업데이트를 해야 하지만, 할 때마다 호환성 문제로 밤을 새워야 했습니다. 심지어 일부 플러그인들은 구독제 형태이기 때문에 기간이 지나면 업데이트를 위해 다시 결제를 해야됬었습니다.

자체 개발한 사이트는 그럴 걱정이 없습니다. 코드의 주권이 온전히 나에게 있기 때문입니다. 내가 코드를 수정하지 않는 한, 사이트는 영원히 그 모습 그대로, 고장 나지 않고 돌아갑니다. 외부 플러그인 서버가 다운되어 내 사이트가 느려질 일도 없습니다.

물론 내용을 수정하려면 코드를 열어야 하는 번거로움은 있습니다. 하지만 이 역시 바이브 코딩으로 해결됩니다. "프로젝트 섹션에 새로운 유튜브 영상 링크 추가해줘"라고 AI에게 말하면 코드를 짜줍니다. 익숙해지면 워드프레스 관리자 페이지에 로그인해서 메뉴를 찾아 들어가는 것보다 훨씬 빠르고 직관적입니다.

7. 결론 : 기술은 도구일 뿐, 본질에 집중하라

워드프레스는 여전히 훌륭한 도구입니다. 블로그나 뉴스를 매일 발행해야 하는 콘텐츠 중심 사이트라면 워드프레스가 정답일 수 있습니다. 하지만 사운드 스튜디오처럼 브랜딩, 포트폴리오, 퍼포먼스가 중요한 사이트라면, 그리고 유지 비용을 줄이고 싶다면 '무거움'을 벗어 던져야 합니다.

바이브 코딩은 그 탈출을 돕는 가장 강력한 열쇠입니다. 우리는 이제 개발자를 고용하거나 외주를 맡기지 않아도, AI라는 훌륭한 조수와 함께 상상하는 웹사이트를 현실로 만들 수 있습니다. 중요한 것은 '코딩 기술'이 아니라, 어떤 웹사이트를 만들고 싶은지에 대한 '명확한 기획'입니다.

이제 여러분의 차례입니다. 매달 나가는 호스팅 비용 고지서를 보며 한숨 쉬고 계신가요? 혹은 느려터진 사이트 속도 때문에 고객을 놓치고 있진 않나요? 지금 당장 에디터를 켜고 AI에게 말을 걸어보세요. 여러분만의 가볍고 강력한 집을 짓는 일, 생각보다 어렵지 않습니다.

💡 Pro Tip: 처음부터 완벽한 사이트를 만들려고 하지 마세요. '랜딩 페이지' 딱 한 장부터 시작해보세요. AI와 함께 한 장을 완성해보면, 전체 사이트를 만들 수 있다는 자신감을 얻게 될 것입니다.