# 게시판 - 동영상 등록하기(영상 등록방법)

<figure><img src="https://684031119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmsJj00k8mj8AcVpnn9Xs%2Fuploads%2FL4hbiFJ0MdbigOlEMhrn%2F%EA%B5%AC%EB%B6%84%EC%84%A0.PNG?alt=media&#x26;token=79023048-a238-4760-8fba-2a717d36db6d" alt=""><figcaption></figcaption></figure>

**게시판 – 게시물 동영상 등록하는 방법**

1\) 게시물에 동영상을 등록하는 것은 앱에서는 이용이 불가하며, 스윙투앱 웹 대시보드(앱 관리자만 이용가능)에서만 등록할 수 있습니다.

2\) 동영상 등록방법은 2가지입니다.

-동영상 파일 첨부(영상 파일은 MP4파일만 등록 가능)

-영상 링크(URL) 입력: 동영상 URL 입력, 소스코드 URL 입력

4\) 파일로 영상을 첨부할 경우 앱 용량에 집계가 됩니다. 용량을 넘어가지 않도록 확인해주셔야 합니다.

3\) 영상 링크는 YouTube, 블로그/카페 동영상, 네이버TV에 올린 영상들의 URL 링크를 등록할 수 있습니다.&#x20;

동영상 등록 가장 쉬운 방법은 일반적으로 쉽게 얻을 수 있는 유튜브 동영상 URL(링크)를 복사해서 붙여넣는 방법이에요.

따라서 <mark style="color:blue;">**일반적으로 URL 복사를 많이 이용하고 있구요**</mark><mark style="color:blue;">.</mark>

아래 매뉴얼을 통해서 게시물에 영상 파일을 등록하는 방법, 영상 URL링크를 입력하는 방법을 확인해주세요.&#x20;

<figure><img src="https://684031119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmsJj00k8mj8AcVpnn9Xs%2Fuploads%2Fc9fcx2Hm0R0ISfqNRE7f%2F%EA%B5%AC%EB%B6%84%EC%84%A0.PNG?alt=media&#x26;token=ce898b39-cc5f-42f8-9d41-b88885dfaa79" alt=""><figcaption></figcaption></figure>

#### **게시물 관리 이동**

먼저 게시물 관리로 이동해주세요. 영상 등록은 만들어놓은 게시판 게시물 관리에서 이용할 수 있습니다!

![](https://wp.swing2app.co.kr/wp-content/uploads/2020/03/%EA%B2%8C%EC%8B%9C%EB%AC%BC%EC%9E%85%EB%A0%A54_20.02.png)

**앱운영 → 게시물관리에서 작성하고자 하는 게시판으로 이동합니다.**

\*게시판은 서비스관리- 게시판관리에서 먼저 필요한 게시판들을 만들어 놓은 뒤 게시물관리에서 글을 작성할 수 있습니다.

게시판을 만드는 방법은 아래 매뉴얼을 참고해서 만들어주세요.&#x20;

**☞** [**\[게시판 제작방법 보러가기\]**](https://documentation.swing2app.co.kr/manual/appmanage/board/boardeditor)

***

## **Case.1 동영상 파일로 등록하기**&#x20;

**동영상 파일을 게시물에 첨부할 수 있습니다. 영상 파일을 첨부하는 방법은 2가지입니다.**

### <mark style="color:blue;">**1. 동영상 파일 첨부하기**</mark>

![](https://wp.swing2app.co.kr/wp-content/uploads/2020/03/%EB%8F%99%EC%98%81%EC%83%812.png)

게시물 상단 파란색 라인에서 \[동영상]을 선택하면, 파일 업로드 창이 뜹니다.

영상은 확장자 MP4 파일만 등록가능합니다.

영상 파일을 업로드 하시면, 게시물로 파일이 첨부됩니다.&#x20;

<img src="https://684031119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmsJj00k8mj8AcVpnn9Xs%2Fuploads%2FI6cvj8IqKdVF4JFOzqve%2Fimage.png?alt=media&#x26;token=a9baa690-3816-44ee-aa7f-f8672bd00008" alt="" data-size="line"> <mark style="color:orange;">**움짤로 적용방법 확인하기**</mark>&#x20;

<div align="left"><img src="https://wp.swing2app.co.kr/wp-content/uploads/2020/03/%EB%85%B9%ED%99%94_2020_09_24_15_11_22_588.gif" alt=""></div>

**그런데 게시물 등록시 위의 이미지처럼 파란색 라인에 동영상 버튼이 안보인다는 사용자분들도 있으실거에요. 그이유는!!**

\=> 게시판 관리에서 허용범위 설정에 영상첨부에 체크를 하지 않으셨기 때문입니다. &#x20;

<div align="left"><img src="https://wp.swing2app.co.kr/wp-content/uploads/2020/03/%EB%8F%99%EC%98%81%EC%83%813.png" alt=""></div>

게시판을 만들 때 게시판 기능 창에서 하용범위를 설정할 수 있는데요.&#x20;

게시판관리 -설정- 게시판 및 기능설정 창에서 <mark style="color:purple;">**\[허용범위 설정 : 영상첨부]**</mark> 에 체크해주세요

### <mark style="color:blue;">**2.  동영상 삽입: 비디오 업로드**</mark>&#x20;

영상 파일 등록 2번째 방법은 HTML에디터 기능 내에 있는 ‘동영상 삽입’ 버튼을 이용하여 영상 파일을 등록할 수 있습니다.&#x20;

![](https://wp.swing2app.co.kr/wp-content/uploads/2020/03/%EA%B2%8C%EC%8B%9C%EB%AC%BC%EB%8F%99%EC%98%81%EC%83%81%EB%93%B1%EB%A1%9D5_20.03.png)

옵션바에 있는 카메라 모양의 \[동영상 삽입] 버튼을 누른 뒤, 3번째 <mark style="color:blue;">‘</mark><mark style="color:blue;">**비디오 업로드**</mark><mark style="color:blue;">‘</mark>를 선택해주세요.

영상은 확장자 MP4 파일만 등록가능합니다.

파일첨부 창이 열리면, 첨부하고자 하는 영상을 선택하여 \[열기] 버튼 선택해주세요.

<div align="left"><img src="https://wp.swing2app.co.kr/wp-content/uploads/2020/03/%EA%B2%8C%EC%8B%9C%EB%AC%BC%EB%8F%99%EC%98%81%EC%83%81%EB%93%B1%EB%A1%9D6_20.03.png" alt=""></div>

영상이 잘 첨부되었는지 확인 후 내용 및 이미지 등을 첨부한 뒤 \[등록] 버튼을 눌러주시면 완료됩니다.

<img src="https://684031119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmsJj00k8mj8AcVpnn9Xs%2Fuploads%2FI6cvj8IqKdVF4JFOzqve%2Fimage.png?alt=media&#x26;token=a9baa690-3816-44ee-aa7f-f8672bd00008" alt="" data-size="line"> <mark style="color:orange;">**모바일 앱 실행화면) 영상 파일 확인**</mark>

<div align="left"><img src="https://wp.swing2app.co.kr/wp-content/uploads/2020/03/%EB%85%B9%ED%99%94_2020_03_08_12_16_03_21.gif" alt=""></div>

{% hint style="danger" %} <mark style="color:red;">**영상 파일 첨부 주의사항**</mark>

영상 파일을 올릴 때는 한 게시물에 올리는 영상 파일 수, 용량은 제한 없이 올릴 수 있습니다.

그러나 **스윙투앱에 제공하는 총 앱용량이 정해져있기 때문에 영상 용량이 앱 전체 사용 용량을 넘어가지 않도록 주의해주셔야 합니다.**

<mark style="color:red;">\*앱 제공용량</mark>&#x20;

<mark style="color:red;">무료앱: 100MB, 기본형유료앱: 2GB , 확장형유료앱:10GB , 프리미엄유료앱: 50GB</mark>

<mark style="color:red;">\*영상 파일을 첨부할 때는 MP4 파일만 등록 가능합니다.</mark>
{% endhint %}

-URL링크를 등록하는 것과 달리 파일을 첨부하여 등록하는 것은 용량을 차지하죠.

-큰 용량의 영상 파일을 올리게 되면, 그만큼 앱에서 차지하는 용량이 늘어나는 것입니다.

따라서 영상은 URL로 등록하는 것을 권장드리며, 파일로 올려야 할 때는 사용중인 앱 용량을 반드시 확인해주셔야 합니다.

**\***[**앱운영→ 서비스관리→ 리소스관리**](http://www.swing2app.co.kr/view/storage_manager)**에서 총 앱 용량, 사용중, 잔여 용량 체크 가능**

<figure><img src="https://684031119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmsJj00k8mj8AcVpnn9Xs%2Fuploads%2Fc9fcx2Hm0R0ISfqNRE7f%2F%EA%B5%AC%EB%B6%84%EC%84%A0.PNG?alt=media&#x26;token=ce898b39-cc5f-42f8-9d41-b88885dfaa79" alt=""><figcaption></figcaption></figure>

## Case.2 영상 링크(URL)로 등록하기

**유튜브, 네이버 tv에서 발행한 영상 링크가 있다면 해당 URL을 복사하여 영상을 링크로 연동할 수 있습니다.**

**영상 링크로 등록하는 방법은 총3가지입니다.**

### <mark style="color:blue;">**1.영상 링크(URL)로 등록하기**</mark>&#x20;

![](https://wp.swing2app.co.kr/wp-content/uploads/2020/03/%EC%98%81%EC%83%81%EC%B2%A8%EB%B6%804.png)

게시물 상단 파란색 라인에서 \[링크]를 선택하면, 링크 입력 창이 뜹니다.

URL입력란에 유튜브 영상 링크(URL)을 입력한 뒤, 저장하기를 눌러주세요.&#x20;

<img src="https://684031119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmsJj00k8mj8AcVpnn9Xs%2Fuploads%2FI6cvj8IqKdVF4JFOzqve%2Fimage.png?alt=media&#x26;token=a9baa690-3816-44ee-aa7f-f8672bd00008" alt="" data-size="line"> <mark style="color:orange;">**움짤로 적용방법 확인하기**</mark>&#x20;

<div align="left"><img src="https://wp.swing2app.co.kr/wp-content/uploads/2020/03/%EB%85%B9%ED%99%94_2020_07_01_10_23_13_511.gif" alt=""></div>

<img src="https://684031119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmsJj00k8mj8AcVpnn9Xs%2Fuploads%2FI6cvj8IqKdVF4JFOzqve%2Fimage.png?alt=media&#x26;token=a9baa690-3816-44ee-aa7f-f8672bd00008" alt="" data-size="line"> <mark style="color:orange;">**앱 실행화면) 링크로 연결한 영상 화면**</mark>&#x20;

<div align="left"><img src="https://wp.swing2app.co.kr/wp-content/uploads/2020/03/%EB%85%B9%ED%99%94_2020_07_01_10_49_20_674.gif" alt=""></div>

링크로 영상URL을 넣으시면, 앱에서 화면에 맞게 영상 섬네일이 지정되며 재생이 가능합니다.

### <mark style="color:blue;">**2. HTML에디터 동영상 삽입 버튼: 동영상 URL 입력**</mark>

영상 링크 연동 2번째 방법은 HTML에디터 글쓰기에서 이용 가능합니다.

![](https://wp.swing2app.co.kr/wp-content/uploads/2020/03/%EC%98%81%EC%83%81%EC%B2%A8%EB%B6%805.png)

HTML 에디터 글쓰기에서 제공하는 카메라 모양의 \[동영상 삽입] 버튼을 누르면 영상을 첨부할 수 있어요.

![](https://wp.swing2app.co.kr/wp-content/uploads/2018/09/%EA%B2%8C%EC%8B%9C%EB%AC%BC%EC%98%81%EC%83%81%EC%B2%A8%EB%B6%801.png)

동영상 삽입 버튼 선택 후 첫번째 항목인 ‘동영상 URL’을 선택해주세요. &#x20;

일반적으로 동영상 URL(유튜브 등에 올려진 영상) 링크를 복사하여 붙여넣는 방법으로 영상을 첨부할 수 있어요\~!

URL을 붙여넣은 뒤 \[삽입] 버튼을 선택합니다.&#x20;

![](https://wp.swing2app.co.kr/wp-content/uploads/2018/09/%EA%B2%8C%EC%8B%9C%EB%AC%BC%EC%98%81%EC%83%81%EC%B2%A8%EB%B6%802.png)

영상이 잘 첨부되었는지 확인 후 내용 및 이미지 등을 첨부한 뒤 \[등록] 버튼을 눌러주시면 완료됩니다.

영상 등록 외에 글 작성, 사진 첨부 등의 다른 내용들은 원하는 항목을 선택해서 직접 등록해주세요.

![](https://wp.swing2app.co.kr/wp-content/uploads/2018/10/%EC%BA%A1%EC%B2%9822.png)

> <mark style="color:red;">**\*잠깐!! 동영상 URL은 어디서, 어떻게 가져올 수 있나요?**</mark>

<div align="left"><img src="https://wp.swing2app.co.kr/wp-content/uploads/2020/03/%EA%B2%8C%EC%8B%9C%EB%AC%BC%EB%8F%99%EC%98%81%EC%83%81%EB%93%B1%EB%A1%9D_20.03.png" alt=""></div>

PC 유튜브 사이트 접속 후 앱에 적용하고자 하는 동영상을 재생시켜주시구요.

**\*\*영상 화면 위에 마우스 오른쪽 버튼을 클릭하시면 → ‘동영상 URL 복사’를 선택할 수 있습니다.**

URL을 복사한 뒤 위의 동영상 삽입에 붙여넣기 해주시면 됩니다.

<img src="https://684031119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmsJj00k8mj8AcVpnn9Xs%2Fuploads%2FI6cvj8IqKdVF4JFOzqve%2Fimage.png?alt=media&#x26;token=a9baa690-3816-44ee-aa7f-f8672bd00008" alt="" data-size="line"> <mark style="color:orange;">**앱 실행화면) 링크로 연결한 동영상 확인하기**</mark>

<div align="left"><img src="https://wp.swing2app.co.kr/wp-content/uploads/2020/03/%EB%85%B9%ED%99%94_2020_03_08_12_14_49_272.gif" alt=""></div>

그런데 , 게시물에 첨부된 영상을 보시면 영상 화면이 딱 맞지 않고 가로 길이에 맞춰 세로가 좀 길게 보이게 되요.

<mark style="color:red;">해당 섬네일을 보완할 수 있는 방법은 소스코드를 가져와서 직접 가로, 세로 길이를 수정할 수 있습니다.</mark>

아래 방법으로 확인해주세요.

### <mark style="color:blue;">**3. HTML에디터 동영상 삽입 버튼: 임베디드 코드 붙여넣기**</mark>

영상 링크 등록 3번째 방법은 임베디드코드로 영상을 넣는 방법이에요.&#x20;

장점은 !! 영상 사이즈(프레임 사이즈)를 수정해서 올릴 수 있어서 핸드폰 화면에 맡게 사이즈를 수정해서 올릴 수 있습니다.

![](https://wp.swing2app.co.kr/wp-content/uploads/2020/03/%EA%B2%8C%EC%8B%9C%EB%AC%BC%EB%8F%99%EC%98%81%EC%83%81%EB%93%B1%EB%A1%9D3_20.png)

HTML에디터 글쓰기 \[동영상 삽입] 버튼을 누른 뒤, 2번째 **‘임베디드 코드’**&#xB97C; 선택해주세요.

임베디드 코드를 붙여넣구요.

**\*프레임 사이즈- 가로, 세로 사이즈를 수정한 뒤 \[삽입] 버튼을 눌러주세요.**

\*가로: 380, 세로: 210 으로 수정했습니다. 핸드폰에 따라 최적화된 사이즈는 다르며 조금씩 다르게 표시될 수 있습니다.

![](https://wp.swing2app.co.kr/wp-content/uploads/2018/10/%EC%BA%A1%EC%B2%9822.png)

> <mark style="color:red;">**\*잠깐!! 임베디드 코드는 어디서, 어떻게 가져올 수 있나요?**</mark>

![](https://wp.swing2app.co.kr/wp-content/uploads/2020/03/%EA%B2%8C%EC%8B%9C%EB%AC%BC%EB%8F%99%EC%98%81%EC%83%81%EB%93%B1%EB%A1%9D1_20.03.png)

PC 유튜브 사이트 접속 후 앱에 적용하고자 하는 동영상을 재생시켜주시구요.

**\*\*영상 화면 위에 마우스 오른쪽 버튼을 클릭한 뒤 → ‘소스 코드 복사’를 선택해주세요.**

해당 소스 코드가 임베디드 코드로 사용됩니다.

소스 코드를 복사한 뒤 위의 동영상 삽입 – 임베디드 코드에 붙여넣기 해주시면 됩니다.

![](https://wp.swing2app.co.kr/wp-content/uploads/2020/03/%EA%B2%8C%EC%8B%9C%EB%AC%BC%EB%8F%99%EC%98%81%EC%83%81%EB%93%B1%EB%A1%9D4_20.03.png)

영상이 잘 첨부되었는지 확인 후 내용 및 이미지 등을 첨부한 뒤 \[등록] 버튼을 눌러주시면 완료됩니다.

\*수정한 프레임 사이즈로 첨부된 영상 크기가 변경된 것을 확인할 수 있습니다.

영상 등록 외에 글 작성, 사진 첨부 등의 다른 내용들은 원하는 항목을 선택해서 직접 등록해주세요.

<img src="https://684031119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmsJj00k8mj8AcVpnn9Xs%2Fuploads%2FI6cvj8IqKdVF4JFOzqve%2Fimage.png?alt=media&#x26;token=a9baa690-3816-44ee-aa7f-f8672bd00008" alt="" data-size="line"> <mark style="color:orange;">**앱 실행화면) 임베디드 링크로 연결한 영상 확인하기**</mark>

<div align="left"><img src="https://wp.swing2app.co.kr/wp-content/uploads/2020/03/%EB%85%B9%ED%99%94_2020_03_08_12_15_13_499.gif" alt=""></div>

임베디드 링크로 입력시 프레임 사이즈를 수정할 수 있기 때문에 게시물에서 영상 화면(섬네일)이 모바일 화면에 좀 더 맞게 배치할 수 있습니다.&#x20;

***

**HTML에디터**로 선택해서 글을 작성하셔야 영상 등록 등 다른 글쓰기 옵션을 자유롭게 이용할 수 있습니다.

**( HTML에디터 글쓰기: 폰트 크기, 폰트체, 폰트 색상, 표, 웹링크, 사진, 동영상, 음악파일, 서식 등 이용 가능)**