https://uxpincommunity.cdn.prismic.io/uxpincommunity/ff59121a-f09e-4202-9fd1-24dd3fe03f7d_UXPin_Storybook_integration_1920x1080.mp4

Storybook 컴포넌트로 더 빠르게 디자인합니다. 자신 또는 게시된 Storybook을 UXPin 계정에 연결하면 Merge 기술의 힘을 느낄 수 있습니다. 몇 분 안에 코드를 사용하여 디자인할 수 있습니다.

통합 기능을 사용하여 Storybook에서 완전한 인터랙티브 UI코드 기반 컴포넌트를 가져와 UXPin에서 디자인에 사용할 수 있습니다. 개발자와 동일한 컴포넌트를 사용하여 디자인 및 개발의 모든 표준과 일치하는 프로토타입을 구축할 수 있습니다. 코드를 작성하는 방법을 모르거나 어떤 프레임워크를 사용하든 상관 없습니다. Storybook의 모든 프레임워크를 지원합니다. (지원되는 프레임워크의 상세리스트는 이 문서를 참조하세요.)

Storybook의 통합은 다른 Merge 기술의 Git 저장소를 통한 통합의 대체합니다. 둘 다 미리 구축된 코드 컴포넌트를 사용하여 디자인할 수 있지만, 주요 차이점은 UXPin에 컴포넌트를 추가하는 방법입니다.

<aside> 💡 비고 이 문서에서는 Storybook 라이브러리를 만드는 방법이 아니라 이미 있는 라이브러리를 UXPin에 통합하는 방법을 소개합니다. 좀 더 자세히 설명하면 Storybook은 UI 컴포넌트의 개발 환경입니다. 컴포넌트를 라이브러리로 탐색하고, 인터랙션을 추가하고, 다양한 상태로 표시하고, 안전한 환경에서 테스트할 수 있습니다. Storybook에 대한 자세한 내용은 공식 Storybook 튜토리얼을 참조하세요.

</aside>

시작하기 전에

우선 두 가지가 필요합니다.

  1. UXPin의 Merge 기술에 대한 액세스 권한이 필요합니다. 이 링크를 통한 상담예약을 하시거나, UXPin 홈페이나 앱 오른쪽 아래 있는 챗, 혹은 [email protected]을 통해 요청해 주세요.
  2. Storybook URL. Open 또는 Public Storybook을 사용하는 경우 바로 통합을 진행할 수 있습니다. Private Storybook을 이용하실 경우는 위의 상담링크, 챗, 또는 [email protected]으로 문의하십시오.

어떻게 통합합니까?

Public 라이브러리의 경우:

  1. UXPin 대시보드에서 새 또는 기존 프로토타입을 엽니다.

https://uxpincommunity.cdn.prismic.io/uxpincommunity/26d7757c-5060-4a45-92dd-fbe6c9fe7475_Docs_Storybook_01.mp4

  1. 왼쪽 하단의 Design System Libraries 메뉴 탭을 선택하고 +New Library를 클릭합니다.

https://uxpincommunity.cdn.prismic.io/uxpincommunity/244a1dae-df1b-442a-b6d7-b783d7001bf4_Docs_Storybook_02-update.mp4

  1. Import Components from Storybook를 선택합니다.