-
Notifications
You must be signed in to change notification settings - Fork 3
사이프 디자인 시스템 미팅로그
Shinwon Jang edited this page Nov 24, 2024
·
8 revisions
주차별 미팅로그입니다.
참고하기 좋은 라이브러리들의 목록을 정리해 보았습니다.
-
vibe
- 프로젝트의 구조가 복잡하지 않고 코드가 간결하여 읽기 좋았습니다.
- shadcn/ui
- 요즘 인기 있는 라이브러리입니다.
- headless한 형태가 컴포넌트의 확장성을 보장해서 좋았습니다.
- tailwind에 대한 의존성이 있는 부분은 조금 아쉬웠어요.
- 우아한 공방
- 컴포넌트의 레이어를 분리하여 구현한 점이 인상적이었습니다.
- radix-ui
- headless 컴포넌트의 시초격입니다.
- 다형성을 가능하게 만들어주는 Slot 컴포넌트가 눈여겨 볼 만하다고 생각해요.
- 아틀라시안 디자인 컴포넌트
- 다른 것 보다 문서화가 잘 되어있어서 좋았습니다.
- MUI
- 지원하는 컴포넌트가 많아서 좋지만, styled-components의 의존성이 있어서 사용하는 입장에서 스타일 이슈를 해결하기 어려웠어요.
-
kuma UI
- css-in-js를 사용하면서도 zero runtime인 부분이 흥미로웠어요.
- SCSS, SASS, PostCSS, tailwind, css-in-js 등 많은 옵션이 있어요.
- 아직 누구나 납득할만한 정답이 없기 때문에, 최대한 적은 비용으로 사용이 가능한 css module 방식을 적용해보고 이후에 리팩토링을 진행해보아요.
- sds, sip-ui, synergy, ins8(인사이트), 초록(chorok) 등등
- 이름도 차차 결정해보기로..
- 1차 미션의 끝 그림은 아마 사이프 홈페이지의 아토믹한 요소들을 디자인 시스템으로 전환하는 것으로 잡아보기로 했어요.
- 가능하다면 2주차까지 미션을 연장하여 호흡을 길게 가져가보려고 해요.
- 컴포넌트의 개발 과정은
백로그에 존재하는 컴포넌트 선택-기능 명세 작성-테스트 시나리오 작성-컴포넌트 코드 구현-스토리 작성 혹은 유즈케이스를 보여주는 샘플 코드 구현의 순서를 따르는 것을 권장해요. - 가능하다면 주당 1개 이상의 컴포넌트를 구현하는걸 목표로 잡아보았으면 좋겠어요.
- 주 단위로 목표 진행 상황을 공유하되, 1주는 슬랙에 쓰레드로 공유, 1주는 온/오프라인 미팅으로 논의가 필요한 안건을 이야기 나누는 시간으로 정했어요.
- mui와 radix-ui의 사용 방식이 다른 것이 흥미로웠어요.
- mui는 단순히 Skeleton 컴포넌트를 보여주는 용도인 반면, radix는 실제 렌더링 되어야 할 컴포넌트 자체를 스켈레톤으로 표현하고자 하는 목적이 있었어요.
https://mui.com/material-ui/react-skeleton/
https://www.radix-ui.com/themes/docs/components/skeleton
- 뱃지 기능을 정의하다보니 컬러 같은 디자인 토큰들을 같이 정하면 좋겠단 생각이 들었어요.
- 테스트 코드 작성 & 기능 구현을 진행 중이고, 디테일한 부분을 잡아나가고 있어요.
- 컴포넌트 테스트가 처음이라 진도가 생각보다 더딘 것 같아요.
- 역시 테스트 코드는 익숙하지 않아요.
- 디자인 토큰의 필요성을 저도 느꼈어요.
- 인터렉션이 있는 컴포넌트라서 난이도가 있네요. 다른 컴포넌트로 방향을 선회해볼까 고민이에요.
개발 프로세스
- PR 병합: 1명 approve로 충분
- 알림 관리: 슬랙 노티 채널 생성 예정
코드 컨벤션
- Props: 전체 bypass 방식 채택
- Ref: forwardRef 사용 확정
- 패키지 네이밍: kebab-case 사용
디자인 시스템
- 색상: chakra-ui 기반, 직관적 네이밍
- 반응형: PC/Mobile 두 가지로 구분
- 글로벌 스타일: 별도 패키지로 관리 예정
- CodeRabit, Chromatic, CodeCov 설치 완료
-
히딩크 모드도입: 팀원 간 반말 사용 - PR 작성도 반말로 통일 (의현 : 존대는 비효율적)
- 존댓말 사용 시 페널티 (추가 컴포넌트 구현)
- 컴포넌트 명세 작성 및 구현 실습
- 신원 : 템플릿 제너레이터 관련 논의