많은 고객이 웹사이트를 통해 브랜드와 처음 만납니다. 웹사이트의 중요성은 모두 인식하고 있지만, 구체적으로 어떤 요소가 브랜드 사이트에 임팩트를 주는지는 쉽게 떠올리기 어렵습니다. 브랜드 이미지와 컬러, 레이아웃, 카테고리 등 웹사이트의 첫인상을 결정짓는 요소가 다양하기 때문입니다.
잘 만든 웹사이트는 브랜드 아이덴티티를 명확히 보여줄 뿐 아니라, 고객의 인식을 변화시키기도 합니다. BAT는 브랜드 아이덴티티에 대한 깊은 이해를 바탕으로 웹사이트를 통해 브랜드에 임팩트를 더하는 경험을 쌓아왔습니다. 또한, 내부 개발팀 외에도 다양한 파트너십을 통해 기능의 한계를 뛰어넘는 웹사이트를 개발하고 있습니다.
“BAT가 만드는 웹사이트는 무엇이 다를까요?”
이번 비에이티 프로젝트에서는 BAT의 실제 사례를 통해 브랜드에 임팩트를 주는 웹사이트 개발의 핵심 포인트를 살펴봅니다.
Editor 유나연
Case 01 THEORI
시각 언어로 표현하는 압도적인 보안 기술
티오리는 해킹, 피싱 등 사이버 보안 위협으로부터 사용자를 보호하는 B2B 사이버 시큐리티 스타트업입니다. 글로벌 인재들과 협력하여 다양한 제품을 개발하며, 사이버 보안 분야에서 혁신적인 발전을 이끌어내고 있는 티오리는 짧은 시간 안에 눈부신 성장을 이루었습니다.
실력 있는 화이트햇 해커들과 함께 전문성을 쌓아가던 티오리는 이제 브랜드의 영향력을 확대할 새로운 기회를 모색해야 하는 단계에 이르렀습니다. 이에 BAT는 티오리의 비전과 잠재력을 보다 명확하게 드러내기 위해, 브랜드 전략과 아이덴티티 시스템을 새롭게 구축했습니다.
티오리는 사이버 시큐리티 업계의 선두주자인 만큼, 사용자가 웹사이트의 다양한 접점에서 브랜드의 핵심 가치인 신뢰와 혁신을 직관적으로 느끼게 하는 것이 중요했습니다.
BAT는 사용자가 처음 티오리를 접하는 순간부터 그 정체성을 명확히 인식할 수 있도록, 기존 보안 시장에서 흔히 사용되던 디자인과는 확연히 차별화된 독자적인 브랜드 이미지를 구축했습니다. 주로 레드과 블루를 중심으로 위험과 안전을 나타내던 기존의 색상 구성에서 벗어나, BAT는 단단하고 안정감 있는 컬러 그래픽을 통해 티오리만의 투명하고 안전한 보안 문화를 강조했습니다.
티오리만의 완벽함과 정확성을 입체감 있게 전달하기 위해 3D 재질의 로고 그래픽 영상을 랜딩 페이지에 배치했습니다. 또한, 단단한 형태감의 지오메트릭 서체 기반의 심볼과 워드마크를 통해 ‘사이버 보안의 처음과 끝을 책임지겠다’는 티오리의 확고한 의지를 표현했습니다. 이는 기존 보안 시장의 디자인 언어와 차별화된 티오리만의 비주얼 전략일 뿐만 아니라, 다양한 매체에서 활용할 수 있는 확장성도 갖추고 있죠.
해당 프로젝트를 통해 BI 개발을 완료한 이후에도 BAT는 지속적으로 티오리 웹사이트 리뉴얼을 진행했습니다. 브랜드를 처음 접하는 고객들이 티오리의 서비스와 전문성을 쉽게 이해할 수 있도록 혼재되어 있던 웹 카테고리를 재정립하고, 새롭게 정립된 그래픽 모티프를 활용해 티오리만의 아이덴티티를 웹사이트 전반에 일관성 있게 녹여냈습니다.
이처럼 티오리는 새롭게 개발된 웹사이트를 기반으로 브랜드 아이덴티티를 더욱 강화하였고, 명확해진 브랜드 메시지를 통해 글로벌 사이버 보안 시장에서 더욱 확고한 입지를 다지게 되었습니다.
Case 02 Wrtn
AI의 문턱을 낮춘 명쾌한 리브랜딩
뤼튼은 200만 명 이상의 사용자를 보유한 국내 최대 AI 플랫폼으로, 생성 AI 기술이 전 세계적으로 대중들의 삶에 스며들고 있는 오늘날 AGI의 일상화를 이끄는 슈퍼앱으로서의 정체성 강화가 필요한 단계였습니다. BAT는 아직 생성 AI를 사용하지 않는 대중이 뤼튼에 대한 인지도와 호감을 높일 수 있도록 리브랜딩 프로젝트를 진행했습니다.
BAT는 ‘창의성을 자유롭게 발휘하는 시대를 이끌어내겠다’는 뤼튼의 비전을 상징하는 모티프로 원을 선택했습니다. 원은 가장 기본적이면서도 다양한 의미를 담을 수 있는 형태로, 인간과 AGI가 함께 만들어갈 무한한 가능성을 상징하죠. 뤼튼만의 상징성을 입체적으로 보여주기 위해 2차원에서 3차원적 공간으로 확장되는 원의 움직임과 형태의 변화를 시각화 하였고, “The Open Space”개념을 통해 브랜드의 정체성을 더욱 강조했습니다.
뤼튼의 기능들을 소개하기에 앞서, AI에 대한 대중들의 심리적 허들을 낮추는 것 역시 중요한 과제였습니다. 이를 위해 ‘처음 만나는 쉽고 간편한 Personal Agent’라는 의미를 담아, 유연하게 확장 가능한 슬로건 ‘Your First ____’를 정립했습니다. ‘____’에 Agent가 수행할 다양한 역할들을 대입하는 형태로, 뤼튼이 삶의 다양한 순간에서 편리함을 제공한다는 메시지를 전달했죠.
뤼튼은 BAT와의 성공적인 리브랜딩 이후 국내외 투자 유치, 기술적 역량 강화, 서비스 확장을 통해 AI 메가 플랫폼으로서 산업의 선두 주자로 자리매김하고 있습니다. AI 기술에 대한 사용자의 심리적 문턱을 낮춘 뤼튼은, 슬로건 ‘Your First AI Agent’와 웹사이트를 기반으로 모든 사용자에게 평등한 AI 생태계를 제공하게 되었습니다.
Case 03 ONERX
분산된 브랜드 이미지를 하나로 통합하는
웹사이트 리브랜딩
원알엑스는 유럽, 아시아, 중동 등 글로벌 네트워크를 무대로 브랜드 경험 솔루션을 제시하는 BX 에이전시입니다. 글로벌 지점별로 브랜드가 운영됨에 따라 원알엑스의 일관된 브랜드 이미지를 구축하기 어려운 상황이었는데요. 분산된 브랜드 정체성을 하나로 집결시키기 위해, BAT와 통합 리브랜딩을 진행하며 글로벌 웹사이트를 개편하였습니다.
지난 17년간 공간 경험 설계 역량을 바탕으로 서비스를 확장해온 원알엑스는 BAT와 협력하여 브랜드 포지션을 새롭게 설정했습니다. BAT는 원알엑스가 공간 경험을 통해 브랜드를 활성화하는 글로벌 BX 에이전시(Brand Regenerating BX Agency)로 자리 잡을 수 있도록, ‘공간을 매개로 브랜드 가치의 건강한 성장을 지원한다’는 브랜드의 최상위 미션을 구축했습니다.
원알엑스에게 One은 단순한 1 이상의 의미를 가지며, ‘하나 됨’이라는 개념으로부터 브랜드 이미지를 확장성 있게 펼쳐 나갑니다. Ownership(브랜드 경험 전문가)/One Team (고객과 하나된 팀)/One Brand Centric (브랜드다운 공간 경험) 3단계로 확장되는 브랜드 네임은 이후 모든 비주얼과 버벌 개발의 기초가 됩니다.
BAT는 새롭게 개발한 로고와 컬러, 타이포그래피 시스템을 조화롭게 적용해 원알엑스만의 개성을 드러내고, 포트폴리오를 임팩트 있게 구성하는 것을 목표로 했습니다. 퍼플 컬러는 브랜드의 열망과 비전을 현실로 이끌어내는 원알엑스의 미션을 상징하고, 오렌지 컬러는 브랜드의 잠재력을 개방하는 원알엑스의 임팩트를 표현합니다.
BX 에이전시는 온드미디어를 통한 브랜드 스토리와 포트폴리오가 곧 브랜드 이미지로 직결되기 때문에, 브랜드의 가치를 자연스럽게 전하는 스토리텔링이 중요한 과제였습니다. BAT는 이를 위해 웹사이트에 인터랙션 요소를 적극적으로 적용해 원알엑스의 가치를 임팩트 있게 전했습니다. 랜딩페이지 첫 화면에 보이는 풀사이즈 로고가 스크롤 시 사이즈 다운되는 인터랙션을 통해, 보는 이를 원알엑스를 소개하는 여정으로 자연스럽게 소개했습니다. 또한 원알엑스만의 글로벌 네트워크를 효과적으로 드러내기 위해 스크롤 시 지구본이 회전하는 형태의 인터랙션도 구현했습니다.
원알엑스는 BAT와의 웹사이트 리뉴얼을 통해 한국 지사와 해외 지사로 분리 운영되던 웹사이트를 하나로 통합하며, ‘글로벌 브랜드 경험 에이전시’로서의 브랜드 정체성과 경쟁력을 한층 강화했습니다.
위 사례들로 알 수 있듯이, 웹사이트는 단순히 정보를 제공하는 기능을 넘어 브랜드의 정체성과 전문성을 강화하고 고객의 인식을 바꾸는 역할을 합니다. 웹사이트를 통해 티오리의 고객은 티오리만의 차별화된 전문성과 투명성을 실감하고, 뤼튼의 고객은 생성 AI에 대한 심리적 허들을 낮출 수 있습니다. 원알엑스의 고객은 브랜드 이미지가 지점별로 분산되어 있던 기존과 달리, 통합된 브랜드 메시지를 명확하게 파악할 수 있죠.
이처럼 브랜드 아이덴티티를 명확히 반영한 웹사이트는 브랜드의 경쟁력을 높이고 고객의 신뢰를 강화하는 등 다양한 임팩트를 만들어냅니다. 즉, 브랜드 맞춤 웹사이트 개발은 브랜드의 지속 가능한 성장을 위한 핵심 전략이라고 할 수 있습니다.
CREDITS
[THEORI]
Planning & Development: THEORI
Design: BAT
[Wrtn]
Planning: BAT
Development & Design: Manual Graphics
[ONERX]
Planning: ONERX
Development & Design: BAT