14. 뷰포트 전환과 반응형 확인하기

📱 반응형이란?

디자인 에디터 전용 스킨은 하나의 디자인이 PC, 모바일 등 다양한 화면 너비에 맞춰 자동으로 조정되는 '반응형'으로 동작해요.

PC용과 모바일용 페이지를 따로 만들 필요가 없어서, 고객이 같은 주소로 접속하더라도 각자의 기기 화면 크기에 딱 맞는 최적화된 화면을 볼 수 있답니다.

그래서 쇼핑몰을 편집할 때는 PC 화면뿐만 아니라 모바일 화면도 함께 확인하는 것이 무척 중요해요. '뷰포트 전환' 기능을 활용하면 두 화면을 쉽게 오가며 디자인을 꼼꼼히 점검할 수 있어요.

🔀 뷰포트 전환하기

편집기 상단 메뉴에 있는 뷰포트 버튼을 누르면 화면 모드를 자유롭게 전환하며 편집과 확인을 동시에 진행할 수 있어요.

뷰포트	설명
데스크톱	PC 화면을 기준으로 디자인을 편집하고 확인해요.
모바일	모바일 화면 기준으로 전환해, 좁은 화면에서의 위젯 배치를 확인해요.
전체화면	양쪽 사이드바를 숨기고 캔버스만 넓게 보여줘요. 디자인 결과물에 온전히 집중하고 싶을 때 사용해요.

💡 TIP 뷰포트는 키보드 단축키로도 빠르게 전환할 수 있어요. 데스크톱은 Alt + 1, 모바일은 Alt + 2, 전체화면은 Alt + 3을 눌러보세요. 단축키 전체 목록은 18. 키보드 단축키 활용하기에서 자세히 확인할 수 있어요.

✅ 모바일 화면 점검 포인트

모바일 뷰포트로 화면을 전환했다면, 아래 항목들을 함께 확인해 주시면 더욱 좋아요.

• 배너 및 이미지: 모바일 화면에서 이미지가 잘리지 않고 자연스럽게 보이는지 확인해 주세요. 배너와 슬라이드에는 모바일 전용 이미지를 따로 등록할 수도 있답니다.

• 위젯 배치: PC에서 가로로 나란히 배치했던 위젯들이 모바일에서는 세로로 깔끔하게 정돈되어 보이는지 점검해 주세요.

• 글자 크기 및 여백: 좁은 화면에서 글자가 너무 작거나 여백이 부족해 답답해 보이지는 않는지 확인해 주세요.

💡 위젯의 '숨기기/보이기' 설정은 데스크톱과 모바일에 공통으로 적용돼요. 특정 화면에서만 위젯을 숨기는 기능은 아직 지원하지 않아요. 이와 관련된 더 자세한 내용은 07. 위젯 다루기에서 확인하실 수 있어요.

💡 자주 묻는 질문

PC용과 모바일용 페이지를 따로 만들어야 하나요?

아니요, 따로 만들지 않으셔도 돼요. 디자인 에디터 전용 스킨은 하나의 디자인이 기기 화면 너비에 맞춰 자동으로 조정되는 반응형 방식이거든요. 페이지 하나만 예쁘게 꾸며두시면 PC와 모바일 모두에 알아서 적용된답니다. 편집하실 때 뷰포트만 전환하면서 각 화면이 어떻게 보이는지 확인해 주시면 충분해요.

뷰포트에서 본 화면과 실제 고객 화면이 같나요?

뷰포트 전환은 편집기 안에서 대략적인 디자인과 배치를 확인하는 용도예요. 실제 고객이 접속하는 서비스 환경과 완벽하게 똑같이 확인하고 싶으시다면 '미리보기' 기능을 활용해 주시는 것이 가장 정확해요. 미리보기에 대한 자세한 설명은 15. 미리보기로 결과 확인하기에서 안내해 드릴게요.