Softr 노코딩 툴 체험기

최근 노코딩(No-code)툴이 급부상하면서, 개발 지식이 없어도 웹사이트를 쉽게 만들 수 있다고 하는데요.

그 중에서도 Softr는 Airtable과 연동하여 손쉽게 데이터 기반의 웹사이트를 제작할 수 있는 강력한 도구라고 합니다.

무료 버전으로 어디까지 만들 수 있는지 한번 사용해봤습니다.

 

https://www.softr.io/

Softr | No-Code App Builder | No Code Application Development for Portals and Web Apps

 

✔️시작해보기

1. App 만드는 방법 선택

처음에 App을 만들때 3가지 방법 중 하나를 선택하면 됩니다.

 

- Start from scratch  : 처음부터 새로 만들고 싶을때

- Start with a template : 어느 정도 구성되어 있어서 편하게 만들고 싶을때. Template 설명을 보면 어떻게 구성되어 있는지 알 수 있으니 보고 선택하시면 됩니다.

- Generate with AI : 프롬프트를 작성해서 AI에서 템플릿 만드는 것을 시키고 싶을때

 

저는 Job Listing Website 구직사이트 템플릿을 선택해서 진행해봤습니다.

 

2. Data Source 미리 선택

이때 data source를 선택하는데요.

간단히 만들고 싶어서 구글 시트를 선택했습니다.

구글 시트에 빈 파일 하나를 만들어 놓고 지정해도 됩니다.

웹페이지를 만들면서 구글 시트를 구성해도 됩니다. Sync를 하면 되기 때문이죠.

 

3. Pages 구상

템플릿에 있는 내용들이 내 공간으로 복사됩니다.

Pages 메뉴를 확인해보면 기본 페이지를 확인할 수 있습니다.

이 템플릿은 Add-job, Home 2개로 구성되어 있습니다.

어떤 App을 만들지 어느 정도 구상을 해놓고 필요한 Page들을 만들며 연결을 시켜놓아야 합니다.

 

✔️Softr의 편한 기능 - 페이지 자세히 만들기

1. 사용자 그룹별 구성

Page와 Block단위로 접근할 수 있는 권한을 설정할 수 있습니다.

 

예를 들어 Home화면에서 로그인에 따라 다르게 구성하고 싶으면 3개의 Block을 만들어 놓고 VISIBILITY 설정하면 쉽게 만들 수 있어요.

해당 Block을 선택하고 오른쪽 메뉴에서 VISIBILITY 탭을 선택하면 모든 사용자, 로그인 사용자, 비로그인 사용자 3개를 선택하면 됩니다.

2. 회원 가입 과정

테이블(시트) : users

 

Page를 하나 만들고 Add block을 하면 만들 수 있는 템플릿 목록이 나옵니다.

거기서 User Accounts 항목을 확인하면 회원가입, 로그인, 비밀번호 찾기 등이 제공되어서 

이 Block을 이용하면 쉽게 만들 수 있습니다.

 

3. 목록, 검색, 상세 페이지

테이블(시트) : job

 

List나 Grid, Item Details 템플릿을 확인하면 DataSource와 연결해서 목록, 검색을 바로 만들 수 있어요.

- Source 탭

: DataSource에 연결합니다.

 

- Content 탭

: 화면에 보여줄 항목을 ITEM FIELDS  통해 설정합니다.

연결된 DataSource 의 필드 항목들과 연결합니다.

: SEARCHBAR 항목을 통해 검색을 제공합니다.

Search by에 검색할 필드를 설정합니다.

 

- Action 탭

: Item 클릭시 이벤트를 설정할 수 있습니다.

클릭하면 상세 페이지로 이동하려면 상세 페이지를 새로 하나 만들고 거기로 넘기게 합니다.

이때 Datasource에 데이타가 잘 연결되어 있다면 데이타 필드에 "Softr Record ID"가 자동으로 추가되어 있는 것이 보입니다.

이건 Softr에서 관리용으로 만든 unique key로 보입니다.

상세페이지를 클릭하게 되면 URL 파라미터에 recordId에 해당 데이타 필드가 같이 넘어가면서 상세 페이지를 볼 수 있습니다.

 

4. Form 이용한 삽입 또는 수정

테이블(시트) : apply

1) 사용자가 직접 입력하게 할때

Form 필드값과 Datasource의 필드명을 매칭시켜서 바로 입력할 수 있습니다.

 

2) 입력없이 자동으로 값을 넘기고 싶을 경우

저는 상세 페이지에서 구인 정보를 보다가 바로 지원하게 하고 싶었습니다.

Form에는 버튼만 있고 상세 페이지의 구인 정보 job_id와 로그인된 user_id를 자동으로 넘기게 하려고 Hidden으로 만들었습니다.

구인 정보 job_id는 "URL parameter"를 선택하고 recordId를 입력하면 됩니다.

user_id는 "Logged-in user"에서 입력하고 싶은 변수를 선택하면 됩니다.

입력 날짜를 자동으로 넣고 싶으면 "Current time"을 선택하면 됩니다.

 

<Tip> 한 페이지에서 여러 DataSource를 사용하고 싶을때

Block당 하나의 Datasource만 설정할 수 있어서 새 Block을 만들어서 새로운 DataSource를 선택하면 됩니다.

 

 

✔️마지막 Publish 

무료 버전은 Publish를 1개만 할 수 있으면 https://xxxx.softr.app 으로 만들어집니다.

회원 가입, 구인 정보 검색, 지원 하기가 잘 동작하네요.

지원하기에서 값은 입력이 되는데, 잘못되었다는 오류가 발생하는데, 왜 그런지 모르겠네요.

 

✔️사용 후기

🔹장점

- 개발자가 아니더라도 프로토타입으로 App 만들기 좋네요.

- 엑셀 시트, Airtable과 연동되어 데이터베이스 만들기 편해요.

- App에 필요한 기본 페이지가 제공되어 몇 번의 클릭으로 바로 바로 만들 수 있어요.

 

🔹단점

- 좀 더 다양한 UI를 제공하고 싶은데, 무료 버전이라서 그런가? Block 템플릿을 못 찾겠어요.

(움직이는 이미지 갤러리를 구성하고 싶었어요)

- 무료 버전은 소개 페이지나 프로토타입 정도의 간단한 것은 되는데 좀 더 사용자 친화적인 UX를 제공하려면 유료 가입을 해야 합니다.

- 오류 발생했을때 자세한 로그를 볼 수 있으면 좋겠는데 그것도 못 찾았어요.(누가 좀 알려주세요)