Webstudio

Webstudio란 무엇인가

Webstudio(github.com/webstudio-is/webstudio)는 템플릿을 고르는 도구가 아니라 실제 웹사이트를 만드는 비주얼 빌더입니다. README는 스스로를 개발자와 디자이너, 여러 직군이 함께 쓰는 오픈소스 비주얼 개발 플랫폼이라 부르며 소유권을 강조합니다. 데이터도 컴포넌트도 인프라도 당신 것이고, 호스팅된 버전을 쓰거나 직접 올려도 된다는 것입니다. 저장소 설명은 이 범주의 단순한 쪽과 갈라지는 두 가지 주장을 덧붙입니다. 어떤 헤드리스 CMS와도 연결된다는 점, 그리고 빌더 UI가 보통 노출하는 일부가 아니라 CSS 속성 전체를 지원한다는 점입니다. TypeScript로 작성되었고 이 글을 쓴 시점에 별 8,785개였습니다.

그것이 실무에서 무엇을 뜻하는지는 저장소의 패키지 목록이 잘 요약합니다. CSS 엔진과 CSS 데이터셋, 헤드리스 CMS 데이터를 끌어오는 콘텐츠 엔진, Radix 프리미티브 위에 올린 Remix·React Router 변형을 포함한 React용 컴포넌트 SDK, 실시간 협업을 위한 멀티플레이어 프로토콜과 동기화 클라이언트, 그리고 커스텀 도메인, 에셋 업로드, 폰트, 이미지 처리, 커맨드라인 인터페이스가 있습니다. 라이선스에 대해 README는 정확하고, 이 위에 사업을 올리기 전에 읽어볼 가치가 있습니다. 코어는 AGPL-3.0-or-later이고, 선택적인 애니메이션 컴포넌트 패키지 하나는 독점 라이선스라 회사의 EULA 동의가 필요합니다.

비주얼 빌더는 창업자의 스택 어디에 들어가나

빌더의 가치는 더 예쁜 페이지를 만들어 준다는 데 있지 않습니다. 무언가를 알아차린 순간과 그것에 손을 대는 순간 사이의 거리를 줄여준다는 데 있습니다. 코드베이스에서 헤드라인 하나를 바꾸는 일은 브랜치와 리뷰와 배포이지만, 빌더에서는 오후 한나절과 게시 버튼입니다. 그 거리가 사라질 때 실제로 네 가지가 열립니다.

1. 프런트엔드 공수 없는 랜딩 페이지 캠페인이나 출시, 새로운 대상층을 위한 페이지가 같은 개발자를 두고 제품 개발과 경쟁하지 않게 됩니다.
2. 배운 그날 바뀌는 카피 영업 통화를 마치고 고객이 쓴 표현을 듣고, 잊어버리기 전에 다음 방문자에게 그 말을 돌려줄 수 있습니다.
3. 정말로 돌려볼 수 있는 변형 페이지 두 안을 시험하는 일은 두 번째 안을 만드는 비용이 쌀 때만 할 만합니다. 대부분의 창업자가 건너뛰는 이유는 싸지 않기 때문입니다.
4. 풀 리퀘스트를 열지 않는 사람의 수정 오타, 지난 가격, 틀린 날짜를 발견한 사람이 직접 고칠 수 있습니다. 그 사람은 대개 커밋 권한을 가진 사람이 아닙니다.

빌더가 바꾸지 못하는 부분

이 섹션의 모든 도구에는 같은 정직한 한계가 있고, 여기서도 분명히 적어 둡니다. 창업자와 트래픽 사이를 가로막고 있던 것이 '페이지를 만드는 일'이었던 경우는 드뭅니다. 빌더는 게시를 빠르게 해 주지만, 아무도 오지 않는 페이지도 전환되는 페이지와 똑같이 빠르게 게시됩니다. 결과를 정하는 것은 전부 캔버스 바깥에 있습니다. 그 페이지가 실제로 누군가 던지는 질문에 답하는지, 사람을 그리로 데려오는 무언가가 있는지, 첫 화면이 몇 초 안에 제안을 읽히게 하는지입니다.

그래서 값을 하는 순서는 심심한 쪽입니다. 얼마나 빨리 말할 수 있는지를 최적화하기 전에, 그 페이지가 무엇을 누구에게 말해야 하는지를 먼저 정하세요. 전환 쪽은 방문자를 가입으로 바꾸기를, 애초에 사람이 어떻게 도착하는지는 새 사이트의 SEO를 보세요. 빌더는 이미 내린 결정에 붙이는 진짜 가속 장치이고, 아직 내리지 않았다면 틀린 페이지를 더 많이 찍어내는 비싼 방법입니다.

무엇이 확인되고 무엇이 확인되지 않나

비주얼 빌더에는 아무도 광고하지 않는 맞바꿈이 있고, 디자인 품질과는 무관합니다. 캔버스에 타이핑한 글자는 비활성입니다. 무엇과도 대조할 수 없기 때문에, 페이지의 모든 사실 주장 — 가격, 한도, 개수, 지난 분기에 나온 기능 — 은 다른 어딘가에 있는 진실의 사본이고, 사본은 조용히 어긋납니다. 코드베이스라면 그런 사실 중 일부를 출처에 연결하거나, 최소한 값이 어긋날 때 실패하는 검사를 작성할 수 있습니다.

이 표는 AgentCeres — agentceres.com의 AI Growth Officer — 를 만든 경험에서 나왔습니다. 우리 마케팅 사이트의 연동 목록은 살아 있는 커넥터 카탈로그에서 생성됩니다. 그래서 커넥터가 운영에 들어가면 페이지가 알아서 갱신되고 누구도 잊을 수가 없습니다. 반면 팀에 있는 담당 에이전트의 수는 손으로 타이핑되어 사이트의 번역본마다 되풀이되었고, 누군가 알아채기까지 두 번이나 낡은 값으로 남아 있었습니다. 해법은 어느 페이지든 그 숫자를 적으면 빌드를 실패시키는 검사를 넣는 것이었습니다. 이 중 어느 것도 비주얼 빌더에 대한 반론이 아닙니다. 빌더는 실재하는 문제를 잘 풀어냅니다. 이것은 두 번 다시 손으로 타이핑해서는 안 되는 사실들의 짧고 의도적인 목록을 갖자는, 그리고 가진 도구 중 무엇이 그것을 강제할 수 있는지 알아두자는 이야기입니다.