본문 바로가기

프로젝트 개발일지/warrr-ui 디자인 시스템

[warrr-ui 디자인 시스템 개발기] 아이콘 자동화 피그마 플러그인 개발 이번 주 과제는 아이콘 자동화 피그마 플러그인 개발이었다.이거까지 하게 될 줄은 몰랐는데, 당근, 채널톡 코드들을 좀 살펴보니 그렇게까지 무리한 도전은 아닐 거 같아서 그냥 시작해 버렸다. 일단, 피그마 플러그인이 돌아가는 로직에 대한 가벼운 이해가 필요해 그거부터 알아보도록 하자. 피그마 플러그인 로직다음 사진은 피그마 플러그인이 돌아가는 로직을 한눈에 파악할 수 있는 좋은 레퍼런스이다.간단히 말하자면, 피그마 플러그인은 두 계층에서 동작한다.sandbox와 iframe인데 여기서 sandbox는 피그마 플러그인 관련 로직, 즉 비즈니스 로직 쪽과 관련이 있고, iframe은 우리가 보는 UI와 관련이 있다.중요한 점은 sandbox에서는 브라우저 API 같은 건 호출하지 못하고 플러그인 API는 호출.. 더보기
[warrr-ui 디자인 시스템 개발기] 토큰 배포 및 자동화 이번 주 과제는 토큰 관리 방법 및 자동화에 대해서 생각해 보는 시간이었다. GDSC 와우 디자인 시스템에서도 warrr-ui처럼 panda css를 사용해서 개발하고 있었기 때문에 와우 디자인 시스템의 토큰 관리 방법을 많이 참고해서 생각해 볼 수 있었다. 와우 디자인 시스템 토큰 관리 방법일단, 와우 디자인 시스템에서는 wow-tokens라는 패키지에서 토큰 값들을 객체나 다른 구조가 아니라 string 값으로 관리하고 있다. 이는, 사용자가 원하는 대로 커스텀해서 사용하기 용이하게 하기 위해서 그렇다. 아래 링크를 들어가보면 어떤 방식으로 관리하고 있는지 한 번에 알아챌 거다. https://github.com/GDSC-Hongik/wow-design-system/tree/main/packages/.. 더보기
[warrr-ui 디자인 시스템 개발기] 아이콘 배포 및 자동화 이번 주는 아이콘에 대해서 자세히 알아보는 시간을 가졌다.아이콘 npm 배포 및 자동화할 수 있는 방법이 있는지에 대해서 공부했다. 일단, 내가 GDSC 디자인 시스템을 개발하며 느꼈던 아이콘 관련 문제 상황은 다음과 같다.1. svg 파일들을 일일이 내 프로젝트에 넣어 두어야 한다.2. 해당 svg 파일을 리액트 컴포넌트 방식으로 변환해야 한다. 이 작업들을 수작업으로 하려다 보니 화가 났다.그래서, 어떻게 하면 이 두 가지를 자동화할 수 있는지에 대해서 조사했던 것 같다.다만, 시간 부족 이슈로 완전 자세하게는 못했는데, 다다음주에 직접 실습해 보면서 자세히 알아보려고 한다. 여러 디자인 시스템 아이콘 관리 방법 조사일단, 여러 디자인 시스템 깃허브 레포를 둘러보면서, 어떤 방식으로 관리하고 있는지 .. 더보기
[warrr-ui 디자인 시스템 개발기] 스토리북과 테스트 이번 주 주제는 스토리북과 테스트였다. 사실, 개발하면서 스토리북을 자주 썼지만,,, 여러 기능들을 활용해 본 것도 아니었고, 문서화를 제대로 한 것도 아니었다.그래서, 스토리북에 대해서 보다 알아가는 시간이 필요하다고 생각했었고, 문서화, 애드온, 테스트 관련해서 어떤 기능들이 있는지 알아보는 시간을 가졌다.그리고 테스트 관련해서도 정말 자잘하게 단위 테스트 작성해 본 게 다라서 우리 디자인 시스템에는 어떤 테스트를 적용하는 게 좋을지에 대해서도 생각해 보는 시간을 가졌다. 먼저 스토리북부터 알아보도록 하자. 스토리북 문서화스토리북 문서화는 상당히 중요하다.근데 나는 이때까지 제대로 한 적이 없었다. ㅋㅋ 이제부터 열심히 할게요!어쨌든 중요도를 따지는게 별 의미는 없겠지만, 디자인 시스템에 있어서 자세.. 더보기
[warrr-ui 디자인 시스템 개발기] CI/CD 이번 주에는 cicd + changeset이라는 주제로 과제를 해오기로 했다. 이전에 cli 프로그램을 npm에 배포한 적이 있었는데 그때 changeset을 활용해서 배포해 봤기 때문에 이번에는 좀 더 새로운 걸 해보고 싶었다.cli 프로그램에 대해서 궁금한 사람은 아래 글을 읽어보도록 하자.https://gugu76.tistory.com/138 디자인 시스템에 적용할 액션 탐방어쨌든, 이번 주에는 우리 디자인 시스템에 써볼만한 액션들이 있는지 좀 둘러보는 시간을 가졌다.깃허브 마켓플레이스를 하나씩 둘러보면서 디자인 시스템에 적합한 게 있나 찾아봤다.생각보다 내가 몰랐던 것들이 많아서 신기해하면서 찾아봤다. 아래 액션들은 그렇게 찾아낸 것들이다. 아래 액션은 stark라는 웹 접근성 검사기 관련 액션인.. 더보기
[warrr-ui 디자인 시스템 개발기] cli 라이브러리 npm 배포 이번 주에는 지금까지 만들어왔던 cli 프로그램을 npm에 배포하는 작업을 해봤다. 아래 레포지토리에 현재까지 작업해 왔던 cli 프로그램이 있다.https://github.com/ghdtjgus76/design-system-cli 아무래도 우리가 원하는 동작들이 shadcn과 상당히 유사하기도 하고, npm에도 배포되어 있는 shadcn 패키지가 디자인 시스템 코드들이 아니라 cli 프로그램이기 때문에 npm 배포 관련 코드들을 많이 참고해서 이번 주 과제를 진행했다. shadcn ui npm 배포 설정 파일먼저 아래 코드는 shadcn에서 cli 프로그램을 배포할 때 사용한 설정 파일들이다.// ui/packages/cli/package.json{ "name": "shadcn-ui", "versi.. 더보기
[warrr-ui 디자인 시스템 개발기] 노드 파일 시스템과 컴포넌트 레지스트리 파일 생성 스크립트 작성 일단, cli 관련해서 계속해서 공부하다 보니, 노드 파일 시스템에 대한 제대로 된 이해 없이는 확실하게 이해하지 못할 거 같다는 생각이 들었다.그래서 이번 주는 노드 파일 시스템 공부부터 시작했다. 노드 파일 시스템전체를 다 알아보진 않을 거고 중요한 부분들 위주로 알아보도록 하자. 파일 시스템 모듈은 컴퓨터에 있는 파일 시스템이 작동하게 한다.파일 생성, 삭제, 읽기, 쓰기 등 수행 가능하다고 보면 된다. 이 파일 시스템 모듈은 fs가 가지고 있다.import fs from "fs"; 이는 동기 방식으로 파일 시스템 모듈을 불러온 것이고, fs 자체에서도 Promise를 지원한다.파일 시스템을 다루다 보면 비동기 방식으로 코드를 짜는 일이 많을 텐데, 항상 callback 함수로만 처리하다 보면, 콜.. 더보기
[warrr-ui 디자인 시스템 개발기] commander를 활용한 init, add cli 실습 일단, 저번 글에서도 봤겠지만, 우리 디자인 시스템은 cli 관련 기능을 제공하기로 했다.그 중에서 나는 init과 add cli 명령어 실습을 해봤다. shadcn에는 init, add, diff 이렇게 세 가지 명령어가 있다.간단하게 설명하자면, init 명령어에서는 사용하는 공통 의존성 등의 설치 여부를 판단해 설치해주는 기본 작업을 진행한다.add 명령어에서는 사용자가 컴포넌트를 선택하면 해당 컴포넌트 관련 의존성을 설치하고 해당 컴포넌트 자체 파일을 사용자가 지정한 경로에 생성해준다.diff 명령어는 사용자가 사용하고 있던 각 컴포넌트 파일과 업데이트된 파일이 있는지 확인하고 변경 사항이 있다면 이를 정리해서 알려주는 명령어이다. 사실, 이 실습을 처음 진행하려 했을 때는 add 명령어를 메인으.. 더보기

티스토리툴바