[AI 활용] 세무사 홈페이지 제작-2(完)
세무사 지인을 위한 개업 선물
소상공인, 자영업자, 초기 스타트업을 대상으로 한 달에 한 개 정도 무료로 워드프레스 홈페이지를 제작해 드리고 있습니다. 도움이 필요한 분은 편히 연락주세요.
자세한 내용은 이곳에서 확인해 주세요.
https://bit.ly/roy-homepage-inquiry
1편에서는 AI와 워드프레스를 활용해 어떻게 기획과 시안을 만들었는지를 다뤘다. 이번 2편에서는 실제 제작 과정에서 겪었던 시행착오와 깨달음을 공유한다. 만들어진 사이트는 이곳에서 확인할 수 있다:
실제로 젊고 뛰어난 세무사 두 명이 개업한 만큼, 단순 세무 상담부터 기장까지 모두 맡길 수 있다.
법인과 부동산에 특히 집중하는 대표인데, 당장 근로종사자인 나는 세무 상담 정도가 가장 유효했다. 이때 큰 도움을 받은 적 있어서 만족감이 높은 편.
(토X와 삼X삼에서 40만 원씩 뱉어내라 하던 걸, 이들에게 맡기니 40만 원 환급금이 되어 돌아왔다. 감동 실화)
1. 워드프레스 제작: 닷홈 vs 카페24
닷홈의 무료호스팅 ⓒ작가편집처음엔 닷홈을 통해 워드프레스를 무료로 체험했다. 세팅된 워드프레스 어드민 페이지를 이용하는 방식은 카페24와 크게 다르지 않았지만, 워드프레스라는 오픈소스를 가공한 업체마다 특징이 있었기에, 어드민 페이지의 UI/UX가 조금씩 달랐다.
두 곳 모두 Twenty-Twenty Four Template을 활용했는데, 무료로 원하는 수준까지 충분히 테스트할 수 있다는 점에서 닷홈이 되게 편했다. 개인 포트폴리오 사이트를 만들어보고 싶은 사람이라면 닷홈을 먼저 써보는 것도 좋은 선택이라고 생각했다.
닷홈 vs 카페24 ⓒ작가편집다만 최종 제작은 카페24를 통해 진행했다. 두 가지 이유가 있었다.
1. 월 플랜 비용: 웹 트래픽이 적더라도 최소한의 확보를 해놓는 편이 좋다고 생각했는데, 가장 미니멈 플랜은 카페24가 더 저렴했다. 개발씬을 잘 모르는 세무사에게 그래도 무리없이 요구할만한 금액이라고도 생각했다.
2. 인지도: 내가 언제까지고 유지보수할 것은 아니기에, 필요하면 다른 전문가가 유지보수하기 편해야 한다고 생각했다. 그런 측면에서 '카페24 워드프레스'를 선택한 것도 있다.
2. 러닝커브
워드프레스 자체는 그리 어렵지 않았다. 블록을 배치하거나 블록 안에 또 다른 블록을 넣는 방식이 피그마의 오토레이아웃과 크게 다르지 않았기 때문이다. HTML 구조와 CSS Flexbox에 대한 이해가 있다면, 그 기능이 GUI로 시각화된 웹 빌더를 다루는 데 큰 어려움이 없을 것이다.
다만 가장 답답했던 부분은 CSS 수정이었다. 처음에는 CSS를 어디에서 고칠 수 있는지조차 찾지 못했다. 아무리 깔끔한 디자인을 만들어도 제공하는 기능만으로는 한계가 있었고, 원하는 인터랙션을 주려면 CSS가 반드시 필요했다. 도대체 어디에서 적용해야 하는지 알 수가 없었다. 참고했던 다른 페이지들도 모두 CSS가 적용되어 있었지만, 그 방법을 찾는 데 애를 먹었다.
워드프레스 CSS 수정 방법 ⓒ작가편집결국 Perplexity를 통해 해결 방법을 찾아냈는데, 그 때의 기분이란..
CSS는 CSS Sheet처럼 동일하게 사용하면 된다. Class나 ID를 지정한 후, 스타일을 먹이면 되는 방식.
처음에는 차라리 HTML 코드 블록을 활용해 인라인 스타일을 넣은 구조로 직접 코드를 짜서 배포할까 생각도 했다. 그러나 추후 유지보수 때문에 선택한 고민이었다.
그 외의 부분은 크게 어렵지 않았다. 제품 기획 경험과 프로덕트 매니저로서 쌓아온 경험이 의외로 큰 도움이 되었다.
3. 웹 빌더의 단점
디자인을 처리하는데 있어 가장 큰 걸림돌은 Global CSS였다. 로컬에서 HTML/CSS를 작성하면 잘 작동했는데, 워드프레스에 배포하면 내부 컨테이너의 max-width 값이 다르게 적용되거나, 모바일 화면에서 레이아웃이 깨지는 문제가 발생했다.
Global 레이아웃 ⓒ작가편집알고 보니, 워드프레스처럼 웹 빌더들은 자신만의 Global CSS가 존재하기 때문에, 완성된 HTML/CSS 위에 지정된 글로벌 CSS를 덮어씌우는 구조로 동작했다.
나의 경우, Twenty-Twenty Four Template 기준으로 '어드민 페이지 > 테마 편집기 > 스타일 > 레이아웃'에서 설정된 값이 전역으로 강제 적용되었다. 이 사실을 이해하는 것도 시간이 걸린 듯.
해당 레이아웃을 보면, 보다시피 '모바일'에 대한 내용은 없다. 모바일은 @mediaquiery를 활용하여, 아까 언급한 '추가 CSS'에서 따로 적용해 주자.
4. 사소하지만 중요한 것들
4.1 네이버 지도 API
지도를 깔끔하게 넣고 싶어 네이버 HTML 구조 추출기를 찾아봤는데, 이미 서비스가 종료되어 사용할 수 없었다. 구글맵이나 카카오맵은 마음에 들지 않아 결국 네이버맵 API를 직접 임베딩하는 방식으로 진행했다. 다만 임베딩으로 처리하니 모바일에서 URL을 잘 불러오지 못하는 이슈가 존재했다.
네이버맵 구현 ⓒ작가편집결국 네이버 공식 API를 사용해서 해결하기로 결정. 네이버 클라우드 개발자 문서를 참고해 API를 연결할 수 있었다. 기획할 때 API를 자주 다뤄본 경험이 도움이 되었다.
사용한 코드는 이 링크에서 확인할 수 있다.
4.2 최근 게시글 불러오기
(좌) 날 것 그대로의 모습 / (우) 스타일 적용 후 ⓒ작가편집워드프레스는 기본적으로 CMS를 제공하는데, 워드프레스를 고른 이유 중 하나가 바로 이것. 세무사가 블로그처럼 콘텐츠 업로드도 할 수 있도록 하기 위함이었다. 블로그 컴포넌트는 리스트 태그 구조로 자동 생성되며, 최신 콘텐츠를 불러오는 JS가 기본 포함되어 있었다. 그래서 이 부분은 오히려 컴포넌트를 그대로 쓰는 게 더 편했다.
Class 네임만 정의하고, 원하는 스타일은 Claude를 활용해 코드를 적용했다. 다만, 썸네일 이미지처럼 특정 구조가 추가로 감싸져 있는 경우는 직접 개발자 도구를 열어 구조를 분석해야 하는 게 단점이라면 단점.
사용한 코드(CSS)는 이 문서에서 확인할 수 있다.
4.3 TOP 버튼
제작 과정에서 새 플러그인을 발견했는데, 원하는 위치에 JS까지 삽입할 수 있는 기능이 있었다. 이를 활용해 TOP 버튼을 테스트 삼아 구현했다. 디자인 스타일과 요구사항을 Claude에게 넘기자, 인터랙션까지 자연스럽게 적용된 버튼을 만들어줬다. 전역에 적용시켜서 현재는 모든 페이지에서 잘 동작 중이다.
4.4 Contact Form & SEO
(좌) 날 것 그대로의 모습 / (우) 스타일 적용 후 ⓒ작가편집홈페이지에서 가장 중요한 건 결국 Contact(도입문의)라고 생각한다. 플러그인 Contact Form 7을 설치해 기본 폼을 만들었는데, 처음엔 HTML 원형 그대로라 디자인이 어색했다. 개발자 도구를 통해 CSS를 직접 찾아 강제로 스타일을 입혔다.
커스터마이징에는 한계가 있어, 지금은 “폼 입력 → 메일 전송 → 어드민 페이지 저장” 정도만 구현해둔 상태다. 다만 이 값이 DB(구글 스프레드시트, 노션 등)에만 적재되도록 하면 메신저 알림이나 자동화 연동도 간단하다. 다만 현재같이 MVP 단계라면 이 정도면 충분하다고 판단했다.
폼 접수시엔 사진처럼 워드프레스 '관리자' 계정에게 이메일을 발송한다. 이메일 템플릿도 HTML 태그를 활용해서 처리할 수 있어서 좋았다.
템플릿을 만들어 적용한 이메일 ⓒ작가편집Contact Form 7의 CSS에 사용한 스타일과 이메일 템플릿은 이 문서에서 확인할 수 있다.
그래서
거창하진 않지만 그래도 작성한 코드를 공개한 이유는 나처럼 워드프레스 뉴비들이 덜 해맸으면 하는 마음과 어차피 공개해도 다음에 더 잘 만들 것이기 때문이다. 이번엔 시행착오가 담긴 코드여서 지저분하지만, 다음엔 더 최적화하여 처리할 듯.
이번 경험이 재미있어서, 앞으로는 한 달에 한 번 정도 무료로 사이트를 제작해볼까 한다. 이번처럼 간단한 홈페이지 수준이라면 큰 부담 없이 도전할 수 있을 것 같다. 홈페이지가 필요한 사람이 있다면 브런치 문의를 활용하여 언제든 편히 제안달라.
다음 글은 바이브 코딩에 관한 이야기다. 애인이 회사에서 겪는 문제를 실제로 해결하기 위해, 직접 웹 서비스를 기획하고 배포한 과정을 다룰 예정이다.
ⓒ 2025. 327roy All rights reserved.
