블록을 위에서 아래로 쌓는 것만으로는 아쉬웠던 분들, 주목해주세요. 이제 SOLAPI CMS에서 위젯을 원하는 자리에 자유롭게 놓는 '그리드' 모드로 페이지를 만들 수 있어요. 준비된 블록을 조립하는 것을 넘어, 디자인 툴처럼 캔버스 위에서 픽셀 단위로 직접 배치하는 새로운 방식입니다.
블록을 넘어, '자유 배치'로
기존 빌더(노코드 블록) 모드가 미리 만들어진 섹션을 세로로 쌓는 방식이라면, 새 그리드(자유 배치) 모드는 텍스트·이미지·버튼 같은 낱개 위젯을 격자 캔버스 위 원하는 좌표에 자유롭게 놓는 방식이에요. 겹치고, 나란히 두고, 여백을 마음대로 주는 것까지 전부 가능합니다.
페이지 본문은 이제 빌더 · 그리드 · 글 · HTML 네 가지 모드 중에서 고를 수 있고, 상단 드롭다운으로 언제든 전환돼요. 모드를 바꿔도 다른 모드에서 만든 콘텐츠는 지워지지 않으니 부담 없이 오갈 수 있습니다.
스튜디오 그리드 모드 페이지 빌드
픽셀 단위로 딱 맞게 — 정밀 격자와 스마트 가이드
자유 배치라고 해서 어긋나 보일까 걱정하지 않으셔도 돼요.
정밀 격자 — 위젯이 px 단위로 촘촘하게 정렬돼, 눈대중으로 놓아도 반듯하게 맞습니다.
스마트 스냅 · 정렬 가이드 — 옆 위젯이나 캔버스 중심에 가까워지면 자동으로 끌어당기고, 모서리·중심이 맞는 순간 가이드선이 나타나요. 화면을 확대·축소해도 스냅 감도는 늘 일정합니다.
실시간 좌표 표시 — 선택한 위젯의 X·Y·너비·높이가 상단에 그대로 표시돼, 디자인 툴을 쓰듯 정확하게 조정할 수 있어요.
드래그 이동 · 8방향 리사이즈 · 복제 · 레이어 순서 — 위젯을 옮기고, 여덟 방향 핸들로 크기를 바꾸고, 복제하고, 앞뒤 순서까지 자유롭게 다룹니다.
위젯을 그룹으로, 배경까지 한 번에
여러 위젯을 Shift+클릭이나 박스 드래그로 한 번에 선택한 뒤, 정돈하고 묶을 수 있어요.
정렬 · 균등 분배 — 위/가운데/아래, 왼쪽/가운데/오른쪽으로 나란히 맞추고, 사이 간격을 똑같이 벌립니다.
그룹으로 묶기 — 관련 위젯을 하나의 그룹으로 묶으면 함께 선택되고 함께 움직여요.
그룹 배경 — 그룹 자체에 배경색과 둥근 모서리를 줄 수 있습니다. 섹션 배경을 위해 '여백' 위젯을 따로 깔 필요가 없어요.
위젯 그룹화
웹·태블릿·모바일, 화면별로 세밀하게
상단에서 웹 / 태블릿 / 모바일을 전환하며 각 화면을 직접 편집해요.
따로 손대지 않은 위젯은 데스크톱 배치를 기준으로 자동 재구성돼, 모든 화면을 하나하나 다시 짤 필요가 없습니다.
특정 화면만 미세 조정하면 '그 화면 전용' 배치가 되고, 되돌리기 버튼으로 언제든 자동 재구성으로 되돌릴 수 있어요.
각 화면 반응형 조정
사이트 테마와 자동으로 어울리게
색을 고를 때 사이트 테마 팔레트(본문색·포인트색·강조색) 칩을 바로 쓸 수 있어요. 테마 색으로 지정해두면 나중에 사이트 테마를 바꿔도 페이지 색이 자동으로 따라옵니다. 물론 원하는 색을 직접 지정할 수도 있어요.
이런 위젯들을 자유롭게 놓을 수 있어요
텍스트 · 이미지 · 버튼 · 아이콘 · 구분선 · 동영상 · 코드(HTML) · 슬라이드 · 이미지맵 · 여백 등 10종의 위젯을 팔레트에서 클릭하거나, 이미지는 파일을 캔버스에 드래그&드롭하는 것만으로 바로 추가돼요.
이미지 — 맞춤·초점·모서리·그림자·필터·투명도·링크까지 패널에서 조정
버튼 — 라벨·링크·아이콘·변형(채움/외곽선/연하게)·색·크기
슬라이드 — 여러 장을 자동/수동 전환, 도트·전환 효과
그 외 대부분 위젯에 스크롤 등장 애니메이션(페이드·확대·팝 등)까지 더할 수 있어요.
지금 만들어보세요
SOLAPI 콘솔의 CMS에서 페이지를 열고, 상단 모드에서 그리드(자유 배치)를 선택하면 바로 시작할 수 있어요. 블록으로는 표현하기 어려웠던 자유로운 레이아웃을, 이제 코드 없이 직접 배치해보세요.
