아임웹으로 홈페이지 만들기 — 템플릿 선택부터 완성까지 전 과정

아임웹으로 홈페이지를 만드는 방법은 AI 생성과 템플릿 편집 두 가지입니다. 이 글은 결과물이 안정적인 템플릿 방식으로, 템플릿 선택부터 헤더·메인 화면·본문·기능 추가까지 실제 제작 순서 그대로 따라갑니다. 처음 만들어보는 분 기준으로 씁니다.

시작하기 전에

• 준비물: 아임웹 계정, 사이트에 넣을 이미지 몇 장(회사·제품 사진), 소개 문구 초안.
• 구조 개념: 페이지는 섹션(가로 띠) ▶ 요소(위젯)로 조립됩니다. 개념이 처음이면 위젯·섹션 정리 가이드를 먼저 읽고 오는 편이 빠릅니다.
• 저장: 편집은 자동 저장되지만, 방문자에게 보이려면 게시(발행)해야 합니다.

1. AI 생성보다 템플릿을 권하는 이유

아임웹은 프롬프트를 입력하면 사이트를 만들어주는 AI 기능이 있습니다. 다만 현재 시점 기준으로는 프롬프트를 잘 써도 디자인 완성도가 템플릿에 못 미칩니다. 결과물을 받아서 다시 뜯어고칠 바에는, 처음부터 완성도 높은 템플릿을 고르고 내용만 바꾸는 쪽이 빠릅니다.

템플릿은 업종 분류에서 목적에 가까운 것을 고릅니다. 기업 소개용이면 기업형 템플릿에서 시작하는 식입니다. 템플릿을 고르면 관리자 모드가 열리고, 디자인을 고치려면 디자인 모드로 들어갑니다.

2. 디자인 모드 — 파란 점선이 섹션이다

디자인 모드에 들어가면 화면이 파란색 점선으로 나뉘어 보입니다. 점선 한 칸이 섹션입니다. 섹션 안의 + 버튼을 누르면 디자인 요소(이미지·텍스트·여백·동영상 등)와 DB 요소(게시판·갤러리·쇼핑 등)를 추가할 수 있습니다.

필요 없는 섹션은 지우면서 시작합니다. 섹션 위에서 마우스 클릭 → 섹션 삭제. 템플릿에 있는 프로모션 배너처럼 우리 사이트에 안 쓸 영역부터 정리하면 그다음이 깔끔합니다.

3. 상단(헤더) 편집 — 놓치기 쉬운 ‘고정 메뉴’ 함정

상단 영역에 마우스를 대고 클릭 → 상단 편집으로 들어갑니다. 여기서 로고, 메뉴(카테고리), 버튼을 다룹니다.

겹치기 vs 상단 기본

상단은 두 가지 상태가 있습니다.

• 겹치기: 메인 배너 이미지 위에 메뉴가 겹쳐 보이는 상태 (첫 화면).
• 상단 기본: 스크롤을 내렸을 때 배경이 채워진 상태.

메뉴 위치는 클릭 → 가운데로 이동 같은 정렬 메뉴로 바꾸고, 세로 점선(영역)을 당겨 폭도 조절합니다.

여기가 함정입니다

겹치기 상태를 수정하면 상단 기본도 따라 바뀌는 것처럼 보이지만, 스크롤 시 나타나는 고정 메뉴는 별도입니다. 고정 메뉴 설정 → 상단 기본 디자인 가져오기를 눌러야 스크롤을 내렸을 때도 바뀐 디자인이 적용됩니다. 상단을 고쳤는데 스크롤하면 예전 디자인이 나온다면 십중팔구 이걸 빼먹은 겁니다.

버튼 이름도 여기서 바꿉니다. 기본 버튼을 “문의하기”로 바꾸고 문의 페이지로 연결해두면 헤더가 영업을 시작합니다.

4. 메인 화면 — 배경 이미지와 음영 처리

1. 메인 섹션 클릭 → 섹션 설정 → 배경 이미지를 준비한 사진으로 교체.
2. 이미지가 밝아 글자가 안 읽히면 배경 색상에 어두운 색 + 투명도(예: 50%)를 얹습니다. 음영 한 장 깔았을 뿐인데 텍스트 가독성이 크게 달라집니다.
3. 텍스트는 더블 클릭으로 바로 수정합니다. 회사 한 줄 소개 + 보조 문구 + 버튼(문의하기) 구성이 기본형입니다.

소개 문구가 안 떠오르면 ChatGPT 같은 AI에 기존 화면을 캡처해 올리고 “이 내용을 우리 회사 소개로 바꿔 줘”라고 요청해 초안을 받는 방법도 있습니다. 단, 받은 초안은 그대로 쓰지 말고 우리 회사 사실에 맞게 다듬어야 합니다.

5. 본문 섹션 채우기 — 드래그로 조립

본문은 같은 동작의 반복입니다. 섹션 클릭 → 이미지·텍스트 교체. 새 영역이 필요하면 마우스 우측 클릭 → 빈 섹션 추가 후 + 버튼으로 요소를 넣습니다.

• 이미지: 우측 클릭 → 이미지 설정에서 업로드. 크기 조절, 모서리 둥글게 처리 가능.
• 텍스트: 드래그 앤 드랍으로 위치를 잡으면 배열이 자동 정리됩니다. 제목은 크게(예: 36px·굵게), 본문은 작게 — 두 단계면 충분합니다.
• 여백: 요소 사이가 답답하면 여백 요소를 넣어 간격을 만듭니다. 여백을 잘 쓰는 것만으로 완성도가 달라집니다.
• 가로선: 내용 성격이 바뀌는 지점에서 영역을 구분할 때 씁니다.

6. 자주 쓰는 요소 — 실무 포인트만

버튼

클릭 시 동작을 링크·전화 걸기·문자 등에서 고릅니다. 버튼 추가를 누르면 같은 디자인의 버튼이 복제되므로, “전화 걸기 / 카카오톡 / 문의하기” 3버튼 구성을 만들 때 편합니다.

이미지 맵

이미지 위에 클릭 영역을 그려 특정 부분만 링크로 연결하는 요소입니다. 한 장의 안내 이미지에서 부분별로 다른 페이지로 보내고 싶을 때 씁니다.

동영상

유튜브·비메오 주소만 등록됩니다. 파일 직접 업로드가 아니라 링크 방식입니다. 라이트 박스(화면이 어두워지며 확대 재생), 자동 재생, 마우스를 올리면 재생 같은 옵션이 있습니다.

지도

네이버·구글 지도는 API 키를 발급받아 등록해야 실지도가 나옵니다. 네이버 지도 API는 유료로 전환되어 호출량에 따라 소액의 이용료가 발생할 수 있습니다. 비용 없이 위치만 보여주려면 이미지 지도(지도 화면을 이미지로 표시)로 대체할 수 있습니다.

비주얼 섹션 (메인 슬라이드)

이미지가 넘어가는 대형 배너입니다. 풀스크린 여부, 좌우 버튼, 슬라이드 순서, 전환 속도(기본이 빠르면 10초 정도로)까지 세부 조절이 됩니다. 첫 화면에서 회사 인상을 결정하는 요소라 공들일 가치가 있습니다.

코드

HTML·CSS·스크립트를 직접 넣는 요소입니다. 평소에는 쓸 일이 없고, 아임웹 기본 기능으로 안 되는 디자인(호버 효과, 커스텀 카드 등)을 구현할 때 제작 업체들이 쓰는 영역입니다. 언웹스도 아임웹 사이트를 다듬을 때 이 코드 요소로 기본 제공 범위 밖의 디자인을 구현합니다. 기본 기능만으로 아쉬움이 남는 지점이 어디인지는 공통 디자인 커스터마이징 가이드에서 더 다룹니다.

7. DB 요소 — 게시판부터 예약까지

게시판

글을 쓰면 콘텐츠 관리 → 게시물에 쌓입니다. 게시판 설정에서 이름·카테고리·비밀글·쓰기 권한을 정하고, 리스트·이미지형·Q&A형 등 스타일을 고릅니다.

갤러리

이미지 여러 장을 격자로 보여줍니다. 이미지별 제목·설명은 마우스를 올렸을 때 나타나는 방식이고, 리스트 비율(1:1, 3:4)과 한 줄 개수도 조절됩니다. 시공 사례·포트폴리오 페이지에 잘 맞습니다.

캘린더

일정을 등록해 방문자에게 보여주는 요소입니다. 휴무일·행사 일정을 실시간으로 알릴 때 씁니다.

쇼핑·기획전·최신글

• 쇼핑: 상품 카테고리에 상품을 먼저 등록해야 화면에 노출됩니다. 상품 복제 기능이 있어 비슷한 상품은 복제 후 이름·이미지만 바꾸면 빠릅니다.
• 쇼핑 기획전: 행사 상품만 모아 슬라이드·리스트로 노출합니다.
• 최신글: 지정한 게시판의 최근 글을 메인 화면에 자동 노출합니다.

예약

아임웹 예약 기능은 숙박 업소에 특화되어 있습니다. 객실(상품)을 등록하면 방문자가 날짜를 고르고 결제·취소 규정 동의까지 한 화면에서 진행합니다. 펜션·게스트하우스라면 유용하고, 일반 업종의 상담 예약이라면 예약 기능보다 입력폼이 맞는 경우가 많습니다.

8. 만들고 나서 — 발행 전 체크

1. 모바일 확인: PC에서 예뻐도 모바일에서 깨질 수 있습니다. 모바일 디자인 가이드대로 모바일 화면을 따로 점검하세요.
2. 도메인 연결: 기본 주소 대신 내 도메인을 붙입니다. 도메인 연결 가이드 참고.
3. 검색 노출 설정: 만들기만 하면 검색에 안 잡힙니다. 아임웹 SEO 6단계 체크리스트를 발행 직후에 한 번 돌리세요.

자주 막히는 포인트

• 상단을 고쳤는데 스크롤하면 옛 디자인이 나온다 → 고정 메뉴 설정에서 “상단 기본 디자인 가져오기”를 안 누른 경우 (3번 참고).
• 배경 이미지 위 글자가 안 읽힌다 → 배경 색상 + 투명도로 음영을 얹는다 (4번 참고).
• 동영상 업로드가 안 된다 → 파일 업로드가 아니라 유튜브·비메오 링크 방식이다.
• 네이버 지도가 안 나온다 → API 키 미등록. 키 없이 쓰려면 이미지 지도로 대체.
• 쇼핑 요소에 상품이 안 보인다 → 요소만 넣고 상품 카테고리에 상품을 등록 안 한 경우.

관련 가이드

• 아임웹 위젯·섹션 완전 정리 — 이 글의 요소 사전 격
• 아임웹 처음 시작하기 — 관리자 접속부터 첫 발행까지
• 도메인 연결하기
• 모바일 디자인
• 아임웹 SEO 6단계 체크리스트
• 홈페이지 제작 비용 가이드 — 직접 제작과 외주 제작의 비용 비교 기준

출처 및 검증 — 아임웹 에디터 실사용 화면 기준으로 제작 순서를 정리했습니다 (2026-07). 아임웹 기능·요금·API 정책은 변경될 수 있으니 결제 전 공식 안내를 확인하세요.