여러분이 느낀 tldraw, 드로잉 코딩의 문제를 댓글로 달아주세요✍️

(이번 23년도 Next.JS 개발자 컨퍼런스의 등록 웹카드)

안녕하세요, 드코클 모더레이터 @연주환 입니다!

드로잉 코딩 클럽은 tldraw를 활용한 드로잉 코딩을 주제로 시작되었는데요,

그래서 제가 직접 tldraw로 멋진 웹서비스를 만드는 과정을 보여드리고자 준비하던 중에,,,

너무 답답해서 중단하고 글을 쓰게 되었습니다!

🪄 기획: 드코클 3D 멤버십 카드 생성기

우선 만들고자 했던 기획은,

드로잉 코딩 클럽에 참여해주신 분들에게

고유한 드코클 3D 멤버십 카드를 만들어주는 웹페이지인데요,

아래와 같은 기능을 담고자 하였습니다.

• 인풋으로 이름, 키워드 받기

• 키워드와 관련있는 이미지 생성 (Dalle 활용)

• 3D로 인터랙션이 가능한 멤버십 웹카드 컴포넌트

• 이름, 이미지 등을 에어테이블에 저장

• url로 멤버십 카드 구분

나열해놓고 보니 하나같이 필수적으로 개발이 필요한 기능이었는데요,

어떤 개발 기능이 필요한지 같이 표시해보겠습니다.

• 인풋을 통해 이름, 키워드 입력 -> UI 상태 관리

• 키워드와 관련있는 이미지 생성 (Dalle 활용) -> API call

• 3D로 인터랙션이 가능한 멤버십 웹카드 컴포넌트 -> 3D 인터랙션

• 이름, 이미지 등을 에어테이블에 저장 -> API call, DB 저장

• url로 멤버십 카드 구분 -> UI 동적 렌더링

이처럼 UI 상태관리, API Call, 3D 인터랙션, UI 동적 렌더링 등을

tldraw와 드로잉 코딩만으로 구현하는 것이 가능할까요?

네, 가능합니다!

하지만 너무 불편합니다!!!

(삽질의 흔적들)

실제로 해보니 원하는 결과(UI, 로직)을 얻을 때까지 너무 많은 실행을 해야 합니다.

"이럴바엔 그냥 개발하지...?" 라는 생각을 속으로 많이 했습니다..ㅎㅎ

그럼 왜 이렇게 많은 시행착오를 겪어야 할까요?

왜냐하면 GPT4 Vision은 LLM의 특성상 확률적(stochastic)으로 결과를 생성하기 때문입니다.

그러다보니 실행마다 어떤 결과가 나올지 쉽게 예측할 수 없습니다.

흠, 그렇다면 처음에 생성한 html, css, js를 직접 수정하면 되는거 아닐까요?

그러면 되지만 이번 튜토리얼의 목적은 직접 코드를 건드리지 않고 만드는 것이었습니다.

결국 코드를 직접 수정하지 않고는 너무 오래 걸리더군요.

이러한 과정을 거쳐 드로잉 코딩만으로 드코클 3D 멤버십 카드를 만드는 것을 포기했습니다!!

🫥 현재 드로잉 코딩의 문제점

현재 tldraw를 활용한 드로잉 코딩의 문제점을 몇가지 정리해보았는데요,

1. 코드를 건드리지 않고 UI를 수정하는 것이 매우 어렵다.

2. 페이지 전체 구조를 구성하는 것이 어렵다.

그러면 각 문제를 해결하기 위해서 어떻게 해야 할까요?

1. 생성한 UI 결과물을 GUI를 통해 결정론적(Deterministic)으로 수정한다.

2. 웹플로우, 프레이머와 같은 노코드 웹빌더와 함께 사용한다.

그래서 이번 기회에 1번 문제를 해결하기 위한

간단한 플러그인 프로덕트를 만들어보려고 합니다!

기획중인 플러그인은 웹플로우에서 직접 tldraw 도식+설명을 통해 컴포넌트를 생성할 수 있고, 웹플로우의 GUI로 쉽게 수정할 수 있도록 해볼 생각입니다.

(저희 클럽의 @박경식 님이 만드시는 노코드 웹빌더 바운스 코드에는 이미 있는 기능입니다!!! 미쳤죠!!)

우선 웹플로우 플러그인으로 만들어볼까 하는데 여러분의 생각은 어떠신가요!?

또 tldraw로 드로잉 코딩을 하면서 느낀 문제는 무엇이 있었는지

여러분의 의견이 궁금합니다!!

댓글로 의견 많이 달아주세요🤩

(”드로잉 코딩 쓸모없다, 필요없다” 같은 비판도 너무 좋습니다!!!)

P.S. 아 그리고 드코클 3D 멤버십 카드를 만드는 웹서비스는 노코드 웹빌더인 웹플로우로 만들어보고 포스팅으로 연재해보겠습니다! 뭔가 저희 클럽만의 아이덴티티 굿즈가 있으면 재밌을거 같아서요🫡

웹플로우를 통한 튜토리얼은 엄밀하게 드로잉 코딩은 아니지만, 앞으로 드코클에서 노코드 툴도 많은 비중으로 다뤄줬으면 하는 바람에 시도해보겠습니다!

(노코드 툴에 관심있는 분들, 함께해요!!!)