- WSConf. Seoul 2017. Vol.2 - 2017.7.15(토). SK플래닛 판교사옥. SUPEXHALL - 발표자 : 오남경(Design Spectrum) http://wsconf.org

1. SVG Icon font
Oh Namkyung
alcion0430@gmail.com

2. Oh Namkyung | 오남경
GUI 디자이너 기획자/

3. SVG Icon Font

4. SVG Icon Font
아이콘의 정의 / 역사
1

5. SVG Icon Font
SVG를 왜 사용해야 하는가 ?
2

6. SVG Icon Font
더 나아가서 font로 제작
3

7. Icon ?1
언어 > 기호 > 픽토그램 > 아이콘

8. Icon ?1
언어 > 기호 > 픽토그램 > 아이콘

9. Icon ?1
언어 > 기호 > 픽토그램 > 아이콘

10. 어떠한 뜻을 나타내기 위하여 쓰이는
개체를 통틀어 이르는 말이다.
기호

11. ☿Au

13. 의미하고자 하는 바를 직접적으로 묘사한 그림을
통해 의미를 전달하는 표의문자이다.
픽토그램
그림문자

14. 기본적으로는 국가에 따라서 의미별로 사용되는 픽토그램이 각각 다르지만,
국제적인 표준이 존재하는데 ISO가 정한 ISO 7001이 대표적인 국제 표준이다.

15. http://www.kssn.net/Pictogram/KS_pictogram_list.asp
국내 표준 픽토그램
혹시나 해서 남겨 두는

17. 아이콘
GUI에서도 특정한 프로그램이나
폴더 등을 나타내는 기호적 형상

19. 1981제록스스타(Xerox Star) 8010

20. 1984 맥킨토시 시스템 1

21. Susan Kare

22. 윈도우즈 3.0의 아이콘1990

23. 대망의..
그리고

24. 2000년대

26. 2011년 ~ 플랫 디자인

28. 40눈에 보이는 것만 세어봐도

29. 80?하지만 실제로는 80개 이상의
이미지 에셋이 적용되어있을 것이다

30. 1x 2x

31. 디자이너란…
모든 디바이스에서 이쁘게 보였으면 하는 그런 마음을 가진…
15개 ;

33. 이미지 아이콘의 문제
여러 해상도에 size 대응이 불가피 하다.
UI 상태별 색상 표현을 다양히 하기에 디자이너도, 개발자도 고통이다.
리소스 관리가 불편하다.

34. SVG ?2
Scalable Vector Graphics
확장 가능한 벡터 그래픽

35. 이미지 에셋이 아닌,
SVG를 사용해야 하나?
왜?

36. 기존 픽셀 이미지와 달리 SVG는 벡터를 기반으로 하고있기 때문에
사이즈 변경이 용이하고 여러 해상도에서 깨지지 않는다.
IE9 이상 / 대부분의 브라우저에서 지원한다.
(다룰 줄 안다면) 에디터에서 작성 및 수정이 가능하다.
(필요하다면) 스프라이트 처럼 만들 수 있다.
https://ssl.pstatic.net/sstatic/search/pc/2016/img/sp_svg_common_v3.svg
(필요 하다면)SVG 애니메이션은 SMIL 사양을 기반으로
한 애니메이션 효과를 적용할 수 있다.
.
.
.
장점

37. SVG 작업하기
선호하는 벡터 그래픽 편집기
Illustrator, Photoshop, Sketch, Inkscape [무료]에서
실제 원하는 결과물과 동일한 크기로 그래픽 작업한다.

38. SVG 구현 옵션
Img
일반 이미지와 같이 <picture>요소에서 SVG를 사용가능
<img src="bblogo.svg" alt="Breaking Borders Logo" height="65" width="68">
Background-image
base64 인코딩을 하면 다운로드하는 동안 나머지 스타일 로딩을
차단시키기 때문에 사용하지 않는 편이 좋다.
.logo {
background-image: url(bblogo.svg);
}

39. SVG 구현 옵션
Iframe
<iframe>요소 내 SVG를 로드 가능. 대부분의 작업을 구현할 수 있지만,
더 발전적인 기능을 사용하고자 한다면 가장 좋은 방법은 아니다.
<iframe src=“bblogo.svg">
Your browser does not support iframes
</iframe>
Embed
<embed>요소는 '외부 응용 프로그램', '대화형 콘텐츠'를 통합할 때 사용
SVG를 사용할 수 있겠으나, 사용하지 않는 편이 좋다.
<embed type="image/svg+xml" src="bblogo.svg" />

40. Object
<object>요소는 HTML문서 내에 직접 내장(inline)시키지 않고
SVG를 조작하는 경우에 가장 좋은 방법
<object type="image/svg+xml" data=“bblogo.svg">
</object>
Inline
SVG 코드를 인라인하면 HTTP 요청은 저장되지만, 이미지는 브라우저에 캐시되지 않음
조작이 가장 쉬운 방법이지만, 인라인 SVG 코드를 유지하는 것은 어려울 수 있다.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 65">
<path fill="#1A374D" d="M42 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v21l12 15-7
15.7c14.5 13.9 35 2.8 35-13.7 …."/>
<path d="M14 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v41c0 8.2 9.2 1…"/>
</svg>
SVG 구현 옵션

41. SVG 구현 옵션

42. 그러나
여기는 한국

43. ㅎㅇ?

44. IE9 이상 / 대부분의 브라우저에서 지원한다.

45. Font ?3
남은 문제를 해결 하기 위해서는
Font로 제작 하는 것이다

46. SVG 아이콘 폰트의 특징
아이콘이 텍스트와 자주 사용될 경우에 유용하다.
유니코드에 대치하여 사용 가능하다.
일부 브라우저에서는 sub-pixel에 맞추기 힘들다.
https://material.io/icons/#ic_explore

52. 유의사항3
하나의 SVG를 갖고 크기 차이를 심하게 주면
이와같이 line에서 보여지는 아이콘은
굵기의 차이가 심하게 보여진다.

53. <span class=“icon glyphicon-close-circle-fill”></span>
<span class=“icon glyphicon-close-circle-light”></span>
<span class=“icon glyphicon-close-circle-thin”></span>
<span class=“icon glyphicon-close-circle”></span>
이름 형태 타입

54. Thank you
Oh Namkyung
alcion0430@gmail.com