AI로 전기공사 회사 홈페이지를 만들 수 있을까? 실제 제작 사례
블로그
블로그 8분 읽기

AI로 전기공사 회사 홈페이지를 만들 수 있을까? 실제 제작 사례

코딩을 모르는 전기공사 사장님도 AI를 활용하면 전문적인 회사 홈페이지를 만들 수 있어요. 실제 제작 과정과 결과물을 공개합니다.

에이정 2026년 3월 20일

요즘 주변에서 이런 이야기를 자주 들어요. “우리 회사 홈페이지 좀 만들고 싶은데, 업체에 맡기면 300만원이래.” “직접 만들어 보고 싶긴 한데, 코딩은 하나도 모르는데 가능해?”

결론부터 말하면, 가능해요. 그것도 꽤 괜찮은 퀄리티로요. 오늘은 실제로 AI를 활용해서 전기공사 회사 홈페이지를 만든 과정을 처음부터 끝까지 보여드릴게요.

바이브코딩이 뭔가요?

바이브코딩(Vibe Coding)이라는 말, 혹시 들어보셨나요?

2025년 초에 AI 연구자 안드레이 카르파시(Andrej Karpathy)가 처음 쓴 용어인데요. 쉽게 말하면 “코드를 직접 짜는 게 아니라, AI에게 말로 설명해서 코드를 만드는 방식”이에요.

예를 들어, “전기공사 회사 홈페이지를 만들어줘. 깔끔하고 신뢰감 있는 느낌으로. 서비스 소개, 시공사례, 상담 신청 섹션을 넣어줘.” 이렇게 말하면 AI가 HTML, CSS, JavaScript 코드를 알아서 생성해줘요.

바이브코딩이 특히 좋은 점은 이런 거예요.

  • 코딩 지식이 전혀 없어도 시작할 수 있어요
  • 수정도 말로 해요. “버튼 색을 파란색으로 바꿔줘”라고 하면 끝
  • 외주 맡기면 몇 주 걸리는 작업이 몇 시간이면 끝나요

물론 한계도 있어요. 복잡한 기능(회원가입, 결제 시스템 등)은 아직 AI만으로는 어려워요. 하지만 회사 소개 + 서비스 안내 + 연락처 수준의 홈페이지라면 충분하고도 남아요.

실제 제작 과정 전기공사 회사 홈페이지

이번에 실제로 “천용전기공사”라는 전기공사 회사의 홈페이지를 AI로 만들어봤어요. 어떤 과정을 거쳤는지 순서대로 보여드릴게요.

1단계: 디자인 방향 정하기

가장 먼저 한 건 “어떤 느낌의 홈페이지를 만들까?”를 정한 거예요. AI한테 그냥 “홈페이지 만들어줘”라고 하면 매번 비슷하고 촌스러운 결과가 나와요. 그래서 참고할 사이트를 먼저 정했어요.

이번에는 토스(Toss) 웹사이트를 참고했어요. 토스의 특징은 이런 거예요.

  • 글씨가 크고 굵어서 시원한 느낌
  • 여백이 넉넉해서 깔끔함
  • 색상을 많이 쓰지 않아서 정돈된 느낌

이런 특징을 AI한테 전달하면, 단순히 “깔끔하게 만들어줘”라고 할 때보다 훨씬 좋은 결과가 나와요.

2단계: AI에게 구체적으로 요청하기

AI한테 이런 내용을 전달했어요.

  • 회사명: 천용전기공사
  • 주요 서비스: 주거용 전기공사, 산업용 전기공사, 태양광, 소방
  • 톤/느낌: 신뢰감 있고 모던하고 깔끔한
  • 참고 사이트: 토스(Toss)
  • 필요한 섹션: 히어로(메인), 서비스 소개, 시공사례, 진행절차, 회사소개, 상담 신청, 푸터

여기서 중요한 게 있어요. AI한테 한번에 다 시키면 안 돼요. 단계별로 나눠서 요청하는 게 핵심이에요.

1.먼저 전체 레이아웃(구조)만 잡아달라고 하고

2.그다음 각 섹션의 내용을 채워달라고 하고

3.마지막에 세부 디자인(색상, 간격, 폰트)을 다듬어달라고 해요

이걸 바이브코딩에서는 “3-Layer Pipeline”이라고 불러요. 한번에 시키면 퀄리티가 떨어지는데, 이렇게 나눠서 요청하면 결과물이 확연히 달라져요.

3단계: AI 느낌 제거하기

AI가 만든 초안은 괜찮지만, 자세히 보면 “AI가 만든 느낌”이 나요. 해외에서는 이걸 “AI Slop”이라고 부르는데, 이런 특징이 있어요.

  • 보라색 그라데이션 배경 (AI가 유독 좋아해요)
  • 똑같은 3칸 카드 레이아웃 반복
  • “Revolutionize your workflow” 같은 뻔한 문구
  • 모든 요소에 과한 그림자와 둥근 모서리

그래서 “하지 말 것” 목록을 미리 만들어 두고 AI한테 전달했어요. 보라색 금지, 과한 그림자 금지, 뻔한 레이아웃 금지 같은 규칙이요. 이것만으로도 결과물 퀄리티가 확 올라가요.

4단계: 영상 배경 추가하기

마지막으로 히어로 섹션(메인 영역)에 실제 전기공사 작업 영상을 배경으로 넣었어요. 이건 Pixabay 같은 무료 영상 사이트에서 다운받은 거예요.

영상 위에 반투명 어두운 오버레이를 깔고, 그 위에 흰색 텍스트를 올리면 전문적인 느낌이 확 살아나요. 이것도 AI한테 “히어로 배경에 영상 넣어줘”라고 말하면 코드를 자동으로 생성해줘요.

완성된 홈페이지 살펴보기

최종 완성된 홈페이지는 이런 구성이에요.

메인 히어로: 전기공사 작업 영상이 배경에서 자동 재생되고, 그 위에 “전기 걱정 없는 공간, 저희가 만듭니다.”라는 카피가 올라가 있어요. 시공 실적 2,400건 이상, 업력 20년, 고객 만족도 99.2% 같은 신뢰 지표도 함께 보여줘요.

서비스 섹션: 주거용 전기공사, 산업용 전기공사, 태양광 설비, 소방 전기공사 네 가지를 카드 형태로 깔끔하게 정리했어요. 각 카드에는 세부 서비스 태그도 달아뒀어요.

시공사례: 실제 시공 사진을 넣을 수 있는 영역이에요. 지금은 플레이스홀더로 되어 있는데, 실제 사진만 넣으면 바로 쓸 수 있어요.

진행절차: 상담 → 견적 → 시공 → 검수, 4단계를 시각적으로 보여줘요. 고객 입장에서 “이 회사에 맡기면 어떤 과정으로 진행되는구나”를 한눈에 알 수 있어요.

상담 신청: 전화번호, 카카오톡 상담 버튼, 운영시간이 포함된 CTA(Call to Action) 영역이에요.

반응형도 적용되어 있어서, 모바일에서도 잘 보여요. 이 모든 걸 AI와 대화하면서 만드는 데 걸린 시간은 약 2~3시간 정도예요.

AI로 홈페이지를 만들 때 주의할 점

제가 직접 만들어보면서 느낀 주의사항을 정리해볼게요.

첫째, AI한테 막연하게 시키면 안 돼요. “예쁘게 만들어줘”보다는 “토스 스타일로, 파란색 포인트, 여백 넉넉하게”처럼 구체적으로 말해야 해요. 레퍼런스 사이트 하나를 정해서 알려주는 게 가장 좋습니다.

둘째, 한번에 완성하려고 하면 안 돼요. 구조 먼저, 내용 다음, 디자인 마지막. 이 순서를 지켜야 해요.

셋째, 복잡한 기능은 별도 개발이 필요해요. 견적 자동 계산, 예약 시스템, 결제 기능 같은 건 AI만으로는 한계가 있어요. 회사 소개 수준의 홈페이지에는 충분하지만, 기능이 많이 필요하다면 전문가가 필요합니다.

넷째, 호스팅과 도메인은 별도로 준비해야 해요. AI가 만들어주는 건 코드(파일)이에요. 이걸 인터넷에 올리려면 호스팅 서비스(Vercel, Netlify 등)에 업로드하고, 도메인을 연결해야 해요.

이런 분들에게 추천해요

  • 홈페이지가 필요한데, 외주 비용이 부담되는 소규모 업체 대표님
  • 간단한 회사 소개 + 연락처 수준의 홈페이지면 충분한 분
  • AI 활용에 관심이 있고, 직접 해보고 싶은 분
  • 기존 홈페이지가 너무 오래되어서 리뉴얼하고 싶은 분

반대로, 쇼핑몰이나 예약 시스템처럼 복잡한 기능이 필요하다면 전문 업체에 맡기는 걸 추천해요. AI 홈페이지 제작은 “정보 제공형 사이트”에 가장 잘 맞아요.

마무리

오늘 보여드린 것처럼, AI를 활용하면 코딩 지식 없이도 꽤 괜찮은 홈페이지를 만들 수 있어요. 물론 전문 개발자가 만든 것과 동일한 퀄리티는 아니지만, 소규모 업체의 첫 홈페이지로는 충분해요.

중요한 건 AI 홈페이지 제작도 결국 “어떻게 요청하느냐”에 달려 있다는 거예요. 구체적인 레퍼런스를 보여주고, 단계별로 나눠서 요청하고, AI 느낌을 제거하는 규칙을 적용하면 외주 맡긴 것 같은 결과물을 얻을 수 있어요.

AI가 점점 더 발전하면서, 앞으로는 이런 작업이 훨씬 쉬워질 거라고 생각해요. 전기공사업체 사장님들도 한번 도전해보시는 건 어떨까요?

혹시 AI로 홈페이지 만드는 것에 대해 궁금한 점이 있다면, 문의하기를 통해 말씀하시면 됩니다. 유용한 정보가 되었으면 좋겠습니다. 감사합니다!

자주 묻는 질문 (FAQ)

Q. AI로 만든 홈페이지, 실제로 사용할 수 있나요?

A. 네, 가능해요. 호스팅 서비스(Vercel, Netlify 등)에 올리면 실제로 접속 가능한 웹사이트가 돼요. 도메인을 연결하면 “www.회사명.com”으로도 접속할 수 있어요.

Q. 비용은 얼마나 드나요?

A. AI 툴 자체는 무료~월 2만원 수준이에요. 호스팅은 무료(Vercel, Netlify 기본 플랜)로 가능하고, 도메인만 연 1~2만원 정도 들어요.

Q. 코딩을 전혀 몰라도 되나요?

A. 기본적인 건 몰라도 돼요. 다만 “HTML이 뭔지”, “CSS가 뭔지” 정도의 개념만 알면 AI한테 수정 요청할 때 훨씬 수월해요. 이것도 AI한테 물어보면 알려줘요.