▲

GN⁺: "Ship Shape" 기술 도입으로 혁신된 도형 디자인

 (canva.dev)
2P by neo 6달전 | favorite | 댓글 1개

소개

  • Canva 사용자들이 새로운 Draw 도구를 통해 창의력을 발휘하여 맞춤형 그림을 디자인에 추가할 수 있음.
  • 사용자가 마우스나 트랙패드로 그린 간단한 선이나 도형도 부정확할 수 있어, 이를 보완하기 위해 Shape Assist 기능 개발.
  • Shape Assist는 기계 학습(ML)을 사용하여 불안정한 낙서를 매끄러운 벡터 그래픽으로 변환함.

디자인 고려 사항

  • 기능 개발 시 분류 지연 시간을 최우선으로 고려하여 사용자 경험이 신속하면서도 정확하도록 함.
  • 브라우저 내에서 솔루션을 배포하여 실시간 도형 인식과 그리기 지원을 제공함.
  • 인터넷 연결이 필요 없어 오프라인 상황에서도 접근성을 보장함.

데이터 수집

  • 성공적인 ML 모델의 기반은 데이터 수집에 있으며, 다양한 사용자로부터 그림 데이터를 수집함.
  • 사용자가 그린 선을 x와 y 좌표의 시퀀스로 기록하여 다양한 스타일과 변형을 포함한 데이터 세트를 수집함.
  • 좌표를 사용하여 데이터를 기록함으로써 데이터 전처리 및 다양한 데이터 증강 기술을 적용할 수 있는 유연성을 확보함.

모델 설계 및 훈련

  • 페이지 로드 시간에 부정적인 영향을 주지 않으면서 클라이언트 측에서 실행될 ML 모델을 설계함.
  • CNN 대신 좌표를 직접 사용하는 RNN을 실험하여 모델 크기를 최소화함.
  • 다양한 하이퍼파라미터를 조정하여 모델의 최적 속성을 식별함.
  • 사용자의 그리기 속도 차이를 고려하여 각 도형을 나타내는 점의 수를 고정함.
  • Ramer-Douglas-Peucker (RDP) 알고리즘을 변형하여 중요한 세부 사항을 유지하면서 점의 수를 줄임.

배포 상의 고려 사항

  • 모델이 작고 계산적으로 간단하여 클라이언트 애플리케이션 내에서 모든 처리를 실행할 수 있음.
  • 서버에 연결할 필요 없이 완전히 오프라인으로 기능 작동함.

모델 아키텍처

  • 모델은 LSTM 레이어 하나와 Gemm(밀집 또는 완전 연결 레이어)을 포함하는 구조로 구성됨.
  • 모델은 약 250킬로바이트 크기로, 클라이언트에서 실행하기 위해 Typescript로 직접 구현함.

도형 교체

  • 사용자가 그린 도형을 결정한 후, 벡터 그래픽 표현과 사용자 그림 경로를 정확하게 정렬하기 위해 템플릿 매칭 접근 방식을 사용함.

결론

  • Shape Assist 기능을 전 세계와 공유하게 되어 매우 기쁘며, 전문 디자이너나 낙서가 모두 이 기능을 즐길 수 있기를 바람.

GN⁺의 의견

이 기사에서 가장 중요한 것은 Canva가 브라우저 내에서 실행되는 기계 학습 모델을 사용하여 사용자가 그린 도형을 정확하게 인식하고 매끄러운 벡터 그래픽으로 변환하는 Shape Assist 기능을 개발했다는 점이다. 이 기능은 사용자에게 즉각적인 피드백을 제공하고 인터넷 연결 없이도 사용할 수 있어 접근성을 높인다. 이 기사가 흥미로운 이유는 기술의 발전이 어떻게 창의적인 작업을 더 쉽고 즐겁게 만들 수 있는지를 보여주기 때문이다.

▲
neo 6달전  [-]
Hacker News 의견

  • RNN 대신 "$1 unistroke recognizer" 알고리즘이 문제에 대한 간단하고 우아한 해결책임

    • "$1 unistroke recognizer"는 단일 샘플로 훈련되어도 잘 작동함
    • 사용자 인터페이스를 더 친숙하게 만들기 위해 프로젝트에 쉽게 통합될 수 있음
    • "Graffiti" 스타일의 텍스트 입력에 신뢰성 있게 작동하며, 각 글자가 단일 획일 때 효과적임
    • 원본 논문은 이해하기 쉽고 읽기 편하게 작성됨
    • unistroke recognizer 프로젝트 링크

  • ASML, TSMC 등의 엔지니어들은 매일 극단적으로 짧은 파장의 빛을 생성하기 위해 액체 납에 레이저를 쏘아 더 작고 성능이 좋은 칩을 만듦

    • 웹 개발자들은 자신들의 작업이 눈에 띄지 않도록 매일 노력함

  • 마우스나 트랙패드로 직선을 그릴 때조차도 불규칙한 모양이 되기 쉬움

    • Canva에서 마우스로 도형을 그릴 필요가 있는지 의문
    • Miro는 과거에 마우스로 그린 별을 기하학적으로 정확한 별로 변환하는 기능을 가졌음
    • 다이어그램을 만들 때는 미리 만들어진 도형을 사용하고, 아이콘을 만들 때는 전용 프로그램을 사용함
    • 실제로 그림을 그릴 때는 태블릿을 사용함
    • 기술 자체는 멋지지만 실제 사용 사례에 대한 의문

  • Canva가 선을 그리는 데 사용하는 라이브러리에 대한 관심

  • 20년 이상 전 Macromedia Flash에서 자유형 곡선을 그릴 때 곡선을 부드럽게 만드는 기능에 대한 놀라움

    • 당시의 제한된 처리 능력에 비해 인상적인 기능이었음

  • Ramer-Douglas-Peucker (RDP) 알고리즘 변형 개발에 대한 언급

    • RDP는 중요한 세부 사항을 유지하면서 곡선의 점 수를 줄이는 곡선 단순화 알고리즘임
    • 2018년 Strange Loop에서 피카소의 작업에 Douglas-Peucker를 적용한 사례 공유
    • Picasso's Bulls 프로젝트 링크

  • 손으로 그린 듯한 "떨리는 낙서" 버전이 매끄러운 벡터 그래픽보다 더 매력적일 수 있음

    • 인공적인 완벽함의 세계에서 진정한 손으로 그린 작품에 대한 매력

  • 이러한 기능을 구현할 때 사용자가 선택할 수 있도록 하고 활성화 상태가 명확해야 함

    • 도구가 너무 똑똑해지려 하고 완벽하지 않을 때 답답함을 느낄 수 있음

  • 모델을 훈련시켜 9가지 미리 정의된 도형을 인식하도록 함

    • 모델을 훈련시킬 때는 도형을 그리는 일반적인 스무더/도와주는 기능을 만들어야 함
    • 이를 통해 더 "아날로그" 스타일의 독특한 도형을 얻을 수 있음

  • 이 기능이 오픈소스였으면 좋겠음

    • 최근에는 작은 크기의 모델들이 등장하고 있음 (이 모델은 250kb임)
    • 유용한 애플리케이션을 위한 작은 모델로 돌아갈 수 있는 날을 기대함
답변달기