첫인상: 두산로보틱스를 처음 열었을 때

두산로보틱스 메인 페이지 — 데스크톱 1440×900

페이지에 진입하면 가장 먼저 눈에 들어오는 것은 Doosan × ONExia “United in Innovation” 팝업 모달이다. Doosan과 ONExia의 합병을 알리는 공지인데, 반투명 백드롭 위에 뜨는 이 모달이 히어로 영역의 첫인상을 상당 부분 가린다. “오늘 하루 보지 않기 / 닫기” 두 가지 선택지를 제공하는 전형적인 기업 공지 패턴이다.

모달을 닫으면 풀스크린 비디오 배경 위에 “AI-Powered Solutions for a Better Work” 헤드카피가 드러난다. 금속 질감의 추상적 비주얼이 로봇 기업의 정체성과 잘 맞고, 우측에는 구매 문의 · 대리점 찾기 · 교육 · A/S 신청 등 4개의 플로팅 CTA 버튼이 고정되어 있다. B2B 사이트답게 전환 동선을 첫 화면에 노출시키는 전략이다.

Cloudflare 보호가 걸려 있어 초기 로딩 시 약간의 딜레이가 체감되고, Lenis 라이브러리가 스크롤 보간을 처리해 스크롤 감촉은 부드러운 편이다.

기술 스택 해부

프레임워크 & 아키텍처 패턴

두산로보틱스는 모던 SPA/SSR 프레임워크 없이 전통적인 MPA(Multi-Page Application)로 구축되어 있다. Next.js, Nuxt, Astro 같은 메타프레임워크의 흔적(__NEXT_DATA__, __NUXT__)이 전혀 없다.

핵심 스택을 정리하면 이렇다:

영역	기술	역할
DOM 조작	jQuery	이벤트 핸들링, AJAX, DOM 셀렉터
캐러셀	Swiper	제품 라인업 · 고객사 로고 슬라이드
스크롤	Lenis	스무스 스크롤 보간
분석	GTM + GA4	G-0SZG6L7PMC 추적 ID
보안	Cloudflare	WAF · CDN · DDoS 방어
데이터 전송	jQuery AJAX	폼 제출 · PDF 다운로드

이 구조가 흥미로운 점은 “AI 기반 로봇 솔루션”을 표방하는 기업이 프론트엔드는 가장 전통적인 방식으로 운영하고 있다는 것이다. 물론 B2B 기업 웹사이트에서 React나 Vue가 필수는 아니다. 제품 상세 페이지가 대부분 정적 콘텐츠이고, 복잡한 클라이언트 상태 관리가 필요 없다면 jQuery + MPA로 충분하다.

다만 문제는 유지보수와 확장성이다. 커스텀 바닐라 JS로 UUID 생성, 사용자 추적, PDF 다운로드 관리 등을 직접 구현하고 있는데, 이런 코드가 분산되면 장기적으로 기술 부채가 쌓이기 쉽다.

컴포넌트 & 상태 관리 전략

컴포넌트 시스템이라 부를 만한 구조는 존재하지 않는다. Swiper 인스턴스 초기화와 jQuery 이벤트 바인딩이 페이지별로 인라인 스크립트로 들어가는 방식이다. localStorage를 활용한 웹사용자 키(Web User Key) 관리와, /api/ev/ 엔드포인트를 통한 자체 이벤트 프록시(애드블로커 우회용 추정)가 눈에 띈다.

디자인 시스템 분석

컬러 팔레트

CSS 변수에서 추출한 두산로보틱스의 컬러 시스템이다:

--clr-primary(#005EB8)가 두산그룹의 브랜드 블루를 그대로 가져온 것이고, --clr-sky(#1FA5FD)가 보조 액센트로 사용된다. 다크 톤 히어로 배경(#151515 계열) 위에 흰색 텍스트와 블루 CTA를 배치하는 구성인데, 제조업 · 로봇 · AI라는 키워드에 잘 맞는 차가운 톤이다.

다크모드 전환 기능은 제공되지 않는다. 히어로와 하단 섹션이 이미 다크 배경이라 시스템 다크모드에서도 시각적 충돌이 크지 않지만, 중간 콘텐츠 영역은 화이트 배경이라 일관성이 떨어진다.

CSS 변수 체계는 --clr-*, --border, --background, --inner 등 10개 미만으로 간결하다. 디자인 토큰이라 부르기엔 부족하고, 최소한의 테마 변수만 정의한 수준이다.

타이포그래피

HTML 소스에서 명시적인 웹폰트 로드(@font-face, Google Fonts <link>)가 확인되지 않는다. 시스템 폰트 스택에 의존하고 있을 가능성이 높고, 한국어 페이지 특성상 브라우저 기본 고딕 계열이 렌더링된다.

히어로 헤드카피는 영문(“AI-Powered Solutions for a Better Work”)으로 대형 사이즈, 본문 설명은 한국어로 처리하는 이중 언어 구성이다. 타이포그래피 스케일이 체계적으로 정의되어 있다기보다는 페이지별로 개별 스타일링하는 방식으로 보인다.

레이아웃 & 반응형

--inner: 1680px 변수로 최대 컨테이너 너비를 제어한다. 1680px은 일반적인 1280px ~ 1440px보다 넓은 편으로, 와이드 모니터에서의 몰입감을 의식한 설정이다.

풀페이지 레이아웃

모바일 뷰어 레이아웃

웹사이트 전체의 정보 배치를 위에서부터 살펴보면 다음과 같다:

1. 히어로 영역 — 풀스크린 비디오 배경 + 헤드카피 + 모달
2. 고객사 로고 배너 — Swiper 기반 자동 슬라이드 (Continental, Hyundai, Toyota 등)
3. 제품 라인업 그리드 — P/H/M/A/E 시리즈 카드
4. 솔루션 쇼케이스 — Dr.Presso, Palletizing, Training Kit 카드
5. 다크 배경 CTA 섹션 — 영상 + “자동화를 통한 생산성 증대” 메시지
6. 푸터 — 메가 푸터(제품, 서비스, 투자정보, 회사소개 링크)

모바일에서는 햄버거 메뉴로 전환되고, 글로벌 언어 선택기가 상단에 노출된다. 모바일 점수가 60점으로 데스크톱 대비 낮은데, viewport 메타태그에 user-scalable=no, maximum-scale=1이 설정되어 있어 사용자의 핀치 줌을 차단한다. 이건 접근성 위반(WCAG 1.4.4)이면서 모바일 사용성도 해치는 안티패턴이다.

UX 패턴 깊이 파기

네비게이션

GNB(Global Navigation Bar)는 5개 메뉴로 구성된다:

• 제품 & 솔루션 — Heritage(협동로봇 역사), Product(5시리즈), Solution(공정별/산업별), Software(Dart-Suite)
• 교육 & 서비스 — 교육 프로그램, 다운로드 센터, A/S 신청, 파트너 서비스
• 투자정보 — IR 자료실, 거버넌스, 공시
• 회사소개 — 기업 개요, 지속가능경영, 뉴스
• A/S 신청 (별도 CTA)

경로 기반 다국어 지원(/kr, /en, /de, /cn, /jp)으로 5개 언어를 커버한다. 국가 선택 시 전체 URL 경로가 변경되는 구조로, 국제화(i18n) 점수가 86점으로 양호하다.

다만 GNB의 서브 메뉴 토글에 <a href="javascript:"> 패턴이 사용되고 있다. 이건 2026년 기준으로 명확한 안티패턴이다. <button> 요소를 쓰거나 최소한 role="button"을 부여해야 스크린 리더가 올바르게 인식한다.

인터랙션 & 애니메이션

• Lenis 스무스 스크롤: 전체 페이지에 적용. lenis.start() / lenis.stop() 으로 모달 오픈 시 스크롤 잠금을 처리한다.
• Swiper 캐러셀: 고객사 로고, 제품 라인업 등 복수 인스턴스. --swiper-theme-color: #007aff로 인디케이터 색상을 커스텀.
• 비디오 배경: 히어로 영역의 풀스크린 영상. VideoObject 스키마가 없어 SEO 관점에서 손해.

GSAP이나 Framer Motion 같은 애니메이션 라이브러리는 감지되지 않는다. 스크롤 기반 등장 효과는 CSS transition이나 간단한 IntersectionObserver로 처리하는 것으로 추정된다.

정보 구조

B2B 로봇 기업답게 전환 중심의 정보 구조를 갖추고 있다. 메인 페이지 우측에 고정된 4개의 플로팅 CTA(구매 문의, 대리점 찾기, 교육, A/S)가 어느 스크롤 위치에서든 접근 가능하다.

제품 상세 페이지(/kr/product-solutions/product)에서 각 시리즈(P/H/M/A/E)로의 탐색이 직관적이고, 솔루션 페이지는 공정별(팔레타이징, 용접, 조립 등)과 산업별(제조, 서비스, 교육)로 이중 분류를 제공한다.

아쉬운 점은 내부 링크가 과도하다는 것이다. 메인 페이지에만 102개 이상의 내부 링크가 있어 검색엔진 크롤러의 링크 가치 희석이 우려된다.

SEO & 웹 표준

squirrelscan 종합 결과 — 39점(F등급):

카테고리	점수	판정
Analytics	100	양호
Legal Compliance	100	양호
Local SEO	100	양호
Social Media	100	양호
URL Structure	100	양호
Crawlability	91	양호
Internationalization	86	양호
Links	85	양호
Core SEO	81	보통
Content	72	보통
Security	72	보통
E-E-A-T	68	주의
Performance	66	주의
Images	65	주의
Mobile	60	경고
Accessibility	57	경고
Video	44	심각
Structured Data	44	심각

주요 이슈를 정리하면:

• 이미지 alt 텍스트 누락 120건 이상 — 제품 썸네일, 아이콘, 팝업 이미지에 alt가 없다. 스크린 리더 사용자에게 제품 정보가 전달되지 않는다.
• lazy loading 미적용 — 94개 이미지가 below-fold임에도 즉시 로드된다. LCP와 전체 페이지 무게에 직접적인 영향.
• 이미지 dimensions 미지정 184건 — width/height 속성 부재로 CLS(Cumulative Layout Shift)를 유발한다.
• 18개 이미지가 200KB 초과 — PNG 형식의 솔루션 이미지가 300 ~ 420KB. WebP/AVIF 변환이 필요하다.
• 보안 헤더 부재 — Content-Security-Policy, Strict-Transport-Security, X-Frame-Options 모두 없다. Cloudflare를 쓰면서 이 설정을 안 한 건 의외다.
• 구조화 데이터 없음 — Organization, Product, VideoObject 스키마가 전혀 없다. AI 검색(Google AI Overview, Perplexity 등)에서의 가시성에 불리하다.
• 중복 타이틀 4건 — 메인 페이지와 투자정보 하위 3개 페이지가 동일한 “Doosan Robotics AI Powered Solutions” 타이틀을 공유한다.
• 깨진 외부 링크 5건 — 개인정보처리방침 페이지의 정부 기관 링크(경찰청, 개인정보보호위원회 등)가 작동하지 않는다.

배울 점 & 아쉬운 점

참조할 만한 기술

1. 플로팅 CTA 고정 패턴

우측에 고정된 4개의 행동 유도 버튼은 B2B 사이트의 전환율 최적화에서 참고할 만하다. 스크롤 위치에 무관하게 항상 접근 가능하고, 아이콘 + 짧은 레이블 조합으로 시각적 부담을 최소화했다.

/* 플로팅 CTA 패턴 예시 */
.floating-cta {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 100;
}

2. Lenis + 모달 스크롤 잠금

스무스 스크롤 라이브러리와 모달의 조합에서 lenis.stop() / lenis.start()로 스크롤을 제어하는 패턴은 간단하면서 효과적이다. body { overflow: hidden } 방식보다 스크롤 위치 보존이 깔끔하다.

3. 경로 기반 i18n

/kr, /en, /de, /cn, /jp 구조로 5개 언어를 지원하면서, 각 언어별 완전한 콘텐츠를 제공한다. hreflang 태그도 올바르게 구현되어 국제화 점수 86점을 받았다.

개선 여지

1. 접근성 — 당장 고쳐야 할 것

user-scalable=no는 제거해야 한다. 120건 이상의 alt 텍스트 누락은 자동화 스크립트로도 상당 부분 채울 수 있다. <a href="javascript:"> 패턴은 <button>으로 교체해야 한다.

2. 이미지 최적화

PNG → WebP/AVIF 변환, loading="lazy" 추가, width/height 속성 명시. 이 세 가지만 적용해도 성능 점수가 눈에 띄게 오른다.

3. 구조화 데이터

협동로봇 제조사로서 Organization, Product, VideoObject 스키마는 필수다. 특히 AI 검색 엔진이 기업 정보를 정확히 이해하려면 구조화 데이터가 있어야 한다.

4. 보안 헤더

Cloudflare 대시보드에서 CSP, HSTS, X-Frame-Options를 몇 번의 클릭으로 활성화할 수 있다. 설정 난이도 대비 보안 점수 향상 효과가 크다.

배울 점: 개발자가 가져갈 기술적 인사이트

jQuery 기반 사이트가 반드시 나쁜 건 아니다. 두산로보틱스처럼 정적 콘텐츠 중심의 B2B 기업 사이트에서는 React/Vue의 클라이언트 사이드 라우팅이나 복잡한 상태 관리가 오버엔지니어링일 수 있다. 중요한 건 프레임워크 선택이 아니라 웹 표준 준수와 성능 최적화다.

CSS 변수 10개 미만으로도 일관된 브랜드 컬러를 유지할 수 있다. 두산로보틱스의 --clr-primary, --clr-dark, --clr-sky 3색 체계는 단순하지만 전체 사이트에서 시각적 통일감을 준다. 디자인 토큰이 반드시 수백 개일 필요는 없다.

B2B 사이트의 핵심은 전환 동선이다. 플로팅 CTA, 메가 푸터, 제품→솔루션→문의로 이어지는 정보 구조. 기술적으로 화려하지 않아도 비즈니스 목적에 충실한 UX 설계가 돋보인다.

자주 묻는 질문 (FAQ)

Q. 두산로보틱스는 왜 React나 Next.js를 쓰지 않았을까?

B2B 기업 사이트의 핵심 요구사항은 제품 정보 전달과 리드 전환이다. 페이지 간 상태 공유가 거의 없고, 대부분의 콘텐츠가 서버에서 렌더링된 정적 HTML이면 충분하다. jQuery + MPA 조합은 개발팀의 기존 역량을 활용하면서 유지보수 비용을 낮출 수 있는 현실적인 선택이다. 다만 2026년 기준으로는 Astro 같은 정적 사이트 생성기가 같은 단순성을 유지하면서도 더 나은 성능과 개발 경험을 제공한다.

Q. squirrelscan 39점(F)인데, 실제로 사이트 이용에 문제가 있나?

일반 사용자 관점에서 크리티컬한 문제는 아니다. 39점은 접근성 · 이미지 최적화 · 구조화 데이터 등 “보이지 않는” 영역의 감점이 누적된 결과다. 하지만 스크린 리더 사용자에게는 alt 텍스트 누락이 치명적이고, SEO 관점에서 구조화 데이터 부재는 AI 검색 시대에 점점 더 불리해진다.

Q. Lenis 스무스 스크롤은 도입할 가치가 있나?

사이트의 성격에 따라 다르다. 두산로보틱스처럼 풀스크린 섹션 전환이 많은 포트폴리오/기업 사이트에서는 스크롤 보간이 시각적 품질을 높인다. 반면 블로그나 문서 사이트에서는 네이티브 스크롤이 사용자 기대에 더 부합한다. Lenis는 ~ 3KB(gzipped)로 가볍고, scroll-behavior: smooth CSS 속성보다 세밀한 이징 제어가 가능하다는 장점이 있다.

---