패스트캠퍼스 환급챌린지 32일차: '김민태의 프론트엔드 아카데미 - 제 1강 JavaScript & TypeScript Essential' 강의 후기

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다

 

패스트캠퍼스 환급챌린지란?

(~6/20) 50일의 기적 AI 환급반💫 | 패스트캠퍼스

 

https://fastcampus.info/4n8ztzq

 

불금에도 야근했지만 재미있게 강의를 들을 수 있게 해주는 환급챌린지 최공!

 

32일차 공부 시작!

오늘 공부 시작 시간 (08.01 23:28)

 

오늘의 강의 주제는 '차트 라이브러리 만들어보기-그래픽시스템'이다.

학습 인증샷 - 1

 

(오늘도 마찬가지로 모자이크 처리..)

 

오늘의 학습 내용

* 차트 라이브러리와 그래픽 시스템의 이해

차트 라이브러리를 만들 때 기초가 되는 그래픽 시스템에 대해 설명한다. 그래픽 시스템이란 화면에 그림을 표현하는 방법을 의미한다. 일반적으로 그래픽 시스템은 점, 선, 도형 등을 어떻게 그리고 배치할지 결정한다. 웹에서는 다양한 그래픽 시스템이 존재하는데, 대표적으로 CSS, 캔버스, WebGL, SVG가 있다.

* CSS와 그래픽 시스템

많은 사람이 CSS를 그래픽 시스템으로 인식하지 않을 수 있다. 하지만 CSS 역시 화면에 박스, 텍스트, 그림자 등 다양한 시각적 요소를 배치하고 꾸미는 역할을 한다. CSS는 좌표, 크기, 색상 등 시각 정보를 조작하는 방법을 제공하며, 복잡한 수식을 이용해 위치와 레이아웃을 제어할 수 있다. 일반적으로 박스모델, 플렉스, 그리드 같은 시스템이 이러한 기능을 담당한다. CSS 그래픽 시스템은 컴포넌트와 프레임워크로 확장되어 많은 UI 요소의 추상화에도 활용된다. 그러나 픽셀 단위로 점을 하나하나 제어하는 저수준 접근 방식은 사용할 수 없고, 주로 형태와 위치 조정에 특화된 추상화된 방식이 사용된다. 이는 다양한 환경에 적응할 수 있는 범용성을 확보하기 위한 설계다.

* 캔버스와 2D 그래픽 API

캔버스는 HTML에서 제공하는 태그로, JavaScript를 활용해 점, 선, 도형을 그릴 수 있는 저수준 그래픽 API를 제공한다. 캔버스의 주요 장점은 픽셀 단위까지 세밀하게 제어할 수 있다는 점이며, 애니메이션, 실시간 데이터 시각화, 이미지 편집에도 활용된다. 개발자는 캔버스 컨텍스트를 얻어 함수를 이용해 원하는 도형을 직접 그려야 한다. 대신 추상화 수준이 낮기 때문에, 복잡한 도형이나 인터랙티브 요소 구현에는 많은 코드와 논리적 설계가 요구된다.

* WebGL과 3D 그래픽

WebGL은 웹에서 하드웨어 가속을 활용해 3D 그래픽을 그릴 수 있는 JavaScript 기반 API다. 캔버스 요소 위에서 동작하며, GPU를 활용해 대규모 데이터와 3D 씬을 빠르게 처리할 수 있다. 렌더링 파이프라인, 행렬 변환, 쉐이더 프로그래밍 등 복잡한 그래픽 이론이 필요해 초심자는 쉽게 다가가기 어렵지만, 대규모 데이터 시각화나 게임, 특수효과 구현에 최적화된 선택지다. 하드웨어 가속 덕분에 퍼포먼스도 뛰어나다.

* SVG와 벡터 그래픽

SVG는 XML 기반의 벡터 그래픽 시스템으로, HTML 마크업처럼 태그를 이용해 도형, 선, 원, 텍스트 등 다양한 시각적 요소를 선언적으로 정의한다. 점, 선, 원 등의 요소를 태그로 배치하고 크기와 위치, 색상을 손쉽게 지정할 수 있어서 캔버스에 비해 코딩 난이도가 낮고, 코드의 가독성과 유지보수성도 뛰어나다. 아이콘, 로고, 심볼, 라인 차트, 파이 차트 등 다양한 시각화 요소에서 주로 활용된다. CSS와 결합해 다채로운 그래픽 효과를 줄 수 있고, 자바스크립트 라이브러리와 함께 사용하면 복잡한 인터랙션 구현도 가능하다. SVG 파일은 크기에 상관없이 선명하게 렌더링할 수 있는 확장성과 유연성이 강점이다.

* 그래픽 시스템 선택 기준

차트 라이브러리를 직접 구현할 때는 목적에 따라 적합한 그래픽 시스템을 선택해야 한다. 인터렉티브하고 복잡한 데이터 시각화에는 SVG와 캔버스가 많이 쓰이고, 3D나 퍼포먼스를 중시하는 대규모 시각화에는 WebGL이 적합하다. CSS는 주로 UI 레이아웃이나 스타일링에 집중하는 경우에 사용한다. 각 시스템의 내부 동작 방식, 추상화 수준, 성능, 구현 난이도, 확장성 등도 충분히 고려해야 한다.

추가적으로, SVG와 캔버스, WebGL 등의 그래픽 시스템은 브라우저의 렌더링 방식, 디바이스 성능, 인터랙션 처리 등 다양한 요소와 밀접하게 연결된다. 따라서 차트 라이브러리 개발자는 각 그래픽 시스템의 특성과 한계를 충분히 파악하고, 데이터 크기, 목표 성능, 유지보수 편의성 등을 고려한 판단이 요구된다. 이러한 기초 이해를 바탕으로 실전 차트 라이브러리 구현에 도전할 수 있다.

 

34강 수강 완료

 

오늘 공부 종료 시간 (08.01 23:41)

 

34강 강의 내용 정리 필기

 

학습 인증샷 - 2

마치며

 

오늘도 환급 챌린지 34강 공부 완료!!

 

이번 강의에서는 간단한 그래픽 시스템에 대해서 알아봤다. svg나 css 등은 자주 사용했지만 WebGL을 활용한 게임과 같은 그래픽을 구현해본적은 없기 때문에 이번 기회에 한 번 찾아보려고 한다.