간단한 소개 페이지 하나 만들려고 여러 툴을 알아보다가 회원가입부터 걸려서 그냥 닫아버린 경험, 한 번쯤 있으실 겁니다. cmshom.com의 무료 웹디자인 에디터는 그런 절차 없이 브라우저를 열자마자 바로 작업을 시작할 수 있습니다. 완전 무료이고 별도 가입 절차도 없습니다.
주소만 입력하면 편집 화면이 뜹니다. 아이디도 비밀번호도 이메일 인증도 필요 없습니다. 텅 빈 캔버스에 원하는 요소를 하나씩 올리면서 페이지를 채워나가면 됩니다.
제목, 문단, 버튼, 구분선 같은 요소를 캔버스 위로 드래그하면 자리를 잡습니다. 요소를 옮길 때는 스마트 가이드가 자동으로 나타나서 다른 요소와 줄을 맞춰주고, 정렬·분산 기능으로 여러 개를 한 번에 가지런히 놓을 수 있습니다. 눈금자와 가이드선도 켜둘 수 있어서 간격을 눈대중이 아니라 기준선에 맞춰 잡을 수 있습니다.
요소를 옮기거나 지우다가 마음이 바뀌어도 괜찮습니다. undo·redo로 바로 전 상태로 되돌릴 수 있어서, 여러 번 시도해보면서 배치를 잡아가도 됩니다. 여러 요소를 한꺼번에 옮기고 싶을 때는 다중선택으로 묶어서 같이 움직이면 됩니다.
편집하는 동안 브라우저가 알아서 작업 내용을 임시저장합니다. 다만 이 저장은 서버가 아니라 지금 쓰고 있는 브라우저 안에만 남습니다. 다른 컴퓨터나 다른 브라우저로 열면 이어받을 수 없다는 뜻이니, 어느 정도 완성됐다면 아래 방법으로 소스를 내려받아 따로 보관해두는 게 안전합니다.
레이어 트리에서 전체 구조를 확인하고 마음에 들면 HTML·CSS·JS 소스를 ZIP 파일로 내려받습니다. 압축을 풀면 이런 구조가 됩니다.
<section class="hero">
<h1 class="hero-title">우리 동네 작은 카페</h1>
<p class="hero-desc">매일 아침 직접 로스팅합니다</p>
<a href="#contact" class="btn-primary">문의하기</a>
</section>index.html을 더블클릭하면 인터넷 연결 없이도 그대로 열립니다. 코드는 h1, p, a 같은 시맨틱 태그로 짜여 있고, 클래스명도 hero-title처럼 뭘 가리키는지 바로 알 수 있게 붙습니다. Wix는 이렇게 소스를 통째로 내려받는 기능 자체가 없고 Webflow나 Framer는 소스 내보내기가 유료인 경우가 많은데, 여기서는 이 과정이 전부 무료입니다.
첫 페이지를 만들어보고 더 다양한 페이지가 필요해지면 AI 홈페이지 3분 개설(/ai-start)로 넘어가시거나, 10만원 제작 문의를 남겨주세요.