Figma Make AI 이미지파일로 홈페이지 만들기

오늘을 기존 서비스하던 화면을 캡쳐해서 피그마 메이크로 인터페이스를 만들어주는지 확인해봤는데요.

피그마 메이크 기능은 AI로 퍼블리싱, 프론트단의 리액트 프로그래밍을 생성하고, 백단은 Supabase와 같은 서비스를 활용해야한다고합니다.

왼쪽 : 캡쳐 이미지 | 오른쪽 : 피그마 메이크 기능 인터페이스 생성

화면에서 비율적인 부분, 사진과 div 상자부분이 다르게 퍼블리싱 된 부분도 있지만, 아이콘과 텍스트 정렬, 간격이 일정해서 추가적인 수정으로 비어있는 상자에 사진을 채우거나 색, 아이콘 비율같은 부분은 추가수정으로 사진과 비슷하게 수정가능해 보이는 수준이었고, 프롬프트로 아이콘 클릭하면 연결 페이지로 이동할 수 있도록해달라는 프롬프트도 캡쳐된 이미지 없이도 임의로 진행해줬습니다.

상세페이지 퍼블리싱

왼쪽 캡쳐이미지 오른쪽 퍼블리싱된 이미지

팝업, 상세페이지를 캡쳐해서 상세페이지 만들어달라는 프롬프트를 입력하면 해당 아이콘을 클릭하면 팝업이 뜰 수 있도록 퍼블리싱했습니다. 아쉬운 부분이 있긴하지만 간단한 포트폴리오, 쇼핑몰, 회사 홈페이지 같이 간단한 작업은 만들 수 있는 수준인거 같습니다.