brunch

You can make anything
by writing

C.S.Lewis

by Shaun Nov 12. 2024

10분 만에 3D 아이콘 만들기(1화:형태)

요즘 디자인 리서치를 하다 보면, 3D 스타일의 비주얼과 아이콘을 많이 볼 수 있다. 예전에는 이런 3D 스타일의 디자인은 특정 3D 툴을 사용하던가 포토샵이나 일러스트의 2D 환경에서 입체감 있게 3D 스타일을 흉내 내곤 했다. 하지만 툴의 기능과 접근성이 좋아진 지금, 아주 쉽게 3D 스타일의 비주얼과 아이콘을 만들 수 있다.

*클라이언트는 디자인을 의뢰한 모든 대상을 지칭합니다.

클라이언트는 3D를 좋아한다?

3D를 흉내 내던 시절

예전 3D 디자인의 접근성 낮은 시기가 있었다. 당시에는 3D 디자인은 특정 3D 툴을 사용해야만 구현이 가능했다. 그 시절 UI 또는 브랜드 디자이너들 중에 3D 툴을 사용할 줄 아는 디자이너는 극히 일부였다. 그래서 포토샵이나 일러스트레이터의 2D 그래픽 툴에서 퍼스펙티브(원근법) 뷰로 3D 스타일을 흉내 내곤 했다. 3D의 뷰는 2D의 뷰 보다 임팩트와 재미가 있었기 때문에 대부분 클라이언트들에게 시각적 흥미를 유발했다. 2D의 시점은 평면에 두께감이 없는 시점만 표현할 수 있다. 반면 3D의 시점은 두께감을 표현할 수가 있기 때문에 오브젝트의 볼륨감 또는 스케일을 시각적으로 극대화되어 보이게 할 수 있다. 그 점이 아마도 클라이언트들에게 시각적 흥미를 느끼게 해주는 3D의 장점이었던 거 같다. 그래서 3D 툴을 사용하기 어려운 디자이너들은 면과 면을 합쳐서 각 면에 명암을 주고 3D의 퍼스펙티브(원근법) 뷰 비주얼을 만들어 내기도 했다.

면과 면을 합쳐 명암을 이용해 3D 시점을 표현

2D 그래픽 툴에서 3D의 시점을 표현하기 위해서는 원근법과, 명암의 디테일을 잘 아는 디자이너들이 유리했다. 그들의 작업은 정말 3D 툴을 사용해 디자인한 거 같은 퀄리티를 보여 줬다. 그렇기 때문에 3D 스타일의 비주얼은 희소성이 있었다. 그런 디자이너의 퀄리티를 클라이언트들은 좋아했다.

"시점 좀 바꿔 주세요"의 멘붕

클라이언트들은 원근법과 명암이 완벽한 3D 비주얼의 임팩트를 좋아했고 대부분 마음에 들어 했다. 하지만 시안을 작업하고 클라이언트 리뷰가 있을 때 굉장히 무섭고 곤란한 피드백이 있었다. 바로 "시점 좀 바꿔 주세요."의 피드백이었다. 포토샵이나 일러스트레이터는 3D 그래픽 툴이 아니기 때문에 시안 작업을 할 때 시점(좌측면, 우측면 등)을 하나 정하고 디자인을 한다. 그렇기 때문에 시점을 바꿔달라는 피드백은 작업을 다시 해달라는 것과 같다.

2D 그래픽 툴로 시점을 바꾸기는 쉽지 않다

클라이언트가 "톤 앤 매너, 아이디어는 마음에 드는데 반대 측면 시점에서 바라보게 해 주세요."라고 피드백을 주면, 멘붕이 왔지만 그래도 컨펌이 난 안도감에 오히려 기뻤던 기억이 크다. 시점을 바꾸는 디자인 작업은 시간만 투자하면 된다. 반대로 콘셉트나 톤 앤 매너, 아이디어가 클라이언트 마음에 들지 않으면 오히려 스트레스가 더 심했다. 차라리 단순 시간을 투자하면 되는 작업이 더 스트레스가 적었다. 그래서 시점을 바꿔 달라는 클라이언트의 피드백은 시안이 통과된 것과 같은 안도감이 있던 건 사실이다. 하지만 다시 시간을 투자해 요청한 시점으로 디자인 작업을 다시 했던 기억이 생각난다.

2D에서 3D로

요즘은 어도비 디자인 툴의 기능을 활용해 3D 시점을 아주 쉽고 편리하게 접근할 수 있다. 어도비 디자인 툴을 활용하면 3D도 2D에서 시작되는 걸 알 수 있다. 디자인한 2D(X축과 Y 축)에서 Z 축을 자동으로 추가시켜 3D 시점을 완성한다.

2D에서 3D로

그렇기 때문에 '시점 좀 바꿔 주세요.'라는 피드백은 더 이상 두려움의 대상이 아니다. 2D에서 디테일하게 작업할수록 3D의 디테일도 좋아진다. 또 작업된 3D 시점에 오브젝트의 재질과 명함 또한 쉽게 구현할 수 있다.

2D, 3D 각각의 장점

무조건 3D 시점이 좋은 건 아니다. 2D와 3D는 디자인의 콘셉트와 상황에 맞게 결정해서 적용해야 한다. 무조건 2D, 무조건 3D라는 생각은 좋지 않다. 플랫 디자인이 한창 유행하던 시절에는 2D의 시점이 더 각광받았었다. 시각적 구성이 단순해 인지 비용이 적어 더 쉽게 인식할 수 있다는 가설이었다.

2D는 3D에 비해 시각적 인지 요소가 적다

하지만 시각적 재미나 흥미는 많이 떨어져 매력적이지 않았다. 그렇게 플랫 디자인의 2D 시점 디자인의 전성기가 지나갈 무렵 3D 시점의 디자인이 유행하기 시작했다. 3D 시점은 원근법과 명암을 자극해 비주얼적으로 더 재미와 흥미를 유발했다. 그렇게 3D 시점의 디자인에서 애니메이션이 추가되면서 더 흥미 있게 디자인 스타일이 발전됐다. 어떤 시점을 활용하든 간에 디자인 콘셉트에 맞는 시점을 결정해 적용해야 한다.

먼저, 2D 아이콘 만들기

3D 오브젝트는 어도비의 일러스트레이터나 디멘션을 이용해 쉽게 디자인할 수 있다. 3D 오브젝트를 만들기 전에 먼저 2D 시점에서 오브젝트를 디자인해야 한다. 2D에서 비율과 디테일이 그대로 3D로 적용되기 때문에 2D에서 완성도 있게 형태를 디자인해야 한다.

어도비 일러스트레이터로 오브젝트 전체를 디자인한다

iOS의 아이콘을 예제로 진행해 보자. 먼저 일러스트레이터로 해당 아이콘을 디자인한다.

2D에서 3D로 디벨롭하기

3D 효과를 적용할 개체는 총 2개다. 컨테이너와 말풍선 개체.

3D 적용할 개체

컨테이너 개체를 선택해서 일러스트레이터 메뉴바에서 Window > 3D and Materials 창을 불러온다.

Window > 3D and Materials

3D and Materials 창이 열리면 이제 선택한 개체에 3D 효과를 적용해 주면 된다.

Extrude를 선택

Extrude를 선택하면 해당 개체에 3D 효과가 적용된다.

3D 효과 적용

Depth는 개체의 두께의 값이다. 10px로 설정하고 나머지 옵션은 하나씩 테스트 삼아 적용해 보면 어떤 기능인지 쉽게 알 수 있다.

두께는 10px

그리고 3D and Materials 창을 하단으로 내려 Bevel을 활성화하고 Bevel Shape을 Round로 선택한다.

Width 값은 10%로 설정하면 아래와 같이 엠보스 형태의 3D 효과가 적용된다.

엠보스 형태의 3D 효과

말풍선 개체에 하단과 동일하게 적용하면 된다. (주의사항 3D 효과를 적용하기 전에 두 개체를 그룹으로 설정하지 않기) 3D 효과는 초록색의 아이콘 컨테이너 개체 그리고 말풍선 개체 총 두 개체다.

3D 적용, 두께는 2px

Bevel Shape을 Round로 선택, Width 값은 15%.

Bevel Shape 적용

말풍선은 입체감을 극대화하기 위해 Lighting을 적용해 보자.

창을 아래로 내려 이미지와 같은 수치로 설정한다.

Shadow를 활성화하고 Shadow Bounds를 200%로 설정.

이제 3D 설정값 세팅이 끝났다. 여기서 끝이 아니라 Render를 적용해 줘야 3D 효과가 자연스럽게 적용된다. 아래 화살표를 클릭하면 Render 설정 창이 열린다. Ray Tracing을 활성화하고 Quality는 High로 설정, 그리고 마지막으로 Render를 실행해 주면 된다.