상품을 등록하는 과정에서 재고를 설정하였다면 상품 상세페이지에 상품의 남은 재고 수를 표시할 수 있습니다.

사운드 클라우드에 올린 음악을 내 사이트의 게시판에 삽입할 수 있습니다. 디지털 음원 판매를 위해 미리듣기를 제공하거나, 기타 이유로 음원 재생이 필요할 때 사용할 수 있습니다.

이 도움말에서는 사운드 클라우드에 올린 음원 트랙의 Embed(임베드, 삽입) 코드를 생성해 내 사이트의 게시물에 삽입하는 방법을 설명합니다.

삽입방법

1단계: 사운드 클라우드 Embed 코드 생성하기 

1. 사운드 클라우드에 접속 후 로그인합니다.

2. 오른쪽 상단의 프로필을 클릭하고, Tracks 를 클릭합니다.

3. 내 사이트에 삽입하려는 트랙 위에 마우스 포인터를 올리면 숨겨진 메뉴가 나타납니다. 여기서 더보기 ⋯ 아이콘을 클릭합니다.

4. 더보기 메뉴가 나오면 Share 를 클릭합니다.
5. Embed 탭을 클릭합니다.
6. 아래 그림과 설명을 참고해 사운드 클라우드 오디오 플레이어의 모양 및 색상, 옵션을 설정합니다.

• 오디오 플레이어: 오디오 플레이어의 모양을 선택합니다.
• Color: 버튼 등에 적용되는 색상을 선택합니다. 직접 컬러값을 입력하거나 선택할 수 있습니다.
• Enable automatic play: 선택 시 음원을 자동 재생합니다. (이 기능은 모바일 기기 및 일부 브라우저에서 작동하지 않을 수 있습니다.)
• 미리보기: 위에서 설정한 값에 따라 오디오 플레이어를 미리볼 수 있습니다.
• Height: 오디오 플레이어의 높이를 선택합니다.

7. 오디오 플레이서 설정을 마쳤다면 자동 생성된 코드를 클릭 후 키보드 단축키(Windows: CTRL + C, Mac: command - C)를 눌러 복사합니다. 

8. 복사한 Embed 코드는 메모장 등에 저장합니다.

9. (선택 사항) 여러 개의 트랙을 올린 경우, 위 3~8번 과정을 반복해 모든 트랙의 Embed 코드를 생성하고 메모합니다.

2단계: iframe 허용 도메인 설정하기 

사운드 클라우드 공유 코드에는 iframe이 사용됩니다. 아임웹은 사이트 보안을 위해 HTML 에디터에 iframe 사용을 제한하고 있기 때문에, 아래 도움말에 따라 iframe 사용을 허용하는 도메인으로 사운드 클라우드를 추가해줘야 합니다.

1. 내 사이트 관리자 페이지에 접속합니다. 접속방법
2. 왼쪽 메뉴에서 [환경설정 > 보안 및 개인정보 보호]를 클릭해 이동합니다.

3. 사이트 보안 설정 항목에서 iframe 사용 시 허용되는 도메인 등록 옵션 아래 허용하는 서비스 도메인으로 soundcloud.com 을 입력합니다.

4. 저장 버튼을 클릭해 적용합니다.

3단계: 게시물에 Embed 코드 삽입하기

1. 아임웹 관리자 페이지 왼쪽 상단의 사이트 바로가기를 클릭해 내 사이트에 접속합니다.
2. 사운드 클라우드 음원을 삽입할 게시판 메뉴로 이동합니다.
3. 게시판 글쓰기 버튼을 클릭합니다.
4. 게시물 제목을 작성합니다.
5. 텍스트 에디터 도구에서 코드보기 </> 아이콘을 클릭합니다.
6. 위 1단계에서 메모한 사운드 클라우드 Embed 코드를 붙여넣습니다. 
7.  다시 텍스트 에디터 도구에서 코드보기</> 아이콘을 클릭하면, 사운드 클라우드 트랙이 표시됩니다.

   주의: 다시 코드보기 </> 아이콘을 클릭하지 않으면 삽입한 Embed 코드가 초기화 됩니다.

   
8.  (선택 사항) 만약 오디오 플레이가 지나치게 크다고 생각되는 경우, 아래 그림과 같이 퍼센트(%) 지정된 width 값을 변경해 크기를 줄일 수 있습니다. 
9. 문제가 없다면 오른쪽 상단의 작성 버튼을 클릭해 삽입을 완료합니다.

관련 도움말

코드 위젯을 사용하여 페이지에 사운드 클라우드 오디오 플레이어를 삽입할 수도 있습니다. 자세한 방법은 아래 도움말 링크에서 확인해 주세요.

사운드 클라우드 음원 페이지에 삽입하기

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

사운드 클라우드에 올린 음악을 내 사이트로 불러와 방문자가 재생할 수 있도록 삽입할 수 있습니다. 디지털 음원 판매하기 위해 미리듣기를 제공하거나, 기타 이유로 음원 재생이 필요할 때 사용할 수 있습니다.

이 도움말에서는 사운드 클라우드에 올린 음원 트랙의 Embed(임베드, 삽입) 코드를 가져와 내 사이트에 삽입하는 방법을 설명합니다.

삽입방법

1단계: 사운드 클라우드 Embed 코드 생성하기

1. 사운드 클라우드에 접속 후 로그인합니다.
2. 오른쪽 상단의 프로필을 클릭하고, Tracks 를 클릭합니다.
3. 내 사이트에 삽입하려는 트랙 위에 마우스 포인터를 올리면 숨겨진 메뉴가 나타납니다. 여기서 더보기 ⋯ 아이콘을 클릭합니다.
4. 더보기 메뉴가 나오면 Share 를 클릭합니다.
5. Embed 탭을 클릭합니다.
6. 아래 그림과 설명을 참고해 사운드 클라우드 오디오 플레이어의 모양 및 색상, 옵션을 설정합니다.
   

• 오디오 플레이어: 오디오 플레이어의 모양을 선택합니다.
• Color: 버튼 등에 적용되는 색상을 선택합니다. 직접 컬러값을 입력하거나 선택할 수 있습니다.
• Enable automatic play: 선택 시 음원을 자동 재생합니다. (이 기능은 모바일 기기 및 일부 브라우저에서 작동하지 않을 수 있습니다.)
• 미리보기: 위에서 설정한 값에 따라 오디오 플레이어를 미리볼 수 있습니다.
• Height: 오디오 플레이어의 높이를 선택합니다.

7. 오디오 플레이서 설정을 마쳤다면 자동 생성된 코드를 클릭 후 키보드 단축키(Windows: CTRL + C, Mac: command - C)를 눌러 복사합니다.

8. 복사한 Embed 코드는 메모장 등에 저장합니다.

9. (선택 사항) 여러 개의 트랙을 올린 경우, 위 3~8번 과정을 반복해 모든 트랙의 Embed 코드를 생성해 메모해 주세요.

2단계: 코드 위젯에 Embed 코드 삽입하기 

1. 아임웹 디자인 모드에 접속합니다. 접속방법
2. 왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭하여 새 메뉴를 생성하거나, 음원을 삽입할 메뉴명을 클릭해 이동합니다.
3. 왼쪽 상단의 위젯 추가 ＋ 아이콘을 클릭하고, 코드 위젯을 클릭합니다.
4. 페이지에 추가된 코드 위젯 위에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
5. 컨텍스트 메뉴가 나오면 코드 설정을 클릭합니다.
6. 코드 설정 창 빈 칸에 위 1단계에서 복사한 코드를 붙여넣고, 저장 버튼을 클릭합니다.
7. 코드 설정 창 바깥 영역을 클릭해 입력을 완료합니다.

(선택 사항) 3단계: 더 많은 트랙 삽입하

위 1~2단계를 반복해 2개 이상의 사운드 클라우드 트랙을 삽입할 수 있습니다. 트랙의 위치는 위 2단계에서 추가한 코드 위젯과, 추가한 코드 위젯들의 배치에 따라 달라집니다.

여러 개의 트랙을 아래와 그림과 같이 하나의 페이지에 삽입하는 경우, 코드 위젯을 이동해 원하는 모양에 맞게 배치해 주세요.

4단계: 미리보기 및 게시하기

1. 디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭합니다.
2. 새 브라우저 탭이 나오고 음원이 정상적으로 표시되고 재생되는지 확인합니다.
3. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭해 적용합니다.

관련 도움말

사운드 클라우드 음원을 게시물에 삽입할 수 있습니다. 자세한 방법은 아래 도움말 링크에서 확인해 주세요.

사운드 클라우드 음원 게시물에 삽입하기

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

메뉴를 이동하여 상단 및 하단 메뉴의 순서를 변경하거나 그룹 메뉴로 구성할 수 있습니다. 

설정방법

1. 디자인 모드에 접속합니다. 접속방법
2. 왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭합니다.
3. 상단 메뉴 또는 하단 메뉴 항목에서, 이동할 메뉴를 클릭합니다.
4. 원하는 위치에 검정선이 나타나면 마우스 버튼을 놓습니다.

   참고: 상단 메뉴 항목에서 메뉴의 위치를 위에 둘수록 가장 왼쪽에 표시됩니다. 하단 메뉴의 경우, 적용된 하단 디자인에 따라 가장 왼쪽 또는 상단에 위치할 수 있습니다.

   
5. 메뉴 이동이 완료되면 상단 메뉴 및 하단 메뉴의 순서가 변경됩니다.

관련 도움말

• 메뉴명 변경하기
• 메뉴 이동하기
• 메뉴 설정하기
• 메뉴 복제하기
• 메뉴 삭제하기
• 그룹 메뉴 만들기 (하위 메뉴)

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

사이트는 디자인 트렌드, 콘텐츠, 기업의 운영 전략 등에 따라 지속적인 업데이트가 필요합니다. 사용자는 운영 중인 사이트의 첫 페이지를 일시적으로 리뉴얼(공사중) 안내 페이지로 변경해 방문자의 입장을 제한하고 기존 페이지를 편집할 수 있습니다.

이 도움말에서는 사이트 첫 페이지에 공사중 페이지를 표시하고 리뉴얼하는 단계별 과정을 안내합니다.

설정방법

1단계: 공사중 메뉴 생성하기

사이트 리뉴얼 중 일시적으로 방문자에게 보여줄 공사중 메뉴를 생성합니다.

1. 디자인 모드에 접속합니다. 접속방법
2. 왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭합니다.
3. 상단 메뉴 항목의 오른쪽에 위치한 ⊕ 아이콘을 클릭합니다.
4. 메뉴명을 작성하고 확인을 클릭합니다.
5. 새롭게 생성된 공사중 빈 메뉴를 마우스로 클릭 후 드래그하여 상단 메뉴항목의 최상단에 배치합니다.

   참고: 상단 메뉴 항목의 최상단에 배치한 메뉴는 해당 사이트의 첫 페이지가 됩니다.

   
6. 공사중 메뉴의 오른쪽 끝에 위치한 ⓘ 아이콘을 클릭해 메뉴 설정 창을 열어줍니다. 
7. 메뉴 설정 창의 옵션 항목에서 상단 숨김 및 하단 숨김옵션을 선택합니다. (이 옵션을 선택하면 공사중 페이지의 상단 섹션과 하단 섹션이 숨겨지기 때문에 방문자가 다른 메뉴로 이동할 수 없게 됩니다.)

   중요: 이미 방문자가 기존 페이지의 주소를 알고 있는 경우 접속을 막을 수 없습니다. 만약 기존 모든 페이지의 접속을 제한하려면 모든 메뉴의 접근 권한을 소유자(또는 운영진 그룹)으로 변경해야 합니다. 메뉴 접근 권한 설정하기

   
8. 메뉴 설정 창 바깥 영역을 클릭해 설정을 종료합니다.

2단게: 공사중 메뉴 디자인하기

위 1단계에서 생성한 공사중 메뉴를 디자인합니다.

1. 빈 공사중 페이지에 위젯을 추가하고 배치하여 공사중 페이지를 작업합니다.

   참고: 공사중 페이지를 작업하기에 앞서, 디자인 모드 최상단 중앙에 위치한 메뉴명을 확인하여 해당 페이지가 공사중 메뉴인지 확인하고 진행하세요.

   
2. 디자인을 마쳤으면 디자인 모드 오른쪽 상단의 게시하기 버튼을 클릭합니다.

3. 브라우저 시크릿창을 열어줍니다. 예를 들어, Google 크롬 브라우저에서는 단축키 F12(Mac: cmd + option + I)를 클릭해 시크릿창을 열 수 있습니다.

   참고: 브라우저 시크릿창을 사용하면 거의 모든 서비스에 로그아웃 된 상태로 접속되어 방문자 입장에서 미리보기가 가능해집니다. Google 크롬 시크릿창 활용하기

4. 시크릿창의 주소창에 내 사이트 대표 도메인을 입력 후 키보드 Enter 키를 눌러 접속을 시도합니다.
5. 공사중 페이지가 나타나는지 확인하고 다른 페이지로 이동할 수 있는 메뉴가 표시되지 않는지 확인합니다.

3단계: 사이트 리뉴얼하기

공사중 페이지가 정상적으로 표시된다면 이제 기본 메뉴를 편집하여 새로운 사이트로 리뉴얼 작업을 시작합니다. 리뉴얼 작업 중 방문자는 첫 번째 페이지(공사중)에만 접속할 수 있기 때문에 부담 없이 수정 후 게시해도 됩니다. 단, 첫 번째 페이지를 이동하거나 삭제하지 않도록 주의하시길 바랍니다.

4단계: 공사중 페이지 삭제하기

모든 페이지 리뉴얼 작업을 완료했다면 이제 공사중 페이지를 삭제합니다.

1.  디자인 모드 왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭합니다.
2. 공사중 메뉴에 마우스 포인터를 올리고 마우스 오른쪽 버튼을 클릭합니다.
3. 메뉴 컨텍스트 메뉴가 나오면 삭제를 클릭합니다.
4. 삭제 경고 창이 나오면 확인을 클릭합니다. 공사중 메뉴가 삭제됩니다.

5. 이제 리뉴얼한 페이지의 첫 번째 메뉴(예: HOME)를 상단 메뉴 항목의 최상단에 배치합니다.

6. 메뉴 관리 창 바깥 영역을 클릭해 설정을 종료합니다.

5단계: 미리보기 및 게시하기

리뉴얼 작업 완료 후 페이지 디자인 및 링크 등의 모든 페이지 콘텐츠가 정상적으로 동작하는지 확인합니다.

1.  디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭합니다.
2. 모든 페이지가 정상적으로 동작하는지 확인합니다.
3. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭합니다.

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

아임웹 디자인 모드에서는 PC 버전의 웹사이트를 제작하면 모바일 버전이 자동으로 구성됩니다. 다만, 웹사이트에 따라서는 PC 버전만 이용하고 모바일 버전은 필요 없을 수 있습니다. 이때 사용자는 자동으로 구성되는 모바일 버전을 섹션 단위로 숨기거나, 아래 그림과 같이 PC에서 접속할 것을 안내할 수 있습니다.

이 도움말에서는 웹사이트의 첫 페이지가 모바일에서 표시되지 않도록 숨기는 방법을 설명하며, 필요에 따라 모바일로 접속했을 때 PC로 접속할 것을 유도하는 안내말을 덧붙이는 방법을 설명합니다.

설정방법

1단계: 뷰포트 변경하기.

모바일 편집을 위해 뷰포트를 모바일로 변경합니다. 

1. 디자인 모드에 접속합니다. 접속방법
2. 왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭합니다.
3. 상단 메뉴 항목에서 가장 첫 번째 메뉴를 클릭해 이동합니다.
4. 디자인 모드 상단 중앙에 모니터 아이콘을 클릭합니다.
5. 모바일을 클릭합니다.
6. 뷰포트가 PC에서 모바일로 변경됩니다.

2단계: 상단과 하단 숨김 처리

페이지의 상단과 하단 섹션을 숨기는 방법을 설명합니다.

1. 디자인 모드 최상단 중앙에 위치한 메뉴명을 클릭해 메뉴 설정 창을 켭니다.
2.  옵션 항목에서 상단 숨김과 하단 숨김을 선택합니다. 
3. 메뉴 설정 창 바깥 영역을 클릭해 설정을 완료합니다.
4. 페이지 상단과 하단 섹션이 숨겨집니다.

(선택 사항) 3단계: 모바일 페이지 미제공 표시하기

모바일 기기로 웹 페이지에 접속했을 때 PC 브라우저로 접속할 것을 안내하는 문구를 추가하는 과정을 설명합니다. 이 단계는 선택 사항으로 필요하신 경우에 진행하세요.

1.  위젯이 없는 영역에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
2. 컨텍스트 메뉴가 나오면 모바일 전용 섹션추가를 클릭합니다. 
3. 모바일 전용 섹션이 추가되면 정가운데 ⨁ 아이콘을 클릭해 텍스트 위젯, 여백 위젯, 이미지 위젯 등을 사용해 '모바일 버전은 제공하지 않으며, PC에서 접속할 것을 안내'합니다. 

4단계: 본문 섹션 숨김 처리하기

PC 버전 제작 시 자동으로 구성된 모바일 디자인을 섹션 단위로 숨기는 방법을 설명합니다.

1.  섹션의 왼쪽에 표시된 눈 아이콘을 클릭합니다.
2. 남은 모든 섹션도 왼쪽의 눈 아이콘을 클릭해 숨겨줍니다.

5단계: 게시하기 및 확인하기

설정사항을 웹에 게시하고, 모바일 기기에서 확인합니다. 

1. 디자인 모드 오른쪽 상단의 게시하기 버튼을 클릭합니다.
2. 스마트폰 등의 모바일 기기를 통해 페이지 주소로 접속합니다.
3. 의도한대로 화면이 표시되는지 확인합니다.

(선택 사항) 6단계: 남은 모든 메뉴 설정하기

이제 방문자가 주소 입력 등을 통해 내 사이트 첫 페이지에 접속하면 모바일 버전이 표시되지 않으며, 위 3단계를 적용한 경우 PC 접속 안내문구가 표시됩니다.

단, 첫 페이지의 모바일 섹션을 숨기더라도, 다른 메뉴에서는 방문자에게 보여질 수 있습니다. 일부 방문자는 메뉴가 아닌 페이지 URL(주소)로 접속할 수 있기 때문입니다.

만약 모든 메뉴가 모바일에서 표시되지 않도록 설정하려면 위 2~4단계를 반복해 모든 메뉴마다 상단과 하단, 본문 섹션을 숨겨 주세요.

관련 도움말

위 도움말과 반대로 방문자에게 PC 버전은 제공하지 않고 모바일 버전만 제공할 수 있습니다. 아래 도움말 링크를 참고해 모바일 버전만 접속할 수 있도록 설정해 보세요.

PC 버전은 사용하지 않고 모바일 버전만 사용하기

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

텍스트 위젯에 이미지를 추가하는 과정에서 이미지의 디스플레이 형식을 '인라인'으로 설정하여, 여러 이미지를 한 줄에 배치할 수 있습니다. 

설정방법

1. 디자인 모드에 접속합니다. 접속방법
2. 왼쪽 상단의 위젯 추가 ＋ 아이콘을 클릭합니다.
3. 텍스트 위젯을 클릭합니다.
4. 텍스트 위젯을 마우스로 더블-클릭합니다.
5. 샘플 텍스트를 삭제하고, 이미지 첨부를 클릭한 다음 이미지를 올려줍니다.
6. 업로드 완료 즉시 보조 메뉴가 나오면 디스플레이를 클릭하고, 인라인을 클릭합니다.
7. 위 4~6번 과정을 반복해 계속해서 이미지를 추가하고, 이미지 디스플레이 형식을 인라인으로 변경해 이미지를 한 줄로 배치합니다.

   참고: 이미지 간의 간격은 키보드 SPACE를 클릭해 띄울 수 있습니다.

이미지 간격 및 정렬하기

이미지 간격 띄우기

1. 텍스트 위젯을 마우스로 더블-클릭합니다.
2. 이미지 사이 마우스를 클릭합니다.
3. 키보드 SPACE를 눌러 간격을 띄워줍니다.

이미지 정렬하기

1. 텍스트 위젯을 마우스로 더블-클릭합니다.
2. 모든 이미지를 마우스로 드래그합니다.
3. 텍스트 도구가 나오면 정렬을 클릭한 다음 왼쪽, 가운데, 오른쪽으로 설정합니다.

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

상단 숨김 및 섹션 고정 옵션을 활용해 커스텀 상단 섹션을 디자인할 수 있습니다. 기본 상단을 이용할 수 없거나, 특정 페이지에서 특별한 상단 디자인이 필요할 때 이용할 수 있습니다.

설정방법

1단계: 상단 숨김 처리하기

기본 상단을 숨기는 방법을 설명합니다. 

1. 디자인 모드에 접속합니다. 접속방법
2. 왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭합니다.
3. 커스텀 상단을 추가할 메뉴명을 클릭하고, 메뉴명 오른쪽의 ⓘ 아이콘을 클릭합니다.
4. 메뉴 설정 창이 켜지면 옵션 항목에서 상단 숨김 옵션을 선택합니다.
5. 메뉴 설정 창 바깥 영역을 클릭해 설정을 완료합니다.

6. 메뉴 관리를 끄고, 상단 섹션이 숨겨졌는지 확인합니다.

2단계: 빈 섹션 추가하기

상단 섹션을 숨긴 메뉴에 새로운 빈 섹션을 추가합니다.

1. 위젯이 없는 영역에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.

   참고: 위젯에 마우스 오른쪽 버튼을 클릭하면 위젯 컨텍스트 메뉴가 나타납니다. 위젯이 없는 섹션에 마우스 오른쪽 버튼을 클릭하세요.

2. 컨텍스트 메뉴가 나오면 빈 섹션추가를 클릭합니다.
3. 새로운 빈 섹션이 추가됩니다.

3단계: 상단 디자인 및 섹션 고정하기

섹션 고정 옵션을 설정하고, 해당 섹션을 디자인하기 위해 스타일을 설정합니다. 

1. 빈 섹션에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
2. 섹션 컨텍스트 메뉴가 나오면 섹션 설정을 클릭합니다.
3. 아래 그림과 설명을 참고해 섹션 고정 옵션을 설정하고, 필요에 따라 배경, 간격 등 스타일을 지정합니다.
4. 빈 섹션의 중앙에 표시된 ⨁를 클릭합니다.

5. 위젯 목록이 나오면 텍스트 위젯, 메뉴 리스트 위젯, 여백 위젯 등을 사용해 상단 메뉴를 디자인합니다. (로고 위젯, 메뉴 위젯, 로그인/장바구니 위젯 등은 상단 전용 위젯으로, 커스텀 상단 디자인에는 사용할 수 없습니다.)

   참고: 메뉴 리스트 위젯을 사용하는 경우, 메뉴 리스트 설정을 열어 메뉴 항목에서 모바일에서 표시 옵션을 선택해야 모바일 버전에서도 메뉴가 나타납니다.

   

디자인 완료한 섹션을 페이지 상단으로 이동시킵니다. 

1. 디자인한 섹션에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.

   참고: 위젯에 마우스 오른쪽 버튼을 클릭하면 위젯 컨텍스트 메뉴가 나타납니다. 위젯이 없는 섹션에 마우스 오른쪽 버튼을 클릭하세요.

2. 섹션 컨텍스트 메뉴가 나오면 위로 이동을 클릭합니다.
3. 섹션이 페이지 상단에 위치할 때까지 이동을 계속합니다.

5단계: 모바일 커스텁 상단 수정하기

커스텀 상단은 PC에서는 디자인한 그대로 표시되지만, 모바일에서는 문제가 발생할 수 있습니다. 이때 사용자는 모바일 뷰포트로 전환해, 별도의 모바일 전용 커스텀 상단을 수정할 수 있습니다. 

1. 뷰포트를 모바일로 전환합니다. 뷰포트 변경방법

2. 자동으로 구성된 커스텀 상단 섹션의 왼쪽에 위치한 눈 모양 아이콘을 클릭합니다. (섹션을 숨기면 PC에서는 이전 디자인이 유지되지만, 모바일에서는 보이지 않게 됩니다.)

3. 위젯이 없는 영역에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
4. 섹션 컨텍스트 메뉴가 나오면 모바일 전용 섹션추가를 클릭합니다.
5. 새로운 모바일 전용 섹션이 생기면 ⨁ 아이콘을 클릭해 위젯을 추가하여, 모바일 전용 커스텀 상단을 디자인합니다.

   참고: 메뉴 리스트 위젯으로 상단 메뉴를 추가할 때 메뉴가 정상적으로 나열되지 않으면 메뉴 리스트의 디자인을 변경해 보세요. 디자인 탭에서 다른 디자인 버튼을 클릭해 변경할 수 있습니다.

6. (선택 사항) 만약 디자인한 모바일 전용 커스텀 상단이 페이지 상단에 위치하지 않는 경우, 해당 섹션을 위로 이동시켜 주세요.

6단계: 미리보기 및 게시하기

1. 디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭합니다.
2. 마우스 휠 스크롤을 내렸을 때, 상단 메뉴가 따라오는지 확인합니다.
3. 다른 메뉴를 클릭했을 때, 기본 상단 디자인이 나오는지 확인합니다.
4. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭합니다.

관련 도움말

상단 섹션 외 하단 섹션도 사용자가 직접 디자인할 수 있습니다. 하단 숨김 및 섹션 반복 기능을 활용해 나만의 커스텀 하단을 디자인해 보세요.

커스텀 하단 만들기 (푸터)

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

갤러리 이미지를 클릭하면 새로운 갤러리가 표시되도록 메뉴를 구성할 수 있습니다. 이 구성은 주로 여러 개의 포트폴리오 또는 제품을 전시할 때 유용하며, 장소를 소개할 때도 사용할 수 있습니다.

갤러리 이미지 클릭 시 새로운 갤러리가 나오게 구성하는 방법은 여러 가지가 있지만, 이 도움말에서는 갤러리 위젯과 링크, 게시판 위젯을 사용해 구성하는 방법을 설명합니다.

이 방법은 표시해야 할 이미지가 많은 경우 유용합니다. 이미지 표시에는 게시판 위젯이 사용되어, 한 페이지에 설정한 개수의 이미지가 초과되는 경우, 다음 페이지에서 볼 수 있도록 페이징 형식으로 구성할 수 있기 때문입니다.

시작에 앞서

이 도움말을 진행하기에 앞서, 아래의 구조도를 숙지해 주세요. 홈 메뉴에는 대표 이미지를 추가하고, 각 메뉴 1~3에는 대표 이미지와 연관된 상세 갤러리 이미지를 추가합니다. 홈 메뉴에 추가한 각 이미지는 메뉴 1~3으로 이동할 수 있는 링크가 추가됩니다.
 

구성방법

1단계: 메뉴 만들기

갤러리를 구성하기 위한 메뉴들을 생성합니다. 이 도움말에서는 Home, Nature, Night Sky, Street 4개 메뉴를 생성할 것입니다.

1. 디자인 모드에 접속합니다. 접속방법
2. 왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭합니다.
3. 왼쪽에서 메뉴 관리 창이 나오면, 상단 메뉴 항목에 위치한 ⨁를 클릭합니다.
4. 메뉴명(Home)을 작성하고, 확인 버튼을 클릭합니다.
5. 위 3~4번 과정을 반복해 남은 모든 메뉴(Nature, Night Sky, Street)를 추가합니다.

2단계: 메뉴 그룹화하기

위 1단계에서 생성한 메뉴들을 하나의 그룹으로 구성합니다. 각 갤러리를 대표하는 대표 이미지를 표시할 메뉴(Home)에 나머지 메뉴들(Nature, Night Sky, Street)을 하위 메뉴로 포함시키세요.

1.  Nature 메뉴를 마우스로 클릭 후 드래그하여, Home 메뉴 위에 올리고, 화살표 아이콘이 생기면, 마우스를 놓아줍니다. (Nature 메뉴가 Home의 하위 메뉴로 구성됩니다.) 
2. 위 애니메이션을 참고해, 같은 방법으로 남은 메뉴들도 Home 메뉴의 하위 메뉴로 구성합니다.
3. 닫기 ✕ 아이콘을 클릭해 메뉴 생성 및 편집을 완료합니다.

3단계: 상세 갤러리 메뉴 만들기

각 하위 메뉴에 게시판 위젯을 추가하고, 게시판 작성 권한, 스타일 등을 설정합니다.

1. Nature 메뉴로 이동합니다. (메뉴 관리를 열고 Nature 를 클릭해 이동하거나, 상단 메뉴에서 Nature 를 클릭해 이동할 수도 있습니다.)
2. 디자인 모드 왼쪽 상단의 위젯 추가 ＋ 아이콘을 클릭하고, 게시판 위젯을 클릭합니다.
3. 추가된 게시판 위젯 위에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
4. 컨텍스트 메뉴가 나오면 게시판 설정을 클릭합니다.
5. 아래 그림과 설명을 참고해, 게시판을 설정합니다.

• 게시판 연동: 일반 게시판을 선택합니다.
• 게시판 이름: 게시판 이름을 작성합니다.
• 옵션: 글쓰기 버튼 옵션을 권한이 있는 경우 표시로 선택하고, 댓글 표시 옵션은 댓글 사용 안함을 선택합니다. 소유자에게만 글쓰기 버튼이 노출되며, 게시물에 댓글을 사용할 수 없게 됩니다.
• 권한: 글 작성 옵션을 소유자로 변경하고, 나머지는 모든 사용자 그대로 둡니다. 소유자만 글을 작성할 수 있게 됩니다.
• 글쓰기: 대표 이미지 지정기능 사용을 선택하면, 게시물에 2개 이상의 이미지를 추가한 경우, 게시물 작성 시 게시판 썸네일에 표시할 대표 이미지를 선택할 수 있게 됩니다.

6. 게시판 설정 상단의 디자인 탭을 클릭합니다. 

7. 다른 스타일 버튼을 클릭합니다. 

8. 이미지를 표시할 스타일을 선택합니다. (그리드 게시판 또는 Masonry 게시판의 1번 스타일을 권장합니다.) 

9. 아래 그림과 설명을 참고해, 게시판의 표시요소를 설정하고 스타일을 변경합니다. 

• 구성 요소: 본문 이미지 클릭 시 라이트박스를 선택합니다. 게시물 본문의 이미지 클릭 시, 라이트박스 형식으로 이미지가 표시됩니다.
• 리스트 항목: 게시판 썸네일에 표시될 요소를 선택합니다.
• 리스트: 게시판에 표시되는 게시물의 숫자 및 간격 등을 설정할 수 있습니다.
• 배경/테두리: 썸네일의 음영을 투명하게 처리하고, 필요에 따라 모서리를 둥글게 만들 수 있습니다. 또한, 선 두께와 색상을 설정해 외곽선을 그리는 것도 가능합니다.

10. 게시판 설정 창 바깥 영역을 클릭해 설정을 완료합니다.

11. 위 1~10번 과정을 반복해 남은 2개 메뉴(Night Sky, Street)에도 게시판을 추가하고 설정합니다.

4단계: 홈 메뉴 제작 및 링크 걸기

홈 메뉴를 제작합니다. 홈 메뉴에는 각 하위 메뉴들을 대표하는 대표 이미지를 추가하고, 대표 이미지 클릭 시, 연관된 하위 메뉴로 이동하도록 링크를 걸어줍니다.

1.  Home 메뉴로 이동합니다. (메뉴 관리를 열고 Home 을 클릭해 이동하거나, 상단 메뉴에서 Home 을 클릭해 이동할 수도 있습니다.)
2. 디자인 모드 왼쪽 상단의 위젯 추가 ＋ 아이콘을 클릭하고, 갤러리 위젯을 클릭합니다.
3. 갤러리 위젯 위에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
4. 컨텍스트 메뉴가 나오면 갤러리 설정을 클릭합니다.
5. 갤러리 설정 창 왼쪽 상단의 + 상단 이미지, 동영상 추가에 마우스 포인터를 올리고, 이미지 추가를 클릭합니다.
6. 각 갤러리의 대표 이미지를 추가합니다. (이 도움말에서는 상세 갤러리 메뉴를 총 3개 만들었으므로, 아래 그림과 같이 각 갤러리를 대표하는 3개의 이미지가 추가되었습니다.)

7. 첫 번째 대표 이미지를 마우스로 클릭합니다.

8. 갤러리 설정 창 왼쪽 하단의 빈 칸을 마우스로 클릭하면, 아래 그림과 같이 링크할 메뉴 목록이 나타납니다. 해당 이미지 클릭 시 이동할 하위 메뉴를 선택합니다.

   참고: 링크할 메뉴는 사용자가 메뉴 관리에서 생성한 메뉴들이 표시됩니다. 외부 사이트로 연결하려는 경우, http 또는 https 로 시작하는 URL을 작성해 주세요.

   
9. (선택 사항) 이미지 제목과 이미지 설명을 작성합니다. 작성한 이미지 제목과 설명은 갤러리 이미지에 표시됩니다. 단, 이미지 제목과 이미지 설명의 표시여부는 갤러리 스타일마다 상이하며, 일부 갤러리 스타일에서는 표시되지 않을 수 있습니다.

   참고: 갤러리 스타일은 갤러리 설정 창 상단의 디자인 탭을 클릭해, 다른 스타일 버튼을 클릭하여 변경할 수 있습니다.

10. 위 7~9번 과정을 반복해 남은 대표 이미지도 설정을 완료합니다.

    중요: 반드시 이미지를 먼저 선택하고 링크, 제목, 설명을 추가하세요.

11. 갤러리 설정 창 바깥 영역을 클릭해 설정을 완료합니다.

5단계: 미리보기 및 게시하기

1. 디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭합니다.
2. 상단 메뉴의 Home 을 클릭합니다.
3. 갤러리 이미지 하나를 클릭합니다.
4. 링크한 메뉴로 이동하는지 확인하고, 연관 이미지들이 정상적으로 표시되는지 확인합니다.
5. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭해 적용합니다.

6단계: 게시물(이미지) 추가하기

게시판에 표시할 이미지를 추가합니다. 게시물을 추가하면 게시판이 갤러리 형식으로 표시됩니다.

1. 내 사이트에 접속합니다. (디자인 모드에서 미리보기를 클릭해 접속할 수 있습니다.)

2. 게시판이 추가된 메뉴로 이동해, 아래의 과정에 따라 게시물을 작성합니다.

1. 글쓰기 버튼을 클릭합니다. (위 3단계 5번 과정에서 설정한 권한에 따라, 방문자 및 회원에게는 보이지 않으며, 소유자에게만 노출됩니다.)
2. 제목을 작성합니다.
3. 본문의 텍스트 도구에서 이미지 첨부를 클릭해 이미지를 올려줍니다.
4. (선택 사항) 위 3단계 5번 과정에서 대표 이미지 지정기능 사용을 선택했고, 게시물 본문에 2개 이상의 이미지를 삽입했다면, 게시물 작성 페이지 왼쪽에서 게시판에 표시할 대표 이미지를 지정합니다.
5. 작성 버튼을 클릭해 게시물을 등록합니다.
6. 위 3~7번 과정을 반복해 게시물을 계속해서 추가합니다.

관련 도움말

• 그룹 메뉴에서 하위 메뉴 표시 끄기 (풀다운 메뉴)
• 메뉴 숨김 처리하기

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

메뉴(페이지)에 비밀번호를 설정하여 누구나 접속할 수 없도록 제한할 수 있습니다.

설정방법

1. 디자인 모드에 접속합니다. 접속방법
2. 왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭합니다.
3. 비밀번호를 설정할 메뉴명의 오른쪽 끝에 위치한 ⓘ 아이콘을 클릭합니다.

4. 메뉴 설정 창이 나오면 접근 권한 항목에서 접근 가능한 그룹을 선택합니다.

• 모든 사용자: 모든 방문자가 접속할 수 있습니다.
• 로그인 사용자: 로그인한 회원만 접속할 수 있습니다.
• 소유자: 소유자만 접속할 수 있습니다.
• 사용자 지정 그룹: 특정한 그룹만 접속할 수 있습니다.

      5. 비밀번호 입력시 접근 가능 옵션을 선택합니다.

6. 비밀번호를 입력하고, 저장 버튼을 클릭합니다. 

7. 메뉴 설정 창 바깥 영역을 클릭해 메뉴 설정을 종료합니다.

8. Google 크롬 시크릿창을 열어, 비밀번호를 설정한 메뉴에 접속합니다.

9. 비밀번호 입력 후 정상 접속되는지 확인합니다.

10. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭합니다.