매장을 운영하시는 분들이 홈페이지에 바라는 건 대개 비슷합니다. 어떤 곳인지, 뭘 파는지, 어디에 있는지, 어떻게 연락하는지가 한 화면에 정리되어 있으면 충분한 경우가 많습니다. cmshom.com 무료 웹디자인 에디터로 이런 원페이지를 직접 만들어본 과정을 정리했습니다.
편집을 시작하기 전에 소개 문구, 대표 서비스나 메뉴, 위치, 연락처 정도를 미리 메모해두면 작업이 훨씬 빨라집니다. 사진이 있다면 미리 골라두는 것도 좋습니다.
맨 위에는 가게 이름과 한 줄 소개가 들어가는 영역을, 그 아래에는 소개, 서비스나 메뉴, 위치·연락처 순서로 섹션을 하나씩 드래그해서 쌓아 올립니다. 레이어 트리에서 전체 순서를 한눈에 보면서 위아래로 옮길 수도 있습니다.
전화나 문의로 이어지는 버튼은 정렬·분산 기능으로 가운데 정렬해서 눈에 잘 들어오게 배치하는 게 좋습니다. 실제 코드는 이런 식으로 나옵니다.
<section class="contact">
<h2 class="contact-title">오시는 길</h2>
<p class="contact-address">주소를 이 자리에 입력합니다</p>
<a href="tel:0000000000" class="btn-primary">전화 문의</a>
</section>contact-title, btn-primary처럼 클래스명이 역할대로 붙어 있어서, 나중에 주소나 전화번호만 바꾸고 싶을 때 코드에서 해당 부분을 금방 찾을 수 있습니다.
매장을 찾는 손님은 휴대폰으로 검색해서 들어오는 경우가 많습니다. 브라우저 미리보기에서 화면 폭을 좁혀보면서 소개 문구나 버튼이 잘리지 않는지 확인해두면 좋습니다. 나란히 배치했던 섹션들은 화면이 좁아지면 자동으로 세로로 쌓이도록 코드가 짜여 있어서 따로 손댈 일은 많지 않습니다.
작업 내용은 서버가 아니라 브라우저에만 임시로 남기 때문에, 마음에 드는 형태가 나오면 ZIP으로 내려받아 보관해두시는 게 좋습니다. 받은 파일은 압축만 풀면 인터넷 없이도 바로 열리고, 이후 원하는 호스팅에 올려서 실제 주소로 운영할 수 있습니다.
메뉴나 페이지가 여러 개로 늘어날 계획이라면 AI 홈페이지 3분 개설(/ai-start)이나 10만원 제작 문의로 넘어가셔도 됩니다.