PC 화면에서는 멀쩡했는데 휴대폰으로 열어보면 글자가 깨지거나 버튼이 화면 밖으로 나가는 경우, 한 번쯤 겪어보셨을 겁니다. cmshom.com 무료 웹디자인 에디터는 미디어쿼리를 기반으로 한 진짜 반응형 코드를 만들어주기 때문에 이런 문제를 따로 신경 쓸 일이 적습니다. 만드는 과정을 화면 크기 순서대로 정리해봤습니다.
일단 큰 화면 기준으로 요소를 드래그해서 배치합니다. 제목, 이미지, 버튼을 나란히 놓거나 여러 칸으로 나눠 구성해도 됩니다. 이 단계에서는 모바일을 따로 신경 쓰지 않아도 됩니다.
배치가 끝나면 브라우저 미리보기 기능으로 실제 페이지가 어떻게 보이는지 바로 확인할 수 있습니다. 창 크기를 좁혀보면서 화면이 좁아졌을 때 요소들이 어떻게 반응하는지 눈으로 확인하면 됩니다.
이미지와 버튼이 나란히 배치된 영역, 글자 수가 많은 문단, 여러 칸으로 나눈 목록 같은 곳이 화면이 좁아졌을 때 가장 먼저 무너지기 쉬운 부분입니다. 이런 영역 위주로 미리보기 화면 폭을 좁혀가며 확인하면 놓치는 부분 없이 점검할 수 있습니다.
나란히 배치했던 요소들은 화면이 좁아지면 미디어쿼리에 따라 자동으로 세로로 쌓이도록 코드가 만들어집니다. 다운받은 CSS를 열어보면 이런 식입니다.
.section-1 {
display: flex;
gap: 24px;
}
@media (max-width: 768px) {
.section-1 {
flex-direction: column;
}
}가로로 나란했던 .section-1 안의 요소들이 화면폭이 좁아지면 세로로 쌓이는 구조입니다. 별도로 손대지 않아도 이미 이렇게 짜여 있습니다.
!important 없이 정리된 CSS라 손보기도 쉽습니다코드는 !important 없이 정리돼 있고 들여쓰기도 되어 있어서, 직접 열어서 색상이나 간격 정도는 어렵지 않게 고칠 수 있습니다. 클래스명도 section-1, hero-title처럼 어떤 부분인지 알아보기 쉽게 붙어 있어서 원하는 부분을 찾기도 수월합니다. 글꼴도 Google Fonts가 자동으로 연결되어 있어서 별도로 폰트를 찾아 CDN을 걸지 않아도 됩니다.
모바일 화면까지 확인했다면 ZIP으로 소스를 받아 보관하시고, 여러 메뉴를 가진 다중 페이지 사이트나 더 복잡한 구성이 필요하면 AI 홈페이지 3분 개설(/ai-start)도 검토해보세요.