HTML SVG path 태그는 일러스트레이터로 커버할 것!

2023. 9. 10. 00:06

코드펜을 구경하다가 정말 마음에 드는 레퍼런스 작업물을 하나 발견했습니다. 저는 당연히 백그라운드 배경을 이미지로 작업했다고 생각했습니다. 근데 이게 왠걸?! 이미지가 아니었습니다. HTML로만 만든 작업물이었습니다. 세상에... HTML 태그만으로도 이렇게 다양한 도형을 제작할 수 있다니? 놀라웠습니다. 그래서 바로 태그 구성을 살펴봤습니다.

일단 <svg> 라는 태그가 보였습니다. 그리고 그 안에는 <path> 태그가 있었으며 또 그 안에는 <d>, <g> 등의 요소들도 보였습니다. 문제는 해당 태그 안에 작성된 엄청난 숫자들...! 대체 이 숫자들이 무엇을 정의하는지는 모르겠습니다. 바로 구글 검색을 해봤는데 솔직히 뭔 소린지 봐도 모르겠습니다. 일단 대충 알아들을 수 있는건 다름 아닌 일러스트레이터에서 사용되는 핸들과 커버같은 개념입니다. 그리고 벡터 개념! 사실 이 두개를 코드로 구현해 놓은것이 바로 SVG의 path 인 것입니다.

SVG는 Scalable Vector Graphics 의 약자입니다. SVG의 대표 콘텐츠가 바로 「폰트어썸」입니다. 폰트어썸 사이트에 가보시면 다양한 웹 아이콘이 있고 해당 아이콘들은 모두 일러스트레이터에서 작업한 것처럼 폰트 크기를 키워도 절대로 이미지나 형태가 깨지지 않습니다. 이것이 벡터의 특징이죠. path 태그에 대해서도 자세히 살펴봤으나 점점 더 미궁속으로 빠지기만 할 뿐이었습니다. 그리고 외국 문서를 좀 더 열람해봤는데 유독 일러스트레이터와 관련된 내용들이 많았습니다. 그렇다면 분명 어도비 일러스트레이터로 SVG 파일로 만들고, 이 파일을 이용해 웹 이미지를 구현할 수 있을 것 같다는 생각이 들었습니다. 궁금하면 뭐다?! 그렇습니다. 바로 실험 개시입니다.

일러스트레이터로 SVG 저장

위의 이미지는 과거에 만들어 두었던 차근차근 게임코딩의 캐릭터 중 하나인 버튼 노든입니다. 일러스트레이터로 작업했습니다. 제법 잘 만들지 않았습니까? 솔직히 개인적으로 일러스트레이터 프로그램에 대한 자부심이 아주 살짝 있습니다. 꽤 잘 만든다고 생각합니다. (하하하) 아무튼 버튼 노든을 HTML 태그로 구현해 보겠습니다.

File > Export > Export AS로 들어갑니다. 참고로 제 일러스트레이터 버전은 CC 2021입니다.

파일 이름은 신경쓰지 않아도 됩니다. 파일 형식이 중요하거든요. SVG로 변경 후 Export 버튼을 누릅니다.

SVG 옵션 창이 나오면 Decimal은 1로 만들어 주시고 Show Code를 눌러줍니다.

그러면 메모장에 svg 관련 태그가 생성되었음을 알 수 있습니다. path 태그도 보이는군요. 보시면 아시겠죠? 코드가 어마무시합니다. 뭔놈의 숫자들이 저렇게 다양하게 존재하는지... 그래서 포기한겁니다. 웹 에디터도 path 값을 수동으로 입력하기에는 확실히 무리가 있다는걸 알 수 있습니다. 물론 단순한 도형을 만들때는 코드가 훨씬 더 간단해지겠지만, 수동으로 구성하는것보다 일러스트레이터로 원하는 오브젝트를 제작하고 이렇게 SVG 코드를 보는게 더 빠르고 간편합니다. 자~ 아무튼 이렇게 구현된 코드를 모두 복사합니다.

웹 에디터로 마무리

저는 VS Code와 Brackets 두 가지를 모두 사용합니다. HTML 기본 템플릿을 세팅하고 body 안에 그대로 svg 태그를 붙여넣습니다. 그리고 저장합니다.

이제 실시간 미리보기창을 띄워봅니다. 그러면 일러스트레이터에서 작업한 오브젝트 작업물이 정상적으로 잘 넘어왔음을 확인할 수 있으실 겁니다. 일러스트레이터처럼 벡터 레이어로 적용되기에 창을 확대 및 축소해도 절대 이미지가 깨지지 않습니다. 게다가 반응형으로 동작합니다.

See the Pen SVG : 차근차근 게임코딩 - 버튼 노든 by rgy0409 (@rgy0409) on CodePen.

여러분들도 확인을 해보시라고 코드펜에도 올려두었습니다. 한번 살펴보세요. 필요하시면 가져다 사용하셔도 좋습니다. 순수 창작물이 아니니까요. 아무튼 일러스트레이터를 사용하면 너무나도 쉽게 다양한 도형을 제작하고 이것을 HTML svg 태그로 쉽게 변환해 사용 가능합니다. 이제부터 무궁무진한 웹아이콘을 제작할 수 있을 것 같습니다. 카카오톡 아이콘도 쌉가능이에요! 끝.