NAVER FE Devtalk

1. ZUIX
디자인 시스템에 직방!

2. About ZUIX
ZUIX Universe
ZUIX 운영 프로세스
ZUIX TechLog
On the Next Level
Index

3. About ZUIX

5. 디자인시스템을 만들게된 이유
!
아니.. 도대체..
똑같은 디자인인데 코드가 다르게 만들어져 있지?
아니.. 도대체..
똑같은 인풋인데 왜 산출물이 다르지?
어떤게 최종인거야?!
!
아니.. 도대체..
이름만 다른 똑같은 소스가 몇개나 있는거야..
!
‘아니.. 도대체..’의 향연

6. !
CTO실 소속 ZUIX파트
"
서비스운영디자인팀
ZUIX TF
디자인시스템을 만들게된 이유

7. ZUIX Universe

8. Welcome to ZUIX Universe!
파트너스
ZED
우리집
IO-ADMIN
CEO
임대마스터

9. 우리는 반응형이 기본!
Responsive

10. 하나의 스크린 코드라면 Theme Provider로!
Theme
Provider

11. Stack구조로, 빠르게 빌드하고 수정하자!

12. ZUIX 운영 프로세스

13. 기획 사항 검토
및 논의
디자인 시안
제작
제작된 시안을
ZUIX로 워싱
컴포넌트 논의 및
가이드라인 리뷰
컴포넌트
수정 및 제작
디자인 검수 인프라 &
스토리북 QA
CI/CD System
배포 진행
서비스 오픈까지
Follow up
- 기존 컴포넌트 사용 및
신규 컴포넌트 제작
여부 검토
- ZUIX TF가 모여
디자인 정의 & 개발코드
최종 정의
- 수정사항 및 신규
가이드라인 전달 & 리뷰
- 모든 디바이스에서
컴포넌트가 포함된 실제
스크린 체크
- 이슈 최종 확인
버전업하여 배포
- 기획 정의에 맞게
디자인 시안 진행
하나의 컴포넌트 제작을 위해서
Key Point

14. ZUIX TechLog

15. 개발단계
검증단계
배포단계
운영단계

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

20. 개발 단계에서의 TechLog
Package.json
Mobx

21. 개발 단계에서의 TechLog
Package.json
Babel/Rollup

22. 개발 단계에서의 TechLog
Storybook
Testing Tool
(Playground)
개발 문서
(Definition)
Render Code 제공
(Copy&Paste)

23. 개발단계
검증단계
배포단계
운영단계

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 소스 공개!

32. 개발단계
검증단계
배포단계
운영단계

33. 코드리뷰 Master
머지
Azure Pipeline
(ci/cd 트리거링)
Release It!
(배포)
Verdaccio
(npm 모듈 publish)
지정한 스탭대로 빌드/배포 npm 모듈 배포
배포 단계에서의 TechLog

34. 개발단계
검증단계
배포단계
운영단계

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. 감사합니다