Hacker News 의견들

• 시각화 이야기가 주된 주제이지만, 예전에 무용 안무 소프트웨어를 만든 적이 있음
  UI 전체를 SVG로 렌더링했는데, 생각보다 훌륭하게 작동했음
  프로젝트 이름은 StageKeep이며, 원래는 React Three Fiber로 만들었다가 SVG로 리팩터링했음
  Signed Distance Function 개념에서 영감을 받았고, 입력을 받아 SVG를 출력하는 원자적 함수 아이디어가 마음에 들었음
  • 예전에 SVG가 Flash 대체재로 주목받았던 시절이 있었음
    SVG + CSS + JavaScript로 Flash로 하던 거의 모든 걸 구현할 수 있었지만, Flash처럼 좋은 저작 도구가 없었음
    결국 Flash는 사라졌고, 그 자리를 완전히 대체한 것은 없음
  • 사이트 하단에 “Start free tiral”이라고 되어 있던데, 아마 “trial”의 오타 같음 :)
  • 무대 연출가로서 안무를 다루는데, 이런 도구로 무대 동선을 미리 계획할 수 있다면 정말 멋질 것 같음
  • 정말 멋진 프로젝트임. 혹시 AI로 영상에서 안무를 자동 추출하는 기능도 가능할까 궁금함
    예를 들어 Project21이나 Avantgardey 영상에서 안무를 분석해 가져오는 식으로 말임
  • 혹시 직접 춤을 추는 사람인지 궁금함
• SVG의 단점들을 정리해봤음
  • 텍스트 줄바꿈 불가
  • 폰트 글리프 임베드 불가 — 사용자의 폰트가 없으면 읽을 수 없음
  • 브라우저마다 지원 버전과 기능이 다름
  • JS나 외부 리소스가 포함될 수 있어 보안 격리 환경에서 보기 어려움
    해결책으로는 Inkscape용 원본 SVG와, 텍스트를 곡선으로 변환한 배포용 SVG 두 버전을 두는 방법이 있음
  • 다른 문제들도 많음
    브라우저마다 렌더링이 달라 일관된 결과를 얻기 어렵고, 복잡한 SVG는 메모리 누수나 렌더링 속도 저하가 심함
    Inkscape 외엔 리눅스에서 쓸만한 편집기도 거의 없음
    그럼에도 불구하고 대안이 없어서 여전히 SVG를 쓰지만, 가능한 한 단순하게 유지하려고 함
  • <foreignObject>로 HTML을 임베드하면 텍스트 줄바꿈이 가능하긴 함
    SVG 2에서는 inline-size 속성으로 해결 예정임
    폰트 임베드는 <font> 요소나 WOFF를 data URI로 포함하는 방식이 이미 존재함
    하지만 텍스트 기준선이나 스케일링 제어 같은 부분은 여전히 불완전한 사양임
    관련 문서: SVG2 InlineSizeProperty, SVG11 Fonts
  • Safari에서는 <style> 내 @font-face로 base64 인코딩된 폰트를 임베드할 수 있음
    하지만 파일 크기가 커져서 추천하지 않음
  • 텍스트를 곡선으로 변환하면 선택 불가 문제가 생김
    Safari에서는 <text> 요소로 선택이 가능하므로, 어느 쪽이든 완전한 해결책은 아님
• 과학 논문이 인터랙티브 환경과 함께 제공되어, 독자가 데이터를 직접 조작하고 실험을 재현할 수 있는 비전을 좋아함
  NVIDIA의 Illustrated Evo2 블로그도 인상 깊었음
  • 동료들이 낸 CloudSpecs 논문이 떠오름
    모든 그림이 웹사이트와 연결되어, DuckDB + WebR + ggplot으로 브라우저에서 재현 가능함
    예시: Figure 1 데모
  • 실험을 브라우저에서 다시 실행하는 건 모델링 기반 연구에서나 가능할 듯함
    하지만 데이터를 다양한 시각으로 탐색할 수 있게 하는 건 흥미로운 아이디어임
  • SVG 대신 쓸 포맷이 마땅치 않음
    PDF는 인터랙티브 기능이 제한적이고, Word나 PDF 모두 멀티미디어 내장에 약함
  • GIF나 동영상만이라도 삽입할 수 있으면 큰 가치가 있을 것 같음
  • SVG는 복잡한 렌더링에 시간이 걸려 인터랙티브성과는 잘 안 맞음
    벡터 그래픽만 필요하다면 PostScript도 대안이 될 수 있음
• 2년 전 “Spurious Correlations” 프로젝트를 리뉴얼하면서 Python으로 직접 SVG 차트 생성기를 만들었음
  기존 JS/PHP 차트 도구(pCharts, HighCharts 등)가 마음에 안 들어서 직접 구현했는데, 의외로 잘 작동했음
  수학만으로 깔끔한 SVG를 만들 수 있고, 무한 확장성은 덤이었음
  • JS 차트 프레임워크를 찾는다면 Observable Plot을 추천함
    D3 제작자가 만든 도구로, 간결하고 API 사용성이 뛰어남
    애니메이션은 없지만 논문용 차트엔 충분함
  • Postscript가 더 널리 쓰이지 못한 게 아쉬움
    다른 세계선에서는 HTML이나 SVG 대신 Postscript가 표준이 되었을지도 모름
  • 사이트 덕분에 통계 수업 첫날에 잘못된 상관관계 예시로 활용했음
  • “직접 만들면 망한다”는 두려움을 업계가 버려야 한다고 생각함
• Distill의 첫 번째 논문 Augmented RNNs이 인상 깊었음
  SVG 위에 D3.js로 최소한의 인터랙션을 얹은 사례로, Shan Carter의 스타일을 처음 보고 그의 팀에 합류하고 싶어졌음
• 15년 전 바비큐 컨트롤러를 만들었는데, 온도 센서 4개와 PID 제어 알고리즘을 사용했음
  내장 HTTP 서버를 통해 SVG 기반 웹 UI로 온도 그래프와 다이얼을 표시했는데, JS와 함께 잘 작동했음
  • 정말 멋진 프로젝트임. 혹시 작동 영상을 찍어둔 적이 있는지 궁금함
• 글쓴이로서, 이번에 글을 수정하며 강조하고 싶은 점은 20년 된 SVG가 여전히 작동한다는 사실임
  그 시절에 쓴 다른 코드는 대부분 고쳐야 하지만, SVG는 그대로임
  • 초창기엔 브라우저 간 SVG 호환성이 낮아서 쓰기 어려웠지만,
    지금은 20년 전 SVG도 대부분의 브라우저에서 문제없이 작동함
• SVG를 좋아하지만, 속도 문제는 여전히 있음
  QR 코드나 복잡한 지도처럼 DOM 요소가 100개 이상이면 느려지고, 애니메이션도 canvas나 Lottie보다 느림
  • 체스판 SVG 안에 체스 엔진을 내장해 자동으로 두게 만든 적이 있음
    프로젝트 링크
    친구의 예술 설치물에서 수십 개의 체스 SVG를 동시에 투사했는데, 브라우저가 버티는 한계가 꽤 낮았음
  • 나도 SVG+JS로 지도 뷰어를 만들어 게임에 썼는데, 객체 밀도가 높아지면 너무 느려져서 결국 canvas로 바꿨음
    다만 그 과정에서 SVG의 일부 기능을 잃었음
• 3D용 SVG와 비슷한 경량 포맷이 있는지 궁금함
  CAD 모델을 시각화할 때, 전체 .step 파일을 내보내지 않고 부분 변경만 반영할 수 있는 방법을 찾고 있음
• 예전에 Shapeoko v2 CNC 조립 설명서를 만들 때, 사용자가 부품을 클릭하면 도면의 해당 부품이 강조 표시되도록 SVG를 사용했음
  예시 링크
  Inkscape로 제작했으며, 브라우저에서 바로 작동했음
  • 정말 멋진 구현임