brunch

라이킷 21 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by DesignerKang Sep 24. 2024

[디자인] 아이콘 제작의 과거와 현재

디자인 트렌드와 피그마로 그리는 아이콘

최근에 피그마로 그릴 작업이 많아지면서, 문득 과거 기억이 나기도 해서 좀 지난 주제이긴 하지만 스큐어모피즘에서 뉴모피즘으로 이어지는 디자인 트렌드를 돌아보고, 피그마로 제작한 최신 아이콘 사례를 공유합니다.

스큐어모피즘?

‘스큐어모피즘(Skeuomorphism)’은 실감 나는 시각적 효과를 중시하며, 실제 물체의 질감을 그대로 구현하는 디자인 기법입니다. 이 기법의 가장 큰 장점은, 스마트폰이 처음 등장했을 때 현실에서 사용하는 물건들과의 차이를 줄여 이질감을 줄여 주었다는 점입니다.
그래서 스마트폰 사용 초기에 이러한 디자인이 사용자들에게 큰 도움을 주었다고 생각합니다.

스큐어모피즘 샘플 화면

사실 저도 정밀하게 묘사된 아이콘을 디테일하게 그리는 것을 좋아하는 디자이너 중 한 명이었습니다.

그래서 디테일하게 그린 작업물들이 좀 있었는데, 2010년쯤 어떤 회사의 면접을 보던 중 팀장님이 드리블 같은 사이트에 제 작업물을 올려보라고 권유하면서, 이 분야에 더 큰 재미를 느끼게 된 게기가 되었습니다.

진행했었던 스큐어모피즘 스타일 아이콘

진행했었던 스큐어모피즘 스타일 앱화면

하지만, 시간이 흐르면서 다양한 환경에서 다양한 해상도를 지원해야 하는 모바일 기기들이 등장하게 되었고, 그래픽 리소스가 너무 커지는 문제점이 나타났습니다.
그때즈음 애플의 디자이너였던 조나단 아이브가 단순함, 명료함, 효율성을 강조하며 “진정한 단순함은 불필요한 장식이 없는 수준을 넘어 복잡함에 질서를 부여하는 것”이라는 디자인 철학으로 IOS7 이 나오면서, 미니멀리즘 디자인이 대세가 되기 시작했습니다.
(사용자들은 이제 디지털 환경에 익숙해졌기 때문에 꼭 현실감 있는 그래픽일 필요가 없는 환경도 작용한 것 같습니다.)

엄청 까였던 조나단 아이브..ㅎ

여담이지만, 그 당시 디자인사이트들 에서는 너무나도 강한 컬러와 절제된 디자인으로 인해서 조나단 아이브를 비방하는 그래픽들이 많이 밈처럼 올라왔던 기억이 납니다. 저도 스큐어모피즘을 좋아했기 때문에 그 비판을 즐겁게 봤던 것 같습니다.ㅎ

조나단 아이브의 디자인을 비판하는 그래픽

혹시 오해소지가 있을 것 같아서.. 미니멀리즘의 장점은 설명할 필요도 없을 만큼 매력적입니다. 저도 현재는 특별한 개념을 따지지 않고 모두 다 좋아합니다. ㅎ

돌아온 스큐어 모피즘? 뉴모피즘!

개발 기술의 발전과 미니멀리즘 디자인에 지친 디자이너들의 요구가 맞물리면서, 스큐어모피즘의 진화형인 뉴모피즘이 등장했습니다.

뉴모피즘은 Dribbble에서 시작된 미니멀리즘 디자인의 대안으로, 객체와 배경 간의 구분을 그림자만으로 만들어내는 디자인 언어입니다. 이를 통해 볼륨감 있고 생동감 있는 느낌을 줄 수 있습니다. 뉴모피즘 스타일은 배경색과 UI 요소의 명도 차이만으로 디자인되며, '드롭 쉐도우'와 '이너 쉐도우'가 필수적입니다.
뉴모피즘은 아이콘뿐만 아니라 앱 화면의 버튼 등에도 많이 적용되었습니다. 하지만 과도하게 사용되면 가독성이 떨어지거나 표현이 애매해질 수 있다는 점 때문인지, 유행이 상대적으로 짧았던 것 같습니다. 저도 이 시기에 앱 화면에 버튼과 패널에 효과를 적용하면서, 너무 많이 사용하면 안 되겠다는 생각을 했던 기억이 납니다. ㅎㅎ
물론 뉴모피즘이 완전히 사라진 것은 아닙니다. 애플 OS 아이콘에서 뉴모피즘이 다시 적용되면서 관심이 다시금 불러일으켜졌습니다.

참고로, 이후에도 플랫 디자인을 기반으로 ‘글라스모피즘’, ‘인터랙션 디자인’, ‘영상’, ‘아이소메트릭’, ‘3D’ 등의 트렌드가 있었으며, 특히 3D는 여전히 유행하고 있습니다.

새로 나온 건 해봐야지!

저 역시 새로운 디자인 기술이 나오면 항상 테스트해 보는 편이라, 스큐어모피즘의 향기가 느껴지는 뉴모피즘을 반가워하며 몇 가지 브랜드 아이콘을 제작해 보았습니다.(2020년)

만들어본 뉴모피즘 아이콘

이 작업은 사실 시간이 많이 걸리지 않았고 재미로 한 것이었지만, 디자인 사이트나 SNS에서 좋은 반응을 얻었고, 해외에서도 몇 가지 작업 의뢰가 들어왔습니다. 이 작업은 재미로 한 작업이 수익으로 이어졌기 때문에 ㅎ 저에게 즐거운 기억으로 남아 있습니다.

기술=트렌드

저는 새로운 트렌드가 등장할 때마다 기술과 밀접한 연관이 있다고 생각합니다. 뉴모피즘의 경우, SVG 파일을 활용한 벡터 그래픽의 가벼움과 디자인툴(XD, Figma) 툴의 발전이 큰 역할을 했다고 생각합니다.

그래서 이번에는 Figma에서 그린 아이콘을 공유하려고 합니다. 예전이라면 포토샵에서 작업한 후 비트맵으로 추출했겠지만, 이제는 Figma에서만으로도 시간을 많이 들이지 않고 이 정도의 퀄리티를 가진 아이콘을 그릴 수 있다는 것을 보여주고 싶었습니다.

아이콘의 주제는 친숙한 맥의 아이콘을 중심으로 작업했습니다.

피그마에서 기본 도형으로 그려진 아이콘

모든 물체에는 그러데이션이 있다!

"모든 물체에는 면이 있다, 심지어 날카로운 칼에도 면이 있다"는 말처럼, 저는 모든 물체에는 빛의 방향에 따라 면과 그림자를 표현하는 그러데이션이 있다고 생각합니다.

기존의 OS 아이콘을 세밀하게 관찰하여 아이콘 제작에서도 그러데이션을 많이 활용했습니다. 형태는 펜툴 대신 기본 도형(원, 네모)을 사용해 그렸으며, 컬러와 깊이감, 그림자 표현은 단순한 그러데이션을 반복적으로 사용해 제작했습니다.

추가로, 이런 아래와 같은 그래픽도 쉽게 그릴 수 있습니다~!

피그마로 그려진 그래픽

작업 팁 공유

오브젝트를 그릴 때, 아래와 같이 두 가지 방식으로 작업할 수 있습니다.

방식 A: 그러데이션 별로 분할하기
이 방식은 각 그러데이션을 별도의 도형으로 분할하여 그리는 것으로, 아마도 가장 일반적으로 많이 사용하는 방법일 것입니다.
- 장점: 면 분할 형태와 크기에 자유도가 있어, 표현에 제약이 없습니다.
- 단점: 각 부분을 일일이 그려야 하므로 시간이 많이 걸리며, 필요한 경우 마스크를 사용해야 해서 레이어가 복잡해질 수 있습니다.

방식 B: 한 가지 형태에 그러데이션 넣기
이 방식은 한 가지 형태 안에 필요한 컬러 그러데이션 여러 개를 넣는 방식입니다. 일러스트레이터나 포토샵에서는 상상하기 힘든 개념이지만, 피그마에서는 가능한 방식입니다.
- 장점: 심플한 레이어 구성을 할 수 있어 작업이 간편해집니다.
- 단점: 면 분할 형태에 제약이 있어 자유도가 다소 떨어집니다.

방식 B를 사용해 보면 생각보다 훨씬 유용합니다. 하지만 오브젝트의 특성에 따라 두 가지 방식을 적절히 사용하는 것이 가장 좋을 것 같습니다.

이너쉐도우와 그러데이션 활용 팁

방식 A: 이너쉐도우 사용하기
- 장점: 손쉽게 외곽의 볼륨감이나 그러데이션 처리를 할 수 있습니다.
- 단점: 회전 시 이너쉐도우의 각도가 고정되어 있어, 의도치 않은 그러데이션이 나올 수 있습니다.
방식 B: 그러데이션 사용하기
- 장점: 회전하거나 크기를 변형시켜도 동일한 각도와 비율이 유지됩니다.
- 단점: 이너쉐도우에 비해 작업 시 손이 많이 가고, 곡선에서는 약점이 있습니다.