[연말정산 프로젝트] 한해동안 작업한 웹디자인 포토폴리오 직접 사이트로 구현하기 🤩

에 관심있으신 디자이너, 기획자 분들 계실까요?

피그마에 포토폴리오와 프로토타이핑으로 만들어놓은 멋진 웹디자인을
직접 노코드툴로 구현하는 연말정산 프로젝트를 진행해볼까 합니다.

Awwwards에 올라오는 이런 사이트들...?!

노코드 툴인 웹플로우를 통해서 구현할 예정이고,

Figma-to-Webflow와 같은 드로잉 코딩 툴도 사용해보려고 합니다.

제가 직접 만들어드리는게 아니고, 직접 구현하시게 될거고

웹플로우 사용법부터 복잡하고 멋진 인터랙션을 구현하는 방법까지 가르쳐 드릴 예정입니다!

그리고 정말 개발이 필요한 부분은 코드 작성해서 제공해드릴 생각입니다.

일주일동안 압축적으로 오프라인 1회, 온라인 2회, 중간중간 멘토링하는 식으로 진행할 생각이고,

가격은 무료입니다! 관심있으신 분들 아래 폼에 신청해주세요!

시간상 선착순 딱 두분만 진행할 예정입니다:)

🗓️ 일정: 12/26(화) ~ 12/31(일)

📌 방식: 온라인 2회, 오프라인 1회 각 2시간 (시간은 조율)

✨ 결과물: 실제로 동작하는 디자인 포토폴리오 사이트

✍️ 신청: 구글폼 신청하러가기

✍️ 디스콰이엇 피드백

@디스콰이엇 @이요한

제가 모더레이터로 운영하는 클럽은 클럽 통계 가 보이지 않습니다!

모더레이터로 참여하고 있는 클럽의 화면

참여하고 있는 클럽의 화면

피그마가 tldraw보다 드로잉 코딩에 적합한 이유, 간단 분석

피그마 vs tldraw

tldraw는 피그마 출신의 개발자가 만들고 있는 쉬운 화이트보드 서비스인데요, 인공지능에 눈이 달린 것과 같이 그림을 이해할 수 있는 GPT4-Vision과 결합되면서 “그림만 그려도 웹서비스를 만들 수 있다”라는 드로잉 코딩의 가능성에 많은 관심을 끌었어요.

하지만 사용해본 결과, “수정이 내 마음대로 어렵다”라는 단점으로 인해 원하는 웹페이지를 뽑아내기 힘들었습니다.

그래서 비교를 해보자면,

피그마 to 웹플로우, 프레이머

• 피그마의 Auto Layout 기능으로 목표하는 레이아웃을 쉽게 만들 수 있다.

• 코드 없이 웹플로우와 프레이머에서 바로 배포가 가능하다.

tldraw + GPT4 vision

• 레이아웃을 자연어로 설명하여 원하는 레이아웃이 나오지 않는다.

• 코드를 직접 옮겨야 한다. 피그마 Dev 모드와 같다.

앞으로 Figma - Webflow - GPT4 로 이어지는 드로잉 코딩 개발스택을 구축해볼까 합니다!!

Figma, 최고의 드로잉 코딩 툴 | 피그마 to 웹플로우

Figma로 드로잉 코딩해보기

이번 포스팅에서는 tldraw가 아닌 Figma로 드로잉 코딩을 해보려고 합니다.

너무 당연하지만 피그마는 최고의 디자인 툴입니다. 피그마가 가진 자유로운 드로잉 툴과 실제 CSS에 버금가는 기능들이 있기 때문이죠.

그리고 많은 분들께서 피그마 디자인을 프로토타입이 아닌, “실제 구동하는 웹사이트로 만들 수 없을까?” 라는 상상을 해보셨을거라고 생각합니다. 저도 매번 서비스를 개발할 때마다 “이거 코드로 언제 다 변환하지?”라는 생각을 했습니다🥲

Dev 모드가 있긴 하지만,,,

Figma에서 Dev 모드를 제공하기 시작하면서 Figma 컴포넌트, 프레임 등을 바로 코드로 뽑아볼 수 있습니다. 하지만 이 또한 React나 Vue 등 기본 코드 베이스를 세팅하고 난 후, 코드를 구조에 맞게 붙여넣어야 하는 했기 때문에 개발자에 한정된 기능이었습니다.

근데 찐으로 코드 한줄 볼 일 없이,

피그마의 컴포넌트를 웹서비스로 만들 수 있는 방법이 있습니다.

피그마 to 노코드 웹빌더

최근 가장 잘나가는 노코드 웹빌더인 Webflow와 Framer에서 피그마 플러그인을 직접 제공하고 있습니다.

피그마 플러그인은 피그마 서비스 내에서 사용할 수 있는 앱인데요,

웹플로우와 프레이머의 플러그인은 피그마 내의 컴포넌트나 프레임을 그대로 자신들의 서비스에 붙여넣을 수 있도록 합니다.

[피그마 to 웹플로우 사용법]

1. 플러그인 실행시키기

2. 옮기고 싶은 프레임 선택하기

3. 플러그인에서 생성하기

4. 웹플로우에 가서 붙여넣기

이렇게 되면 피그마에서 자유롭게 디자인하고, 웹플로우와 프레이머에 간단하게 컨트롤C+V를 하면서 웹페이지를 뚝딱 만들어 낼 수 있게 됩니다!!

피그마에서 디자인을 하는 것도 드로잉의 일종이라고 봤을 때,

피그마가 tldraw에 비해 드로잉 코딩에 더 적합해보여요.

피그마 to 웹플로우, 프레이머 유의사항

이렇듯 피그마 to 웹플로우, 프레이머는 매우 유용하지만, 잘 사용하기 위해서는 몇가지 유의사항이 있습니다.

다음에 더 자세한 튜토리얼을 올려보고 여기서는 몇가지만 언급해보겠습니다.

1. 무조건 프레임을 사용하고, Auto Layout을 사용해야 한다.

   해당 기능은 CSS에서 컴포넌트의 레이아웃을 설정하는 Flexbox를 표현한 것입니다. 레이아웃을 표현하는 만국 공통어인 것이고, 이를 활용하면 웹플로우와 프레이머에서도 똑같은 레이아웃을 구현할 수 있습니다.

2. 프레임의 이름을 꼭 지어주어야 합니다.

   이는 웹플로우에서 프레임을 잘 구분하고 수정작업을 할 때 용이합니다.

그럼에도 아직 안되는 것!

이렇듯 피그마를 드로잉 코딩의 툴로 활용하고 피그마 to 웹플로우, 프레이머를 사용하면 코드 한줄 볼 필요없이 웹페이지를 만들 수 있습니다.

이는 노코드 웹빌더 서비스의 발전으로 프론트엔드 코드가 점점 추상화되고 GUI 형태로 진화하고 있기 때문에 가능한 것입니다. (인공지능의 발전과 GPT4 Vision의 등장과는 별개로 가능했던 것이죠)

• html 또는 jsx 코드 → 드래그앤드롭

• css 또는 tailwind 코드 → 마우스 클릭

• javascript → ??

그러나 이처럼 정적인 웹컴포넌트를 옮기는 것은 문제가 없지만, 동적인 UI state 변경, 복잡한 이벤트 또는 애니메이션은 옮길 수 없습니다.

복잡한 이벤트와 애니메이션은 웹플로우에서 간단한 javascript 코드를 사용하면 가능하지만 이 또한 난이도가 있어 쉽지 않습니다.

결국 앞으로 LLM과 Vision 인공지능 모델이 기여할 수 있는 부분이 javascript 코드와 동적인 로직에 있지 않을까 생각하고 있습니다. 동적인 구조를 말과 그림으로 설명하면 javascript를 직접 노코드 웹빌더에 추가해주는 그런 모습이요!

그래서 당분간 동적 영역을 커버하는 웹플로우 플로그인을 기획해보자 합니다.

• javascript → 그림 + GPT4 Vision

이 부분에 대해서 여러분의 생각도 궁금합니다ㅎㅎ 댓글로 남겨주세요:)

여러분이 느낀 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 멤버십 카드를 만드는 웹서비스는 노코드 웹빌더인 웹플로우로 만들어보고 포스팅으로 연재해보겠습니다! 뭔가 저희 클럽만의 아이덴티티 굿즈가 있으면 재밌을거 같아서요🫡

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

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