웹사이트 이미지를 활용하여 시선을 집중시키는 디자인 트렌드

1990년대에서 2020년대까지를 되돌아보면 웹사이트 디자인 이미지가 움직임이 없는 픽셀화한 플랫 아이콘에서부터 움직이는 고해상도의 차원적인 이미지로 변화하는 흐름을 파악할 수 있습니다. 이제 웹 디자이너들에게 당면한 과제는 고급 시각 기술을 활용하여 전반적으로 사이트의 디자인, 사용자 경험 및 성능을 향상시키는 스타일리시한 시각 언어를 찾는 것입니다.

이 글에서 우리는 웹디자인 이미지의 역할과 다양한 유형을 살펴보고 사이트에 시선을 집중시킬 수 있도록 결정적인 역할을 해주는 도구에 대해서 알아볼 것입니다. 그런 다음 WOW(Wix 비주얼 혁신 팀)의 크리에이티브 프로덕트 매니저인 Adi Huri와 함께 사이트에 뛰어난 비주얼을 구현한 5가지 모범 사례를 소개하겠습니다.

2022년에는 웹사이트 이미지가 무슨 역할을 할까요?

사진 한 장은 수 백 마디의 이야기가 담겨 있습니다. 그리고 2022년의 웹사이트 역시 동일한 시각적 영향을 가지고 있습니다.

우리는 이미지가 넘쳐나는 세상에 살고 있습니다. 성인 한 명은 평균적으로 매일 9천 5백만 장의 사진이 업로드 되는 Instagram 에서 하루에 약 30분의 시간을 소비합니다. 그러다 보면 우리는 매일 4,000~10,000개의 광고를 마주하게 됩니다.

즉, 웹사이트를 디자인할 때, 방문자 들에게 뭔가 새로운 것을 보여주는 것이 좋겠지요. 단순히 트렌드를 따르는 것이 아니라 방문자들의 시선을 사로 잡음으로써 브랜드 아이덴티티를 기억할 수 있게 하는 이미지를 선택해야 합니다. 최근에는 고급 UX 디자인 도구를 활용하여 성능이나 보안에 영향을 끼치지 않으면서도 방문자에게 놀라운 시각적 경험을 제공할 수 있습니다.

웹사이트 이미지 유형

이번 섹션 에서는 웹사이트를 제작하는 동안 활용할 수 있는 이미지 유형을 살펴보겠습니다. 또한, 각 이미지 유형의 목적과 해당 목적을 최적화할 수 있는 팁을 소개하고 실제 활용 사례 몇 가지를 살펴보겠습니다.

사진

우리는 일반적으로 제품 또는 이벤트 사진을 마케팅 도구로만 생각하지만 웹사이트 사진은 그 이상을 할 수 있는 잠재력을 가지고 있습니다. 웹사이트 사진은 단순히 제품 하나를 판매하는 것이 아닌 전체적인 분위기를 제공하면서 시각적으로 사람들을 내 디자인에 매료시킬 수 있습니다. 또한, 필터나 자르기와 같은 다양한 도구를 활용하여 이미지의 시각적 아이덴티티를 향상시킬 수 있습니다.

이러한 시각 요소 향상을 시작하려면 다음과 같이 두 가지의 일반적인 사진 유형을 내 웹사이트에 적용하는 것이 좋습니다.

스톡 사진

수많은 고해상도 이미지 또는 한정된 자료를 필요로 하는 많은 웹사이트가 고해상도 스톡 사진을 사용합니다. 브랜드 아이덴티티에만 국한되지는 않으나 보다 보편적인 시각적 아이디어(예: ‘가족’과 같은 일반 명사로서의 사람들, ‘해변’과 같은 장소들, ‘아침 식사’와 같은 사물들, ‘파티’와 같은 아이디어)를 표현할 수 있습니다. 스톡 사진에는 항상 라이선스가 포함되어 있음을 잊지 마세요.

팁: Wix는 사용자들이 스톡 사진을 웹사이트에 손쉽게 적용할 수 있도록 전용 스톡 사진 라이브러리 전체를 제공하고 있습니다. 열정이 가득한 사내 팀은 대부분의 이미지가 현재의 트렌드를 반영할 수 있도록 제작합니다. 라이브러리에서 마음에 드는 이미지를 찾을 수 없다면 Wix 에디터를 통해 Shutterstock 및 Unsplash와 같은 인기 컬렉션에서 저작권 없는 이미지를 활용할 수도 있습니다.

사용자 지정 사진

반면에 어떤 웹사이트들은 회사 소개 페이지의 헤드 이미지, 제품 사진 또는 클라이언트 작업 입증을 통해 고유한 요소를 시각적으로 나타내기 위한 사용자 지정 사진이 필요합니다. 사용자 지정 사진에는 비용이 많이 들어갈 수 있지만 최근의 모바일 기기의 카메라 기능은 웹사이트에서 요구하는 수많은 사진 요건을 충족할 수 있으므로 사진이 전문적으로 보이는 구도로 촬영하는 것과 고해상도 파일인지만 잘 확인하여 적용하면 됩니다.

Gatsby Bar의 사용자 지정 사진 예시

동영상

사진이 웹사이트를 방문하는 사람들에게 분위기를 전한다면 동영상은 불특정다수에게 기하급수적으로 내 사이트의 분위기를 전달합니다. 더 넓은 각도 범위와 더 긴 메시지, 애니메이션 등을 통해 웹사이트 방문자들이 더 많은 콘텐츠에 자연스럽게 참여할 수 있도록 돕습니다. 이러한 이유로 디자이너들은 기존 형식이든 최신 트렌드에 맞는 동영상 도구이든 상관없이 강력한 시각적 도구들을 웹사이트에 적용하고자 끊임없이 노력합니다.

기존 동영상 플레이어

단순히 미학 디자인 목적으로 스톡 동영상을 사이트 디자인에 적용하든 마케팅 효과를 향상시키기 위해 원본 동영상을 업로드하든 기존 동영상은 유익한 도구 역할을 하고 사이트에 처음으로 방문하는 방문자와 충성도가 높은 고객의 참여를 유도할 수 있습니다.

팁: Wix는 주로 쓰이는 동영상 파일의 대부분을 지원하여 한 번의 클릭만으로 사이트에 동영상을 적용할 수 있습니다. 또한, 편리한 Wix 에디터를 통해 Vimeo와 YouTube에서 내 사이트로 동영상을 바로 스트리밍할 수 있습니다.

사용자 친화적인 Wix 동영상 메이커를 활용하면 내 미디어의 디자인과 해당 미디어를 사이트에 표시하는 방법을 손쉽게 사용자 지정할 수 있습니다.

투명 배경 동영상

투명 배경 동영상은 Wix에서만 만나 볼 수 있는 특별한 기능으로 투명 배경을 사용하여 기존의 mp3 스트리밍 제한을 우회함으로써 모든 기기의 화면에서 바로 나타나는 애니메이션 이미지를 생성합니다. 디자이너들은 이런 독특한 기술을 사용하여 밋밋할 수 있는 웹사이트를 보완하여 개성 있는 웹사이트로 만들 수 있습니다. 게다가 사용자들은 모든 브라우저 또는 기기에서 이러한 고해상도 마이크로 애니메이션을 시청할 수 있습니다.

팁: Wix는 아티스트, 디자이너, 글로벌 사용자들과 협업하여 Wix에서만 만나 볼 수 있는 투명 배경 동영상 컬렉션을 제작했습니다. 내 마음에 드는 동영상을 찾을 수 없나요? 색상, 기울기, 크기 및 애니메이션을 원하는 대로 바꿀 수 있는 Wix만의 독특한 도구를 사용하여 나만의 동적인 디자인을 업로드하고 사용자 지정할 수 있습니다.

동영상 상자

Wix 동영상 상자는 기존의 동영상 플레이어와는 다릅니다. 사용자는 장식적인 웹 디자인 도구를 통해 독특한 효과를 활용함으로써 기존의 형식을 뛰어넘는 멋진 동영상을 내 사이트에 적용할 수 있습니다.

오버레이 효과에서부터 사용자 지정 버튼 및 동작을 구현할 수 있고, 심지어 그림자 또는 테두리를 추가하거나 동영상 마스크 기능을 통해 동영상을 기본 직사각형이 아닌 원하는 형태로 자를 수도 있습니다.

동영상 마스크

또한, 동영상 마스크를 적용하여 동영상을 독특한 모양으로 잘라서 인상적인 시각적 효과를 만들 수도 있습니다. 수천 개의 도형과 벡터 아트 중에서 선택하거나 내가 원하는 도형을 SVG 파일로 업로드할 수도 있습니다.

벡터 아트

SVG(가변 벡터 그래픽)라고도 알려진 벡터 파일은 수학 공식을 사용하여 만들어진 일러스트레이션을 나타냅니다. 이러한 가단성 파일은 형태, 크기, 색상을 자유자재로 조정할 수 있습니다. 이렇듯 정교한 그래픽의 유비쿼터스 인터넷 프레즌스를 당연하게 여길 수도 있지만 벡터 파일이 생기면서 이 변화만으로 웹디자인의 판도가 뒤바뀌었다는 사실을 알면 놀라실 것입니다.

팁: Wix의 WOW팀만의 독특한 벡터 아트 컬렉션에는 중요한 사회적 이벤트, 휴일, 계절 트렌드, 특별한 상황(우크라이나를 지지하는 최신 컬렉션 등)을 표현하는 수천 개의 맞춤형 SVG 일러스트레이션 및 아이콘이 포함되어 있습니다. 벡터 아트는 픽셀화하지 않고 크기를 자유자재로 조정할 수 있어 품질을 중요시하는 오늘날의 디자이너들에게 필수 요소입니다.

또한, Wix 에디터에 나만의 SVG 파일을 업로드하고 원하는 대로 수정할 수도 있습니다. 색상, 투명도, 크기, 형태, 애니메이션을 자유자재로 조정하는 것 외에도 특수 효과를 적용하기 위해 이미지를 뒤집기도 하고 기울기를 조정할 수도 있습니다.

텍스트 파일인 SVG는 특히 악의적인 보안 공격에 취약한데요. 하지만 Wix의 위생 엔진 덕분에 웹사이트 보안에 문제가 생길까 봐 걱정할 것 없이 마음 편하게 벡터 아트를 업로드할 수 있습니다.

배경

이미지를 구성할 때는 웹사이트 배경을 선택하여 방문자가 웹사이트에 도달하자 마자 사이트를 스크롤할 때의 분위기를 설정할 수 있습니다.

단색이나 패턴과 같은 기본 배경은 사이트 콘텐츠의 강력한 기반이 될 수 있습니다. 보다 표현력 있는 배경을 원하는 경우에는 다음과 같은 인상적인 옵션을 고려할 수 있습니다.

이미지 배경

내 사이트의 시각적인 분위기를 강화시켜 줄 고해상도 그래픽 또는 사진을 배경으로 사용할 수 있습니다. 하지만 배경을 꼭 이미지 하나로 제한할 필요는 없습니다. 예를 들어, 스트립을 추가하여 이미지를 분할하거나, 여러 개의 이미지를 활용할 수도 있습니다. 이미지 레이어 및 필터와 같이 쉽게 적용할 수 있는 모던한 효과를 더하여 훨씬 더 흥미로운 분위기의 이미지 배경을 만들 수도 있습니다.

팁: Wix의 13가지 스크롤 효과와 결합하면 웹사이트 배경의 스크롤 속도를 늦추어 스크롤을 할 때 3D 효과가 나타나게 하는 기술인 패럴랙스 스크롤과 같이 이미지를 훨씬 더 매력적으로 선보일 수 있습니다. 혹은 방문자가 사이트 콘텐츠를 탐색할 때 배경 이미지가 항상 같은 위치에 있는 것처럼 보이게 하는 정지 스크롤을 활용하는 것도 좋습니다.

The Baked Product의 웹사이트 예시

동영상 배경

이때까지 우리는 최근에 동영상이 청중들에게 어떤 영향을 미치는지에 대해 다루었습니다. 그 영향이 크다는 것이 입증된 만큼 많은 웹사이트 디자이너가 사용자 참여를 유도하기 위해 정지 이미지보다 동영상 배경을 선호하는 것은 놀라운 일도 아닙니다.

팁: Wix 에디터에는 세 가지 동영상 오버레이 옵션이 있어 배경에 깊이감을 표현할 수 있습니다.

그라데이션 배경

웹사이트 그라데이션은 하나의 중심 색상 지점에서 시작하여 다른 색으로 점차 혼합되며 전환되는 효과를 발합니다. 2022년의 인기 웹디자인 트렌드인 그라데이션 효과는 모던한 분위기를 자아내며 디자인에 깊이를 더합니다.

팁: 그라데이션은 복잡한 디자인임에도 불구하고 Wix는 이를 구현해냈습니다. 방사형 및 선형 그라데이션에서부터 최신 트렌드인 플루이드 그라데이션에 이르기까지 직접 사용자 지정 코딩 없이 Wix 에디터에서 그라데이션 배경을 바로 적용할 수 있습니다.

아래의 이미지에서 볼 수 있듯이 그라데이션은 사이트 배경에 있는 이미지와 결합할 수도 있습니다.

전문가의 웹사이트 이미지 디자인 팁

WOW 팀의 크리에이티브 프로덕트 매니저인 Adi Huri와 함께 웹사이트 이미지 모범 사례를 살펴봤는데요. Wix 사용자의 웹사이트들 중에서 시각적인 영감을 받을 수 있는 최고의 웹사이트 몇 군데를 엄선해보았습니다.

웹사이트 이미지 팁 #1: 이미지 도구를 많이 사용해보며 익숙해진다

최근의 기본 도구 모음을 사용하면 복잡한 코딩을 하거나 디자인 프로그램을 사용해야만 구현할 수 있었던 시각 효과를 쉽게 적용할 수 있습니다.

Adi는 이렇게 말합니다. “Wix는 이러한 시각 도구를 만들어 사용자의 삶을 보다 간편하게 만들고 웹사이트가 돋보일 수 있게 합니다. 우리는 항상 성능을 염두에 둡니다.” “이러한 도구들은 단순히 입문자들만을 위한 것이 아니라 고품질의 비주얼을 창조하는 데 소비되는 시간과 돈을 절약하고자 하는 전문가들에게도 유용합니다.”

Adi는 또한 이렇게 덧붙입니다. “예를 들어, 동영상 마스크와 같이 사용자의 동영상을 원하는 모양으로 잘라내고, 필터나 오버레이를 적용하게 해주는 도구는 한때 전문가 및 외부 소프트웨어를 필요로 했던 것들입니다. 하지만 지금은 누구든 몇 초 안에 이러한 효과를 적용할 수 있습니다.”

Shine Blue Ivy의 미래지향적인 Wix 웹사이트는 동영상 마스크, 필터 및 대화형 스크롤 효과를 적용하여 방문객들에게 응집력 있고 매력적인 경험을 선사합니다.

웹사이트 이미지 팁 #2: 웹사이트에 파비콘을 추가한다

웹사이트 이미지는 디자인을 향상시키며 브랜딩 노력을 강화 시켜 방문자가 유기적이라고 느낄 수 있어야 합니다. 벡터 아트, 사진 또는 배경을 선택할 때, 브랜드 자산과 일관된 미학을 형성하는 스타일 만들기를 목표로 하는 것이 좋습니다. 가장 중요한 것은 사이트의 이미지에 로고를 포함시켜 방문자들에게 노출시키는 것입니다.

이를 염두에 두고 웹사이트에서 파비콘이라는 작은 요소를 잘 활용해 보세요. 이 작은 아이콘은 웹사이트 브라우저 상단의 탭과 북마크 바, 방문 기록, 검색 결과 페이지에 표시됩니다.

“파비콘은 웹사이트 내비게이션에서 중요한 역할을 합니다.”라고 Adi는 말합니다. “약 100개의 탭이 열려 있을 때, 웹사이트에 파비콘이 없다면 한 사이트에서 다른 사이트로 다시 이동하려 할 때 다시 찾을 수가 없을 것입니다.”

OK Drugs의 온라인 CBD 쇼핑몰은 색상 배색, 활자 디자인에서부터 파비콘은 물론 제품 사진에 이르기까지 응집력 있는 존재감을 나타냅니다.

웹사이트 이미지 팁 #3: SNS 공유 이미지를 활용한다

Huri는 웹사이트 소유주가 종종 SNS 공유 이미지 또는 Facebook 및 Whatsapp과 같은 앱에서 URL을 공유할 때 표시되는 이미지를 간과한다고 강조합니다. 공유 웹페이지에 이미지가 포함되어 있지 않더라도 SNS 공유 이미지는 잠재고객에게 사이트를 시각적으로 미리 볼 수 있도록 해주는 좋은 기회를 제공할 수 있습니다.

각 웹사이트 페이지에 대해 그 주제를 반영하는 SNS 공유 이미지를 선정하세요. 모든 플랫폼에는 SNS 공유 이미지, 제목 및 설명에 대한 고유한 기준을 가지고 있으므로 게시를 누르기 전에 미리 확인하세요.

웹사이트 이미지 팁 #4: 품질에 주의를 기울인다

우리는 픽셀화, 블러 효과 및 불균형 효과가 넘실거리던 과거를 지나왔습니다 (물론 향수를 불러일으키는 Y2K 디자인 트렌드를 지향한다면 얘기가 다르겠지만요). 하지만 그렇다고 해서 선명한 시각 요소들로 인해 로딩 속도가 저하되어서는 안 됩니다. 다음과 같은 경험에서 얻은 방법으로 두 마리 토끼를 모두 잡을 수 있습니다.

파일 형식

온라인에서 사용할 수 있는 수많은 유형의 파일을 통해 일러스트, 사진, 동영상 등에 가장 적합한 파일 형식으로 업로드하세요.

고해상도 미디어 활용

디자인에 적합한 관련 이미지를 선택하는 것 외에도 파일이 고해상도인지 먼저 확인해 보세요.

Adi는 이 방법에 대해 다음과 같이 설명합니다. “Wix는 성능이 얼마나 중요한지 잘 알고 있으며, 고급 기능을 제공하는 도구를 만들고 백엔드에서 모든 작업을 수행하도록 하여 웹에 최적화되도록 했습니다.” “저희는 항상 성능을 염두에 두고 있으므로 고해상도 미디어를 걱정 없이 사용하실 수 있도록 하는 데 집중했습니다. 따라서 품질이 저하되지 않고 정확한 크기로 화면에 표시되도록 최적화할 것입니다.”

웹사이트 이미지 팁 #5: 접근성이 뛰어난 이미지를 만든다

웹 접근성은 모두가 능력에 상관없이 웹사이트와 상호작용할 수 있는 기회를 제공합니다.

사이트 이미지에 대체 텍스트를 포함하면 화면 판독기를 사용해야 하는 방문자의 경험을 향상시킬 수 있습니다. HTML 텍스트는 간단한 문장이나 단어 몇 가지로 사이트 이미지의 내용과 기능을 정확하게 설명합니다. 대체 텍스트는 가능한 한 간결하게 작성하세요. 대체 텍스트가 없으면 화면 판독기는 페이지에 이미지가 있다는 것만 사용자에게 알릴 수 있습니다.

“가끔은 충분하게 설명하지 못하는 대체 텍스트를 발견할 때도 있을 것입니다. 하지만 이미지는 방문자들을 위한 기술적인 설명만을 위한 것이 아니며, 사이트의 분위기를 설정하는 데 중요한 역할을 합니다.” Adi는 이렇게 설명합니다. “여러분이 시각적으로 전달하고자 하는 것을 앞이 잘 보이지 않는 사람들이 파악할 수 있도록 하기 위해 더 많은 정보를 통해 정교하게 만들어야 합니다.”

설명 대체 텍스트를 추가하면 사이트 성능의 다른 측면에도 영향을 주는데요. 바로 SEO입니다. 검색 엔진은 대체 텍스트를 활용하여 웹사이트의 사진과 그래픽을 해독하므로 유기적 검색 성능을 향상시키는 데 중요한 역할을 합니다.

By 조윤정

SEO & 블로그 전문가