개발자, 트렌드를 버리다 — 1년 후 소감

13 min readMay 23, 2020

이 글은 https://medium.com/@easylogic/%EA%B0%9C%EB%B0%9C%EC%9E%90-%ED%8A%B8%EB%A0%8C%EB%93%9C%EB%A5%BC-%EB%B2%84%EB%A6%AC%EB%8B%A4-b5cbbf9ba958

이후로 1년이 지난 지금, 어떻게 변화했는지에 대한 글입니다.

처음 Gradient 에디터를 만들때는 이렇게 오래 하게 될 줄은 몰랐습니다. 왜냐하면 1년이라는 시간 동안 세상은 또 많이 변하고 있는 중이었거든요.

Typescript 가 완전히 대세가 되었고 , React Hooks 로 UI 를 다시 개발하고 , 곧 Vue3 로 나오고, 그 외에 알 수 없는 UI 프레임워크들이 엄청나게 나오고 있었습니다. 모두 각자의 미션을 해결하기 위해서 말이죠.

그런 시점에 여전히 난 내가 원하는 방식으로 고집하면서 만들어도 될까 하는 의문이 많이 들었습니다. 사실 잘 될 수 있는지도 확신이 없었어요. 다른 사람들한테 공유하기 위해서라도, 아니 같이 개발할 동료를 모으기 위해서라도 사람들이 많이 쓰는 것으로 바꿔야 하는 것이 아닐까 하고, 고민을 많이 했습니다.

그렇게 고민을 하다가보니 결론은 이왕 시작한 거, 기존의 시스템을 최대한 발전시켜보자 였습니다. 그래서 지난 1년 동안 엄청난 리팩토링을 했습니다.

만들기는 했지만 속도가 느린 함수들, 구조가 맞지 않는 메세징 시스템 부터 시작해서 처음부터 다시 뜯어보고 고치기를 여러번…

이제서야 겨우, 아~ 이렇게 UI 만들면 생각보다 힘들이지 않고 만들 수 있겠구나를 느끼고 있습니다.

1년 동안 어떤 일이 있었을 까요?

1년 전 코드는 여기를 참고해주세요. https://github.com/easylogic/css

코드

현재는 1년전 코드에서 레파지토리를 분리해서 다시 만든 상태입니다.

easylogic/editor

EasyLogic Studio is built using CSS and SVG to reduce the gap between web design and code. The goal is to have the same…

github.com

추가 라인 239,490 — 삭제 라인 165,072

1년 동안 대략 7만줄 이상의 코드를 새로 만들어 내었습니다.

코드를 작성할 때 저 나름의 규칙을 정하고 있는데요. 최대한 사람(나?)이 이해 가능한 코드를 만들자 입니다. 한 줄 한 줄 말하듯 코드를 작성하는 건데요. 한줄이 이해가 안되면 이해가 되는 방향으로 최대한 맞추면서 코드를 작성했습니다. 조금 길다 싶으면 바로 코드를 분리했고, 컴포넌트를 다시 정리하고 리팩토링을 그 시점에 바로 했습니다.

그래서 생각보다 리팩토링 하다가 상당히 많은 시간을 보냈습니다. 내 코드에 내가 일관성을 가지지 못하게 되면 더이상 만들 수 없을 것 같은 느낌이 들었습니다.

릴리즈

혼자 하는 작업이라 릴리즈가 그렇게 의미는 없지만, 중요 기능이 들어가는 시점에는 릴리즈 버전을 올렸습니다.

v0.4.3 부터 v0.9.44 까지 15개의 릴리즈를 만들어냈습니다.

릴리즈 노트를 적으면서 실제로 내가 했던 것들을 돌아보면서 다시 테스트를 해봤습니다.

개발을 하다 보면 마지막 테스트에서 안 될 경우가 많은데 , 그것에 대한 항목을 최대한 잘게 쪼개고 실수가 없도록 하고 싶었습니다. (아직 테스트 코드가 많지는 않아요)

그래서 최대한 알고 있는 코드를 재활용하고 작은 코드로 프로그램을 만들수 있도록 계속 연습했습니다.

어느 정도 익숙해지기 시작한 이후 부터는 리팩토링을 하면서도 기능을 계속 추가 할 수 있었고, 지금은 릴리즈를 주기적으로 해도 괜찮지 않을까 하고 생각하고 있습니다.

단순히 버전업뿐만 아니라 몇가지 배포 시나리오가 바뀌었습니다.

npm 를 통한 외부 설치가 가능하게 되었습니다. 즉, 에디터를 가져 가셔서 단순히 설치하고 외부에서 몇가지 기능을 추가로 넣을 수 있게 해서 커스텀한 에디터를 만들 수 있는 기초를 설계하였습니다.
whale, chrome 에 extension 으로 배포 할 수 있도록 구조를 맞췄고
PWA 지원을 통해 웹에서 바로 어플 형태로도 사용할 수 있도록 했습니다.

그럼 이제 변경된 주요 기능을 한번 살펴보겠습니다.

기능

에디터의 개요를 Fantastic Web Design Tool 로 정했습니다. CSS + SVG 기반의 여러가지 에디팅 방식을 제공해서 코드 없이도 괜찮은 디자인을 만들어 내는 것이 목표입니다.

단순히 Gradient 제공 툴이 아니라 웹 디자인 툴이 되기 위해서 많은 기능이 필요했습니다.

주요 기능 추가를 한번 볼까요?

CSS 의 Unit 과 비슷한 Length 객체 지원 ( 10px, 1% 등을 동일한 값에서 동시에 처리 가능 )
Length 를 처리 가능한 RangeEditor 등의 기본 에디터 기능 추가
커스텀 selector 지원 ( ex: :hover 등의 추가 selector 에 값을 줄 수 있음)
layout 개념 지원 (flex, grid)
멀티 transform , filter, backdrop filter 지원
transition, keyframe, animation 기능 지원
motion path 애니메이션 지원
Text, Image 등의 기본 컴포넌트 추가 (기존에는 Rect, Circle 두 개만 존재)
SVG Path, Text, TextPath 등의 SVG 컴포넌트 추가 (SVG Path 에디터 지원)
Cube, Cylinder 등의 커스텀 컴포넌트 추가
clip-path, textpath 등에 Path 에디터 연동
SVG Filter Flow 에디터 추가
레이어 멀티 셀렉션 기능 추가
캔버스 스케일 기능 추가
프로젝트 전체에서 쓸 수 있는 Asset 기능 추가 (Color, Gradient, SVG Filter, Image )
다국어(i18n) 지원 (영어, 한국어)
테마 지원 (light, dark)
애니메이션을 실행 해주는 Timeline 라이브러리 분리 (https://github.com/easylogic/anipa)
UI 개발 프레임워크 분리 (https://github.com/easylogic/sapa)
자체 Gradient 에디터 colorpicker 라이브러리에 추가 (https://colorpicker.easylogic.studio/#gradientpicker-for-standalone)
pwa 지원, chrome, whale 확장 프로그램 제공
npm install 지원 (실사용 문서는 아직….)

이제서야 겨우 웹 디자인 툴 같은 느낌을 가지게 되었습니다. 디자이너들이 잘 쓰는 에디터 툴에 비해서는 아직까지 걸음마 수준이지만 기초는 나름 잘 잡은 것에 대해서는 만족하고 있습니다.

앞으로 어떤 툴로 변화가 될지 모르겠지만, 컨셉을 잡기만 하면 기능 추가는 나름 어렵지 않게 할 수 있는 수준이 되었거든요.

1년 동안 만들 면서 가장 힘들 었던 기능은 2가지였습니다.

메인 기능으로 구성되어 있던 Gradient 에디팅 기능을 하나의 기능 영역으로 만드는 것이었습니다. 웹 디자인 툴로서 포지셔닝을 위해서는 어쩔 수 없는 선택이었는데요. UI 전체를 팝업형태로 다시 다 구성해야했기 때문에 초기에 Gradient 에디터 만든 만큼 시간을 썼던 것 같습니다.
그리고 Path 에디터를 구현한건 정말 큰 도전이었습니다. bezier curve 에디팅 방식에서 부터 svg 만의 위치 변환을 모두 구현해야 했습니다. 이건 FE 로 살면서 한번도 해본적이 없던 영역이라 정말 고민을 많이 하면서 만들었던 것 같습니다. 한 참 전에 path 를 만들어내고 segment 를 움직일 수 있는 툴(https://github.com/juijs/www.jui.io/tree/master/gallery/svgpen) 을 만든 경험이 있지만 이건 너무 초보수준 이었습니다.

디자인 툴을 목표로 기능을 추가 하면서 다른 툴들을 많이 벤치마킹 해보고, 변화를 계속 줬습니다.

구현을 할 수 있는 영역도 있지만 공부를 많이 해야하는 영역이 훨씬 더 많이 생겨났습니다. 그렇지만 오롯이 내가 생각하고 만들 수 있다는 것이 엄청난 자신감으로 다가왔습니다.

그래서 다음 1년은 또 얼마나 발전해 있을지 스스로 기대가 되고 있습니다. (?)

그렇다면 진짜로 얼마나 달라졌는지 디자인을 한번 살펴보겠습니다.

디자인

Main Design

1년전 : https://css.easylogic.studio

1년 후: https://editor.easylogic.studio

툴 전체를 디자인 하기 위해서, 현재 있기있는 여러 툴들의 컴포넌트 디자인을 그대로 차용해서 계속 연습했습니다. 그 결과 나름의 디자인 구성을 할 수 있었습니다. 그 중에 가장 영감을 많이 받은 툴이 Framer 입니다. (최근에 웹버전이 구현이 되어서 릴리즈 되었죠.)

다른 그래픽 에디터들은 대부분 벡터 그래픽 엔진이 기본이지만 저는 CSS 와 SVG 를 둘다 다뤄야 하다 보니 비슷한 패턴을 찾기가 어려웠습니다.

결국은 스스로 고민하고, 생각하고, 해결책을 만드는 것이 코딩이 아닐까 하고 있습니다. 그래서 안 이쁘더라도 일단은 기능을 만들고 후에 디자인을 계속 수정할 수 있었던 것 같습니다.

몇가지 주요 기능에 대한 화면을 잠시 보겠습니다.

Multi Selection

여러개의 객체를 동시에 선택해서 동시에 변화를 줄 수 있습니다.

Path Editor

SVG 의 Path 를 편집하는 도구 입니다. 오른 쪽에 Fill, Stroke 등의 속성을 편집 할 수 있는 툴도 제공하고 있습니다.

이것을 좀 더 응용하면 아래와 같은 것을 할 수 있는데요.

TextPath

SVG 에 있는 textpath 를 편집하는 화면입니다. textpath 는 기본적으로 path 를 가질 수 있고, 이것은 결국 path 에디터랑 같은 방식으로 편집할 수 있기 때문에 이런 속성들의 에디터를 잘 연계하면 평소에 하지 못했던 CSS + SVG 로 많은 것들을 할 수 있습니다.

예를 들어 CSS 에 있는 clip-path 에는 path 라는 값이 들어갈 수 있는데요. 아직은 구현된 브라우저가 없지만 값은 path(xxx) 형태로 들어가 있으면 그 안에 있는 xxx 의 정보를 읽어서 path 에디터로 표현해줄 수 있게 됩니다. 실제 내부 구현은 표준인 svg 자체를 clip-path 로 지정되도록 할 수 있습니다.

그렇게 하면 아래와 같은 화면이 나옵니다.

ClipPath

New Rect 는 단순한 html element 이고 background-image 를 통해서 radial-gradient 를 적용한 상태로 clip-path 를 svg path 형태로 편집할 수 있도록 맞췄습니다. 네, 이제부터는 웹의 표현력이 엄청 올라가게 되는 것이죠.

svg 자체 속성에도 clipPath 가 있지만 css 에서 사용하는 것은 조금 다른 느낌이지 않을까 합니다. 우리가 평소에 css 로만 사용하기 힘들었던 에디팅 영역을지속적으로 제공할려고 하고 있습니다.

Gradient

밖에서 있던 Gradient 편집 기능을 하나의 기능으로 동작하도록 팝업 형태로 바꿨습니다.