패턴 (Patterns)은 Merge UI 요소들을 이용해 새 컴포넌트를 생성하여 라이브러리에 추가할 수 있는 Merge 전용 기능입니다. 디자인 라이브러리를 확장하는 것은 쉬운 일이 아니며 디자인팀과 개발팀 모두의 시간과 노력이 필요합니다. 패턴 (Patterns)를 사용하면 일부 개발이 필요한 단계를 생략하여 디자인 라이브러리에 새 컴포넌트나 기본 컴포넌트의 변형을 추가할 수 있습니다. 이제 Merge 라이브러리의 새로운 섹션에 새 컴포넌트를 추가할 수 있게 되었습니다.

패턴을 사용하면 다음을 수행할 수 있습니다.

• 컴포넌트 변형 (variants)을 재사용할 수 였습니다. 이를 통해, 동일한 컴포넌트에 대해 동일한 속성을 설정하는 시간 절약할 수 있습니다.
• 원래의 디자인 라이브러리에 없는 경우에도 고급 컴포넌트를 만들어 디자인에 활용할 수 있습니다.
• 디자인시스템에 새 컴포넌트를 추가하는게 간소화됩니다. Merge와 표준 요소를 결합하여 패턴 라이브러리에 새로운 컴포넌트로 저장하여 개발자에게 전달합니다.

<aside> 💡 비고 여전히 각각의 Merge 요소레벨의 코드를 볼 수 있지만, 현재로서는 새 컴포넌트의 전체 또는 그룹에 대한 코드를 표시하지는 못합니다.

</aside>

유효성

패턴은 디자인 라이브러리의 새 탭으로 제공됩니다. 새 섹션은 모든 Merge 플랜에 가입하시면 사용할 수 있으며 모든 유형의 통합(Git, Storybook 및 NPM)에서 작동합니다. 트라이얼 버전에서도 Git통합된 MUI 라이브러리 및 Storybook통합된 Material UI 라이브러리를 통해 패턴을 테스트 해 볼 수 있습니다.

<aside> 💡 비고 현재로선 Storybook 통합을 제외한 모든 Merge 통합에서 네스트 (nest) 기능을 활용해 패턴을 생성할 수 있습니다.

</aside>

패턴을 어떻게 활용할까요?

다음과 같은 경우 패턴이 매우 유용합니다.

1. 고급 코드 컴포넌트로 디자인하고 싶지만 가지고계신 UI 라이브러리는 코드에 필요한 속성이 없는 기본 요소밖에 없어 한계가 존재합니다.
2. 일부 복잡한 컴포넌트를 UXPin Merge로 가져오는 데 어려움을 겪습니다.
3. 종종 동일한 구성 요소에 대해 동일한 속성을 반복적으로 설정해야 합니다.
4. 새로운 코드 컴포넌트를 만들고 개발하는 프로세스가 불완전합니다.
5. Storybook 요소를 그룹화하여 더 큰 컴포넌트로 저장하고 싶습니다.

https://uxpincommunity.cdn.prismic.io/uxpincommunity/560fe18e-d201-4beb-b77e-d18225519dcd_Docs_Patterns_HowToUsePatterns+(2).mp4

패턴 (Patterns) 사용 방법