WordPress에서 정적 사이트로. Astro + Firebase + AI로 트리밍 살롱 사이트를 다시 만든 이야기

서론

가족이 운영하는 반려견·반려묘 전문 트리밍 살롱(Trimming Salon)의 웹사이트를 제작했습니다.

초기에는 별도의 블로그에 얹혀가는 형태로 WordPress로 운영하고 있었으나, 여러 사정 끝에 최종적으로 Astro + Firebase Hosting 정적 사이트로 리뉴얼했습니다.

이 기사에서는,

• 왜 WordPress를 그만두고 정적 사이트로 갈아탔는지
• 디자인을 「전용 웹 디자인 AI」에서 Claude로 바꿨더니 상상 이상으로 좋았던 이야기
• 공지사항을 Google 스프레드시트를 통해 코드를 만지지 않는 가족도 업데이트할 수 있도록 만든 고안

위와 같은 「선택과 고안」을 중심으로 써 내려가겠습니다. 마찬가지로 개인이나 가족의 가게 사이트를 의뢰받은 분들에게 참고가 되길 바랍니다.

WordPress에서 방침 전환으로

시작 단계에서는 자신의 블로그에 얹혀가는 형태로 WordPress로 운영하고 있었습니다.

다만,

• 예약 기능과 같은 동적인 메커니즘은 넣지 않는다 - 개인 점포 수준이므로 애초에 접속수도 적은 편

이라는 전제였기에, 블로그를 포함해 Astro + Firebase Hosting 정적 사이트가 비용도 절감되고 더 적합하다고 판단하여 갈아탔습니다.

정적 사이트로 바꾸길 잘했다고 생각하는 점은 이 두 가지입니다.

• 유지비가 거의 0… 서버를 상시 가동할 필요가 없어 러닝 코스트(Running Cost)가 들지 않음
• 향후 리뉴얼이 용이함… WordPress를 거치지 않는 구조 덕분에, AI 에이전트에게 "이 부분을 이렇게 고쳐줘"라고 부탁하기 쉬워 수정의 허들이 매우 낮음

비용도 절감하면서 수정도 하기 쉽다. 정적 사이트는 정말 딱 맞았습니다.

기술 스택

대략 다음과 같은 구성입니다.

항목	채택 기술
프레임워크	Astro
...

Astro는 "기본은 정적이지만, 필요한 부분에만 움직임을 더할 수 있다"는 점이 선택한 이유입니다. 가게 소개·메뉴·오시는 길처럼 거의 변하지 않는 페이지와 궁합이 좋으며, 공지사항처럼 일부에만 움직임을 주고 싶은 부분에도 대응할 수 있었습니다.

호스팅은 Firebase로 했습니다. 명령어 한 줄로 공개할 수 있고, 무료 티어(Free Tier)로 충분히 감당할 수 있는 규모라 운용이 매우 편합니다.

디자인 AI, 처음에는 전용 도구 → 금방 한도 도달 → Claude로

솔직히, 이 부분이 가장 전달하고 싶었던 내용입니다.

처음에는 "웹 전용 디자인 AI"로 디자인을 생성하려고 했습니다. 보기 좋은 결과물은 나오지만, 무료 이용 한도가 금방 도달해 버려서 시행착오를 겪던 도중에 손이 멈춰버렸습니다.

그래서 "밑져야 본전"이라는 생각으로 Claude에게 디자인과 사이트 제작을 통째로 부탁해 보았는데, 이것이 상상 이상으로 훌륭한 결과물이었습니다.

구체적으로 좋았던 점:

• "달빛 같은 부드러움"이라는 살롱의 컨셉을 전달하자, 다크 네이비 × 골드의 품격 있는 분위기로 정리해 주었다.
• 글자의 그라데이션, 부드럽게 나타나는 애니메이션, 스크롤을 따라오는 헤더, 스마트폰용 메뉴 등 "그럴듯한 연출"도 함께 구성해 주었다.
• 세세한 조정도 "조금 더 부드러운 인상으로", "여기는 여백을 넓게"와 같은 말로 하는 주문에 응해준다.

"전용 도구가 아니면 좋은 디자인이 나오지 않을 것"이라고 단정 짓고 있었는데, 컨셉과 이미지를 구체적으로 전달하면 범용 AI로도 충분히 훌륭한 결과물이 나온다는 것은 큰 수확이었습니다.

고안한 점: 공지사항을 가족이 직접 업데이트할 수 있도록

정적 사이트의 약점은 "내용을 바꿀 때마다 다시 만들기(재공개)가 필요하다"는 점입니다. 하지만 공지사항은 가게 주인이 엔지니어의 도움 없이 빠르게 업데이트하고 싶을 것입니다.

그래서 고안한 방법이, 공지사항만은 Google 스프레드시트에 작성하면 사이트에 자동으로 반영되는 구조입니다. 이렇게 하면 가족은 익숙한 스프레드시트에 한 줄 추가하는 것만으로 공지사항을 업데이트할 수 있습니다.

이미지 상으로는 스프레드시트에 다음과 같은 표를 준비해 두는 식입니다.

날짜	제목	본문
2025/04/01	영업시간 변경 안내	4월부터…
2025/04/20	GW 기간 휴무 안내	5/3~5/5은…

사이트 측에서는 표시할 때 이 스프레드시트(Spreadsheet)를 읽어와서 새로운 공지사항을 자동으로 정렬해 줍니다. 구조적으로는 Google이 제공하는 데이터 취득 인터페이스를 사용하고 있을 뿐이라서, 특별한 서버나 데이터베이스는 필요하지 않습니다. 추가 비용도 제로입니다.

이 방식의 장점과 주의점을 정리하면 다음과 같습니다:

• 👍 운영진은 스프레드시트에 작성하기만 하면 됩니다.
  사이트를 다시 만들 필요가 없음
• 👍 서버도 데이터베이스도 가질 필요가 없습니다 (=무료·간편)
• ⚠️ 스프레드시트의 내용은 실질적으로 공개 정보가 되므로,
  외부에 노출되어도 문제가 없는 내용만 게시할 것

"모든 것을 구축하는 것이 아니라, 업데이트하고 싶은 한 곳만 외부(스프레드시트)로 빼둔다"라는 절충안이 작은 가게의 사이트에는 딱 적당했습니다.

요약

• 동적 기능이 필요하지 않은 개인 점포 수준의 규모였기에, WordPress에서
  정적 사이트 (Astro + Firebase)로 리뉴얼
• 결과적으로
  유지비는 거의 0이며, AI 에이전트(AI Agent)를 통해 향후 수정이 용이한 구조로 구축
• 디자인은 전용 AI의 이용 한도를 계기로
  Claude로 전환. 컨셉을 말로 전달하면 실용적으로 충분한 완성도
• 공지사항은
  Google 스프레드시트 연동을 통해, 코드를 만지지 않는 운영진도 업데이트할 수 있도록 구성

코드를 잘 모르더라도, AI 에이전트와 "하고 싶은 것·어려운 점"을 말로 주고받으며 제대로 운영할 수 있는 사이트를 만들 수 있었다——는 것이 이번의 가장 큰 수확이었습니다. 이와 비슷하게 지인이나 가게의 사이트 제작을 부탁받은 분들에게 용기를 드릴 수 있다면 기쁘겠습니다.

Discussion