[Asharyu]디자인시스템 개발 진행 기록

기존에는 react랑 emotion 조합으로 개발을 진행 했던 부분(v1)이 있는데 그 과정에서 느낀바가 있어서

그 코드들을 그대로 두고 프레임워크에 종속적이지 않은 방향으로 컴포넌트를 작성해보고 있다.

빌드 도구로는 vite, typescript를 쓰고 시각화하면서 테스트용으로 storybook을 쓴다.

package.json

사실 그렇게 특별할건없다. 토큰 기반으로 기본적인 컴포넌트를 작성하며 그걸 jsx로 작성하다보니 ts 특유의 타입을 주입해야 해서 jsx 타입을 대충 선언해주고 그를 설정한 부분 그때 그때 필요한 부분을 적당히 추가해주면된다.

css는 css in js도 안쓰고 클래스 스코프 격리를 위해서 css module을 쓸까하다가 굳이.. 그래야하나 싶어서 그냥 css로 코드 작성은 기존 jsx 방식 그대로

자유도나 상속 같은걸 어떻게 처리할지 생각은 하는 중인데 잘모르겠다 방향성이 너무 많다보니 그냥 그때 그때 수정하면서 완성해볼까? 생각중이다.

리액트로 작성한 코드랑 비교해보면 크게 달라진건없다. (token 버전 1=>2업에 따른 변경을 아직 적용하지 않았을뿐)

기본적으로 다만 jsx 자체는 그냥 문법이다보니 스토리북에선 렌더링 불가능하니 그냥 jsx를 처리해주는 런타임코드를 작성하고 그걸 vite(번들러)설정에 주입해주는 정도? 웹표준인 웹컴포넌트로 변환해서 관리 중이긴한데 리액트나 뷰 같은건 추후에 여러 프레임워크(라이브러리)에 맞는 설정만 해주면 된다.

 

개인적으로 디자인시스템을 개발하는 것에서 느끼지만 여기에 무슨 기술적인 어려움이 있다거나 거창한 비법 그런건 없다. 순수하게 디자인 시스템 설계에 따른 노고나 소소한 부분들을 신경써야하고 그 디자인 가이드나 컴포넌트를 디자인 하는게 어려울뿐.

 

내가 이런글을 전문적으로 쓰는 사람도 아니다보니 써놓고봐도 더욱 모르겠다. 기술적으로 뭐가 어렵고 뭐가 크게 대단히 중요하고 그런거 늘 그래서 기술 면접에서도 오해를 많이 샀는데 개인적으로 느끼기에 다 거기서 거기에 대충 하려고하면 되니까 공감이 안간다. 그렇다고 기계적으로 그런 것들을 외워서 적용 할 순 없지 않는가. 요즘은 글쓰기는 AI에게 부탁하면 되긴하지만 걔네가 쓴 내용봐도 왜 저따위로 쓰는지 공감이 안가니까(저런걸 뭐 저리 거창하게 포장하는지)

 

정말 품질이 전부이다. 특히 요즘은 AI가 발전해서 더욱 그렇다. 다만 얘네한테 아무리 스킬을 주고 가이드를 제시해도 1차 결과물은 그닥 퀄리티가 별로다. 그래서 그걸 개인이 지속적으로 피드백하면서 품질을 잡아줘야하는데 (그냥 대충쓸거면 이런과정도 필요없이 에이전트한테 시키기겠지만) 그래서 별거 아닌 것도 생각보다 시간이 오래걸리는거같다.