로봇 기업 홈페이지 제작기: 스크롤 따라 움직이는 3D 로봇 팔
테셀로보틱스는 스크롤하면 3D 로봇 팔이 부품을 집어 옮기고, ARM·MOVE·SERVE를 누르면 로봇과 설명이 바뀌는 홈페이지입니다. 로봇·자동화 회사가 프리미엄 기업 홈페이지 제작을 알아볼 때 참고하기 좋습니다.
로봇을 들이려는 공장 담당자는 홈페이지에 들어오면 그 로봇이 어떻게 움직이는지부터 보고 싶어 합니다. 그래서 이번 기업 홈페이지 제작에서는 움직이는 로봇을 첫 화면에 바로 세웠습니다. 테셀로보틱스를 열면 오른쪽에 검정과 은색이 섞인 로봇 팔이 서 있습니다. 「시작」 버튼을 누르면 팔이 한 동작을 하고, 오른쪽 위의 관절 각도 숫자도 따라 바뀝니다.
아래로 내리면 화면이 장면마다 멈추고, 로봇이 스크롤에 맞춰 부품을 집어 옮기거나 다른 로봇과 일을 나눕니다. 제품과 동작 원리, 적용 분야와 안전 기능을 지나고 나면 세 로봇이 한 줄로 섭니다. 그 아래에 「우리 현장에 맞는 구성을 문의하세요」라는 글과 「도입 상담 →」 버튼이 나옵니다. 처음 들어온 담당자도 끝까지 내려가는 동안 이 회사가 무엇을 만들고 어디에 쓰는지 알게 되고, 궁금해지면 그 자리에서 버튼을 눌러 상담 화면으로 넘어갑니다.
로봇이 부품을 집어 옮기는 시험을 스크롤로 따라가 봅니다
첫 화면 바로 아래는 「ARM 로봇 테스트」 장면입니다. 제목은 「매번 위치가 바뀌는 부품을 정확하게 파악해서 옮기는 테스트」입니다. 스크롤을 내리면 팔이 부품 위로 내려가 집게를 벌리고, 부품을 집어 옆 쟁반에 내려놓습니다. 동작이 바뀔 때마다 왼쪽 글도 같이 바뀝니다. 내려갈 때는 「부품은 매번 조금 다른 자리에 놓입니다. 집게는 보고 나서 내려갑니다.」, 옮길 때는 「사람의 손이 닿는 높이는 피합니다.」가 나옵니다.
다음 장면에서는 로봇이 일하는 원리를 보여 줍니다. 오른쪽 패널에 감지·판단·동작·점검 네 줄이 있고, 스크롤에 따라 한 줄씩 「대기」에서 「진행 중」, 「완료」로 넘어갑니다. 3D 부품 옆에는 「감지 · 손목 카메라」, 「판단 · 잡을 방향」 같은 이름표가 뜹니다. 사양서를 펴기 전에 로봇이 무엇을 보고 어떻게 판단하는지 눈으로 먼저 알 수 있습니다.
저희 에코스튜디오에 제조·자동화 기업의 홈페이지 제작을 맡기시면 실제 제품이 현장에서 하는 작업을 먼저 살펴보고, 방문자가 스크롤만 내려도 그 과정을 따라가며 이해할 수 있는 3D 장면으로 만들어드립니다.
ARM·MOVE·SERVE를 눌러 세 로봇의 쓰임을 비교합니다
홈 가운데쯤 왼쪽에 ARM, MOVE, SERVE가 큰 글자로 나옵니다. 하나를 누르면 화면이 그 로봇 쪽으로 내려가고, 3D 카메라도 그 로봇으로 옮겨 가면서 오른쪽 설명 상자가 바뀝니다. ARM은 「작업대 위에서 부품을 집고, 끼우고, 확인하는 일을 사람 옆에서 맡습니다.」로 소개됩니다. MOVE는 공정 사이를 오가며 상자와 부품을 나르는 로봇, SERVE는 두 단 선반에 물품을 싣고 건물 안에서 전달하는 로봇입니다. 상자마다 「상자 운반」「건물 내 배송」 같은 짧은 꼬리표가 붙어 있어 로봇마다 맡는 일을 금방 구분할 수 있습니다.
조금 더 내리면 「로봇끼리 협력이 가능합니다」 장면이 나옵니다. 이동 로봇이 운반 통을 싣고 오면 로봇팔이 쟁반의 부품을 그 통에 넣습니다. 이동 로봇은 넣기가 끝났다는 신호를 받은 뒤에 다음 공정으로 떠납니다. 로봇 한 대보다 공정 전체를 자동화하려는 담당자라면 제품을 어떻게 묶어 쓸 수 있는지 여기서 바로 보게 됩니다.
저희 에코스튜디오에 제조업 홈페이지를 맡기시면 제품마다 맡는 일을 정리해서, 방문자가 버튼 하나로 비교하고 자기 현장에 맞는 제품을 쉽게 고를 수 있게 만들어드립니다.
이런 3D 장면이나 제품 고르기를 우리 회사 홈페이지에도 넣고 싶다면 프리미엄 홈페이지 상담으로 편하게 물어봐 주세요.
제조·물류·서비스 탭에서 우리 현장에 맞는 작업을 찾습니다
홈의 적용 분야 장면에는 「제조 현장에서 건물 로비까지.」라는 제목 아래 제조·물류·서비스 사진 카드 세 장이 있습니다. 「적용 분야 전체 →」를 누르면 「산업보다 작업을 먼저 봅니다.」 화면이 열리고, 위쪽 탭을 누를 때마다 작업 목록과 작업 흐름, 현장 조건, 관련 제품이 한꺼번에 바뀝니다. 제조 탭에는 「설비 사이의 간격」「기름·분진」, 물류 탭에는 「사람·지게차 혼용 통로」, 서비스 탭에는 「엘리베이터 연동」처럼 현장에서 걸릴 만한 조건까지 적혀 있습니다. 담당자는 자기 공장이나 건물을 떠올리며 맞는지 미리 따져 볼 수 있습니다.
도입 상담 화면도 같은 방향입니다. 맨 위에 「가격, 성능, 기간은 현장 조건을 확인한 뒤에 정합니다.」라고 먼저 밝히고, 상담이 어떤 순서로 가는지 네 단계로 보여 줍니다. 양식에는 관심 제품과 산업을 고르는 버튼, 맡기려는 작업, 설치 공간, 바닥·통로 조건, 전원·통신 칸이 있습니다. 무엇부터 적어야 할지 몰라 망설이던 담당자도 칸을 따라 채우면 됩니다.
저희 에코스튜디오에 중소기업 홈페이지 제작을 맡기시면 실제 납품 현장과 고객이 자주 묻는 조건을 살펴보고, 담당자가 자기 현장과 맞춰 본 뒤 부담 없이 문의할 수 있도록 구성해드립니다.
기업 홈페이지 제작에서 안전 설명은 로봇 사진 위에서 바로 보여 줍니다
사람 옆에서 일하는 로봇이라면 안전부터 궁금합니다. 기술·안전 장면의 제목은 「센서로 사람을 먼저 감지해서 사람과 한 공간에서 안전하게 일합니다.」입니다. 팔 사진 위에 「손목 힘·토크 센서」「관절 구동부 · 충돌 감지 정지」「손목 카메라 · 사람·물체 인식」 설명선이 붙어 있어서 센서가 어디 달렸는지 바로 보입니다. 오른쪽에는 「사람을 먼저 봅니다」「닿으면 그 자리에서 멈춥니다」「어디서든 멈출 수 있습니다」가 짧게 정리돼 있습니다.
그 옆은 원격 정지 패널입니다. 「연결됨 · 로봇 3대」 표시 아래 빨간 「정지」 버튼이 있고, 「한 번 누르면 세 대가 함께 멈춥니다」라는 안내가 붙어 있습니다. 로봇마다 「동작 중」「이동 중」「대기」 상태도 따로 표시됩니다. 안전 담당자는 긴 글을 읽지 않아도 급할 때 로봇을 어떻게 멈추는지 이 패널 하나로 파악합니다.
저희 에코스튜디오에 맡기시면 회사가 갖춘 안전 기능과 인증 자료를 먼저 확인하고, 처음 로봇을 도입하는 고객도 믿고 상담을 신청할 수 있게 안전 설명을 디자인해드립니다.
ARM 상세 화면에서 부품 이름을 누르면 3D 모델이 그 부위를 밝혀 줍니다
「제품 보기 →」를 누르면 ARM 상세 화면이 열립니다. 첫 화면 문구는 「사람 옆에서 집고, 끼우고, 확인합니다.」입니다. 내려가면 집기·놓기, 조립 보조, 설비 급재, 외관 확인 네 가지 작업이 스크롤에 따라 하나씩 켜집니다. 그 아래 구성 요소 구간에는 손목 카메라부터 받침·제어기까지 여섯 항목이 있습니다. 「평행 집게」를 눌러 보면 3D가 집게 쪽으로 다가가고 손가락이 파랗게 빛나면서, 오른쪽 아래에 그 부품 설명이 뜹니다.
사양표는 카드가 옆으로 흘러가는 모양입니다. 위에 「값은 측정 조건과 함께 게시합니다.」라고 적혀 있어 숫자를 볼 때 어떤 조건에서 잰 값인지도 같이 확인하게 됩니다. 「가반하중」 카드를 누르면 카드가 넓어지면서 3D 로봇이 집게 쪽으로 돌아갑니다. 기술 담당자는 궁금한 부위와 사양을 한 화면에서 짝지어 봅니다.
저희 에코스튜디오에 맡기시면 제품 도면과 부품 설명, 사양 자료를 살펴보고, 기술 담당자가 궁금한 부위를 직접 눌러 보며 이해할 수 있는 제품 상세 화면을 만들어드립니다.
휴대폰에서도 3D 로봇 팔을 보고 ARM·MOVE·SERVE를 눌러 볼 수 있습니다
휴대폰으로 열면 머리글이 다섯 줄로 접히고 3D 로봇 팔이 글 위에 나옵니다. 「시작」「제품 보기 →」「도입 상담」 버튼은 세로로 쌓여 있어 손가락으로 누르기 편합니다. 화면이 옆으로 밀리지 않고, 가장자리 숫자 표시는 빠져서 로봇과 글이 먼저 보입니다. ARM·MOVE·SERVE도 휴대폰에서 눌리고, 큰 글자 아래 상자에 꼬리표와 「MOVE 상세 보기 →」 같은 링크가 나옵니다. 오른쪽 위 「≡」를 누르면 화면 가득 메뉴가 열리고, 맨 아래 넓은 「도입 상담」 버튼을 누르면 바로 상담 화면으로 갑니다.
저희 에코스튜디오에 맡기시면 현장에서 휴대폰으로 홈페이지를 여는 담당자도 제품을 비교하고 상담 버튼을 쉽게 찾을 수 있게 만들어드립니다.
화면 속 사진은 AI로 만든 콘셉트 이미지입니다.
테셀로보틱스처럼 3D 장면과 직접 눌러 보는 기능이 들어간 홈페이지는 프리미엄 등급으로 만들어드립니다. 프리미엄 홈페이지는 ₩1,499,000~이고, 안내 기간은 28일입니다. 페이지와 기능 구성은 상담에서 정해드립니다. 자세한 내용은 홈페이지 제작 안내에서 보실 수 있고, 궁금하신 점은 프로젝트 문의에 남겨 주세요.