일러스트를 활용한 웹디자인 살펴보기

다양한 사례를 통해 알아보는 3D 및 플랫 일러스트

일러스트를 활용한 웹디자인 살펴보기

일러스트를 활용한 웹디자인 살펴보기

 

틀에 박히지 않은 자유로운 표현이 가능한 일러스트레이션!
덕분에 디자인 분야에서 광범위하게 활용되고 있는데요.
특히 3D 일러스트는 활용 범위가 넓어 더욱 다양하게 쓰인답니다.

2D에서 표현하기 힘든 원근감과 입체감을 나타내주는 3D 일러스트는
디자인의 전체적인 퀄리티를 높이고 주제를 더 명확하게 전달하며
극적인 분위기를 연출해줍니다.

최근 들어 주로 캐릭터, 애니메이션, 게임 일러스트 분야에서 사용되던 3D 일러스트를
웹디자인에 활용하는 경우도 많은데요.
지금부터 다양한 예시를 통해 3D 일러스트를 활용한 웹디자인 사례를 살펴보겠습니다.

 

1.롯데그룹 인리칭 컴퍼니 

1-1

<http://www.enriching.co.kr/>

 

이 사이트는 롯데그룹 인리칭 캠페인을 위해 만든 프로모션 사이트인데요.
롯데 인리칭 컴퍼니 건축물을 중심으로, 기업에서 추구하고자 하는 세상을
아기자기한 3D 일러스트를 통해 구현했습니다.

 

1-3

<http://www.enriching.co.kr/>

 

3D일러스트를 통해 거리와 건물 내부 모습까지 디테일하게 표현했습니다.
덕분에 전체적으로 아기자기하면서 따뜻한 분위기가 확실하게 전달되죠?
게다가 간단한 모션과 일러스트를 활용한 게임까지 추가해 재미를 더했습니다.

 

 

2. Time Warner Cable WiFi-Denti-Fier

2-1

<http://www.twcwifidentifier.com>

 

2-2

<http://www.twcwifidentifier.com>

 

인물 중심의 3D일러스트가 사용된 이 사이트는 사용자와의 인터렉션 마케팅을 위한 웹사이트인데요.
소비자들에게 보다 친근하고 흥미롭게 다가가기 위해 사이트 전반에 3D 일러스트를 활용했으며
마치 애니메이션을 보는 듯한 모션 및 일러스트 효과를 통해 소비자들의 상품 선택을 도와준답니다.

대부분 프로모션 사이트나 마케팅을 위한 단기 사이트에
3D 일러스트를 활용한 경우가 많은데요.
3D 일러스트의 극적인 효과를 잘 활용한 예라고 볼 수 있죠.

 

 

3.재능교육WIZ위즈

3-1

<http://jeiwiz.com/>

 

다음은 재능교육 소속의 내부 브랜드인 재능교육 WIZ의 사이트입니다.
아이들을 대상으로 하는 브랜드인 만큼, 그 특징을 한눈에 알 수 있도록
밝고 다양한 컬러와 동글동글 귀여운 느낌의 3D 일러스트를 사용했습니다.

 

3-2

<http://jeiwiz.com/>

 

하지만 앞의 두 케이스와는 다르게 메인 화면에만 3D 일러스트를 비중 있게 사용했는데요.
3D 일러스트는 작은 이미지만으로도 큰 시각적 효과를 주기 때문에
자칫 잘못 사용하면 오히려 과하고 부담스러운 느낌을 줄 수 있답니다.
때문에 각 사이트 특성에 따라 메인에만 강하게 사용할 것인지
사이트 전반에 활용할 것인지 잘 판단해야 합니다.

 

 

다음으로는 요즘 웹사이트 디자인에 많이 사용되는 ‘플랫 일러스트’ 디자인에 대해 알아보겠습니다.
‘플랫 일러스트’는 평면 감성을 담은 최소화 디자인으로 신선함과 명확성이 특징적이랍니다.

 

 

4.한화S&C 

4-1

<http://www.hsnc.co.kr/>

 

처음 리뉴얼 됐을 때부터 좋은 반응을 얻은 한화S&C의 사이트입니다.
메인 상위 배너부터 중간중간 인포그래픽 형식으로 사용된 플랫 디자인들이
사이트 전체에 활기를 주고 있습니다.
컬러들을 다채롭게 활용하고 있어 산만하거나 부담스럽지 않게 잘 조절된 느낌이 들죠?

 

 

4-3

<http://www.hsnc.co.kr/>

 

또한 깔끔한 컬러와 일러스트로 밝고 긍정적인 느낌을 전해줍니다.
덕분에 자칫 딱딱하고 어려워 보일 수 있는 전문적이고 기술적인 분야가
보다 친근하게 느껴지죠 .

사실 이렇게 많은 컬러와 요소를 사용하는 경우엔 조금만 과해져도
보는 사람에 따라 산만하다고 느끼기 쉬우므로 디자인의 강약 조절이 관건이라고 볼 수 있습니다.

 

4-2

<http://www.hsnc.co.kr/>

 

또한 그리드를 적절히 나누고, 상단과 중간 일러스트는 분리된 칸으로 표현했는데요.
제한된 칸 형태의 디자인으로 강, 약 조절이 잘 되어 있음을 알 수 있습니다.

 

 

5.Making Sense의 landing page

5-1

<http://landerapp.com>

 

다음은 플랫일러스트가 적용된 디자인 템플릿 사이트입니다.
비록 샘플 디자인 페이지이지만 플랫 일러스트가 전체적인 흐름을 방해하지 않고
오히려 디자인에 개성을 부여하면서 친근한 인상을 심어줍니다.

 

5-2

<http://landerapp.com>

 

5-3

<http://landerapp.com>

 

이 사이트는 일상생활에 자주 사용되는 사무용품과 전자기기를 플랫 일러스트로 표현해 친근한 느낌을 주는데요.
각각의 콘텐츠 부분에는 해당 문구에 알맞은 일러스트를 사용해 재치를 더하고 있습니다.

각각의 일러스트들은 핵심 포인트 컬러를 사용해
전체 흐름을 방해하지 않는다는 것 또한 포인트입니다.

 

 

6.한화생명 오늘의 공감 캘린더

6-1

<https://apps.facebook.com/184244078299595/>

 

마지막으로 한화생명의 ‘오늘의 공감 캘린더’ 이벤트 페이지입니다.
차분하면서도 발랄한 파스텔톤 컬러를 사용해서 심플한 플랫 일러스트에 활기를 주었는데요.
특히 이벤트 페이지인 만큼 각각의 콘텐츠를 분리하여 표현함으로써
일러스트를 더욱 효과적으로 활용했습니다.

 

6-2

<https://apps.facebook.com/184244078299595/>

 

6-3

<https://apps.facebook.com/184244078299595/>

 

캘린더 형태의 틀 안에 간단한 모션과 효과를 적용해 재미를 더했습니다.
한화생명 cf 에 등장하는 아기 모델 일러스트를 통해 영상 속 모습과 비교해볼 수도 있고
이벤트에 당첨된 고객들의 이야기는 모션 일러스트로 작업해 마무리했습니다.

 

━━━━━━━━

다양한 사이트에 적용된 3D 및 플랫 일러스트의 사례를 살펴보았는데요.
3D 일러스트나 플랫 일러스트는 주로 간단한 모션이나 인터렉션 등
다양한 응용 효과를 함께 사용하는 경우가 많았습니다.
또 웹사이트 특성에 따라 메인에만 강하게 사용할 것인지
사이트 전체에 활용할 것인지 잘 판단하는 것 또한
일러스트 사용 시 중요한 포인트라 할 수 있습니다.

 

[작성: 김지윤]

Add comment