디자인 시스템

참고자료 SOCAR 컬러시스템 구축하기 디자인 시스템 구축을 경험해보자는 성격에서 시작한 작업이기 때문에 디자인 적인 내용보다는 이를 코드로 옮기는 것에 초점을 맞추었습니다. 비효율적인 코드나, 명암비가 라이트 / 다크모드에 적합하지 않을 수도 있지만 이는 추후에 수

SOCAR 디자인 시스템 - 다크모드디자인 시스템은 '서비스의 목적에 맞도록 일관되게 구성한 일련의 패턴과 공유된 규칙 언어'라고 합니다. 사람들이 디자인을 시작할 때 공통으로 사용하는 컬러, 폰트, 레이아웃, UI 구성 요소 등 일관된 집합을 두고 이를 어떻게 구성하

Tokens studio for figma 기존에는 figma에서 토큰 시스템이 없었는데,(현재는 variable 기능이 생김) 피그마에서 디자인 토큰을 생성하고 관리할 수 있도록 해주는 plugin이다 tokens studio for figma 이 플러그인을 사

디자인 시스템을 만드는데 가장 고려했던 점은 유지보수가 용이해야 한다 변경이 굉장히 많을 것으로 예상되기 때문에 손쉽게 변경이 가능해야 한다 가독성이 좋아야 한다 단순히 코드의 가독성 뿐 아니라, 누구나 이해하기 쉬워야지 쓰임새가 좋을 것 같다 TS + IDE 자

panda-css.com/docs/guides/component-library pnpm workspace 사용하기 사실 이런 소규모 프로젝트에서 workspace를 사용하고, 패키지매니저를 변경하는 것 자체가 오버엔지니어링이라고 볼 수도 있다 그럼에도 도입한 이유는

개인적으로 storybook을 선호하지 않는 가장 큰 이유는 과정이 너무 귀찮아서이다..\*\*.stories 파일 생성 -> 형식 맞게 meta,Story 선언하고 -> args 옮겨적고(자동 완성도 안돼서 일일이 보고 옮겨야된다) -> 예시로 보여줄 컴포넌트 생성하

아코디언이 열리고 접힐 때의 애니메이션을 적용해줘야 하는데 height 값에 따른 애니메이션 적용해야 할 때, height의 정확한 값이 존재해야 한다참고자료스택오버플로우보통은 max-height 를 사용하거나, 임의의 height 값을 적용하는 방식으로 해결하는 것

일반적으로, 아코디언 컴포넌트에 기대하는 키보드 이벤트는 Tab 버튼을 통해 아코디언 아이템들을 이동할 수 있다 화살표 버튼으로 아코디언 아이템들을 이동할 수 있다 엔터 클릭 시 아코디언 아이템을 열고 닫을 수 있다 여기서 이동할 수 있다는 것은 포커스를 이동할 수

참고자료Radix UI - Accordion요즘은 어떤 UI를 만들 때 가장 먼저 생각하는 것은 해당 컴포넌트가 어떤 역할을 해줘야 하는가? 를 일반적인 방식에서 먼저 생각하고 코드로 옮기는데, 괜찮은 방법인 것 같다아코디언의 경우화살표 버튼같은 어떤 버튼을 눌렀을 때

npm에 배포하기 전 pandacss는 styled-system 이라는 조금 특이한 폴더가 있다panda는 빌드 타임에 css 파일을 생성하는데, 원칙적으로 스타일을 적용하기 위해서는 css variables를 써야 할 것이다하지만 불편한 css variables를 쌩

참고자료 sb test sneak peak sb 8.4 update storybook 기능에 대한 자세한 설명보다는, storybook을 더욱 잘 활용할 수 있는 방법을 소개합니다 8.4버전 기준입니다 기존에는 Storybook의 이미지가 그닥 좋지 않았다 느림

계기 기존에 학습용 + 개인 사용을 위해 만들던 디자인 시스템이 있었다 개인용으로 만들긴 했지만, 다른 사람들도 사용할 수 있게 제작하는 것이 목표였기에 느리더라도 퀄리티를 지켜가며 개발하려고 노력했다 그래서 하지만 뭔가 개인용으로 만들다 보니 일관성이 많이 안 지

기존에는 pnpm workspace만 사용하고, turborepo의 필요성을 못 느껴서 사용하지 않았는데 이제는 turborepo 없이는 모노레포 개발할 수가 없다..그냥 나름 복잡?한 상황이 있다는 정도만 이해하시면 됩니다현재 총 4개의 내부 패키지가 있는데cli,

들어가기 cursor + Figma MCP Figma MCP는 talk-to-figma-mcp를 사용했습니다 개인 디자인 시스템에서는 React+Pandacss를 활용하고 있습니다 1인 디자인시스템을 제작하면서 가장 어려운 부분이 '디자인'이다. 이를 해결하기 위해서