개요
로코모션(LOCOMOTION)은 전략과 브랜딩, 웹디자인, 개발을 한 팀에서 엮어내는 디지털 스튜디오다. 첫 화면부터 성격이 분명하다. 새빨간 버밀리온 레드를 배경으로 DESIGN. DEVELOPMENT. ALL THINGS DIGITAL.이라는 문장을 검은 고딕으로 큼직하게 박아, 군더더기 없이 정체성을 선언한다. 상단 우측에는 라벨리온(rebellions_)의 AI 가속기 하드웨어 렌더링이 놓여 있어, 이 회사가 다루는 클라이언트의 결이 어느 수준인지 첫인상부터 가늠하게 한다.
이번 리뷰에서는 로코모션의 웹사이트가 어떻게 컬러 한 장으로 스튜디오의 태도를 각인시키는지, FEATURED WORKS에서 SERVICES로 이어지는 스크롤 흐름이 방문자의 신뢰를 어떤 순서로 쌓아 올리는지, 그리고 포트폴리오형 홈페이지 제작에서 자주 놓치는 UX/UI·검색 노출 지점을 함께 짚는다. 화면에 실제로 보이는 요소만 근거로 삼았다.
브랜드 & 메시지
헤드라인은 세 단어를 마침표로 끊어 리듬을 만든다. DESIGN. DEVELOPMENT. ALL THINGS DIGITAL. 문장이라기보다 선언에 가깝다. 이 카피는 디자인도 개발도, 디지털이라면 전부 다룬다는 서비스 범위를 3초 안에 전달한다. 배경의 채도 높은 레드는 그 자체로 브랜드 자산이 되어, 페이지를 끝까지 내려도 붉은 푸터로 되돌아오며 톤을 닫는다.
내비게이션은 WORKS · SERVICES · ABOUT 세 항목에, 검은 박스로 처리한 CONTACT 버튼을 더한 구성이다. 메뉴를 넷으로 압축한 판단이 좋다. 방문자가 길을 잃을 여지를 처음부터 줄였다. 소문자로 흘려 쓴 커스텀 로고 locomotion은 유쾌하면서도 기술적인 스튜디오의 성격을 은근히 드러낸다. 본문 카피 “우리는 전략, 브랜딩, 웹 디자인 및 개발을 결합하여 사람이 브랜드와 소통하고 상호작용하는 방식을 재정립하는 디지털 경험을 구축합니다”는 다소 길지만, 이 회사가 파는 것이 기능이 아니라 경험임을 분명히 한다. 붉은 푸터의 “로코모션에게 문의해 주세요. 우리의 기술과 아이디어가 문제를 해결해 드립니다”는 담백하면서 자신감이 실린 마무리 CTA다.
UX/UI 관점
화면에서 확인되는 웹디자인의 강점은 뚜렷하다. 절제와 대비, 그리고 순서를 다룰 줄 아는 손이 만졌다.
- 3색 원칙 — 레드·블랙·화이트만으로 밀어붙여, 시선이 헤맬 틈을 주지 않는다. 컬러가 곧 위계다.
- 히어로 하드웨어 이미지 — 라벨리온 가속기의 정교한 3D 렌더링을 전면에 걸어, 딥테크 신뢰도를 말이 아니라 이미지로 증명한다.
- FEATURED WORKS 3열 카드 — 라벨리온 글로벌 웹사이트 리뉴얼, 쿼드마이너, 21세기영상의학과의원을 썸네일과 한 줄 설명으로 묶어 빠르게 훑게 했다.
- 다크 섹션 전환 — SERVICES에서 배경을 레드에서 차분한 차콜로 바꿔, 정보 밀도가 높은 서비스 목록에 집중을 몰아준다.
- 넘버링된 서비스 리스트 — WEBSITES(01)부터 BRANDED CONTENTS까지 번호와 서브텍스트(카페24 · WooCommerce · Shopify 등)를 붙여, 추상적 역량을 구체적 실체로 바꿨다.
- 여백과 그래픽 — 겹친 두 원의 라인 그래픽과 넉넉한 여백이 스튜디오 특유의 절제된 무드를 완성한다.
IA·SEO 전략
포트폴리오형 사이트의 약점은 대개 같다. 화면은 이미지로 가득한데, 검색 크롤러가 읽어 갈 텍스트는 얇다. 로코모션도 여기서 자유롭지 않다. FEATURED WORKS의 세 프로젝트가 지금은 한 줄 설명에 머무는데, 각 작업을 케이스 스터디 상세 페이지로 펼치고 <title>·meta description을 프로젝트별로 다르게 채우면 검색 유입 표면이 크게 넓어진다.
클라이언트 이름 자체가 강력한 검색어라는 점을 활용할 만하다. 라벨리온, 쿼드마이너, 21세기영상의학과의원 같은 고유명은 그 기업을 찾던 사람을 로코모션으로 데려오는 통로가 된다. 상세 페이지 본문에 문제 정의와 접근, 결과를 실제 문장으로 서술하면 ‘딥테크 웹사이트 제작’, ‘다국어 홈페이지 제작’ 같은 구체 키워드에서 자연스럽게 노출된다. Organization 구조화 데이터로 회사·연락처·소셜 채널을 명시하고, 작업별 Open Graph 이미지를 지정해 공유 시 첫 카드가 밋밋해지지 않게 잡아 두는 것도 권한다.
성능·접근성
이 사이트의 무게 중심은 이미지다. 히어로의 가속기 렌더링, 각 작업 썸네일, 3D 비주얼까지 시각 자산의 비중이 높아 LCP는 사실상 히어로 이미지가 결정한다. 원본 화질은 살리되 WebP·AVIF를 병행 제공하고, 뷰포트별 srcset으로 모바일에 과한 픽셀을 내려보내지 않도록 조이는 것이 먼저다. 첫 화면 아래의 카드와 SERVICES 배경은 지연 로딩으로 미루고, 히어로만 우선 로딩해 초기 페인트를 앞당기면 체감 속도가 눈에 띄게 달라진다.
접근성 측면에서 레드-블랙-화이트 대비 자체는 시원하다. 다만 붉은 푸터 위에 얹힌 작은 회색 라벨(CHANNELS, PHONE, 이메일 등)은 대비가 아슬아슬할 수 있어 실측 점검이 필요하다. 하드웨어와 3D 이미지에는 장식이 아닌 정보성 alt를 달아 스크린리더가 맥락을 읽게 하고, CONTACT 버튼과 소셜 아이콘에는 눈에 잘 띄는 포커스 링을 부여해 키보드 사용자의 이동 경로를 분명히 해 두면 좋다.
디지털 파트너 더블루캔버스
로코모션처럼 딥테크·B2B 브랜드를 다루는 현장에서는, 홈페이지가 곧 기술력의 증명서다. 화려한 애니메이션보다 ‘이 회사가 무엇을 얼마나 잘 다루는가’를 구조와 카피, 사례로 설득하는 설계가 성패를 가른다. The Blue Canvas는 바로 그 지점을 판다. 브랜드 메시지 정리부터 웹사이트 제작, UX/UI 설계, 그리고 검색에서 발견되게 만드는 SEO와 유입을 전환으로 바꾸는 퍼포먼스 마케팅까지 하나의 흐름으로 잇는다.
기업·기관 홈페이지 제작을 고민하고 있다면, 디자인 완성도와 검색 노출, 실제 문의 전환을 따로 떼어 생각하지 않는 파트너가 결과를 바꾼다. The Blue Canvas는 기획과 크리에이티브, 개발, 데이터 분석을 한 팀에서 굴려 작은 조직도 큰 브랜드처럼 보이게 만든다.
마무리와 다음 스텝
로코모션의 웹사이트는 강한 컬러와 절제된 3색 시스템, 딥테크 포트폴리오라는 세 축으로 스튜디오의 태도를 또렷하게 각인시킨다. 첫인상 설계는 이미 상급이다. 다음 성장은 화면 뒤, 텍스트와 속도에서 온다.
- 세 대표 작업을 케이스 스터디 상세 페이지로 펼치고, 프로젝트별 title·description과 본문 서술로 검색 유입 표면을 넓힌다.
- 히어로·3D 이미지를 WebP·AVIF와 srcset으로 최적화하고, 첫 화면 아래 자산은 지연 로딩해 LCP를 앞당긴다.
- 붉은 배경 위 소형 텍스트의 명도 대비와 이미지 alt·포커스 링을 점검해, 강한 비주얼과 접근성을 동시에 지킨다.