2년 전 학생들에게 기획을 가르치던 때 피그마를 사용했었다. 당시 기획 도구 중에서 협업을 지원하는 몇 안 되는 도구 중의 하나였다. 짧은 시간이었지만 웹브라우저에서 완벽하게 작동되는 모습을 보고 웹개발자로서 뿌듯했던 기억이 있다.
최근의 피그마를 보면 참 많이 커졌다는 것을 알 수 있다. AI 시대답게 관련 기능을 빠뜨리지 않았다. 요즘 소프트웨어를 보면 분야를 막론하고 AI 기능 탑재는 대세인 듯하다. 좀 빠르고 편하게 작업을 가능케 한다면 사용자들이 마다할 이유는 없을 것이다.
하지만 업데이트된 기능 중에서 코드 생성은 생뚱맞다는 생각이 들었다. 설계 도구가 코드를 생성한다? 프로토타입을 위해서 약간의 코드가 필요하다는 것은 이해하지만 디자인 결과물을 코드로 생성하는 것은 이해가 어려웠다. 생성된 코드를 다른 IDE에서 사용하는 방식이라지만 개발자의 의도와 다르게 생성된 코드이다. 문득 드림위버가 떠올랐다.SVG는 참 매력적인 기술이다. 하지만, SVG 자체의 변형(Transform)과 애니메이션(Animate) 등은 CSS의 transform 속성과 다른 좌표계를 사용하므로 구현 시 까다로운 점이 있다. 또한 하드웨어 가속/렌더링 호환성 이슈 등이 있어 조심스러운 점도 있다. 한편으로는 CSS로 스타일링을 제어할 수 있도록 통합하는 측면은 매우 긍정적이다.
요즘 웹사이트들은 SVG를 많이 활용하고 있다. 한 번쯤은 부딪혀 보았을 SVG의 변형과 관련된 기술적인 내용들을 살펴보자.
현대의 자바스크립트는 모듈 단위로 설계하는 것이 대세가 되었다. 고질적인 전역 스코프에 대한 문제로부터 벗어나는 합리적인 처방이다. 다만 모듈에서 작성하는 코드는 엄격 모드(Strict Mode)로 해석하므로 과거의 작성 습관을 조심해야 한다.
대세가 된 모듈이 서로 접근하는 법도 중요해졌다. 과거처럼 전역 스코프에서 손쉽게 코드를 공유하는 것이 아니다. 전체적인 코드 설계에 있어서 모듈 간의 협업 등이 필요할 때 어떻게 코드가 공유되는지 그 개념을 명확히 알아둘 필요가 있다.
모듈 간에 코드를 공유할 때 사용되는 export와 import 선언에 대하여 자세히 알아보자.
웹 기술의 업데이트는 다른 분야의 기술보다 매우 빠르다. 최근에 W3C에서 다음 두 가지의 주요 업데이트를 공지했다.
첫 번째, 'Long Animation Frames API 첫 공개 초안'을 발표했다. 웹에서 발생했던 애니메이션이 들어간 웹페이지의 버벅거림 등을 포함한 지연 문제를 디버깅할 수 있는 API이다.
두 번째, 'Pointer Events Level 3, W3C 후보 권고안 초안'을 발표했다. 현대의 웹은 매우 다양한 장치에서 작동하고 있다. 다양한 장치는 입력 방식의 다양성을 의미하기도 한다. 'Pointer Events Level 3, W3C 후보 권고안 초안'은 다양해진 입력 장치에 대한 이벤트를 통합하는 기술 명세이다.