김트러플

김트러플님의 아티클

김트러플

김트러플

Webflow 써본 사람이 Softr를 써봤을 때

Screenshot 2024-09-29 at 6.37.25 PM.png

안녕하세요. 저는 Webflow를 사용해서 홈페이지를 만든 경험이 있는데요.

이번에는 Softr를 사용해서 랜딩페이지를 만들어봤습니다.

ChatGPT에게 물어봤을 때 두 플랫폼은 다음과 같은 차이가 있다고 합니다.

1. 기능과 복잡성

- Softr: Softr는 비기술적인 사용자들이 간단한 웹사이트나 웹 애플리케이션을 쉽게 만들 수 있도록 설계되었습니다. Softr는 Airtable과 같은 도구와의 통합을 통해 백엔드 기능을 제공합니다. 주로 노코드(no-code) 방식으로 작업하며, 템플릿을 선택하고 약간의 커스터마이징만으로 간단한 사이트를 빠르게 만들 수 있습니다.

- Webflow: Webflow는 더 많은 사용자 정의와 복잡한 기능을 제공합니다. 사용자들은 시각적으로 디자인하면서 코드 수준의 제어도 할 수 있어, 복잡한 레이아웃이나 인터랙션이 필요한 사이트에 적합합니다. 따라서 디자인에 더 많은 자유를 주며, HTML, CSS, JavaScript에 익숙한 사용자는 더 심화된 커스터마이징이 가능합니다.

2. 사용 용이성

- Softr: Softr는 초보자에게 친화적인 UI와 간단한 인터페이스로 구성되어 있습니다. 몇 번의 클릭만으로 사이트를 만들 수 있어, 기술 지식이 부족한 사용자에게 매우 유리합니다.

- Webflow: Webflow는 디자인 도구와 비슷한 UI를 제공하지만, 고급 사용자 정의를 위해서는 디자인과 코딩에 대한 지식이 필요할 수 있습니다. 따라서 초보자가 처음에 적응하는 데 시간이 걸릴 수 있지만, 적응 후에는 강력한 기능을 활용할 수 있습니다.

3. 템플릿 및 디자인 옵션

- Softr: Softr는 간단한 웹사이트와 대시보드에 적합한 템플릿을 제공합니다. 디자인적인 자유도는 제한적이지만, 기본적으로 제공되는 템플릿이 세련되고 깔끔하게 구성되어 있어 빠르게 시작할 수 있습니다.

- Webflow: Webflow는 매우 세부적인 디자인 제어를 허용하며, 사용자는 제로부터 완전한 맞춤형 디자인을 만들 수 있습니다. 또한, 다양한 고급 애니메이션 및 인터랙션 기능도 제공하여 고유한 사용자 경험을 구현할 수 있습니다.

4. 통합 및 기능 확장

- Softr: Softr는 주로 Airtable과의 통합을 중심으로 설계되어 있으며, 이를 통해 데이터를 쉽게 관리할 수 있습니다. 통합된 기능 자체는 제한적이지만, 단순한 웹사이트나 앱을 제작할 때는 충분히 활용할 수 있습니다.

- Webflow: Webflow는 다양한 타사 서비스와의 통합이 가능하며, API를 이용해 기능을 확장할 수도 있습니다. 따라서 커머스 사이트, 블로그 등 다양한 유형의 웹사이트를 구축하는 데 적합합니다.

5. 가격 정책

- Softr: Softr는 무료 플랜과 다양한 유료 플랜을 제공하며, 대부분의 개인 사용자나 작은 프로젝트에는 무료 플랜으로도 충분합니다. 복잡한 기능이 필요할 경우 유료 플랜으로 업그레이드가 필요할 수 있습니다.

- Webflow: Webflow는 다양한 플랜을 제공하지만, 전문적인 기능을 필요로 할 경우 비용이 높을 수 있습니다. 특히, 전자 상거래와 같은 고급 기능을 사용할 때는 더 높은 요금제를 선택해야 합니다.

6. 목표 사용자

- Softr: 주로 비즈니스 사용자, 스타트업, 그리고 프로토타입을 빠르게 제작하고자 하는 개발자 또는 비개발자를 위한 도구입니다.

- Webflow: 디자이너, 프리랜서, 대행사, 그리고 맞춤형 웹사이트를 필요로 하는 고객을 위해 설계된 도구입니다. 디자인의 자유도가 높기 때문에 전문적인 디자인과 개발이 필요한 프로젝트에 적합합니다.

사용해보면서 느꼈던건 정말 간단한 페이지를 만드는데는 템플릿들을 잘 제공하여 Softr가 매우 편리한 점들이 보였지만 Webflow의 자유도를 맛 본 입장에서는 아쉬운 부분들이 많더라구요.

가장 불편했던건 데스크톱 화면과 모바일 화면을 구분하여 폰트 사이즈를 다르게 주기 위해서는 사용자 정의 CSS를 이용해야 하는 것이 상당히 불편하더라구요. 랜딩페이지라도 최소한의 반응형 디자인을 반영하고 싶었는데, 커스텀 코드로 작성하는 것은 너무 불편해지더라구요.

3
0
김트러플

김트러플

FlutterFlow 그게 뭐야?

안녕하세요. 저는 Webflow, Bubble과 같은 노/로우-코드에 관심이 많았는데 최근 FlutterFlow라는 도구를 알게되어 공유드려보고자 합니다.

FlutterFlow Software - FlutterFlow Low-Code App Builder For Native Mobile Applications.

FlutterFlow는 앱 개발을 위한 노코드 툴이에요. Webflow가 웹사이트 디자인과 구축을 코드 없이도 가능하게 해줬다면, FlutterFlow는 모바일과 웹 앱을 비슷한 방식으로 만들 수 있게 해주는 도구죠. 특히 Flutter라는 구글의 프레임워크를 기반으로 하고 있어서, iOS와 안드로이드 둘 다 커버 가능합니다.

간단히 살펴봤을 때 다음과 같은 특징들이 있는데요.

  • 크로스 플랫폼 지원: 한 번 디자인한 앱이 iOS와 Android에서 다 돌아간다는 건 정말 큰 장점이죠. Webflow로 만든 웹사이트도 반응형으로 디자인해서 여러 기기에서 돌아가게 하는 것처럼요.

  • Firebase와의 완벽한 통합: 만약 백엔드가 필요한 앱을 만들고 싶다면? 걱정 마세요! FlutterFlow는 Firebase와 같은 백엔드 서비스와도 완벽하게 연동됩니다. 서버 설정 같은 골치 아픈 과정도 사라지는 거죠.

  • 쉬운 사용성: Webflow처럼 드래그 앤 드롭 방식으로 UI를 설계할 수 있어요. “개발? 코딩? 나는 그냥 디자이너인데...”라고 걱정했던 사람도 충분히 접근 가능하죠. 게다가 Webflow에서의 감각을 그대로 활용할 수 있답니다.

  • 커스터마이징 가능: 기본적으로 노코드지만, 만약 코드에 익숙해지면 앱을 더 세부적으로 커스터마이징할 수 있는 로우코드 기능도 있어요. 마치 Webflow에서 코드 삽입하는 것처럼 말이죠.

FlutterFlow는 앱을 직접 만들고 싶거나, 클라이언트가 “이 웹사이트와 연동되는 모바일 앱도 필요해”라고 요청할 때 아주 유용할 것 같요. 특히 기존에 Webflow로 만든 웹사이트를 앱으로 확장하고 싶다면 아주 적합한 도구가 될 것 같아요!

저희는 이번 프로젝트를 FlutterFlow를 활용해서 개발해보려고 하는데요. 진행하면서 저희가 느꼈던 부분들을 공유 드려보겠습니다~

긴 글 읽어주셔서 감사합니다.

혹시 FlutterFlow를 사용해보신 경험이 있으시다면 어떠셨었는지 댓글 남겨주세요 :)

4
1
김트러플

김트러플

문제가 잘 풀리지 않을 땐, 추상화를 통해 한발짝 물러서서 문제를 바라보면 좋은 해결책이 나올 때가 많은 것 같아요.

안녕하세요. 10 years의 김규둥입니다. 오늘은 저희 팀이 어떻게 추상화를 통해 프로젝트 주제를 선정하게 되었는지 그 과정을 이야기해보려 합니다.

저희는 새로운 프로젝트를 구상하기 위해 브레인스토밍을 진행하고 있었는데, 생각처럼 아이디어가 잘 떠오르지 않더군요. 그래서 그동안 겪었던 여러 가지 어려움들을 되짚어보기 시작했어요. 특히 디자인 전공 학생들이 졸업 전시를 준비할 때 경험했던 어려움들이 떠올랐죠.

전시 준비로 매일 밤을 새우며 정신없이 지내는 와중에, 지인들과 전시장에서 만날 약속을 잡는다거나, 갑작스런 전시장 일정 변경으로 특정 시간에 입장하지 못하는 일이 생기고, 지인들이 준비한 선물들이 뒤섞여 제대로 감사 인사를 전하지 못하는 일들 등 다양한 어려움들이 있었어요. 더 나아가서는 뒤풀이 자리에서 원치 않던 지인이 참석해 불편했던 기억들도 나누게 되었죠.

output.jpg

이야기를 나누며 정리했던 마인드맵

이러한 이야기들을 나누며 "어떻게 이 문제들을 해결할 수 있을까?" 고민해보았지만, 당장 해결할 수 있는 뾰족한 방법은 없다는 결론에 이르렀습니다. 또한, 전시라는 주제가 디자인 전공 학생들에게는 대학 생활 중 1~2회 정도밖에 기회가 주어지지 않다 보니, 자주 사용할 수 없고, 피드백을 받으며 빠르게 성장할 수 있는 환경도 아니겠다는 생각이 들었습니다.

그렇게 고민을 하다가 한 발짝 물러서서 생각해보기로 했습니다. "구체적인 문제들은 이미 많이 발견했는데, 이걸 좀 더 추상화해서 다른 방식으로 바라보면 어떨까?"라는 아이디어가 나왔죠. 그래서 '초대', '약속', '방명록' 등으로 문제를 추상화해 다시 생각해보았습니다. 그러다 보니, 네 명 이상의 친구들과 약속을 잡을 때 카카오톡으로 투표를 만드는 과정이 은근히 번거롭고, 만들어진 투표는 친구가 수정하기도 어렵다는 점이 떠올랐습니다.

결국, 저희는 네 명 이상의 사람들이 모여 약속을 잡는 과정에서 겪는 불편함을 해결하는 방향으로 프로젝트를 진행해보기로 했습니다. 여기까지 읽어주셔서 감사합니다. ☺️

추상화를 통해 문제를 해결한 경험이나 약속 잡는 과정에서 겪었던 어려움이 떠오르시다면 댓글 남겨주세요 :)

2
0