Gen-Z틱한 디자인, Gen-Z스러운 UI
Ebay의 Redesign에서 알아보는 젠지스러움
여러분은 'Gen-Z스러운 디자인'하면 어떤 이미지가 떠오르나요? 누군가 그렇게 만들어달라 요청한다면, 어떻게 디자인하실 건가요? 주변 디자이너들에게 물어보니, 그런 요청을 받으면 "[트렌디하고 힙한, 사용성은 조금 뒷전으로 (격하게 말하면 내다 버리는) 미루는, 개성적이며 아트적인 디자인]이 나오겠군"이라 생각한다는 답변을 받았어요.
젠지 디자인 말씀하시는 거죠?볼드한 산세리프 로고, 스타일리시한 레터링, 눈이 시릴 정도로 경쾌한 칼라 팔레트, 3D와 2D 아이콘, 화려하고 실험적인 인터랙션.. 이런 요소들을 떠올리는 분들이 꽤 계실 것 같은데요, 저 또한 마찬가지였지만 이번 eBay(이베이)의 리다지인 프로젝트를 보고 생각이 조금 바뀌었습니다.
개인적으로 24년도에 손에 꼽을 만큼 참 마음에 들었던 디자인 사례로, eBay가 Z세대와 밀레니얼을 겨냥해 선보인 새로운 디자인 시스템: eBay Evo(이베이 이보)를 살펴보며 젠지스러운 디자인이 무엇인지 분석하고 재정의해보고자 해요.
eBay Evo:
Gen-Z를 겨냥한 휴머니즘 디자인 시스템
Ebay’s clean new interface is designed to court Gen Z and millennials A facelift to Ebay’s UX inspired a new brand that’s less cluttered and more human.
디자인 요소를 뜯어보기 앞서, eBay Evo 프로젝트를 간략하게 소개할게요. 약 30년 전에 설립된 이커머스 서비스 eBay는 최신 트렌드와 거리가 멀어 보이던 기업이었어요. 하지만 Z세대가 온라인에 진입하기 시작하면서, eBay는 젠지와 밀레니얼 사용자를 유치하기 위해 핵심 UX를 개선했고, 브랜드 전반의 리디자인으로 확대되었습니다.
이들을 위해 새롭게 구축된 디자인 시스템은 완전히 '힙'하지도, 어렵거나 복잡하지도 않습니다. 현대 웹 디자인에서 모범 사례로 간주될법한 레이아웃이나 정보 설계의 방식을 따르고, 중산층 미국 소비자들에게도 차갑지 않아 보이는 균형감까지 유지하죠. eBay의 디자인 총괄 이사인 타일러 무어(Tyler Moore)는 이렇게 말했습니다.
“우리는 이를 인간 중심 디자인(humanist design)으로 생각합니다. 날카로운 모서리를 제거하고, 부드럽고 따뜻한 감성을 더하며, 여백을 활용하고, 계층 구조(hierarchy)에 적절한 자리를 부여하는 것이 핵심입니다.”
eBay Evo에서 발견한 Z-디자인 언어
❶ 부드러운 곡선 모서리
이베이는 기존의 날카로운 모서리를 모두 부드럽게 다듬는, 'R값'을 적극 적용했어요. 이러한 디자인은 사용자에게 친근함, 편안함, 가벼움, 그리고 인간적인 감각을 전달하는데요, 그 이유와 이 요소가 왜 Gen-Z스러운 인상을 주지 함께 알아봅시다.
R값 모서리 효과:
● 심리적 안정감: 각진 모서리는 본능적으로 경계와 긴장감을 유발하지만, 둥근 모서리는 시각적 부드러움으로 인해 더 안전하고 안정된 느낌을 줍니다.
● 유기적이고 자연스러운 흐름: 곡선은 자연적인 형태로, 화면을 보다 부드럽고 유기적으로 연결해 사용자의 시선을 부드럽게 유도합니다.
● 정돈되고 쾌적한 환경: 둥근 모서리는 직각에 비해 더 많은 여백을 포함하는 듯한 시각적 착시를 제공해요. 따라서 컴포넌트들이 서로 뭉쳐 보이는 것이 아니라 각각이 더 독립적으로 느껴지게 하며, 결과적으로 더 정돈되고 쾌적해 보이는 화면 경험을 느끼게 합니다.
● 시각적 무게감 감소: 직각 모서리는 강하고 뚜렷한 경계를 만들어 무거운 느낌을 줄 수 있지만, 곡선은 이러한 무게감을 한층 덜어내기 때문에 보다 가벼운 인상을 제공해요.
그렇다면 왜 Gen-Z스러운 요소일까?
● 어리고 친근한 이미지 연상: 곡선은 일반적으로 아기, 장난감, 만화와 같이 친숙하고 보호적인 이미지를 연상시킵니다. 이러한 연관성은 본능적으로 둥근 디자인을 더 친근하고 다정한, 어린 인상으로 느끼게 만들죠.
● 디지털 시대의 트렌드: 디지털 제품들은 점차 인간적이고 유기적인 요소를 추구하고 있습니다. 따라서 딱딱하고 차가운 직선 대신, 부드러운 곡선을 통해 인간 중심적 디자인과 사용자 경험을 지향하고 있어요.
● 유연하고 포용적인 세대: Gen-Z는 다양성과 포용성을 중요시하는 세대적 특징을 가지고 있습니다. 따라서 곡선은 날카롭게 떨어지는 '경계'가 아니라, [유연하게 열려있는] Gen-Z 세대 특징과 이어져요.
❷ 목적이 있는 시각적 단순성
eBay 상품페이지 AS IS - TO BE상품 상세페이지를 비교해 볼까요. 각 항목에서 텍스트 몇 줄 정도 줄인 작은 개선처럼 보이지만, 전체적인 이미지를 비교해 보면 큰 차이를 느낄 수 있습니다. 특히, 특정 제품이 몇 개나 판매되었는지 알려주던 긴박한 경고성 빨간 텍스트가 사라졌어요.
찾아볼 수 있는 단순화 작업 예시:
불필요한 정보 제거, 정보 간 하이어라키 재조정, 적절한 아이콘으로 대체, 컬러 덜어내기(포인트 사용)
단순화 효과:
● 직관성 및 집중도 향상: 우선순위에 따라 정보를 의도적으로 강조/약화시킴으로써 사용자에게 가장 중요한 정보가 무엇인지 직관적으로 인식시켜요. 적절한 계층화 작업은 정보를 명료하게 요약하고 전달하죠.
● 피로감 감소: 기존 과잉되고 분산된 정보를 '모두' 읽을 필요가 없기 때문에, 사용자가 정보를 이해하고 처리하는데 들이는 노력, 과한 UI에 대한 시각적 피로도를 낮춥니다.
● 통일성 강화: 비슷한 종류의 정보가 군집을 이루고, 아이콘이나 디자인 요소가 일관되게 적용되면 '시스템적으로 잘 정돈되어 있다'는 인상을 줘요.
그렇다면 왜 Gen-Z스러운 요소일까?
● 정보 과부하 시대에서 추구하는 단순함: 물밀듯 밀려오는 정보의 홍수 속에서 성장한 Z세대는 단순함을 중시합니다. 다만 이들의 단순성에 대한 요구는 단순히 미학적인 미니멀리즘을 지향하는 게 아니에요. 기능성을 높이되 사용자 경험을 간소화하는(불필요한 경험은 과감히 덜어내는) [목적 있는 단순성]을 추구하죠. 따라서 직관적인 네비게이션과 깔끔한 인터페이스는 이들의 관심을 끌고 유지하는 데 필수적입니다.
❸ 적절한 여백 사용
뿐만 아니라 전과 비교했을 때 전체적으로 여백이 많아졌어요. 새롭게 정비된 그리드 시스템에 따라 적절한 위치에 적절한 여백을 씀으로써, 중요한 정보의 주목도를 올리고 시원한 인상을 주죠.
여백의 효과:
● 인지 부담 감소: 여백은 시선이 머물러야 하는 지점을 명확히 안내합니다. 텍스트부터 이미지까지 여러 요소들이 혼합되는 콘텐츠 영역과 시각적으로 명확히 구분되기 때문에 사용자의 시선을 자연스럽게 콘텐츠에 집중시키죠. 이로써 사용자가 한 번에 처리해야 하는 정보량이 줄어듭니다.
● 시선이 쉬는 공간: 빽빽하게 차있는 화면은 답답함을 유발하지만, 충분한 여백을 사용하면 전체적인 레이아웃이 한결 시원해 보이면서 시각적인 피로도를 낮춥니다. 여백은 '시선을 쉬게 하는 공간'으로써, 사용자가 콘텐츠를 더 오래, 깊이 있게 살필 수 있도록 도와요.
그렇다면 왜 Gen-Z스러운 요소일까?
● 익숙한 모바일 환경 반영: Z세대의 모바일 환경이 지향하는 [간결한 경험]과 이어집니다. 여백이 많아지면 작은 스크린이어도 터치가 쉬워지고, 필요한 정보를 한눈에 파악하기 용이하기 때문에 심미성뿐만 아니라 실용성까지 중시하는 Z세대에게 익숙한 경험이에요.
● 미니멀 디자인 트렌드: 여백을 활용하는 미니멀하고 공간감이 강조된 레이아웃은 이미 여러 앱과 SNS을 통해 익숙해진 [현대적 감성]이기도 합니다. 이는 자연스럽게 Z세대의 일상 속에 스며들어 있는 디자인 언어이기 때문에 젊은 감각을 전달하죠.
❹ 적극적인 이미지 활용
❷, ❸번에서 소개한 상품 목록 페이지에서도 확인할 수 있다시피, 큰 히어로 이미지를 사용합니다. (더 정확히 말하자면 '그렇게 쓴 것처럼 보이게' 디자인을 수정했어요. 기존 오른쪽에 있던 사이드바 링크들을 페이지 하단으로 옮김으로써 '비율'을 조정, 사진이 더 눈에 띌 수 있게 바꿨죠.) 어찌 됐든 결과적으로 이미지 위주의 UI라 느껴지며, 브랜드 무드가 잘 느껴지는 촬영 이미지도 eBay 프로모션 사이트에서 쉽게 발견할 수 있어요.
이미지 효과:
● 시각적 임팩트: 인터페이스 전반에 이미지를 '적재적소'로 배치하면 시각적 임팩트를 극대화함으로써 사용자의 관심을 즉각적으로 유도하는 효과를 가집니다. *단, 적재적소가 포인트예요. 닥치는 대로 사용했다가는 인터페이스를 오히려 부산하게 만들고, 어떤 곳에 시선을 두어야 할지 되려 길을 잃게 만드니까요.
● 맥락 이해: 이미지는 텍스트가 길어질 필요 없이 상황, 분위기, 브랜드가 전달하고자 하는 메시지를 직관적으로 이해하게 만들어요.
● 브랜드 개성 강화: 제품 사진, 일러스트, 아이콘 등 일관된 무드의 이미지들을 잘 활용하면, 브랜드만의 개성과 스토리를 자연스럽게 전달해요.
그렇다면 왜 Gen-Z스러운 요소일까?
● 비주얼적 커뮤니케이션: 인스타그램, 틱톡 등 이미지가 중심이 되는 SNS를 주된 커뮤니케이션 채널로 사용하고 이런 서비스에 익숙한 세대이기 때문에, 적극적인 이미지 활용은 자연스럽게 젊고 트렌디한 인상을 주고 Z세대의 공감을 얻을 수 있어요. 텍스트 대신 이모지를 적극 활용하는 특징도 예가 될 수 있겠네요.
● 강렬한 첫인상: Gen-Z는 기다려주지 않아요. 텍스트를 하나하나, 느릿느릿 읽는 대신 한눈에 빨리 [각인]시켜주길 원하죠. 그렇기에 보통 이들을 타겟으로 한 브랜드나 서비스는 이미지를 적극적으로 활용함으로써 정보를 단번에 전달하고 강렬한 인상을 남깁니다.
❺ 칼라풀한 팔레트
마지막으로는 브랜드 팔레트의 변화입니다. 이베이 로고에 구성된 칼라: 빨강, 노랑, 파랑, 초록색에서 확장된 구성으로, 허니 머스터드나 라일락과 같은 새로운 색상을 추가했어요. 전형적이었던 브랜드 칼라의 스펙트럼을 넓힘으로써, 새로운 접근과 폭넓은 시도라는 비전이 느껴지네요.
다채로운 칼라 효과:
● 다양성과 개방성: 여러 색상을 적극적으로 활용하면, 더 폭넓고 열린 사고방식을 갖고 있다는 인상을 줘요.
● 즐거운 에너지: 생동감 있는 컬러 팔레트 활기찬 에너지를 전달함으로써, 사용자에게 유연하고 즐거운 감각을 느끼게 해요.
● 브랜드 스토리의 확장: 각각의 컬러에 특별한 가치를 부여함으로써 더 확장된 비전을 제안할 수 있어요. 예를 들어 새롭게 추가된 라일락 칼라는 청량함과 부드러움을 연상시키기 때문에, 앞으로의 이베이 브랜드가 지향할 새로운 가치라고 볼 수 있겠죠?
그렇다면 왜 Gen-Z스러운 요소일까?
● 발랄한 어린이, 강한 에너지: 밝고 선명한 색상은 자연스럽게 더 유연하고, 생동감 있는 [어린이, 젊은이]를 연상시켜요.
● 개성과 자유: 컬러가 많아질수록 다채로운 디자인이 가능한데요, 이는 Z세대가 중요시하는 [개성]과 이어지면서 브랜드만의 아이덴티티와 자유로운 시도들을 돋보이게 해요.
eBay Evo's Humanism design어떤가요? 타일러 무어 인터뷰에서도 알 수 있다시피 eBay가 해석한 Gen-Z스러운 디자인은 "인간적인" 경험인 것 같아요. 정돈됐지만 틀에 짜인 듯 규격화되지 않고, 유기적으로 연결되는 부드러운 디자인. 정말 인간처럼, 다양하게 변화할 수 있는 가능성이 느껴지는 디자인이요.
*이 외의 Gen-Z 디자인 요소
● 반응형 UX: 다양한 디지털 디바이스 화면 크기와 방향에 매끄럽게 적응하는 디자인
● 커스터마이징: 자신만의 취향과 관심사가 반영되는 디지털 경험 (단, 무지성 커스텀은 오히려 서비스를 어렵게 만듦!)
● 애니메이션과 인터랙티브 요소의 활용: 정적이지 않은, 생명력 있고 시각적으로 재미있는 경험 (단, 너무 생소하거나 과하면 안 됨!)
● 소셜 커뮤니케이션: 앱 내 메시징이나 소셜 공유 옵션 등, 서로 간 연결되고 소통하는 커뮤니티적 경험 (단, 이런 경험이 타당한 서비스여야 함!)
젠지 디자인이란 몰까?겉만 번지르르하고 사용성은 뒷전인 디자인은 젠지스럽지 않아요. 타당한 설계와 분명한 목적 위에 시각적인 강렬함 혹은 발랄한 에너지 같은 것들이 몇 스푼 올라가는 거죠. 비주얼만이 강조된 프로젝트는 특히 Behance에서 많이 보이는데요. 물론 실제 양산을 고려한 프로덕트가 아니기 때문에 더욱 컨셉추얼한 면이 있겠지만, 그렇다고 표면적인 '무드'에만 집중된 디자인으로 보이는 건 아쉽잖아요.
그러니 젠지 관련 프로젝트를 기획 중인 디자이너라면 [브랜딩은 개성있게, 다만 운영 서비스는 깔끔하고 편리하게-를 베이스, 아이덴티티가 잘 드러나는 컨셉을 포인트로 활용-] 해봅시다. 통통 튀는 새로운 컨셉과 재밌는 기능 아래, 실상은 아주 예민 깐깐 귀차니즘 Z세대를 고려한 사용성 설계까지. 두 마리 토끼를 모두 잡는 밀도 높은 결과물을 갖게 되실 거예요.
* 이렇게 정리해 보니 Z세대보다 어린 알파(Alpha)세대, AI와 함께 태어난 베타(Beta)세대스러운 디자인은 어떤 모습일지 궁금해지네요. 세상이 참 빠르게 바뀌는군여. 훌찌럭.
