피규마 (Pigyuma)

Side Project 2022.12 - 2023.04

Figma와 유사한 DOM 기반의 UI 디자인 도구 패키지와 라이브 데모입니다.

완성을 목표로 하진 않았으며, 경력 휴식기 중 기술 역량 유지를 위해 가볍게 진행했습니다.

라이브 데모 링크

소스 코드 저장소

구현된 기능 목록:

• 레이어 선택
• 레이어 이동
• 레이어 크기 조정
  • 정밀(소수점) 크기 조정: 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>
    </>
  );
};

---

Roles & Responsibilities

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

Archivements

• 224개의 테스트 코드 작성, 코드 커버리지 90% 이상 유지 (39c2dcd 기준 6,597/7,147 구문 통과)

Learned

• 일반적인 앱보다 더 밀도 높고 다양한 DOM 제어 경험
• React 외부의 데이터 저장소 및 공급자(Provider), API 개발 경험
• 모노레포 환경의 Frontend 개발 경험

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