방구석 디자인 사수
"디자이너님, AI로 UI 디자인 효율은 높이고 작업 시간은 단축해보시죠!"
미드저니 사이트를 보시면서 대표님이 말씀하셨어요.
대략 난감...
대표님... 미드저니는 웹/앱 UI에 효과적인 AI가 아닌데요...
웹/앱 UI도 미드저니 하나면 "딸깍" 만들어진다고 생각하시는 우리 대표님!
어렵게 설득하실 필요 없습니다.
UI 디자인의 효율은 "이미지 생성"이 아니라
"Figma에서 수정 가능한 레이어/컴포넌트"가 좋은 퀄리티로 빨리 나오냐 입니다.
UI용 AI, 3종류와 각각의 대표 툴
1) Figma 안에서 바로 쓰는 AI
빈 캔버스에서 "첫 화면" 만드는 시간 단축
- Figma First Draft : 아이디어를 편집 가능한 와이어프레임/디자인 초안으로 만들어줌.
- Figma Make : 프롬프트로 프로토타입/인터랙티브 UI를 만들고, 결과를 디자인 레이어로 가져와 계속 수정할 수 있음.
2) 웹 페이지 구조/와이어프레임을 빨리 만들고 Figma로 가져오는 AI
랜딩 페이지, 마케팅 페이지, 섹션 구성 잡는 시간 단축
- Relume : AI로 사이트맵/와이어프레임/스타일 가이드를 만들고, Relume Figma 플러그인으로 Figma에 가져올 수 있음.
3) 코드까지 뽑아주는 AI (개발 속도까지 줄여줌)
디자인에서 개발 핸드오프까지 시간 단축
- Vercel v0 : 프롬프트로 React + Tailwind + shadcn/ui 기반 코드를 생성 함.
- Locofy : Figma 디자인을 개발 친화 코드로 변환(React/React Native 등) 지원.
- Builder.io Visual Copilot : Figma에서 React/Vue 등 코드로 변환 지원.
- Anima : Figma에서 디자인을 React/HTML 코드로 변환하는 플러그인 운영.
대표님 설득용 10분 데모
로그인/회원가입(3~5 화면)
- First Draft로 "로그인 플로우 초안" 뽑기
- Make로 같은 요구를 넣고 프로토타입 느낌까지 만들기
- 대표님 앞에서 수정 1개 즉석 시연
- 마무리 멘트 : "대표님, 이건 이미지가 아니라 Figma 레이어라서 '최종 UI 작업'이 빨라집니다."
AI 사용 시 주의점
- 회사 기밀/고객 정보/미공개 화면 그대로 넣지 말기
- AI 결과는 초안일 뿐 최종은 디자인 시스템 기준으로 정리해야 실무에서 통함.
- "AI가 맞다" 금지 : 체크리스트로 누락을 줄이는 용도로만 사용.
다음 편에서 또 만나요!
디자인 업무에 관련해서 고민이나 궁금한 점이 있으시면 언제든지 댓글, 메일로 보내주세요!
제가 같이 고민해 드릴께요!
우리 함께 해요. 제발~😘
의견을 남겨주세요
dk
재밌으면서도 유용합니다. 다음 글도 기대됩니다 :)
방구석 디자인 사수
첫 댓글!! 너무나 감사합니다! 혹시 다루었으면 하는 이야기나 저에게 알려주실 추가 정보가 있으시면 언제든지 편하게 댓글로 말씀해 주세요~!!
의견을 남겨주세요
보정
비공개 댓글 입니다. (메일러와 댓글을 남긴이만 볼 수 있어요)
방구석 디자인 사수
안녕하세요, 보정님! 도움이 되신다니 제가 너무나 힘이 나에요! 감사합니다. 앞으로 보정님께 도움이 될 만한 이야기 많이 준비하겠습니다! 궁금한 점 있으시면 편하게 댓글 올려주세요!^^
의견을 남겨주세요