디자인 모드 기본 사용방법

그리드 시스템 이해하기

왼쪽 이미지와 오른쪽 이미지 중 어떤 것이 정리가 잘 되어 보이고 컨텐츠가 잘 보이나요?거의 모든 사람은 오른쪽을 택할 것입니다. 이는 간단한 그리드 시스템의 예시입니다.

그리드 시스템은 제일 처음 건축에서 개발단계에서 구획을 나눌 때 사용되었고 그후 타이포그래피에서 활용되다가 1930년경 신문잡지등에서 기사, 사진 등 각 컨텐츠등을 효율적으로 구성하기 위해 사용되었습니다.

아임웹에서도 잘 보이는 레이아웃을 쉽고 빠르게 구성할 수 있도록 그리드 시스템이 도입되었습니다. 아임웹으로 제작된 사이트는 12칼럼 그리드 구조로 만들어지며 객체의 이동이나 크기 조정은 전체 폭의 1/12(약 8.33%) 만큼씩만 조정됩니다.

얼핏 과도하게 제한되는 것 같지만 대부분의 상황에서 적절한 레이아웃을 만들 수 있는 시스템입니다.

드래그로 이동

디자인 모드에서 가장 많이 쓰이는 것 중 하나는 마우스 드래그를 활용한 위젯 이동입니다. 위젯을 마우스로 클릭하고 드래그하여 원하는 위치로 이동을 시킬 때 사용합니다.

대상을 좌/우로 이동시키는 것 뿐 아니라 상/하로도 이동시킬 수 있습니다.

참고: 위젯이 하나만 있는 경우 이동할 수 없습니다. 좌우로 이동할 때 같은 선상에 위젯이 하나만 있는 경우에도 이동할 수 없습니다. 위젯이 하나만 있을 때 상하, 좌우에 여백을 주고 싶은 경우 다음 1x1 위젯 배치, 정렬하기 도움말을 참고하세요.

드래그로 크기 조정

위젯과 위젯 사이를 드래그하면 크기를 조정할 수 있습니다.

이미지 위젯, 지도 위젯, 여백 위젯과 같은 일부 위젯은 이미지 하단 가장자리를 드래그하여 크기 조정이 가능합니다. 어떠한 크기로 조정하더라도 비율은 자동으로 유지됩니다.

참고: 이동과 마찬가지로 좌우 크기 조정은 위젯이 단독으로 존재할 때 사용할 수 없습니다. 하나의위젯을 단독으로 작게 표현하고자 할 땐 여백 위젯을 추가하여 조정하시면 됩니다.

수직 크기 조정은 그리드 단위가 아닌 픽셀 단위로 세밀하게 조정할 수 있습니다.

마우스 오른쪽 클릭 버튼

디자인 모드를 완벽하게 사용하려면 마우스 오른쪽 버튼을 사용하셔야 합니다. 각 위젯이나 섹션,상단 및 하단은 마우스 오른쪽 버튼을 눌러 설정화면에 진입하거나 각종 옵션을 빠르게 수정할 수 있습니다.

참고: 각 위젯이나 섹션 오른쪽 상단에서 ⓘ 아이콘을 눌러도 같은 효과를 낼 수 있지만 편의성 측면에서 마우스 오른쪽 버튼 사용을 권장합니다.

복사 및 붙여넣기

컴퓨터의 파일 관리자에서 파일을 복사, 붙여넣기 하듯 위젯과 섹션도 복사 및 붙여넣기가 지원됩니다. 복사를 원하는 위젯이나 섹션에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭해 복사를 선택하여, 같은 페이지 뿐 아니라 다른 페이지에도 붙여넣을 수 있습니다.

참고: 복사 및 붙여넣기는 단축키로는 지원하지 않습니다.

작업 즉시 저장

디자인 모드는 대부분의 설정이 변경 즉시 저장됩니다. 따로 저장 버튼을 누르지 않아도 됩니다. 예를 들어 이미지 설명을 변경하고 닫기를 클릭하는 즉시 반영됩니다. 이는 불필요한 과정 없이 최대한 빠르게 원하는 결과물을 만들 수 있도록 의도된 것입니다.

목록으로