【음식점 오너 필독】AI로 근태 관리 앱을 만드는 방법

Figma Make: Figma Make란 Figma에 사이트 공개 기능과 AI 바이브 코딩이 붙은 툴입니다. 디자인에서 공개까지의 이중 수고가 사라지고, 채팅으로 지시하기만 하면 AI가 개발을 진행해 줍니다.

안녕하세요, 마사토입니다.

얼마 전 음식점 경영자에게 “근태 관리 앱을 만들고 싶은데”라는 말을 들어 AI로 만들어 봤습니다.

이번에는 그 경험을 바탕으로, 음식점이나 아르바이트를 관리하는 기업이 자체 근태 앱을 만드는 방법을 전수합니다.

먼저 제가 만든 것을 보시죠↓

AI 시대. AI를 최전선에서 쫓는 입장에서는 어떤 앱이든 “직접 만들면 되는데”라고 생각하게 됩니다.

그래서 이번에는 AI를 사용한 가장 간단한 앱 제작 순서와 툴, 그리고 가장 중요한 실무에 쓰려면 무엇이 필요한지를 소개합니다.

가장 간단하고 번거로운 설정이 필요 없는 방법으로 진행합니다. 그래서 Claude Code CLI를 사용한 바이브 코딩은 이번에는 쓰지 않습니다. 이유는 셋업이 귀찮으니까.

이번에는 셋업 없이 Claude Code를 사용할 수 있고 품질도 높은 Figma Make로 만들어 갑니다.

Figma Make란

Figma에 사이트 공개 기능＋AI 바이브 코딩이 붙은 것입니다.

우리 웹 디자이너가 평소 쓰는 Figma에 서버 기능+AI가 붙었습니다. 즉 디자인→공개의 이중 수고가 단숨에 사라지고, 개발을 AI가 해 주게 되었습니다.

Figma는 전 세계 사용자 수 No.1 디자인 툴. 거기에 공개 기능이 붙으면 굳이 Webflow나 WordPress로 이전할 필요가 없어집니다. 디자인 그대로 즉시 사이트 공개. 이것이 현실이 되었습니다.

실제 사이트 운영은 아직 노코드가 위지만, 작은 사이트 제작이나 개인 매장에서 쓸 수준의 앱이라면 AI 제작으로 충분히 만족스럽습니다.

Figma Make 채팅으로 원하는 앱 만들기

“근태 관리 앱 만들어 줘”라고 주문

채팅으로 “근태 관리 앱 만들어 줘”라고 평범하게 말을 걸기만 하면 됩니다. 정말 이게 전부. ChatGPT에 말 거는 것과 다르지 않습니다.

단 한 문장으로 여기까지 됩니다. 하지만 의외로 힘든 것은 여기서부터. 데이터를 남겨야 하므로 백엔드 연동이 필요합니다. Figma에서는 Supabase가 백엔드로 제안됩니다. 순순히 사용합시다.

운영을 위해 다음을 추가

실제로 쓰기 시작하면 “아, 이 기능도 필요하네” 싶은 부분이 나옵니다. 그때마다 채팅으로 추가 주문.

“다음을 실시해 주세요”라고 붙여넣으면 OK

데이터베이스 통합
인증·로그인 시스템
급여 계산 로직(잔업 수당, 심야 수당, 휴일 수당)
유급 휴가 관리
데이터 내보내기/가져오기(CSV, JSON)
법적 체크 기능(노동 시간 제한 등)
알림 시스템(브라우저 알림)
인쇄 기능(PDF 생성)
데이터 분석·리포트 기능
모바일 대응(반응형 디자인)

에러가 나면 어쨌든 수정을 시킨다

이것이 중요합니다. 처음부터 완벽한 것은 만들 수 없습니다. AI라고 해도 솔직히 꽤 시간이 걸립니다. 끈기가 중요합니다.

레이아웃이 무너지면 그대로 “에러가 나. 수정해 줘”라고 채팅에 던지고 진행합시다. “이 버튼이 안 눌려”라든가 “글자가 안 보여”라고 전하면 고쳐 줍니다.

추가로 연동하고 싶은 앱·기능 개발

근태 관리의 기본이 되면 다음은 실용성을 높이는 연동 기능입니다.

메신저 연동: 출퇴근을 메신저에서 전송할 수 있게. 직원 스마트폰에서 간편하게 출퇴근 기록
급여 계산 소프트웨어 연동: 데이터 교환 자동화! 경리 업무를 압도적으로 간편하게!
PDF 출력: 월간 리포트를 자동 PDF화. 노무사에게 제출할 자료 작성이 한순간에

전부 채팅 지시로 실현할 수 있습니다. PDF는 간단. 연동은 조금 어렵습니다. LINE 같은 메신저는 2025년 8월 시점에는 AI 작성이 없어 수동 작성이 됩니다.

주의점: 잘된 시점에 코드를 저장하자

여기, 정말 중요합니다. 저는 처음에 이것을 하지 않아 아픈 경험을 했습니다.

Figma Make는 편리하지만 AI이므로 가끔 기억이 리셋되거나 전부 부서지기도 합니다. Figma Make는 과거 버전을 클릭하면 되돌릴 수 있지만, 되돌아가지 않은 적도 있으므로 파일째 “사본 만들기”로 저장해 둡시다. 그러면 만일의 경우에도 거기서 재개할 수 있습니다.

정리｜Figma Make로 앱 제작

실제로 해 본 감상은, 백엔드와 연동 주변이 어렵다는 것이었습니다. 자유도가 MAX인 반면 AI에 의존하게 되므로 직접 편집할 수 없으면 힘듭니다. 1년쯤 지나면 완전 자동이 올지도 모르죠. 그때를 기대합니다.

특히 프리랜서나 작은 회사라면 이제 Figma Make만으로 충분한 수준의 것을 만들 수 있는 시대가 왔습니다.

자주 묻는 질문

Figma Make로 근태 관리 앱을 만들려면 전문 지식이 필요한가요?

채팅으로 『근태 관리 앱 만들어 줘』라고 평범하게 말 걸기만 하면 만들 수 있습니다. ChatGPT에 말 거는 것과 다르지 않고, 레이아웃이 무너져도 『에러가 나. 수정해 줘』라고 전하면 고쳐 줍니다.

Figma Make의 백엔드에는 무엇을 쓰나요?

데이터를 남겨야 하므로 백엔드 연동이 필요하며, Figma에서는 Supabase가 백엔드로 제안됩니다.

Figma Make로 만든 앱이 부서지면 어떻게 하나요?

과거 버전을 클릭하면 되돌릴 수 있습니다. 다만 되돌아가지 않은 적도 있으므로 파일째 『사본 만들기』로 저장해 두면 만일의 경우에도 거기서 재개할 수 있습니다.

Figma Make로 메신저 연동이나 급여 소프트웨어 연동은 가능한가요?

출퇴근 메신저 전송, 급여 계산 소프트웨어와의 데이터 연동, 월간 리포트 PDF 출력이 작성 가능한 항목입니다. PDF는 간단하지만 연동은 조금 어렵고, 일부는 수동 작성이 필요합니다.