개요
한 줄 요약 — 대동기어(주)는 자동차 부품부터 농기계 파워트레인, 산업용 동력, 차세대 모빌리티 감속기까지 '기어(gear)'라는 하나의 핵심 기술로 여러 산업을 관통하는 정밀 부품 제조사다. 첫 화면은 오렌지빛 공장 외벽과 파란 하늘을 배경 사진으로 깔고 그 위에 "모든 움직임의 시작, 미래를 향한 솔루션"을 얹는다. 건물 벽면의 대형 'daedong gear' 레터링과 'The Precision Gear Solution'이라는 영문 태그라인이 겹치면서, 부품 제조사 특유의 딱딱함 대신 스케일과 자신감을 먼저 던진다. B2B 제조 기업의 홈페이지 제작에서 가장 어려운 지점은 '보이지 않는 기술력'을 화면 위 신뢰로 바꾸는 일이다. 이번 리뷰는 히어로 메시지에서 시작해 제품 구획, 성과 지표, 글로벌 네트워크, 뉴스까지 이어지는 스크롤 흐름을 UX/UI·정보 구조·SEO 관점에서 차례로 살핀다.
브랜드 & 메시지
브랜드 메시지는 두 개의 카피 축으로 움직인다. 히어로의 "모든 움직임의 시작, 미래를 향한 솔루션"이 스케일을 선언한다면, 바로 아래 흰 섹션의 "스마트 솔루션 / 혁신으로 미래를 설계합니다"가 그 스케일을 방향으로 좁힌다. 여기서 '혁신'만 붉은색으로 뽑아낸 처리가 인상적이다. 문장 전체를 강조하지 않고 한 단어에 색을 몰아준 덕에, 무채색 위에서 브랜드 컬러가 정확히 한 번만 눈에 박힌다. 좌우로 배치한 'Daedong Gear', 'Good Solution' 라벨과 작은 기어 심벌이 이 문장을 감싸며 여백을 정돈한다.
컬러 시스템은 명확하다. 붉은 포인트 컬러 하나에 짙은 차콜과 화이트를 베이스로 두고, 강조는 아끼는 쪽을 택했다. 로고는 소문자 'daedong gear' 워드마크에 기어 심벌을 붙인 형태로 헤더 좌측에 앉히고, 글로벌 내비게이션은 우측 상단에 얇은 가로 메뉴로 정리했다. 붉은 버튼 하나가 헤더 오른쪽 끝에서 시선을 잡는다. 다만 CTA 문구가 각 제품 섹션마다 'VIEW MORE'로만 반복되는 점은 아쉽다. 어디로 가는지, 무엇을 볼 수 있는지 맥락이 담긴 라벨이라면 클릭 동기를 더 끌어올릴 수 있다.
UX/UI 관점
이 웹사이트의 UX/UI에서 가장 잘 작동하는 장치는 풀블리드 다크 섹션의 리듬이다. 화면을 내리면 '자동차 부품 솔루션', '파워트레인 시스템', '산업 현장을 움직이는 강력한 동력', '차세대 모빌리티를 위한 정밀 감속기 솔루션'이 같은 레이아웃 규칙으로 연속해서 지나간다. 아래에 실제로 확인한 강점을 정리했다.
- 제품군을 스크롤 스토리로 구성 — 네 개의 어두운 전면 사진 섹션이 좌측 정렬 카피와 VIEW MORE 버튼을 반복하며, 사용자가 카탈로그를 훑듯 산업별 라인업을 자연스럽게 지나가게 한다.
- 제품 매크로 사진으로 쌓는 신뢰 — 기어 치형, 플랜지 링, 감속기 내부를 클로즈업한 실제 부품 이미지가 텍스트보다 먼저 기술력을 증명한다. 골프카트를 넣어 '모빌리티 감속기'의 쓰임을 눈으로 보여준 것도 영리하다.
- 성과를 숫자로 못박은 증명 블록 — "품질의 기준, 기술로 증명하다" 아래 890을 비롯한 지표를 붉은 카드와 흰 카드의 대비로 배치해, 스펙 나열 없이도 규모감을 전달한다.
- 절제된 컬러 규율 — 붉은색은 강조가 필요한 지점에만 등장하고 나머지는 무채색으로 눌러, 산업재 특유의 묵직함을 웹디자인 톤으로 잘 옮겼다.
- 글로벌 이미지의 시각화 — 'Global Networks' 세계지도 위에 붉은 핀과 로고를 얹어 수출 기업이라는 포지션을 한 화면으로 설득한다.
- 활동성 신호 — 하단 'Notice'와 'Daedong News' 카드가 최신 소식을 노출해, 정지된 소개 사이트가 아니라 운영되는 기업임을 보여준다.
IA·SEO 전략
제조사 웹사이트의 검색 기회는 대부분 '제품 카테고리'와 'B2B 기술 키워드'에 있다. 메인에서 산업별로 잘 나눠 둔 자동차 부품, 파워트레인, 산업 동력, 정밀 감속기를 각각 독립된 URL과 고유한 <title>·메타 설명을 가진 상세 페이지로 확장하는 것이 첫 과제다. 지금처럼 VIEW MORE가 얕은 페이지로만 연결된다면, '정밀 기어 가공', '감속기 제조', '파워트레인 부품' 같은 구매 의도가 뚜렷한 검색어를 흘려보내게 된다.
각 제품 상세에는 스펙 표와 함께 Organization·Product 구조화 데이터를 심어 검색 결과의 신뢰 신호를 키우고, 'Global Networks'를 내세우는 만큼 영문 페이지를 hreflang으로 정합성 있게 연결하면 해외 바이어 유입에 직접 도움이 된다. 뉴스와 공지는 개별 URL과 발행일 마크업을 갖추게 해 색인 대상을 늘리고, 히어로 건물 사진처럼 텍스트가 이미지 안에만 들어간 카피는 실제 마크업 텍스트와 alt로도 남겨 크롤러가 읽을 수 있게 해야 한다. 웹사이트 제작 단계에서 이 정보 구조를 먼저 설계해 두면 이후 콘텐츠가 쌓일수록 검색 자산이 복리로 늘어난다.
성능·접근성
이 사이트는 대형 고화질 산업 사진에 크게 의존한다. 히어로 공장 전경, 네 개의 어두운 제품 배경, 세계지도, 뉴스 썸네일까지 무거운 이미지가 세로로 길게 이어지므로, WebP/AVIF 병행 제공과 이미지별 명시적 width/height 지정으로 레이아웃 이동(CLS)을 막는 것이 우선이다. 첫 화면 히어로만 즉시 로딩하고 아래 섹션 사진은 지연 로딩으로 돌리면 초기 LCP 부담이 눈에 띄게 줄어든다. 성과 지표 카운터나 세계지도 애니메이션을 쓰는 스크립트가 있다면 뷰포트 진입 시점으로 지연 초기화해 메인 스레드 점유를 낮추는 것이 좋다.
접근성 측면에서는 어두운 배경 위 흰 텍스트의 대비를 구간마다 점검할 필요가 있다. 사진 위에 얹힌 카피는 밝기에 따라 가독성이 흔들리기 쉬워, 그라디언트 오버레이나 최소 대비 기준을 명시해 두면 안정적이다. 반복되는 VIEW MORE 링크는 스크린리더 사용자에게 목적지를 알 수 없는 링크로 읽히므로, 'VIEW MORE'라는 보이는 문구는 유지하되 각 링크가 어떤 제품으로 향하는지 접근성 레이블을 덧붙이는 편을 권한다.
디지털 파트너 더블루캔버스
대동기어(주)의 화면은 제조 기업이 어떻게 '기술의 무게'를 웹디자인으로 옮길 수 있는지 잘 보여주는 사례다. 동시에, 잘 만든 첫인상 뒤에 제품 상세·검색 유입·해외 바이어 대응이라는 다음 과제가 남는다는 것도 분명하다. 이 지점이 바로 The Blue Canvas가 함께 풀어온 영역이다. 우리는 산업재·제조·B2B 브랜드의 홈페이지 제작에서 제품 카테고리 정보 구조를 먼저 설계하고, 그 위에 SEO 검색엔진최적화와 퍼포먼스 마케팅을 얹어 '보여주는 사이트'를 '문의가 들어오는 사이트'로 바꾼다.
브랜드 톤을 지키는 웹사이트 제작부터, 제품 상세와 구조화 데이터 설계, 영문 페이지·해외 유입 전략, 그리고 유입 이후의 전환 측정까지 하나의 흐름으로 연결한다. 제조 기업의 홈페이지 제작이나 리뉴얼을 고민한다면, 아래에서 The Blue Canvas의 작업을 확인해 보길 권한다.
마무리와 다음 스텝
대동기어(주) 웹사이트는 붉은 포인트 하나와 절제된 무채색, 실제 부품 사진으로 제조 기업의 신뢰감을 설득력 있게 세웠다. 히어로 카피의 스케일과 '혁신' 한 단어 강조, 풀블리드 제품 섹션의 리듬은 그대로 가져갈 만한 강점이다. 다음 스텝은 세 가지로 압축된다.
- 산업별 제품군을 고유 URL·타이틀·구조화 데이터를 갖춘 상세 페이지로 확장해, B2B 검색 유입을 실제 자산으로 전환한다.
- 반복되는 VIEW MORE를 목적지가 드러나는 라벨과 접근성 레이블로 개선해 클릭 동기와 접근성을 함께 끌어올린다.
- 대형 산업 사진을 WebP/AVIF·지연 로딩·명시적 크기로 최적화해 초기 로딩과 CLS를 잡는다.