피규마 (Pigyuma)

개인 프로젝트 2023.04

Figma와 유사한 DOM 기반의 UI 디자인 도구 패키지와 라이브 데모입니다.
완성을 목표로는 하지 않았으며, 경력 휴식기 중 기술 역량 유지를 위해 가볍게 진행했습니다.

Tech Stack:

• 공통: Yarn Berry(PnP), Turborepo, ESLint, Prettier, husky, Vercel
• 코어 패키지: TypeScript, React, vanilla-extract CSS, Vitest
• 라이브 데모 웹: TypeScript, React, Next.js, Recoil, vanilla-extract CSS, Vitest

---

기여

• 비슷한 유형의 서비스(Figma, Framer) 리서치
• 레이어 선택, 이동, 크기 조정, 회전, 그리기(생성) 기능 구현
• UI 데이터 모델 및 컴포넌트 개발
• Singleton 클래스와 React hooks 형태의 데이터 조작, 변경사항 구독, DOM 쿼리 API 개발
• 선택된 도구와 마우스 이벤트(Down, Move, Up)에 따라 상호작용 액션을 생성·실행하는 태스크 매니저 개발
• 회전된 레이어의 크기 조정을 위한 좌표 계산 로직 개발
• 라이브 데모에서 사용할 목적으로 커스터마이징 가능한 디자인 시스템 패키지 개발
• 224개의 테스트 코드 작성, 코드 커버리지 90% 이상 유지 (39c2dcd 기준 6,597/7,147 구문 통과)

구현된 기능 목록:

• 레이어 선택
• 레이어 이동
• 레이어 크기 조정
  • 정밀(소수점) 크기 조정: Ctrl + 드래그
  • 중앙 기준 크기 조정: Alt + 드래그
• 레이어 회전
  • 정밀(소수점) 회전: Ctrl + 드래그
• 아트보드 그리기 (단축키 F)
• 도형 레이어 그리기 (단축키 S)
• 제어 패널에서 수치 조작

패키지 사용 예시:

import UIDesignTool, {
  UIDesignCanvas,
  UIDesignToolProvider,
  useUIController,
  Artboard,
  ShapeLayer,
  TextLayer,
} from "@pigyuma/ui-design-tool";

const uiDesignTool = new UIDesignTool();

const initialData = [
  new Artboard(/* ... */),
  new ShapeLayer(/* ... */),
  new TextLayer(/* ... */),
  { type: "artboard" /* ... */ },
  { type: "layer", layerType: "shape" /* ... */ },
  { type: "layer", layerType: "text" /* ... */ },
];

const App = () => {
  return (
    <UIDesignToolProvider api={uiDesignTool}>
      <Workspace />
    </UIDesignToolProvider>
  );
};

const Workspace = () => {
  const uiController = useUIController();

  const onClick = () => {
    uiController.set("RECORD-KEY", { name: "Changed!" });
  };

  return (
    <>
      <UIDesignCanvas initialData={initialData} />
      <button type="button" onClick={onClick}>
        Change?
      </button>
    </>
  );
};

---

돌아가기

• 블로그
• 프로필