팀 및 기관을 위한 Oxygen Builder: 협업 방법

Oxygen Builder는 믿을 수 없을 정도로 강력한 도구이지만 웹 사이트를 만드는 측면에서 팀 협업과 관련하여 상황이 약간 어려울 수 있습니다. 공식적으로 페이지 빌더 팀은 한 번에 한 명의 사용자만 편집할 것을 강력히 권장합니다. 불행히도, 주요 프로젝트가 있는 에이전시의 경우 이는 불가능하며 일부는 이 도구를 사용하는 것을 두려워할 수 있습니다.

우리의 의견으로는 이러한 단점보다 장점이 훨씬 더 많고 이러한 제한 사항을 해결할 수 있는 몇 가지 방법을 찾았습니다. 이 기사에서는 Oxygen Builder로 웹사이트를 만들 때 우리 팀이 어떻게 협업하는지 논의할 것입니다. 지난 1년 동안 우리는 모든 대행사 웹사이트와 프로젝트의 100%를 Oxygen으로 만드는 것으로 전환했으며, 이를 수행하는 가장 좋은 방법에 대해 상당히 이해하고 있습니다.

2022년 4월 업데이트: 이제 Oxygen Builder에서 다중 사용자 편집 문제를 해결하는 DPlugins의 Collaboration Plugin을 사용합니다. 여기에서 리뷰를 읽어보세요.

먼저 빌더의 한계를 이해하십시오.

Oxygen Builder를 사용한 공동 작업을 고려하기 전에 제한 사항과 여러 사용자가 Oxygen으로 웹 사이트를 효과적으로 만드는 것이 정확히 왜 어려운지 이해하는 것이 중요합니다.

먼저 Oxygen 팀에서 게시한 이 기사를 읽어야 합니다. 이 기사에는 Edit Locking이 존재하는 정확한 이유(한 사용자만 한 번에 편집할 수 있도록 하는 메커니즘)가 설명되어 있습니다. 중요한 내용은 다음과 같습니다.

“Oxygen이 전역 스타일, 클래스 및 설정을 저장하는 방식 때문에 Oxygen을 사용한 다중 사용자 또는 다중 탭 편집은 권장되지 않습니다.

한 탭이 다른 탭보다 오래된 데이터를 저장하여 새 변경 사항을 덮어쓰는 문제를 피하기 위해 Oxygen으로 작업할 때 단일 탭을 사용하는 것이 좋습니다. 두 명 이상의 사용자가 동시에 Oxygen에서 작업할 때도 동일한 시나리오가 발생할 수 있습니다.”

기본적으로 모든 것이 중앙 위치에 저장됩니다. 탭은 서로 통신하지 않으므로 한 개발자가 전역 스타일 시트에 사용자 정의 클래스 또는 사용자 정의 CSS를 추가하고 다른 개발자가 추가하지 않으면 첫 번째 개발자가 저장하더라도 두 번째 개발자가 나중에 저장하면 클래스 및 스타일 덮어쓰여지고 손실됩니다. 협업에 좋지 않습니다.

팀으로 작업해야 하는 경우 이것이 작동하는 이유를 이해하는 것이 중요하므로 이 문제를 가장 잘 피할 수 있습니다. 다시 한 번, 1) 사용자 정의 클래스가 추가되고 2) 전역 스타일시트에 CSS가 추가됩니다.

페이지/템플릿 저장에 한 명의 사용자만 있는 한 구조가 저장될 뿐만 아니라 요소의 개별 ID에 대해 설정된 스타일도 괜찮습니다. 그러나 클래스를 추가하면(매우 시간을 절약할 수 있기 때문에 중요) 클래스를 덮어쓸 수 있습니다.

한 번에 모두 편집할 필요가 없다면 하지 마십시오. 그러나 이것이 회사나 프로젝트에 필수적인 경우 아래에서 설명하는 몇 가지 기술을 시도해 보십시오.

어쨌든 편집(또는 비활성화)

가장 먼저 주목해야 할 것은 기술적으로 우리가 하는 일인 Edit Locking을 재정의할 수 있다는 것입니다. 켤 설정이 없으며 편집 링크를 클릭하기만 하면 됩니다. 이것은 우리 팀 전체가 기술적으로 한 번에 빌더를 초기화할 수 있음을 의미하지만 우리가 수행하는 방법에 대해 더 읽어보는 것을 강력히 고려할 것입니다. 여기서 덮어쓰기 문제를 고려해야 합니다.

주목해야 할 멋진 점은 Hydrogen Pack(Oxygen의 최고 애드온 중 하나이며 매일 사용)을 사용하면 "편집 잠금" 기능을 끄고 "어쨌든 편집"을 모두 숨길 수 있다는 것입니다. 이것은 미학적으로 보기에 좋지만 워크플로에 실제로 영향을 미치지는 않습니다.

프레임워크 사용

프레임워크는 Oxygen에서 웹사이트를 디자인하고 구축하는 전 과정 에서 고려해야 하는 사고방식입니다. 프레임워크는 일관된 방식으로 웹사이트를 구성하는 데 도움이 되도록 함께 작동하는 CSS 클래스 모음입니다. 프레임워크는 웹 디자인 산업 전반에 걸쳐 널리 퍼져 있습니다. 예를 들어 Bootstrap, Tailwind 등이 있습니다.

최근 Swiss Knife 업데이트로 빌더에 클래스를 대량 업로드하고, 프레임워크 스타일시트를 호출하고, 클래스 목록이 있는 거의 모든 것을 사용할 수 있습니다.

우리는 Core CSS라는 Oxygen 특정 프레임워크를 사용합니다. 이것은 프레임워크 때문에 우리가 가장 좋아하는 플러그인 중 하나인 OxyNinja Core에 포함되어 있습니다. 웹 사이트에서 판매 제안은 다음과 같습니다.

“Core 유틸리티 클래스와 Oxygen Builder를 결합하여 사이트를 완벽하게 일관성 있게 만드는 것은 결코 쉬운 일이 아닙니다. CSS 그리드 열, 카드, 타이포그래피, 크기 및 간격, 색상 등이 이미 설정되어 있습니다!”

프레임워크를 사용하면 새로운 CSS 클래스를 추가할 필요 없이 글꼴 크기, 패딩 등을 쉽게 적용할 수 있으며 중앙 디지털 스타일 가이드 없이도 일관성을 유지할 수 있습니다. 클래스는 개발 초기부터 사이트에 설치되기 때문에 새 클래스를 추가할 필요가 없습니다. 즉, 덮어쓰는 것이 없습니다.

빌더 외부에서 CSS 작성

대행사로서 우리는 CSS를 사용하여 독특한 상호 작용과 호버 효과를 만드는 것을 좋아합니다. 따라서 우리는 일반적으로 각 개발자가 스스로 작성하는 수많은 사용자 정의 CSS를 가지고 있습니다. 웹 사이트에서 한 번에 한 명의 사용자만 사용하는 경우 전역 스타일 시트에 추가하는 것이 좋지만 일반적으로 여러 개발자가 작업하므로 덮어쓰기 문제를 피할 방법이 필요합니다.

이를 위해 Advanced Scripts라는 타사 플러그인에서 CSS를 작성하기만 하면 됩니다. 이것은 수소 팩 뒤에 있는 동일한 개발자에 의해 생성되었으며 우리가 가장 좋아하는 플러그인 중 하나입니다. 각 개발자는 CSS를 작성하는 자신만의 스타일시트를 가지고 있습니다. 저장하면 스타일이 웹 사이트에 전체적으로 적용됩니다. 프로젝트가 끝나면 모든 스타일이 하나의 기본 스타일시트로 결합됩니다.

끊임없이 소통하라

건물 내의 개별 요소에 특정 CSS 클래스를 추가해야 하는 경우가 많습니다. 팀으로 작업할 때 내용을 덮어쓰는 문제로 인해 위험합니다. 올바른 작업을 수행하고 작업을 느슨하게 하지 않기 위해 우리는 모두 slack을 사용하여 협력합니다. 하루 중 한 시점에 필요한 모든 스타일의 단일 개발자가 있습니까? 이것은 아마도 이 빌더의 가장 큰 성가심일 수 있지만 올바르게 관리하면 모든 데이터가 저장됩니다.

클래스와 관련된 모든 CSS는 스타일 시트에 있으므로 클래스를 추가하기만 하면 그에 따라 스타일이 적용됩니다.

우리는 또한 여러 개념을 실험하고 있습니다. 예를 들어 중앙 CSS 스타일시트가 포함된 Github 리포지토리를 만들고 VS Code의 Live Share 기능을 사용하여 모두가 함께 스타일을 작성할 수 있습니다. 그런 다음 고급 스크립트와 정적을 사용하여 웹 사이트에 스타일을 전달할 수 있습니다. 또한 최근 Swiss Knife와 함께 제공되는 일괄 수업 업로드를 채택했습니다.

Oxygen에서 더 나은 협업 워크플로를 만들기 위해 다른 방식으로 작업을 수행합니까? 여기 댓글로 알려주세요!