프로젝트 상담 신청 한국전광 - UX/UI 리뷰 | The Blue Canvas
UX/UI Review

한국전광 Website Design Review

2026-07-25·정밀 광학 제조

제품군이 넓은 제조 기업의 사이트는 메뉴에서 승부가 난다. 한국전광은 네 갈래 사업과 네 단계 제품을 겹치지 않게 나누는 데 성공했다.

홈페이지 제작 상담 보기

개요

핵심 요약

  • 한국전광(KEOC)은 우주(Space)·방위(Defense)·산업(Industrial)·과학(Scientific) 네 분야에 정밀 광학 솔루션을 공급하는 제조 기업이다.
  • 제품 체계는 Sub-System, Optical Module, Lens Assembly, Optical Components 네 단계로 나뉘며 각 단계 아래 세부 품목이 붙는다.
  • 강점은 Merit 01~04로 정리되며, 연마·코팅·조립·측정 전 공정 내재화(In-house, One-Stop Solution)를 핵심 근거로 제시한다.
  • ESG·IR·Career·Press를 상단 메뉴에 포함해 고객뿐 아니라 투자자와 구직자를 함께 대상으로 삼는다.
  • meta description은 충실하지만 페이지 제목이 ‘KEOC’ 네 글자이고 canonical과 Open Graph 태그는 확인되지 않는다.

한국전광(KEOC)은 고성능 초정밀 광학 제품을 설계·제조하는 기업이다. 홈 첫 화면은 배경 영상 위에 ‘Engineering the Future of Precision Optics — 초정밀 광학의 미래를 창조하는 기업’과 ‘Built to Exacting Standards. Trusted Worldwide.’를 얹는다. 영문 슬로건과 국문 해설을 나란히 두는 방식이 사이트 전체에 반복되는데, 수출 비중이 있는 제조 기업에서 흔히 쓰는 구성이다.

이 사이트의 진짜 과제는 메뉴에 있다. About·Business·Product·R&D·ESG·Press·Media·IR·Career, 그리고 영문 전환까지 아홉 개가 넘는 최상위 항목이 있고, 그 아래로 수십 개의 세부 페이지가 붙는다. 이번 리뷰에서는 이 방대한 구조를 사용자가 길을 잃지 않게 정리한 방식, 그리고 그만큼의 정보량을 갖고도 검색 기반이 비어 있는 문제를 함께 살펴본다.

한국전광 웹사이트 메인 화면 스크린샷

브랜드 & 메시지

메시지는 정밀과 신뢰, 그리고 ‘글로벌 강소기업’이라는 자기 규정으로 요약된다. 개요 구획의 ‘Powering Next-Gen technologies with Advanced Optics’ 아래에는 ‘디스플레이, 방위산업, 반도체 등 핵심 산업 분야에 정밀하고 신뢰성 높은 솔루션을 제공하는 글로벌 강소기업’이라는 문장이 붙는다. 추상적인 비전 대신 적용 산업을 나열하는 방식인데, B2B에서는 이쪽이 훨씬 빠르게 이해된다.

강점 구획의 Merit 02가 특히 눈에 띈다. ‘In-house, One-Stop Solution — 연마, 코팅, 조립, 측정까지 광학 제조의 모든 공정을 한 곳에서 수행합니다.’ 제조 기업의 경쟁력을 추상적 표현이 아니라 공정 이름 네 개로 증명한 문장이다. 광학 부품 발주에서 공정이 여러 업체로 쪼개질 때 발생하는 품질·납기 리스크를 아는 담당자에게는 이 한 줄이 어떤 슬로건보다 강하게 작동한다.

키워드: 영문·국문 병기 슬로건, 적용 산업 나열, 공정 내재화 근거, 강소기업 자기 규정

UX/UI 관점

강점은 여섯 가지다. 첫째, 사업(Business)과 제품(Product)을 서로 다른 축으로 분리했다. 사업은 Space·Defense·Industrial·Scientific 네 분야로, 제품은 Sub-System·Optical Module·Lens Assembly·Optical Components 네 단계로 나뉜다. 방문자는 ‘우리 산업에 쓰이는가’와 ‘어떤 부품이 있는가’ 두 질문을 각각 다른 경로로 확인할 수 있다. 제품군이 넓은 제조 기업이 가장 자주 실패하는 지점을 잘 처리했다.

둘째, 제품 하위 항목까지 메뉴에서 바로 노출한다. ‘F-Theta / Telecentric Lens’, ‘Beam Expander’, ‘레이저 대공무기 빔 정렬 모듈’ 같은 구체적 품목명이 드롭다운에 드러나므로, 특정 부품을 찾는 담당자는 홈에서 두 번의 동작으로 목표에 도달한다. 셋째, 홈의 각 구획 끝에 MORE 버튼을 두어 깊은 구조로의 진입을 일정한 패턴으로 만들었다. 넷째, Merit을 01~04로 번호 매겨 강점을 스캔 가능한 형태로 정리했다. 다섯째, ESG·IR·Career를 상단 메뉴에 포함해 고객 외의 이해관계자 — 투자자, 구직자, 협력사 — 를 동선에서 배제하지 않았다. 여섯째, 브로슈어와 영업사원 정보를 Media 메뉴로 묶어, 문의 전 자료 확보와 담당자 연결이라는 B2B 특유의 절차를 별도 경로로 제공한다.

키워드: 사업축과 제품축의 분리, 품목명 노출 드롭다운, 일관된 MORE 패턴, 이해관계자별 진입로

IA·SEO 전략

정보 구조는 잘 짜여 있는데, 검색 대응이 그 수준을 따라가지 못한다. meta description은 ‘고성능 초정밀 광학 제품의 설계 및 제조를 기반으로…’로 시작하는 충실한 문장인데, 정작 페이지 제목은 ‘KEOC’ 네 글자다. 영문 약칭만으로는 ‘한국전광’을 검색하는 사용자에게도, ‘정밀 광학 렌즈 제조’를 검색하는 담당자에게도 걸리지 않는다. canonical과 Open Graph 태그도 확인되지 않는다.

또 하나, 문서에 h1이 두 개 있고 그중 하나가 ‘SINAFORYOU’, 다른 하나는 비어 있다. 페이지 주제를 선언하는 자리가 사실상 비어 있는 셈이다. 그리고 배경 영상의 대체 문구 — 브라우저가 영상을 지원하지 않을 때 표시되는 안내 문장 — 가 본문 텍스트로 여러 번 노출된다. 사용자에게는 보이지 않지만 수집기가 읽는 문서에는 남으므로, 본문의 신호 대 잡음 비율을 떨어뜨린다. 개선 순서는 명확하다. 제목을 ‘정밀 광학 렌즈·모듈 제조 | 한국전광(KEOC)’ 형태로 바꾸고, canonical과 OG를 추가하고, h1에 주제 문장을 넣고, 품목 페이지마다 Product 구조화 데이터와 고유 설명을 붙이는 것이다. 영문 페이지를 운영 중이므로 hreflang까지 갖추면 해외 바이어 검색에 대응할 수 있다.

성능·접근성

배경 영상이 여러 개 쓰이고 팝업이 진입 시 노출되는 구조다. 영상에는 poster를 지정하고 모바일에서는 정지 이미지로 대체하는 편이 좋다. 팝업은 ‘24시간 동안 다시 열람하지 않습니다’ 옵션을 제공하고 있어 재방문자 배려는 되어 있지만, 첫 진입 시 렌더링을 막지 않도록 로딩 순서를 뒤로 미루는 것이 체감 속도에 낫다.

접근성에서는 팝업의 키보드 조작이 우선 점검 대상이다. 진입 즉시 뜨는 레이어는 포커스가 그 안에 갇히도록 처리하고 Esc로 닫히게 해야 한다. 비어 있는 h1과 영문 대문자 슬로건도 함께 정리할 대상이다. 대문자로만 표기된 문자열은 스크린리더가 철자 단위로 읽는 경우가 있으므로, 표현은 CSS로 처리하고 마크업에는 일반 표기를 남기는 편이 안전하다. 품목명이 영문 전문 용어인 경우가 많으므로, 국문 병기를 유지하는 현재 방식은 이해도 측면에서 유지할 가치가 있다.

자주 묻는 질문

제품군이 많은 제조 기업의 홈페이지 메뉴는 어떻게 나눠야 하나요?

적용 산업과 제품 계층을 서로 다른 축으로 분리하는 방식이 효과적입니다. 한국전광처럼 사업 메뉴는 우주·방산·산업·과학으로, 제품 메뉴는 서브시스템·모듈·렌즈 어셈블리·부품으로 나누면, 두 가지 다른 질문을 가진 방문자가 각자의 경로로 이동할 수 있습니다.

회사 홈페이지 제목을 영문 약칭으로만 쓰면 어떤 문제가 있나요?

국문 사명이나 취급 품목으로 검색하는 사용자에게 노출되지 않습니다. 제목에는 국문 사명과 대표 품목을 함께 담아야 브랜드를 모르는 담당자의 검색에 걸립니다.

제조업 사이트에서 품목별 페이지가 왜 중요한가요?

산업재 검색은 품목명 자체가 검색어가 되기 때문입니다. 검색량은 적지만 유입 한 건이 실제 발주로 이어지는 비율이 높아, 품목 페이지의 수와 품질이 문의량을 직접 좌우합니다.

해외 바이어를 노린다면 홈페이지에 무엇을 갖춰야 하나요?

영문 페이지를 별도 URL로 운영하고 hreflang으로 언어 버전을 연결하는 것이 기본입니다. 여기에 품목별 영문 사양과 문의 경로를 명확히 두면, 해외 검색에서 자사 페이지가 직접 노출될 확률이 올라갑니다.

디지털 파트너 더블루캔버스

제조 기업의 홈페이지에는 정보가 많다. 문제는 그 정보가 대부분 PDF 카탈로그와 이미지 안에 갇혀 있다는 점이다. 화면에서는 잘 보이지만 검색에서는 존재하지 않는 상태가 되고, 결국 브랜드를 아는 기존 거래처만 사이트를 찾는다. 신규 문의를 만들려면 정보를 텍스트로 꺼내는 작업이 먼저다.

The Blue Canvas(더블루캔버스)는 제조·산업재 기업의 홈페이지 제작에서 품목 데이터를 문서로 옮기는 일부터 시작한다. 어떤 단위로 페이지를 나눌지, 사양을 어떤 형식으로 텍스트화할지, 국문과 영문을 어떻게 병행할지를 SEO 검색엔진 최적화와 함께 정리한다. 정보량이 많은 기업일수록 구조를 잡는 순간의 효과가 크다.

The Blue Canvas 홈페이지 제작 문의

마무리와 다음 스텝

한국전광의 웹사이트는 방대한 제품군을 다루면서도 길을 잃지 않게 만든 좋은 사례다. 사업과 제품을 다른 축으로 나누고, 품목명을 메뉴에서 바로 노출하고, 강점을 번호로 정리하고, 투자자와 구직자까지 동선에 포함했다. 공정 내재화를 근거로 제시한 카피도 B2B의 언어를 정확히 쓴다.

실행 제안은 셋이다. 첫째, 제목을 국문 사명과 대표 품목이 담긴 문장으로 바꾸고 canonical·OG·h1을 채운다. 정보량 대비 가장 손해가 큰 지점이다. 둘째, 품목 페이지마다 Product 구조화 데이터와 고유 설명을 부여하고 영문 페이지에 hreflang을 적용한다. 셋째, 영상 대체 문구와 진입 팝업의 처리 방식을 정리해 문서의 신호를 선명하게 만든다. 구조가 잘 잡힌 사이트이므로, 이 세 가지만으로도 신규 유입의 경로가 열린다.