Move Element는 웹 페이지의 아무 요소나 클릭한 후 새로운 위치로 드래그할 수 있게 해줍니다. 레이아웃 대안을 테스트하거나, 디자인 변경을 프로토타입으로 만들거나, 콘텐츠를 시각적으로 재배치할 수 있습니다. 코드 한 줄 작성 없이 가능하며, 변경 사항은 비파괴적입니다. 페이지 새로고침 시 원래 상태로 복원됩니다.
디자인 논의에서 "이 버튼을 폴드 위로 올리면 어떨까?" 또는 "사이드바를 오른쪽으로 옮기면 레이아웃이 더 나아질까?" 같은 질문이 자주 나옵니다. 보통은 코드를 수정하고 재배포한 후 미리보기를 해야 답을 얻을 수 있습니다. Move Element는 이 과정을 단축합니다. 요소를 클릭하고 드래그하기만 하면 됩니다. 도구는 실시간으로 CSS position을 적용하여 요소를 자유롭게 이동시킵니다. 다른 요소나 페이지 가장자리에 정렬 가이드가 자동으로 나타나 정확한 배치가 가능합니다. 원래 위치는 고스트 아웃라인으로 표시되어 언제든지 비교할 수 있습니다. 마음에 들지 않으면 Undo로 즉시 되돌릴 수 있습니다. 모든 변경은 브라우저 메모리에서만 일어나며, 실제 HTML과 CSS 파일은 수정되지 않습니다.
버튼, 이미지, 텍스트 블록, 카드, 헤더 등 페이지의 아무 요소나 클릭한 후 자유롭게 새로운 위치로 드래그하세요. 요소가 커서에 부드럽게 따라 움직입니다. 작은 아이콘부터 전체 너비 섹션까지 모든 크기의 요소에서 작동합니다.
드래그하는 동안 다른 요소의 가장자리나 페이지 중앙에 맞춰지면 점선 정렬 가이드가 나타납니다. 가로와 세로 가이드가 일관된 그리드에 정확하게 배치할 수 있도록 도와줍니다.
요소의 원래 위치가 점선 고스트 아웃라인으로 표시되어 이동 전 위치를 항상 확인할 수 있습니다. 새 위치와 원래 위치를 한눈에 비교하세요.
마음에 들지 않는 이동을 했나요? Undo를 클릭하면 요소가 이전 위치로 즉시 돌아갑니다. 여러 단계의 Undo를 지원하므로 자유롭게 실험하고 이전 단계로 돌아갈 수 있습니다.
여러 요소를 순서대로 재배치할 수 있습니다. 각 이동은 독립적이며 Undo가 가능합니다. 한 번에 하나씩 이동하며 전체 레이아웃 변경 효과를 미리 확인할 수 있습니다.
모든 변경은 브라우저 렌더링에서만 존재합니다. 페이지의 실제 HTML, CSS, JavaScript 파일은 전혀 수정되지 않습니다. 페이지를 새로고침하면 모든 요소가 원래 상태로 돌아갑니다. 어떤 웹사이트에서든 안전하게 사용할 수 있습니다.
CTA 버튼을 폴드 위로 올리면 전환율이 좋아질까? 또는 후기 섹션을 가격 테이블보다 앞에 두면 더 나을까? 요소를 이동하며 다양한 레이아웃을 미리 보고, 코드 변경 전에 데이터에 기반한 결정을 내릴 수 있습니다.
라이브 클라이언트 미팅 중에 요소를 드래그하며 레이아웃 옵션을 실시간으로 탐색하세요. "히어로 이미지를 왼쪽에 둘까 오른쪽에 둘까?"라는 질문을 말로 설명하는 대신 실제 데모로 보여줄 수 있습니다.
기존 페이지의 요소를 재배치하여 새로운 디자인 방향을 프로토타입으로 만드세요. Live Text Editor와 함께 사용하면 콘텐츠도 변경하고 위치도 이동하여 코드 없이 완전한 시각적 프로토타입을 만들 수 있습니다.
요소가 예상치 못하게 겹쳐 있다면 하나를 옆으로 드래그하여 뒤에 무엇이 있는지 확인하세요. z-index를 DevTools에서 조정하기 전에 빠르게 확인하고 싶을 때 유용합니다.
시각적 요소를 예상 탭 순서에 맞게 이동하세요. 시각적 레이아웃이 논리적 읽기 순서와 맞지 않으면 스크린 리더와 키보드 탐색이 시각적 표현과 일치하지 않는 접근성 문제를 드러냅니다.
DevSuite Pro 플로팅 독을 열고 Move Element 아이콘을 클릭하세요. 커서가 이동 아이콘으로 변경되어 요소를 선택할 준비가 됩니다.
이동하고 싶은 요소를 클릭하세요. 보라색 강조 테두리가 표시되고, 현재 위치에 고스트 아웃라인이 나타납니다.
선택된 요소를 클릭한 상태로 드래그하여 원하는 위치로 이동하세요. 다른 요소의 가장자리나 페이지 중앙에 가까워지면 정렬 가이드가 나타납니다.
마우스를 놓으면 요소가 새 위치에 배치됩니다. 고스트 아웃라인과 비교하며 확인하세요. 필요하면 Undo를 사용하거나 다른 요소를 선택하여 계속 재배치할 수 있습니다.
실험을 마친 후 페이지를 새로고침하면 모든 요소가 원래 위치로 복원됩니다. 모든 이동이 완전히 사라집니다.
DevSuite Pro를 무료로 설치하고 브라우저용 39개 이상의 개발자 도구를 사용해보세요.
