Uuno 에디터 개발 강지수

기술 고민

디지털 명함 에디터 프로젝트를 시작하면서 기술적 결정을 마주했다. 사용자가 자유롭게 배치하고 스타일을 조정할 수 있는 에디터를 만들어야 했는데 이를 구현하기 위한 고민이 필요했다.

처음엔 React-dnd + React-rnd를 활용한 Dom요소를 활용한 방식을 생각했지만 더 깊은 상호작용과 확장성을 위해 캔버스 기반으로 가기로 결정했다. 그 다음은 캔버스 라이브러리인 Febric.js와 React Konva 중 어떤 것을 선택할지 고민에 빠졌다.

팀원들과 의논하면서 의사 결정 과정, 각 기술의 장단점 비교, 최종 선택에 이르기까지의 과정을 적어보려고 한다.

캔버스 라이브러리 : Febric.js vs Konva

Febric.js

Febric.js는 오래된 강력한 캔버스 라이브러리이다.

장점

• 풍부한 내장 기능(텍스트 편집, 객체 조작, 그룹화 등)
• JSON으로의 저장 및 복원이 쉬움
• 상태 스냅샷 및 undo/redo 구현이 용이
• 커스터마이징 자유도

단점

• React에서 사용하기 위해 추가 작업
• 높은 학습 곡선
• 초기 단계에서의 높은 진입 장벽

Konva

Konva는 HTML5 캔버스를 위한 자바스크립트 라이브러리인 Konva.js를 React 환경에서 쉽게 사용할 수 있도록 만든 라이브러리이다.

장점

• React 컴포넌트처럼 사용 가능한 익숙함.
• React 상태 관리와 쉽게 통합
• 더 가벼운 번들 크기
• React 개발자에게 친숙한 개발 경험

단점

• 고급 기능들은 직접 구현(편집, undo/redo)
• SSR과 next.js에서 일부 문제 발생
• 상태 직렬화 및 저장/복원을 위한 추가 작업 필요

기능별 상세 비교

에디터 제작에 필요한 핵심 가능을 보기 쉽게 비교해봤다.

기능	Febric.js	Konva
텍스트 편집	내장 기능으로 더블 클릭시 직접 편집	별도 input 요소 구현 필요
undo/redo	Json기반 스냅샷으로 상대적 쉽게 구현	상태 관리 로직 직접 구현
요소 선택 및 변형	내장 기능	Transfer 컴포넌트 추가
저장 및 불러오기	.toJSON(), .loadFromJSON() 내장	직접 직렬화 로직 구현 필요
Next.js 호환성	상대적으로 문제 적음	SSR 이슈로 dynamic import 필요

실질적인 프로젝트 요구사항 고려

기술적 특성 외에도, 우리는 다음과 같은 실용적인 고려사항을 검토했다.

1. 팀의 기술 스택 : Next.js 14와 Tailwind CSS를 사용하는 React환경
2. 개발 속도 : MVP 빠른 구현과 확장 용이성
3. 유지보수성 : 코드 이해도와 향후 확장 가능성
4. 번들 크기 : 최종 사용자 경험을 위한 성능 최적화
5. 최신 트렌드 : 최근 다운로드 수 많은 최신 라이브러리

Konva의 npm 다운로드 수가 더 높은 것을 확인. 이는 React 개발자들에게 접근성이 더 높은 것으로 보임. React 친화적이라 Next.js에서 사용하기에 크게 문제가 없어보임.

최종 결정 : Konva 선택

팀원과의 논의 끝에 우리 팀은 Konva를 선택했다. 주요한 결정 요인은 다음과 같다.

1. React 친화적 : 팀이 Next.js 개발자로 Konva의 컴포넌트 기반 접근방식이 더 친숙했다.
2. 더 가벼운 번들 크기 : 초기 로딩 성능에 중점을 둠.
3. 낮은 진입 장벽 : 각 라이브러리의 docs를 봤을 때 Konva의 docs가 보기 쉽고 상대적으로 배우기 쉬울 것 같다고 판단.

물론 이러한 결정에는 trade-off가 있다. 진입장벽이 낮고 배우기 쉽지만 그만큼 고급 구현들은 직접 구현을 해야한다. 하지만 그 또한 배우는 과정에서 의미가 있다고 판단. 잘 만들어진 라이브러리를 가져다가 사용하는건 학습과 배움에는 덜하다는 생각이 들었다. 이러한 구현을 하는 과정 자체가 팀에게 높은 학습 기회가 될 것으로 예상된다.

Konva 사용시 예상되는 도전과 대응 전략

Konva를 선택하면서 도전과제를 예상하고 대응 전략을 계획했다.

1. 텍스트 편집 구현

   1. 더블 클릭시 input 창으로 입력 필드 표시
   2. 입력 완료 시 Text 업데이트

2. 크기 조절 및 회전

   1. 선택 요소 Transformer 연결
   2. 그룹 선택 시 그룹 Transformer 적용

3. 상태 저장 및 복원

   1. 상태 저장을 JSON 형태로 로컬 및 세션에 임시 저장
   2. 불러오기 시 저장된 JSON 받아오기

4. undo/redo

   1. history 상태 관리 로직 구현
   2. 상태 변경 감지 및 history에 스택 업데이트

5. SSR이슈

   1. Next.js에서 dynamic import 적용

   const Stage = dynamic(() => import('react-konva').then(mod => mod.Stage), { ssr: false })

결론

이번 기술 선택 과정에서 얻은 느낌은 완벽한 도구는 존재하지 않는다는 것. 특정 상황이나 팀의 상황 기술스택 등 여러 요인에 의해 모두 다 장단점이 다르게 작용한다.

Konva를 선택한 것은 Febric.js가 부족해서 선택한 것이 아니라. 우리 팀의 프로젝트 환경, 개발 기간, 학습 시간을 봤을 때 더 적합했기 때문이다. 다른 팀이나 우리와 다른 환경을 가진 프로젝트라면 Febric.js가 더 적합할 수도 있다.

이번 고민을 하면서 기술 선택은 단순히 무엇이 좋고 나쁘고를 따지는 비교가 아닌 팀의 환경, 개발 환경을 총체적으로 고려하는 과정임을 느꼈다.

---

참고자료

• https://konvajs.org/docs/react/index.html
• https://fabricjs.com/api/
• https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading