왜 만들어야하지?

  • FUI 아트웍을 만드려면 많은 쉐이프가 필요하다.
  • 구성하는 속도가 관건이다. (조립속도)
  • 쉐이프 관리에서 어려움이 느겨졌다. 과거 작업부터 다양한 리소스가 퍼져 있다보니 찾기도 어렵고 조각 형태의 쉐이프를 가져오는게 어려움을 느낀다.
    좀더 쉽게 찾고 가져올 수 있다면 작업에 수월할텐데..
  • 자동제작 기능이 필요하다.
  • 손으로 만드는건 언젠가는 한계가 올것이다.
  • 대량생산 / 막 만드는것도 되겠지만 한개를 만들고 시리즈로 만들때 다른 다른 조합으로 빠르게 제작할 수 있을것이다.

기대효과

  • 쉐이프 관리 (쉐이프 프리셋)
  • 랜덤제작(조립)
  • AI 활용
  • 그림 형태를 바탕으로 한 제작 (실루엣)
  • 자동제작 부분이 아무래도 가장크다.

연구

  • HTML SVG 만으로 제작이 가능할까?
  • canvas로 만들면 구현이 괜찮을까..
  • 랜덤배치
  • 쉐이프 에디팅
  • 확대/축소, 패닝같은 기능들
  • 에디터와 UI의 연계 (vue, svelte, react)
  • AI 학습
  • 어쩌면 성능 때문에 Processing을 이용할지도 모르겠다.

기능

  • 쉐이프 보관 (프리셋 형태)
  • 자동제작
  • 빠른배치
  • 벡터추출

메타데이터

조회수
328
좋아요
0

2개의 댓글

에디터라는건 좀 부적절하지 않을까 싶다.
만약 에디터로 만들어버리면 일러스트레이터 수준으로 만들어야 하는데 다른 svg 에디터를 리서치해보니 transform 기능이 기본적으로 들어있는데 이것까지 생각해보지 못했다.
처음에 생각했던것을 만들어져 있는 프리셋 조각들을 덕지덕지 붙이는걸로 생각하고 있었는데 이걸 편집까지 생각하고 있지 않는가 뒤돌아봐야할듯하다.

캔버스를 편집하는 기능은 절대로 없을것이며 프리뷰, 자동제작, 프리셋 관리, 추출 기능까지만 집중하는게 좋을거 같다.

스트레스 연구

개체수를 많이 늘려둔 상태에서의 퍼포먼스가 어떤지 확인이 필요하다.
쉐이프 10,000~1,000,000개 정도 생각하고 있고, 단순한 패스와 복잡한 패스가 다양하게 존재하기 때문에 변수가 많다.

다음과 같이 테스트케이스를 만들어볼 수 있다.

  • html svg element / 10000개 넣어보니 성능은 4프레임대로 형편없다. 못쓸 수준이다. ㅠ
  • svg to canvas
  • canvas (flutter)

하나씩 테스트해보고 결과는 이 댓글에서 업데이트할 예정이다.


어떤식으로 구동시켜 테스트를 해봐야할지 판단해야 할것이다. 다음 동작을 시켜보고 fps를 확인해봐야 할것이다.

  • 계속 만들기 (0.1초마다 10개씩 만들기)
  • 돌리기 (rotate)
  • 스케일 조정
  • 움직이기