들어가며
안녕하세요, 코인원 Markup Developer 오혜진입니다. 제가 속해 있는 코인원은 거래소 특성상 웹에 숫자와 텍스트가 많은 부분을 차지합니다. 이로 인해 사용자의 이해를 돕고자 적절한 아이콘들을 적재적소에 사용하고 있습니다. 특히, 아이콘을 자주 사용하다 보니 이미지 파일로 관리하지 않고 아이콘폰트로 만들어 사용하고 있습니다. 디자이너분들이 직접 iconmoon 을 통해 아이콘폰트를 만들어주고 계십니다. (P.S. 아이콘폰트에 대한 개념이 궁금하신 분은 Bootstrap Glyphicon 이나 FontAwesome을 먼저 확인해주세요!)
마이페이지 개편을 하면서 링크가 연결된 부분을 위와 같은 디자인으로 구현하게 되었습니다. 링크가 연결되는 부분마다 위와 같은 디자인이 반복적으로 구현되어야 했습니다. 아이콘폰트를 직접 넣어줘도 되지만 이 매번 반복되는 것보단 한 곳에서 제어가 되도록 만들고 싶었습니다.
(좌) as-is (우) to-be, 4월 중 코인원 마이페이지 개편을 앞두고 있답니다 :)
접근1) 아이콘폰트의 유니코드 값을 똑같이 적어주자
아이콘폰트의 클래스명 대신 링크 클래스 .link-right-chevron::after 요소에 대한 아이콘의 유니코드 값을 넣었습니다.
아이콘폰트는 개체마다 고유의 유니코드 값을 가지고 있다
문제점) 유니코드 값을 매번 보장 할 수 없다
아이콘폰트가 추가될 때마다 ABC 정렬에 맞춰 새롭게 바뀌면 유니코드값을 항상 보장할 수 없게 됩니다. 제가 유니코드 값으로 넣어 놓았더니 프론트엔드 개발자 분이 바로 발견해서 “이렇게 하는게 좋을까요?” 라고 물었습니다.
- 네, 일단 임시로 저렇게 해 놓은거고요. 고칠게요!
아이콘폰트 버전이 업데이트 될 때마다 유니코드 값을 확인해 주는 것이 큰일은 아닙니다. 하지만 관리 포인트가 늘어나고 담당자가 바뀌었을 때 인수인계 해야할 사항이 되므로 좋은 방법이 아님은 확실합니다. 일단 이렇게 해놓고 개선 하려고 했는데 프론트엔드 개발자 분이 바로 발견하셔서 더 빨리 개선 작업을 시작했습니다.
접근2) CSS로 그려볼까?
일단은 ‘>’ 모양이 단순하니 CSS로 그릴 수 있지 않을까 하고 생각했습니다. 사각형의 테두리를 2면에만 그리고 -45도로 회전시키면 ‘>’와 같은 모양이 그려집니다. 1px로 그려지는 ‘>’을 나타내기엔 쉽고 빠른 방법입니다.
https://codepen.io/zineeworld/pen/ZPxpgp
생각보다 쉽게 해결 되어 기쁜 마음으로 실제 페이지에 적용해봤습니다. 하지만 차이점이 한눈에 들어왔습니다. 1px보다는 굵고 2px보다는 얇은 느낌을 살릴 수가 없었습니다.
https://codepen.io/zineeworld/pen/PLLydw
글자크기가 작은 곳일 수록 1.5px이 정확히 렌더링 될 수 없는 문제도 있었습니다. 혹시나 하는 마음으로 디자이너 분에게 1px 느낌으로 변경이 가능할 지 조심스럽게 여쭤봤습니다. 하지만 마음 착한 디자이너님은 ‘아…’ 라고 짧게 탄식했습니다.
- 그럼 다른 방법을 찾아볼게요!
접근3) SVG 코드를 활용할 순 없을까?
디자인을 존중하는 개발자로서 디자이너가 의도한 표현을 최대한 그대로 적용하고 싶었습니다. SVG를 기반으로 그대로 웹에 표현하는 방식을 좀 더 찾아보기로 했습니다. 아이콘폰트를 작업하려면 일러스트레이터로 벡터 기반 작업이 가능하므로, 각 아이콘을 SVG로도 추출할 수 있습니다. 따라서 해당 아이콘의 SVG 코드를 확인해 보았습니다. 역시나 단순한 구조이므로 polygon 으로 구현되어 있었습니다.
배경으로 이미지 아이콘을 넣을 수도 있지만, 색상이 변경될 때마다 다른 이미지 파일을 필요로합니다. SVG는 이미지 파일이지만 코드 기반이기 때문에 별도의 파일 생성없이 색상 수정이 가능합니다. polygon의 fill 값을 변경해주면 색상이 바뀝니다.
1. SVG 코드를 background-image 에 넣기
2. IE 대응을 생각해서 SVG 코드를 Data URI로 변환하기
검정색 아이콘이 SVG의 Data URI 값을 넣은 것이고, 파란색이 SVG 코드를 그대로 넣은 것입니다. IE 에서는 background-image 에
Windows (좌측 상단부터 시계방향으로 크롬 >> 파이어폭스 >> Edge >> IE11)
MacOS (좌측부터 크롬 >> 사파리 >> 파이어폭스)
<, > 을 주로 변환하는 단순한 작업이지만 아래 사이트를 이용하면 빠르고 쉽게 변환이 가능합니다.
3. 변환한 Data URI 값을 배경이미지에 넣기
4. Sass를 통해 색상 변환하기
-음… 뭐가 문제지? 왜 안보이지?
Data URI 값도 잘 넣었는데 화면엔 아무것도 안보였습니다. fill=”black”, fill=”red” 등으로 테스트할 때도 잘 나왔습니다. 그런데 hex 코드로 바꾸니 아무것도 보이지 않았습니다.
문제점) Data URI값에는 hex 코드를 넣을 수 없다.
hex 색상을 매번 어떻게 rgb로 변환할 수 있을 까 생각하다가 이미 자주 사용했던 rgba() 속성을 생각했습니다. rgba($color, 1.0) 을 넣고 야심차게 실행해봤지만 화면엔 아무것도 나타나지 않았습니다. 뭐가 문제지? 하고 한참을 생각하다가 opacity: 1.0 은 rgb값으로 리턴되지 않고 자동으로 hex값이 된다는 걸 발견했습니다. rgba()를 사용했지만 결국 hex 코드를 넣고 있었던 것이었습니다.
(좌) opacity: 0.999, (우) opacity: 1.0
해결방법) rgba의 알파값에 0.999를 주자.
실제 색상과의 0.01%의 오차는 hex코드로 변환시 결국 같은 값이 됨을 확인 했습니다.
https://codepen.io/zineeworld/pen/draKax
5. SVG 코드를 배경이미지로 활용한 아이콘 완성!
https://codepen.io/zineeworld/pen/RdzePg
CSS로 그렸을 때의 장점은 border-color를 폰트색상과 동일하게 currentColor로 상속받을 수 있는 것입니다. SVG 코드를 html에 넣고 fill 색상에 currentColor를 지정해서 부모요소의 폰트색상을 상속시키는 것은 가능합니다. (참고: https://codepen.io/zineeworld/pen/PLgrpP) 하지만 SVG 코드는 배경이미지 속성에 넣을 경우에는 fill 값에 부모요소의 색상을 동적으로 적용시킬 수 없습니다. 왜냐하면 url() 안에 들어가는 값은 문자열이기 때문입니다.
글자색과 아이콘 색상을 동일하게 맞춰주는 작업이 필요합니다. hover시 색상이 변하는 경우는 아래와 같이 처리할 수 있습니다.
https://codepen.io/zineeworld/pen/XGYNZp
이로써, 디자인 의도를 해치지 않으면서 코드로 아이콘을 사용할 수 있는 방법에 대해 알아봤습니다. SVG 아이콘을 배경이미지화 해서 더욱 다양하게 쓰고 싶다면 아래 참고 링크가 도움이 될 것 입니다. 다양한 아이콘 이제 이미지 파일 대신 코드로 사용해보는건 어떤가요?
참고
https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images
https://codepen.io/noahblon/pen/xGbXdV?editors=1100
https://codepen.io/tigt/post/optimizing-svgs-in-data-uris
오혜진, Markup Developer, Coinone
가입하기
