header-logo
시작하기Wix를 사용해 사이트 및 비즈니스를 구축하는 방법을 알아보세요. 템플릿을 사용해 사이트를 맞춤화하거나, 전문가를 고용해 웹 존재감을 강화할 수 있습니다.
사이트 제작Wix 에디터를 사용하고 사이트 콘텐츠를 관리하는 방법을 알아보세요. 방문자의 개인정보를 보호하고 사이트에 대한 접근성을 높이는 방법 또한 확인할 수 있습니다.
계정 및 결제계정 설정을 검토하고, 구독 및 프리미엄 플랜을 관리하고, 인보이스를 이해하세요.
Wix 모바일 앱Wix Owner 앱을 사용해 비즈니스를 효율적으로 운영하고 방문자와 소통하며 커뮤니티를 구축하세요.
도메인 연결도메인 구매, 연결, 이전 방법 및 사이트 데이터를 안전하게 유지하는 방법을 알아보세요.
비즈니스 관리비즈니스를 구축하고 성장시키는 데 적합한 도구를 찾으세요. 결제 승인, 애널리틱스 분석 검토, 방문자와 교류 등의 작업을 할 수 있습니다.
사이트 홍보검색 엔진에서 사이트를 홍보하고, 이메일 캠페인을 발송, 유료 광고를 게재하는 방법 등을 알아보세요.
Studio 및 파트너Studio 및 파트너 계정을 최대한 활용해 비즈니스를 확장하세요.
고객센터사이트 성능 및 기술 문제 해결에 대한 정보를 얻으세요. 제품 로드맵에서 향후 기능을 추적할 수도 있습니다.
placeholder-preview-image
Wix Learn강좌 및 튜토리얼을 통해 실력을 향상시키세요.
Wix 블로그웹 디자인, 마케팅 등에 대한 팁을 확인하세요.
SEO 러닝 허브검색 엔진에서 유기적 사이트 트래픽을 증가시키는 방법을 알아보세요.
Website development풀스택 플랫폼을 활용해 맞춤형 사이트를 구축하세요.
전문가 고용하기목표 달성에 도움을 줄 전문가를 만나보세요.
placeholder-preview-image
페이지 메뉴
  • 중단점별 디자인 사용자 지정하기
  • AI로 반응형 섹션 만들기
  • 중단점에서 자동 크기 조정하기
  • 모든 화면에 맞게 요소 디자인하기
  • 자동 및 수동 텍스트 크기 조정하기

Studio 에디터: 반응형 사이트 구축하기

페이지 메뉴
  • 중단점별 디자인 사용자 지정하기
  • AI로 반응형 섹션 만들기
  • 중단점에서 자동 크기 조정하기
  • 모든 화면에 맞게 요소 디자인하기
  • 자동 및 수동 텍스트 크기 조정하기

새로운 Studio 에디터는 전문가가 모든 화면 및 기기에서 멋지게 보이는 완전 반응형 사이트를 제작할 수 있는 훌륭한 도구입니다. 최첨단 기능을 갖춘 이 플랫폼으로 빠르고 정확하게 반응형 사이트를 제작할 수 있습니다. 

Studio 에디터 내에서는 디자인 과정을 간소화하고 쉽고, 효율성 및 놀라운 프로젝트 결과를 위해 세심하게 선별된 다양한 도구를 찾을 수 있습니다. 
Wix Studio 아카데미로 이동해 추가 Wix Studio 웨비나, 튜토리얼 및 강좌를 확인하세요. (영문)

중단점별 디자인 사용자 지정하기

Studio 에디터를 사용하면 중단점별로 사이트를 조정해 항상 멋지게 보일 수 있습니다. 중단점은 방문자가 사용할 수 있는 화면 및 기기를 나타내는 화면 너비 범위입니다. (예:태블릿, 모바일)
Studio 에디터는 중단점 디자인에 있어 계단식 개념을 사용합니다. 더 큰 중단점을 변경할 경우 해당 변경사항은 더 작은 중단점에도 적용되지만, 더 작은 중단점은 변경해도 더 큰 중단점에 영향을 미치지 않습니다. 
상단에서 다양한 중단점 클릭 시 사이트 디자인이 어떻게 변경되는지 보여주는 GIF

AI로 반응형 섹션 만들기

AI의 기능을 사용해 클릭 한 번으로 모든 화면 크기에 반응하는 섹션을 만들 수 있습니다.  반응형 AI 도구는 관련 요소 그룹을 식별하고 각 그룹에 이상적인 레이아웃 도구(예: 스택, 그리드)를 적용합니다.
변경 사항을 적용하거나 삭제하는 옵션이 강조 표시된 반응형 AI 도구로 생성된 미리보기의 스크린샷

중단점에서 자동 크기 조정하기

사이트를 디자인할 때에는 요소가 모든 화면 크기에서 멋지게 보이는지 확인하고자 할 수 있습니다. 요소의 크기(픽셀 단위)를 편집하고 반응형 동작을 선택하면 나머지가 처리됩니다. 
캔버스에서 요소 크기 조정을 위해 끌기 핸들을 사용하는 방법을 보여주는 GIF
모든 요소에는 기본 반응형 동작(예: 화면 비율 유지)가 포함되어 다른 화면에서 크기가 조정되는 방식을 제어할 수 있습니다. 크기 조정을 설정하기 위해 모든 중단점에서 작업할 필요가 없으므로 디자인 과정이 가속화됩니다.
속성 패널에서 요소의 반응형 동작을 필요에 더 적합한 동작으로 변경할 수 있습니다. 
반응형 동작 드롭다운 및 사용 가능한 옵션 스크린샷

모든 화면에 맞게 요소 디자인하기

비율에 따라 요소가 크기가 조정되도록 설정하면 디자인이 모든 화면에서 이상적으로 표시되도록 할 수 있습니다. 속성에서 비율 조절 버튼을 활성화하면 자동으로 실행됩니다.
반응형 동작이 비율에 따라 크기가 조정되도록 설정한 경우에 한해 표시되는 비율 조절 버튼의 스크린샷
예를 들어, 요소에 정의된 테두리가 있는 경우에 유용합니다. 테두리가 작은 화면에서는 너무 두껍고 위압적으로 보일 수 있으며, 큰 화면에서는 테두리가 존재하지 않는 것처럼 보일 수 있습니다. 버튼이 활성화된 경우, 데스크톱에서 원하는 디자인을 설정하기만 하면 됩니다.

자동 및 수동 텍스트 크기 조정하기

Studio 에디터에서 텍스트는 화면 크기에 따라 자동으로 크기가 조정되도록 설정됩니다. 데스크톱에서 원하는 글꼴 크기를 선택하면 나머지는 Wix에서 알아서 처리합니다. 텍스트가 디자인에 비해 너무 작거나 너무 커지지 않도록 최소값 및 최대값을 설정할 수 있습니다. 
텍스트 크기 조정을 더 정확하게 제어해야 한다면, 사용자 지정을 선택하세요. 이를 통해 각 중단점별로 크기 범위를 설정할 수 있습니다. 
중단점별로 원하는 범위를 설정하는 위치를 보여주는 속성의 텍스트 비율 변경 옵션 스크린샷

Helpmate

안녕하세요 님,

추가 도움이 필요하신가요?
Unlock personalized helpLog in to get the most out of Helpmate.