> For the complete documentation index, see [llms.txt](https://help.qshop.ai/customer_support/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.qshop.ai/customer_support/guide/tip/device_page.md).

# PC↔︎모바일 전용 페이지 만들기

{% embed url="<https://www.youtube.com/watch?v=x0WrdWyc1GA>" %}

큐샵에서 작업한 PC 디자인은 기본적으로 모바일에 최적화된 화면 디자인이 제공되지만, 자동으로 변환이 이루어지기 때문에 의도하지 않은 디자인으로 보일 수 있어요. 수정이 필요한 경우, 모바일 뷰포트에서 따로 편집을 진행할 수 있답니다.

PC와 모바일 각각의 디바이스 별 전용 페이지를 만드는 방법과, 이때 반드시 필요한 블록 및 섹션을 숨기는 방법에 대해 상세하게 알려드릴게요.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FEtSKbWpu98QoUOHZXoDo%2F%E1%84%83%E1%85%B5%E1%84%87%E1%85%A1%E1%84%8B%E1%85%B5%E1%84%89%E1%85%B3%E1%84%87%E1%85%A7%E1%86%AF_01.png?alt=media&amp;token=43b81634-572d-4e80-856c-cc993018e97e" alt=""><figcaption></figcaption></figure>

{% hint style="danger" %}
**주의**

모바일 에디터로 전환하여 수정할 때 아래 내용은 반드시 기억해 주세요.

● 블록의 위치 및 크기는 PC 또는 모바일에 영향을 주지 않아요. \
● 텍스트 블록의 경우 색상, 폰트, 테두리 등의 속성을 하나의 뷰포트에서 수정하면 다른 뷰포트에도 영향을 주어요.

따라서 PC와 모바일 개별 편집을 원하는 경우, 하나의 뷰포트에서 블록 숨김 후 동일한 새 블록을 추가하여 편집해 주세요.
{% endhint %}

## 1. PC뷰에서 섹션 숨기기

특정 섹션을 PC에서 보이지 않도록 숨기는 방법에 대해 알아볼게요.

### 1) 퀵 메뉴에서 숨기기

숨기려는 섹션 하단에 있는 `더보기` > `PC에서 숨기기`를 클릭해 주세요.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FJuIMS3o1bMjAoZHqz7dJ%2Fpc%E1%84%89%E1%85%A6%E1%86%A8%E1%84%89%E1%85%A7%E1%86%AB%E1%84%89%E1%85%AE%E1%86%B7%E1%84%80%E1%85%B5%E1%84%80%E1%85%B5_01.png?alt=media&amp;token=7c68f828-409e-4251-bdfe-ade15db2b6e0" alt=""><figcaption></figcaption></figure>

### 2) 레이어 패널에서 숨기기

`레이어` > `섹션 상세설정` > `PC에서 숨기기`를 클릭해 주세요. 그럼 숨김 처리된 섹션 영역이라는 문구가 표시돼요.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2F4KtfYJdUloz4FIZennai%2Fpc%E1%84%89%E1%85%A6%E1%86%A8%E1%84%89%E1%85%A7%E1%86%AB%E1%84%89%E1%85%AE%E1%86%B7%E1%84%80%E1%85%B5%E1%84%80%E1%85%B5_02.png?alt=media&amp;token=8c3d0ada-c3ed-4934-867c-44330dfe6861" alt=""><figcaption></figcaption></figure>

## 2. PC뷰에서 블록 숨기기

특정 블록을 PC에서 보이지 않도록 숨기는 방법에 대해 알아볼게요.&#x20;

### 1) 퀵 메뉴에서 숨기기

블록 클릭 시 나타나는 퀵 메뉴에서 `눈모양 아이콘`을 클릭해 주세요. 숨김 처리된 블록은 희미하게 보여요.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FU5VILwG5vYHVK5sBMIk3%2Fpc%E1%84%87%E1%85%B3%E1%86%AF%E1%84%85%E1%85%A9%E1%86%A8%E1%84%89%E1%85%AE%E1%86%B7%E1%84%80%E1%85%B5%E1%84%80%E1%85%B5_02.png?alt=media&amp;token=ff0fcc2d-659f-4f2a-a03d-a62e65680f52" alt=""><figcaption></figcaption></figure>

### 2) 레이어 패널에서 숨기기

`레이어` > `블록 상세설정` > `디바이스 숨기기` > `PC에서 숨기기`를 클릭해 주세요.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FQ2Kzf2NKFW1hZrXvGzgS%2Fpc%E1%84%87%E1%85%B3%E1%86%AF%E1%84%85%E1%85%A9%E1%86%A8%E1%84%89%E1%85%AE%E1%86%B7%E1%84%80%E1%85%B5%E1%84%80%E1%85%B5_01.png?alt=media&amp;token=9870a8c2-91fd-4295-bfde-a3084443583c" alt=""><figcaption></figcaption></figure>

## 3. 모바일뷰에서 섹션 숨기기

특정 섹션을 모바일에서 보이지 않도록 숨기는 방법에 대해 알아볼게요.

### 1) 퀵 메뉴에서 숨기기

숨기려는 섹션 하단에 있는 `더보기 아이콘` > `모바일에서 숨기기`를 클릭해 주세요.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2F6XWk1Ae1QA6obVp2Mm6Y%2Fmo%E1%84%89%E1%85%A6%E1%86%A8%E1%84%89%E1%85%A7%E1%86%AB%E1%84%89%E1%85%AE%E1%86%B7%E1%84%80%E1%85%B5%E1%84%80%E1%85%B5_01.png?alt=media&amp;token=3b0a717c-02f8-4410-8a6a-89e817f9194b" alt=""><figcaption></figcaption></figure>

### 2) 레이어 패널에서 숨기기

`레이어` > `섹션 상세설정` > `모바일에서 숨기기`를 클릭해 주세요. 그럼 숨김 처리된 섹션 영역이라는 문구가 표시돼요.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FCcqrKt8KoP6Pr1ZXUhY2%2Fmo%E1%84%89%E1%85%A6%E1%86%A8%E1%84%89%E1%85%A7%E1%86%AB%E1%84%89%E1%85%AE%E1%86%B7%E1%84%80%E1%85%B5%E1%84%80%E1%85%B5_02.png?alt=media&amp;token=cb246b61-02e7-40bf-a859-5362f326bdb3" alt=""><figcaption></figcaption></figure>

## 4. 모바일뷰에서 블록 숨기기

특정 블록을 모바일에서 보이지 않도록 숨기는 방법에 대해 알아볼게요.

### 1) 퀵 메뉴에서 숨기기

블록 클릭 시 나타나는 퀵 메뉴에서 `눈모양 아이콘`을 클릭해 주세요. 숨김 처리된 블록은 모바일에서 숨김 처리된 콘텐츠로 표시됩니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FD9yhUZgniw3D8AGQYoLj%2Fmo%E1%84%87%E1%85%B3%E1%86%AF%E1%84%85%E1%85%A9%E1%86%A8%E1%84%89%E1%85%AE%E1%86%B7%E1%84%80%E1%85%B5%E1%84%80%E1%85%B5_01.png?alt=media&amp;token=90032b9b-3545-4d42-8d88-3035a26ac32e" alt=""><figcaption></figcaption></figure>

### 2) 레이어 패널에서 숨기기

`레이어` > `블록 상세설정` > `디바이스 숨기기` > `모바일에서 숨기기`를 클릭해 주세요.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FtESyrIMYgk1XmHERyyPE%2Fmo%E1%84%87%E1%85%B3%E1%86%AF%E1%84%85%E1%85%A9%E1%86%A8%E1%84%89%E1%85%AE%E1%86%B7%E1%84%80%E1%85%B5%E1%84%80%E1%85%B5_02.png?alt=media&amp;token=426d2a74-d7b1-4dbb-86f6-1ef276b91d7e" alt=""><figcaption></figcaption></figure>