Skip to content

Onlook

오픈 소스 Webflow를 이용한 맞춤형 앱 제작 도구

Features

  • 코딩 필요없이 웹 앱을 수정하고 UI를 시각적으로 구축할 수 있는 웹 기반 도구
  • React와 TailwindCSS를 지원
    • 로컬에서 React 앱을 실시간 편집하고 재작성 가능
    • 페이지에 일부 CSS를 삽입해서 DOM요소를 선택 및 드래그&드롭 가능하게 만들고, 변경사항을 추적해 React 코드로 다시 변환
  • 흥미로운 부분
    • 스타일을 분석, 삽입, 코드로 직렬화 해주는 React 파서를 내장
    • DOM 요소를 해당 코드로 변환하는 React 전처리기도 포함
    • CSS를 파싱/인젝션하고 Tailwind 로 변환함
    • 일렉트론 앱으로 노드앱과 메시지 전달을 수행

Hacker News 의견

  • Show HN: Open-sourced Webflow for your own app | Hacker News
  • Microsoft PCF와 빌드 도구와 통합된다면 높은 가격을 지불할 의향이 있음
  • 'components'가 무엇을 의미하는지 모르겠지만, React 컴포넌트를 에디터로 가져와 WYSIWYG 디자이너가 props를 수정할 수 있다면 매우 유용할 것임
  • 디자인/개발 모드가 팀의 실제 작업 방식과 맞지 않음
    • 개발자는 생각보다 더 많은 디자인 작업을 수행함
    • 디자이너는 복잡한 부분을 담당하고, 개발자는 단순한 디자인을 담당함
    • 네비게이션과 라우팅이 복잡할 수 있어 개발자가 화면 레이아웃을 자주 담당함
    • 디자인 시스템은 컴포넌트로 구현되며, 사용성 문제나 추가 디자인으로 인해 수정됨
    • 디자이너는 컴포넌트를 다시 섹션과 화면으로 재구성하고 싶어함
    • 디자이너는 이미지, 텍스트, ID와 같은 props를 설정하고, 개발 컴포넌트는 자동으로 동기화되길 원함
  • 개발과 디자인의 균형을 잘 맞추고 있는 것 같음
  • 오픈 소스와 유료 호스팅 계층을 제공하는 것이 좋을 것임
  • 이 프로젝트는 주목할 가치가 있음
  • 코드와 차이를 보여주고 다시 작성할 수 있는 기능이 매우 유용할 것 같음
  • AOLPress 사용자로서 2024년에 더 많은 WYSIWYG 도구가 없는 것이 놀랍지만, 디자인이 어려운 이유도 이해됨
  • 대부분의 도구는 개발자와 디자이너를 타겟으로 하려다 둘 다 잘하지 못함
  • 생성된 코드의 품질과 유지보수 가능성도 문제임
  • 오픈 소스로 만들어줘서 고맙다는 의견
  • 몇 가지 질문 추가:
    • 수익화 계획이 있는지, 있다면 어떤 아이디어가 있는지
    • Studio의 큰 그림은 무엇인지, 스타일 편집에만 집중할 것인지, 웹사이트 구축에 필요한 모든 것을 제공할 계획인지
  • Webflow와 같은 시각적 편집기를 원하지만, BS와 공격적인 가격 정책이 없는 것을 원함
  • 단순한 HTML, CSS, JS를 생성하고 회사의 누구나 페이지를 변경하거나 새로 만들 수 있는 도구가 필요함
  • 애니메이션을 무엇으로 만들었는지 궁금함
  • React 파서를 사용해 스타일을 삽입하고 다시 코드로 직렬화하는 접근 방식이 흥미로움
  • React 대신 Svelte로 다시 작성한 이유가 궁금함
  • Webflow의 UI 조립 모델이 간단함과 커스터마이징의 좋은 교차점이라고 생각함
  • Webflow는 비싸고 프로젝트를 그들의 통제 하에 두는 것이 싫음
  • "창업자와 대화"라는 CTA가 혼란스러울 수 있음
    • "데모 예약"과 같은 사용자에게 가치를 전달하는 문구로 변경하는 것이 좋을 것임
  • Webflow는 SaaS 앱이지만, 이 앱은 호스팅이 필요함
    • 비기술적 사용자는 호스팅 방법을 모를 수 있음
    • 개발자는 호스팅과 유지보수 시간을 고려해야 함
    • 오픈 소스로 제공하되, 호스팅 버전도 제공하는 것이 좋을 것임

See also

Favorite site