레이아웃과 타이포그래피, 컬러가 비슷하더라도 어떤 그래픽을 사용하느냐에 따라 웹사이트의 인상은 크게 달라집니다.
웹에서는 라이프스타일 컷, 제품 컷, 일러스트, 3D 그래픽 등을 많이 사용하며, 서비스의 목적과 전달하려는 메시지에 맞게 선택해야 합니다.
그리고 좋은 이미지를 고르는 것만큼 중요한 것이 웹에서 빠르게 보이도록 최적화하는 것입니다.
어떤 이미지를 사용할 것인가?
기획안을 받아 디자인을 시작하면 빈 영역에 어떤 이미지를 넣어야 할지 고민하게 됩니다.
같은 내용이라도 사람의 실제 모습을 보여줄지, 제품만 강조할지, 일러스트나 3D로 표현할지에 따라 전달되는 분위기가 완전히 달라집니다.
강의에서는 웹에서 자주 사용하는 이미지를 크게 네 가지로 나눕니다.
| 이미지 스타일 | 특징 | 활용 예시 |
|---|---|---|
| 라이프스타일 컷 | 제품이나 서비스를 실제 사용하는 모습 | 커머스, 라이프스타일 브랜드 |
| 제품 컷 | 제품 자체를 선명하게 강조 | 전자제품, 패키지, 상품 소개 |
| 일러스트 | 개념과 기능을 직관적으로 표현 | SaaS, 기능 소개, 브랜딩 |
| 3D 그래픽 | 입체감과 강한 시각적 인상 | 테크, 스타트업, 랜딩 페이지 |
라이프스타일 컷
라이프스타일 이미지는 제품이 실제로 사용되는 상황을 보여줍니다.
가구가 집 안에 놓여 있는 모습이나 사람이 제품을 사용하는 장면처럼, 사용자가 제품을 자신의 일상과 연결해서 상상하도록 만드는 데 효과적입니다.
그래서 자주나 무지처럼 생활용품과 라이프스타일을 판매하는 커머스 사이트에서 많이 볼 수 있습니다.
제품 컷
제품 컷은 배경을 단순하게 만들고 제품 자체를 크게 보여주는 방식입니다.
스마트폰이나 헤드폰처럼 제품의 형태와 디테일이 중요한 경우에 잘 어울립니다.
애플 제품 페이지처럼 제품 자체가 디자인의 중심이 되는 경우가 대표적입니다.
라이프스타일 컷이 사용하는 경험을 보여준다면, 제품 컷은 제품 그 자체에 집중한다고 이해하면 쉽습니다.
일러스트와 아이콘
일러스트는 눈에 보이지 않는 개념을 간단하게 설명할 때 유용합니다.
예를 들어:
- 빠른 속도 → 번개
- 보안 → 자물쇠
- 데이터 분석 → 차트
처럼 복잡한 내용을 하나의 이미지로 압축해서 보여줄 수 있습니다.
특히 서비스의 기능과 장점을 소개하는 섹션에서는 긴 설명보다 아이콘이나 일러스트가 내용을 더 빠르게 이해하게 만들기도 합니다.
캐릭터와 모션을 함께 사용하면 브랜드를 조금 더 친근하게 표현할 수도 있습니다.
3D 그래픽
3D 오브젝트는 평면적인 이미지보다 입체감이 강해 테크 서비스나 스타트업 랜딩 페이지에서 자주 활용됩니다.
꼭 실제 3D 인터랙션이 없어도 렌더링된 3D 이미지 하나만으로 강한 인상을 만들 수 있습니다.
다만 3D를 과하게 사용하면 콘텐츠보다 그래픽에 시선이 쏠릴 수 있습니다.
Three.js처럼 실제 3D 인터랙션을 구현한다면 성능 최적화도 함께 고려해야 합니다. 멋있는 그래픽이라도 사이트가 버벅이거나 느리다면 좋은 사용자 경험이라고 보기 어렵습니다.
하나의 서비스도 여러 방식으로 표현할 수 있다
예를 들어 데이터 기반 UX를 도와주는 서비스를 소개한다고 해보겠습니다.
같은 서비스라도 다음처럼 전혀 다른 그래픽을 사용할 수 있습니다.
- 서비스를 사용하는 사람의 라이프스타일 이미지
- 실제 제품의 대시보드 UI
- 리뷰를 분석하는 모습을 표현한 UI 그래픽
- 기능을 추상화한 일러스트
- 데이터를 형상화한 3D 그래픽
스마트 글래스 역시 마찬가지입니다.
제품을 착용한 사람을 보여줄 수도 있고, 제품 자체를 클로즈업하거나 안경을 통해 보이는 UI를 이미지와 함께 표현할 수도 있습니다.
중요한 것은 어떤 스타일이 더 멋있는가가 아니라 무엇을 전달해야 하는가입니다.
네 가지 방식만 있는 것은 아니다
실제 웹에서는 더 다양한 표현을 사용할 수 있습니다.
추상적인 그라디언트와 셰이더, 디더링 그래픽, 인터랙티브 그래픽, 영상 등을 활용하기도 합니다.
따라서 먼저 라이프스타일·제품·일러스트·3D라는 기본 유형을 이해한 뒤 프로젝트의 목적에 맞게 표현 방식을 확장하면 됩니다.
이미지는 예쁘기만 하면 끝이 아니다
웹에서 이미지를 사용할 때는 용량과 해상도도 함께 생각해야 합니다.
같은 디자인이라도 이미지 파일이 지나치게 크면 페이지가 늦게 열리고 사용자는 콘텐츠를 보기 전에 이탈할 수 있습니다.
특히 다음과 같은 사이트에서는 이미지 최적화가 중요합니다.
- 쇼핑몰
- 포트폴리오
- 이미지 중심의 콘텐츠 서비스
대표적으로 활용할 수 있는 웹 이미지 포맷이 WebP입니다.
WebP는 JPG나 PNG에 비해 비교적 작은 용량으로 이미지를 저장할 수 있으며, 사진뿐 아니라 투명 배경도 지원합니다.
WebP만 사용한다고 해결되는 것은 아니다
파일 포맷만 바꾼다고 이미지 최적화가 끝나는 것은 아닙니다.
예를 들어 화면에서는 600 × 400px 정도로 표시되는 이미지인데 원본이 4000px이라면 사용자는 필요 이상으로 큰 이미지를 내려받게 됩니다.
따라서 실제 화면에서 표시되는 크기를 생각해 에셋을 준비해야 합니다.
특히 데스크톱과 모바일에서 이미지가 표시되는 크기가 크게 다르다면 각각의 환경에 적합한 이미지 크기를 고려할 수 있습니다.
좋은 원본을 만들고, 실제 웹에 들어갈 때는 필요한 크기로 최적화하는 것까지가 중요한 과정입니다.
웹 그래픽에서 기억할 세 가지
1. 이미지의 스타일보다 목적을 먼저 생각합니다.
제품을 보여줄지, 경험을 보여줄지, 기능을 설명할지에 따라 이미지 유형이 달라집니다.
2. 한 가지 방식만 고집할 필요는 없습니다.
실사와 UI, 일러스트와 3D처럼 여러 표현을 조합할 수도 있습니다.
3. 최종적으로는 웹 성능까지 고려합니다.
WebP 같은 웹 포맷을 사용하고 실제 화면에 필요한 해상도로 이미지를 준비합니다.
핵심 정리
그래픽은 웹사이트의 분위기를 가장 크게 바꿀 수 있는 요소 중 하나입니다.
라이프스타일 컷은 실제 사용 경험을 보여주고, 제품 컷은 제품 자체를 강조합니다. 일러스트는 복잡한 개념을 직관적으로 설명하고, 3D 그래픽은 강한 시각적 인상을 만드는 데 효과적입니다.
어떤 스타일이 무조건 더 좋은 것은 아닙니다.
서비스가 무엇을 전달해야 하는지 먼저 정하고, 그 메시지를 가장 잘 표현하는 그래픽을 선택하는 것이 중요합니다.
그리고 완성된 이미지는 WebP와 적절한 해상도를 활용해 웹에서 빠르게 표시될 수 있도록 최적화해야 합니다.
아직 댓글이 없습니다.
로그인 후 댓글을 작성할 수 있습니다.