AI로 코딩하면 기능적 부분은 매우 훌륭하지만, 디자인이 아쉬운 경우가 있다.
버튼의 간격이나, 타이포그래피의 균형, 혹은 전체적인 분위기 같은 것들이 미묘하게 어긋나 있는 느낌.
그런 빈틈을 채워줄 수 있는 흥미로운 GitHub 저장소가 등장했다.
바로 awesome-design-md다.
Awesome Design MD
Markdown으로 정리된 디자인 리소스 모음
awesome-design-md는 디자인과 관련된 다양한 자료들을 Markdown 형식으로 정리해둔 GitHub 저장소다.
일종의 “디자인 참고서 모음집”이라고 보면 이해가 쉽다.
어떤 내용을 담고 있나
이 저장소에는 디자인 작업에 도움이 되는 리소스들이 카테고리별로 정리되어 있다.
- 디자인 시스템 관련 자료
- UI/UX 가이드와 패턴
- 타이포그래피, 컬러 이론
- 접근성(Accessibility) 관련 문서
- 디자인 도구 및 참고 사이트
https://github.com/VoltAgent/awesome-design-md
사용하는 법
원하는 스타일을 Design.MD를 다운로드해 프로젝트 폴더에 넣는다. 그리고 AI에게 코딩을 시킬 때 해당 디자인 가이드를 따르게만 하면 된다.
예를 들어,
우선 airbnb 폴더에 있는 Design.MD 파일을 폴더에 저장하였다.
테스트를 위해 아무런 준비도 하지 않은 상태에서 다름과 같은 명령으로 실행했다.
생성된 웹사이트이다. Airbnb 하고 동일한 느낌의 디자인을 가진 웹 사이트가 만들어진 것을 볼 수 있다.
훌륭하지 않은가!
AI 개발의 디자인 부분을 한 숟가락 채워 줄 수 있는 좋은 도구가 나왔다.
Leave a Reply