[연말 정산 프로젝트: 회고] 디자이너가 디자인부터 개발까지?!

2023년에 완성하지 못한 디자인 포트폴리오를 노코드툴 webflow를 이용해서 함께 만들어보았습니다.

이 글은 12월 26일(화)부터 12월 30일(토)까지 진행되었던 노코드툴로 웹사이트를 제작하는 [연말 정산 프로젝트]의 회고입니다.

🚀 연말 정산 프로젝트의 시작

디자이너/기획자분들이 포토폴리오 혹은 프로토타이핑 등 피그마로 만들어놓은

멋진 웹디자인을 직접 노코드로 구현해볼 수는 없을까?

GPT4 Vision의 등장으로 다양한 AI 웹사이트 빌더들이 생겨나고 있는 시기입니다.

관심을 가지고 보던 중 기존의 노코드툴들도 강력한 기능들을 가지고 있다는 것을 알게 되었습니다.

AI 웹사이트 빌더들은 AI가 웹사이트를 제작해주기는 하지만,

같은 Input에도 다른 Output을 가져오는 등 랜덤한 값을 결과로 가져온다는 한계가 있습니다.

빠르게 웹사이트를 얻을 수 있지만, 세밀하게 실제로 원하는 결과를 얻을 수는 없었습니다.

이미 기존 노코드툴들에는 랜덤하게 나오는 값을 추후에 원하는 결과로 조절할 수 있는 기능이 있습니다.

AI 웹사이트 빌더들이 기존 노코드툴에 결합되면서 더 강력해질 수 있었고,

뿐만 아니라, 기존 노코드툴 또한 그 자체로 강력한 기능들을 내포하고 있다는 것을 알게 되었습니다.

webflow는 웹사이트의 랜딩페이지나 CMS(Content Management system, 블로그 등과 같은 static한 데이터를 관리할 수 있는 시스템)를 코드없이도 만들 수 있는 최고의 툴이었습니다.

또한 프론트엔드 개발을 하던 입장에서 보더라도,

퍼블리싱의 영역(HTML, CSS)의 모든 것을 노코드로 옮겨놓았기 때문에

드래그 앤 드롭과 설정 변경만으로도 특정한 한계없이 웹사이트를 만들 수 있었습니다.

(이와 같은 실험의 결과로 드로잉코딩클럽에서 다양한 인터렉션 웹사이트를 제작해보았습니다.)

이런 간편한 UI로 무궁무진한 결과물을 낼 수 있다는 것을 보고

또 하나의 가능성을 느꼈습니다. 가능성 바탕으로 세운 가설은 다음 2가지입니다.

디자이너/기획자분들은 이미 피그마와 같은 디자인툴을 통해서

드래그 앤 드롭 + 설정변경과 같은 간편한 UI에 익숙해져 있기 때문에

이와 같은 노코드툴을 굉장히 빠르게 학습할 수 있을 것이다.

디자이너/기획자분들이 개발적 지식이 없이도 노코드툴을 활용하면

피그마 포트폴리오 혹은 프로토타이핑한 결과물들을

웹사이트로 만들 수 있기 때문에 이전과 다른 가치를 창출할 수 있다.

이건 개발자분들이 노코드툴을 활용하는 것보다

더 큰 결과를 낳는다고 생각했습니다.

그래서 이러한 2가지 가설을 검증하기 위해서 연말 정산 프로젝트를 진행하게 되었습니다.

연말 정산 프로젝트는

디자이너분/기획자분들이 피그마 포트폴리오 혹은

프로토타이핑으로 만들어놓은 멋진 웹디자인을

직접 노코드로 구현해보는 프로젝트입니다.

12/26(화) ~ 12/30(토)동안 온라인 세션(3시간) 1회, 오프라인 세션 1회를 진행했습니다.

온라인 세션(3시간)에서 webflow의 기본적인 내용과 심화 내용을 다루고,

오프라인 세션에서 결과물을 발표하고 질의응답을 받았습니다.

다른 노코드툴들도 각기 다른 장점이 있지만, 특히 webflow를 이용하면

실제 개발하는 것보다도 편리하고 빠르게 다양한 인터렉션을 구현할 수 있다는 점에서

webflow를 교육에서 다룰 노코드툴로 설정했습니다.

창의력을 요하는 인터렉션 디자인 포트폴리오에 webflow는 적합한 도구였습니다.

(다양한 노코드툴[노코트 웹사이트 빌더]에 대한 비교는 드로잉 코딩클럽의 포스팅을 참조해주세요)

✅ 실제로 모집하는 글을 올렸을 때, 반응은 어땠을까?

함께 드로잉코딩클럽을 함께 운영하는 주환님께서 디스콰이엇에

[연말정산 프로젝트] 홍보글을 12월 19일에 올렸습니다.

실제로 프로젝트를 진행하는

12/26(화) ~ 12/30(토)까지 일주일 남은 시점에 급하게 홍보를 했고 연말임에도 불구하고

13분이 신청해주셨습니다.

원래는 선착순으로 딱 두분만 진행하려고 했으나, 많은 분들이 신청해주신 관계로

의견을 묻고 일정을 조정하여서 6분이 오픈 카톡방에 들어와주셨습니다.

실제로 디자인 업무에 종사하고 계신분 + 기획자분들이 대부분이셨고

노코드툴을 다뤄본 경험이 적으신 분들이었습니다.

🖐️ 세션 준비 과정과 세션 진행

세션 준비 과정

귀중한 신청인만큼 한분한분 모두 원하는 결과를 얻어갈 수 있도록

세션을 디테일하게 준비를 했습니다.

먼저 신청해주신 분들을 대상으로 본인의 포트폴리오와 레퍼런스를 받았습니다.

(레퍼런스)

레퍼런스와 포트폴리오를 보면서 공통되는 효과들을 카테고리별로 모았고,

공통되는 효과를 표현하는 하나의 인터렉션을 실습 예제로 다뤄서

webflow의 인터렉션에 대한 이해를 높이고자 했습니다.

그 결과 crowdyflow라는 웹사이트를 실습 예제로 잡았고,

한가지 예시와 3가지 섹션을 실습하며 온라인 세션을 진행했습니다.

온라인 세션 진행과 반응

온라인 세션의 진행 목차는 다음과 같습니다.

먼저, button을 호버했을 때, 실행되는 애니메이션을 시작으로 기본적인 웹플로우 사용법을 간략하게 다뤘고

그 후에는 폰트 설정부터 공통 속성을 넣는 방법에 대해서 배웠습니다.

위에서 다루는 3가지 예시 중(시간 관계상) 2가지 예시를 다루면서 실습과 강의를 진행했습니다.

온라인 세션의 특성상 한 부분이라도 놓치면, 따라오지 못하는 낙오자가 발생하기 때문에

설명과 실습의 한 챕터가 끝날 때마다 질문을 받고,

해결되지 않는 부분이 있다면 수강생분들의 화면을 공유해서

함께 해결하고 넘어가는 것을 기본으로 삼았습니다.

그런 노력 덕분인지 이 점을 굉장히 좋아해주셨습니다.

세션도 참여해주신 모든 분들이 5점 만점에 5점으로 만족해주셨고, 좋은 반응을 보여주셨습니다.

(실제 세션 진행 화면)

온라인 세션을 진행한 결과 하루동안 세션을 진행하셨음에도

모든 분들이 웹플로우의 기본 사용법에 익숙해지셨습니다.

최초에 설정했던 가설 중

"디자이너분들이 기존 역랑을 활용하면 학습속도가 더 빠를 것이다."라는

가설이 일부 검증될 수 있었습니다.

오프라인 세션 진행

온라인 세션 후 오프라인 세션 전까지 본인의 포트폴리오를 만들면서 질의응답을 진행했고,

12월 30일 토요일에 오프라인 세션을 진행했습니다.

오프라인 세션에서는 실제 포트폴리오를 바탕으로 발표와 질의응답, 심층 인터뷰를 진행했습니다.

온라인 세션 이후 카톡방에서 질의응답을 받으면서

"webflow to figma"를 활용해서 figma로 만든 프레임을 바로 webflow로 옮기는 방법을 공유해드렸습니다.

"webflow to figma 플러그인"이 상당히 반응이 좋았는데요.

실제로도 프트폴리오를 만드실 때, "webflow to figma" 활용해서 편리하게 제작할 수 있다고 말씀해주셨습니다.

심층 인터뷰에서는

디자이너분들이 본인만의 웹사이트를 만들고 싶은 니즈가 있는지?

있다면 인터렉티브한 웹사이트를 만들고 싶은 니즈가 있는지?

부수입에 대한 니즈가 있는지?

현재도 디자인 외주를 통한 부수입 활동을 하는 사람들이 많은지?

웹사이트를 만들 수 있는 능력이 생긴다면 부수입을 위한 활동을 한 것인지 등을 물었습니다.

조금 더 디자이너의 입장에서 노코드툴에 대한 니즈를 검증해볼 수 있는 기회였던 것 같습니다.

🧐 진행하면서 느낀점

노코드툴의 빠른 학습 속도

언급했던 대로 webflow를 배우는 속도가 빠르셨습니다.

webflow를 처음부터 끝까지 배우는데 0 ~ 10의 리소스가 든다면

0 ~ 4의 기본적인 내용을 배울 때, 시간이 많이 소모됩니다.

하지만, 피그마 등의 디자인툴 활용역량이 이미 있으셨고,

그것과 비슷한 메커니즘이기 때문에 빠르게 배우실 수 있으셨습니다 .

Figma to Webflow

figma to webflow라는 플러그인을 굉장히 좋아하셨습니다.

figma로 작업된 내역을 webflow의 형식에 맞게 조금만 수정하면,

figma에서 작업한 페이지, 특정 버튼 등등을 바로 webflow에서 사용할 수 있는 툴입니다.

아직까지 폰트랑 svg 등이 호환이 안 된다는 불편함이 있지만,

이미지 등은 따로 import해서 사용하면 되고, 폰트도 한번에 적용할 수 있기 때문에

굉장히 편리하게 웹사이트를 만들 수 있다고 하셨습니다.

모두가 함께 하는 세션의 가치

온라인 세션이더라도 한 분 한 분 잘 따라오고 있는지

확인하면서 진행했을 때, 확실하게 많은 것들을 얻어가시는 것을 확인할 수 있었습니다.

그에 따라 반응도 좋았습니다. 앞으로도 이와 같은 매니징으로 세션을 진행하고자 합니다.

노쇼 방지비라도 일부 유료가 필요하다.

연말에 전부 무료로만 진행하다보니, 세션을 거듭할수록 참여율이 떨어졌습니다.

참여하시는 분들의 초기의 목표를 달성하기 위해서라도, 모든 세션 참여를 독려하기 위해서라도

일부 유료가 필요하다고 생각했습니다.

앞으로 교육 프로그램을 진행하면서 보안해야 할 내용

웹플로우 스크롤 시 크기가 변하는 애니메이션을 다룰 때, 내용이 일부 어려웠다고 말씀해주셨는데,

이런 부분을 보안해서 준비하면 좋을 것 같습니다.

더 알아가고 싶은 점들을 물었는데, figma to webflow를 위한 webflow 형식에 맞춘

figma frame 세팅방법과 더 다양한 스타일과 인터렉션을 배워보고 싶다고 답해주셨습니다.

🛑 1월 말에 있을 4주 교육프로그램 베타 테스터 모집 🔥

2월 중순에는 기간을 늘려서 4주동안 진행하는 유료 프로그램을 본격적으로 개설할 예정입니다.

그 전에 1월 중순의 유료 프로그램의 배터 테스트를 모집하고 있습니다.

4주간 진행할 예정이고, 사전신청을 받고 있습니다.

이번 교육을 통해서 혼자서도 노코드를 활용한 웹사이트를 제작할 수 있는 실력을 갖출 수 있습니다.

4주동안 진행하기 때문에 더 넓은 범위의 개념과 더 많은 실습 예제를 다룰 수 있습니다.

관심있으신 분들은 아래의 폼에 응답 부탁드려요!

🫵 당신의 비전과 철학을 믿기 때문에 당신의 🔨 제품을 사용합니다.

이 글은 *"백민기의 10분 인사이트" 중 80화의 내용입니다. 위의 두 글을 읽고 느낀 점을 작성합니다.

*: 백민기는 매일 10분 인사이트를 작성하고 있고, 오늘로 80일 연속 작성 중 입니다.

🫵 당신의 비전과 철학을 믿기 때문에 당신의🔨 제품을 사용합니다. 

추상적인 말 같겠지만, 우리는 모든 소비를 할 때

어떤 제품의 비전과 철학에 동의하기 때문에 그 제품을 사용한다.

100번 양보하여 말하면, 특정 제품의 비전과 철학이

우리의 가치와 어긋나지 않기 때문에 그 제품을 구매한다.

하고 싶은 말은 결국 모든 제품에 비전과 철학이 담겨있다는 것이다. 

“뉴진스”, “르세라핌”, “에스파”, “아이브” 4세대 아이돌의 이미지 메이킹을 봐도 

각각의 세계관과 스토리텔링을 가지고 있다. 

우리가 무의식적으로 소비하는 것도 모두 비전과 철학이 담겨있다. 

애플의 감성이니 뭐니 하는 것도 결국 제품의 비전과 철학이다. 

그것들은 크게는 브랜딩과 기업의 스토리, 작게는 하나의 마케팅 하나의 광고에서 드러난다. 

그 제품이 별볼일 없는 시작 단계거나 스타트업의 제품일 때는 더더욱 그 제품의

비전과 철학을 믿기 때문에 제품을 사용한다.

사실 스티브잡스의 2007년 최초의 아이폰도 그 당시에는 MVP였다. 

앱 수에 제한이 있었다. 브라우저를 제외하고는 로드할 수 없었다. 복사 붙여넣기도 안 되었다. 

알림(푸시 알림)도 없었다. 그때만 해도 한국의 다른 폰들이 제공하는 그 흔한 전면카메라도 없었다. 

그래도 사람들은 아이폰이라는 제품에 열광했다. 

근데 왜 열광했느냐? 그 제품의 비전과 가치가 충만했기 때문이다. 

인터넷, 아이팟, 폰(전화), 인터넷, 아이팟, 폰(전화) 

이것이 하나로 합쳐질 것이라는 생각과 기대감.

그것이 사람들을 열광하게 했다. 

지금은 불편하지만, 이 제품을 쓰면 언젠가는 이 제품이 나아져서 꿈꾸는 세상을 만들어줄거야.

그럴 거라는 기대. 

지금의 Chat gpt도 엄청난 발전이 있었고,

와우하지만, 완벽한 AGI는 아니다. 

사람들은 Open AI가 만들어낼 완벽한 AGI를 기대한다.

그렇기 때문에 그 제품을 신뢰하고 사랑한다. 

그래서 최종적으로 하고 싶은 말이 뭐냐. 

빌딩인 퍼블릭에서 가치와 비전을 팔아야 한다. 

제품의 제작과정 말고도 그 너머의 가치와 비전을 널리 알려야 한다.

그럼 그 비전과 가치를 공감해주는 고객들이 온다.

비전과 가치를 알리는 것에 미숙했던 것 같다.

앞으로의 콘텐츠에는 가치와 비전을 담아야겠다.

어떤 다른 관점으로 바라보고 있고, 그걸 어떤 단계로 할 거고,

지금은 어떤 것들을 하고 있고, 그것이 어떻게 가치와 비전을 이뤄줄 건지에 대해서 담아야겠다.

끝.

노코드로 만든 바이럴 서비스: "청룡이의 다짐"

👩‍💻🙅‍♀️ 이 모든 걸 노코드로 만들었다고?

넵! 청룡이의 다짐은 100% 노코드 툴들을 이용해서 만들었는데요.

이번 포스팅에서는 서비스 사용법에 대해서 이야기하고,

다음 포스팅에서는

webflow, memberstack, zapier 등의 노코드툴을 활용해서

어떻게 로그인, 댓글, 회원정보 수정, 프로필 공유 등을 구현할 수 있었는지

이야기해보겠습니다!

👋 안녕! 내 이름은 청룡이!

사실 나는 한국 전설 속에 등장하는 🦕이무기야.

난 2024년을 맞이해서 999살이 되었어.

1000년 중 딱 1년만 🏃갓생을 산다면,

🐉 용으로 변할 운명을 타고 났는데,

999년동안 한번도 이룬 적이 없어😂ㅠㅜㅠㅜ

내가 좋아하는 건 누워서 유튜브 숏츠📺를 보는 거야.

하지만 너무 오랫동안 해서 그것도 😣지겨워졌어!

올해 마지막으로 용이 될 수 있는 기회인데,

계획을 짜고 열심히 실행해서

"이제는 진정한 🐉용이 되고 싶어!"

너의 계획은 뭐야? 너의 계획을 들려줘! 계획을 공유하고 함께 응원해보자고🔥!!!

🐉 청룡이의 다짐 사용법

step1: 아래의 홈페이지에 들어가서 회원가입을 진행해줘!

step2: 나의 이야기를 읽고 너의 2024 계획을 공유해줘!

step3: 너의 계획 카드를 친구들에게 공유해서 응원을 받아봐!

웹플로우(Webflow)로 코드없이 화려한 인터렉션 만들어보기

노코드 서비스 웹플로우(webflow)를 활용하여 어디까지 개발이 가능한가?라는 주제로

글을 쓰고 있습니다.

1. 웹플로우(webflow)로 인터렉티브 웹사이트 만들기

   • 토스랜딩페이지 클론하기

   • 웹디자인 awwwards 수상작 클론하기(현재 포스팅)

2. 웹플로우(webflow)와 노코드 툴을 활용하여 웹서비스 만들기

이번 포스팅은 웹디자인 awwwards같은 수상작과 같은 화려한 인터렉션을 클론하는 것인데요.

정확하게 awwards 수상작은 아니지만, awwwards 수상작과 같은 화려한 웹사이트를 가져와봤습니다.

@연주환 님과 함께 한해동안 작업한 웹디자인 포트폴리오를 직접 웹사이트로 구현하는 [연말정산 프로젝트]를 진행하고 있습니다.

현업 디자이너분들, 취업을 준비하시는 분들이 참여해주셔서 webflow의 기본적인 내용을 배우고, 본인만의 포트폴리오를 웹으로 만들고 계신데요. 거기서 교육자료 함께 만들어본 내용을 공유드립니다.

다음 게시글에서는 [연말 프로젝트]가 어땠는지, 공유해드리겠습니다.

스크롤 인터렉션 분석해보기

들어가기 전에 먼저 위 인터렉션을 자세히 분석해봅시다.

1. 스크롤에 따라 "Work"와 "Our recent"라는 텍스트가 일정 수준으로 작아집니다.

2. Work(Our recent)라는 글자가 특정 영역에서 가운데 화면에 고정되어있습니다.

1. 이미지 요소들이 커지면서 등장했다가 작아지고, 투명해지면서 사라집니다.

이와 같은 분석결과를 구현하기 전에 뼈대를 만들고 스타일을 구현해보겠습니다.

뼈대 만들어보기

지난 글들에서도 많이 다뤘지만, 인터렉션을 만들기 전에 뼈대와 스타일을 잡는 것이 중요합니다.

뼈대 구성하기

전체적인 큰틀과 레이아웃을 이렇게 잡아보았습니다.

webflow, 브라우저, 피그마에서는 모두 마찬가지지만,

각각의 요소들이 모두 박스처럼 구성되어 있어서 박스형태로 구성요소들을 잡아주고

만들어나가는 것이 편합니다.

뼈대 만들기

텍스트 구성하기

이미지 레이아웃 구성하기

이미지 아이템 박스만들기

스타일 넣기

스크롤 인터렉션 적용하기

이제 본격적으로 스크롤 인터렉션을 만들어보겠습니다.

지정한 스크롤 영역에서 스크롤되는 동안 텍스트를 가운데로 고정하기

아래는 완성본인데요. Work라는 텍스트가 스크롤이 아무리 되어도 가운데 특정 위치를 지키고 있는 모습을 볼 수 있습니다.

이 인터렉션은 복잡해보이지만, 사실 position: sticky 속성 하나면 충분합니다.

position: sticky 속성은 부모가 스크롤하는 동안 화면 영역(Viewport)의 특정 영역에 고정된 상태로 이동하는 속성입니다. 위의 애니메이션을 보면, work라는 글자가 특정 영역에 고정된 상태로 이동하는 모습을 볼 수 있습니다.

위의 그림은 position: sticky를 표현한 그림인데요. 1번 그림에서 동그란 요소는 자기의 높이를 지키고 있다가, 2번째 그림에서 스크롤이 진행되고, 화면 영역이 특정 높이를 지날 때, 고정되어서

3번, 4번 그림처럼 부모요소의 스크롤 영역동안 화면 영역에 고정되어 스크롤되는 것을 볼 수 있습니다.

스크롤에 따라 텍스트 크기 작게 만들기

스크롤에 따라 텍스트 크기를 작게 만들려면 while scrolling in view 트리거를 먼저 알고 넘어가야 합니다.

While scrolling in view 트리거는 애니메이션 트리거의 한 종류입니다.

트리거는 간단하게 말해서 애니메이션을 언제 실행할 것인지를 결정하는 계기입니다.

위의 그림을 보면 while scrolling in view 트리거를 잘 표현하고 있습니다.

검은색 상자가 전체 웹사이트 페이지, 파란색 영역이 화면 영역, 빨간색 영역이 특정 박스의 높이, Work는 특정 텍스트 요소라고 가정합니다.

스크롤이 될 때마다 파란색 화면 영역은 아래로 움직입니다.

While scrolling in view 트리거를 빨간색 박스 영역에 지정한다면,

빨간색 박스영역이 화면영역에 드러나는 순간을 0%,

화면에서 사라지는 영역이 100%되면서 트리거가 설정됩니다.

이렇게 지정된 0% ~ 100% 사이에 영역에서 특정 요소가 어떻게 변할지 애니메이션을 넣을 수 있습니다.

위 그림에서는 0%에서 70%의 영역으로 갈 때, work라는 글자가 작아지도록 설정했습니다.

1번그림에서 3번 그림으로 갈수록 work라는 텍스트가 작아지는 것을 알 수 있습니다.

이러한 트리거와 애니메이션을 webflow에서 직접 설정해주면 아래와 같습니다.

이미지 요소들 커졌다가 사라지게 만들기

위처럼 이미지 요소들은 등장할 때, 커졌다가 특정 지점을 넘었을 때, 작아지고 투명해지면서 사라집니다.

이건 아까 위에서 배웠던 while scrolling in view 트리거가 이미지를 감싸는 박스 요소 하나하나에 설정되었던 것인데요. 설정 방법은 아래와 같습니다.

6번을 보면 아까와 달리 여러가지 애니메이션들이 중첩되어서 사용됩니다.

이는 while scrolling in view 중에 커졌다가, 다시 작아지는 것을 표현한 scale 애니메이션과 투명도가 진해졌다가 다시 연해지면서 사라지는 애니메이션을 표현했기 때문입니다.

전체결과는 아래의 웹사이트에서 확인하실 수 있습니다.

(첫 화면은 흰색인데, 아래로 스크롤해보세요)

다음 게시글에는

이제 계획했던 노코드 서비스 웹플로우(webflow)를 활용하여 어디까지 개발이 가능한가?에서

인터렉티브 웹사이트 만들기의 챕터가 끝났는데요. 다음주부터는 새로운 주제로 포스팅해보도록 하겠습니다.

1. 웹플로우(webflow)로 인터렉티브 웹사이트 만들기

   • 토스랜딩페이지 클론하기

   • 웹디자인 awwwards 수상작 클론하기(끝)

2. 웹플로우(webflow)와 노코드 툴을 활용하여 웹서비스 만들기

Outro

코드없이 디자이너/기획자분들의 포트폴리오를 웹사이트를 제작하는 [연말정산 프로젝트]가 이번주 토요일 오프라인 세션을 끝으로 마무리됩니다.

참여해주신 반응과 리뷰가 좋아서 가장 빠르게 1월 말쯤 새로운 프로젝트 진행을 계획하고 있습니다.

노코드로 본인만의 포트폴리오를 만들고 싶으신 분들은 언제든지 참여바랍니다.

노코드 웹빌더 정리 + 비교#2: AI 웹빌더 + 노코드 웹빌더

노코드로 웹사이트를 만들 수 있는

노코드 웹빌더를 정리하는 포스팅입니다.

지난 글에서는 노코드 웹빌더의 대표격인 webflow와 framer를 비교하는 글이었는데요.

이번 포스팅에서는 여러가지 웹빌더를 소개하는 글입니다.

Notion + Oppy

노션의 창업자 Ivan은 처음에 친구들의 1page짜리 포트폴리오 웹사이트를 만들어주기 위한 소프트웨어를 만들었습니다. 이처럼 노션은 그 자체적으로 문서를 관리하고, 문서 자체를 URL 주소로 공유하기 쉽도록 제작되었습니다. 하지만 이것이 홈페이지처럼 동작하기에는 몇 가지 한계가 있었는데요.

Oppy를 활용하면 정말 쉽게 노션 페이지를 최적화된 웹사이트로 만들 수 있습니다.

또한 노션으로 쉽게 수정이 가능해서 많은 기업들에서 회사 브랜딩 페이지, 팀 브랜딩 및 채용 페이지로 만들고 있습니다. 이처럼 Notion + Oppy를 활용하여 빠르게 원하는 페이지를 만들 수 있습니다.

노션으로 만든 링크를 복사해서 넣으면, 자신만의 도메인 주소로 연결가능하고, 노션보다 빠른 페이지 로딩, 구글 내얼리틱스 등의 연결도 가능한 다양한 기능을 제공하고 있습니다.

아임웹(imweb)

아임웹은 카페24, 식스샵과 같이 국내에 있는 브랜드들이 자체적인 몰을 구축하기 위해서 가장 많이 사용하는 쇼핑몰입니다.

국내의 PG사들과 연결이 쉽고, 다양한 템플릿을 제공하고 있어서 손쉽게 제작이 브랜드 몰을 제작하기 쉽습니다.

드래그 앤 드롭 UI를 활용하여 손쉽게 디자인을 구현할 수 있고, 게시판, 갤러리, 일정, 지도 등 굉장히 다양한 모듈들을 사용하여 강력한 기능을 제작할 수 있습니다.

Softr

Softr 또한 많이 사용하는 노코드 웹빌더 중 하나입니다.

드래그 앤 드롭 가능하고요.

softr의 최대 장점은 구글 스프레드 시트, 에어테이블과 같은 데이터 베이스를 손쉽게 연동할 수 있다는 점입니다.

CMS와 같은 서비스를 자체적으로 구축하고 데이터를 관리해주는 서비스들도 있지만, softr은 다른 데이터 베이스들과 연동에 강점이있습니다.

Readymag

Readymag도 드래그 앤 드롭 UI를 활용하여 직관적으로 웹사이트를 개발할 수 있습니다.

Readymag의 뾰족한 장점은 애니메이션과 인터렉티브한 요소인데요.

애니메이션과 인터렉티브한 프리셋들이 자체적으로 구축되어있어서 손쉽게

Relume

Relume은 AI기반의 웹 빌더입니다.

사용자의 입력을 바탕으로 AI가 디자인을 생성하고, 복잡한 디자인 과정 없이도 간편하게 웹사이트를 만들 수 있습니다. 사용자 친화적인 인터페이스를 구성하고 수정할 수 있습니다.

figma와 연동해서 사용하기 위한 figma 플러그인 kit,

webflow와 연동가능한 익스텐션이 있어서 함께 사용하기 용이합니다.

relume으로 먼저 와이어프레임을 만들고, 그것을 figma로 옮겨서 구체적인 디자인을 한 후 webflow로 옮기는 방식으로 작업하면 작업 효율이 이전과 비교할 수 없을 정도로 좋아진다고 말합니다.

Animaapp

anima는 Adobe XD, Sketch, Figma와 같은 인기 있는 UI/UX 디자인 도구를 export하여 웹사이트, 애플리케이션을 바로 HTML, CSS, React 코드로 만들 수 있는 서비스입니다.

이처럼 실제 디자인 도구를 코드로 변환하는데 강점이 있습니다.

Outro

위와 같은 웹빌더들을 정리해보았습니다.

노코드 로우코드 시장이 커지면서 노코드로 웹사이트를 만들 수 있는 서비스들이 고도화되고 있습니다.

최근에는 AI의 결합으로 더 손쉽게 웹사이트를 만들 수 있는 서비스들이 많아졌습니다.

최근에 랜딩페이지와 같이 비즈니스 로직이 없는 정적인(Static) 웹사이트의 경우에는

실제로 개발하는 것보다 노코드툴로 구축하는게 더 효율적인 것 같습니다.

CMS(Content management system)라고 불리는 블로그, 쇼핑몰과 같이 같은 형식에 다른 데이터를 관리하는 웹사이트드로 노코드로 만들어지고 있습니다.

현재 비즈니스 로직이 담긴 웹사이트는 여러가지 노코드 플랫폼들을 결합해야 구현이 가능합니다.

앞으로 노코드 웹빌더들이 어떻게 발전할지 지켜보는 것도 재미있을 것 같습니다.