AI로 웹사이트를 구축한 방법 — 사례 HD SofT: 13개 언어, WordPress, 자동화와 분석

이 글은 HD SofT가 인공지능을 활용해 자사 웹사이트를 어떻게 구축했는지를 다룹니다 — Squarespace 기반에서 WordPress + Bricks Builder로, 13개 언어, 자체 서버, 자동화된 배포 파이프라인과 분석을 갖춘 형태로. 그리고 그 과정에서 배운 점들도 함께 정리했습니다.

왜 Squarespace에서 옮겼는가

이전 사이트는 Squarespace 위에 구축되어 있었습니다. 오랫동안 잘 활용했지만, 세 가지 이유로 교체가 불가피했습니다.

  • 다국어 지원이 너무 비싸고 번거로웠습니다. 우리는 핀란드 소프트웨어 기업이지만 프로젝트는 전 세계에서 진행됩니다. 콘텐츠를 13개 언어로 제공하고자 했는데, Squarespace의 다국어 기능은 별도 부가 기능 없이는 한계가 있었고 매달 비용이 증가했습니다.
  • 단일 공급자의 생태계에 종속되어 있었습니다. 우리는 데이터베이스, 서버, 배포 프로세스, 콘텐츠 전반을 직접 소유하고자 했습니다. 그래야만 새로운 AI 및 통합 솔루션을 자유롭게 시도할 수 있습니다.
  • SEO와 AI 검색에는 제어권이 필요합니다. 구조화 데이터(JSON-LD), llms.txt, 개별 페이지의 Open Graph 태그는 표준 서비스에서는 원하는 방식으로 처리하기 어렵습니다.

그래서 처음부터 다시 구축하기로 결정했고, 동시에 소프트웨어 기업이 자체 운영급 웹사이트를 최신 AI 도구로 어디까지 만들 수 있는지 실제로 시험해 보기로 했습니다.

스택 선택: WordPress, Bricks 그리고 자체 VPS

플랫폼으로 WordPress, 페이지 빌더로 Bricks Builder, 서버로는 Docker 및 Kubernetes 기반의 자체 VPS를 선택했습니다.

  • WordPress는 표준이기 때문입니다. REST API, Yoast SEO, 그리고 우리가 필요로 하는 모든 영역에 대한 10년 이상의 지원 생태계가 갖춰져 있습니다. Yoast SEO, Redirection(URL 리디렉션), Converter for Media(자동 WebP 변환), AI Engine을 함께 사용합니다.
  • Bricks Builder가 비주얼 레이어를 담당합니다. 중요한 결정 하나: 모든 스타일(타이포그래피, 컬러, 여백, 그리드)을 Bricks의 Theme Style 아래에 두었습니다 — 개별 페이지에 픽셀 값을 하드코딩하지 않습니다. 이렇게 하면 AI가 새 콘텐츠를 만들어도 기존 디자인 시스템에 자연스럽게 맞춰지며, 별도의 수정 작업이 필요 없습니다.
  • 자체 VPS는 완전한 통제권을 제공합니다. 비용은 예측 가능하고, 서버는 핀란드에 있으며, 같은 환경에 n8n 자동화나 다른 프로젝트를 함께 운영할 수 있습니다.

무엇을 빼었을까요? 다국어 플러그인입니다. 대신 각 언어마다 고유 경로의 페이지를 두는 자체 솔루션을 만들었습니다(예: /en/services/, /de/dienstleistungen/). URL 구조가 단순하고, 검색 엔진은 각 페이지를 번역 마법이 아닌 독립된 페이지로 인식합니다.

AI를 활용한 콘텐츠 제작 — 반복 가능한 프로세스

모든 콘텐츠의 기준은 FI-master입니다. 우리가 직접 작성하고 편집하는 핀란드어 원본입니다. 이것이 확정된 후에야 AI가 나머지 12개 언어로 번역합니다.

실제 프로세스는 다음과 같이 진행됩니다.

  1. FI-master를 직접 작성하고 교정합니다. 핀란드어는 사람의 검토가 반드시 필요합니다 — 복합어, 쉼표 사용, 미묘한 뉘앙스는 AI가 자주 놓칩니다.
  2. 본문이 확정되면 번역 스크립트를 실행하여 필요한 모든 언어로 버전을 생성합니다(en, de, es, fr, pt, pl, ro, tr, hi, ko, ar, fa).
  3. 각 번역에는 _hdsoft_translation_key 메타 필드가 추가되며, 이는 FI-master 게시물의 ID를 가리킵니다. 이 방식으로 시스템은 어느 버전들이 한 묶음인지 인식합니다.
  4. 대표 이미지와 게시일은 마스터에서 자동으로 복사되어, 번역 버전들이 시각적으로 일관성을 유지합니다.

RTL 언어(아랍어, 페르시아어)는 특별히 신경 씁니다: HTML의 dir="rtl" 속성, 올바른 방향의 레이아웃, 그리고 원어민 검수자가 마지막 교정을 맡습니다.

AI는 새로운 정보를 추가하지 않으며, 숫자를 만들어 내지도, 어조를 바꾸지도 않습니다. 그 역할은 단순합니다. 번역하는 것이지, 다시 쓰는 것이 아닙니다.

기술적 자동화: REST API, mu-plugins, GitHub Actions

여기가 AI가 실제로 시간을 절약해 주는 영역입니다.

페이지는 REST API를 통해 구축됩니다. Bricks에서는 개별 페이지 구조가 _bricks_page_content_2 메타 필드에 JSON 형태로 저장됩니다. 새 서비스 페이지를 만들고자 할 때, AI가 Bricks 호환 JSON 구조(Section → Container → Block → Heading + Text)를 생성하고 REST API로 POST 하면 페이지가 완성됩니다. 편집기에서 바로 교정할 수 있지만, 핵심 작업은 단 한 번의 명령으로 끝납니다.

mu-plugins가 특수 작업을 담당합니다. 표준 구성 외에 몇 가지 자체 mu-plugin을 사용합니다.

  • hdsoft-jsonld.php — Yoast의 기본 위에 확장 SEO 스키마(Service, SoftwareApplication, CreativeWork, ContactPage, FAQPage)를 생성합니다.
  • hdsoft-tracking.php — Google Analytics, Lead Feeder, Bing Webmaster 태그를 삽입합니다.
  • hdsoft-domain.php — 페이지에 노출되는 모든 URL을 최종 hdsoft.fi 도메인으로 강제 설정합니다(컷오버 시 URL 잔재를 방지).
  • hdsoft-llms.php/llms.txt 파일을 올바른 UTF-8 charset과 함께 AI 검색 엔진에 제공합니다.

모든 mu-plugin은 GitHub Actions를 통해 자동 배포됩니다. main 브랜치에 push하면 러너가 변경 사항을 K8s 클러스터에 적용합니다. 수동 kubectl cp 명령은 필요 없습니다.

하나의 글로벌 JS가 다국어 내비게이션을 처리합니다. 헤더 템플릿의 Bricks Code 요소가 URL의 언어 코드를 읽어 메뉴, 푸터, 이전/다음 링크를 번역합니다. 즉, 언어별 헤더를 만드는 대신 새 서비스를 추가할 때마다 단 하나의 파일만 업데이트합니다.

SEO와 GEO를 처음부터 구조에 반영

AI 검색(ChatGPT, Perplexity, Claude, Bing Copilot)은 Google과는 다른 영역입니다. 이들은 링크를 인덱싱하고 순위 매기는 대신, 페이지를 요약으로 읽고 질문에 직접 답합니다. 이를 위해서는 두 가지가 필요합니다.

  1. 구조화 데이터를 JSON-LD 형식으로 제공해야 합니다. Yoast가 기본 항목(WebPage, Article, BlogPosting, BreadcrumbList, Organization)을 처리합니다. 자체 hdsoft-jsonld.php가 핵심 특수 유형을 추가합니다: 서비스 페이지의 Service, 제품의 SoftwareApplication, 그리고 콘텐츠에 Q&A 패턴이 있을 때 자동으로 추가되는 FAQPage입니다.
  2. llms.txt를 사이트 루트에 둡니다. 이는 회사가 무엇인지, 무엇을 하는지, 추가 정보를 어디서 얻을 수 있는지에 대한 짧은 요약입니다. 새 서비스, 제품, 프로젝트를 추가할 때마다 이를 최신 상태로 유지합니다.

이 조합이 작동합니다. AI 검색은 “HD SofT가 무엇을 하는가” 같은 질문에 정확히 답하며, 추측하거나 다른 회사와 혼동하지 않습니다.

또한 모든 페이지에는 다음이 적용됩니다.

  • URL 접두사로부터 생성되는 JSON-LD의 inLanguage 필드
  • 번역 버전을 위한 og:locale 태그(fi_FI, en_US, de_DE 등)
  • 모든 번역이 준비되면 추가되는 hreflang 링크
  • 답변 중심의 단락 — 짧고, 질문과 답변 형식으로, AI가 한 문장 답을 만들기 쉽게

분석은 동시에 연결

데이터 없이는 웹사이트를 개선할 수 없습니다. 다음을 즉시 연결했습니다.

  • Google Analytics 4 — 기본 트래픽, 채널, 페이지, 사용자 행동.
  • Google Search Console — 자연 검색 노출, 상위 검색어, 인덱싱 이슈.
  • Lead Feeder — 식별 가능한 IP 대역에서 페이지를 반복 열람할 때 기업 단위 식별.
  • Bing Webmaster Tools — Bing은 여전히 특히 B2B 시장에서 중요하며, Microsoft의 Copilot이 Bing을 읽습니다.

특히 한 가지: 주간 마케팅 스냅샷입니다. GA4 데이터와 Search Console 데이터를 가져와 이전 주와 비교한 뒤 Markdown 요약을 출력하는 커맨드라인 스크립트를 작성했습니다. 채널, 국가, 상위 페이지, 상위 검색어, 차이값을 한눈에 보여줍니다. 화려한 대시보드가 아니라 실용적인 리포팅이지만, 트렌드를 놓치지 않게 해 줍니다.

AI 보조 개발 파이프라인은 여기서 특별한 이점을 제공했습니다. GA4나 Search Console 데이터 요청을 올바른 구조로 만들어야 할 때 AI가 몇 줄의 코드로 처리하고 결과를 읽기 좋은 형태로 다시 해석해 줍니다.

DNS 컷오버와 사후 관리

운영 도메인을 hdsoft.fi로 전환한 날짜는 2026년 5월 4일입니다. 컷오버는 다음과 같이 준비했습니다.

  • 구 Squarespace URL에서 신규 URL로 향하는 28개의 리디렉션을 구축했습니다 — 모두 상대 경로로 설정해 도메인이 바뀌어도 그대로 작동합니다.
  • 404 오류를 GA4의 별도 이벤트로 연결해, 깨진 링크를 빠르게 발견할 수 있도록 했습니다.
  • 사이트맵은 DNS 전환 이후에 Search Console에 제출했습니다. 그 전에 제출하면 Google이 오류로 표시하기 때문입니다.

컷오버 후에는 처음 4주 동안 매주, 이후에는 매월 마케팅 스냅샷을 실행합니다. 이렇게 하면 어떤 URL이 404로 남았는지, 어떤 페이지가 예상보다 잘 작동하는지(그렇다면 콘텐츠 추가) 빠르게 파악할 수 있습니다.

무엇을 배웠는가

가장 중요한 깨달음은 기술이 아니라 작업 방식에 있었습니다.

  • AI가 콘텐츠를 만들기 전에 스타일을 한곳에 모아 두십시오. Bricks Theme Style과 Global Classes는 AI의 도구입니다. 구조가 미리 갖춰져 있으면 기계는 빈 자리를 채우기만 하면 됩니다. 스타일을 열어 두면 AI가 페이지마다 픽셀을 하드코딩하고, 곧 혼란이 시작됩니다.
  • 번역에 앞서 FI-master를 확정하십시오. 마스터가 계속 바뀌면 번역은 서로 다른 세대로 분기되어 갑니다. 단일 진실의 원천을 두고 — 나머지는 거기서 파생됩니다.
  • 시각적 검수는 필수입니다. AI는 JSON 수준에서 흠 없는 페이지를 만들 수 있지만, 사용자에게는 엉망으로 보일 수 있습니다. 변경 후마다 Playwright 기반 스크린샷을 실행하십시오 — 사람이 읽어야지, 검증기만으로는 부족합니다.
  • 핀란드어에는 사람이 필요합니다. 복합어, 쉼표, 어조에서 AI는 기계가 알아차리지 못할 실수를 합니다. 원어민을 마지막 단계로 두십시오.
  • 컨텍스트를 한 파일에 모으십시오. 우리는 저장소 루트에 CLAUDE.md를 두고 있습니다. 모든 규칙, 도구, 경로, 배포 메커니즘이 그 안에 있습니다. AI 세션을 시작하면 그 파일을 먼저 읽습니다. 사람도 똑같이 합니다 — 지침을 먼저 읽으면 다시 시작할 일이 없습니다.

결국 최고의 AI 도구는 사용자가 멈출 줄 아는 도구입니다. 생성은 저렴하지만, 품질 보증이야말로 승부처입니다.

같은 방식을 턴키로 원하십니까?

HD SofT는 AI 기반 웹 서비스 및 콘텐츠 프로젝트를 고객을 위해 구현합니다. 같은 방법론, 같은 품질 수준, 같은 통제력입니다 — WordPress + Bricks, 자동화 파이프라인, 다국어 지원과 분석까지, 페이지가 공개되기 전에 모두 준비됩니다.

문의하기: 문의 양식, 디지털 마케팅 또는 소프트웨어 개발.

Related posts