디자인 시스템에 직방 ZUIX
•
3 likes•1,490 views
ZUIX is a design system created by Zigbang's CTO team to standardize design across all of Zigbang's services. It uses React Native for responsive, multi-platform components and includes tools like Storybook for development and a design review infrastructure for validation. The deployment process involves code reviews, CI/CD pipelines, and publishing to a npm registry. Training and documentation is provided through tools like Google Classroom and Notion. The team aims to further develop ZUIX by improving the design review tools, adding end-to-end testing, and analyzing component usage. The goal is to solve Zigbang's unique challenges through an agile, collaborative approach between designers and developers.
Report
Share
디자인 시스템에 직방 ZUIX
- 2. About ZUIX ZUIX Universe ZUIX 운영 프로세스 ZUIX TechLog On the Next Level Index
- 3. About ZUIX
- 5. 디자인시스템을 만들게된 이유 ! 아니.. 도대체.. 똑같은 디자인인데 코드가 다르게 만들어져 있지? 아니.. 도대체.. 똑같은 인풋인데 왜 산출물이 다르지? 어떤게 최종인거야?! ! 아니.. 도대체.. 이름만 다른 똑같은 소스가 몇개나 있는거야.. ! ‘아니.. 도대체..’의 향연
- 6. ! CTO실 소속 ZUIX파트 " 서비스운영디자인팀 ZUIX TF 디자인시스템을 만들게된 이유
- 8. Welcome to ZUIX Universe! 파트너스 ZED 우리집 IO-ADMIN CEO 임대마스터
- 10. 하나의 스크린 코드라면 Theme Provider로! Theme Provider
- 11. Stack구조로, 빠르게 빌드하고 수정하자!
- 12. ZUIX 운영 프로세스
- 13. 기획 사항 검토 및 논의 디자인 시안 제작 제작된 시안을 ZUIX로 워싱 컴포넌트 논의 및 가이드라인 리뷰 컴포넌트 수정 및 제작 디자인 검수 인프라 & 스토리북 QA CI/CD System 배포 진행 서비스 오픈까지 Follow up - 기존 컴포넌트 사용 및 신규 컴포넌트 제작 여부 검토 - ZUIX TF가 모여 디자인 정의 & 개발코드 최종 정의 - 수정사항 및 신규 가이드라인 전달 & 리뷰 - 모든 디바이스에서 컴포넌트가 포함된 실제 스크린 체크 - 이슈 최종 확인 버전업하여 배포 - 기획 정의에 맞게 디자인 시안 진행 하나의 컴포넌트 제작을 위해서 Key Point
- 14. ZUIX TechLog
- 16. 개발 단계에서의 TechLog One Code, Multi Use ! React Native (RN)
- 17. 개발 단계에서의 TechLog Using React Native
- 18. 개발 단계에서의 TechLog React Native의 장단점 RN개발자는 하나의 코드로 iPhone, Android, Web에 대한 커버리지를 확보 IOS IOS IOS IOS AOS AOS AOS AOS Native 개발 시 RN AOS Web IOS RN AOS Web IOS React Native 활용
- 19. 개발 단계에서의 TechLog Package.json react/react-native libraries
- 22. 개발 단계에서의 TechLog Storybook Testing Tool (Playground) 개발 문서 (Definition) Render Code 제공 (Copy&Paste)
- 24. 검증 단계에서의 TechLog 🤔 Android, iPhone, Pad, Web까지 무수히 많은 Viewport 대응.. 어쩌지?
- 25. 검증 단계에서의 TechLog 💁 💡 그래! 결심했어! 우리가 만들어보는거야!
- 26. 검증 단계에서의 TechLog
- 27. 검증 단계에서의 TechLog 디자인 검수 인프라 DIFF
- 28. 검증 단계에서의 TechLog 디자인 검수 인프라 Service Category 검수 Diff 개수 노출
- 29. 검증 단계에서의 TechLog 디자인 검수 인프라 Deivce 선택
- 30. 검증 단계에서의 TechLog 디자인 검수 인프라 시연영상
- 31. 검증 단계에서의 TechLog 디자인 검수 인프라 👉 https://github.com/zigbang/honeyfarm 👈 🙇 Honeyfarm 소스 공개!
- 33. 코드리뷰 Master 머지 Azure Pipeline (ci/cd 트리거링) Release It! (배포) Verdaccio (npm 모듈 publish) 지정한 스탭대로 빌드/배포 npm 모듈 배포 배포 단계에서의 TechLog
- 35. 앱 배포 후, 클래스 룸을 통해 ZUIX의 사용방법과 제작 방법등을 확인할 수 있음 교육 | Google Classroom 컨플루언스용으로 사용 (ZUIX 메인테이너 가이드) 정의 | Notion 운영 단계에서의 TechLog 대기, 진행 중, 백로그, 배포 등 칸반보드용으로 사용하여 태스크 관리 함 태스크 관리 | Clickup
- 36. On the Next Level
- 37. 헤비한 용량 세부 모듈 Export로 Diet ! 부족한 검수환경 디자인 검수 인프라 고도화 서비스단 테스트 부재 E2E Test (End to End) 컴포넌트 사용량 파악 불가 컴포넌트 수치화 Non-Zuix Zero 광야로 가기 위한 목표
- 38. 광야로 가기 위한 목표 헤비한 용량 세부 모듈 Export로 Diet ! 부족한 검수환경 디자인 검수 인프라 고도화 서비스단 테스트 부재 E2E Test (End to End) 컴포넌트 사용량 파악 불가 컴포넌트 수치화 Non-Zuix Zero ! 우리의 자랑스런 활약을 소스 오픈화를 통해 공개하고 싶다
- 39. ZUIX가 존재하는 이유는 직방의 모든 서비스에 디자인 시스템화를 하기 위함이다
- 40. 발표를 마무리하며 디자이너와의 원활한 커뮤니케이션 유연한 사고방식과 대처 개발자 주도적인 환경 ZUIX TF가 열심히 달릴 수 있는 원동력
- 41. 발표를 마무리하며 🏃 ZUIX 는 수많은 문제의 해결 방법 중 하나입니다 오직 직방만의 방식으로 해결하기 위해 오늘도 ZUIX 는 열심히 달립니다 👉 https://career.zigbang.com/ 👈
- 42. 감사합니다