[Design System] SIDE 로드맵

[froggy1014]

사이프 디자인 시스템 로드맵

지금까지의 여정

기초 컴포넌트 구성

• https://github.com/orgs/sipe-team/projects/4

문서화

• 스토리북

• Storybook Branding #96

• 공식문서 ( 아직 배포되지 않았고, 컨텐츠 또한 없음 )

• https://github.com/sipe-team/side/pull/119/files

테마, 토큰

• [FEATURE] theme 기능 제공 #139
• feat(theme): implement theme provider #156

---

앞으로의 방향

디자인 시스템 ( 양정민 )

• 토큰 정의 ( primary, space, font-weight, responsive ...etc )
• 필수 컴포넌트 정의 (?)
• feat(theme): implement theme provider #156

개인적으로 임의로 토큰을 정의했으나, 디자이너와의 의논 필요

Module -> Vanilla Extract 마이그레이션

• [FEATURE] Refactor CSS Modules to use Vanilla Extract #137

추가적으로 컴포넌트 만드는것은 상관없으나 현재 만들어진 컴포넌트를 마이그레이션하는게 최우선
더 나은 DX와 완전한 타입 안정성, 그리고 쉬운 테마적용 및 디자인 시스템 유틸

홈페이지 Theme 적용

개인적으로 1,2,3,4기 primary와 secondary만 바꾸면 색상이 변경될 수 있게끔 구현하고 싶음

---

백로그

figma codegen 혹은 storybook 과 Figma 연결

• [FEATURE] 피그마 코드젠 기능 제공 #140

접근성 ( a11y )

• [FEATURE] a11y #142

react19 대응

• [FEATURE] react19 버전 대응 #138

테스트 브라이저 모드

• [FEATURE] 테스트를 browser mode로 실행하도록 변경 #141

biome v2 migration ( eslint 걷어내기 )

• feat(biome): update biome v2 to unify lint, formatting tool #176

---

최종 목표

• SIPE 공식 홈페이지에 디자인 시스템 전면 적용
• SIPE 기술 블로그
• Storybook 고도화
• 공식문서 고도화
• NPM 공식 배포 ( 현재 GitHub Package Registry )

[kimdaeyeob]

Your roadmap documentation is well-structured!

I'm also planning to participate in the adaptation of the design system components developed at si.de to the SIPE homepage
so, I’ll start by implementing the missing components, beginning with the accordion.

Did you have a plan for how to work with the designer during this process?

[froggy1014]

Your roadmap documentation is well-structured!

I'm also planning to participate in the adaptation of the design system components developed at si.de to the SIPE homepage so, I’ll start by implementing the missing components, beginning with the accordion.

Did you have a plan for how to work with the designer during this process?

@kimdaeyeobbb

We're having a meeting on Wednesday to reorganize priorities and redistribute all the issues. The updated assignments will be shared through the issue, and I'll reach out to you personally as well

[froggy1014]

두번째 회의

현재까지 달성된 것

• Switch 마이그레이션 @dev-hobin

• Tooltip 마이그레이션 @synuns

• Skeleton 마이그레이션 @jiji-hoon96

• Input 마이그레이션 @froggy1014

• Grid 마이그레이션 @froggy1014

• Biome Stable Version 적용 @froggy1014

• Storybook Netlify 배포 @jiji-hoon96

• SIDE Foundation Figma

SIDE Foundation 감사합니다. 🙇‍♂️
하지만 @haedawn 도 처음 작업이기도 하고 아직 부족한점이 많습니다. 많은 피드백 부탁드립니다.

---

각 컴포넌트마다 상태별 스타일이 없는 경우가 있는 것 같습니다.

컴포넌트 variant에 일관성이 부족한것 같습니다.

ThemeProvider에 들어갈 토큰 동기화

• Typhography
• Colors ( Primary, Secondary, Semantic, Outline, Text etc.. )
• BreakPoint ( 근데 숫자로 표기해주었으면.. )
• Spacing

---

액션아이템

각자 맡은 컴포넌트 관련해서 토큰과 동기화하고 디자이너와 협업 및 PR

<ThemeProvider theme="2nd">
  <Button color="primary">버튼</Button>
</ThemeProvider>

• 토큰 동기화 @froggy1014

• Icon

• Button @froggy1014

• Card @noahluftyang

• Image Card

• Navigation

• Chip @jiji-hoon96

• Label Blobk ( 조합가능성 )

• Accordion @kimdaeyeobbb

• Badge @jiji-hoon96

• Avatar @kimdaeyeobbb

v1 배포

SIPE TEAM 웹사이트

• Asset Image
• Font 적용
• Logo ( favicon, README etc ... )