Editor X로 강력한 반응형 웹사이트를 구축하고 실행하는 방법

이 기사는 디자인의 모든 것을 살고 숨쉬는 헌신적인 디자이너, 개발자 및 제품 전문가 팀이 만든 고급 웹 빌더인 Editor X를 검토하는 후원 기사입니다. 지원해 주셔서 감사합니다!

디자이너로서 우리는 도구 내에서 많은 창의적 자유를 갖는 데 익숙합니다. 우리는 올바르게 보일 때까지 직관적으로 사물을 선택, 이동 및 미세 조정합니다. 작업이 디자인 도구를 벗어나면 예측할 수 없고 다양 하고 유동적인 브라우저 환경에 이 수준의 제어 권한을 부여합니다. 거기에서 우리의 결정 중 일부는 갑자기 수정되어야 하고 변경 사항을 도입하려면 코드에 뛰어들어야 합니다. 또는 오해를 피하기 위해 이러한 변경 사항을 명확하고 모호하지 않게 설명하십시오. 후자는 관련된 모든 당사자에게 좌절감을 줄 수 있습니다.

웹 빌더는 오랫동안 사용되어 왔지만 최근에 와서야 전문적인 용도로 실용적이 되었습니다. 디자인과 코드 사이 의 격차 를 줄이는 것이 많은 회사의 핵심이 되었으며, 종종 이 문제는 모든 팀이 각자의 방식으로 해결하려고 시도하는 가장 중요한 문제로 간주됩니다.

이 기사에서는 전문가와 에이전시가 웹사이트를 구축할 수 있는 정교한 플랫폼인 Editor X를 살펴보겠습니다.

에디터 X는 무엇인가요?

과거에 웹 빌더를 우연히 만났을 가능성이 높습니다. 종종 이러한 도구의 결과에 대해 약간의 회의와 의심이 있습니다. 이러한 빌더 중 상당수는 일정 수준의 사용자 정의가 포함된 미리 만들어진 템플릿에 크게 의존합니다. Editor X는 전문 디자이너와 에이전시가 다양하고 유연한 구성 요소 와 일련의 고급 기능으로 웹 경험을 생성할 수 있는 플랫폼을 제공함으로써 그 이상을 제공합니다.

Editor X가 무엇을 할 수 있는지 알아보는 가장 좋은 방법은 그것을 사용하여 무언가를 구축하는 것이며 이 기사에서는 처음부터 웹사이트를 만들 것입니다.

도구에 익숙해지기

Editor X를 처음 열면 새 사이트를 만드는 첫 번째 단계를 안내합니다. 처음부터 시작하거나 플랫폼이 제공하는 많은 템플릿 중 하나를 선택할 수 있습니다.

Editor X는 잘 정립된 패턴을 따르며 디자인 경험이 있는 사람이라면 누구나 몇 분 안에 편안하게 느낄 것입니다. 대부분의 경우 요소를 추가하고, 캔버스를 가로질러 이동하고, 속성을 조정하는 동일한 워크플로를 반복합니다.

왼쪽 상단에는 요소를 추가하고, 레이어를 탐색하고, 페이지를 관리하는 데 도움이 되는 패널 토글이 있습니다. 그런 다음 작업 공간의 중심에는 페이지 디자인과 직접 상호 작용할 캔버스가 있습니다. 캔버스도 크기 조정 이 가능하므로 다양한 뷰포트를 쉽게 실험할 수 있습니다. 캔버스에서 무엇이든 선택할 때마다 오른쪽에 Inspector 패널 이 열리는 것을 볼 수 있습니다.

전체 팀이 새로운 디자인에 대한 대화에 일찍 참여할수록 더 많은 문제를 조기에 해결할 수 있습니다. 종종 스크린샷을 찍어 Slack에 붙여넣거나 다른 도구를 사용하여 클릭 가능한 프로토타입을 통해 디자인에 대해 논의해야 합니다. Editor X에서 팀원을 프로젝트에 초대 하고 개별 역할과 권한을 할당할 수 있습니다. 페이지나 특정 구성 요소에 댓글을 남겨 실시간으로 팀과 소통할 수 있는 옵션도 있습니다.

웹사이트 구조 만들기

콘텐츠 추가를 시작하기 전에 페이지의 골격 역할을 할 섹션을 만듭니다. Editor X의 섹션은 본질적으로 콘텐츠를 담는 큰 컨테이너 입니다. 새 페이지를 만드는 즉시 캔버스에 이미 추가된 머리글 및 바닥글 섹션이 표시됩니다. 새 섹션을 추가하려면 기존 섹션을 클릭하면 가장자리에 파란색 "+" 아이콘이 표시됩니다.

새 섹션을 추가할 때마다 사용하려는 레이아웃에 대해 묻습니다. 간단한 섹션의 경우 공백을 선택합니다. 더 복잡한 것이 필요할 때마다 그리드와 레이아웃자 중에서 선택할 수 있습니다. 둘 다 CSS 그리드와 플렉스박스의 개념과 유사하며 차이점을 이해해야 하는 경우 여기에서 자세히 알아볼 수 있습니다.

또한 기존의 미리 디자인된 섹션 중 일부를 탐색하고 필요한 경우 사용할 수 있습니다. 이러한 섹션은 즉시 반응하며 테마에 자동으로 적용됩니다.

콘텐츠 추가 및 페이지 스타일 지정

Editor X에서 요소를 추가하는 것은 간단합니다. "추가" 패널을 열고 요소를 캔버스로 드래그합니다. 해당 패널에는 웹사이트의 구성 요소가 될 다양한 요소 , 구성 요소 및 전체 섹션이 있습니다.

캔버스에 놓는 모든 요소는 쉽게 이동하고 정렬할 수 있습니다. 또한 "Docking" 기능을 사용하여 요소가 화면 크기의 변화에 ​​반응하는 방식을 제어할 수 있습니다. 화면 크기가 조정될 때 도킹 옵션은 다양한 유형의 컨테이너 내 요소의 수직 및 수평 위치를 결정합니다.

제목, 단락 및 버튼을 추가하여 헤더 섹션 작업을 시작하겠습니다. 캔버스에 가져오면 더 작은 화면 크기에서 겹치는 것을 방지하기 위해 스택으로 전환합니다.

스태킹 은 캔버스에서 서로 위와 아래에 배열된 요소 간의 관계를 제어하는 ​​쉬운 방법입니다. 요소 그룹을 쌓으려면 함께 선택하고 맨 위에 표시되는 "스택" 옵션을 클릭해야 합니다.

섹션의 오른쪽에는 일러스트레이션으로 대체할 이미지를 추가합니다. 이 작업을 수행하려면 "이미지 변경"을 클릭한 다음 자산을 미디어 라이브러리에 업로드하기만 하면 됩니다. 우리가 추가한 자산 외에도 무료 스톡 사진과 미리 디자인된 일러스트레이션이 있는 대규모 라이브러리에 직접 액세스할 수 있습니다.

"작동 방식" 섹션의 3단계를 구현하기 위해 3개의 항목과 20px 공간 사이에 repeater 요소를 사용합니다. 반복 레이아웃은 기본적으로 첫 번째 항목의 스타일과 레이아웃이 나머지 항목에 대해 자동으로 반복되는 항목 목록이며 내용은 다를 수 있습니다.

먼저 첫 번째 항목 내에 제목과 단락을 추가하고 실시간으로 반복되는 것을 볼 것입니다. 그 위에 Quick add → Container → Inspector → Design → Corners 로 이동하여 컨테이너 내부에 테두리와 텍스트 요소가 있는 컨테이너를 추가합니다.

이제 헤더의 내용이 있으므로 일부 스타일을 헤더에 적용할 차례입니다. 일반적인 경로로 이동하여 요소별로 스타일을 적용할 수 있지만 "테마 관리자" 를 사용하여 모든 곳에서 이러한 변경 사항을 자동으로 정의하는 글로벌 타이포그래피 및 색상 스타일을 생성할 수도 있습니다. 이것은 페이지의 범위를 넘어서므로 전체 사이트에서 스타일을 일치시키는 데 사용할 수 있습니다.

편집기의 상단 표시줄에 있는 테마 관리자 아이콘을 클릭합니다. 여기에서 사이트의 전체 텍스트 및 색상 스타일을 관리할 수 있습니다. 먼저 배경색을 #030F1D로 변경하고 작업 항목의 색상을 # #030F1D 로 변경합니다. 그런 다음 헤드라인 글꼴을 Sora로 변경하고 팔레트에 맞게 타이포그래피 색상도 조정합니다.

이 개념은 우리가 도구로 만드는 모든 웹 사이트에서 사용할 수 있는 디자인 라이브러리 에 테마를 저장할 수 있기 때문에 더욱 발전합니다. 이를 통해 팀은 설계 시스템을 쉽게 구현하고 관리할 수 있습니다. 또한 다양한 제품에서 재사용할 수 있는 일련의 테마 및 디자인 작업을 하거나 고객을 위해 일련의 제품을 유지 관리하려는 경우를 상상해 보십시오. 이렇게 하면 상당한 시간을 절약할 수 있으며 한 곳에서 관리할 수 있습니다.

다음 섹션은 제품의 쇼케이스 역할을 할 것입니다. 먼저 헤드라인, 하위 헤드라인 및 이미지 요소를 캔버스에 추가하고 스택으로 전환합니다. 그런 다음 중앙에 도킹하고 섹션 높이를 높입니다.

겹침 효과를 얻기 위해 두 개의 개별 이미지 요소에 입자를 추가하고 뒤쪽에 나타나도록 정렬합니다.

마지막으로 팔레트와 일치하도록 색상을 업데이트합니다. 배경에는 #FFECE4 를 사용하고 하위 헤드라인의 색상은 #836153 을 사용합니다.

양식 은 대부분의 웹사이트에 필수적이며 우리의 경우 우리 제품에 관심이 있는 방문자의 연락처 정보를 수집하기 위해 양식이 필요합니다.

양식을 만들려면 추가 패널로 이동하여 "연락처 및 양식"을 선택해야 합니다. 여기에서 시작점으로 사용할 수 있는 다양한 템플릿을 볼 수 있습니다. 우리 페이지의 경우 캔버스로 끌어 "연락처 양식"을 선택합니다.

"양식 설정"을 선택하여 사용자 정의할 수 있습니다. 여기에서 필드를 이름, 성, 이메일 및 회사로 편집합니다. 마지막으로 양식을 선택하고 "새 필드 추가"를 클릭한 다음 연락처 필드 목록에서 "용어 확인란"을 선택하여 두 개의 동의 확인란을 추가합니다. 이를 통해 GDPR과 같은 규정을 계속 준수할 수 있습니다.

마지막 단계에서는 웹사이트에 메뉴를 추가합니다. 이 도구를 사용하면 원활한 탐색으로 여러 페이지가 연결된 복잡한 웹 사이트를 만들 수 있지만 이 경우에는 이 특정 페이지의 섹션 사이만 탐색하면 됩니다. 이를 위해 "Anchors" 라는 기능을 사용합니다. 메뉴의 일부가 될 섹션을 살펴보고 나중에 메뉴 설정에서 사용할 앵커를 추가합니다.

요소를 선택한 다음 편집기 오른쪽에 있는 Inspector 패널 에서 "Anchor" 섹션을 클릭합니다. 그런 다음 토글을 클릭하고 앵커의 이름을 지정하기만 하면 됩니다. 탐색에 포함하려는 모든 섹션에 대해 이 작업을 반복합니다.

이제 메뉴에 추가하려면 "메뉴 관리"를 클릭한 다음 "링크 추가"를 클릭합니다. 거기에서. 앵커 옵션과 연결하려는 앵커를 선택해야 합니다.

사이트에 생명을 불어넣다

사이트를 보다 인터랙티브하고 독특하게 만드는 한 가지 방법은 요소에 애니메이션을 추가하는 것입니다. 물론 플랫폼에 애니메이션 을 추가하고 캔버스의 모든 요소나 섹션에 적용할 수도 있습니다. 이를 위해서는 애니메이션을 적용할 요소를 선택한 다음 애니메이션 아이콘을 클릭해야 합니다.

기본적으로 사용할 수 있는 사전 설정이 많이 있지만 지속 시간 및 지연과 같은 변수를 미세 조정할 수 있는 옵션도 있습니다.

우리의 경우 캔버스의 모든 헤드라인과 이미지에 미묘한 페이드 인 애니메이션 을 추가하고 싶습니다.

다양한 화면 크기에 맞게 디자인하기

데스크탑용 또는 모바일 우선용으로 만든 모형을 보는 것이 일반적이지만 실제로는 두 가지를 동시에 만들어야 합니다. 콘텐츠 블록에 대해 정의한 우선 순위는 한 화면 크기에서 다른 화면 크기로 변경해야 할 수도 있지만 올바른 요소를 올바르게 강조하고 데스크톱과 데스크톱 모두에 배치하는 올바른 방법을 선택하는 방법을 모색해야 합니다. 이동하는. 이 도구를 사용하면 개별 중단점을 설계하고 유체 및 상대적 크기 측정 단위 를 사용하여 이를 달성할 수 있습니다.

분명히 필요할 때만 중단점을 추가하는 것이 좋습니다. 따라서 작은 뷰포트에서 큰 뷰포트로 성장하는 사이트를 미리 볼 때 사용자 지정 중단점 을 추가할 수 있습니다. 분명히, 우리는 도구를 떠나지 않고 그것을 할 수 있습니다. 중단점이 필요할 때마다 중단점 옆에 있는 점 3개 메뉴를 클릭하여 중단점을 추가(또는 기존 편집)할 수 있습니다.

그 시점까지 상대 크기를 사용했다면 많은 요소의 크기가 이미 적절하게 조정될 것입니다. 나머지는 다른 중단점을 살펴보고 모든 것이 예상대로 표시되는지 확인하기 위해 디자인 재정의를 만듭니다. 변경 사항은 우리가 선택한 특정 중단점 범위에 적용되고 계단식으로 내려갑니다.

실제 세계에서 사이트 게시 및 테스트

거의 다 왔어! 이 시점에서 "게시" 버튼을 클릭하여 라이브로 전환해야 합니다. 거기에서 우리 페이지에 도메인 이름이 할당되고 모든 사람이 액세스할 수 있습니다. 무료 계층은 상단에 배너와 함께 제공되지만 도구가 제공하는 기능을 실험하기에 충분합니다. 물론 대부분의 회사에서 사용할 계층일 수 있는 유료 계층에서는 사라집니다.

그 외에도 페이지가 잘 작동합니다. 눈에 띄는 성능상의 단점은 없지만 더 심오한 스트레스 테스트를 수행해야 합니다. 이를 위해 Google의 Lighthouse 감사 를 사용하여 속도, 접근성 및 SEO 성능과 같은 특성에 대한 개요를 제공합니다.

하지만 미리 만들어진 빌딩 블록에만 의존할 필요는 없다는 점에 유의하는 것이 중요합니다. 프로젝트에 복잡한 기능을 구축해야 하는 경우에도 그렇게 할 수 있습니다. 실제로 자체 JavaScript를 추가하고, API에 연결하고 , npm 패키지를 사용하고, 웹 모듈과의 클라이언트-서버 상호 작용을 자동화할 수 있습니다. 이러한 기능은 Velo 라는 통합 개발 플랫폼을 통해 사용할 수 있습니다.

그러나 이 기사의 범위에서는 코드를 다시 작성하거나 수정하지 않고 몇 가지 요소를 결합했지만 결과는 일반적으로 웹 사이트 빌더에서 기대하는 것과 비교할 때 상당히 견고합니다. 전반적으로 성능과 접근성, 특히 데스크톱에서 점수가 상당히 높지만 모바일 장치에 맞게 사이트를 더 최적화해야 할 수도 있습니다.

마무리

웹 빌더의 경우 많은 접근성 및 성능 문제, 부피가 크고 지저분한 마크업, 지나치게 구체적인 CSS 및 느린 JavaScript와 함께 결과에 실망하는 것이 드문 일이 아닙니다. Editor X에서 웹사이트 생성 프로세스를 살펴보면 좋은 웹사이트를 구축하기 위한 간단한 환경을 제공하는 동시에 협업 기능, 반응형 테스트 및 상당한 작업이 필요할 수 있는 일부 구성 요소를 포함하는 플랫폼으로 보입니다. 프로토타입을 만들거나 설정하는 데 약간의 시간이 필요합니다.

구성 요소를 재사용할 계획인 에이전시 또는 조직과 협력하거나 다양한 클라이언트를 위해 사이트를 빠르게 설정하고 유지 관리해야 하는 경우 Editor X는 고려할 가치가 있는 흥미로운 옵션이 될 수 있습니다. 개인 및 비즈니스 계획, 온라인 지불 지원 , 전자 상거래, 도메인 및 스토리지, 온라인 예약, 티켓 및 이벤트 관리, 비디오 수익 창출과 함께 제공됩니다. 빠른 프로토타입과 광범위한 클라이언트 작업 모두에 필요한 것을 찾을 가능성이 높습니다.

무료로 Editor X 계정을 만들고 문자열을 첨부하지 않고 모든 기능을 테스트할 수 있습니다.