콘텐츠에 서식 있는 텍스트 편집기 사용

Shopify의 서식 있는 텍스트 편집기를 사용하면 온라인 스토어에서 콘텐츠의 형식과 스타일을 지정할 수 있습니다.

팁

서식 있는 텍스트 편집기로 작업 시 enter 또는 return을 눌러 새 단락을 생성할 수 있습니다. 새 단락을 만들지 않고 줄 바꿈을 삽입하려면 shift를 누른 상태로 enter 또는 return을 누릅니다.

서식 있는 텍스트 편집기 사용 위치

서식 있는 텍스트 편집기를 사용하여 텍스트를 추가하거나 편집할 수 있는 스토어 내 위치는 다음과 같습니다.

• 제품 설명
• 컬렉션 설명
• 블로그 게시물
• 페이지
• 스토어 정책

Online Store 2.0 테마를 사용 중인 경우, 테마 편집기를 사용해 페이지나 템플릿에 서식있는 텍스트 섹션을 추가할 수 있습니다.

서식 있는 텍스트 편집기로 HTML 콘텐츠 추가

주의

서식 있는 텍스트 편집기에서 HTML을 사용하는 경우 상점에 표시 오류가 발생할 수 있습니다. 다른 사이트에서 콘텐츠를 복사하면 원하지 않는 HTML이 추가되어 원하지 않는 표시 오류가 발생할 수 있습니다. </> HTML 표시 버튼을 클릭하여 HTML 코드를 확인하고 원하지 않는 HTML이나 여백 외부의 텍스트와 같은 표시 오류를 발생시키는 HTML을 제거할 수 있습니다.

서식 있는 텍스트 편집기를 사용하여 블로그 게시물, 페이지, 제품 설명 및 컬렉션 설명에 HTML 콘텐츠를 입력할 수 있습니다.

</> HTML 표시 버튼을 클릭하면 서식 있는 텍스트 편집기 내에서 콘텐츠의 HTML 코드를 확인할 수 있습니다.

HTML 보기 상태에서 서식 있는 텍스트 편집기 내 콘텐츠를 다양하게 변경할 수 있습니다. HTML을 사용하여 이미지, 동영상, 표를 추가할 수 있고 콘텐츠 레이아웃 및 스타일을 디버깅하거나 정밀하게 조정할 수 있습니다.

미디어 위젯 임베드

동영상이나 음악 위젯을 임베드하려면 먼저 Youtube, Vimeo, SoundCloud 같은 서비스에서 해당 위젯을 호스팅해야 합니다. 이러한 서비스에서는 임베드 코드를 생성하며 해당 코드를 복사하여 Shopify Admin 서식 있는 텍스트 편집기에 붙여넣을 수 있습니다.

단계:

1. 임베드할 미디어의 임베드 코드를 찾습니다.

2. 임베드 코드를 클릭하고 PC의 경우 ctrl+A를, Mac의 경우 command+A를 눌러 전체 임베드 코드를 선택합니다.

3. PC의 경우 ctrl+C를, Mac의 경우 command+C를 눌러 임베드 코드를 복사합니다.

4. Shopify Admin에서 편집 중인 콘텐츠에 대한 서식 있는 편집기의 HTML 표시 버튼을 클릭합니다.

5. PC의 경우 ctrl+V를, Mac의 경우 command+V를 눌러 임베드 코드를 붙여넣습니다.

6. 저장을 클릭합니다.

서식 있는 텍스트 편집기로 텍스트 서식 지정

서식 버튼을 사용하면 단락, 제목 또는 인용문을 빠르게 생성할 수 있습니다. 적합한 서식과 제목 수준을 사용하면 사람들이 스토어 웹사이트 콘텐츠를 읽는 데 도움이 되며 검색 엔진에서도 쉽게 인식할 수 있습니다.

텍스트 서식을 선택하려면 텍스트를 강조 표시한 다음 서식 버튼을 클릭합니다.

서식 옵션

• 단락

• 제목(1~6)

• 인용문

굵은 텍스트

텍스트를 굵게 표시하려면 텍스트를 강조 표시하고 굵게 버튼을 클릭합니다.

기울임꼴 텍스트

텍스트를 기울임꼴로 표시하려면 텍스트를 강조 표시하고 기울임꼴 버튼을 클릭합니다.

텍스트에 밑줄 표시

텍스트에 밑줄을 표시하려면 텍스트를 강조 표시하고 밑줄 버튼을 클릭합니다.

글머리 기호 목록 생성

글머리 기호 목록을 생성하려면 글머리 기호 목록 버튼을 클릭합니다.

데이터를 입력하여 첫 번째 글머리 기호 목록 항목을 생성할 수 있습니다. 새 목록 항목을 생성하려면 enter 또는 return 키를 누릅니다. 목록을 마치려면 enter 또는 return 키를 두 번 누릅니다.

번호 매기기 목록 생성

번호 매기기 목록을 생성하려면 번호 매기기 목록 버튼을 클릭합니다.

데이터를 입력하여 첫 번째 번호 매기기 목록 항목을 생성할 수 있습니다. 새 목록 항목을 생성하려면 enter 또는 return 키를 누릅니다. 목록을 마치려면 enter 또는 return 키를 두 번 누릅니다.

텍스트 들여쓰기

단락을 들여쓰면 단락 왼쪽에 여백이 생깁니다. 단락을 들여쓰려면 들여쓰기 버튼을 클릭합니다.

텍스트 들여쓰기 취소

단락 들여쓰기를 취소하면 모든 들여쓰기 여백이 제거됩니다. 단락 들여쓰기를 취소하거나 "내어쓰기"하려면 내어쓰기 버튼을 클릭합니다.

텍스트 정렬

텍스트를 정렬하려면 텍스트를 선택하고 정렬 버튼을 클릭한 다음 왼쪽 정렬, 가운데 정렬, 오른쪽 정렬 중 선택합니다.

서식 있는 텍스트 편집기로 텍스트 색상 변경

단계:

1. 텍스트를 강조 표시하고 색상 버튼을 클릭합니다.

2. 색상을 클릭하거나 16진수 코드를 입력하여 강조 표시된 텍스트를 해당 색상으로 변경합니다.

텍스트 배경색 변경

단계:

1. 텍스트를 강조 표시하고 색상 버튼을 클릭합니다.

2. 배경 탭을 클릭합니다.

3. 색상을 클릭하거나 16진수 코드를 입력하여 강조 표시된 텍스트 배경색을 해당 색상으로 변경합니다.

서식 있는 텍스트 편집기에서 서식 지우기

텍스트 또는 이미지에서 서식을 지우려면 콘텐츠를 강조 표시한 다음 서식 지우기 버튼을 클릭합니다.

서식 있는 텍스트 편집기로 표 삽입

서식 있는 텍스트 편집기를 사용하여 블로그 게시물, 페이지, 제품 설명 및 컬렉션 설명에 표를 삽입할 수 있습니다. 표 생성 후에는 표에 텍스트와 이미지는 물론 동영상까지 배치할 수 있습니다.

단계:

1. 서식 있는 텍스트 편집기에서 표 삽입 버튼을 클릭합니다.

2. 표 삽입을 클릭하여 표를 삽입합니다. 행 1개와 열 1개가 있는 표가 생성됩니다.

표를 생성한 후에는 표 삽입 버튼을 다시 클릭하여 표의 행과 열을 다음과 같이 수정할 수 있습니다.

• 위에 행 삽입: 행에 커서를 놓고 이 버튼을 클릭하여 위쪽에 새 행을 삽입합니다.
• 아래에 행 삽입: 행에 커서를 놓고 이 버튼을 클릭하여 아래쪽에 새 행을 삽입합니다.
• 앞에 열 삽입: 열에 커서를 놓고 이 버튼을 클릭하여 해당 열 앞쪽에 새 열을 삽입합니다.
• 뒤에 열 삽입: 열에 커서를 놓고 이 버튼을 클릭하여 해당 열 뒤쪽에 새 열을 삽입합니다.
• 행 삭제: 삭제할 행에 커서를 놓고 이 버튼을 클릭합니다.
• 열 삭제: 삭제할 열에 커서를 놓고 이 버튼을 클릭합니다.
• 표 삭제: 표의 아무 위치에 커서를 놓고 이 버튼을 클릭하여 전체 표를 삭제합니다.

서식 있는 텍스트 편집기로 링크 삽입

서식 있는 텍스트 편집기를 사용하여 블로그 게시물, 페이지, 제품 설명 및 컬렉션 설명에 링크(하이퍼링크)를 삽입할 수 있습니다. Shopify 온라인 스토어 내 페이지 및 다른 웹사이트로 고객을 리디렉션하는 링크를 추가할 수 있습니다. 고객이 연락할 수 있도록 이메일 메시지를 열거나 전화를 걸 수 있는 링크를 추가할 수도 있습니다.

단계:

1. 링크로 바꿀 텍스트나 이미지를 강조 표시합니다.
2. 링크 삽입을 클릭합니다.

3. 해당 링크의 대상 URL을 연결 대상 필드에 입력합니다.

   • Shopify 스토어 외부 웹사이트로 연결하려면 https:// 다음에 웹 주소를 입력합니다(예: https://www.example.com).
   • Shopify 온라인 스토어 내 페이지로 연결하려는 경우 짧은 URL을 입력합니다(예: /collections/summer-collection).
   • 이메일 메시지를 여는 링크를 생성하려면 mailto: 다음에 이메일 주소를 입력합니다(예: mailto:example@example.com).
   • 전화를 걸 수 있는 링크를 생성하려면 tel: 다음에 전화 번호를 입력합니다(예: tel:+0-123-456-7890).

4. 해당 링크에 대한 짧은 설명을 링크 제목 상자에 입력합니다.

5. 이 링크를 열 위치 메뉴에서 링크를 여는 방식을 선택합니다.

   • 같은 창: 사용자의 기존 브라우저 탭 또는 창에서 링크를 엽니다.
   • 새 창: 새 브라우저 탭 또는 창에서 링크를 엽니다.

6. 링크 삽입을 클릭하여 강조 표시한 텍스트를 링크로 전환합니다.

서식 있는 텍스트 편집기로 내부 및 외부 링크 추가

Shopify 스토어 내 페이지로 연결되는 링크를 내부 링크라고 합니다. 짧은 URL을 사용하여 내부 링크를 생성할 수 있습니다. 예를 들어, /collections이라는 URL은 스토어의 컬렉션 페이지로 연결됩니다.

컬렉션이나 제품 페이지 등 온라인 스토어의 특정 페이지로 연결하려면 /page-type/page-handle의 URL 형식을 사용하십시오. 예를 들어, Summer Collection이라고 생성한 컬렉션에 연결하려면 /collections/summer-collection이라는 URL을 사용하면 됩니다.

참고 사항

제품, 컬렉션, 페이지, 블로그의 핸들을 확인하려면 Shopify 관리자에서 해당 기본 페이지로 이동하거나, 검색 엔진 목록 섹션을 찾거나 편집을 클릭합니다.

Shopify 스토어 외부 웹사이트로 연결되는 링크를 외부 링크라고 합니다. 외부 링크는 전체 형식으로 입력해야 하며 http://로 시작해야 합니다.

페이지 콘텐츠 내 파일로 연결

파일을 업로드하면 제품 또는 컬렉션 설명, 웹페이지, 블로그 게시물에서 다운로드할 수 있도록 서식 있는 텍스트 편집기에서 해당 파일을 콘텐츠로 연결할 수 있습니다.

참고 사항

URL은 http://cdn.shopify.com/으로 시작해야 합니다. http://static.shopify.com이 표시되는 경우 http://cdn.shopify.com으로 교체하십시오.

단계:

데스크톱

1. Shopify Admin에서 콘텐츠 > 파일로 이동합니다.
2. 연결하려는 파일의 URL을 복사합니다.
3. Shopify Admin에서 파일을 추가할 제품, 컬렉션, 웹 페이지 또는 블로그 게시물을 클릭합니다.
4. 서식 있는 텍스트 편집기에서 링크 텍스트를 입력하거나 선택합니다.
5. 링크 텍스트를 선택합니다.
6. 링크 삽입을 클릭합니다.
7. 연결 대상 필드에 연결하려는 파일의 URL을 붙여넣습니다.
8. 링크 삽입을 클릭합니다. 서식 있는 텍스트 편집기에서 링크가 삽입된 텍스트는 밑줄이 추가된 파란색 텍스트로 표시됩니다.

iPhone

1. Shopify 앱에서 … 버튼을 탭한 다음 설정을 탭합니다.
2. 스토어 설정 섹션에서 파일을 탭합니다.
3. 연결하려는 파일의 URL을 복사합니다.
4. Shopify Admin에서 파일을 추가할 제품, 컬렉션, 웹 페이지 또는 블로그 게시물을 클릭합니다.
5. 서식 있는 텍스트 편집기에서 링크 텍스트를 입력하거나 선택합니다.
6. 링크 텍스트를 선택합니다.
7. 링크 삽입을 클릭합니다.
8. 연결 대상 필드에 연결하려는 파일의 URL을 붙여넣습니다.
9. 링크 삽입을 클릭합니다. 서식 있는 텍스트 편집기에서 링크가 삽입된 텍스트는 밑줄이 추가된 파란색 텍스트로 표시됩니다.

Android

1. Shopify 앱에서 … 버튼을 탭한 다음 설정을 탭합니다.
2. 스토어 설정 섹션에서 파일을 탭합니다.
3. 연결하려는 파일의 URL을 복사합니다.
4. Shopify Admin에서 파일을 추가할 제품, 컬렉션, 웹 페이지 또는 블로그 게시물을 클릭합니다.
5. 서식 있는 텍스트 편집기에서 링크 텍스트를 입력하거나 선택합니다.
6. 링크 텍스트를 선택합니다.
7. 링크 삽입을 클릭합니다.
8. 연결 대상 필드에 연결하려는 파일의 URL을 붙여넣습니다.
9. 링크 삽입을 클릭합니다. 서식 있는 텍스트 편집기에서 링크가 삽입된 텍스트는 밑줄이 추가된 파란색 텍스트로 표시됩니다.

서식 있는 텍스트 편집기로 이미지 삽입

다음과 같은 세 가지 방법으로 서식 있는 텍스트 편집기에서 이미지를 삽입할 수 있습니다. 이미지를 삽입하려면:

• 이미지 업로드
• 제품 이미지에서 선택
• 공개 이미지 URL 사용

참고 사항

모든 제품(이형 상품 포함) 관련 이미지는 250개까지만 사용할 수 있지만 스토어의 다른 부분에서는 사용 이미지 수 제한이 없습니다.

이미지 업로드

단계:

1. 서식 있는 텍스트 편집기에서 이미지 삽입 버튼을 클릭합니다.

2. 이미지 삽입 대화 상자에서 업로드한 이미지 탭을 클릭합니다.

3. 파일 업로드를 클릭합니다.

4. 컴퓨터에서 WebP, HEIC, SVG, GIF, JPEG 또는 PNG 이미지 파일을 선택합니다.

5. 업로드한 이미지를 클릭하여 선택합니다.

6. 사이즈 메뉴에서 이미지의 표시 사이즈를 선택합니다. 원본을 선택하면 크기 변경 없이 이미지가 삽입됩니다.

7. 이미지 삽입을 클릭하여 이미지를 서식 있는 텍스트 편집기에 표시합니다.

제품 이미지에서 선택

단계:

1. 서식 있는 텍스트 편집기에서 이미지 삽입 버튼을 클릭합니다.

2. 이미지 삽입 대화 상자에서 제품 이미지 탭을 클릭합니다.

3. 삽입할 이미지를 클릭합니다.

4. 사이즈 메뉴에서 이미지의 표시 사이즈를 선택합니다. 원본을 선택하면 크기 변경 없이 이미지가 삽입됩니다.

5. 이미지 삽입을 클릭하여 제품 이미지를 서식 있는 텍스트 편집기에 표시합니다.

이미지 URL 사용

공개 URL을 사용하여 이미지를 삽입하려면:

1. 서식 있는 텍스트 편집기에서 이미지 삽입 버튼을 클릭합니다.

2. 이미지 삽입 대화 상자에서 URL 탭을 클릭합니다.

3. 공개적으로 액세스할 수 있는 이미지 파일의 URL을 입력합니다.

4. 이미지 삽입을 클릭하여 이미지를 서식 있는 텍스트 편집기에 원본 크기로 삽입합니다.

서식 있는 텍스트 편집기에서 이미지 이동 및 크기 조정

제품 또는 컬렉션 설명, 웹 페이지 또는 블로그에 이미지를 추가한 후에는 이미지를 콘텐츠 내 다른 위치로 이동할 수 있습니다.

단계:

1. Shopify Admin에서 이동 또는 크기 조정할 이미지를 포함한 제품, 컬렉션, 웹 페이지 또는 블로그 게시물을 클릭합니다.
2. 서식 있는 텍스트 편집기에서 이미지를 클릭합니다.

3. 다음 중 하나를 수행합니다.

   • 이미지를 이동하려면 콘텐츠 필드 내 다른 위치로 이미지를 클릭하고 끌어서 놓습니다.
   • 이미지 크기를 조정하려면 이미지의 모서리 하나를 클릭하고 끌어서 놓습니다.

4. 저장을 클릭합니다.

서식 있는 텍스트 편집기에서 이미지 편집

서식 있는 텍스트 편집기에서 이미지의 크기, 텍스트 배치 및 정렬을 변경할 수 있습니다. 이미지 URL을 편집하거나 이미지 대체 텍스트를 추가 또는 편집할 수도 있습니다.

단계:

1. 서식 있는 텍스트 편집기에서 이미지를 두 번 클릭하여 이미지 편집 대화 상자를 엽니다.

2. 크기 및 정렬 옵션을 사용하여 다음과 같이 이미지를 편집할 수 있습니다.

   • 이미지 크기를 변경하려면 크기 옵션을 선택합니다.
   • 온라인 스토어의 SEO 및 접근성을 개선하려면 이미지 대체 텍스트를 추가하거나 편집합니다.
   • 간격을 추가하려면 각 면에 추가할 간격의 픽셀 값을 입력합니다.
   • 이미지 정렬을 변경하려면 왼쪽, 가운데, 오른쪽 정렬을 나타내는 아이콘 중 선택합니다.
   • 텍스트 배치를 추가하려면 텍스트로 이미지 둘러싸기에 확인 표시합니다.

3. 이미지 편집을 클릭하여 변경 사항을 저장합니다.

서식 있는 텍스트 편집기로 동영상 삽입

서식 있는 텍스트 편집기를 사용하여 블로그 게시물, 페이지, 제품 설명 및 컬렉션 설명에 동영상을 삽입하거나 임베드할 수 있습니다.

생성한 동영상을 임베드하려면 우선 YouTube 또는 Vimeo 같은 동영상 스트리밍 사이트에 해당 동영상을 업로드해야 합니다.

YouTube에서 스토어 관련 동영상을 사용하지 못하게 설정할 수는 없지만, 방금 재생한 동영상과 동일한 채널에서 전송하도록 지정할 수 있습니다.

단계:

1. PC의 경우 ctrl+C를, Mac의 경우 command+C를 눌러 동영상의 URL을 복사합니다.

팁

테마가 Brooklyn이나 Supply인 경우에는 Youtube 또는 Vimeo에서 동영상 임베드 코드를 복사하고 7단계로 건너뛸 수 있습니다. 테마가 임베디드 동영상이 자동으로 응답하도록 합니다.

1. 응답형 임베드로 이동합니다. 응답형 임베드는 동영상에 대해 개선된 임베드 코드를 제공하는 툴입니다.

참고 사항

응답형 임베드의 코드를 사용하여 임베드한 동영상을 세로로 시청하는 경우 특정 iPhone 모델에서 재생 문제가 발생할 수 있습니다.

1. 응답형 임베드에서 동영상이 있는 동영상 웹사이트를 클릭하여 선택합니다.

2. PC의 경우 ctrl+V를, Mac의 경우 command+V를 눌러 응답형 임베드의 페이지 URL 상자에 동영상의 URL을 붙여넣습니다.

3. 임베드를 클릭합니다. 응답형 임베드에서 임베드 코드가 생성됩니다.

4. YouTube에서 동영상을 사용하고 같은 YouTube 채널 내 관련 동영상만 표시하려면 임베드 코드에서 해당 동영상의 URL을 찾습니다. 인용 부호의 끝에 ?rel=0을 복사하여 붙여넣습니다.

5. 임베드 코드 상자 내 모든 코드를 복사합니다.

6. Shopify Admin에서 서식 있는 텍스트 편집기의 동영상 삽입 버튼을 클릭합니다.

7. 동영상 삽입 대화 상자 내 상자에 임베드 코드를 붙여넣습니다.

8. 동영상 삽입을 클릭합니다.

9. 작업을 마치면 저장을 클릭하여 편집 중인 항목에 대한 변경 사항을 저장합니다.

팁

YouTube에서 직접 임베드 코드를 생성할 수 있지만 임베드한 동영상은 다른 화면 크기에서는 응답형으로 적용되지 않습니다.

서식 있는 텍스트 편집기로 오디오 파일 삽입

서식 있는 텍스트 편집기를 사용하여 블로그 게시물, 페이지, 제품, 설명 및 컬렉션 설명에 오디오를 삽입하거나 임베드할 수 있습니다.

단계:

1. Shopify Admin에서 설정을 클릭한 다음 파일을 클릭합니다.
2. 파일 업로드를 클릭하여 스토어에 삽입 또는 임베드할 오디오 파일을 업로드합니다.
3. 온라인 스토어 섹션에서 오디오 파일을 표시할 페이지 또는 블로그 게시물에 대한 서식 있는 텍스트 편집기를 엽니다.
4. <div id="player"><audio controls="controls">를 복사한 다음 서식 있는 텍스트 편집기에 해당 코드를 붙여넣어 페이지에 오디오 플레이어를 임베드합니다.

5. 다음 코드를 복사합니다.

   • <source src="https://cdn.shopify.com/s/files/1/0220/2378/files/example.mp3" type="audio/mpeg" /></div>

6. 서식 있는 텍스트 편집기에서 오디오 플레이어 코드 다음에 이 코드를 붙여넣은 다음, https://cdn.shopify.com/s/files/1/0220/2378/files/example.mp3를 Shopify에 오디오 파일 업로드 시 생성한 오디오 URL로 교체합니다. 파일 페이지에서 언제든지 오디오 파일의 URL을 확인할 수 있습니다.

7. 저장을 클릭합니다.

8. 보기를 클릭하여 오디오가 올바르게 재생되는지 확인합니다.

팁

Soundcloud에서 직접 오디오 파일 코드를 임베드할 수 있지만 일부 장치에서는 Soundcloud의 오디오 플레이어가 올바르게 작동하지 않을 수 있습니다. 자세한 내용은 Soundcloud 지원 센터를 참조하십시오.

서식 있는 텍스트 편집기에서 내부 주석 추가 또는 제거

<!-- 및 --> 주석 태그를 스토어에 게시하지 않을 내부 텍스트에 사용할 수 있습니다.

단계:

1. 서식 있는 텍스트 편집기에서 HTML 표시 버튼을 클릭합니다.

2. 내부 주석을 추가하려면 숨길 텍스트를 <!-- 및 --> 사이에 배치합니다(예: <!--yourtext-->).

3. 저장을 클릭합니다.

주석 태그 사이에 배치된 HTML 태그는 내부 텍스트로 저장됩니다. HTML 태그가 올바르게 작동하려면 해당 태그를 둘러싼 <!-- 및 --> 주석 태그를 제거해야 합니다.