돌아가기

[AI & Robot] 10-2 Backend

[email protected]
2026년 05월 07일
공개 Hanyang Univ 26-01

Part 3. Supabase: 우리 서비스의 똑똑한 '기억 장치'

1. Supabase의 4대 핵심 기능

  1. Authentication (회원가입/로그인)
  2. 누가 우리 앱의 사용자인지 확인합니다. 이메일 로그인뿐만 아니라 구글, 카카오 같은 소셜 로그인 열쇠도 여기서 관리합니다.
  3. Database (데이터 저장소)
  4. 사용자가 쓴 글, 좋아요 개수, 프로필 정보 등을 표(Table) 형태로 저장합니다. 엑셀과 비슷하지만, 수만 명이 동시에 접속해도 끄떡없습니다.
  5. Storage (파일 창고)
  6. 글자 데이터가 아닌 사진, 동영상, PDF 같은 무거운 파일들을 안전하게 보관하고 필요할 때 링크로 전달해 줍니다.
  7. Edge Functions (서버 로직)
  8. 결제 처리나 알림 발송처럼 보안이 아주 중요하거나 복잡한 계산이 필요할 때, 서버에서 몰래 실행되는 코드들입니다.

2. Lovable 코드 속의 '연결 고리' (어디에 숨어있나?)

Lovable에서 코드를 다운로드했을 때, "어떻게 내 앱이 수파베이스를 알아보지?"라는 의문을 가질 수 있습니다. 핵심 파일은 주로 다음 위치에 있습니다.

  1. .env 파일 (환경 변수): 프로젝트 루트(최상위)에 있습니다. 수파베이스의 주소(URL)와 비밀번호(Key)가 적혀 있는 **'비밀 통행증'**입니다.
  2. src/integrations/supabase/ 폴더: Lovable이 수파베이스와 대화하기 위해 만든 **'전용 통로'**입니다. 여기서 데이터의 형태(Schema)를 정의하고 통신을 준비합니다.
  3. src/lib/supabase.ts: 실제 코드에서 "데이터 가져와!"라고 명령할 때 사용하는 '전화기' 설정 파일입니다.
주의: 로컬에서 실행할 때는 .env.example 파일을 복사해 .env로 이름을 바꾸고 본인의 수파베이스 정보를 직접 입력해 주어야 엔진이 정상적으로 가동됩니다.

3. 수파베이스 대시보드: "직접 보고 수정하기"

학생들이 가장 신기해할 부분입니다. 코딩을 몰라도 웹사이트에서 직접 데이터를 관리할 수 있습니다.

  1. 직접 데이터 확인: Supabase 홈페이지에 로그인한 뒤 내 프로젝트의 **'Table Editor'**에 들어가면, 사용자들이 입력한 데이터가 실시간으로 쌓이는 걸 볼 수 있습니다.
  2. 직접 수정: 여기서 데이터를 직접 지우거나 내용을 바꾸면, 내가 만든 앱 화면에서도 즉시 내용이 바뀝니다. (이게 바로 백엔드의 힘입니다!)
  3. 회원 관리: 'Authentication' 메뉴에서는 우리 앱에 가입한 사람들의 이메일 리스트를 확인하고, 강제로 로그아웃시키거나 비밀번호를 초기화할 수도 있습니다.


Part 4. 웹을 앱으로 만드는 마법: Capacitor

우리가 지금까지 만든 것은 '웹사이트'입니다. 하지만 사용자는 폰에 설치되는 '앱'을 원하죠. 이 간극을 메우는 전략적인 선택지를 비교해 봅니다.

1. 모바일 앱 개발 방식 비교

비개발자 기획자로서 어떤 '길'을 선택하느냐에 따라 프로젝트의 속도와 비용이 완전히 달라집니다.

개발 방식주요 기술 스택 (Framework)난이도 및 특징
네이티브 (Native)iOS(Swift), Android(Kotlin)각 운영체제에 최적화되어 가장 빠르고 강력함. 하지만 두 번 따로 개발해야 해서 비용과 시간이 많이 듦.
크로스 플랫폼 (Cross-platform)Flutter, React Native한 번의 코딩으로 양쪽 앱을 동시에 만듦. 성능은 좋지만 별도의 개발 언어를 새로 배워야 함.
웹 래퍼 (Web-wrapper)Capacitor, WebView이미 만든 웹(HTML/CSS/JS)을 앱으로 포장. 개발 속도가 압도적으로 빠르며 기존 웹 자산을 100% 활용 가능.

2. Capacitor: 웹에 날개를 달아주는 컨테이너

  1. 개념: Capacitor는 우리가 만든 **웹 앱을 네이티브 앱처럼 작동하게 감싸주는 '보호막'**입니다.
  2. 전략적 가치: * 우리가 파트 1~3에서 배운 React와 Supabase 지식을 그대로 사용해 앱을 출시할 수 있습니다.
  3. 카메라, GPS, 푸시 알림 등 스마트폰의 필수 기능을 자바스크립트 명령어로 쉽게 제어하게 해줍니다.
비유: "웹이라는 맛있는 요리를, '앱'이라는 세련된 배달 가방(Capacitor)에 담아 사용자에게 전달하는 것과 같습니다. 요리(웹)를 다시 할 필요가 없죠."

3. 미래의 변화: AI와 네이티브 도구의 결합

과거에는 비개발자가 Android Studio나 Xcode를 켜는 것조차 거대한 벽이었지만, 이제는 상황이 바뀌고 있습니다.

  1. 채팅형 AI의 진화: 이제는 안드로이드 스튜디오 내부에서도 AI(Gemini 등)와 직접 채팅하며 코드를 짤 수 있습니다.
  2. 장벽의 붕괴: "이 버튼 위치를 옮겨줘" 혹은 "로그인 기능을 연결해줘"라고 지시하면, AI가 복잡한 설정 파일들을 대신 수정해줍니다.
  3. 하이브리드 전략: 지금은 Capacitor로 빠르게 웹을 앱으로 전환하는 것이 효율적이지만, AI의 도움을 받는다면 조만간 비개발자도 직접 Android Studio나 Xcode에서 네이티브 기능을 정교하게 만지는 것이 충분히 가능한 옵션이 될 것입니다.