개요
아메바(amoeba)는 화면 첫머리부터 자신을 'Amoeba Mobility Group'으로 소개하는 디자인 그룹이다. 첫 화면을 채운 영상 속 인물은 팀 리더 JUN HEE EUN, 배경은 'Mobility Lab'. 좌측 하단의 ©1998 - 2024 표기가 말해주듯 20여 년간 축적된 이력을 전면에 내세운다. 다루는 영역은 자율주행과 모빌리티를 축으로 한 UX, 그래픽, 인터랙션 디자인이다.
이 사이트는 흔한 회사 소개형 웹사이트가 아니다. 스크롤을 내릴수록 1에서 4까지 번호가 매겨진 풀스크린 챕터가 순차로 열리는, 한 편의 편집물에 가깝다. 이번 리뷰에서는 이 4단 내러티브가 방문자를 어떻게 이끄는지, 아웃라인 타이포와 데이터 시각화가 브랜드 신뢰로 전환되는 지점은 어디인지, 이런 웹디자인이 검색·성능에서 치르는 대가는 무엇인지를 화면에 보이는 근거로 짚는다.
브랜드 & 메시지
첫 화면의 카피는 한 문장으로 방향을 못 박는다. "Amoeba Mobility Group warmly welcomes the evolving future mobility revolution." 자율주행이 만들 미래를 반긴다는 선언이자, 이 회사가 어느 판에서 노는지를 즉시 규정하는 문장이다. 영상 인터뷰 형식을 히어로로 쓴 선택도 인상적이다. 정지된 키비주얼 대신 실제 팀 리더가 등장하는 랩(Lab) 풍경은, 말보다 '우리는 실제로 이것을 연구한다'는 태도를 먼저 전한다.
톤앤매너는 철저히 검정 기반이다. 배경은 어둡고, 타이포는 절제된 화이트, 데이터 시각화의 중심부에만 앰버 계열 곡선이 번진다. 워드마크 'amöeba'는 o 위에 분음부호를 얹어 평범한 로고타이프에 낯선 리듬을 준다. 상단 우측 햄버거 메뉴는 내비게이션을 완전히 감춰, 몰입은 키우되 첫 방문자가 전체 구조를 가늠하기 어렵게 만드는 양날의 선택이다. 그 공백을 메우는 장치가 'SCROLL' 유도 문구와 1 —— 4 형태의 페이지 인디케이터다. 지금 어디를 보고 있고 얼마나 남았는지를 조용히 알려준다.
UX/UI 관점
실제 화면에서 확인되는 UX/UI 강점은 뚜렷하다.
첫째, 챕터형 정보 설계. 히어로(1) → Insights(2) → Work Index(3) → Graphic DB(4)로 이어지는 4단 구성은 각 섹션마다 라벨과 번호를 달아, 방문자가 '이야기의 어디쯤'인지 항상 인지하게 한다. 둘째, 다국어 타이포그래피. 두 번째 챕터의 "Insights on Mobility"는 화면을 가로지르는 거대한 아웃라인 문자로 배치되고, 그 아래 "자율주행기술이 가져올 모빌리티 혁명은 이동수단의 역할을 넘어 우리 삶의 형태를 바꾸게 될 것 입니다"라는 국문과 영문 카피가 좌우로 병치된다. 국내외 클라이언트를 동시에 겨냥한 편집이다.
셋째, 데이터 시각화의 브랜딩화. 세 번째 챕터의 'Chronography 2022'는 1998년부터 2022년까지의 연도 축과 User eXperience·Graphics·AI·Big Data Analytics·Metaverse·Telematics·HMD 등 수십 개 작업 분야를 하나의 방사형 차트로 엮는다. 포트폴리오를 나열하는 대신, 축적된 역량 자체를 인포그래픽으로 증명하는 영리한 수법이다. 넷째, 모션의 리듬. 흩뿌려진 흰 픽셀 스퀘어가 스크롤에 맞춰 시선을 아래로 당긴다. 다섯째, 일관된 조형 언어. 네 번째 'graphic DB' 챕터의 바코드 스트라이프와 컬러풀한 오브제 일러스트까지, 모노크롬 위에 절제된 포인트를 얹는 규칙이 끝까지 흔들리지 않는다.
IA·SEO 전략
이 사이트의 가장 큰 리스크는 강점과 정확히 같은 자리에서 나온다. 풀스크린 스크롤 내러티브는 몰입감을 주지만, 검색 크롤러 입장에서는 단일 화면 안에 모든 콘텐츠가 뭉쳐 있는 구조로 읽히기 쉽다. Work Index에 나열된 수십 개 작업 분야가 각각 독립된 케이스 페이지와 고유 URL을 갖는다면, 'HMD UX'나 'Telematics 인터랙션' 같은 구체 키워드로 유입될 관문이 그만큼 늘어난다. 지금 구조는 강렬한 첫인상만큼 검색 유입의 표면적은 좁다.
둘째, 화면을 지배하는 대형 문자가 실제 렌더링되는 텍스트인지 이미지인지가 관건이다. "Insights on Mobility" 같은 핵심 카피가 텍스트로 살아 있어야 크롤러가 주제를 읽는다. 셋째, 히어로 카피가 영문 중심이므로 국문 title·meta description·H1을 별도로 정비하고, 한/영 페이지가 갈린다면 hreflang으로 정합성을 맞추는 편이 안전하다. 넷째, ©1998이라는 자산을 Organization·CreativeWork 구조화 데이터의 foundingDate로 명시해 '오래된 전문성'을 검색엔진이 읽을 신호로 바꾼다. 브랜드 경험을 해치지 않으면서 이 정도만 손봐도, 웹사이트 제작 단계에서 놓치기 쉬운 검색 표면적이 넓어진다.
성능·접근성
첫 화면을 전면 영상으로 채운 만큼 초기 로딩 예산 관리가 핵심이다. 히어로 인터뷰 영상에는 poster 이미지를 지정해 첫 프레임의 빈 화면을 없애고, preload는 metadata 수준으로 낮추며, 모바일에서는 정지 이미지로 대체하는 분기를 두는 편이 체감 속도에 유리하다. 방사형 'Chronography' 차트가 SVG나 Canvas라면 초기 페인트 비용이 큰 만큼, 뷰포트에 진입할 때만 렌더링하도록 지연시키는 편이 낫다.
접근성에서는 스크롤 기반 내러티브 특유의 과제가 있다. 키보드만으로 챕터를 순회할 수 있는지, 스크린리더가 1 —— 4 인디케이터의 위치를 읽어주는지, 그리고 모션에 민감한 사용자를 위해 prefers-reduced-motion에서 픽셀 애니메이션과 자동 전환을 멈출 수 있는지를 점검해야 한다. 검은 배경 위 회색 아웃라인 텍스트는 명도 대비 기준을 아슬아슬하게 넘나들 수 있으니, 본문급 정보에는 충분한 대비를 확보하는 편이 좋다.
디지털 파트너 더블루캔버스
아메바처럼 모빌리티·제조·기술 기반의 B2B 브랜드는, 축적된 전문성을 화면 위에서 '느끼게' 만드는 순간 경쟁사와 격이 갈린다. 문제는 그 감각적 완성도와 검색 유입·전환이라는 성과를 한 화면 안에서 동시에 잡기가 쉽지 않다는 데 있다. The Blue Canvas는 바로 그 균형점을 설계한다. 브랜드의 서사를 살리는 웹디자인과 홈페이지 제작을 기본으로, Core Web Vitals를 지키는 성능 엔지니어링, 개별 작업을 검색 관문으로 바꾸는 SEO 정보 설계, 그리고 유입을 실제 문의로 잇는 퍼포먼스 마케팅까지 하나의 흐름으로 연결한다.
실험적인 웹사이트 제작과 안정적인 검색·전환 성과를 함께 원한다면, 기획부터 디자인·개발·측정까지 한 팀에서 굴리는 파트너가 답이 된다. 브랜드의 결을 지키면서 데이터로 증명되는 홈페이지 제작을 고민하고 있다면, The Blue Canvas와 이야기를 시작해 보길 권한다.
마무리와 다음 스텝
아메바의 웹사이트는 '보여주지 않고 증명한다'. 회사 소개 문구를 나열하는 대신, 4단 풀스크린 내러티브와 Chronography 데이터 시각화로 20년 넘게 쌓인 모빌리티 UX 역량을 체험시킨다. 다만 그 몰입 구조가 검색 표면적을 좁히고 초기 로딩 예산을 압박한다는 대가는 분명하다.
실행 관점의 제안은 셋이다. 첫째, Work Index의 작업 분야를 독립 URL의 케이스 페이지로 분해해 검색 유입 관문을 늘린다. 둘째, 히어로 영상과 방사형 차트에 poster·지연 렌더링·모바일 대체를 적용해 첫 화면 체감 속도를 끌어올린다. 셋째, prefers-reduced-motion과 키보드 순회, 명도 대비를 보강해 이 강렬한 경험을 모든 사용자에게 안전하게 연다. 미학은 이미 완성됐다. 남은 과제는 그 미학이 검색과 성능이라는 토대 위에서도 흔들리지 않게 만드는 일이다.