"홈페이지 외주, 이제 무거운 프레임워크 없이" — 비전공자도 Elena로 'HTML·CSS 먼저' 초경량 웹 컴포넌트 UI 키트 만들어 소상공인 홈페이지 납품으로 월 100만원 버는 5단계 실전 가이드

"React 배우다 지쳐서 부업은 포기했어요. 소상공인 사장님 홈페이지 하나 만드는데 왜 이렇게 무거운 걸 다 배워야 하죠?"
— 비전공자 수강생이 실제로 남긴 질문

동네 카페, 필라테스 스튜디오, 공방 사장님들이 원하는 건 의외로 단순합니다. "모바일에서 예쁘게 보이고, 전화·예약 버튼만 잘 눌리면 돼요." 그런데 많은 초보 개발자들은 이 간단한 요구를 처리하려고 빌드 도구, 상태관리, 번들러가 겹겹이 쌓인 무거운 프레임워크부터 붙잡습니다. 결과는? 배우다 지쳐 부업 시작도 못 하는 거죠.

이 글은 'HTML·CSS 먼저(HTML·CSS-first)' 철학의 초경량 웹 컴포넌트 도구 Elena로, 비전공자가 재사용 가능한 UI 키트를 만들어 소상공인 홈페이지를 납품하고 월 100만 원을 버는 현실적인 5단계 경로를 다룹니다.

왜 '프레임워크 없이'가 오히려 무기가 되는가

Elena는 표준 웹 컴포넌트(Web Components) 위에 얇게 얹힌 도구입니다. 핵심은 프로그레시브(progressive) 방식이라는 점이에요. 먼저 순수 HTML·CSS로 화면을 완성하고, 필요한 곳에만 컴포넌트를 '한 겹' 덧입힙니다. 자바스크립트가 로딩되기 전에도 페이지가 멀쩡히 보이죠. 소상공인 홈페이지에서 이건 곧 빠른 로딩 속도와 검색 노출 유리함으로 직결됩니다.

월 100만 원까지, 5단계 실전 로드맵

1단계 — HTML·CSS로 '한 장'부터 손으로 만든다

화려한 도구 대신 index.html 하나로 시작하세요. 상단 로고, 소개 문구, 예약 버튼, 오시는 길. 이 네 덩어리를 순수 HTML로 배치하고 CSS로 여백과 색을 잡습니다. 이 과정에서 "화면은 결국 박스의 배열"이라는 감각이 몸에 붙습니다.

2단계 — 반복되는 조각을 Elena 컴포넌트로

홈페이지엔 같은 모양이 계속 나옵니다. 버튼, 카드, 섹션 제목… 이걸 매번 복사·붙여넣기 하면 수정 지옥이 옵니다. Elena에선 이 조각을 <ttj-button> 같은 나만의 태그로 정의합니다. 색만 바꾸고 싶으면 정의 한 곳만 고치면 전부 반영됩니다.

3단계 — 업종별 'UI 키트'로 자산화

카페용 세트(메뉴 카드·영업시간·지도), 스튜디오용 세트(수업 안내·강사 소개·예약 CTA)를 각각 묶어두면, 다음 손님을 받을 때 제작 시간이 절반 이하로 줄어듭니다. 바로 이 바이브코딩 UI 키트가 부업의 진짜 엔진입니다. 시간이 줄면 시급이 오르고, 시급이 오르면 같은 단가로도 수익률이 뜁니다.

4단계 — 첫 납품은 '아는 가게'부터

낯선 영업은 어렵습니다. 단골 카페, 지인의 공방처럼 이미 신뢰가 있는 곳부터 "실비로 하나 만들어 드릴게요"라고 제안하세요. 완성물 하나가 곧 포트폴리오이자, 다음 손님을 데려오는 광고가 됩니다.

5단계 — 반복 수주로 월 100만 원 고정

건당 25만 원짜리 홈페이지 4곳이면 월 100만 원입니다. 키트가 쌓일수록 한 건당 투입 시간은 줄어들고, 유지보수(문구 교체·이미지 변경) 소액 계약까지 얹으면 수익은 더 안정적으로 굳어집니다.

정리 — 가벼움이 곧 실력이다

비전공자에게 필요한 건 더 무거운 도구가 아니라, 지금 아는 HTML·CSS를 수익으로 바꾸는 최단 경로입니다. Elena의 프로그레시브 웹 컴포넌트 방식은 그 경로를 놀랄 만큼 짧게 만들어줍니다. 한 장에서 컴포넌트로, 컴포넌트에서 UI 키트로, 키트에서 반복 수주로 — 이 흐름을 한 번만 완주하면 그다음은 복제입니다.

혼자서는 2단계 '컴포넌트화'와 3단계 '키트 자산화'에서 막히는 경우가 많습니다. 투더제이(TTJ) 코딩클래스 정규반에서는 HTML·CSS 기초부터 Elena 기반 UI 키트 제작, 실제 소상공인 납품 실습까지 이 5단계를 커리큘럼으로 함께 완주합니다. 부업의 '첫 완성'까지 옆에서 밀어주는 구조라, 배우다 지쳐 멈추는 흔한 실패를 피할 수 있습니다. 🙂