12만 글로벌 유저들이 생겨버린
Three.js 사이드 프로젝트 ─

ShaderGradient 개발기

(재밌는 거 했는데, 돈도 벌어다 주네요?)

React Component

github.com/ruucm/shadergradient

네 Unique Users 12만명 돌파했습니다

한국에서 오히려 덜 유명한..

매년 약 200만원 벌어다주는
(아직도 계속 올라가는 YRR..)

글로벌로 터져버린 사이드 프로젝트

Shader Gradient

Create beautiful moving gradients on Framer, Figma and React

재밌는 거 했더니
돈도 벌어다 주네요?

재밌는거 하나.

Three.js & GLSL 코드의 매력

Three.js

표현의 한계는 없습니다

웹은 프론트엔드 개발자들의
우주입니다

Apple Vision Pro close up showing the top of the aluminum enclosure
Apple Vision Pro close up showing the top of the aluminum enclosure
Apple Vision Pro close up showing the top of the aluminum enclosure
Apple Vision Pro close up showing the top of the aluminum enclosure
Apple Vision Pro close up showing the top of the aluminum enclosure
Apple Vision Pro close up showing the top of the aluminum enclosure
Apple Vision Pro close up showing the top of the aluminum enclosure
Shader

Shader 는 GLSL (OpenGL Shading Language) 으로
쓰여진 프로그램 입니다.

GPU 에서 동작하고, 빛이 나 매터리얼 표현을 커스터마이징 하는데 최적화 되어 있습니다.

Apple Vision Pro close up showing the top of the aluminum enclosure
Apple Vision Pro close up showing the top of the aluminum enclosure
Apple Vision Pro close up showing the top of the aluminum enclosure
Apple Vision Pro close up showing the top of the aluminum enclosure
Apple Vision Pro close up showing the top of the aluminum enclosure

개쩔지 않나요?

픽셀단위 Declarative 코딩이 가능하다니요 😮

Shader 코드의 매력
더 살펴보기

Shader 코드는 각 픽셀의 위치값, 외부에서 오는 파라미터값,
3D 공간상의 Position 값등을 변수로 사용할 수 있습니다

Apple Vision Pro close up showing the top of the aluminum enclosure
Apple Vision Pro close up showing the top of the aluminum enclosure

이 프로젝트의 시작

이 재밌어 보이는것을 (개쩌는걸) 갖고
뭔가 쓸만한걸 만들어보고 싶었습니다

그래서 프레이머 커뮤니티에서
같이 할 분을 찾았죠

Apple Vision Pro close up showing the top of the aluminum enclosure
매주 일요일 3시간씩 / 1년

Three.js 도 크게 익숙하지 않았고

Shader 코드는 진짜 어려웠으며

프레이머용 컴포넌트를 만드는 일은
개떡 같았습니다

Apple Vision Pro close up showing the top of the aluminum enclosure
Apple Vision Pro close up showing the top of the aluminum enclosure

재밌는거 둘.

React 보다
더 편한것을 만들기

jQuery vs React.js
(vs Svelte)

  1. React 왜 쓰세요?

    편하니깐 쓰죠?


  2. 왜 편한가요?
    jQuery 처럼 한줄한줄 동적인 상태를 지정하지 않아도 되어서

    = 코드량이 엄청 줄어서


  3. Svelte 왜 좋아보이죠?
    상태관리가 쉬워보여서

    = 관리해야하는 코드량이 줄어서

리액트 보다 웹개발을 더 편하게

Introducing.
Stateless React.

반복되는 State 코드를 없애세요 그러면
관리 해야하는 코드량이 줍니다

디자인 캔버스에도 이 컴포넌트를 사용하세요
모두가 동적인 컴포넌트를 사용할 수 있습니다

반복되는 동적인 컴포넌트들의 State 패턴을 발견하세요

이 State 패턴을 재사용할 수 있게 컴포넌트를 디자인하세요

변수 이름 바꾸듯이
각 Component 의
State 이름 만 바꾸어 주세요

더 이상 반복되는
State 코드를 작성하는데
시간을 낭비하지 마세요

디자이너들과 같이
동적인 컴포넌트를 코드 없이
사용해보세요

간단 예제

그려진 버튼을

Stateless Component 로 만들고



디자인 캔버스에서 ‘코드 없이’

Drag & Drop 하여 사용

바로 도입
할 수 있는 예제

Form 다 써 보셨죠?

Form 별로 Context 를 만들고

안쪽 Input 들에서 벌어지는
사용자의 인풋값,
Validation 등에 관한 State 들을

State 코드 없이 사용해보세요

비교

기존 리액트 컴포넌트

  • 디자이너: [그래픽 + props] + layout styles (Auto Layout)

  • 개발자: [그래픽 + props] + state codes (local / global) + layout codes (CSS) → publish 🚀


Stateless React Components

  • 개발자: [그래픽 + props + states]

  • 디자이너: [그래픽 + props + states] + layout styles (Design Canvas) → publish 🚀


*[] 쳐진 부분이 디자이너와, 개발자가 컴포넌트라는 이름으로 공유하는 부분

장점 & 단점

장점 ─ 생산성

반복 작업 해야되는 코드를 1/10 로 줄이고,
중요한 로직 코드에 집중 할 수 있었음

ShaderGradient 의 UI 컴포넌트가 갖추어진 후
→ Layout 관련 HTML & CSS 를 전혀 사용 안함
→ State 관련 코드 역시 전혀 사용 안함


장점 ─ 커뮤니케이션

디자이너가 자기 캔버스에서 실제 동적 컴포넌트들로
디자인을 완성할 수 있음


단점 ─ 툴 의존성

디자이너 협업시, Framer Hosting 을 쓰거나

Handshake 사용하는것을 권장
(Next.js 에 잘 돌아가지만 여전히 베타 인 기능이 리스크)

* 개발팀 내에서만 사용한다면 관련 없음

Apple Vision Pro close up showing the top button on the aluminum enclosure, and light seal
Apple Vision Pro close up showing the top button on the aluminum enclosure, and light seal
ShaderGradient
실제 적용 사례

왼쪽것을 활용해


피그마 플러그인 UI 를 승미님이

그리고 디자이너가 그대로 배포해버리는...
기적같은 일이


* 디자이너분(승미님)이 디자인 캔버스에서
각 Controls 또는 Gradient 컴포넌트들을 어디에 위치시키던지
모두 같은 Store 에 연결 되어있음

* 플러그인상 화면이 바뀌는것은
프레이머 Variants 기능을 이용하여 디자인

* GIF Export 등의 기능은

Figma API 를 iframe 에 Override 하는 형태로 구현

마주친 문제

프레이머의 개떡같은
개발자 지원..ㅋ

초기 맞닥뜨린 문제
: 프레이머 코드 작업환경

Built-in Code Editor 는 창 한개 만 지원 + 구림

Git or Version Control 기능 없음

npm package version 한번 지정하면 업데이트가 안됨..

Local ESM Serve

Localhost 에서 ESM 을 개발하고

프레이머 캔버스에 Serve 하자

→ Deploy to CDN (for ESM) & Release

나름 성공적

After the First Launch

프레이머 캔버스에서 도는 컴포넌트 Module 의 URL 은 무조건 한개

ShaderGradient ESM version 0.0.1
ShaderGradient ESM version 0.0.2

→ ShaderGradient (Framer ESM)
https://framer.com/m/ShaderGradient-Iog3.js

→ Automatically updated 0.0.2
Users (WTF? 🤬)

IP-based ESM Serving

ShaderGradient ESM 파일 자체를
사용자에 따라 다르게 제공하는 Server 를 구성
https://esm-shadergradient.onrender.com/index.mjs

IP checking

→ ShaderGradient (Framer ESM)
https://framer.com/m/ShaderGradient-Iog3.js

→
Testers IP

(Staging (0.0.2) Modules)
Normal Users IP (Production (0.0.1) Modules)

결론

회고 & 배운것들

어떻게 사람들이 이렇게까지 좋아 한거지?

사람들의 사랑을 받는 '디지털' 제품을 만든다는것


1. Product (탁월함은 기본)

  • 너무 좋아서, 오라고 안해도 사람 머리속에서 생각이 나야


  • '좋다' 라는것은 절대값이 아닌 상대값

    • 메이커가 공감할 수 있는 타깃

    • 꼭 필요한 작은 볼트 너트


2. Audiences

  • 운좋게 프레이머를 좋아했고, 트위터에서 프레이머 좋아하던 사람들을 많이 알고 있었


  • 또 운좋게 프레이머용 컴포넌트를
    (피그마 보다) 먼저 만들어서 공유하기 자연스러웠음


3. Distribution

  • 런칭 전 호기심을 끌만한 Comming Soon 영상을 공개


  • 이때 부터 Mailchimp 구독을 모았음


  • 프레이머 유저 중심으로 퍼지다, Fons Mans 등
    디자이너 Guru 분들이 리트윗을 많이 해주심
    (프레이머가 Website Builder 로 큰 상승세였던것도 한 몫)


  • 470명 → 1.0 Lauch 일때 약 1,000명


  • 피그마 컴포넌트는 올려만 두고 있다고 얘기한적이 없는데,
    프레이머 보다 유저수가 1.5배는 많이 잡히는것을 발견


  • 피그마에 빠르게 유료 멤버십 기능 넣고, 1개월만에 릴리즈

Stateless React
+ 프레이머

진짜 좋았나?

X 같았던 점

  • Framer 의 매우 잦은 업데이트 & 개발자 지원 리소스 부족

  • IP Based ESM 서버

    • Structure 가 쓰면 편한데, 사이드 프로젝트 특성상
      매일 쓰는 구조가 아니다 보니

      다시오면 까먹음 (이거 배포 어떻게 하더라..)


좋았던 점

  • 우선 이 컴포넌트를 만든 제작자 자신들이 랜딩 페이지를 만들기 너무 좋았음

    • 20개가 넘는 3D 캔버스 컴포넌트에,
      스크롤 인터렉션까지 같이 있는 구조라

      코드로 이 모든것을 관리 했으면
      복잡도가 상상을 초월했을것

    • 특히 디자이너 분이, 개발자 도움 없이 원하는 때
      언제든 랜딩을 수정하고 업데이트 할 수 있었음

  • 피그마 플러그인 UI 를 따로 개발 할 필요가 없었음

    • Stateless React 컴포넌트들의 파워

    • Payment + Membership 까지 있는
      UI 였는데도 진짜 뚝딱 만듬
      (1개월중 UI 개발에 들인시간 5~10%)

  • 많이 배웠다... 🥹

The End

여러분도 재밌는거 하고 사세요!

들어주셔서 감사합니다

프레이머 도입 컨설팅 & 교육 문의

ruucm@harbor.school