아임웹 위젯·섹션 완전 정리 — 페이지 구성 요소 다루기
아임웹의 모든 페이지는 섹션 안에 위젯으로 구성됩니다. 페이지 → 섹션 → 위젯 3계층 구조를 이해하면 어떤 페이지든 자유롭게 만들 수 있어요. 이 글에서는 섹션·위젯의 차이부터 종류별 사용법까지 정리합니다.
시작하기 전에
- 디자인 모드 진입 필요.
- 3계층 구조:
페이지(메뉴) ▶ 섹션(가로 띠) ▶ 위젯(요소) - 자동 저장되지만 방문자에게 반영하려면 게시하기 필요.
섹션이란?
페이지를 가로로 나누는 단락. 한 페이지에 여러 섹션을 쌓아 만듭니다.
각 섹션은:
- 배경(색·이미지·동영상) 설정 가능
- 위젯 여백·간격·사이드 나눔 설정 가능
- 모바일에서만 보이게 / PC에서만 보이게 설정 가능
💡 비유: 페이지가 공책이라면, 섹션은 단락, 위젯은 글자·그림.
위젯이란?
섹션 안에 들어가는 콘텐츠 단위. 텍스트·이미지·버튼·게시판·갤러리 등 종류가 다양.
위젯은 크게 3분류:
- 디자인 요소: 일반 콘텐츠 (이미지·텍스트·버튼 등)
- DB 요소: 데이터베이스 기반 (게시판·갤러리·입력폼·쇼핑 등)
- 상단 전용: 헤더에만 사용 (로고·메뉴·로그인 등)
섹션 다루기
1. 섹션 추가
빈 섹션
- 디자인 모드에서 섹션 사이 + 버튼 클릭.
- 빈 섹션 선택.
- 추가된 빈 섹션에 위젯을 자유롭게 배치.
섹션 템플릿
미리 디자인된 섹션을 가져옵니다(콘텐츠·상품 소개·구성원·연락처 등 자주 쓰이는 레이아웃).
- 섹션 + 버튼 → 섹션 템플릿.
- 카테고리에서 원하는 템플릿 선택 → 추가.
- 텍스트·이미지만 본인 콘텐츠로 교체.
💡 빈 페이지에서 시작하기 막막하면 템플릿으로 골격 잡고 디테일 수정하는 흐름이 빠릅니다.
2. 섹션 설정
섹션 마우스 우클릭 → 섹션 설정.
| 항목 | 설명 |
|---|---|
| 배경 | 색·이미지·동영상 (그라데이션도 가능) |
| 위젯 여백 | 위젯 사이 간격 |
| 섹션 여백 | 위·아래 패딩 |
| 사이드 나누기 | 좌·우 2분할 등 그리드 활용 |
| 효과 | 시차 스크롤(parallax) 등 |
3. 섹션 이동·복제·삭제
- 이동: 섹션 우클릭 → 위로 이동 / 아래로 이동.
- 복제: 섹션 우클릭 → 섹션 복사 → 원하는 위치에서 섹션 붙여넣기.
- 삭제: 섹션 우클릭 → 섹션 삭제 (⚠️ 안의 모든 위젯도 같이 삭제. 복구 불가).
💡 다른 페이지의 섹션을 그대로 가져오고 싶을 때: 원본에서 섹션 복사 → 다른 메뉴로 이동 → 섹션 붙여넣기. 디자인까지 통째로 복제됩니다.
디자인 요소 위젯 — 일반 콘텐츠
| 위젯 | 용도 |
|---|---|
| 이미지 | 페이지에 이미지 삽입. 가장 많이 쓰이는 위젯 |
| 이미지맵 | 한 이미지에 여러 영역별 링크 (예: 인포그래픽) |
| 텍스트 | 문단 입력, 표·이미지·코드 삽입 가능 |
| 여백 | 비어 있는 공간 추가 (위·아래 간격 조절) |
| 동영상 | YouTube 또는 Vimeo 영상 삽입 |
| 가로선 | 구분선 |
| 버튼 | 링크·전화·이메일·파일 다운로드 |
| 메뉴 리스트 | 본문 안에 서브 메뉴 자동 표시 |
| 타이틀 | 현재 메뉴명을 큰 글자로 출력 |
| 단일 지도 | Naver 또는 Google 지도 위치 표시 |
| 코드 | HTML/CSS/JS 직접 삽입 (외부 모듈 연결용) |
| 아이콘 | 별도 툴 없이 아이콘 삽입 |
| 비주얼섹션 | 슬라이드 방식의 메인 비주얼 (Hero) |
| 검색 | 사이트 내 검색 기능 |
💡 코드 위젯으로 외부 도구(예: 채널톡 위젯, 카운트다운 타이머, 캘린더 임베드)를 자유롭게 추가할 수 있습니다.
DB 요소 위젯 — 데이터 기반
데이터베이스와 연결된 위젯입니다. 설정 변경은 게시 없이 즉시 사이트 반영된다는 점 주의.
| 위젯 | 용도 | 메뉴당 추가 |
|---|---|---|
| 게시판 | 공지·블로그·후기 등 글 목록 | 1개만 |
| 갤러리 | 이미지·동영상 그리드/슬라이드 | 여러 개 |
| 캘린더 | 일정 공지 | 여러 개 |
| 입력폼 | 신청서·설문·문의 폼 | 여러 개 |
| 지도 게시판 | 여러 위치를 한 지도에 (예: 가맹점) | 1개만 |
| 쇼핑 | 상품 카테고리 노출 | 1개만 |
| 쇼핑 기획전 | 특정 상품 컬렉션 | 여러 개 |
| 최신글 | 다른 게시판의 최신글 가져오기 | 여러 개 |
| 예약 | 객실·서비스 예약 시스템 | 1개만 |
게시판 여러 개를 한 메뉴에 보이게 하려면?
게시판 위젯은 메뉴당 1개 제한이지만, 최신글 위젯을 여러 개 사용하면 여러 게시판의 글을 한 페이지에 모을 수 있어요. (예: 메인페이지에 공지·블로그·후기를 동시 노출)
상단 전용 위젯 — 헤더 영역
| 위젯 | 용도 |
|---|---|
| 로고 | 텍스트·이미지 로고 |
| 선 | 헤더에 가로/세로 구분선 |
| 링크/버튼 | 메뉴 외 추가 링크·CTA 버튼 |
| 메뉴 | 메뉴 관리에서 만든 메뉴 표시 |
| 로그인/장바구니 | 회원가입·로그인·마이페이지·장바구니 (로그인 전후 다르게 설정 가능) |
| 다국어 | 언어 전환 버튼 (글로벌 버전 한정) |
| 메뉴 버튼 | 햄버거 메뉴 (사이드 드로어) |
| 모바일 전용 메뉴 | 모바일에서만 표시되는 별도 메뉴 |
위젯 다루기 (공통)
1. 추가
디자인 모드 좌상단 + 위젯 추가 → 위젯 선택 → 섹션에 드래그.
2. 이동
위젯 클릭 후 드래그. 인접한 위젯끼리만 이동 가능(같은 섹션 내 또는 옆 섹션).
3. 복제
위젯 우클릭 → 위젯 복사 → 원하는 위치에서 위젯 붙여넣기.
4. 설정
위젯 우클릭 → 위젯 설정 (위젯 종류마다 항목 다름).
5. 삭제
위젯 우클릭 → 위젯 삭제.
모바일에서만 / PC에서만 표시
위젯 단위
위젯 우클릭 → PC에서 숨김 또는 모바일에서 숨김.
섹션 단위
섹션 우클릭 → PC에서 숨김 또는 모바일에서 숨김.
모바일 전용 섹션 새로 만들기
디자인 모드 모바일 뷰포트에서 + 모바일 전용 섹션 추가. 이 섹션은 PC에서는 보이지 않습니다.
💡 모바일과 PC의 콘텐츠 우선순위가 다를 때 활용. 예: 모바일에서는 전화 버튼이 크게, PC에서는 메뉴가 먼저.
⚠️ 자주 막히는 포인트
- “섹션 추가 + 버튼이 안 보여요” → 섹션 사이로 마우스 호버해야 + 버튼이 나타남.
- “위젯이 옆 칸으로 안 옮겨져요” → 인접 요소끼리만 이동 가능. 멀리 옮기려면 단계별로.
- DB 위젯 설정이 즉시 사이트에 반영됨 → 게시 안 했다고 안심하지 말 것. 테스트는 비공개 메뉴에서.
- 게시판이 한 메뉴에 2개 안 들어감 → 최신글 위젯 사용.
- 섹션 삭제하면 위젯도 다 사라짐 → 복구 불가. 백업 후 삭제.
❓ FAQ
Q. 같은 디자인을 여러 페이지에 쓰려면? A. 섹션 복사 → 다른 메뉴에서 섹션 붙여넣기. 또는 처음부터 페이지 자체를 메뉴 복제로 만들어 변형.
Q. 코드 위젯을 잘못 입력해서 페이지가 깨졌어요. A. 디자인 모드 → 해당 위젯 우클릭 → 위젯 삭제. 또는 게시 복원으로 마지막 게시 시점으로 복원.
Q. 위젯 종류가 더 있을 것 같은데 안 보여요. A. 일부 위젯은 요금제·부가서비스에 따라 제한됩니다. 예: 쇼핑 위젯은 Starter 이상, 예약은 부가서비스 가입 필요.
Q. 외부 도구(채널톡, 알리미 등)는 어떻게 연결하나요? A. 외부 도구가 제공하는 임베드 코드를 코드 위젯에 붙여넣기. 헤더·푸터 전체에 적용하려면 환경설정 > SEO > 공통 코드 삽입.
Q. 위젯을 그리드 형태로 배치하려면? A. 섹션 설정에서 사이드 나누기 활용. 2분할·3분할 등 그리드 컬럼을 만들 수 있어요.
관련 가이드
- imweb-menu-management — 메뉴 다루기
- imweb-design-customization — 공통 디자인 설정 (폰트·색·버튼) (예정)
- imweb-mobile-design — 모바일 편집 (예정)
- imweb-popup-banner — 팝업·비주얼섹션 (예정)
- imweb-getting-started — 처음 시작하기
출처 및 검증 본 가이드는 아임웹 공식 도움말(2026년 5월 확인)을 기반으로 언웹스가 실무 노하우를 더해 재구성했습니다. 최종 확인: 2026-05.