[Softr] 노코드 웹빌더 소개 및 랜딩페이지 만들기

Softr 소개

softr는 코드를 몰라도 누구나 쉽게 웹사이트를 제작할 수 있는 강력한 노코드 플랫폼이다.

http://softr.io 

Build client portals and internal tools powered by Airtable or Google Sheets data, without code | Softr

 드래그 인 드롭 방식의 인터페이스를 통해, 제공되는 템플릿과 빌딩 블록을 사용하여 손쉽게 웹사이트를 구축할 수 있다. 또 하나의 큰 강점은 Airtable 또는 구글 스프레드시트를 CMS로 사용할 수 있다는 점이다. 스프레드시트에 Data를 넣으면 폼에 맞게 자동으로 포스팅이 되어, 콘텐츠 업데이트가 아주 용이하다. 다른 웹빌더와는 다르게 무료플랜에서 CMS기능은 물론 모바일 호환성(반응형 웹사이트), 기본 SEO 설정, Custom Domain을 설정까지 할 수 있어서 빠르게 아이디어를 구현하고 테스트할 수 있다.

 

랜딩페이지 만들기

Softr 회원가입 이후 아래의 방법으로 진행한다.

 

1단계: 템플릿 선택

- Softr studio에서 Templates - View More를 선택

 

- 검색창에 'landing'을 입력하고, 원하는 템플릿을 선택하고 Create Application 클릭.(여기서는 Clean Landing Page 선택함)

 

- App이 생성되고, 편집하는 부분을 보면 크게 세부분으로 나뉜다. 좌측 사이드바(Page설정, 전체 테마, 세팅등), 중앙부(블록 삽입/삭제 및 Preview), 우측 편집부(Contents 및 미세 스타일 수정)

 

2단계: 컨텐츠 작성

- 중앙부의 블록을 확인하여 Header, Hero Section등 필요한 부분을 남기고 삭제

- 각 블록을 선택하면 우측 편집부에 Contents를 수정할 수 있고, 원하는 내용으로 수정한다

- 텍스트와 그림 위치는 블록마다 다르므로 원하는 블록을 선택하고 내용을 수정한다. 

 

3단계: 디자인 조정

- 블록의 여백, 배경 설정은 STYLES에서 수정 가능하고, 각 Text는 붓표시를 클릭하면 폰트, 사이즈등을 설정할 수 있다.

 

4단계: 모바일 최적화 확인

- softr에서 제작한 페이지는 모바일에서 자동으로 최적화 된다. 미리보기 기능으로 확인하고 필요시 수정한다.

 

5단계: 랜딩 페이지 발행

- 페이지 우측 상단의 'Publish'버튼을 클릭하고, Subdomain에 원하는 이름으로 수정한다.(Custom Domain이 있다면 별도 수정)

- Subdomain 이름의 사용 여부를 확인하고 Publish 버튼을 클릭하면 완료된다.

 

해당 도메인으로 접속하면 완성된 페이지를 바로 확인할 수 있다.

 

이같은 간단한 페이지의 경우 Notion을 사용하면 되나, 추후 확장성을 고려하여 Softr를 사용해보는 것을 추천한다.