개요
핵심 요약 — 원강금속은 펌프·밸브·산업기계에 들어가는 주문형 주강 부품을 만드는 제조사다. 웹사이트는 첫 화면부터 정체성이 분명하다. 시뻘건 쇳물이 흐르는 주조 현장 위로 LIFE TO METAL, VALUE TO TECHNOLOGY라는 헤드라인이 떠 있고, '금속에 생명을, 기술에 가치를'이라는 한 줄이 이를 받친다. 스톡 이미지로 채운 제조업 홈페이지가 넘쳐나는 가운데 자기 공장의 열기를 그대로 내보이는 선택은 그 자체로 신뢰 신호다. 이번 리뷰는 이 다크 톤 웹디자인이 B2B 바이어에게 어떻게 작동하는지, 제품 정보 구조와 문의 동선은 충분한지를 화면에 보이는 것만을 근거로 살핀다.
브랜드 & 메시지
글로벌 네비게이션은 COMPANY·FACTORY·PRODUCT·CUSTOMER 네 개가 전부다. 우상단에는 파란 CONTACT 버튼 하나. 메뉴를 더 쪼개지 않고 FACTORY를 1뎁스에 올린 구성이 눈에 띄는데, 설비가 곧 영업력인 주조업의 속성을 정확히 반영한 판단이다. 컬러는 차콜 블랙을 바닥에 깔고 블루를 액센트로 쓰며, 용광로 사진이 뿜는 오렌지가 세 번째 색 역할을 맡는다. 섹션마다 A Leader in Custom Steel Casting, HEAT TREATMENT 같은 영문 디스플레이 타이포가 앵커처럼 박혀 스크롤의 호흡을 만든다. 상단 CONTACT 버튼에서 시작한 전환 동선은 페이지 맨 아래 대형 CONTACT US 타이포로 다시 닫힌다. 처음과 끝이 같은 행동을 가리키는 구조다.
UX/UI 관점
화면에서 확인한 강점부터. 가장 힘이 센 건 포토그래피다. 히어로의 쇳물부터 슬라이드로 이어지는 HEAT TREATMENT 공정 컷까지 전부 자기 현장에서 나왔다. 그 아래 수치 카운터 블록은 어두운 배경 위에 1,988·1,000t·40% 세 숫자만 크고 밝게 세워 성과를 즉물적으로 박아 넣는다. Casting solution의 제품 카드 4종 — 일반 펌프부품, 고압 펌프부품, 밸브부품, 산업기계부품 — 은 주물 렌더를 그레이스케일로 통일했고, 카드 사이에 적용 현장 사진이 끼어들어 제품과 쓰임새가 한 줄 안에서 나란히 읽힌다. 화면을 가로지르는 초대형 WONKANG 워터마크 타이포, Innovation·Partnership·Reliability·Ambition을 엇갈려 배치한 스태거드 카드도 자칫 늘어질 기업 가치 섹션에 리듬을 만든다. 마지막 한 방은 GLOBAL NETWORK 로고월이다. TORISHIMA, KOBELCO, KSB, HYOSUNG 같은 실명 로고가 어떤 수식어보다 강한 사회적 증거로 작동하고, 전시회 사진이 올라오는 wonkang news 카드가 지금도 움직이는 회사라는 인상을 보탠다.
IA·SEO 전략
남은 과제는 이 비주얼 자산을 검색이 읽게 만드는 일이다. 주조 부품 바이어는 '고압 펌프 케이싱 주조', '밸브 보넷 주강' 같은 구체 검색어로 들어온다. PRODUCT 하위를 부품 계열별 개별 URL로 펼치고 소재·치수 범위·적용 산업을 담은 스펙 표를 붙이면, 메인의 카드 한 장이 검색 랜딩 페이지 하나로 바뀐다. 로고월에 일본·유럽 기업이 나란한 만큼 영문 페이지와 hreflang 정비는 선택이 아니라 수순이다. 한 가지 더 — HEAT TREATMENT 같은 대형 영문 카피가 이미지가 아닌 실제 텍스트(H1·H2)로 마크업되어 있는지 확인해야 한다. 크롤러는 사진 속 글자를 읽지 못한다. 뉴스 섹션도 날짜와 제목 구조를 갖춘 아카이브로 묶으면 사이트가 계속 갱신된다는 시그널을 검색엔진에 보낼 수 있다.
성능·접근성
풀스크린 사진과 슬라이더로 짜인 페이지라 성능의 관건은 LCP다. 히어로 원본을 preload하고 AVIF·WebP를 병행 제공하되, 슬라이더의 나머지 슬라이드는 뒤로 미뤄 첫 화면에 대역폭을 몰아주는 편이 낫다. 카운터 애니메이션과 스크롤 전환 효과는 IntersectionObserver로 뷰포트 진입 시에만 돌리고, prefers-reduced-motion 사용자에게는 꺼 주는 배려까지 넣으면 완성도가 오른다. 다크 UI 특유의 함정도 점검 대상이다. 검정 배경 위 회색 본문이 4.5:1 대비를 지키는지, 로고월과 뉴스 썸네일에 width·height를 명시해 레이아웃 밀림(CLS)을 막았는지 — 웹사이트 제작 단계에서 잡아두면 비용이 거의 들지 않는 항목들이다.
디지털 파트너 더블루캔버스
좋은 설비 사진과 수출 실적을 갖고도 그걸 검색 유입과 견적 문의로 바꾸지 못하는 제조기업이 많다. The Blue Canvas는 제조·B2B 브랜드의 홈페이지 제작을 기획 단계부터 SEO 구조 설계, 퍼포먼스 마케팅까지 한 흐름으로 다룬다. 원강금속처럼 현장 비주얼이 강한 회사라면 그 자산을 부품별 검색 랜딩과 다국어 문의 퍼널로 연결하는 것이 다음 단계다. 제조업 웹사이트 제작이나 리뉴얼을 검토 중이라면 아래에서 시작하면 된다.
마무리와 다음 스텝
원강금속 웹사이트는 보여줄 것이 있는 회사가 그것을 과장 없이 보여줄 때 나오는 설득력을 증명한다. 현장 포토그래피, 절제된 4개 메뉴, 숫자와 로고월로 쌓은 신뢰까지 UX/UI의 뼈대는 이미 단단하다. 다음 스텝은 셋으로 좁힌다. 부품 계열별 스펙 상세 페이지를 만들어 롱테일 검색을 받아내고, 영문판과 hreflang으로 해외 바이어 유입을 열고, 히어로 미디어 최적화로 LCP를 줄이는 것. 이 세 가지면 지금의 인상적인 첫인상이 측정 가능한 문의로 이어진다.