Canvas

지난 2월까지 Febase 라는 프론트엔드 스터디를 했었다. 벌써 시즌 4까지 진행했다. Fabase는 프론트엔드 개발자들끼리 모여서 프론트엔드 관련 주제들을 가지고 학습하는 모임으로 매 시즌마다 다른 주제를 가지고 스터디를 진행한다. 이번 시즌인 시즌 4는 three.js 라이브러리를 공부하면서 3D 애니메이션을 만들어 보는 스터디를 진행했다. 강의는 three.js-journey 라는 웹 사이트의 강의를 들었다. 지금까지 전세계에서 2만7천 명 이상이 들은 three.js 강의이다. 이 강의가 시작된지는 꽤 오래되었고, 강사가 프랑스 분이신데 지속적으로 강의를 추가추가 해주시는 것으로 알고 있다. 강의를 들으면서 공부한 이후에 나를 포함한 4분 정도의 개발자 분들과 작은 프로젝트를 해 보았다. 여러가..

이번 포스팅에서는 SVG와 Canvas, viewport 그리고 viewbox에 대한 개념을 간단하게 정리해 보려고 한다. 1. SVG란? 바로 찾아볼 수 있는 레퍼런스 중 가장 공신력 있다고 판단되는 Mozilla Developer Network(MDN)에서 SVG에 대해서 다음과 같이 설명하고 있다. SVG(Scalable Vector Graphics)는 2차원 벡터 그래픽을 서술하는 XML 기반의 마크업 언어입니다. SVG는 텍스트 기반의 열린 웹 표준 중 하나로, 모든 사이즈에서 깔끔하게 렌더링되는 이미지를 서술하며 CSS, DOM, JavaScript, SMIL 등 다른 웹 표준과도 잘 동작하도록 설계되었습니다. SVG는 달리 말하면 HTML과 텍스트의 관계를 그래픽에 적용한 것입니다. SVG는..