디자인과 코드

용도: Figma에서 만든 디자인에 맞춰 앱을 만드는 것이에요. Setherion은 프레임을 렌더링하고, 레이아웃, 색상, 글꼴, 간격을 읽어서 그것을 바탕으로 만들어요.

연결: Connectors 페이지에서 Connect Figma를 누르고, Figma에서 로그인한 뒤 돌아오세요. 복사할 키는 없어요. 접근은 읽기 전용이라서 Setherion이 내 파일을 바꾸는 일은 절대 없어요. 앱을 만드는 동안에만 사용되고, 게시하는 앱에는 포함되지 않아요. Figma에는 Setherion이 일으킨 사용 요금이 표시되지 않아요.

사용 방법: 에디터에서 + 버튼을 누르고 Design, Import from Figma를 차례로 선택하세요. 대시보드에서는 + 아래의 Import a design에 있고, 여기에는 Canva도 함께 나와요. Figma에서 원하는 프레임을 오른쪽 클릭하고 Copy link to selection을 선택한 다음, 링크를 붙여넣고 Import frame을 누르세요. 프레임은 그에 대한 설명, 정확한 색상, 글꼴, 간격과 함께 메시지에 첨부되고, 앱은 그에 맞춰 다시 만들어져요.

요청 예시: “홈페이지를 이 프레임에 맞게 다시 만들어 주세요.” “내 Figma 디자인의 색상과 글꼴을 사용해 주세요.”

알아 두면 좋은 점: 링크는 디자인을 가리켜야 해요. 예를 들어 figma.com/design/KEY?node-id=1-234 같은 형태예요. 파일 목록 화면의 주소창에 있는 주소는 디자인 링크가 아니고, 가져오기 화면이 그렇게 알려 줘요. 링크가 거부되면 연결된 Figma 계정이 그 파일을 열 수 있어야 해요. Figma가 연결을 받아 주지 않으면 가져오기 화면이 다시 연결하라고 안내해요.

용도: Canva 디자인(메뉴, 전단지, 배너)을 배치할 이미지로 앱에 가져오는 것이에요. 페이지에 올리는 아트워크이고, 다시 만들 레이아웃이 아니에요.

연결: Connect Canva를 누르고, Canva에서 로그인한 뒤 돌아오세요. 복사할 키는 없어요. Setherion은 디자인을 가져올 때만 내 디자인을 읽고 내보내며, Canva에서는 아무것도 바뀌지 않아요.

Canva에서 가져오기: 에디터에서 + 버튼을 누르고 Design, Import from Canva를 차례로 선택하세요. 대시보드에서는 + 아래의 Import a design에 있어요. Canva에서 디자인을 열고 브라우저의 주소를 복사해서(주소에 /design/이 들어 있어야 하고, 짧은 canva.link 주소는 쓸 수 없어요) 붙여넣은 다음 Import design을 누르세요. 디자인은 내 것이거나 나와 공유된 것이어야 해요.

요청 예시: “방금 가져온 메뉴를 메뉴 페이지에 넣어 주세요.” “그 배너를 홈페이지의 히어로 영역에 사용해 주세요.”

제한:

• 디자인의 처음 세 페이지가 이미지로 채팅에 도착해요.
• 이미지는 만드는 동안 한 번 내보내진 뒤 앱의 다른 이미지와 함께 호스팅돼요. Canva 자체 내보내기 링크는 하루 뒤에 작동하지 않게 되므로, 앱은 실행되는 동안 Canva에 요청하지 않아요.
• Canva Free는 디자인을 원래 크기보다 많이 키울 수 없어요. Canva가 큰 내보내기를 거부하면 Setherion은 디자인 원래 크기로 다시 요청해요.
• Canva는 한 사람이 몇 분 안에 할 수 있는 내보내기 횟수를 제한해요. 그렇다는 메시지가 나오면 기다렸다가 다시 시도하세요.

용도: 코드를 가지고 나가고, 코드를 가져오는 것이에요. 내보내기는 앱을 내 저장소에 일반적인 Vite와 React 프로젝트로 올려 줘요. 가져오기는 이미 저장소에 있는 앱을 다시 만들어요.

연결: Connect GitHub을 누르고 로그인해서 승인하세요. 내보내기 창 안의 Connect GitHub을 써도 돼요. 이 접근은 푸시하라고 요청할 때 사용되고, 게시하는 앱에는 포함되지 않아요. 비공개 저장소도 포함돼요.

내보내기: 에디터에서 Publish 메뉴를 열고 Export to GitHub을 선택하세요. 저장소 이름을 정하고, Private repository(기본값)로 할지 선택한 다음 버튼을 누르세요. 저장소가 없으면 새로 만들어져요. 언제든 다시 내보내면 최신 변경으로 업데이트돼요.

가져오기: 대시보드에서 + 버튼을 누르고 Import an app, GitHub을 차례로 선택하세요. 거기서 GitHub을 연결하면 비공개 저장소를 포함한 내 저장소를 볼 수 있고, 공개 저장소의 주소를 붙여넣을 수도 있어요. React, Next.js, Vue, 일반 HTML 등 어떤 웹 앱이든 가능해요. 코드를 읽는 과정은 앱이 어떻게 만들어졌는지가 아니라 앱이 무엇을 하는지를 살펴봐요. 시크릿 파일과 키는 제외돼요. 앱 가져오기를 참고하세요.

제한: 내보내기는 유료 요금제에 포함돼요. Free에서는 버튼이 업그레이드하라고 안내해요. 가져오기에는 새 앱 비용에 코드를 읽는 비용이 더해지고, 첫 번째 가져오기는 무료예요. 요금제와 크레딧을 참고하세요. 데이터베이스의 레코드는 가져오기로 넘어오지 않고, 구조만 넘어와요.

알아 두면 좋은 점: 내보내기는 채팅에 입력하는 요청이 아니라 Publish에 있는 버튼이에요.

용도: GitHub의 내보내기와 같고, GitLab용이에요. 코드를 내 저장소에 넣어요.

연결: Connect GitLab을 누르고 로그인해서 승인하세요. 내보내기 창 안의 Connect GitLab을 써도 돼요. 푸시할 때 사용되고, 게시하는 앱의 일부가 되는 일은 없어요.

내보내기: 에디터에서 Publish 메뉴를 열고 Export to GitLab을 선택하세요. 저장소 이름을 정하고, Private repository(기본값)로 할지 말지 선택한 다음 Export to GitLab을 누르세요. 다시 내보내면 업데이트돼요. 실행할 수 있는 Vite와 React 프로젝트예요.

제한: 내보내기는 GitHub과 마찬가지로 유료 요금제에 포함돼요. GitLab에는 가져오기가 없어요. GitLab 프로젝트의 앱을 가져오려면 ZIP으로 다운로드한 다음 앱 가져오기의 ZIP 가져오기를 사용하세요.