- Figma Make란?
- Figma Make란, Figma에 사이트 공개 기능과 AI 바이브 코딩이 붙은 툴입니다. 디자인에서 공개까지의 이중 수고가 사라지고, 채팅으로 지시하기만 하면 AI가 개발을 진행해 줍니다.
안녕하세요, 마사토입니다.
얼마 전 음식점 경영자에게서 “근태 관리 앱을 만들고 싶은데요”라는 이야기를 들어서 AI를 사용해 만들어 봤습니다.
이번에는 그 경험을 바탕으로, 음식점이나 아르바이트 관리를 하는 기업이 자체 근태 앱을 만드는 방법을 알려 드리겠습니다.
먼저 제가 만든 것을 봐 주세요↓
이번에는 근태 관리를 AI를 사용해 만들어 가겠습니다.
AI 시대입니다. AI를 최전선에서 좇는 입장에서 보면 어떤 앱이든 “직접 만들면 되는데”라는 생각이 듭니다.
그래서 이번에는 AI를 사용한 가장 간단한 앱 제작 순서와 툴, 그리고 가장 중요한 실용하려면 무엇이 필요한지를 소개하겠습니다.
참고로 당사 Webharu에서는 이 근태 관리 앱을 판매하기로 했습니다.
나아가 앱 개발 사업도 작게 시작해 나갑니다.
가장 간단하고 번거로운 설정이 필요 없는 방법으로 진행합니다. 그래서 Claude Code CLI를 사용한 라이브 코딩은 이번에는 쓰지 않습니다. 이유는 세팅이 번거롭기 때문입니다.
이번에는 세팅 없이 Claude Code를 사용할 수 있으면서 품질도 높은 Figma Make를 써서 만들어 가겠습니다.
Figma Make란
Figma에 사이트 공개 기능＋AI 바이브 코딩이 붙은 것입니다.
저희 웹 디자이너가 평소에 쓰는 Figma에 서버 기능＋AI가 따라왔습니다. 즉 디자인→공개의 이중 수고가 단숨에 사라졌고, 나아가 개발을 AI가 해 주게 되었습니다. (엄청납니다!)
사실 이것은 제가 예상하던 미래 그 자체였습니다. 지난 뉴스레터에서도 썼지만, “Figma에 서버 사업을 붙인다”라는 이 흐름은 Webflow를 포함한 노코드 업계 전체를 흔드는 혁명이라고 봅니다.
Figma는 전 세계 사용자 수 1위 디자인 툴입니다. 거기에 공개 기능이 붙으면 굳이 Webflow나 WordPress로 옮길 필요가 없어집니다. 디자인 그대로 즉시 사이트 공개. 이것이 현실이 되었습니다.
실제 사이트 운영은 아직 노코드 쪽이 낫지만, 작은 사이트 제작이나 개인 가게에서 쓸 수준의 앱이라면 AI 제작으로도 충분히 만족할 수 있게 됩니다.
Figma Make 채팅으로 원하는 앱을 만든다
근태 관리 앱을 만들어 달라고 주문
채팅에 “근태 관리 앱을 만들어 줘”라고 평범하게 말을 걸기만 하면 됩니다. 정말 이것뿐입니다. ChatGPT에 말을 거는 것과 다르지 않습니다.
“근태 관리 앱 만들어 줘”로 무엇이 만들어질까요. 아래와 같습니다↓
단 한 문장으로 여기까지 됩니다. 그런데 의외로 힘든 것은 여기서부터입니다. 데이터를 남겨야 하므로 백엔드를 연동해야 합니다. Figma에서는 Supabase를 백엔드로 제안합니다. 순순히 사용해 갑시다.
운용을 위해 다음을 추가
실제로 쓰기 시작하면 “아, 이 기능도 있으면 좋겠다” 싶은 부분이 나옵니다. 그때마다 채팅으로 추가 주문합니다.
예를 들어 저는 “관리자 화면에서 전원의 근무 시간을 목록으로 볼 수 있게 해 줘”, “월말에 데이터를 내보낼 수 있는 기능도”라는 식으로 추가했습니다.
“다음을 실행해 주세요”라고 복사해서 붙여 넣으면 됩니다
- 데이터베이스 통합
- 인증·로그인 시스템
- 급여 계산 로직 (초과 근무 수당, 야간 수당, 휴일 수당)
- 연차 휴가 관리
- 데이터 내보내기/가져오기 (CSV, JSON)
- 법적 체크 기능 (근로시간 제한 등)
- 알림 시스템 (브라우저 알림)
- 인쇄 기능 (PDF 생성)
- 데이터 분석·리포트 기능
- 모바일 대응 (반응형 디자인)
에러가 나오면 무조건 고쳐 달라고 한다
이것이 중요합니다. 처음부터 완벽한 것은 만들 수 없습니다. AI라고 해도 솔직히 꽤 시간이 걸립니다. 끈기가 중요합니다. 에러가 계속 나오거나 수동으로 해야 하는 일도 종종 생깁니다.
하지만 그때마다 AI가 할 일을 제시해 주므로, 레이아웃이 무너지면 그대로 “에러가 나고 있어. 고쳐 줘”라고 채팅으로 던지며 진행합시다.
평범하게 한국어로 “이 버튼이 안 먹는다”라거나 “글자가 안 보인다”라고 전하면 고쳐 줍니다.
추가로 연동하고 싶은 앱이나 기능을 개발한다
근태 관리의 기본이 완성되면 다음은 실용성을 높이기 위한 연동 기능입니다. 아직 제가 해 보지는 않았지만, 만들 수 있는 항목입니다.
- LINE 연동: 출근·퇴근을 LINE(일본에서 가장 널리 쓰이는 메신저)에서 보낼 수 있게. 직원 스마트폰에서 손쉽게 출퇴근 기록이 가능합니다.
- 급여 계산 소프트웨어와의 연동: 데이터를 주고받는 일을 자동화! 경리 업무가 압도적으로 간편해집니다!
- PDF 출력: 월간 리포트를 자동으로 PDF화. 노무사에게 제출할 자료 작성이 순식간에 끝납니다.
전부 채팅 지시로 실현할 수 있습니다. PDF는 간단합니다. 연동은 조금 어렵습니다. LINE 등은 2025년 8월 8일 시점에 AI 생성이 없으므로 수동 작성이 됩니다.
주의점: 어느 정도 만들었으면 코드를 저장하자
이 부분, 정말 중요합니다. 저는 처음에 이것을 하지 않아 크게 당했습니다.
Figma Make는 편리하지만 AI이다 보니 가끔 기억이 리셋되거나 전부 망가지기도 합니다. 다만 Figma Make의 경우 과거 버전을 클릭하면 되돌릴 수 있습니다.
하지만 되돌아가지 않은 적도 있으므로 파일째로 “복사본 만들기”로 저장해 둡시다. 그러면 만일의 경우에도 거기서 다시 시작할 수 있습니다.
정리 | Figma Make로 앱 만들기
실제로 해 본 소감으로는 백엔드와 연동 부분이 어렵다고 느꼈습니다. 자유도가 최대인 반면 AI에 의존하게 되므로 스스로 편집할 수 없으면 힘듭니다. 앞으로 1년 정도 지나면 전부 완전 자동이 올지도 모르겠습니다. 그때를 기대합니다.
Figma에 전부를 걸고 있는 저로서는 이 흐름이 더욱 가속되리라 확신합니다. 특히 프리랜서나 작은 회사라면 이제 Figma Make만으로도 충분한 수준의 것을 만들 수 있는 시대가 왔습니다. 흐름을 보며 Figma에서의 제작도 힘껏 진행해 나가려 합니다.
자주 묻는 질문
Figma Make로 근태 관리 앱을 만들려면 전문 지식이 필요한가요?
채팅으로 “근태 관리 앱을 만들어 줘”라고 평범하게 말을 걸기만 하면 만들 수 있습니다. ChatGPT에 말을 거는 것과 다르지 않으며, 레이아웃이 무너져도 “에러가 나고 있어. 고쳐 줘”라고 말로 전하면 고쳐 줍니다.
Figma Make의 백엔드에는 무엇을 사용하나요?
데이터를 남겨야 하므로 백엔드를 연동해야 하며, Figma에서는 Supabase가 백엔드로 제안됩니다.
Figma Make로 만든 앱이 망가지면 어떻게 하나요?
Figma Make는 과거 버전을 클릭하면 되돌릴 수 있습니다. 다만 되돌아가지 않은 적도 있으므로, 파일째로 “복사본 만들기”로 저장해 두면 만일의 경우에도 거기서 다시 시작할 수 있습니다.
Figma Make로 LINE 연동이나 급여 계산 소프트웨어 연동이 가능한가요?
출근·퇴근을 LINE(일본에서 가장 널리 쓰이는 메신저)에서 보내는 연동, 급여 계산 소프트웨어와의 데이터 연동, 월간 리포트의 PDF 출력이 만들 수 있는 항목입니다. PDF는 간단하지만 연동은 조금 어렵고, 2025년 8월 8일 시점에는 LINE 등에 AI 생성이 없어 수동 작성이 됩니다.
