Wix Studio: Studio 에디터 정보

5 분 분량
전문가가 클라이언트를 위한 사이트를 손쉽게 제작할 수 있도록 하는 궁극의 플랫폼인 새로운 Studio 에디터를 소개합니다. 직관적인 인터페이스로 원활한 편집과 완전한 픽셀 제어를 경험할 수 있으며, 모든 세부 사항이 비전을 충족하는지 확인할 수 있습니다.
AI 반응성의 힘을 활용해 모든 화면과 기기에서 시선을 사로잡는 사이트를 디자인하고, 클라이언트에게 매번 놀라운 사용자 경험을 제공하세요.

클라이언트를 위한 반응형 사이트 구축

Studio 에디터는 사이트가 모든 화면에서 멋지게 보이도록 하는 다양한 실용적인 도구를 제공합니다. 따라서, 모든 요소에 적합한 크기 단위를 선택하는 데 소요되는 시간을 절약하고 디자인에 집중할 수 있습니다.  
데스크톱에 표시되기를 원하는 방식으로 요소를 디자인한 후, 필요에 맞는 반응형 동작을 선택하세요. 반응형 동작은 다양한 중단점에 자동으로 조정될 수 있도록 합니다.
보다 정확한 제어가 필요하다면:
고급 반응형 측정을 사용해 모든 중단점에서 요소의 크기를 조정하고 위치를 지정하세요.
속성에서 요소에 사용할 수 있는 반응형 동작의 예
반응형 레이아웃 도구를 사용해 CSS 그리드 또는 플렉스박스를 기반으로 관련 요소를 그룹화하면 디자인 과정을 더 빠르게 만들 수 있습니다. 예를 들어, 그리드는 각 셀에 요소를 유지하는 반면, 요소를 스택할 경우 수직 또는 수평 순서를 유지합니다.
단 또는 행을 쉽게 추가하기 위해 캔버스에서 그리드 선을 드래그하는 방법을 보여주는 GIF
최고의 효율성을 위한 디자인 재사용:
디자인 섹션사이트 템플릿과 같은 나만의 사용자 지정 자산을 생성해 다른 사이트에 저장, 공유 및 재사용하세요.
디자인한 요소를 디자인 자산으로 저장하는 방법을 보여주는 스크린샷

사이트에서 실시간으로 공동 작업

Studio 에디터는 팀이 동일한 사이트에서 작업할 수 있는 실시간 협업 플랫폼입니다.다른 사용자의 작업을 무시하지 않으면서 페이지 또는 요소의 레이아웃, 디자인 및 콘텐츠를 편집할 수 있습니다.
에디터 상단에 있는 3개의 아바타를 보여주는 스크린샷 (예: 3명이 동일한 사이트에서 동시에 작업함을 의미)
다른 사용자가 변경한 사항은 몇 초 안에 에디터에 표시됩니다. 이를 통해 충돌을 최소화하고 팀원 및 클라이언트와 효율적으로 작업할 수 있습니다.  
다른 팀원이 요소를 선택하고 에디터에서 어떻게 보이는지 스크린샷
클라이언트 또는 팀원이 제기한 문제를 캔버스에서 직접 해결할 수도 있습니다. 댓글 패널을 사용해 에디터를 종료하지 않고도 사이트와 관련된 커뮤니케이션을 관리하세요. 이는 팀과 클라이언트가 피드백을 공유하고 문제를 함께 해결할 수 있는 훌륭한 공간입니다. 

사이트 팀이 수정할 페이지에 댓글을 추가한 클라이언트의 예

애니메이션으로 디자인에 생기 불어넣기

디자인에 애니메이션을 통합하면 애니메이션을 한 단계 업그레이드할 수 있습니다. Studio 에디터는 표시하고자 하는 시점에 따라 5가지 애니메이션 유형을 제공합니다.  
방문자가 요소에 마우스오버, 클릭, 스크롤 시 애니메이션이 표시되도록 설정할 수 있습니다. 또한, 요소 첫 로딩 시 적용되는 입장 애니메이션 또는 연속적으로 반복되는 애니메이션 등을 추가할 수도 있습니다. 방문자의 인터랙션을 필요로 하지 않습니다.
여러 요소에 애니메이션이 적용된 라이브 사이트의 예

AI의 힘 활용

AI는 단순한 유행어가 아닙니다. Studio 에디터는 사이트를 훨씬 더 빠르게 제작할 수 있도록 하는 AI 기반 기능 모음을 제공합니다. 

반응형 레이아웃 생성하기

버튼 클릭만으로 페이지 또는 섹션을 반응형으로 만드세요.Wix의 AI 도구가 현재 레이아웃을 분석한 후 이상적으로 보이는 반응형 구조를 배치합니다. 이는 모든 중단점을 확인하고 디자인 문제를 해결하는 데 시간을 할애할 필요가 없음을 의미합니다.
반응형 AI 도구가 레이아웃을 생성한 후 표시되는 미리보기의 예

텍스트 생성하기

Wix의 AI 텍스트 생성기는 Open AI의 Chat GPT를 에디터에 직접 제공합니다. 몇 가지 세부 정보를 입력해 프롬프트를 생성하고 프로젝트에 대한 맞춤 콘텐츠 제안을 받으세요. 이를 통해 품질을 손상시키지 않으면서 텍스트 작성 과정에 소요되는 시간을 절약할 수 있습니다. 
캔버스의 단락에 AI 추천 텍스트를 적용하는 방법을 보여주는 GIF

이미지 생성하기

다른 곳에서는 볼 수 없는 고유한 이미지가 필요하다면, 사이트에서 사용하고자 하는 이미지를 설명하고 다양한 추천 이미지를 받아보세요. 일러스트레이션, 3D, 제품 사진, 사진 및 기타 다양한 스타일 중에서 선택할 수 있으므로 원하는 결과와 정확히 일치시킬 수 있습니다.
AI 이미지 생성기 및 메시지를 기반으로 한 4개의 이미지 변형의 스크린샷

코드 없는 CMS에서 대량의 콘텐츠 관리

CMS(콘텐츠 관리 시스템)는 방대한 양의 콘텐츠를 저장하고, 동적 페이지 템플릿을 생성, 방문자의 데이터 입력을 수락할 수 있도록 합니다. 사이트 인계 후 클라이언트는 CMS를 사용해 디자인에 영향을 주지 않고 콘텐츠를 업데이트 및 추가할 수 있습니다. 
반복 레이아웃의 데이터세트 연결을 보여주는 스크린샷.

나만의 CSS 코드 추가

요소에 CSS를 추가하면 완전히 새로운 스타일의 가능성이 열립니다. CSS는 반응성을 극대화하면서 독특한 디자인과 애니메이션을 만들 수 있도록 합니다. 
캔버스에서 요소를 선택한 후, 글로벌 클래스 중 하나를 선택해 시작하세요. 원하는 디자인을 찾지 못했다면, 코드에 고유한 사용자 지정 클래스를 추가할 수 있습니다.
버튼을 선택하고 사용 가능한 CSS 클래스를 표시하는 에디터의 글로벌 CSS 페이지 예

도움이 되었나요?