Figma Make - AI로 바이브코딩해서 앱 만들기

 

최근 뉴욕 증시에 상장(IPO)해서 첫 날 주가 3배를 기록한 UXUI 창작 및 협업툴 <Figma>를 아시나요?

디자이너나 서비스기획자들에겐 익숙하지만 업계 관계자가 아닌 분들께는 생소한 이름일 수도 있는데요. Figma는 작은 스타트업으로 시작해서 편리한 기능과 무료 전략을 통해 빠르게 시장을 파고들었고 소프트웨어계의 공룡인 Adobe를 제친 유니콘 기업입니다.

 

올해는 AI 개발 기능을 제공하는 Figma Site(Beta)와 Figma Make를 런칭하며 적극적인 출시를 이어가고 있는데요. 자고 일어나면 새 서비스가 나오니 저도 따라가가기 버거울만큼 배울 게 한 가득이네요.🧐

 

 

오늘은 바이브코딩으로 앱을 만들 수 있는 Figma Make를 사용 후기를 가져왔습니다.

 

Figma Make

 

 

◼︎ Figma Make 사용 방법

 

1. Figma Make 파일 만들기

Figma에 로그인 후 우측 상단의 "Make" 를 클릭합니다.

 

 

 

2. 프롬프트 입력하기

좌측 하단 입력창에 만들고 싶은 서비스 내용을 적습니다. 바이브코딩이기 때문에 대략적인 아이디어만 간단히 적어도 됩니다. 저는 "투자자산 비율 계산기"를 만들어려 보기 위해 아래처럼 입력을 해보았어요.

 

투자자산 비율을 자동으로 계산해주는 기능의 원페이지 사이트를 만들어줘. 디자인은 전체적으로 clean한 light톤에 Blue를 포인트컬러로 느낌은 professional하며 modern하게 만들어줘.

 

 

그럼 AI가 어떻게 만들지 간단한 계획을 설명해주고 코딩을 시작합니다. 실시간으로 코딩되는 게 정말 신기하더라구요.

 

 

 

3. 완성물 확인하기

약 1분 정도의 코딩을 마치고 드디어 완성되었습니다. 생각보다 그럴싸하게 만들어준 것 같아요.

좌측 패널을 보면 AI가 결과물에 대한 설명과 추가 기능도 추천을 해주네요.

 

 

 

 

4. 완성물 테스트하기

그럼 잘 만들어졌는지 테스트를 해볼까요?

제가 원했던 대로 총 투자 자산을 입력할 수 있게 만들어줬고 각 투자 자산을 입력하면 비율과 파이차트로 나타내 줍니다.

 

 

 

Code모드로 보면 코드도 볼 수 있습니다. tsx(React에서 쓸 수 있는 Typescript)와 CSS로 만들어줬네요. React로 만들어 주었기 때문에 웹사이트, 모바일웹, 웹앱으로 모두 제작할 수 있겠네요.

 

 

 

5. 모바일버전 (gif 프로토타입)

좌측 상단에 디바이스 아이콘을 누르면 모바일 버전으로도 확인 가능합니다.

정말로 기능이 잘 작동하는지 gif로 녹화한 화면을 보여 드릴게요. 숫자를 입력하면 총액과 비율 계산이 되고 그래프도 만들어주는 걸 볼 수 있지요?

 

 

◼︎ 사용 소감

1분이면 뚝딱 간단한 앱을 만들 수 있는 점이 놀랍네요. 프롬프트 입력 한번으로 만들어낸 결과물로서는 디자인도 괜찮고 기능을 좀 더 추가하면 바로 런칭을 해도 되지 않을까 싶을 만큼 놀라운 결과였습니다.

 

 

◼︎ Figma Make  가격 정보

Figma Make는 별도 구독제가 아닌 Figma 구독 플랜에 포함되며 무료 버전(스타터 플랜)에서도 사용 가능합니다.

 

물론 무료 버전은 일부 기능에 제약은 있어요. 정식 작업에 활용하려면 유료 버전을 써야겠지만 개인적으로 이거저거 만들어보는 건 무료 버전으로도 부족함은 없을 것 같네요. Figma 무료 사용자라면 테스트를 해보고 쓸모가 있겠다 판단되었을 때 유료로 업그레이드하는 걸 추천합니다.

 

만약 정책에 변동이 생기면 업데이트 해드리도록 하겠습니다.

그럼 다들 즐거운 바이브코딩 되세요!