게시
코드 내보내기
앱을 Setherion 밖으로 ZIP이나 GitHub, GitLab으로 가져가는 방법, 프로젝트에 담긴 것, 다른 곳에서 실행하는 방법, 그리고 여전히 Setherion에 기대는 부분을 안내해요.
모든 앱은 진짜 React 코드이고, 내가 가져갈 수 있어요. 이 페이지에서는 에디터에서 밖으로 내보내는 방법, 받게 되는 것, 내 컴퓨터나 호스트에서 실행하는 방법, 그리고 밖으로 내보낸 뒤에도 여전히 Setherion에 의존하는 것을 다뤄요.
코드를 가져가는 기능은 모든 유료 요금제인 Pro와 Business에 포함돼요. Free에서는 에디터에서 코드를 읽고 검색할 수 있지만, 복사하거나 다운로드할 수는 없어요. 데이터는 달라요. 모든 요금제에서 아래에 설명한 대로 내보낼 수 있어요.
내보내는 방법
| 방법 | 받는 것 | 위치 | 요금제 |
|---|---|---|---|
| Download ZIP | 프로젝트를 .zip 파일로 | Publish 옆의 폴더 아이콘 | Pro와 Business |
| Export to GitHub | 내 GitHub 계정의 리포지토리 | Publish, 이어서 Export to GitHub | Pro와 Business |
| Export to GitLab | 내 GitLab.com 계정의 리포지토리 | Publish, 이어서 Export to GitLab | Pro와 Business |
| Native project | 앱 전체를 스마트폰 프로젝트로, Android Studio와 Xcode에서 빌드해요 | Publish, 이어서 Publish to app stores, 이어서 Native | Pro와 Business |
| Your data | 내 Supabase용 SQL, 또는 컬렉션 하나의 CSV | Manage, 이어서 Cloud | 모든 요금제 |
처음 네 가지는 앱이 빌드될 때까지 기다려야 해요. 빌드나 수정이 실행되는 중이거나 아직 아무것도 빌드되지 않았을 때는 그 버튼이 회색이에요.
ZIP 다운로드하기
빌드가 끝날 때까지 기다리기
Setherion이 앱을 작성하거나 확인하는 동안에는 폴더 아이콘이 회색이에요.
폴더 아이콘 누르기
Publish의 오른쪽에 있고, 가리키면 Download ZIP이라고 나와요. Free 요금제에서는 왕관이 붙어 있고, 대신 업그레이드 안내가 열려요.
압축 풀기
파일 이름은 coffee-shop.zip처럼 앱 이름을 따라요. 안에는 그것만으로 실행되는 프로젝트가 들어 있어요. 다른 곳에서 실행하기를 보세요.
GitHub으로 내보내기
열기
Publish를 누르고, 이어서 Export to GitHub을 누르세요.
GitHub 연결하기
Connect with GitHub을 누르고 승인하세요. 앱 가져오기가 비공개 리포지토리에 쓰는 것과 같은 연결이에요. 연결하고 싶지 않다면 Use a token instead (PAT) 항목을 열어 repo 스코프가 있는 개인 액세스 토큰을 붙여 넣으세요. 붙여 넣은 토큰은 브라우저에만 보관돼요.
리포지토리 이름 정하기
Repository name을 입력하세요. 이름은 소문자로 바뀌고, 문자, 숫자, 점, 하이픈, 밑줄 외의 것은 하이픈이 돼요.
Private repository 선택하기
처음에는 이 칸이 체크되어 있어요. 이 설정은 Setherion이 리포지토리를 만들 때만 의미가 있어요. 같은 이름의 리포지토리가 이미 있으면 업데이트되고, 공개 여부는 그대로 남아요.
Export to GitHub 누르기
몇 초 뒤 창에 Pushed to GitHub! 메시지가 나타나고, Open repo를 누르면 리포지토리로 이동해요.
리포지토리를 업데이트하려면 언제든 다시 내보내세요. 내보낼 때마다 기본 브랜치에 있는 기록 위에 “Update from Setherion”이라는 커밋이 하나 추가되고, 프로젝트의 모든 파일이 다시 쓰여요. 프로젝트에도 있는 파일을 리포지토리에서 바꿨다면 그 파일은 교체되니, 내 작업은 내 브랜치에서 하세요. 프로젝트에 없는 파일은 그대로 둬요.
Setherion이 리포지토리를 만들 때 리포지토리의 설명은 내가 앱을 위해 쓴 요청의 앞부분으로 채워져요. Private repository를 해제하기 전에 이 점을 기억하세요.
GitLab으로 내보내기
GitHub과 같은 방식으로 작동해요.
열기
Publish를 누르고, 이어서 Export to GitLab을 누르세요.
GitLab 연결하기
Connect with GitLab을 누르거나, Use a token instead (PAT) 항목을 열어 api 스코프가 있는 개인 액세스 토큰을 붙여 넣으세요.
이름을 정하고 내보내기
Repository name을 정하고 Private repository로 할지 정한 다음, Export to GitLab을 누르세요. Open repo를 누르면 그곳으로 가요.
리포지토리는 GitLab.com의 내 사용자 이름 아래에 만들어져요. 체크를 해제하지 않으면 비공개로 만들어지고, 이미 있는 리포지토리는 GitHub과 똑같이 업데이트돼요.
팀 워크스페이스에서는 GitHub나 GitLab으로의 내보내기가 감사 로그에 기록되고, 어느 리포지토리로 갔는지도 함께 남아요.
프로젝트에 담긴 것
ZIP과 두 리포지토리에는 같은 프로젝트가 담겨요. 앱 자체의 파일, 그리고 앱을 실행하는 데 필요한 주변 파일이에요.
| 파일 | 설명 |
|---|---|
src/ | 앱 자체예요. App.js, components에 있는 화면과 부품, lib에 있는 데이터가 들어 있어요. |
src/main.jsx | 앱을 시작하는 진입점이에요. 앱이 직접 쓰지 않았다면 추가돼요. |
index.html | 앱이 열리는 페이지예요. 앱의 이름이 제목으로, 화면의 언어가 언어 설정으로 들어가요. |
vite.config.js | 앱을 실행하고 빌드하는 도구인 Vite의 설정이에요. JSX를 일반 .js 파일에 둘 수 있게 해 주고, 앱은 이렇게 작성돼 있어요. |
package.json | 앱이 실제로 가져다 쓰는 패키지, 빌드 도구, 그리고 세 가지 스크립트인 dev, build, preview가 들어 있어요. |
README.md | 실행하는 방법이에요. |
.gitignore | node_modules, dist, 내 .env 파일이 Git에 들어가지 않게 해요. |
.env.example | ZIP에만 있어요. 내 Supabase를 쓰는 앱에 필요한 두 값이 채워 넣을 수 있게 주석으로 적혀 있어요. |
supabase/schema.sql | 앱이 보관하는 테이블이 SQL로 들어 있어요. 앱이 데이터를 저장할 때만 있고, 테이블만 들어 있어요. 행은 들어 있지 않아요. |
src/lib/setherion.js | Setherion에 있는 앱의 백엔드와 통신하는 작은 클라이언트예요. 앱이 로그인을 받거나, 데이터를 저장하거나, 폼을 보내거나, AI를 호출할 때만 있어요. 앱의 id와 Setherion의 주소가 들어 있어요. |
이미지는 프로젝트에 복사되지 않아요. 코드가 웹 주소로 연결하기 때문에, Setherion이 저장한 곳에서 계속 불러와져요.
다른 곳에서 실행하기
앱을 실행할 컴퓨터나 호스트에 Node.js가 필요해요. npm은 Node.js와 함께 설치돼요.
프로젝트 가져오기
ZIP의 압축을 풀거나 내 리포지토리를 클론하세요.
필요한 것 설치하기
터미널에서 프로젝트 폴더를 열고 npm install을 실행하세요.
실행하기
npm run dev는 내 컴퓨터에서 앱을 시작해요. Vite가 열어야 할 주소를 출력하는데, 보통 http://localhost:5173이에요.
호스트용으로 빌드하기
npm run build는 완성된 사이트를 dist라는 폴더에 써요. 정적 파일이라서 어떤 정적 호스트에서든 제공할 수 있어요.
npm install
npm run dev
npm run build앱에 페이지가 둘 이상이라면, 호스트가 모든 경로에 index.html로 응답하도록 설정하세요. 대부분의 정적 호스트는 이것을 싱글 페이지 앱 설정이나 리라이트라고 불러요. 이 설정이 없으면 /pricing처럼 직접 연 페이지는 앱 대신 “not found”가 돼요. Setherion에서는 이 설정이 자동으로 되어 있어요.
내 Supabase를 쓰는 앱이라면 .env.example을 .env로 복사하고 VITE_SUPABASE_URL과 VITE_SUPABASE_ANON_KEY를 채우세요. 둘 다 설계상 공개 값이에요. 호스트도 사이트를 빌드할 때 같은 두 값이 필요해요.
여전히 Setherion에 의존하는 것
내보낸 코드는 게시된 앱이 실행하는 코드와 같아서, 서버가 뒤에 있는 모든 것에 대해서는 여전히 Setherion에 접속해요. 어떤 부분이 그런지 알면 밖으로 옮기기 전에 무엇을 해야 하는지 알 수 있어요.
| 앱의 부분 | 내보내기가 하는 일 | 할 일 |
|---|---|---|
| 로그인과 저장된 데이터 | src/lib/setherion.js에 앱의 id가 들어 있어서, 내보낸 앱은 게시된 앱과 같은 계정과 레코드를 읽고 써요. | 그것이 필요한 동안은 앱을 Setherion에 두세요. 의존하지 않으려면 데이터를 아래의 내 Supabase로 옮기세요. |
| 폼, AI, 연결된 서비스, 시크릿 | 같은 파일을 거쳐요. Setherion이 키를 보관하고, 호출을 하고, 각 호출을 연동 크레딧으로 세요. 시크릿 키는 내보낸 코드에 절대 쓰이지 않아요. | 서비스를 계속 연결해 두세요. 또는 그 호출을 내 서버 코드와 내 키로 바꾸세요. |
| 결제 | 쇼핑몰의 결제 화면은 Setherion에 요청하고, Setherion이 내 Stripe 키를 보관하다가 Stripe가 결제됐다고 알려 주면 주문을 기록해요. | 위와 같아요. 앱에 Stripe를 계속 연결해 두거나, 내 서버에 직접 결제를 만드세요. |
| 이미지와 동영상 | 웹 주소로 연결되고 Setherion이 저장해요. | 앱을 삭제하기 전에 필요한 것을 다운로드하세요. 앱과 함께 삭제돼요. |
| 내 Supabase | 이미 내 Supabase를 쓰는 앱은 데이터에 Setherion을 쓰지 않아요. | 위에서처럼 두 VITE_ 값을 채우세요. |
클라이언트는 브라우저에서 Setherion의 API를 호출하고, 그 API는 어떤 주소에서 오는 호출도 받아요. 그래서 내보낸 앱은 어디에 호스팅하든 접속할 수 있어요. 앱을 삭제하거나 백엔드를 일시 중지하거나 그달의 연동 크레딧 한도를 넘으면, 게시된 앱과 마찬가지로 그 호출이 멈춰요. 고급 설정과 연동 크레딧을 보세요.
요금제가 끝나면 계정은 Free로 옮겨지고, Free에서는 코드를 가져갈 수 없어요. 그 전에 내보내거나, 필요한 동안 요금제를 유지하세요.
데이터를 내 Supabase로 옮기기
Setherion의 백엔드를 떠나려면 Manage를 열고, 이어서 Cloud, 이어서 Advanced settings를 열어 Move this app to your own Supabase를 쓰세요. 모든 요금제에서 쓸 수 있고, 앱의 행을 내보낼 수 있는 사람은 앱의 소유자와 관리자뿐이에요.
- Build the export는 내 테이블의 SQL과 현재 상태의 행을 써요. 컬렉션마다 처음 2,000개 행이 들어가고, 잘린 것이 있는지 볼 수 있도록 실제 전체 개수가 함께 표시돼요.
- 내 Supabase 프로젝트에서 실행해요. Supabase 계정이 연결되어 있으면 Run it for me로 실행하고, 아니면 복사하거나
.sql파일을 다운로드해요. - Rewrite the app for my Supabase는 그다음 어시스턴트에게 앱이 내 프로젝트를 쓰도록 바꿔 달라고 요청해요. 다른 수정처럼 크레딧이 들고, Supabase 커넥터가 필요해요.
세 가지는 함께 옮겨지지 않아요. 첫째는 사람들의 로그인 정보로, 비밀번호는 옮길 수 없어서 사람들이 다시 회원가입해야 해요. 둘째는 업로드한 이미지와 동영상으로, Setherion에 남아요. 셋째는 컬렉션마다 2,000개를 넘는 행이에요. 컬렉션 하나만 내보내려면 Cloud, 이어서 Database에 있는 Export CSV로 가장 최근 레코드를 최대 10,000개까지 다운로드하세요. 고급 설정과 데이터베이스를 보세요.
스마트폰 프로젝트
Native는 앱 전체를 스마트폰 프로젝트로 제공해요. ZIP으로 받거나 GitHub 리포지토리로 푸시할 수 있어요. 위의 프로젝트에 Capacitor 셸을 더한 것으로, Android Studio와 Mac의 Xcode에서 빌드하고, Node 22 이상이 필요해요. 웹 프로젝트와 같은 방식으로 여전히 Setherion에 접속해요. 명령어, 앱 ID, 서명은 네이티브 프로젝트를 보세요.
앱 가져오기
가져오기는 반대 방향이에요. 코드가 담긴 리포지토리나 ZIP, Lovable, Bolt, v0, Base44에서 만든 앱, 또는 스프레드시트를 가져올 수 있어요. 가져오기는 복사가 아니라 다시 만들기예요. Setherion이 코드를 읽고, 그 코드가 하는 일을 쉬운 말로 설명한 글을 쓴 다음, 그 설명으로 앱을 다시 빌드해요. 여기서 내보낸 리포지토리도 마찬가지예요. 새 앱 비용에 읽는 비용이 더해지고, 첫 번째 가져오기는 무료예요. 앱 가져오기를 보세요.
이 페이지가 도움이 됐나요?