Wix Studio: Studio 에디터 정보
5 분 분량
페이지 메뉴
- 클라이언트를 위한 반응형 사이트 구축
- 사이트에서 실시간으로 공동 작업
- 애니메이션으로 디자인에 생기 불어넣기
- AI의 힘 활용
- 반응형 레이아웃 생성하기
- 텍스트 생성하기
- 이미지 생성하기
- 코드 없는 CMS에서 대량의 콘텐츠 관리
- 나만의 CSS 코드 추가
전문가가 클라이언트를 위한 사이트를 손쉽게 제작할 수 있도록 하는 궁극의 플랫폼인 새로운 Studio 에디터를 소개합니다. 직관적인 인터페이스로 원활한 편집과 완전한 픽셀 제어를 경험할 수 있으며, 모든 세부 사항이 비전을 충족하는지 확인할 수 있습니다.
AI 반응성의 힘을 활용해 모든 화면과 기기에서 시선을 사로잡는 사이트를 디자인하고, 클라이언트에게 매번 놀라운 사용자 경험을 제공하세요.
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/9432a2ad-f01d-4a3d-ae53-370c37e15e62/2023/08/01/87b3cde8-2926-48bd-b9e6-287d3d225be1/5942a54d-db2b-4633-82b4-be1da61e3de4.png)
클라이언트를 위한 반응형 사이트 구축
Studio 에디터는 사이트가 모든 화면에서 멋지게 보이도록 하는 다양한 실용적인 도구를 제공합니다. 따라서, 모든 요소에 적합한 크기 단위를 선택하는 데 소요되는 시간을 절약하고 디자인에 집중할 수 있습니다.
데스크톱에 표시되기를 원하는 방식으로 요소를 디자인한 후, 필요에 맞는 반응형 동작을 선택하세요. 반응형 동작은 다양한 중단점에 자동으로 조정될 수 있도록 합니다.
![속성에서 요소에 사용할 수 있는 반응형 동작의 예](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/31/480813e7-683a-441d-916a-4271242c95e5/223607bc-fd3d-4f27-b8dd-4c00b647aeca.png)
![단 또는 행을 쉽게 추가하기 위해 캔버스에서 그리드 선을 드래그하는 방법을 보여주는 GIF](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/31/845e0d91-be97-4254-ac13-8fff41653250/a93cecf3-f329-4204-b3a8-2e5d1349d73b.gif)
사이트에서 실시간으로 공동 작업
Studio 에디터는 팀이 동일한 사이트에서 작업할 수 있는 실시간 협업 플랫폼입니다.다른 사용자의 작업을 무시하지 않으면서 페이지 또는 요소의 레이아웃, 디자인 및 콘텐츠를 편집할 수 있습니다.
![에디터 상단에 있는 3개의 아바타를 보여주는 스크린샷 (예: 3명이 동일한 사이트에서 동시에 작업함을 의미)](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/31/c04ff946-7aff-43c3-8de4-4826759f6cea/87b42d14-72f2-40e9-b824-ead72e027b32.png)
다른 사용자가 변경한 사항은 몇 초 안에 에디터에 표시됩니다. 이를 통해 충돌을 최소화하고 팀원 및 클라이언트와 효율적으로 작업할 수 있습니다.
![다른 팀원이 요소를 선택하고 에디터에서 어떻게 보이는지 스크린샷](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/31/96536afd-e0a2-461e-a55d-7cea5a05c881/6bd46763-68b4-4027-b515-c19cdb569f9a.png)
클라이언트 또는 팀원이 제기한 문제를 캔버스에서 직접 해결할 수도 있습니다. 댓글 패널을 사용해 에디터를 종료하지 않고도 사이트와 관련된 커뮤니케이션을 관리하세요. 이는 팀과 클라이언트가 피드백을 공유하고 문제를 함께 해결할 수 있는 훌륭한 공간입니다.
![사이트 팀이 수정할 페이지에 댓글을 추가한 클라이언트의 예](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/31/a974954d-bfc8-45b0-9a4c-885ebb685774/28459475-e92d-4813-8a8b-87afed0d6c05.png)
애니메이션으로 디자인에 생기 불어넣기
디자인에 애니메이션을 통합하면 애니메이션을 한 단계 업그레이드할 수 있습니다. Studio 에디터는 표시하고자 하는 시점에 따라 5가지 애니메이션 유형을 제공합니다.
방문자가 요소에 마우스오버, 클릭, 스크롤 시 애니메이션이 표시되도록 설정할 수 있습니다. 또한, 요소 첫 로딩 시 적용되는 입장 애니메이션 또는 연속적으로 반복되는 애니메이션 등을 추가할 수도 있습니다. 방문자의 인터랙션을 필요로 하지 않습니다.
![여러 요소에 애니메이션이 적용된 라이브 사이트의 예](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/31/9b1bbc5c-c987-47e4-bc86-eb1efc5317f8/bdfb8ee0-bc3c-4bc7-b2cd-7fe0977b297d.gif)
AI의 힘 활용
AI는 단순한 유행어가 아닙니다. Studio 에디터는 사이트를 훨씬 더 빠르게 제작할 수 있도록 하는 AI 기반 기능 모음을 제공합니다.
반응형 레이아웃 생성하기
버튼 클릭만으로 페이지 또는 섹션을 반응형으로 만드세요.Wix의 AI 도구가 현재 레이아웃을 분석한 후 이상적으로 보이는 반응형 구조를 배치합니다. 이는 모든 중단점을 확인하고 디자인 문제를 해결하는 데 시간을 할애할 필요가 없음을 의미합니다.
![반응형 AI 도구가 레이아웃을 생성한 후 표시되는 미리보기의 예](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/19/f3b7db02-1465-41d3-9d20-0f4ef34c3e05/b0e47886-11b9-4536-957a-183928dc050d.png)
텍스트 생성하기
Wix의 AI 텍스트 생성기는 Open AI의 Chat GPT를 에디터에 직접 제공합니다. 몇 가지 세부 정보를 입력해 프롬프트를 생성하고 프로젝트에 대한 맞춤 콘텐츠 제안을 받으세요. 이를 통해 품질을 손상시키지 않으면서 텍스트 작성 과정에 소요되는 시간을 절약할 수 있습니다.
![캔버스의 단락에 AI 추천 텍스트를 적용하는 방법을 보여주는 GIF](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/06/28/e6ed137b-63e8-4170-a95d-ccce1e264d59/ee602f9f-0fc3-473b-bfe8-cf37b10e7f63.gif)
이미지 생성하기
다른 곳에서는 볼 수 없는 고유한 이미지가 필요하다면, 사이트에서 사용하고자 하는 이미지를 설명하고 다양한 추천 이미지를 받아보세요. 일러스트레이션, 3D, 제품 사진, 사진 및 기타 다양한 스타일 중에서 선택할 수 있으므로 원하는 결과와 정확히 일치시킬 수 있습니다.
![AI 이미지 생성기 및 메시지를 기반으로 한 4개의 이미지 변형의 스크린샷](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/5c3e602a-8647-41f7-bb22-686374bf97ce/2023/07/05/83b4c490-7df1-4b0e-b1fd-911f43972efd/be0247c8-ef76-47eb-8a2a-ab50d284730e.png)
코드 없는 CMS에서 대량의 콘텐츠 관리
CMS(콘텐츠 관리 시스템)는 방대한 양의 콘텐츠를 저장하고, 동적 페이지 템플릿을 생성, 방문자의 데이터 입력을 수락할 수 있도록 합니다. 사이트 인계 후 클라이언트는 CMS를 사용해 디자인에 영향을 주지 않고 콘텐츠를 업데이트 및 추가할 수 있습니다.
![반복 레이아웃의 데이터세트 연결을 보여주는 스크린샷.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/d6b40156-9694-4cfe-9209-54815ef9d6dc/2023/07/18/c13a139a-35e2-4886-bb8a-06fa3e8730a5/96d62b0e-1410-44ed-9005-591a4d12e5bf.png)
나만의 CSS 코드 추가
요소에 CSS를 추가하면 완전히 새로운 스타일의 가능성이 열립니다. CSS는 반응성을 극대화하면서 독특한 디자인과 애니메이션을 만들 수 있도록 합니다.
캔버스에서 요소를 선택한 후, 글로벌 클래스 중 하나를 선택해 시작하세요. 원하는 디자인을 찾지 못했다면, 코드에 고유한 사용자 지정 클래스를 추가할 수 있습니다.
![버튼을 선택하고 사용 가능한 CSS 클래스를 표시하는 에디터의 글로벌 CSS 페이지 예](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/31/d7e2c13e-3473-4ffc-a199-0bafe92fd3c0/525402cd-7ec2-4097-ba60-b13c36c6a932.png)