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

실습진행

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

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

5. 남은 이미지 위젯을 클릭해 2열 배치된 이미지 위젯의 오른쪽에 배치합니다.
6. 한 줄에 이미지 위젯이 3열로 배치됩니다. 디자인 기획 및 콘셉트에 따라 그리드 수를 조절합니다. 이미지 위젯이 차지하는 그리드 수에 따라 이미지의 크기는 달라질 수 있습니다.

도움말에 찾으시는 답변이 없으신가요? 문의하기

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

실습진행

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

             1. 여백 위젯을 마우스로 클릭합니다.

             2. 클릭을 유지한 체로 이미지 위젯의 오른쪽으로 드래그합니다.

             3.이미지 위젯 오른쪽에 검은 줄이 표시됩니다. 이때 마우스를 놓아줍니다.

4. 이미지 위젯 오른쪽에 여백이 생기면서 이미지 위젯은 자연스럽게 왼쪽으로 정렬됩니다.

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

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

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

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

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

도움말에 찾으시는 답변이 없으신가요? 문의하기

마우스 휠 스크롤 시 기본 상단 디자인과는 다른 고정메뉴가 나오도록 설정할 수 있습니다. 아래 애니메이션은 고정메뉴 활용 예시입니다. 마우스 휠 스크롤 시 상단 디자인이 변하는 걸 확인할 수 있습니다.

아임웹에서는 상단 고정메뉴라 부르며, 고정메뉴 설정에서 변경할 수 있습니다.

제작방법

1. 디자인 모드에 접속합니다. 접속방법
2. 디자인 모드 오른쪽 상단의 상단설정을 클릭합니다.
3. 상단설정 모드로 진입하면, 오른쪽 상단의 고정메뉴 설정 을 클릭합니다.
4. 고정메뉴 설정 모드가 나타나면, 상단 고정메뉴를 디자인합니다. 위젯을 추가하고, 섹션 배경을 설정하는 등 기본적인 디자인 방법은 본문 디자인 방법과 같습니다.
5. (선택 사항) 기본 상단 디자인을 수정해 사용하고자 한다면, 오른쪽 상단의 상단 기본 디자인 가져오기 를 클릭해 불러올 수 있습니다.
6. 고정메뉴 디자인을 마치면, 왼쪽 상단의 상단 편집으로 돌아가기 를 클릭해 상단 기본 상단설정 디자인 모드로 돌아갑니다.
7. 토글 버튼을 클릭해 고정메뉴를 활성화합니다.
8. "상단 고정메뉴를 활성화 시키면 스크롤 고정메뉴가 비활성 처리됩니다. 계속 진행할까요?" 경고창이 나오면 확인 을 클릭합니다.
9. 디자인 모드 오른쪽 상단 미리보기 아이콘을 클릭합니다.
10. 상단 고정메뉴가 정상적으로 동작하는지 확인합니다.
11. 문제가 없으면 디자인 모드로 돌아가 게시하기 버튼을 클릭해 적용합니다..

도움말에 찾으시는 답변이 없으신가요? 문의하기

미리 제작된 섹션 템플릿을 활용해 웹 페이지 하단(푸터)의 디자인을 변경할 수 있습니다. 

설정방법

1. 디자인 모드에 접속합니다. 접속방법
2. 왼쪽 상단의 마술봉 아이콘을 클릭합니다.
3. 푸터에 마우스 포인터를 올리면 하단 템플릿이 나타납니다.
4. 마음에 드는 템플릿을 클릭합니다.
5. 선택하신 템플릿으로 하단 디자인이 변경되며 모든 메뉴에 공통적으로 표시됩니다.

템플릿을 선택했는데 하단이 변경되지 않나요?

무료 사이트를 개설할 때 선택한 일부 템플릿은 하단 섹션 숨김 옵션이 적용되어 있을 수 있습니다. 하단 템플릿을 선택해도 하단 디자인이 변경되지 않거나, 표시되지 않는 경우 아래의 도움말 링크를 클릭해 숨겨진 하단을 다시 표시해 보세요.

하단을 변경했는데 바뀌지 않습니다

커스텀 하단 만들기

기본 하단 디자인이 아닌 나만의 커스텀 하단을 제작하고 싶다면 아래의 도움말을 참고할 수 있습니다.

•  커스텀 하단 푸터 만들기
• 모바일 커스텀 하단 푸터 만들기

도움말에 찾으시는 답변이 없으신가요? 문의하기

이 도움말에서는 하단(푸터) 섹션의 설정을 변경할 수 있는 하단 설정 패널을 여는 방법을 설명합니다.

진입방법

1.  디자인 모드에 접속합니다. 접속방법
2. 하단 섹션에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
3. 컨텍스트 메뉴가 나오면 하단 설정 을 클릭합니다.
4. 디자인 모드 오른쪽에서 하단 설정 패널이 나타납니다.
5. 계속해서 하단 설정하기 도움말에 따라 하단 섹션에 표시할 요소를 설정합니다.

도움말에 찾으시는 답변이 없으신가요? 문의하기

PC 버전은 사용하지 않고, 모바일 사이트만 이용하는 경우 이 튜토리얼이 도움이 될 수 있습니다.

아임웹으로 제작된 사이트는 반응형 사이트로 제작됩니다. 반응형 사이트란 접속하는 기기의 디스플레이 크기에 따라 알아서 디자인이 최적화되는 웹 기술을 뜻합니다.

아임웹으로 제작된 사이트는 반응형 기술이 적용되어, 기술적으로 PC/모바일로 구분되지 않으며, 사실상 하나의 사이트라 볼 수 있습니다.

기술적으로는 하나의 사이트지만 방법은 있습니다. 이 튜토리얼에서는 모바일 전용 섹션 및 간단한 코드를 사용해 모바일 사이트만 이용할 수 있도록 구성하는 방법을 설명합니다. 

제작방법

1단계: PC 메인페이지 만들기

PC 버전 방문자가 내 사이트에 접속했을 때, 모바일로 접속할 것을 권유하는 페이지를 디자인합니다.

1.  디자인 모드에 접속합니다. 접속방법
2. 왼쪽 상단의 메뉴 관리를 클릭하고, 상단 메뉴의 오른쪽 + 아이콘을 클릭합니다.
3. 메뉴명을 입력하고, 확인을 클릭합니다.
4. 추가한 메뉴를 상단 메뉴 그룹의 가장 위에 위치하도록 이동시킵니다. 메뉴 이동하기
   참고: 상단 메뉴의 가장 첫 번째 메뉴가, 사이트의 첫 페이지이기에 가장 위에 배치합니다.
5. 텍스트, 이미지, 섹션 배경 설정 등을 활용해 메인페이지를 디자인합니다.

2단계: PC 메인페이지 상단 영역 숨기기

PC 버전 방문자가 내 사이트에 접속했을 때 메뉴 이동을 할 수 없도록 상단 영역을 숨기는 단계입니다. 이번 단계에는 코드가 사용됩니다.

1.  위 1단계에서 제작한 메인페이지에 코드 위젯을 추가합니다. 위젯 추가하기.
2. 코드 위젯 위에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
3. 코드 설정 을 클릭합니다.
4. 상단 영역을 숨기는 아래의 코드를 전체 복사하여, 붙여넣습니다.
5. 저장을 클릭해 적용합니다.
6. 이제 PC 버전으로 방문자 접속 시 상단 메뉴가 보이지 않게 됩니다.

3단계: 모바일 버전 제작하기

뷰포트를 모바일로 변경하고, 모바일 전용 디자인을 작업합니다. 미리 모바일 편집 방법을 익혀두시길 권장합니다.

1.  뷰포트를 모바일로 변경합니다. 뷰포트 변경하기
2. 섹션 숨김 아이콘을 클릭해, PC 뷰포트에서 제작한 디자인을 숨깁니다.
3. 페이지 바깥 회색 영역에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
4. 모바일 전용 섹션추가를 클릭합니다.

5. 추가된 모바일 전용 섹션의 위젯 추가 아이콘을 클릭하여, 필요한 위젯을 추가하고, 배치하며 디자인합니다.

   

6. (선택 사항) 모바일 전용 섹션의 위치가 마음에 들지 않는 경우 섹션을 위 또는 아래로 이동시킵니다. 섹션 이동하기
7. (선택 사항) 위 1단계 2번~3번 과정에 따라, 필요한 만큼 메뉴 수를 추가합니다. 그리고 계속해서 모바일 디자인을 작업합니다.

   주의: 메뉴 추가 후 구성은 자유지만, 위 1단계에서 제작한 메뉴는 반드시 상단 메뉴 가장 위에 위치해야 합니다.

4단계: PC 및 모바일 디자인 점검하기

1. 디자인 모드 오른쪽 상단의 게시하기 버튼을 클릭해 적용합니다.
2. PC 와 스마트폰으로 사이트에 접속해 확인합니다. 아래 2가지를 확인 후 문제가 없는지 꼭 확인해 주세요.
   • PC로 접속 시 상단 메뉴가 없고, 모바일 버전으로 접속할 것을 안내하는 페이지가 나타나야 합니다.
   • 모바일 기기로 접속 시 모바일 뷰포트에서 제작하신 첫 페이지가 나타나야 합니다.

도움말에 찾으시는 답변이 없으신가요? 문의하기

텍스트 위젯 배경에 배경 이미지를 추가하거나, 배경색을 추가할 수 있습니다. 

추가방법

1. 디자인 모드에 접속합니다. 접속방법
2. 왼쪽 상단의 위젯 추가 + 를 클릭합니다.
3. 텍스트 위젯을 클릭합니다.
4. 텍스트 에디터가 켜지면, 텍스트를 입력합니다.
5. 텍스트 위젯 바깥 영역을 클릭해 텍스트 에디터를 종료합니다.
6. 삽입한 텍스트 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
7. 텍스트 설정을 클릭합니다.
8. 배경 항목에서 배경 이미지를 추가하거나, 배경색을 설정합니다.

   참고: 만약 배경 이미지와 배경색을 모두 설정하는 경우 배경 이미지는 배경색에 가려져 보이지 않게 됩니다.배경색은 투명도를 조절할 수 있습니다. 관련 내용은 이 문서의 하단을 참고해 주세요

   

• 이미지: 내 PC에서 직접 이미지를 업로드하거나, 아임웹에서 제공하는 무료 이미지를 사용할 수 있습니다
• 배경색/음영: 직접 색상 코드를 입력하거나, 오른쪽 컬러픽커를 클릭해 마우스로 선택할 수 있습니다.
• 라운딩: 배경 영역 사각 모서리를 둥글게 만듭니다. 픽셀(px) 단위로 조절할 수 있습니다.9. (선택 사항) 배경 이미지 또는 색상에 테두리가 필요한 경우 다음 텍스트 위젯 테두리 선 추가하기도움말을 참고해 추가해 보세요.

10. (선택 사항) 텍스트 주변에 여백을 추가하려는 경우 상하 여백, 좌우 여백을 추가해 주세요. 텍스트 위젯 안쪽 여백 조절하기

11. 닫기 ✕ 아이콘을 클릭해 텍스트 설정을 완료합니다.

12. 텍스트 위젯 배경에 이미지 또는 색상이 추가되었는지 확인합니다.

관련 도움말

배경 이미지 위에 반투명한 배경색을 추가로 입힐 수 있습니다. 위 8번 과정처럼 배경 이미지와 배경색을 모두 설정한 다음, 배경색의 투명도를 조절해 보세요.

투명도 조절 방법은 아래의 도움말에서 확인할 수 있으며, 비주얼 섹션, 섹션 배경, 이미지 위젯, 갤러리 위젯 등 여러 곳에서 동일한 방법으로 투명도를 조절해 효과를 적용해 볼 수 있습니다.

컬러픽커로 투명도 조절하기

도움말에 찾으시는 답변이 없으신가요? 문의하기

텍스트 위젯 영역 바깥으로 테두리를 추가할 수 있습니다. 테두리 선의 모양을 선택할 수 있으며, 선의 색상 및 두께도 직접 설정할 수 있습니다. 

추가방법

1. 디자인 모드에 접속합니다. 접속방법
2. 왼쪽 상단의 위젯 추가 ＋ 아이콘을 클릭합니다.
3. 텍스트 위젯을 클릭합니다.
4. 텍스트 에디터가 켜지면 텍스트를 작성합니다.
5. 텍스트 위젯 바깥 영역을 클릭해 텍스트 에디터를 종료합니다.
6. 텍스트 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
7. 컨텍스트 메뉴가 나오면 텍스트 설정을 클릭합니다.

8. 테두리 항목에서 선스타일, 선색, 선두께를 수정합니다.

• 선 스타일: 없음, 실선, 점선, 긴 점선, 두줄선 중 하나를 선택할 수 있습니다.
• 선색: 선의 색상을 지정할 수 있습니다.
• 선 두께: 선의 두께를 지정할 수 있습니다. 픽셀(px) 단위로 입력합니다.

9. (선택 사항) 필요에 따라 텍스트 위젯 안쪽 여백을 추가합니다. 텍스트 위젯 안쪽 여백 조절방법

10. 닫기 ✕ 아이콘을 클릭해 위젯 설정 창을 닫습니다.

11. 텍스트 위젯 바깥으로 테두리가 생겨난 걸 확인할 수 있습니다.

도움말에 찾으시는 답변이 없으신가요? 문의하기

텍스트 위젯 안쪽으로 여백을 추가할 수 있습니다. 텍스트 주변 상하, 좌우에 여백을 추가할 때 사용됩니다. 예를 들어, 아래 그림과 같이 텍스트 위젯 주변에 테두리를 그리는 경우 테두리와 텍스트 사이에 공간을 줄 때 사용합니다.

설정방법

1. 디자인 모드에 접속합니다. 접속방법
2. 왼쪽 상단의 위젯 추가 ＋ 아이콘을 클릭합니다.
3. 텍스트 위젯을 클릭합니다.
4. 텍스트 위젯을 마우스로 더블-클릭합니다.

5. 텍스트 에디터가 켜지면, 텍스트를 입력합니다.

6. 텍스트 위젯 바깥 영역을 클릭해 텍스트 에디터를 종료합니다.
7. 텍스트 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
8. 컨텍스트 메뉴가 나오면 텍스트 설정을 클릭합니다.
9. 객체 항목 오른쪽 끝 사용을 선택하고, 상하 여백과 좌우 여백을 수정합니다.
10. 닫기 ✕ 를 클릭해 위젯 설정 창을 닫아주세요. 그럼 아래 그림처럼 상하, 좌우에 공간이 생긴 걸 확인할 수 있습니다. 

참고사항

• 텍스트 위젯이 차지하는 그리드 수 대비 안쪽 여백이 너무 크지 않도록 주의해 주세요.
• 텍스트 박스가 가로로 너무 긴 경우 여백 위젯을 사용해 보세요.

텍스트 위젯 테두리 선 추가 방법

텍스트 위젯에 테두리를 추가하는 방법은 다음 도움말을 참고해 보세요.

텍스트 위젯 테두리 선 추가하기

도움말에 찾으시는 답변이 없으신가요? 문의하기

아임웹 디자인 모드는 PC버전을 제작하는 중 자동으로 모바일 버전도 구성됩니다. 이 과정에서 여러 연관된 위젯들을 적절하게 콘텐츠 단위로 묶어 배치하지 않는 경우, 모바일에서 알맞지 않은 모양 및 순서로 표시될 수 있습니다.

다음 그림은 디자인 모드에서 이미지 위젯과 텍스트 위젯을 사용해 제작한 페이지로 일견 문제가 없어 보입니다.

그러나 뷰포트를 모바일로 전환하면 다음처럼 순서에 맞지 않게 표시되는 걸 확인할 수 있습니다. 

그 이유는 PC 뷰포트에서 위젯들을 다음 그림처럼 한 줄로 배치했기 때문입니다. 한 줄에 배치한 위젯들은 아임웹 그리드 시스템에 따라 모바일 화면의 부족한 너비에 자동으로 반응하여 한줄 씩 내려가게 됩니다.이에 따라 사용자는 PC 뷰포트에서 위젯 배치 시 다음 그림처럼 연관된 위젯들을 하나로 묶어 배치해야 합니다.
참고: 연관 위젯들을 하나로 묶어 배치하는 방법은 아래 튜토리얼 7번 애니메이션을 참고해 주세요.

 이처럼 묶어 배치한 위젯들은 모바일 뷰포트 전환 시 다음처럼 묶음 단위로 한줄 씩 본문폭에 맞춰 나열됩니다. 

다음은 PC 뷰포트에서 배치한 위젯들을 모바일에서 정상적으로 표시되도록 배치하는 방법에 대해 튜토리얼 형식으로 설명합니다. 

배치방법 예제 따라하기

세 개 칼럼으로 나눠진 위젯들이 모바일에서 적절하게 표시되려면 다음 그림처럼 기준이 되는 위젯의 위 또는 아래에 배치해야 합니다.

1. 디자인 모드에 접속합니다. 접속방법
2. 이미지 위젯 3개를 삽입합니다. 위젯 추가방법
3. 이미지 위젯 하나를 마우스 클릭 후 드래그하여, 한 줄에 2개가 되도록 이동시킵니다. 위젯 이동방법

4. 남은 이미지 위젯도 같은 방법으로 한 줄에 3개가 되도록 배치합니다. 그럼 다음 그림처럼 배치됩니다.

   

5. 텍스트 위젯 3개를 추가합니다.
6. 텍스트 위젯 하나를 마우스 클릭 후 드래그하여, 가장 왼쪽 아이콘 위젯 바로 아래로 이동시킵니다.
   참고: 텍스트 위젯이 아이콘 위젯 바로 아래 위치하는 경우 다음 그림처럼 텍스트 위젯 너비만큼 검정색 선이 표시됩니다. 이 때 마우스를 놓아주세요.
   
7. 같은 방법으로 남은 2개의 텍스트 위젯들도, 아이콘 위젯 바로 아래 하나씩 배치합니다. 다음 애니메이션을 참고해 배치해 보세요.
8. 각 이미지 위젯의 설정을 열어 이미지를 추가합니다.
   참고: 이미지 크기는 각 이미지 위젯 설정에서, 높이를 똑같은 크기로 입력하므로서 모든 이미지가 같은 크기로 표시되도록 설정할 수 있습니다.
9. 각 텍스트 위젯을 마우스 더블-클릭하여, 글자를 입력합니다.
10. 디자인 모드 상단 중앙의 모니터 아이콘을 클릭해, 뷰포트를 모바일로 전환합니다. 뷰포트 변경방법
11. 이미지와 텍스트가 의도한 순서대로 나열되는지 확인합니다.

도움말에 찾으시는 답변이 없으신가요? 문의하기