하이벡터 – 빠르고 현대적인 SVG 편집기

 (hyvector.com)
3P by GN⁺ | ★ favorite | 댓글 1개
  • 벡터 그래픽 작업에서 무거운 데스크톱 앱을 열 필요 없이, Hyvector는 브라우저에서 SVG를 몇 초 안에 편집·내보내는 흐름을 제공함
  • 아이콘 수정, 로고 초안, SVG 패스 정리 같은 빠른 작업을 계정 생성이나 대용량 앱 다운로드 없이 바로 처리할 수 있음
  • 모든 처리는 로컬에 머무르는 프라이버시 우선 방식이며, 빠른 시작과 낮은 메모리 사용량을 목표로 함
  • 양방향 텍스트, 복잡한 문자 체계, Arabic 같은 연결 문자용 크로스 포맷 셰이핑을 지원함
  • 1인 개발자가 5년간 핵심 기반을 만든 뒤, 안정화된 코어 엔진 위에 전역 색상, 동적 선 두께, 가변 글꼴 같은 기능을 추가 중임

설치 없는 SVG 편집 흐름

  • Hyvector는 브라우저에서 바로 실행되는 SVG 및 벡터 그래픽 편집기임
  • 빠르게 파일을 열고 편집한 뒤 그래픽을 내보내는 작업 흐름에 초점을 둠
  • 계정 생성이나 대용량 앱 다운로드 없이 사용할 수 있음
  • 빠르게 처리하기 좋은 작업은 다음과 같음
    • 아이콘 수정
    • 로고 초안 작성
    • SVG 패스 정리

가벼운 실행 환경과 프라이버시

  • 설치 없이 어디서나 실행할 수 있음
  • 빠른 시작과 낮은 메모리 사용량을 목표로 함
  • 모든 처리가 로컬에 머무르는 프라이버시 우선 방식을 사용함

편집 기능과 개발 상태

  • 타이포그래피 지원

    • 전체 양방향 텍스트를 지원함
    • 복잡한 문자 체계를 다룰 수 있음
    • Arabic 같은 연결 문자에 대해 크로스 포맷 셰이핑을 지원함

  • 벡터 편집 도구

    • 드래그 앤 드롭 방식의 요소 트리 보기를 제공함
    • 기울이기, 회전, 크기 조정을 포함한 전체 변환 기반으로 패스를 정밀하게 제어할 수 있음
    • 강력한 지우개 모드를 포함한 페인트 브러시를 제공함

  • 1인 개발 프로젝트

    • 처음에는 빠른 사이드 프로젝트로 시작했지만, 벡터 그래픽의 복잡성 때문에 5년간 진행됨
    • 핵심 기반은 완료됐고 코어 엔진은 안정화된 상태임
    • 다음 기능으로 전역 색상(global colors), 동적 선 두께(dynamic stroke widths), 가변 글꼴(variable fonts) 등이 준비 중임

함께 보면 좋은 글 β

GN⁺   [-]
Hacker News 의견들

  • 멋짐. 내 사이드 프로젝트가 C++ SVG 렌더링 라이브러리인데, 괜찮은 SVG 편집기를 찾기 어려웠음
    보통 Illustrator로 작업한 뒤 생성된 마크업을 정리하거나, https://www.svgviewer.dev/ 같은 텍스트 기반 편집기로 돌아가게 됨
    UX가 꽤 다듬어져 있고, 지금도 내가 찾아본 다른 도구들보다 기능을 더 많이 지원함. 참고로 내 프로젝트는 https://github.com/jwmcglynn/donner이고, 웹 기반 “편집기”(현재는 코드 기반 편집만 가능) 프로토타입은 https://jwmcglynn.github.io/donner-editor/에 있음
    SVG는 잠재력은 큰데 도구가 별로라 영향을 받아온 분야라서, 이 영역에서 새 시도가 나오는 게 반가움

    • Inkscape는 뭐가 문제인가? 버그는 좀 있지만 그 외에는 꽤 잘 동작함

  • 좋은 시작임. 빠져 있다고 느낀 명확한 기능들이 있음
    노드 도구는 편집할 때 시작/끝 노드를 서로 스냅하려고 해야 하고, 처음 만들 때는 특히 연필 도구에서 스냅 거리를 더 크게 둘 수 있음
    편집용 노드 도구보다는 Wick Editor의 Flash/Futurewave SmartSketch식 당기기/밀기 변형 같은 방식이 모바일에 훨씬 친화적일 듯함
    다각형에서 모서리 둥글리기가 동작하지 않는다면 숨기거나 비활성화해야 함

  • KDE의 Karbon이 이런 모습이었으면 했음. 친근하지만 빠르고 유능한 SVG 편집기임
    가능하다면 SVG Path Editor0에 있는 기능도 들어가면 좋겠음. 예를 들면 절대 좌표를 상대 좌표로 바꾸거나, 각 경로의 선과 곡선을 개별 편집하는 기능 같은 것들인데, 다른 편집기에서는 찾지 못했음
    있으면 훌륭하지만 작업량이 엄청나거나 별도 프로젝트가 될 수도 있는 기능으로는 애니메이션도 있음

    • “SVG Path Editor”라는 이름의 프로젝트가 여럿 있는데, 그중 이게 내가 본 것 중 가장 발전했고 쓸 만함

  • 좋아 보임. 비판하려는 건 아니지만, 편집기에서 SVG 자체는 추상화 수준이 잘못된 대상이라고 늘 생각했음. 원하는 건 SVG 편집기가 아니라 벡터 드로잉 프로그램임
    물론 최적화된 SVG로 렌더링해야 하지만, 경로, 클립 경로 같은 SVG 개념을 중심으로 UI/UX를 만들면 최종 사용자에게 친절하지 않음. Inkscape에서 늘 거슬렸던 부분도 이쪽임
    진짜 강력한 기능은 Blender의 수정자(배열, 미러 등) 같은 걸 벡터 편집기에 넣어 비파괴 편집을 가능하게 하는 것이라고 봄

    • 사실 그게 이 도구의 방향임. 내부 객체 모델이 있지만, 현재는 SVG에서 내부 모델로의 매핑이 거의 1:1에 가까움
      첫 예외가 클립 경로인데, Hyvector에서는 획과 채우기, 그리고 그 경로 바깥에서 잘리는 콘텐츠를 가진 경로로 다룸. SVG에서 클립 경로 처리는 꽤 번거롭고 직관적이지 않음
      계속 개발할 수 있다면 경로의 모서리 둥글리기, 비파괴 불리언 연산, 가변 획 너비, 여러 채우기, 왜곡 같은 기능이 뒤따를 예정임
      다만 내보내기 형식은 SVG로 유지하고 싶음. 웹에 정말 좋고 CSS로 스타일링할 수 있기 때문임. 그래서 효과는 실제 SVG로 내보낼 수 있어야 하고, 일부 편집기처럼 SVG로 내보낼 때 가짜 비트맵을 SVG 안에 넣는 방식은 피하려고 함. 예를 들어 원뿔 그라디언트는 언젠가 SVG가 지원하기 전까지는 없을 것임
    • Inkscape의 LPE가 정확히 그거임. 비파괴 경로 수정자임. Graphite.rs 편집기는 어떤 면에서는 비파괴 효과에 더 큰 초점을 두고 있음

  • 이 아이콘을 편집해서 화살표를 원 중앙에 두려고 했는데, 마스크가 제대로 인식되지 않아 검은 원만 보였음
    http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink" width="20"
    height="20" viewBox="0 0 20 20" stroke-width="2" stroke="black">

    • 위 글에 쓴 것처럼 마스크와 필터는 아직 지원하지 않음
      이 아이콘에는 마스크보다 클립 경로가 더 적절할 수 있음. 같은 모양의 아이콘을 만들고 싶다면 마스크 안의 요소를 가져와 Hyvector에 붙여 넣은 뒤 작업하면 됨

  • 아주 좋음. 웹 기반 편집기를 좋아함
    가져온 SVG에서 모든 객체와 그룹이 올바른 미리보기와 함께 명확하게 보이는 점이 마음에 듦
    빠졌거나 찾지 못한 기능이 두 가지 있음. 선을 도형으로 변환하는 방법이 있는지, SVG 코드를 직접 손으로 실시간 편집할 수 있는지 궁금함. 일반 사용자에게는 너무 틈새 기능일 수도 있지만, 채우기 같은 일부 작업은 시각 도구보다 코드로 편집하는 편이 훨씬 쉬움
    오픈소스로 공개할 가능성이 있는지도 궁금함

  • UX가 정말 마음에 듦. Wacom 지원 Android 태블릿에서도 아주 쓸 만함
    스플라인 편집 방식, 즉 개별 핸들을 조정하는 대신 선의 임의 지점을 끌어 움직일 수 있는 기능이 직접 고안한 것인지 다른 데서 가져온 것인지는 모르겠지만 정말 마음에 듦
    왼쪽 트리에서 터치 스크롤이 동작하지 않는 것만 보였고, 그 외에는 매우 부드러움. 키보드 단축키도 구현했는지 궁금함

    • 곡선 끌기는 의외로 구현이 쉬움. 아주 오래된 Google 포럼 토론에서 구현 아이디어를 얻었던 것 같음
      끄는 동안 Shift를 누르면 핸들 방향을 유지하는 것도 동작함
      왼쪽 트리는 모든 기기에서 제대로 맞추기 어렵다. 클릭, 터치로 클릭, 끌어다 놓기, 스와이프 스크롤, 터치 스크롤 등을 지원해야 하고, 동시에 수백 개 요소를 담은 것처럼 동작해야 함. iOS에서의 스와이프 스크롤과 약간의 버벅임 같은 이슈가 아직 있지만 목록에 넣어둠
      키보드 단축키는 모바일이 아닌 기기에서 구현되어 있음. 메뉴 막대에서 메뉴를 열면 메뉴 항목 오른쪽에 단축키가 보임

  • 어떻게 써야 하는지 알아내지 못했음. 선분을 만들었지만 이동하거나 크기 조절하는 방법을 찾지 못했고, 드래그 핸들이 나타나긴 했음
    사각형이나 원 같은 다른 도형을 만드는 방법도 모르겠음. 보이는 버튼을 거의 전부 여러 순서로 스무 번쯤 눌러봤지만 대부분 아무 일도 일어나지 않았음

    • 도형 도구는 기본 도구막대에서 텍스트 도구와 이미지 도구 사이에 있음. 처음 두 도형 옵션이 사각형과 원임
    • 이런 앱은 도구 사용법에 대한 힌트를 많이 제공하고, 나중에 끌 수 있게 하는 게 도움이 됨

  • 멋짐. 이 프로젝트가 성공했으면 좋겠음
    첫인상 관점에서 피드백을 몇 가지 주자면, 처음 시작할 때 바로 가지고 놀 수 있는 빈 제목 없는 문서를 열어두고, 초기 선택 도구로 Bezier 연필 같은 재미있는 도구를 선택해두면 어떨까 싶음
    나는 여기저기 눌러보고 열린 문서가 없다는 점을 알아낸 뒤 새 문서를 만들고 도구를 바꿔 놀기 시작할 만큼 동기가 있었지만, 많은 사용자는 그러지 않을 것임. 특히 열린 문서가 없다는 게 가장 큰 걸림돌 같음
    작아 보이는 부분이지만 기본 캔버스를 조금 더 크게 해주면 좋겠음. 예를 들어 512나 500 정사각형 정도임. 새 도구를 확인할 때 현실적으로 사람들이 주는 시간은 처음 10~20초뿐이라, 그 시간 안에 붙잡지 못하면 그냥 떠나고 많은 사용자를 잃게 됨
    매우 좋아 보이고, 공유해줘서 고마움

    • 동의함. 멋져 보이지만 바로 연필을 눌러 낙서하려 했을 때 아무 일도 안 생겨 실망했음
      새 문서를 만들고 연필을 써보려 해도 아무 일도 일어나지 않았음. 결국 사용법을 알아내지 못했음
      Bezier 도구로 노드를 몇 개 추가할 수는 있었지만 어떤 도구로도 조작할 수 없었음. Chrome/Windows에서 드래그가 완전히 깨진 걸 수도 있나?

  • 좋고, 가능성이 많이 보임. 간단한 피드백으로, 떠 있는 도구막대를 위에 두는 건 산만하고 실제 그림 영역을 잡아먹음
    일반 도구막대로 두거나 캔버스 아래쪽에 배치하는 편이 좋겠음. 아니면 이동 가능하거나 접을 수 있게 만들면 좋겠음

    • 도구막대는 이미 여러 번 다시 설계하고 옮겼음. 창이 너무 좁아지면 어차피 접히므로, 접기 버튼을 추가하는 건 아주 쉬울 듯함
답변달기