1. 안건

화이트 보드 기술 선택

Canvas vs SVG

효정: 퍼포먼스적으로 canvas가 유리하기 때문에 canvas를 하는게 합리적

명성: 프리드로잉과 같은 좀 더 유연한 기능이 canvas가 유리하기 때문에 canvas가 합리적

성훈: svg 방식의 레퍼런가 사용자 경험이 좋지 않아 canvas가 합리적

⇒ canvas 기반의 화이트보드 제작, 필요한 부분에 SVG를 붙여 하이브리드로 개발

canvas library

프로토타입을 빠르게 만들기 위해서 fabric.js를 도입

화이트 보드 구조 설계

Element 상태

{
  "type": "rectangle",
  "version": 15,
  "versionNonce": 815010149,
  "isDeleted": false,
  "id": "wRTZE5d7JqvhGrddlqhfa",
  "fillStyle": "solid",
  "strokeWidth": 1,
  "strokeStyle": "solid",
  "roughness": 1,
  "opacity": 100,
  "angle": 0,
  "x": 2554.342648592163,
  "y": 2460.7420410894,
  "strokeColor": "#000000",
  "backgroundColor": "transparent",
  "width": 1203.8942013068263,
  "height": 718.1256585276542,
  "seed": 1603672333,
  "groupIds": [],
  "strokeSharpness": "sharp",
  "boundElements": [],
  "updated": 1668930853603,
  "link": null,
  "locked": false
}

{
  "id": "M1g1c1SJkjVafumK-PGWJ",
  "type": "text",
  "x": 44590.6441639097,
  "y": 4173.214078633276,
  "width": 62,
  "height": 25,
  "angle": 0,
  "strokeColor": "#000000",
  "backgroundColor": "transparent",
  "fillStyle": "solid",
  "strokeWidth": 1,
  "strokeStyle": "solid",
  "roughness": 1,
  "opacity": 100,
  "groupIds": [],
  "strokeSharpness": "sharp",
  "seed": 2056682469,
  "version": 7,
  "versionNonce": 1176267269,
  "isDeleted": false,
  "boundElements": null,
  "updated": 1668930859731,
  "link": null,
  "locked": false,
  "text": "asdas",
  "fontSize": 20,
  "fontFamily": 1,
  "textAlign": "left",
  "verticalAlign": "top",
  "baseline": 18,
  "containerId": null,
  "originalText": "asdas"
}

{
  "id": "xiYUHwPJbR-jCXwtsxm3W",
  "type": "freedraw",
  "x": 44570.2338635293,
  "y": 4158.869671764144,
  "width": 67.62056264198327,
  "height": 73.11973576378114,
  "angle": 0,
  "strokeColor": "#000000",
  "backgroundColor": "transparent",
  "fillStyle": "solid",
  "strokeWidth": 1,
  "strokeStyle": "solid",
  "roughness": 1,
  "opacity": 100,
  "groupIds": [],
  "strokeSharpness": "round",
  "seed": 427557483,
  "version": 76,
  "versionNonce": 1097308939,
  "isDeleted": false,
  "boundElements": null,
  "updated": 1668930962778,
  "link": null,
  "locked": false,
  "points": [
    [
      0,
      0
    ],
    [
      -0.0853105120913824,
      0
    ],
    [
      -0.14761594226729358,
      0
    ],
    [
      -0.6326397525554057,
      0
		...
  ],
  "pressures": [
    1,
    1,
    1,
    1,
    1,
    1,
    1,
		...
  ],
  "simulatePressure": false,
  "lastCommittedPoint": [
    64.57718201418174,
    53.84435275764736
  ]
}

동기화 아키텍처

프로토타입: 서버/클라이언트 구조: 클라이언트에서 상태 변경 action을 전송 상태 업데이트를 서버에서 반영한 후 업데이트 된 상태 전체를 클라이언트로 전송

추후 전체를 일부분만 보내는 쪽으로 최적화 필요하지 않을까?

canvas 내 이동

프로토타입: 하나의 큰 물리적인 캔버스를 두고 스크롤해서 이동하는 방식