디자인시스템 2

Figma에 Cladue 연결해서 AI에게 디자인 생성해달라고 하기인데 이제 MCP를 곁들인…

오픈소스 과목에서 프로젝트 UI 디자인을 맡게 되었다.지금까지 개발자로만 이루어진 프로젝트를 하면서 항상 떠맡듯이 디자인을 맡아왔는데 이번에는 내가 자진해서 디자인을 해보고싶다고 했다. 그동안 디자인 시스템을 개발하거나 동아리 내의 디자인 시스템인 Handy를 사용하면서 디자인에 관심이 생기기도 했고 요즘 핫하다는 MCP를 사용해서 디자인을 AI로 만들어내고 싶었기 때문에 처음으로 자진해서 디자인을 해보고싶다고 했다. 그래서 오늘 할 건 Figma에 claude 연결하기!!일단 MCP에 관해 간단히 설명을 해보고 넘어가겠다. MCP(Model Context Protocol)란? MCP는 Model Context Protocol의 약자로, 대형 언어 모델(LLM)이 외부 애플리케이션과 상호작용할 수 있게 ..

공부 기록 2025.04.09

[React/리액트] SVG 아이콘 스타일링: fill vs stroke 그리고 디자인 시스템

유어슈에서 만든 디자인 시스템인 handy를 기반으로 새 프로젝트에 쓰이는 컴포넌트를 만들기로 했다.그러다 handy right icon에 아이콘이 겹쳐 나타나는 문제가 생겼고 이를 해결하기 위한 과정과 삽질기(ㅠㅠ)를 공유하고자 한다. 문제 상황현재 handy라는 디자인 시스템을 사용하고 있는데 여기에서 BoxButton을 사용중이다.BoxButton 스토리북은 밑에 링크에서 확인 가능하다.http://handy-react-storybook.s3-website.ap-northeast-2.amazonaws.com/2.1.0/?path=/docs/components-boxbutton--docs이렇게 BoxButton에는 아이콘을 넣어서 사용할 수 있는데제목 그대로이런식으로 아이콘이 겹쳐서 나타나는 문제이다..

React 2025.02.01
728x90