섹션에 배경 이미지를 삽입하고 "배경 이미지 고정" 효과를 적용하면 마우스 휠을 스크롤 하더라도 배경 이미지가  해당 섹션에 고정되어 표시됩니다. 방문자의 눈길을 사로잡는 시각적 효과를 간편하게 적용할 수 있어, 비주얼 중심의 웹 페이지 디자인에 효과적입니다.

설정방법

1. 디자인 모드에 접속합니다. 접속방법
2. 왼쪽 상단의 메뉴 관리 아이콘  ≡ 을 클릭하고, 배경 이미지 고정 효과를 적용할 메뉴를 클릭해 이동합니다.
3. 배경 이미지 고정 효과를 적용하기 위한 새로운 빈 섹션을 추가합니다. 빈 섹션 추가방법
4. 빈 섹션에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
5. 컨텍스트 메뉴가 나오면 섹션 설정을 클릭합니다.
6. 이미지 업로드 영역에 마우스 포인터를 올리면, 이미지 업로드 옵션이 표시됩니다. 이미지 찾기를 클릭해 내 PC에서 이미지를 선택해 올려줍니다.

   참고: 배경에 올릴 이미지는 섹션 배경 전체를 꽉 채우기 때문에 충분히 큰 해상도(가로 1920픽셀, JPG)의 이미지를 사용해 주세요. 별도 준비한 이미지가 없는 경우, 무료 이미지를 사용할 수도 있습니다. 단, 동영상은 배경 이미지 고정 옵션이 동작하지 않습니다.

   
7. 섹션 배경 효과로 배경 이미지 고정 옵션을 선택합니다.
8. 섹션 설정 창 바깥 영역 아무 곳을 클릭해 설정을 종료합니다.
9. 마우스 휠 스크롤을 움직여 배경 이미지 고정 효과가 적용되었는지 확인합니다.

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

아임웹은 쇼핑몰 제작에 필요한 여러 도구를 제공하며, 사용자는 이 도구들을 응용해 다양한 방법으로 상품을 진열하고 페이지를 꾸밀 수 있습니다. 이 도움말에서는 페이지에 상품을 진열하는 대표적인 4가지 방법을 소개합니다. 

시작에 앞서

상품을 페이지에 진열하고 디자인하기에 앞서 쇼핑 기본설정이 필요합니다. 아래 도움말을 참고해 쇼핑 환경을 설정하고 상품 카테고리를 구성한 다음에 상품(들)을 등록해 주세요.

쇼핑몰 시작하기

구성방법

방법1: 기본 상품 진열하기

디자인 모드에서 페이지에 쇼핑 위젯을 추가하고 등록한 상품을 카테고리 단위로 불러올 수 있습니다. 카테고리 연결 후 자동 생성된 하위 카테고리는 디자인 모드에서 편집이 불가하며 관리자 페이지의 카테고리 관리에서 가능합니다.

상품 진열하기

장점

• 최상위 카테고리를 연동하면 하위 카테고리는 메뉴가 자동 생성됨

단점

• 카테고리 페이지 별 디자인 불가

방법2: 상위 상품 카테고리마다 개별 디자인하기

쇼핑 기획전 위젯을 활용해 메뉴마다 다른 디자인으로, 다른 카테고리의 상품들을 진열하는 게 가능합니다. 이 방식으로 제작된 쇼핑 메뉴들은 디자인 모드의 메뉴 관리에서 편집이 가능해집니다.

단, 각 메뉴의 쇼핑 기획전 위젯에 연결한 상품 카테고리 또는 기획전은 관리자 페이지에서 편집해야 합니다.

상품 카테고리별 다른 디자인 적용하기

장점

• 카테고리 페이지 별 디자인 가능

단점

• 각 카테고리 별 연동과 관리가 필요하여 번거로움

방법3: 전체 상품 카테고리 표시하기

상품에 2개 이상의 카테고리를 지정할 수 있는 점을 응용해, 전체 상품 카테고리를 추가할 수 있습니다.

SHOP 쇼핑 메뉴에 전체상품 표시하기 (상품 카테고리)

장점

• 전체 상품을 한 눈에 볼 수 있음
• 개별 카테고리에서 전체 상품으로 이동하기 쉬움

단점

• 카테고리 페이지 별 디자인 불가

방법4: 버튼/링크 클릭 시 상품 상세페이지로 이동하기

상품 수가 적어 쇼핑 또는 쇼핑 기획전 위젯으로 상품을 진열하기 어려운 경우, 아래 그림과 같이 버튼/링크 클릭 시 상품 상세페이지로 이동하도록 구성할 수 있습니다. 이 방법은 특별한 날에, 특별한 상품을 페이지에 소개하고 구매 페이지로 이동하도록 연결할 때도 사용됩니다. 

1. 상품 소개 페이지를 디자인하고, 버튼 위젯을 추가합니다.
2. 버튼 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
3. 링크 항목에 상품 URL을 입력합니다.
4. 참고: 상품 URL은 상품 URL 확인 방법 도움말을 참고해 확인할 수 있습니다.
5. 디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭해 테스트합니다.
6. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭합니다.

장점

• 특별하게 구성할 수 있음

단점

• 여러 개의 상품을 연동하면 관리가 어려움

별첨: 메뉴 리스트 위젯으로 하위 상품 카테고리 표시하기

방문자의 상품 카테고리 선택 편의를 위해, 아래 그림과 같이 카테고리를 페이지에 표시할 수 있습니다. 카테고리 나열에는 메뉴 리스트 위젯이 사용됩니다.

전체 상품 카테고리 추가 및 메뉴 리스트 삽입하기

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

최상위 메뉴 아래 2단 이상의 하위 메뉴들로 하나의 계층 메뉴를 구성할 수 있습니다. 최상위 메뉴마다 여러 개의 하위 메뉴들로 구성할 수 있기 때문에, 메뉴가 많은 웹사이트에 유용합니다.

시작에 앞서

이 도움말은 일반 페이지 메뉴를 2단 이상으로 구성하는 방법에 관해 설명합니다. 아래 그림과 같이 상품 카테고리를 상위/하위 그룹으로 구성하는 방법은 그룹 상품 카테고리 만들기 도움말을 참고해 주세요.

1단계: 메뉴 생성하기

상위, 하위 메뉴로 구성하기 위해 메뉴를 생성합니다.

1. 디자인 모드에 접속합니다. 접속방법
2. 왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭합니다.
3. 상단 메뉴 오른쪽에 위치한 메뉴 추가 ⨁ 아이콘을 클릭합니다.
4. 메뉴명을 작성하고 확인 버튼을 클릭합니다.
5. 위 3~4번 과정을 반복해 필요한 만큼 새로운 메뉴를 생성합니다.

2단계: 하위 메뉴 구성하기

1. 하위 메뉴로 둘 메뉴(예: Q&A)를 마우스로 클릭합니다.
2. 마우스 클릭을 유지한 체로 드래그하여, 상위 메뉴로 둘 메뉴(예: COMMUNITY) 위에 올립니다.
3. 위 애니메이션과 같이 상위 메뉴(예: COMMUNITY)에 화살표 아이콘이 표시되면, 마우스 버튼을 놓습니다.

4. 위 1~3번 과정을 반복해 모든 하위 메뉴들을 상위 메뉴로 이동시킵니다.
   

3단계: 2단 이상 하위 메뉴 구성하기

하위 메뉴에 새로운 하위 메뉴를 포함하여 2단 이상의 메뉴로 구성할 수 있습니다. 아임웹은 최대 6단까지 하위 메뉴 구성을 허용합니다.

1. 하위 메뉴로 구성할 메뉴(예: Q&A)를 마우스로 클릭합니다.
2. 마우스 클릭을 유지한 체로 드래그하여, 1단 하위 메뉴(예: NOTICE)에 올립니다.
3. 위 애니메이션과 같이 1단 하위 메뉴(예: NOTICE)에 화살표 아이콘이 표시되면, 마우스 버튼을 놓습니다.
4. 위 1~3번 과정을 반복해 모든 하위 메뉴들을 상위 메뉴로 이동시킵니다.
5. (선택 사항) 만약 2단 이상 하위 메뉴를 구성하는 경우, 2단 하위 메뉴에 새로운 하위 메뉴들을 추가합니다.

관련 도움말

최상위 메뉴 또는 상위 메뉴 클릭 시 해당 메뉴가 표시되지 않고, 하위 첫 번째 메뉴로 이동시키려면 아래 도움말을 참고해 설정해 보세요.

메뉴 클릭 시 하위 첫 번째 메뉴로 이동시키기

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

상단 영역을 브라우저 너비에 꽉 차게 가로 100% 확장이 가능합니다. 이 도움말에서는 상단 섹션의 가로 100% 확장 방법을 안내합니다. 

설정방법

1. 디자인 모드에 접속합니다. 접속방법
2. 디자인 모드의 오른쪽 상단에 위치한 상단설정을 클릭합니다.
3. 가로 100% 확장할 상단 섹션에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
   

   참고: 위젯에 마우스 포인터를 올리지 않고, 섹션에 올려주세요.

4. 컨텍스트 메뉴가 나오면 섹션 설정을 클릭합니다.

5. 가로 100% 확장 옵션을 선택합니다.

6. 섹션 설정 창 바깥 영역을 클릭해 설정을 완료합니다.

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

방문자가 페이지의 버튼 또는 링크 클릭 시 상품 상세페이지로 이동하도록 설정할 수 있습니다. 이 기능을 구현하기 위해서는 앞서 상품 링크(URL)가 필요하며, 해당 상품의 링크를 버튼 또는 링크에 삽입해야 합니다.

이 도움말에서는 사용자가 올린 상품의 링크(URL)을 확인하는 방법과 해당 링크를 활용하는 방법에 대해 설명합니다.

1단계: 상품 URL 가져오기

웹사이트에 올린 상품의 링크(URL)을 가져오는 방법을 설명합니다. 아직 상품을 등록하지 않은 경우 쇼핑몰 시작하기 도움말을 참고해 쇼핑 기본설정을 마쳐주세요.

1. 내 사이트 관리자 페이지에 접속합니다. 접속방법
2. 왼쪽 메뉴에서 [쇼핑 > 상품관리]를 클릭해 이동합니다.
3. 상품명 오른쪽 끝에 위치한 새 탭으로 열기 아이콘을 클릭합니다.
4. 새 브라우저 탭이 열리며 해당 상품 상세페이지가 열립니다.

5. 브라우저 주소창의 링크를 복사합니다. (단축키: CTRL + C)

2단계: 버튼에 상품 URL 링크 걸기

이 과정에서는 버튼 위젯에 상품 링크를 삽입하는 방법을 설명합니다. 이 도움말에서는 버튼 위젯을 사용하지만, 링크 걸기 가능한 모든 위젯에 적용 가능합니다. 

1. 관리자 페이지의 왼쪽 상단에 위치한 디자인모드 를 클릭합니다.
2. 디자인 모드 왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭해, 버튼 또는 링크를 추가할 메뉴로 이동합니다.
3. 왼쪽 상단의 위젯 추가 ＋ 아이콘을 클릭합니다.
4. 버튼 위젯을 클릭합니다.
5. 버튼 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
6. 컨텍스트 메뉴가 나오면 버튼 설정 을 클릭합니다.
7. 링크 타입이 링크 인지 확인하고, 위 1단계에서 복사한 상품 URL을 붙여넣습니다. (단축키: CTRL + V)
8. (선택 사항) 버튼의 크기, 정렬, 라운딩을 설정하고, 버튼 스타일과 텍스트를 설정합니다.

9. 버튼 제작 완료 후, 메뉴를 원하는 모양으로 디자인을 완료합니다.

3단계: 동작 확인하기

1. 디자인 모드 오른쪽 상단에 위치한 미리보기 아이콘을 클릭합니다.
2. 버튼 또는 링크를 클릭해, 지정한 상품 상세페이지로 이동하는지 확인합니다.
3. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭해 적용합니다.

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

이 도움말에서는 상품 상세페이지를 이미지만으로 구성하는 경우(일명 통이미지) 알아두면 좋은 제작 팁을 소개합니다. 상품 상세페이지 제작 전 읽어 보시고 참고하시길 추천해 드립니다. 

상품 상세페이지 작업 TIP

1. 캔버스 DPI(Dots Per Inch)

상품 상세페이지를 포토샵과 같은 디자인 도구로 제작 시 캔버스의 DPI는 72 또는 96으로 설정합니다. 96 DPI를 초과하는 경우, PC 및 스마트폰 디스플레이에서 이미지의 색상이 달라지거나 이미지 깨짐 현상이 일어날 수 있습니다.

2. 상품 상세페이지 가로 크기

상품 상세페이지의 가로 크기는 판매 채널 확장을 고려해, 860픽셀 이상으로 크게 설정해 작업합니다. 일부 마켓들은 700픽셀대 가로 길이를 권장하지만, 네이버 스마트스토어, 지마켓 등의 경우 860픽셀을 권장하기에 다양한 환경을 고려해 설정해 주세요. 크게 작업한 이미지는 줄여도 문제가 없지만, 작은 이미지를 크게 늘리면 이미지 깨짐 현상이 일어날 수 있습니다.

3. 모바일 방문자 고려하기

모바일 방문자를 고려해 주세요. PC에서는 글자가 적당해 보이더라도, 모바일에서는 너무 작게 보일 수 있습니다. 텍스트와 이미지를 함께 사용하지 않는 이상, 글자의 크기는 1.5배 크게 삽입하실 것을 권장합니다. 제작 완료 후에는 반드시 스마트폰에서 확인해 보세요.

4. 통 이미지는 분할하기

이미지의 세로 길이가 3,000픽셀을 초과하는 경우, 제작 완료 후 여러 장으로 분할해 사용할 것을 강력하게 권장합니다. 수만 픽셀이 넘는 이미지는 이미지 로드 속도를 크게 저하하기 때문입니다. 위와 같은 이유로 국내 거의 모든 마켓에서는 1장당 세로 길이를 제한하고 있습니다. 만약 작업을 의뢰한 경우, 작업자에게 이미지 분할을 요청하실 것을 권장합니다.

5. 파일 저장 형식

분할 및 저장 완료한 이미지는 JPG 형식으로 저장할 것을 권장합니다. JPG는 아임웹을 포함해 국내외 거의 모든 운영체제, 브라우저, 마켓에서 사용 가능한 이미지 형식이기 때문입니다. 단, 저장 시에는 웹용(Save for Web)으로 설정하고, 퀄리티는 90 이상으로 저장해 주세요.

6. 이미지 용량 최적화

이미지 최적화 도구를 사용해 용량을 최소화해 보세요. 이미지 파일에 따라서는 같은 퀄리티에 기존 용량 대비 5~90%의 용량 최적화 효과를 볼 수 있습니다.

• 온라인 최적화 도구: Optimizilla
• Mac 사용자: ImageOptim

주요 마켓 상품 상세페이지 크기 및 형식

주요 온라인 마켓에서 지원하는 상품 상세페이지의 크기와 형식, 용량에 관해 설명합니다. 제작한 상품 상세페이지 이미지를 각 마켓에서 요구하는 형식에 맞춰 편집해 사용하세요.

관련 도움말

• 상품 이미지 썸네일의 권장 이미지 형식, 비율, 크기
• 적절한 이미지 해상도 (이미지 크기)

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

아임웹은 아래 그림과 같이 두 가지 형식의 상품 상세페이지 디자인을 제공합니다. 이 도움말에서는 디자인 모드에서 상품 상세페이지의 디자인을 변경하는 방법을 설명합니다.

설정방법

1. 디자인 모드에 접속합니다. 접속방법
2. 왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭합니다.
3. 글로벌 메뉴에서 상품 상세페이지 메뉴를 클릭합니다.
4. 상품 상세페이지 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
5. 컨텍스트 메뉴가 나오면 상품 상세페이지 설정을 클릭합니다.
6. 디자인 탭에서 다른 디자인 버튼을 클릭합니다. 
7. 상세페이지 디자인을 선택합니다. 
8. 오른쪽 상단의 닫기 ✕ 아이콘을 클릭합니다.

9. 상품 상세페이지의 디자인이 변경된 걸 확인할 수 있습니다.
   

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

방문자가 버튼 클릭 시 카카오맵 길찾기 또는 네이버 지도 길찾기가 켜지도록 설정할 수 있습니다. 이 기능은 웹과 모바일 모두에서 동작하며, 특정 위치(사업장, 매장 등) 길 안내 시 유용합니다. 

1단계: 길찾기 링크 획득하기

카카오맵과 네이버 지도 앱에서, 버튼에 삽입할 길찾기 주소(URL)를 획득합니다. 이 방법을 이미 알고 있는 경우, 다음 2단계로 건너 뛰어도 됩니다. 단, 네이버 지도의 경우 모바일 앱을 사용해 주소를 획득해 주세요.

1. 카카오맵 길찾기 링크 획득하기

 카카오맵에서 길찾기 링크를 획득합니다. 

1. 카카오맵에 접속합니다.
2. 지도의 왼쪽 상단 메뉴에서 길찾기를 클릭합니다.
3. 출발지 및 도착지를 검색합니다. 다음으로 이동수단(자동차, 버스, 도보, 자전거)을 선택합니다. 
4. 지도 오른쪽 상단의 내보내기 버튼을 클릭하고, URL 복사를 클릭합니다.
5. URL 복사 버튼을 클릭합니다.
6. URL을 메모장 등에 메모하고, 2단계로 넘어갑니다. (필요한 경우 네이버 지도 버튼도 추가하려는 경우, 네이버 지도 길찾기 링크도 획득합니다.)

2. 네이버 지도 길찾기 링크 획득하기 

네이버 지도 모바일 앱에서 길찾기 링크를 획득합니다.

1. 아이폰 또는 안드로이드 OS가 탑재된 스마트폰에서 네이버 지도 앱을 켭니다.

2. 앱 왼쪽 상단의 메뉴 아이콘을 누릅니다.

3. 길찾기 메뉴를 누릅니다.
4. 출발지 및 도착지를 검색합니다. 다음으로 이동수단(자동차, 버스, 도보, 자전거)을 선택합니다.
5. 도착지 입력 칸 오른쪽의 더보기 아이콘을 누릅니다.
6. 공유하기를 누릅니다.
7. 복사하기(안드로이드: 클립보드에 복사)를 눌러 링크를 복사합니다.
8. 복사한 링크를 카카오톡, 문자, 이메일 등으로 보내 저장하고, 다음 2단계로 넘어갑니다.

2단계: 버튼에 길찾기 링크 삽입하기

페이지에 버튼을 추가하고, 위 1단계에서 획득한 길찾기 URL(주소)을 버튼에 삽입하는 과정입니다.

1. 아임웹 디자인 모드에 접속합니다. 접속방법
2. 길찾기 링크를 추가할 메뉴로 이동하거나, 새롭게 추가합니다. 메뉴 추가방법
3. 왼쪽 상단의 위젯 추가 아이콘을 클릭합니다.
4. 버튼 위젯을 클릭합니다.
5. 버튼 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
6. 컨텍스트 메뉴가 나오면 버튼 설정을 클릭합니다.

7. 버튼명을 작성하고, 필요에 따라 버튼 크기, 정렬, 라운딩 등을 수정합니다.

8. 링크 항목에, 위 1단계에서 저장한 길찾기 주소를 입력합니다.

3단계: 게시하기 및 작동 확인하기

버튼이 정상적으로 작동하는지 확인합니다. 카카오맵 또는 네이버 지도 앱이 설치되어 있어야 합니다. 

1. 디자인 모드 오른쪽 상단의 게시하기 버튼을 클릭합니다.
2. PC와 모바일 기기에서 길찾기 버튼을 눌러 정상적으로 동작하는지 확인합니다.

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

아임웹 디자인 모드의 컬러픽커를 사용해, 원하는 색상의 컬러값을 찾을 수 있습니다. 

활용방법

1. 디자인 모드에 접속합니다. 접속방법
2. 오른쪽 상단의 공통 디자인 설정 아이콘을 클릭합니다.
3. 본문 항목에서 브랜드/링크색 옵션의 오른쪽 끝에 위치한 원을 클릭합니다.
   참고: 공통 디자인 설정 뿐만 아니라, 디자인 모드의 여러 메뉴에서 컬러픽커를 찾을 수 있습니다.
4. 색상 필드 와 색상 슬라이드를 마우스로 클릭 후 움직여 원하는 색상을 찾습니다.
5. 원하는 색상을 찾았다면, 색상 값을 마우스로 드래그해 복사합니다. (키보드 단축키: CTRL + C)
6. 복사한 색상 값을 필요한 곳에 붙여넣어 활용할 수 있습니다.

관련 도움말: 투명도가 적용된 색상 값을 알고 싶어요.

PC 버전에 적용한 글꼴(폰트)이 모바일에서도 유지될 수 있도록 설정할 수 있습니다.

설정방법

1. 디자인 모드에 진입합니다. 진입방법
2. 디자인 모드 오른쪽 상단의 톱니바퀴  아이콘을 클릭합니다.
3. 브라우저 오른쪽에서 공통 디자인 설정 메뉴가 나타납니다.
4. 마우스 휠 스크롤을 내려, 공통 디자인 설정 최하단의 옵션 항목으로 이동합니다.
5. 모바일 폰트유지 옵션을 선택합니다.
6. 공통 디자인 설정 바깥 영역을 클릭합니다.
7. 공통 디자인 설정 적용 확인 팝업이 나타나면 저장 버튼을 클릭해 완료합니다.
8. 디자인 모드 오른쪽 상단 미리보기  아이콘을 클릭합니다.
9. 모바일에서 선택하신 글꼴이 정상적으로 적용되었는지 확인합니다.
10. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭해 적용합니다.

관련 도움말: 글꼴 변경하기

아임웹은 다양한 무료 글꼴을 지원합니다. 글꼴 변경하기 도움말을 참고해 웹사이트 글꼴 변경 방법을 알아보세요.

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