티맥스AI, ‘이렇게’ 달라졌어요
UX팀이 말하는 홈페이지 리뉴얼기
안녕하세요, 티맥스AI UX팀입니다.
12월 15일, 새롭게 단장한 티맥스AI 홈페이지가 드디어 오픈했습니다.
약 8개월간 홈페이지 리뉴얼 TF 팀원들이 함께 머리를 맞대어 만들어낸 결과물인데요, 열심히 달려온 만큼 여러 고민들과 협업 지점들에 대해 기록하고 이를 공유하고자 합니다.
왜 홈페이지 리뉴얼인가요?
홈페이지는 고객과 기업이 가장 처음 만나는 곳
기존 홈페이지의 경우 SaaS 제품 활성화를 위한 온라인 채널 구축이 주된 목적이었습니다. 하지만 기업이 성장하며 고객들에게 기술을 설명하고, 홍보 및 세일즈를 리드할 수 있는 창구가 필요하다고 판단되어 홈페이지 리뉴얼을 진행하게 되었습니다.
고객이 가장 처음 마주하는 기업의 얼굴인 홈페이지를 새롭게 바꾸며 UX팀에서는 기업의 브랜드 컨셉 정의부터 AI 기술 체험까지 총체적인 사용자 경험에 대해 많은 고민을 거듭했어요. 또한 FE 개발자분들과 AI 기술을 담당하시는 Vision 팀, 그리고 전략마케팅실까지 정말 다양한 이해관계자들과 커뮤니케이션하며 만들어 나간 의미 있는 프로젝트이기에 홈페이지 리뉴얼기를 작성하게 되었습니다.
기존 홈페이지의 문제점
선명한 룩앤필이 필요해
기존 사이트 개설 이후 추가적인 업데이트가 이루어진 적이 없어 정기적인 관리가 필요했고, 인공지능 기술을 다루는 회사로서 룩앤필 (Look and Feel)이 부족하다고 판단되었어요.
따라서 TF 구성원 모두가 공감할 수 있는 현재 홈페이지의 문제를 정의했습니다.
티맥스에이아이만의 브랜드 정체성 미확립
일관되지 않은 톤 앤 매너
영업 이익을 낼 수 있는 비즈니스 창구의 부재
사용성을 고려하지 않은 기술 체험 섹션
회사의 홍보 콘텐츠 부재 및 업데이트 불가
이러한 문제점을 토대로 티맥스AI의 브랜드 컨셉을 정립해 AI 기술의 체험부터 SuperApp으로의 연결까지 자연스럽고 일관된 사용자 경험을 줄 수 있는 홈페이지를 구축하자는 목표를 세우게 되었습니다.
그래서 이렇게 개선했어요
주요 개선 포인트들
1. 티맥스에이아이의 정체성 확립
1–1. 왜 정체성 확립이 필요한가
티맥스그룹은 Tmax Super App으로 새로운 IT 세상을 만들기 위해 노력하고 있습니다. 그중에서도 에이아이사는 AI 기술로 장벽을 낮추고 누구나 사용할 수 있도록 솔루션을 제공하는 전문 기업이에요. 따라서 AI 기술을 사용자들에게 시각적으로 설명할 수 있는 브랜드 정체성이 필요했습니다. 이러한 목표를 토대로 저희 UX팀은 AI사 홈페이지가 소통 채널의 역할로써, 고객이 기술을 쉽게 경험할 수 있도록 브랜딩 요소를 통합해 일관된 사용자 경험을 제공하자는 공통의 목표를 설정했습니다.
1–2. 브랜드 컬러 및 디자인 컨셉 구축
디자인 컨셉 구축을 위해 우선적으로 저희가 원하는 방향으로 유저가 브랜드를 인지할 수 있도록 자사 브랜드에 대한 정의부터 시작했습니다.
“Better AI, Better Tomorrow” : 미래지향적 / 신뢰감을 주는 / 효율적인 의 세 가지 키워드를 도출할 수 있었고, 브랜드 퍼스널리티 서베이를 통해 자연색상에서는 흔하지 않으며 인공적인 느낌을 주는 한색 계열의 보라색을 키 컬러(key color)로 선정하여 AI 기술을 표현했습니다.
AI 기술을 한눈에 확인할 수 있는 곳이 메인 페이지라고 생각했기 때문에 가장 많은 변화를 시도했어요. 하단 영역을 스크롤 할 때 배경 색상을 반전시켜 정적인 흐름에서 벗어나고자 했고, 보다 정교하고 체계적인 변주를 주기 위해 노력했습니다.
대표적으로 개체명 인식의 경우, 메인 페이지에서는 문장의 정보들을 라벨링 하는 기술을 포커싱 (focusing) 하는 형태를 시각화했어요. 또한 기술 상세페이지에서는 유저가 홈페이지에서 AI 기술에 대해 쉽게 이해할 수 있도록 기술의 추상적인 느낌을 시각화하여 나타냈습니다.
2.비즈니스 창구 확장
홈페이지 개선 작업을 시작하기에 앞서, 각 유관 부서의 요청도 들을 수 있었어요. 특히 홈페이지는 기업의 기술과 서비스를 소개하는 얼굴인만큼 마케팅팀, 영업팀에서 주시는 다양한 의견도 반영해야 했습니다.
따라서 비즈니스 창구를 다양하게 확대해 영업 기회를 넓히기 위해 크게 두가지를 개선했어요.
2-1. 지속적으로 운영되는 홈페이지
영업을 위해 가장 필요한 부분은 홈페이지를 지속적으로 교체해 정체된 느낌을 탈피하는 것이라고 생각했기에 오래된 정보로 작성되어 있던 정보를 현행화하고, 꾸준히 업데이트 할 수 있는 섹션들을 추가했습니다.
서비스 소개
기존 홈페이지에서는 AI 기술에 대해서만 소개했다면, 리뉴얼된 홈페이지에는 서비스도 함께 추가함으로써 티맥스에이아이의 기술뿐 아니라 서비스 영업 기회를 확대할 수 있도록 구성했습니다.
회사 소식
정보의 현행화를 통해 흩어져 있던 기업의 소식을 메인에 모아 기업이 어떤 방향으로 나아가고 있는지 빠르고 간편하게 확인할 수 있고, 지속적인 업데이트를 통해 정체된 홈페이지를 벗어나고자 했습니다.
2–2. 영업 창구 확대
영업을 위한 홈페이지의 기틀을 다진 후에는 외부와 소통할 수 있는 창구를 마련해야 한다고 생각했어요. 기존 홈페이지에서는 문의를 할 수 있는 창구가 부재했고, 정해진 양식이 없어 문의 전달이 산발적으로 이루어지고 있었습니다. 이러한 문제를 해결하고자 문의 양식을 정리하고 섹션을 명확히 구분해 누구나 쉽게 문의를 할 수 있도록 개선했어요.
2–3. 티맥스 그룹 & 인재 채용 바로 가기
GNB에 그룹사 바로 가기를 추가해 티맥스의 일원으로서 그룹의 비전에 대한 이해를 높이고, SuperApp을 통한 각 사의 연결성을 강조했습니다.
또한 인재 채용 링크를 연결시켜 잠재 지원자들이 채용 정보를 빠르게 접할 수 있도록 구성했어요.
3.사용성을 고려한 디자인
“누구나 쉽게 AI를 활용하는 세상”이라는 티맥스에이아이의 모티브에 맞추어 홈페이지 방문자들이 누구나 AI 기술을 체험할 수 있도록 기술 체험 섹션을 설계했어요.
대표적으로 가장 널리 알려진 기술인 음성인식 (STT) 체험의 경우, 샘플 음성을 통해 기술을 경험할 수 있을 뿐 아니라 직접 파일을 업로드하거나 실시간 녹음 기능을 통해 다양한 음성을 텍스트로 변환해 볼 수 있도록 구성했습니다.
이러한 과정에서 음성인식 (STT) 실시간 체험 과정에서 다양한 유저 플로우에 대한 고려가 필요했어요.
따라서 사용자가 직접 녹음을 정지한 경우 / 처음부터 사용자의 실시간 응답이 5초 이상 기록되지 않아 미응답으로 자동 종료되는 경우 / 사용자의 실시간 응답 도중 5초 이상 기록되지 않아 미응답으로 자동 종료되는 경우 의 세 가지 유즈 케이스(use case)로 나누어 대응했습니다.
또한 모바일 기기의 인터넷 접속 비율이 PC를 넘어서고 있다는 점을 고려해 모바일과 PC 모두에서 일관된 사용자 경험을 가져갈 수 있도록 나누어 디자인했어요.
이외에도 홈페이지를 둘러보며 Better AI, Better Tomorrow 라는 슬로건에 맞추어 티맥스AI가 생성형, NLP 특화 등 다양한 AI의 기술의 총 집합체임을 직관적으로 나타낼 수 있도록 다양한 스크롤 인터랙션을 구현했습니다.
8개월의 대장정, 마무리하며
홈페이지 오픈 후, 앞선 과정들을 거쳐 다양한 고민을 거듭해가며 기존에 구축된 홈페이지를 바꾸려는 시도 자체가 좋았다는 공통된 의견을 모을 수 있었어요. 깊숙이 자리 잡고 있던 문제를 인식하고, 문제에 대해 고민하며 해결 방안을 찾아내는 과정 속에서 다양한 이해관계자들과의 협업에 딥다이브했기 때문입니다.
TF 인원 각자가 맡고 있는 프로젝트와 별개로 주어진 태스크였기에 일정상 여유가 부족해 아쉬움이 남기도 해요. 하지만 기획, 디자인, 개발팀이 하나 된 마음으로 맡은 바를 잘 수행해 주어 좋은 결과물이 나올 수 있었던 것 같습니다. 또한 내부 기술 및 제품과 앞으로 저희가 나아가야 할 방향성에 대해 한번 더 고민해볼 수 있는 뜻깊은 시간이었습니다.
읽어주셔서 감사합니다.
TmaxAI 3–3 UX팀 은애, 민주, 채린, 한솜