본문 바로가기
프로젝트

오픈소스 디자인 시스템 만들기 -3-

by ISA(류) 2022. 11. 12.

1. 디자인 툴로 emotion과 styled 방식의 css in js를 선택했으나 사실 굳이 두가지 방식을 고집할 필요성을 검토 해본 결과 찾지 못했고 오히려 오픈소스로 여러 환경에서 적용하려면 import css 방식으로 베이직하게 하는게 더 효율적이라는 것을 느꼈다.

사실 순수하게 개인이 자주 쓰던 기술이라는 이유로 별 고민없이 선택한 기술 스택에 가깝다.

 

그래서 먼저 디자인 시스템 1.0버전이 완성시키고 추후 걷어내기로 결정. 일단 지금은 그냥 css in js를 이용해서 편하게 만들어 보기로 했다.

 

2. 디자인 요소를 시맨틱하게 컨셉을 잡은 것은 좋으나.. 어느 도메인을 메인으로 타겟팅 할 건지 생각을 안해서 그런지 작업상 장애요소가 상당히 많음. 디자이너가 아니다 보니 더욱 그런듯. 큰틀에서 해당 디자인 시스템이 어느 도메인을 담당할건지가 없다 보니 컨셉을 기반해서 쌓아올리는 방향성이 명확하지 않다.

 

디자인을 공식화하기 위한 시도이지만 정작 무엇을 위해서 라는게 없기 때문에 시스템이 전달하고자 하는 가치를 찾기 힘들다. 특정 분야에 따라 도메인에 대응하는 요소들을 설계하고 만들거나 디테일을 더해야 할때 어려움. 그리고 기본적으로 보기 이쁜이라는 것을 추구하는 것도 아니라서 더욱 난해한 것같다.

 

3. 컨셉을 이용한 테마 시스템을 가는 것은 나쁘지 않음. 그 보다 상위의 다크모드 같은 부분을 지원하는 것도 고려해봤다.

사실 컴포넌트 설계나 개발은 그렇게 어렵지 않지만.. 테마 시스템이나 모드 시스템 등 말 그대로 무엇을 디자인 할지 내부 시스템을 개발하는 부분에서 고민할게 많다.

 

음양을 기본 베이스로 깔고 오행으로 포인트를 주는 방식의 방향성을 고수 테마 시스템의 경우 컴포넌트 단위로 제공하기로 하며 내부에서 패턴을 정리해서 시스템으로 정리 할 필요가 있다고 느낌. 모드 시스템의 경우 contexts로 기본적인 다크 라이트 모드만 제공해주기로 함 보통 테마 시스템에서 라이트, 다크 등을 지원하는게 일반적이지만 디자인 시스템 취지나 컨셉상 오행이라는 테마가 이미 존재하기에 그 상위 레이어를 설계 할 필요가 있어서 따로 모드라는 레이어를 추가함.

 

4. 테스트에 대해서는 생각이 많다. 사실 이미 혼자서 디자인 시스템을 구축한다는게 1.0 버전이라고 해도 작업량이 너무 방대하다. 공식사이트 및 공식문서, 컴포넌트, 디자인 토큰 등등 에만 리소스를 투자해도 퀄리티를 뽑아내는데 상당한 시간이 들어갈 예정이다.

 

기본적으로 디자인 시스템을 개발하다보니 스토리북은 적용하기로 했지만 따로 테스트 코드를 작성할지는 모르겠다. 솔직히 UI 즉 보이는 것을 만드는데 테스트할 내용이 있을까? 라는 생각이 들기도하고 추후에 캘린더 같은 컴포넌트들에서는 필요하겠지만 일단 1.0버전 자체는 테스트 부분에 대해서는 따로 추가적인 요소가 필요성이 높진 않다고 판단함. 스냅샷 테스트의 경우 애초에 스토리북 + 크로매틱으로 시각적회귀 테스트를 진행하면서(홀로 검수하겠지만) 하기에 따로 추가 할 필요도 없음.

 

5. 시스템을 완성한 이후 홍보에 대한 생각. 결국 해당 시스템은 개인이 사용할 것을 목적으로 진행하는 것이기도 하지만 개인적으로 사람들이 많이 쓸 오픈소스를 만들고 싶다는 생각이 더욱 크기에 어떻게 사용자를 끌어 모을지를 고민해봐야한다.

 

고민중이다. 프로젝트 완성도를 높이고나서는 일정선에서는 결국 사용자와 참여자를 모아야하는데 일단 국내 커뮤니티로는 한계가 명확하기에 해외 커뮤니티를 고민하고 있다.

반응형