기존의 JPG, PNG 등의 픽셀 기반 이미지 형식과 다르게 벡터 기반의 SVG 형식은 이미지를 확대하거나 축소해도 깨져 보이지 않는다는 강력한 장점을 가지고 있습니다. 하지만 SVG 형식의 이미지를 사용할 때는 보안상 주의해야 할 점이 있습니다. 필자는 해커가 SVG 이미지 파일을 어떻게 악용하여 악성코드를 퍼뜨리는지 설명하고 또한 SVG 파일을 안전하게 다운로드할 수 있는 VPN 사용법에 대해서도 소개하려고 합니다. 1. 해커가 멀웨어를 퍼뜨리는 방법: HTML 스머글링 스머글링(Smuggling) 은 영어로 ‘밀수하다’라는 뜻을 가지고 있습니다. 밀수란 다른 사람들이 눈치채지 못하게 숨겨서 어떤 물건을 들여오는 행위를 일컫습니다. 고로 HTML 스머글링이란 평범해 보이는 HTML 코드 안에 악성 스..

Digital News/IT Trend 2023. 5. 26. 10:40

웹 사이트에 사용된 다양한 아이콘, 로고, 벡터 SVG 파일을 다운로드 할 수 있는 브라우저 확장 프로그램이 있다면 얼마나 편하고 좋을까? 제안서, 제품 설명서, PPT, 키노트, 인포그래픽, 모바일 웹.앱 등을 디자인할 때 브랜드 로고나, 각종 아이콘 리소스를 손쉽게 활용하고 돋보이게 만들 수 있어서 실무에 많은 도움이 될 것이다. 이 글을 통해 소개하는 SVG Gobbler는 사용자가 보고 있는 페이지에서 벡터 콘텐츠(SVG)를 찾고 코드 다운로드, 최적화, 복사, 보기 또는 이미지로 내보낼 수 있는 옵션을 제공하는 브라우저 확장 프로그램이다. SVG Gobbler는 현재 구글 크롬과 파이어폭스 브라우저에 대한 확장 프로그램을 제공하고 있다. 보다 자세한 활용방법은 아래 동영상을 확인해 보면 알 수 ..

Design Information/Design Resources 2021. 7. 27. 07:00

복잡한 SVG 패스를 브라우저 기반에서 편집하고 생성할 수 있는 'SvgPathEditor' SVG 패스 편집기를 사용하면 SVG 요소의 패스를 쉽게 조작 할 수 있다. 그리드 (사용을 선택한 경우)를 사용하면 편집 내용이 대칭을 유지하고 쉽게 관리 할 수 ​​있다. 보다 자세한 설명과 사용법은 아래 링크를 참고하면 도움이 된다. 'SvgPathEditor' GitHub 개발자 페이지

Design Information/Design Resources 2020. 12. 15. 16:22

15 가지 최고의 이미지 파일 형식, 유형별 사용 사례 및 장점과 단점을 일목요연하게 정리한 아주 유익한 자료를 소개하려고 합니다. 올바른 이미지 파일 유형과 형식을 선택하는 것은 사소한 결정처럼 보일 수 있습니다. 그러나 인간은 시각적인 생물이며 이미지는 온라인 경험의 필수적인 부분입니다.대부분의 페이지와 기사는 스크린 샷과 이미지를 사용하여 텍스트 콘텐츠를 풍부하게 합니다. 실제로 웹 사이트의 약 8% 만이 시각적 콘텐츠를 포함하지 않습니다.안타깝게도 많은 웹 사이트 소유자는 여전히 다양한 사용 사례에 대해 선택할 이미지 파일 유형을 이해하지 못하고 있습니다. 그 결과 그들은 결국 자신의 사이트 로딩 속도를 늦추고 자신의 이미지가 가장 적합한 형식을 사용할 수도 없고 최적화되지도 않았습니다.이 기사에..

Design Information/Design Resources 2020. 10. 6. 16:59

"지금까지 이런 무료 아이콘(Icon) 시스템 패키지는 없었다. 이것은 아이콘 세트인가, 디자인 소스인가?" 리믹스 아이콘(Remix Icon)은 디자이너와 개발자를 위해 정교하게 제작된 오픈 소스 중립 스타일 시스템 아이콘 세트입니다. 도네이션은 하실 수 있지만 무료로 개인용 및 상업용으로 사용할 수 있습니다. 14개 카테고리 총 1441개 아이콘은 모두 심플하면서 정교하게 제작되어 가독성, 일관성 및 완성도 높은 픽셀(Pixel)의 유전자를 갖고 탄생되었습니다. 각 아이콘은 24x24 그리드(Grid)를 기반으로 한 외곽선(Outline) 및 채우기(Fill) 스타일로 디자인 되었습니다. 웹폰트, 파워포인트, 키노트용 편집 가능한 아이콘도 제공 더욱 놀라운 것은 1441개 개별 아이콘을 SVG 포맷으..

Design Information/Design Resources 2019. 4. 19. 19:54

수많은 웹페이지에 존재하는 기존 링크는 밑줄, 점선, 색상 등등 몇 가지로 사용자의 시선을 끄는 획일적인 형태를 취하고 있다.링크는 해당 페이지에서 대상 페이지나 구매 페이지로 연결하게 되므로 기능적인 측면에서 유용하여 방문자의 클릭을 유발하기 위해 시인성이 높고 두드러지게 하는 것이 좋다.정적인 기본 링크에 마우스 오버 효과를 독특하게 구현하여 동적인 링크를 제공하면 사용자의 시선을 사로잡아 클릭 빈도를 높일 수 있다. 그런 까닭에 웹 개발자는 다양한 방법으로 마우스 오버 효과를 구현하는 방법을 연구해 왔다. 오늘은 CSS 트릭을 이용해 더욱 생동감이 넘치고 눈길을 사로잡을 수 있는 마우스 오버 효과인 호버 상태를 독특하게 표현하는 방법을 알아 본다.SVG 태그 소스를 활용 CSS 'background..

Design Information/HTML5 and CSS3 2018. 10. 10. 15:58

수십 개의 셀과 삼각형이 어우러져 픽셀아트 같기도 하고, 종이 접기 조각과도 같은 환상적인 로우 폴리 아트웍을 만드는 방법을 배워 보자. 2014년 초부터 최근에 이르기까지 로우 폴리(Low Poly : 저해상도)는 디자인에서 핫한 트렌드 중 하나다. 로우 폴리(Low Poly)는 기본적으로 폴리곤이 수가 적은 3D 메쉬(Meshes)를 의미하지만, 일부 렌더링 기술 및 조명 효과와 함께 메쉬(Meshes) 요소가 종이 공예 또는 종이 접기 조각처럼 보여 하나의 새로운 아트로 발전하고 있다. 로우 폴리(Low Poly) 모양은 일반적으로 3D 소프트웨어를 사용하여 제작된다. 하지만 포토샵과 간단한 응용프로그램을 이용하여 2D 버전의 멋진 로우 폴리 아트웍을 만들어 내기도 한다. 그렇다면 포토샵도, 응용 ..

Design Information/Design Resources 2015. 5. 8. 06:28

최근 iconeden.com에서 공유한 무려 1,450종의 무료 벡터 아이콘 세트 SmartIcons는 넥스트 프로젝트를 준비하는 웹디자이너와 개발자 그리고 일반 사용자들에게 매우 유익한 디자인 소스로 많은 도움이 될 것이다 벡터 아이콘 세트 SmartIcons는 스마트 아이콘 시스템을 구축하고 개발된 아이콘 세트로 인기 있는 아이콘 세트이다. 일반적으로 $80의 비용이 소요되지만, 서비스 메일링 리스트 확보 차원에서 구독자를 대상으로 무료로 제공하며, 주기적으로 유용한 정보를 제공한다는 계획이다. 메일링 리스트 가입 후 내려받은 SmartIcons 벡터 아이콘 세트를 살펴보면 Glyph 800종, Stroke 250종, Minimal 400종으로 구분하여 총 1,450종의 다양한 벡터 아이콘을 포함하고..

Design Information/Design Resources 2015. 4. 29. 06:51