소개
저는 경찰서에서 자원봉사를 하고있습니다. 봉사를 하는 중, 경찰서 직원분들이 가정폭력이나 데이트폭력 피해자분들을 임시보호시설(Transition House)로 인도하셔야 할때, 매번 시설에 빈 방이 있는지 확인하려면 기관마다 전화를 돌려야 하는 상황이라는 걸 알게 되었습니다.
Figma 스터디에서 Figma Make를 통해 대시보드를 성공적으로 구현시키신 케이스들을 보고, "실시간으로 임시보호시설 접수 가능 여부를 확인할 수 있는 대시보드가 있다면 어떨까?" 하는 생각이 들었습니다.
노코드 툴인 Figma Make와 database 역할을 하는 Supabase를 연동해 보기로 결심했습니다.
진행 방법
Supabase에서 임시보호시설의 availability 정보를 저장할 테이블을 만들었습니다 (현재로서는 더미 데이터입니다).
Make에서 해당 DB와 연결해 데이터를 불러오는 시나리오를 구성했습니다.
사용한 도구
Figma Make (자동화 시나리오 작성)
Supabase (데이터베이스 및 API)
ChatGPT & Claude AI (문제 해결 조언)
시행착오 1: 데이터 import 확인의 어려움
Make에서 Supabase와 연동은 잘 되었습니다. Figma Make에서 친절하게 Supabase에 연결을 하겠냐고 물어보더라고요.
데이터가 실제로 잘 import 되었는지, 어떤 값이 들어오는지 확인하기 어려웠어요.
쿼리 결과를 마크다운(.md) 형태로 보여달라고 시도했지만 잘 되지 않았습니다.
프롬프트를 잘못넣었던걸까요? 데이터 import 결과를 보여달라고 했는데 Figma Make가 만들어낸 md파일에는 엉뚱한 정보들만 정리해 놓아져있었습니다.
결국 프로토타입 내 화면에 Supabase를 쿼리하여 데이터를 직접 디스플레이하는 방식으로 우회했습니다.
시행착오 2: RLS (Row Level Security) 문제
처음에는, 프로토타입 화면에 디스플레이된 Supabase 쿼리 결과가 계속 비어있다고 나와서 왜 그런지 한참을 헤맸어요.
Claude와 ChatGPT에게 각각 물어본 결과,
"Supabase의 RLS 설정이 데이터 접근을 막고 있는 건 아닌가요?"
라는 조언을 ChatGPT가 해주었습니다.결국 RLS 설정을 비활성화하니 쿼 리 결과가 나타나기 시작했습니다.
RLS에 대해 잘 모르지만, 이 점에서 걱정이 되기 시작했습니다. RLS를 포함 보안 설정을 해제해야 Figma Make와 연동을 시킬수가 있다면, Figma Make만으로 개발을 시도했을시 보안문제가 생길수가 있겠다고 생각했습니다.
시행착오 3: UI가 내 맘대로 안 된다!
Figma Make로 진행하면 할수록, UI가 갑자기 변하는 경우가 생겼습니다.
원래는 이렇게 생겼던 것이
갑자기 이런 UI형식으로 바뀌었습니다. 제가 물어보지도 않았는데요!!!
아직은 AI의 불완전성을 보여주는 듯 했습니다.
결과와 배운 점
프로토타입은 이 링크에서 보실수있습니다. https://dragon-posts-48743338.figma.site
Supabase 연동 자체는 쉽지만, 데이터 흐름을 눈으로 검증하는 과정은 꽤 복잡했습니다.
특히 노코드 툴만 사용하다 보니 RLS 같은 백엔드 보안 설정의 존재를 모르고 진행하게 되는 위험성도 있었습니다.
앞으로는 RLS를 포함한 권한 제어와 관련된 내용을 좀 더 학습해야겠다 고 생각했습니다! 혹시 보안 설정을 해지하지 않고도 진행할수 있는 방법이 있으면 꼭 알려주세요.
또 한 쿼리 결과를 시각화하는 방법도 정리해나가야겠다고 느꼈습니다.