디자인이 어려운 개발자를 위한 AI 디자인 시스템 활용기

많은 사이드 프로젝트를 개발하지만 항상 마음에 걸리는 한 가지가 있다.

그건 바로 디자인이다.

예쁜 사이트와 앱을 만들고 싶은데 생각처럼 잘 나오지 않을 때 활용하기 좋은 서비스를 찾았다.

https://getdesign.md/

getdesign.md — DESIGN.md collection for AI coding agents

https://styles.refero.design/

Refero Styles — Design Systems for AI Agents

두 사이트는 유명 서비스들의 DESIGN.md를 모아둔 곳이다. 마음에 드는 디자인 시스템을 찾아 내 프로젝트에 참고할 수 있다.

 

가져온 DESIGN.md를 바탕으로 내가 원하는 UI를 만들어주는 서비스도 있다.

https://stitch.withgoogle.com/

Stitch - Design with AI

Stitch에서 Start With a DESIGN.md를 선택한 뒤, 앞서 가져온 DESIGN.md 내용을 붙여넣으면 된다.

 

그러면 이런 디자인 시스템이 만들어진다

디자인 시스템을 더블클릭하면 색상, 글꼴, Radius 값을 수정할 수 있다. 

나는 자기소개 페이지를 만들어 달라고 해봤다.

참고한 서비스와 비교해보니 완전히 동일하진 않지만, 전체적인 분위기와 구성은 꽤 비슷하게 잡아주는 편이었다.

생성된 디자인은 코드로 추출할 수 있으며, 프로토타입 형태로 동작을 미리 확인해볼 수도 있다.

 

디자인 감각이 부족한 개발자가 처음부터 레이아웃, 색상, 폰트, 컴포넌트 스타일을 모두 고민하는 것보다는 훨씬 빠르게 출발점을 만들 수 있다는 점이 좋았다.

특히 사이드 프로젝트처럼 빠르게 MVP를 만들고 싶은 상황에서는 꽤 유용하게 쓸 수 있을 것 같다.
앞으로는 기능 구현뿐만 아니라, 이런 디자인 시스템 기반 도구들을 활용해서 보기 좋은 결과물까지 더 빠르게 만들어보려고 한다.