위젯 배치·그리드 실습

아임웹 페이지는 눈에 보이지 않는 격자(그리드) 위에 위젯을 올려 만들어요. 기본 개념을 먼저 보시고, 아래 실습을 따라 하면서 익혀 보세요.

• 위젯 배치와 그리드 기본 개념
• 위젯 그리드 조절하기
• [실습] 1x1 위젯 배치·정렬하기
• [실습] 3x1 위젯 배치하기
• [실습] 3x2 이미지·텍스트 위젯 배치하기
• [실습] 3x3 지그재그 배치하기
• [실습] 4x2 이미지·텍스트·여백 배치하기
• [실습] 4x4 목록형 배치하기
• [실습] 2/3/4열 응용 배치하기

위젯 배치와 그리드 기본 개념

이 도움말에서는 준비된 예제에 따라 위젯을 추가, 배치하고, 그리드 수를 조절해 레이아웃을 디자인하는 방법을 설명합니다.

튜토리얼을 진행하기에 앞서 다음 사항들을 미리 익혀두시면 더 재밌고 빠르게 그리드 활용법을 배우실 수 있습니다.

앞서 알아두면 좋은 사항

• 디자인 모드 접속 방법
• 메뉴 추가, 이동, 복제, 삭제 방법
• 위젯 추가, 이동, 복제, 삭제 방법
• 텍스트 입력 방법
• 사이트 미리보기, 게시하기, 되돌리기

위젯 배치 & 그리드 실습하기

총 7개의 튜토리얼에 따라 디자인 모드에서 위젯을 배치하고 그리드 조절하는 방법을 배워봅니다.

[실습] 1x1 위젯 배치, 정렬하기

이미지, 게시판, 갤러리와 같은 위젯은 단독으로 정렬이 불가능합니다. 이 경우 여백 위젯을 활용해 정렬할 수 있습니다. 여백 위젯을 사용하지 않는 경우 12칸 그리드에 꽉 차게 배치됩니다.

실습 시작하기

[실습] 3x1 위젯 배치하기

한 줄에 이미지 위젯 3개를 3열로 배치해 봅니다. 단순 배치 시 각 위젯의 그리드 수는 균등하게 나눠져 배치됩니다. 필요에 따라 특정 위젯의 그리드 수만 다르게 적용해 위젯의 크기를 조절할 수도 있습니다.

실습 시작하기

[실습] 3x2 이미지, 텍스트 위젯 배치하기

한 줄에 이미지 위젯 3개를 3열로 배치하고, 각 이미지 위젯 아래 텍스트 위젯을 배치해 봅니다. 주제를 세분화하여 정보를 제공할 때 유용합니다. 예) 서비스 종류, 팀원 소개, 상품 종류 등

실습 시작하기

[실습] 3x3 지그재그 배치하기

이미지와 텍스트를 지그재그로 배치해 봅니다. 소주제를 더욱 확실하게 구분하여 정보를 전달할 때 사용될 수 있습니다.

실습 시작하기

[실습] 4x2 이미지, 텍스트, 여백 배치하기

중앙에 이미지를 2열로 배치하고, 이미지 양끝에 여백과 텍스트를 추가하는 방법을 배워봅니다.

실습 시작하기

[실습] 4x4 목록형 배치하기

이미지 위젯과 텍스트 위젯을 교차하여 목록 형식으로 배치해 봅니다. 필요에 따라 버튼을 추가해 클릭 시 세부정보 페이지로 이동되도록 구성할 수 있습니다.

실습 시작하기

[실습] 복합 배치하기

여러 위젯들을 다양한 방식으로 배치할 수 있습니다.

실습 시작하기

위젯 그리드 조절하기

위젯이 차지하는 그리드 수를 변경할 수 있습니다. 이 그리드 수를 변경함에 따라 위젯의 크기는 작아지거나 커질 수 있습니다. 예를 들어 게시판 위젯이 4칸의 그리드를 차지하는 경우 너무 작을 수 있기에, 그리드 수를 늘릴 필요가 있습니다.

그리드 및 위젯 배치방법, 그리드 활용에 대한 더 상세한 도움말은 아래 관련 도움말을 참조하세요.

조절방법

1. 위젯과 위젯 사이 마우스 포인터를 올립니다.
2. 마우스 커서가 화살표로 바뀌고, 검은 줄이 생겨되면 마우스를 클릭합니다.
3. 클릭을 유지한 채로, 마우스를 왼쪽 또는 오른쪽으로 드래그합니다.
4. 위젯이 차지하는 그리드 수가 실시간으로 변경되는 걸 확인할 수 있습니다.

[실습] 1x1 위젯 배치·정렬하기

이미지, 게시판, 갤러리와 같은 위젯은 단독으로 정렬이 불가능합니다. 이 경우 여백 위젯을 활용해 정렬할 수 있습니다. 여백 위젯을 사용하지 않는 경우 12칸 그리드에 꽉 차게 배치됩니다.

 

실습진행

1. 디자인 모드에 접속합니다. 접속방법

2. 여백 위젯을 이미지 위젯의 오른쪽으로 이동시킵니다. 자세한 배치방법은 아래 애니메이션과 함께 지침을 확인합니다.

   

   1. 여백 위젯을 마우스로 클릭합니다.
   2. 클릭을 유지한 체로 이미지 위젯의 오른쪽으로 드래그합니다.
   3. 이미지 위젯 오른쪽에 검은 줄이 표시됩니다. 이때 마우스를 놓아줍니다.
3. 이미지 위젯 오른쪽에 여백이 생기면서 이미지 위젯은 자연스럽게 왼쪽으로 정렬됩니다.

4. 오른쪽 정렬하려면 여백 위젯을 이미지 위젯의 반대편으로 이동시킵니다.

   
   

   

    

   
   

5. 이미지 위젯을 가운데 배치하려면, 이미지 위젯 양쪽에 여백 위젯을 추가합니다.

   

이미지 키우기 또는 여백 늘리기

만약 여백을 늘리거나 줄이려면 여백이 차지하는 그리드 수를 조절합니다. 여백이 차지하는 그리드 수에 따라 이미지 위젯의 크기도 달라집니다.

참고: 여백 위젯을 활용한 위젯 정렬은 모든 위젯에 적용 가능합니다.

[실습] 3x1 위젯 배치하기

여러 개의 위젯을 추가하고, 이동하여, 한 줄에 이미지 위젯 3개를 3열로 배치할 수 있습니다. 여러 항목을 가로로 나열하여 표시할 때 유용한 레이아웃입니다.

실습진행

1. 디자인 모드에 접속합니다. 접속방법
2. 둘째 줄 이미지 위젯을 마우스로 클릭합니다.

3. 마우스 클릭을 유지한 채로 첫째 줄 이미지 위젯의 오른쪽으로 드래그합니다. 검은 줄이 표시되면, 마우스를 놓아줍니다.

   

4. 남은 이미지 위젯을 클릭해 2열 배치된 이미지 위젯의 오른쪽에 배치합니다.

   

5. 한 줄에 이미지 위젯이 3열로 배치됩니다. 디자인 기획 및 콘셉트에 따라 그리드 수를 조절합니다. 이미지 위젯이 차지하는 그리드 수에 따라 이미지의 크기는 달라질 수 있습니다.

   

[실습] 3x2 이미지·텍스트 위젯 배치하기

한 줄에 이미지 위젯 3개를 3열로 배치하고, 각 이미지 위젯에 텍스트 위젯을 더할 수 있습니다. 이미지를 설명하는 설명문구를 추가할 때 유용합니다.

실습진행

1. 디자인 모드에 접속합니다. 접속방법
2. 텍스트 위젯 3개를 추가합니다.
3. 첫 번째 텍스트 위젯을 가운데 이미지 위젯 바로 아래배치합니다.
   자세한 배치방법은 아래 애니메이션과 함께 지침을 확인합니다.
   
4. 텍스트 위젯을 마우스 클릭합니다.
5. 마우스 클릭을 유지한 채로 가운데 있는 이미지 위젯 바로 아래로 드래그합니다.
6. 이미지 위젯 아래 위젯 너비만큼의 검은 줄이 생겨나면, 마우스를 놓습니다.
7. 남은 텍스트 위젯들도 각 이미지 위젯의 아래 배치합니다.

추가 도움말

텍스트 위젯에 글자를 작성하려면 마우스로 더블-클릭합니다. 텍스트 편집기가 열리면, 글자를 입력할 수 있습니다. 텍스트 편집도구를 활용해 글자의 크기, 굵기, 색상 등을 변경할 수 있습니다.

내 사이트에 텍스트 추가하기

[실습] 3x3 지그재그 배치하기

이미지 위젯을 왼쪽에, 텍스트 위젯을 오른쪽에 2열 배치하고, 다음 줄부터는 반대로 배치합니다. 이를 반복하면 이미지와 텍스트가 지그재그로 배치됩니다.

실습진행

1. 디자인 모드에 접속합니다. 접속방법

2. 이미지 위젯의 오른쪽에 텍스트 위젯을 배치합니다. 자세한 배치방법은 아래 애니메이션과 함께 지침을 확인합니다.

   

   1. 텍스트 위젯 하나를 마우스로 클릭합니다.
   2. 첫 번째 이미지 위젯의 오른쪽으로 텍스트 위젯을 드래그합니다.
   3. 첫 번째 이미지 위젯의 오른쪽에 검은 줄이 생기면, 마우스를 놓습니다.

3. 이미지 위젯과 텍스트 위젯을 새로 추가하고, 이번에는 텍스트 위젯을 이미지 위젯의 왼쪽에 배치합니다. 다음 애니메이션을 참조할 수 있습니다.

   

4. 필요한 만큼 이미지 위젯과 텍스트 위젯을 추가해, 좌우 교대로 다르게 배치해봅니다.
5. 디자인 모드 오른쪽 상단의 미리보기  아이콘을 클릭합니다.
6. 배치된 위젯들을 확인합니다.
7. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭합니다.

[실습] 4x2 이미지·텍스트·여백 배치하기

3x2 배치, 3x3 지그재그 배치 방법을 응용해 다음과 같은 레이아웃을 만들어 볼 수 있습니다. 이전 실습을 진행하지 않은 경우 앞서 기초 배치 방법을 익혀주세요.

실습진행

1. 디자인 모드에 접속합니다. 접속방법

2. 타이틀로 사용할 텍스트 위젯을 상단으로 이동합니다. 첫 번째 텍스트 위젯을 마우스 클릭 후, 클릭을 유지한 채로 최상단 여백 위젯 바로 아래로 이동합니다. 아래 애니메이션을 참조할 수 있습니다.

   

3. 남은 텍스트 위젯 두 개를, 여백 위젯의 오른쪽 및 왼쪽에 배치합니다. 아래 애니메이션을 참조하세요.

   

4. 이미지 위젯 두 개를 여백과 텍스트 위젯 사이로 이동합니다. 다음 애니메이션을 참조합니다.

   

5. 위 5번과 같은 방법으로, 남은 이미지 위젯 두 개를 다음 줄의 여백과 텍스트 위젯 사이로 이동합니다. 다음 그림처럼 구성됩니다.

   

6. 이미지를 삽입하고, 텍스트를 입력해 콘텐츠를 추가합니다.
   참고: 별도로 작성한 글이 없는 경우 다음 한글입숨 사이트를 활용해 예시 한글 문장을 복사해 사용해볼 수 있습니다. 옵션을 선택하고, 생성하기 버튼을 클릭해 복사해 주세요.
7. 디자인 모드 오른쪽 상단 미리보기  아이콘을 클릭합니다.
8. 배치된 위젯들을 확인합니다.
9. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭합니다.

[실습] 4x4 목록형 배치하기

이미지, 텍스트, 버튼 위젯을 활용해 다음처럼 목록형 레이아웃을 제작할 수 있습니다. 이 레이아웃은 제품 또는 서비스에 대한 상세 설명 또는 멤버 목록 표시 등에 사용될 수 있습니다.

새로운 게시물이 수시로 업로드 되거나, 게시물 수가 많은 경우 게시판 위젯을 사용하실 것을 권장합니다.

실습진행

1. 디자인 모드에 접속합니다. 접속방법

2. 이미지 위젯들이 2열이 되도록 배치합니다.

   

3. 텍스트 위젯을 배치합니다.
   주의: 검은 줄이 반드시 텍스트 위젯 너비 만큼 표시 됐을 때 마우스를 놓아야 합니다.

   

   1. 텍스트 위젯을 왼쪽 이미지 위젯 바로 오른쪽에 배치합니다.
   2. 나머지 텍스트 위젯은 오른쪽 이미지 위젯의 오른쪽에 배치합니다.

4. 버튼 위젯을 배치합니다.
   주의: 검은 줄이 반드시 텍스트 위젯 너비 만큼 표시 됐을 때 마우스를 놓아야 합니다.

   

   1. 버튼 위젯을 왼쪽 텍스트 위젯 아래 배치합니다.
   2. 나머지 버튼 위젯은 오른쪽 텍스트 위젯 아래 배치합니다.

5. 위 2번~5번 방법을 반복하여 다음 동영상처럼 목록 형식으로 반복해 배치합니다.

   

6. 디자인 모드 오른쪽 상단 미리보기  아이콘을 클릭합니다.
7. 배치된 위젯들을 확인합니다.

[실습] 2/3/4열 응용 배치하기

지금까지 배운 위젯 배치 및 그리드 조절방법을 응용해 다음과 같은 페이지를 디자인할 수 있습니다.

이번 튜토리얼에서는 이미지와 텍스트만 사용되었으나, 소유한 콘텐츠에 따라 다른 위젯을 사용할 수도 있습니다. 예를 들어 특정 이미지 위젯 대신 동영상 위젯을 사용하거나, 단일지도, 갤러리 위젯 등으로 대체할 수 있습니다.

이 튜토리얼을 진행하기에 앞서 모든 이전 튜토리얼을 미리 실습해보신 후 진행하시길 권장해 드립니다.

실습진행

1단계: 한 줄 3열 위젯 배치하기

한 줄에 여백, 텍스트, 이미지 위젯을 배치하고, 이미지 위젯이 차지하는 그리드 수를 조절합니다. 어려움이 있는 경우 다음 3x1 위젯 배치하기 튜토리얼을 참고하세요.

1. 위젯들을 왼쪽부터 여백, 텍스트, 이미지 순으로 한 줄에 3열이 되도록 배치합니다.

2단계: 한 줄 4열 위젯 배치하기

한 줄에 텍스트와 이미지 위젯을 4열로 배치합니다. 문제가 있는 경우 4x2 이미지, 텍스트 여백 배치하기 튜토리얼을 참고해 볼 수 있습니다.

1. 텍스트와 이미지 위젯을 각각 2개씩 추가합니다.
2. 위젯들을 왼쪽부터 텍스트, 이미지, 이미지, 텍스트 순으로 한 줄에 4열이 되도록 배치합니다.

3단계: 한 줄  2열 위젯 배치하기

한 줄에 여백과 이미지 위젯을 2열로 배치하고, 텍스트 위젯을 이미지의 하단에 맞춰지도록 여백의 높이를 조절합니다.

1. 여백, 이미지, 텍스트 위젯을 각각 1개씩 추가합니다.
2. 다음 애니메이션을 참조하여, 위젯들을 배치하고, 그리드 수를 조절합니다.

   

   1. 이미지 위젯을 여백 위젯의 오른쪽으로 이동합니다.
   2. 텍스트 위젯을 왼쪽 여백 위젯의 바로 아래로 이동합니다.
   3. 여백 위젯 최하단 끄트머리에 마우스 포인터를 올립니다.

      

3. 마우스를 클릭한 다음, 마우스를 아래로 드래그합니다. 여백의 높이가 길어지며, 적당하다 싶으면 마우스를 놓습니다.
4. 이미지 위젯과 여백 위젯 사이 마우스 포인터를 올리고, 드래그하여 이미지 위젯의 그리드 수를 8칸으로 늘립니다. 여백과 텍스트 위젯은 자동으로 4칸으로 줄어듭니다.

4단계: 텍스트 입력 및 이미지 추가하기

1. 텍스트 위젯을 마우스로 더블-클릭합니다.
2. 텍스트 편집기로 전환되면 글자를 입력합니다.
   참고: 별도로 작성한 글이 없는 경우 다음 한글입숨 사이트를 활용해 예시 한글 문장을 복사해 사용해볼 수 있습니다. 옵션을 선택하고, 생성하기 버튼을 클릭해 복사해 주세요.
3. 이미지 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
4. 설정 창 왼쪽 상단에 마우스 포인터를 올립니다.
5. 내 PC에서 이미지를 업로드하거나, 무료 이미지 버튼을 클릭해 이미지를 추가합니다.
6. 설정창 오른쪽 상단 닫기를 클릭해 설정 창을 끕니다.
7. 남은 텍스트와 이미지 위젯에도 콘텐츠를 추가합니다.

5단계: 디자인 확인 및 게시하기

1. 디자인 모드 오른쪽 상단 미리보기  아이콘을 클릭합니다.
2. 의도한 디자인으로 나타나는지 확인합니다.
3. 문제가 없다면 아임웹 디자인 모드로 돌아가 게시하기를 클릭해 적용합니다.