반응형 아이콘은 정말 필요한가? (번역)
icon finder blog의 Scott Lewis 글 번역
개인적으로 재미있게 본 프로젝트와 글이라서 번역해봅니다.
원문 : http://blog.iconfinder.com/do-we-really-need-responsive-icons/
반응형 아이콘은 정말 필요한가?
반응형 아이콘(Responsive icon)은 벡터형 아이콘과 반응형 웹 디자인이 결합한 결과물이다. 최근 우리는 반응형 아이콘에 대한 여러 가지 흥미로운 예제들을 볼 수 있었다. 그러나 모든 새로운 것들과 마찬가지로, 반응형 아이콘이라는 새로운 기술의 장단점을 고려해보아야 한다.
최근에 우리는 iconic 의 킥스타터 프로젝트 에 대해 Waybury의 설계 기술자PJ Onori 을 인터뷰했다. 프로젝트의 목표는 CSS와 자바스크립트의 조작 가능한 ‘스마트’ 아이콘을 만드는 것이었다.
이 프로젝트의 보조적 측면은 다양한 사이즈의 디스플레이에 대응하여 최적화된 3가지 사이즈의 반응형 아이콘 세트를 만드는 것이다. 반응형 아이콘은 적어도 기능적인 면에서 반응형 이미지와 동일하다. 사용자가 이 기술이 적용된 사이트에 접속하면, 그들의 스크린 사이즈에 최적화된 이미지(아이콘)를 보게 되는 것이다.
영국의 디자이너 Joe Harrison은 심플하고 인상적인 ResponsiveIcons.co.uk를 통해 그만의 정교한 컨셉을 보여주었다. Waybury와 Joe Harrison, 두 디자이너는 반응형 아이콘에 대해 서로 독립적인 생각을 가지고 있다. Waybury의 주요 관심사는 반응형이 아니라 CSS와 자바스크립트로 접근 가능한 SGV 아이콘의 표준을 만드는 것이고, Joe Harrison의 사이트는 시각적인 반응형 아이콘 자체에 초점을 맞춘 것이다.
반응형 아이콘의 예시 Waybury Joe Harrison
Waybury와 Joe Harrison은 반응형 아이콘에 대해 각각의 예시를 만들었다. Waybury는 세 가지 아이콘 사이즈로 다양한 단계적 디테일을 보여주고, Joe Harrison은 크기에 따라 점진적으로 디테일이 생기는 것을 보여준다.
반응형 아이콘에 대한 엇갈린 의견들
반응형 아이콘에 대한 의견은 엇갈렸다. 아이디어를 지지하는 디자이너들도 있었지만 대부분은 아니었다. 아이콘은 UX에서 매우 중요한 요소이며 상황에 따라 아이콘의 모습이 바뀌는 것은 오히려 사용성을 떨어트릴 뿐만 아니라 사용자들에게 일관성 없는 경험을 준다는 것이었다. 나는 상황에 따라 달라지는 아이콘의 모습은 사용성 오류라는 이 반대 의견에 어느 정도는 동의한다. P. J. Onori는 우리와의 인터뷰에서 이렇게 말했다. “컴퓨터 인터페이스에서 아이콘은 공용어가 될 것이다.”
여기에 명확하게 말하자면, 나는 반응형 아이콘에 대해 반대 입장이 아니다. 오히려 그 정반대이다. 내가 오직 반대하는 것은 상황에 따라 시각적인 표현이 크게 달라져버리는 것이다. 이것은 각각의 다른 파일을 제공하는 것과는 다른 문제이다.
반응형 아이콘의 적절한 사례
우리의 최근 인터뷰에서, 아이콘 디자이너 Tom Nulens는 로고, 서체 디자인 분야와 아이콘 디자인 분야를 비교했다. 아이콘 디자인은 두 디자인 영역의 많은 법칙들에 영향을 받고 있다. 왜냐하면 아이콘은 디스플레이 환경에 따라 크기가 매우 달라질 수 있고, 하나의 아이콘만으로는 모든 크기의 상황에 적합하지 않을 수 있기 때문이다.
노련한 로고 디자이너와 아이콘 디자이너들은 로고나 서체가 어떤 크기로 보이느냐에 따라 미묘한 혹은 미묘하지 않은 시각적 차이가 발생한다는 것을 통감할 것이다. 이 때문에 아주 작은 크기에서 서체 획의 굵기를 두껍게 하거나 작은 사이즈에서 자간을 넓히는 것 등의 작업이 종종 필요하다.
이와 비슷하게 아주 큰 크기나 아주 작은 크기에 대응하기 위해 선 굵기나 비율, 서체, 화이트 스페이스를 조정해야 할 때가 있다. 아주 작은 화이트 스페이스를 다크 스페이스가 메워버릴 때도 있고, 작은 크기에서 얇아보였던 선도 큰 크기에서는 다소 굵어 보일 수 있다.
아래의 예를 보자. 작은 사이즈에서 자의 눈금 부분은 알아볼 수 있을 정도의 비율이지만, 크기가 커질수록 주변의 검은 부분만큼 눈에 확 띄게 된다.
그렇다면 이들 전체의 흰 선을 얇게 만들어보자. 큰 사이즈에서 아이콘은 시각적으로 괜찮아 보이겠지만, 작은 사이즈에서는 눈금을 읽기 어려울 정도로 얇아진다.
반응형 아이콘은 아이콘의 시각적 기능을 유지하면서 비율과 선 굵기를 상대적으로 최적화시키는 것이다. 우리는 아이콘의 의미를 바꾸지 않았고 심지어 모습도 바꾸지 않았다. 사실 대부분의 사용자들은 첫 번째와 마지막 아이콘 사이의 변화를 알아채지 못할 것이다. 아래의 예시가 바로 반응형 아이콘에 대한 유용함을 나타내 준다.
결론
아이콘 디자인 전문가로서 나는 나의 아이콘이 최고가 되기를, 그것들이 할 수 있는 한 가장 유용하게 쓰이길 원한다. 반응형 아이콘 기술이 이 글에 나타난 예시대로 쓰인다면 아이콘 디자이너들에게 아주 유용한 툴이 될 것이다. 이 기술은 다른 도구들과 마찬가지로 장점과 단점이 둘 다 존재한다. 끝으로 이들을 요약해본다.
단점
- 시각적으로 (티 나게) 다른 아이콘 때문에 생기는 사용자의 혼란
- 여러 버전의 아이콘 디자인을 하기 위한 디자이너의 작업량 증가
- 페이지 사이즈가 더 다양화되면서 남용이 될 가능성
장점
- 여러 디스플레이 환경에 대응하는 시각적 보정을 할 수 있다.
- 안드로이드, 윈도우, ios 등등 각기 다른 디바이스의 각기 다른 그리드에 최적화될 수 있다
- 수학적 크기 조절이 아닌 다른 사이즈를 위한 시각적 보정이 가능하다
반응형 아이콘이 계속해서 주목받을지는 모르는 일이다. 우리는 아직 이 새로운 아이디어에 대해 데이터를 기반으로 도출된 결론을 보는 것은 고사하고, 기술적으로 완성하여 적용된 예시를 본 적도 없다. 그러나 이 아이디어가 긍정적이든 부정적이든 잠재적인 영향을 이해하고 탐구할 가치가 있다.
다양한 생물종들이 진화 및 적응을 해 나가는 것처럼 혁신은 시작 단계에서는 실패하지만 자신의 환경에 적응하는 방식을 통해 의외이면서도 이익이 되는 방향으로 향하게 된다. 결국 어떤 새로운 사물의 수명(지속성)을 결정하는 것은 그 사물의 유용성이다.
반응형 아이콘에 대해 섣불리 어떠한 결론을 내리기 전에, 앞으로 이 아이디어가 어떻게 발전해 나가는지 지켜봐야 하겠다.
