안녕하세요. AI 디자인 시스템 관련해서 문의드립니다.
강의를 듣고나서, 모르는 부분은 다시 듣고 있기는 하지만, 개발자라서 디자인을 제로부터 만드는게 쉽지는 않습니다.
사정상 어떻게 하다보니 UI/UX, 프론트, 백엔드까지 직접 다하고 있는 실정인데, 쉽지는 않은것 같습니다.
이전에는 기존에 나와있는 디자인들을 여러개 보고 괜찮다 싶은것을 참고해서 만들었습니다.
그리고 프론트 엔드에서도 정해진 규칙이 없이 괜찮아 보이는대로 만들었습니다.
하지만 이런식으로 하다보니 일체감도 없어지고, 향후에 수정을 할때도 당혹스러운적이 많았습니다.
그렇게 해서 강의를 듣기 시작을 한게 이 배리어블 강의였습니다. 저에게는 넥스트를 생각할 수 있게 되어서 굉장히 좋았던 강의였습니다.
앞으로 해야될 것들이
1.이전에 만들어 두었던 UI/UX를 피그마에 똑같이 만들고 배리어블을 적용해두기.
2.만든 디자인 시스템을 프론트에 전부 연결하기.
3.만든 것을 바탕으로 향후에 Figma AI가 진보되면 디자인을 쉽게 변화할수 있게 하기
이런 식으로 해보려고 합니다.
질문드리고 싶은것은 현재 AI로 디자인을 하는 것은 쉽지 않은지, 아니면 노하우가 있는지 궁금합니다.
제가 원하는 것은 많은 페이지들이 일체감이 있어야 되고, 원하는 것을 입력하면 이를 모든 페이지에 반영되거나, 특정 부분만 수정하고 싶으면 특정한 부분도 수정이 가능해야 합니다.
또한 이를 배리어블 시스템과 연동이 되어서 결국 프론트와 연동을 해야합니다.
UIZARD를 어제 무료 버전을 써봤었는데, 스크린샷 기능이 기존에 만들어 둔것을 인식을 못해서 쉽지 않았습니다. 아직까지 디자인을 AI로 만드는건 힘든건지, 아니면 강사님의 노하우가 있으신지 궁금합니다.
피그마도 5/7일에 새로운 제품을 출시하는 것 같던데, AI관련이었으면 좋겠네요.
향후에 저 같은 개발자를 위한 강의가 개설되는지도 궁금합니다. "피그마 AI를 활용한 배리어블 시스템" 이런게 나왔으면 하는 바램입니다.
긴글 읽어주셔서 감사합니다.
안녕하세요.
글을 읽으며 많은 고민이 담겨 있다는 것을 느꼈고, 저 역시 비슷한 고민을 하고 있어 공감이 많이 되었습니다.
저는 aquamiro님과는 반대로 현재 개발 쪽 공부를 많이 하고 있으며, 회사에서는 v0와 러버블(Llverable) 툴을 사용하면서 디자인과 개발 사이의 간극을 어떻게 줄일 수 있을까 고민하고 있습니다.
아이디어 → 디자인 구현
Figma MCP가 최근 대두되고 있지만, 아직 기능에 많은 제한이 있다는 점이 한계라고 생각합니다. 개인적인 의견으로는, 아이디어를 디자인으로 구현하는 단계는 여전히 많이 부족하다고 봅니다. 다만, 이번 Figma 업데이트에서는 이 부분에 대해 많은 준비를 해오지 않았을까 기대하고 있습니다.
아이디어를 말로 풀어내고, 이를 디자인으로 구현하는 과정은 상당히 사고력을 요구하는 일입니다. 좋은 결과물을 위해서는 결국 좋은 프롬프트 작성이 매우 중요하다고 생각합니다.
UIZARD와 비슷한 툴들도 사용해봤지만, 아직까지는 기대하는 퀄리티에 미치지 못한다고 느꼈습니다. 이는 디자인이 단순히 형태를 넘어, 콘텐츠, 경험, 전체적인 사용자 흐름을 모두 다루는 복합적인 작업이기 때문이라고 생각합니다.
디자인 → 프론트엔드 구현
이 과정은 상대적으로 직관적입니다. 디자인을 코드로 변환하는 것이 주요 작업이기 때문입니다. v0을 사용하면 디자인을 코드로 변환하는 작업이 상당히 잘 지원되며, 코드 퀄리티도 점점 향상되고 있습니다. Supabase를 연동하면 백엔드 부분도 어느 정도 쉽게 구현할 수 있고, 배포 또한 매우 간편합니다. 이 과정에서 Shadcn과 Tailwind CSS를 사용하고 있으며, 이들은 프론트엔드에서 워낙 유명한 기술들이라 잘 알고 계실 것 같습니다.
AI 관련된 강의 컨텐츠는 너무 빠르게 트랜드가 바뀌고 있어서 강의 보다는 유투브 컨텐츠로 제작해보도록 하겠습니다. 또한 향후에 수강생분들에게 의미 있는 강의 주제가 있다면 준비해도록 하겠습니다.
고민 이야기해주셔서 감사합니다.! 저도 앞으로 함께 고민해보도록 하겠습니다.
감사합니다!
답글