# 스윙투앱 브라우저 앱 이용방법

<figure><img src="https://684031119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmsJj00k8mj8AcVpnn9Xs%2Fuploads%2FyTh2CmnTl00xHKyCALLQ%2F%EA%B5%AC%EB%B6%84%EC%84%A0.PNG?alt=media&#x26;token=5646a291-52ee-41b3-af1a-5a8303039007" alt=""><figcaption></figcaption></figure>

<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:blue;">**스윙투앱 브라우저 앱이란?**</mark>

앱을 제작하지 않아도 웹사이트를 입력하면 바로 웹앱 스타일로 확인 가능한 미리보기 어플입니다. &#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:blue;">**스윙투앱 브라우저 앱 이용방법**</mark>

<figure><img src="https://684031119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmsJj00k8mj8AcVpnn9Xs%2Fuploads%2FwwbDu4v9rbeh6CV2VIqq%2F%EC%9B%B9%EB%B7%B0-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%802.png?alt=media&#x26;token=b515737a-1ea6-4eee-b59c-6a70a9942459" alt=""><figcaption></figcaption></figure>

<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:blue;">**스윙투앱 브라우저 앱 장점**</mark>

1\)웹사이트를 적용한 웹 앱이 어떻게 보여지는지 앱 제작 없이 바로 확인 가능

2\)아이폰에서도 즉시 확인 가능&#x20;

3\)원하는 UI스타일 선택하여 확인 가능 (푸시 툴바 사용여부 체크)

4\)앱으로 만들고자 하는 웹사이트가 있다면, 언제 어디서든! 횟수 제한없이 자유롭게 확인 가능

<figure><img src="https://684031119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmsJj00k8mj8AcVpnn9Xs%2Fuploads%2FyTh2CmnTl00xHKyCALLQ%2F%EA%B5%AC%EB%B6%84%EC%84%A0.PNG?alt=media&#x26;token=5646a291-52ee-41b3-af1a-5a8303039007" alt=""><figcaption></figcaption></figure>

## 1.이용방법1 -URL입력

**웹앱 제작 전, 입력할 웹사이트(홈페이지)가 앱으로 어떻게 보여지는지 미리 확인할 경우 이용할 수 있습니다.**

### <mark style="color:blue;">1)스윙투앱 브라우저 앱 설치</mark>

<div align="left"><figure><img src="https://684031119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmsJj00k8mj8AcVpnn9Xs%2Fuploads%2FYCXbAvZP8xYJd1BOgKkd%2F%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%801.png?alt=media&#x26;token=4bd770f7-1105-4b5a-b7f0-ec9d2d71cd11" alt="" width="317"><figcaption></figcaption></figure></div>

안드로이드폰은 플레이스토어, 아이폰은 앱스토어에서 검색 후 다운 받아 주세요

&#x20;**'스윙투앱 브라우저'** 검색 후 어플다운&#x20;

[플레이스토어 앱 출시 링크](https://play.google.com/store/apps/details?id=com.hustay.swing.p275a02bc9a024f9eb54c077d056e2cb1)

[앱스토어 앱 출시 링크](https://apps.apple.com/us/app/%EC%8A%A4%EC%9C%99%ED%88%AC%EC%95%B1-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80/id6450099622?platform=iphone)

### <mark style="color:blue;">2)어플 실행</mark>

<div align="left"><figure><img src="https://684031119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmsJj00k8mj8AcVpnn9Xs%2Fuploads%2FdE8gUnQcb2V0N8ALMolg%2F%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%802.png?alt=media&#x26;token=2537fe5e-c9bd-484b-abcb-8237d831dea5" alt="" width="317"><figcaption></figcaption></figure></div>

앱 실행 후 웹사이트 URL입력란에 앱으로 적용할 홈페이지 주소를 입력해주세요.

\*하이퍼링크 “http\://” 반드시 입력해주세요.

### <mark style="color:blue;">3)웹사이트 링크 입력 및 열기</mark>

<div align="left"><figure><img src="https://684031119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmsJj00k8mj8AcVpnn9Xs%2Fuploads%2FRRCAclniYLsNjWR1zkOP%2F%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%803.png?alt=media&#x26;token=134b4864-2c01-4868-9b8f-94b3d048911a" alt="" width="317"><figcaption></figcaption></figure></div>

해당 매뉴얼에서는 스윙투앱 홈페이지 주소를 입력했습니다.&#x20;

\*하이퍼링크 “http\://” 반드시 입력해주세요

입력 후 \[웹사이트 열기] 버튼을 선택해주세요.

### <mark style="color:blue;">4)웹앱 미리보기 확인</mark>&#x20;

<div align="left"><figure><img src="https://684031119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmsJj00k8mj8AcVpnn9Xs%2Fuploads%2FrbguoJ2BrKC4TjkyDX6E%2F%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%804.png?alt=media&#x26;token=fb001806-8b0f-4af3-95c1-6b41c2aa815f" alt="" width="317"><figcaption></figcaption></figure></div>

입력한 웹사이트로 연결되며, 웹앱 미리보기 확인이 가능합니다.

***

## 2.이용방법2 -홈페이지 랜딩페이지&#x20;

홈페이지 랜딩 페이지에서도 앱 미리보기가 가능합니다.

<https://www.swing2app.co.kr/landing/webview> 접속

<figure><img src="https://684031119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmsJj00k8mj8AcVpnn9Xs%2Fuploads%2FUMgHmCSDRfS5143tLoeX%2Fdd.PNG?alt=media&#x26;token=24437b0f-9c2c-4cec-9f1b-e3851ae652ad" alt=""><figcaption></figcaption></figure>

웹사이트 입력창 >홈페이지 주소 입력 > QR코드 팝업이 뜹니다.

<figure><img src="https://684031119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmsJj00k8mj8AcVpnn9Xs%2Fuploads%2F2dCuDqaQvnJjU3ejQYdS%2Fdd2.PNG?alt=media&#x26;token=c7e939fb-7b0b-45e4-8657-ddec4692f057" alt=""><figcaption></figcaption></figure>

아이폰 카메라 실행 후 > QR코드 촬영> 브라우저 어플로 이동> 연결된 홈페이지 앱 미리보기 할 수 있습니다.

***

## 3.이용방법3 -QR코드 촬영

**3번째 이용방법은 앱제작에서 생성되는 QR코드로 앱을 미리보는 방법입니다.**

### <mark style="color:blue;">1)앱에서 미리보기 선택</mark>

<figure><img src="https://684031119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmsJj00k8mj8AcVpnn9Xs%2Fuploads%2F5xjtAR4CsyttnEnXUHUl%2F886%EC%95%B1%EB%AF%B8%EB%A6%AC%EB%B3%B4%EA%B8%B0.png?alt=media&#x26;token=035e85cf-fdd9-43b1-9237-be9801307937" alt=""><figcaption></figcaption></figure>

앱제작 화면 – STEP3 페이지에서 웹사이트 주소 입력 후 저장 버튼 선택

웹 미리보기(웹 가상머신)화면에 연결된 웹이 정상적으로 뜨지 않을 경우&#x20;

(1)가상머신 화면에 기재된 **\[앱에서 미리보기]**&#xB97C; 선택해주세요.

(2)QR코드가 화면에 생성이 됩니다.&#x20;

### <mark style="color:blue;">2)QR코드 촬영</mark>

<div align="left"><figure><img src="https://684031119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmsJj00k8mj8AcVpnn9Xs%2Fuploads%2FPtzrUGC1ijHs9YH0FLi2%2FIMG-1.png?alt=media&#x26;token=4707e51d-dd8e-4bf4-b302-46c6810f2e64" alt=""><figcaption></figcaption></figure></div>

아이이폰 혹은 안드로이드폰 카메라로 QR코드를 촬영합니다.

### <mark style="color:blue;">3)브러우저 어플 연결</mark>&#x20;

<div align="left"><figure><img src="https://684031119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmsJj00k8mj8AcVpnn9Xs%2Fuploads%2FPqr5rv7GKw1jZ002Efq8%2FIMG-2.png?alt=media&#x26;token=8d062c4d-f8da-4061-b84e-c7f60976e82a" alt=""><figcaption></figcaption></figure></div>

스윙투앱 브라우저 어플로 연결되며, 앱 미리보기에서 연결된 웹사이트를 확인할 수 있습니다.

***

## 4.툴바이용 TIP

<figure><img src="https://684031119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmsJj00k8mj8AcVpnn9Xs%2Fuploads%2Fn8L0OLRAl0pZvpQ4Mrtx%2F%EC%8A%A4%EC%9C%99%ED%88%AC%EC%95%B1%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%ED%88%B4%EB%B0%94.png?alt=media&#x26;token=131b1463-1dc3-4527-8ad3-7ab900a3be1b" alt=""><figcaption></figcaption></figure>

<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"> **툴바 미사용**

웹뷰앱 스타일로 모바일 웹과 동일한 화면 &#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"> **툴바 사용**&#x20;

푸시앱으로 웹 앱 하단에 푸시 툴바가 생성됨

{% hint style="warning" %} <mark style="color:orange;">**안내사항**</mark>

1\)스윙투앱 브라우저 앱은 앱 내에서 미리보기로 확인하는 용도로 실제 앱이 제작되거나, 앱으로 다운 받는 용도가 아닙니다.

2\)브라우저 어플에서 웹 앱 미리보기로만 확인하신 뒤, 앱제작은 스윙투앱 공식 홈페이지에서 회원가입 및 로그인 후 앱제작에서 직접 제작해주셔야 합니다.&#x20;

3\)툴바 사용시, 툴바에서 제공되는 기능들도 이용할 수 있습니다.

툴바에서 제공되는 기능들도 확인 해보시기 바랍니다.&#x20;

4\)앱이 아니기 때문에 푸시 앱에서 발송되는 푸시 등의 기능은 이용이 불가합니다.
{% endhint %}