[도전기] AI와 HTML/CSS로 SEO 웹 에이전시 만들기
이번에 제가 직접 밑바닥부터 웹 디자인이랑 로컬 SEO 에이전시를 만들어가는 과정을 공유해보려고 해요. 기존에 잘 안 알려진 특별한 방식으로 접근할 거거든요. 제 목표는 단순히 툴이나 플랫폼에 의존하지 않고, 진짜 속도 빠르고 검색 노출도 잘 되는 웹사이트를 만드는 거예요. 각 섹션을 독립적인 HTML/CSS/JS 블록으로 만들어서 워드프레스 구텐베르크에 올리는 방식인데, 이렇게 하면 블록들이 쌓여서 나만의 라이브러리가 되고, 나중에는 새 사이트를 훨씬 빠르고 일정하게 만들 수 있더라고요. 우선 레퍼런스 사이트를 분석해서 디자인 원칙을 뽑아내는데, 이게 사이트 퀄리티를 확 가르는 핵심인 것 같아요. 프로토타입은 Lovable로 잡고, 코딩은 Claude로 HTML, CSS, 바닐라 JS를 짜요. 워드프레스는 CMS로만 쓰고 구텐베르크에 넣으면 클라이언트는 관리하기 편하고, 저는 프론트엔드를 완벽하게 제어할 수 있어서 좋거든요. SEO는 디자인 들어가기 전에 로컬 키워드 분석부터 제대로 해요. 제가 사는 동네는 인구 8만 정도의 중소도시인데, 확실히 로컬 SEO 경쟁이 널널하더라고요. 로컬 업체들 보면 사이트가 아예 없거나 너무 조잡해서, 기본기만 알아도 상위 노출하기가 정말 쉬워요. 시작한 지 두 달 정도 됐는데, 첫 달엔 테스트 겸 배관 업체 사이트를 하나 만들었어요. 그 뒤로는 스택 다듬고 레퍼런스 공부하느라 클라이언트 영업은 잠시 미뤄두고 에이전시 자체 사이트 만드는 데 집중하고 있거든요. 근데 이 에이전시 사이트 디자인이 제일 어렵네요. 남의 걸 참고할 수도 없고, 제 디자인 철학을 온전히 담아야 하니까요. 전문 디자이너가 아니다 보니 감각은 있는데 그걸 독창적인 결과물로 뽑아내는 게 생각보다 쉽지 않더라고요. 혹시 비슷한 고민 해보셨거나 의견 있으신 분들 계시면 같이 이야기 나누고 싶어요. 단순히 윅스로 저렴하게 사이트 파는 분들 말고, 진짜 제대로 된 웹 제품을 만드는 장인 정신 있는 분들을 찾고 있거든요. 계속 진행하면서 또 공유할게요. 읽어주셔서 감사해요!