아임웹 홈페이지 만들기 기초 강의, 모든 위젯 총정리 (초보자 필수 시청)아임웹으로 홈페이지를 만드는 방법은?

아임웹으로 홈페이지를 만드는 방법은?

아임웹으로 홈페이지를 만들려면 무료 시작하기 버튼을 눌러 사이트를 개설하고, 원하는 템플릿을 선택한 뒤 사이트 이름과 URL을 입력하여 개설 하면 됩니다. 이후 관리자 페이지에서 쇼핑 및 예약 기능을 활성화하고, 디자인 모드에서 위젯을 활용하여 홈페이지를 꾸밀 수 있습니다.

아임웹 홈페이지의 3단 구성과 각 부분의 역할은?

• 상단 섹션: 사이트 이름, 브랜드 이름, 메뉴, 로그인, 장바구니 버튼 등 상단 바 역할을 합니다.
• 본문: 홈페이지의 주요 내용을 담는 부분으로, 아래로 계속 추가할 수 있습니다.
• 하단바(푸터): 사업자 등록 번호, 사업장 소재지, 대표자명 등 기본적인 사이트 정보가 입력되는 곳입니다.

아임웹으로 나만의 홈페이지를 직접 만들고 싶은 초보자를 위한 완벽 가이드입니다. 이 영상 하나로 아임웹의 모든 위젯 기능과 활용법을 40분 만에 마스터할 수 있습니다. 단순히 기능을 나열하는 것을 넘어, 상단바부터 본문, 푸터까지 홈페이지의 각 영역을 어떻게 구성하고 디자인하는지 실용적인 팁과 함께 상세히 알려줍니다. 쇼핑몰, 예약 시스템, 게시판 등 다양한 기능을 직접 추가하고 설정하는 과정을 따라 하며, 직관적인 아임웹 사용법을 익혀 원하는 홈페이지를 손쉽게 구현할 수 있도록 돕습니다.

1. 아임웹 홈페이지 제작 기초 마스터 가이드

1. 아임웹 홈페이지 제작 목표: 40분 만에 아임웹 홈페이지 제작 방법을 마스터하는 것이 목표이다.
2. 강의 내용:
   1. 아임웹 홈페이지 개설 방법
   2. 아임웹 위젯 종류 및 사용법
3. 이전 강의 내용: 아임웹으로 홈페이지를 제작하는 이유에 대해 설명하였다.
4. 향후 강의 계획: 아임웹 이용법에 대한 영상을 계속 제작할 예정이다.

2. 아임웹 홈페이지 개설 및 기본 설정

2.1. 무료 사이트 개설 절차

1. 무료 시작하기: 아임웹 첫 화면에서 '무료 시작하기' 버튼을 클릭한다.
2. 내 사이트 접속: 설명 화면을 건너뛰고 오른쪽 상단의 '내 사이트' 버튼을 클릭하여 계정 페이지로 이동한다.
3. 무료 사이트 개설 선택: 페이지를 아래로 내려 '무료 사이트 개설'을 클릭한다.
4. 템플릿 선택:
   1. 다양한 템플릿 중 원하는 것을 선택할 수 있다.
   2. 각 템플릿에 마우스를 올리면 PC, 태블릿, 모바일 버전의 미리보기를 확인할 수 있다.
   3. 마음에 드는 템플릿을 선택 후 '사이트 개설'을 누른다.
   4. 블랭크 템플릿 선택: 템플릿이 적용되지 않은 기본 페이지인 '블랭크'를 선택하여 개설을 진행한다.
5. 사이트 이름 및 URL 입력: 원하는 사이트 이름과 URL을 입력한다. (예: 플램 테스트 페이지 0)
6. 개설 완료: '개설하기' 버튼을 눌러 사이트 개설을 완료한다.

2.2. 관리자 페이지 설정 및 기능 활성화

1. 사이트 관리자 로그인: 개설된 사이트 목록에서 해당 사이트의 '관리' 버튼을 클릭한 후, 아임웹 가입 시 사용한 이메일과 비밀번호로 로그인하여 관리자 페이지에 접속한다.
2. 관리자 페이지 기능:
   1. 사이트 방문자 수 확인
   2. 콘텐츠 반응 (예: 이메일 입력 폼 정보) 내역 확인
   3. 쇼핑 및 예약 기능 활성화: '사이트 관리' 옆의 플러스(+) 버튼을 눌러 쇼핑 및 예약 기능을 켜야 관련 기능을 사용할 수 있다.
3. 쇼핑 기능 설정:
   1. '쇼핑' 메뉴를 클릭한다.
   2. 상품 추가: '상품' 섹션에서 상품 이미지, 이름(예: 심플 화이트볼), 판매가(예: 12,000원) 등을 입력한다.
   3. 카테고리 생성: 상품 등록을 위해 카테고리(예: 키친)를 생성한다.
   4. 상품 등록 완료: 임의로 상품을 등록한다.
4. 관리자 페이지의 역할: 구매 내역, 주문 처리 과정(발송, 배송 준비, 입금 확인 등)을 모두 관리자 페이지에서 확인할 수 있다.

3. 아임웹 디자인 모드 및 홈페이지 기본 구조

1. 디자인 모드 접속: 관리자 페이지에서 '디자인 모드'로 이동한다.
2. 홈페이지 3단 구성: 아임웹 홈페이지는 크게 세 부분으로 구성된다.
   1. 상단 섹션 (상단 바): 홈페이지의 맨 윗부분으로, 사이트 이름, 브랜드 이름, 메뉴, 로그인, 장바구니 버튼 등이 위치한다.
   2. 본문: 상단 섹션 아래에 위치하며, 필요에 따라 아래로 계속 추가할 수 있다.
   3. 하단 바 (푸터): 홈페이지의 가장 아랫부분으로, 사업자 등록 번호, 사업장 소재지, 대표자명 등 기본적인 사이트 정보가 입력된다.
3. 섹션과 위젯:
   1. 섹션: 가로로 그어진 파란색 선으로 구분되며, 위젯들의 모음이다.
   2. 위젯: 마우스를 올리면 파란색으로 영역이 표시되는 개별 요소이다. (예: 여백 위젯, 텍스트 위젯)

4. 상단 섹션(상단 바) 디자인 및 설정

1. 상단 설정 진입: 상단 부분에 마우스 우클릭 후 '상단 설정'을 클릭한다.
2. 사이트 이름 및 메뉴 배치:
   1. 사이트 이름을 가운데로 드래그하여 배치한다.
   2. 메뉴를 왼쪽으로 배치한다.
3. 로고 설정:
   1. 기존 사이트 이름(예: 블램 테스트페이지) 대신 로고 이미지를 사용하기 위해 우클릭 후 '로고 설정'으로 들어간다.
   2. 미리 준비된 로고 이미지를 추가한다.
   3. 로고 이미지의 크기를 조절할 수 있다.
4. 메뉴 버튼 설정:
   1. 텍스트 형식의 메뉴(예: 어바웃, 프로덕트, 콘택트) 대신 아이콘 형태의 접힌 메뉴를 만들고 싶을 경우, 기존 메뉴를 삭제한다.
   2. 플러스(+) 버튼을 눌러 '메뉴 버튼' 위젯을 추가한다.
   3. 메뉴 버튼의 상세 설정에서 크기 및 색상(예: 까만색)을 변경할 수 있다.
5. 상단 디자인 완료: 원하는 대로 상단 바 디자인을 깔끔하게 완성한다.

5. 본문 섹션 위젯 총정리 (디자인 요소)

5.1. 섹션 추가 및 위젯 분류

1. 기존 본문 삭제: 기본적으로 있는 본문 내용을 모두 지울 수 있다.
2. 새 섹션 추가: 섹션 아래에 마우스를 두면 나타나는 플러스(+) 버튼을 눌러 새로운 섹션을 추가한다.
3. 위젯 분류: 아임웹의 위젯은 크게 두 가지로 분류된다.
   1. 디자인 요소: 이미지, 텍스트 등 디자인에 필요한 요소들을 말한다.
   2. 데이터베이스 요소 (DB 요소): 게시판, 쇼핑, 입력 폼 등 데이터베이스가 필요한 요소들을 말한다.

5.2. 디자인 요소 위젯 상세 설명

1. 이미지 위젯:
   1. 기능: 이미지를 삽입하는 위젯이다.
   2. 이미지 업로드: 이미지 설정에서 원하는 이미지를 업로드한다. (예: 햄스터 사진)
   3. 미리보기: '게시하기' 옆의 '미리보기' 버튼을 클릭하여 실제 사이트에서 이미지가 어떻게 보이는지 확인할 수 있다.
   4. 링크 추가: 이미지 전체에 링크를 추가할 수 있지만, 부분별 설정은 불가능하다.
2. 이미지 맵 위젯:
   1. 기능: 이미지의 특정 부분에 링크를 추가할 수 있는 위젯이다.
   2. 링크 추가: 이미지 맵 링크 추가 버튼을 눌러 영역(사각형)을 표시하고, 각 영역에 다른 링크를 설정할 수 있다. (예: 꽃 봉우리에 유튜브 채널 링크, 꽃 병에 네이버 링크)
   3. 미리보기: 미리보기 모드에서 각 영역을 클릭하여 링크 이동을 확인할 수 있다.
3. 텍스트 위젯:
   1. 기능: 글자를 입력하는 위젯이다.
   2. 크기 및 배열 조절: 위젯의 경계 부분을 조절하여 크기를 변경하거나, 다른 위젯 옆으로 끌어와 배열할 수 있다.
   3. 텍스트 편집: 글씨 크기, 굵기, 기울임 등 다양한 텍스트 편집이 가능하다.
   4. 링크 삽입: 텍스트에 링크를 삽입하여 클릭 시 해당 페이지로 이동하게 할 수 있다. (예: 네이버 링크)
4. 여백 위젯:
   1. 기능: 아무 기능이 없지만, 디자인에 필수적인 요소로 위젯 간의 간격을 조정하는 데 사용된다.
   2. 간격 조정: 다른 위젯들 사이에 여백 위젯을 끌어다 놓아 간격을 조절할 수 있다.
5. 동영상 위젯:
   1. 기능: 동영상 파일을 직접 업로드하는 대신, 유튜브나 비메오 같은 동영상 주소를 입력하여 홈페이지에 영상을 삽입한다.
   2. 미리보기: 미리보기 모드에서 영상이 제대로 재생되는지 확인할 수 있다.
6. 가로선 위젯:
   1. 기능: 가로로 뻗은 선을 추가하여 콘텐츠 간의 구분을 명확히 한다.
   2. 설정: 가로선 설정에서 선 색상, 두께 등을 조절할 수 있다.
7. 버튼 위젯:
   1. 기능: 특정 페이지로 이동하는 링크를 걸 수 있는 버튼을 생성한다.
   2. 디자인 설정: 크기, 디자인 등을 원하는 대로 설정할 수 있다. (예: '상품 바로 가기' 버튼)
8. 메뉴 리스트 위젯:
   1. 기능: 메뉴 목록을 생성한다. (예: 상품 소개, 공지, 문의하기)
   2. 메뉴 숨김: 로고 클릭 시 홈으로 이동하므로, '홈'과 같은 메뉴는 '메뉴 숨김' 옵션을 사용하여 숨길 수 있다.
9. 타이틀 위젯:
   1. 기능: 페이지의 제목을 입력하는 용도로 사용되지만, 활용 빈도는 높지 않다.
10. 단일지도 위젯:
    1. 기능: 찾아오시는 길, 문의하기 페이지 등에서 지도를 표시하는 데 사용된다.
    2. API 키 등록: 구글 또는 네이버의 API 키를 발급받아 등록해야 지도를 사용할 수 있다.
    3. 아임웹 가이드 활용: 아임웹 고객 지원 가이드에서 '단일지도'를 검색하면 상세한 설정 방법을 확인할 수 있다.
11. 코드 위젯:
    1. 기능: 아임웹 기본 기능 외에 특별한 디자인이나 기능을 추가하기 위해 코드를 삽입하는 용도이다.
    2. 활용 예시: 뱅글뱅글 돌아가는 텍스트, 세로선 등 아임웹에 없는 기능을 구현할 때 사용된다.
    3. 정보 검색: 구글링이나 네이버 검색을 통해 필요한 코드 가이드를 찾을 수 있다.
12. 아이콘 위젯:
    1. 기능: 다양한 아이콘을 삽입하고 링크를 연결하여 다른 페이지로 이동하게 할 수 있다.
    2. 아이콘 설정: '아이콘 설정'에서 소셜 브랜드 아이콘(예: 틱톡, 인스타그램) 등 다양한 아이콘을 선택할 수 있다.
    3. 크기 및 링크: 아이콘 크기를 조절하고 인스타그램 링크 등을 연결하여 사용한다.

6. 본문 섹션 위젯 총정리 (데이터베이스 요소)

6.1. 비주얼 섹션 위젯

1. 기능: 브랜드 디자인, 중요한 요소 표현, 특별 이벤트 내용 등을 담는 섹션으로, 여러 이미지가 슬라이드로 넘어가는 기능을 제공한다.
2. 섹션 추가: 바깥쪽 바탕에 마우스 우클릭 후 '섹션 추가'를 선택하여 빈 섹션을 추가한다.
3. 비주얼 설정:
   1. 우클릭 후 '비주얼 설정'으로 이동한다.
   2. 슬라이드 추가: 새로운 슬라이드를 추가하여 이미지를 업로드하고 텍스트(예: 이벤트 30% 할인)를 설정할 수 있다.
   3. 버튼 링크: 버튼에 원하는 링크를 설정할 수 있다.

6.2. 데이터베이스 요소 위젯 상세 설명

1. 검색 위젯:
   1. 기능: 홈페이지에 검색 버튼을 추가한다.
2. 게시판 위젯:
   1. 기능: Q&A, 리뷰, 공지사항 등 다양한 게시판을 생성한다.
   2. 게시판 설정: 게시판 설정에서 디자인을 변경할 수 있다. (예: 사진과 텍스트 동시 표시, 텍스트만 표시, 이미지만 표시)
   3. 글 작성: 게시판 글은 디자인 모드가 아닌 미리보기 모드나 실제 사이트에서 작성해야 한다.
3. 갤러리 위젯:
   1. 기능: 여러 사진을 모아 보여주는 갤러리를 생성한다.
   2. 이미지 추가 및 디자인: 이미지를 많이 추가할 수 있으며, 다양한 디자인과 이미지 비율(예: 1:1 정방향)을 선택할 수 있다.
   3. 한 줄 개수 조절: 한 줄에 표시되는 이미지 개수를 조절할 수 있다. (예: 4개에서 8개)
4. 캘린더 위젯:
   1. 기능: 날짜를 보여주는 달력을 표시한다.
   2. 제한 사항: 지도, 게시판, 쇼핑, 예약 등과 같은 페이지에 함께 넣을 수 없다.
   3. 일정 추가: 캘린더 설정에서 일정을 추가할 수 있으며, 실제 사이트에서 일정을 작성해야 한다. (예: 오후 3시 미팅)
   4. 권한 설정: 모든 사용자 또는 관리자/소유자만 일정을 등록할 수 있도록 권한을 설정할 수 있다.
5. 입력폼 위젯:
   1. 기능: 문의하기 게시판 등에서 이름, 연락처, 이메일 주소 등을 입력받는 폼을 생성한다.
   2. 설정 및 순서 변경: 입력 필드를 추가하고 순서를 변경할 수 있다.
   3. 디자인 설정: 배경색, 글자색 등 사용자 정의 색상 설정을 할 수 있다.
   4. 응답 확인: 입력폼을 통해 들어온 응답은 관리자 페이지의 '콘텐츠 관리'에서 확인할 수 있다.
6. 지도 게시판 위젯:
   1. 기능: 여러 장소가 표시되는 지도를 제공하여 여러 사용자가 활용하기 좋다.
   2. API 키 등록 및 가이드 활용: 단일지도와 마찬가지로 API 키를 등록해야 하며, 아임웹 가이드에서 '지도 게시판'을 검색하여 상세한 설정 방법을 확인할 수 있다.
7. 쇼핑 위젯:
   1. 기능: 쇼핑몰에서 상품을 진열하는 위젯이다.
   2. 설정:
      1. 한 줄 개수: 한 줄에 표시되는 상품 개수를 설정할 수 있다. (예: 3~4개)
      2. 표시 항목: 브랜드명, 상품명, 가격 등 표시할 항목을 켜고 끌 수 있으며, 크기도 조절할 수 있다.
   3. 상세 페이지 및 결제: 상품 클릭 시 상세 페이지로 이동하며, 구매하기 버튼을 통해 주문자 정보, 배송 정보 입력 및 결제까지 가능하다.
   4. 주문 내역 확인: 관리자 페이지의 '쇼핑 주문'에서 상품의 처리 과정(발송, 배송 준비, 입금 확인 등)을 확인할 수 있다.
8. 쇼핑 기획전 위젯:
   1. 기능: 쇼핑 위젯과 유사하지만, 메인 화면에서 베스트 아이템 등을 슬라이드 형식으로 보여주는 기능이다.
   2. 슬라이드 설정: 전환 속도, 대기 시간 등을 설정하여 슬라이드 또는 좌우 버튼으로 상품을 넘겨볼 수 있게 한다.
   3. 활용: 주로 메인 페이지에서 가장 잘 팔리거나 인기 있는 상품들을 보여주는 데 사용된다.
9. 최신글 위젯:
   1. 기능: 가장 최근에 업데이트된 글들을 보여주는 위젯이다.
   2. 활용: 랜딩 페이지 등에서 최신 업데이트 내용을 표시하고 싶을 때 사용된다.
10. 예약 위젯:
    1. 기능: 객실 예약 등 하루 단위의 예약을 할 수 있는 캘린더 형태의 위젯이다.
    2. 관리자 페이지 설정: 쇼핑과 마찬가지로 관리자 페이지의 '예약 객실 사이트'에서 상품을 미리 등록해야 한다.
    3. 상품 추가: 이미지 추가, 최소/최대 예약일, 연박 할인, 요금(예: 15만 원), 기준 인원 초과 요금(예: 3만 원) 등을 설정한다.
    4. 위젯 추가 및 미리보기: 디자인 모드에서 예약 위젯을 추가한 후 미리보기 모드에서 예약 과정을 확인할 수 있다.
    5. 예약 및 결제: 입실/퇴실 날짜 선택 후 '예약하기' 버튼을 누르면 결제창으로 이동하여 결제를 진행할 수 있다.

7. 하단 섹션(푸터) 디자인 및 설정

1. 하단 설정 진입: 가장 아래쪽에 있는 푸터 부분에 마우스 우클릭 후 '하단 설정'을 클릭한다.
2. 설정 항목: 사이트명, 상단 메뉴, 저작권 문구 표시(카피라이트) 등을 설정할 수 있다.
3. 디자인 및 색상: 글씨 크기, 색상, SNS 링크 등을 조절할 수 있다.
4. 템플릿 활용: '섹션 추가'의 '요술봉 섹션'을 눌러 다양한 하단 디자인 템플릿을 활용할 수 있다.
   1. 원하는 템플릿을 선택하면 바로 홈페이지에 추가된다.
   2. 추가된 템플릿 내용을 자신에게 맞게 수정할 수 있다.
   3. 다양한 하단 디자인 중 선호하는 디자인으로 변경하여 수정할 수 있다. (예: 사업자 정보 입력)

8. 아임웹 활용 팁 및 마무리

1. 아임웹의 장점: 아임웹은 초보자도 쉽게 사용할 수 있도록 직관적인 디자인과 쉬운 설명으로 구성되어 있다.
2. 아임웹 가이드 활용: 궁금한 점이 있을 경우 아임웹 고객 지원 가이드에서 검색하면 상세한 내용을 확인할 수 있다.
3. 실습의 중요성: 영상이나 글로만 배우기보다는 위젯 하나하나를 직접 눌러보면서 감을 익히고, 설정 변화에 따른 결과를 직관적으로 파악하는 것이 중요하다.
4. 숙련 및 목표 달성: 꾸준히 연습하면 아임웹에 빨리 익숙해지고 원하는 홈페이지를 쉽게 만들 수 있다.

비전공자 코딩 독학 노코드 툴 버블io 기초 AtoZ 초보자필독 바로가기

비전공자 코딩 독학 노코드 툴 버블io 기초 AtoZ 초보자필독 - 하나이프 블로그