세명ADS · SAEMYUNG ADSRENEWAL PROPOSAL

부품과하늘 사이

항공우주·방위산업 부품 공급사 세명ADS의 홈페이지 리뉴얼 제안
TARGET LOCK · PRECISION FILM, 두 가지 시안

케이스 읽기

01 · PART부품 하나의 단면에서 시작합니다
바람이 이 원을 지날 때, 둘레 서른두 곳의 압력을 잽니다

02 · PRESSURE보이지 않는 압력을 숫자로 읽습니다
풍동과 비행 시험에서 압력센서가 하는 일입니다

03 · WING원을 펴면 날개가 됩니다
날개 위아래의 압력 차이가 항공기를 들어 올립니다

04 · SKY작은 부품이 하늘을 지탱합니다
세명ADS가 일하는 곳은 부품과 하늘 사이입니다

01 / OVERVIEW프로젝트 개요

부품을 공급하고,
비행을 준비합니다

세명ADS는 해외 제조사 네 곳의 부품과 장비를 국내 항공우주·방위산업 현장에 공급하는 회사입니다. Kulite의 압력센서는 30년 넘게 국내 시험 현장에서 쓰였고, KT-1과 T-50, FA-50, KC-100, KUH, K2, K21, 유도무기에 주요 부품으로 들어갔습니다. 여기에 RBC Bearings의 항공 베어링과 WRAP의 배관 보수재, TTC의 텔레메트리 장비가 더해집니다.

2013년에 문을 연 지금의 사이트를 처음부터 다시 그린다면 어떤 모습이 될지, 2026년 10월에 스크롤로 움직이는 시안 두 가지를 만들어 제안했습니다. 이 페이지는 그 과정에서 고민한 기록입니다.

CLIENT: 세명ADS
주식회사 세명에이디에스
WEBSITE: smadsco.com
국문
OUR ROLE: 리뉴얼 리서치, 브랜드 해석,
정보 구조, UI, 모션, 3D 필름
DELIVERABLE: 메인 시안 2종, 3D 렌더 필름 2편,
모바일 화면, 컬러 · 서체 · 움직임 기준

30년+Kulite 압력센서 공급지금 사이트의 압력센서 페이지에 적힌 기간
4곳해외 제조사Kulite · RBC Bearings · WRAP · TTC
8개센서가 들어간 체계KT-1 · T-50 · FA-50 · KC-100 · KUH · K2 · K21 · 유도무기
424장렌더한 3D 프레임베어링 256장과 압력센서 168장(가로 화면 기준)

지금 사이트의 로고입니다. 굵은 검정 SM 옆에 사선으로 잘린 보라 판이 있고, M에서 뻗은 막대 세 줄이 판의 사선에서 멈춥니다. 판 아래쪽에는 흰 글자로 ADS를 썼습니다.

02 / CHALLENGE출발점

DWG NO. SM-2013-01smadsco.com/kr · HOMESCALE 1:2

KL@··· | 02-···

압력센서초정밀 베어링파이프라인 보수/보강Telemetry System②

공지사항자료실③

견적문의찾아오시는 길④

①배너 한 장940×395px · 제품과 항공기 사진을 이어 붙인 그림
②제품 상자 네 개압력센서 · 초정밀 베어링 · 파이프라인 보수/보강 · Telemetry System
③소식 두 칸공지사항 · 자료실의 최근 글
④연락처 두 칸견적문의 · 찾아오시는 길

지금 첫 화면의 구성입니다(2026년 10월 기준). 940px 폭에 맞춘 배너 한 장 아래로 제품 상자 네 개와 소식 두 칸, 견적문의와 찾아오시는 길이 차례로 놓여 있습니다.

01
안쪽에 있던 가장 강한 문장
KT-1과 T-50, FA-50, K2에 주요 부품으로 들어갔다는 문장은 압력센서 페이지의 첫 문단에만 있습니다. 첫 화면에는 사진을 이어 붙인 배너와 제품군 목록이 먼저 보여서, 이 회사가 어떤 현장에서 일해 왔는지는 한 번 더 들어가야 알 수 있었습니다.
02
모델명으로만 찾는 자료 115건
압력센서 페이지에 PDF 60건, 베어링 페이지에 39건, 배관 보수 페이지에 16건이 「Download PDF」처럼 같은 이름의 링크로 이어집니다. 모델명을 이미 아는 엔지니어에게는 충분하지만, 적용 분야에서 출발하는 방문자에게는 들어갈 길이 없었습니다.
03
2013년의 화면, 막혀 있는 확대
사이트는 2013년의 워드프레스 3.6 위에서 940px 폭의 첫 화면으로 짜여 있습니다. 휴대폰 화면 설정에는 확대를 막는 값(user-scalable=no)이 들어 있어, 일부 휴대폰 브라우저에서는 작은 사양 글자를 손가락으로 키워 읽을 수 없습니다.
04
두 곳에 다르게 적힌 주소
첫 화면 아래와 찾아오시는 길 페이지에 적힌 주소가 서로 달랐습니다. 사무실을 옮긴 뒤 한 곳만 고쳐진 것으로 보입니다. 같은 정보를 한 곳에서 고치면 모든 화면에 반영되는 구조가 필요했습니다.

03 / TWO WAYS두 방향

하늘에서 내려오는 길,
부품에서 올라가는 길

세명ADS의 이야기는 두 끝을 오갑니다. 한쪽 끝에는 KT-1과 T-50 같은 항공기가 있고, 다른 쪽 끝에는 그 안에 들어가는 압력센서와 베어링이 있습니다. 두 시안은 같은 이야기를 서로 반대 방향으로 풀었습니다.

ATARGET LOCK하늘 → 부품

구름 위의 항공기
계기판이 켜진다
목표 고정
회사 소개
분해된 베어링
조립된 베어링

BPRECISION FILM부품 → 하늘

흩어진 부품
분해도
조립
구멍 너머의 하늘
하늘
하늘 위의 회사 소개

SKY ↔ PART
항공기와 부품 사이의 거리
항공기는 길이가 10m를 넘고, 그 안에 들어가는 압력센서는 손끝에 올라가는 크기입니다. 세명ADS의 사이트는 방문자를 이 두 크기 사이로 데려가야 했습니다.
A · TARGET LOCK
하늘에서 부품으로
첫 번째 시안은 구름 위의 항공기에서 시작합니다. 스크롤을 내리면 계기판이 켜지고 목표를 고정한 뒤, 베어링이 조립되는 장면으로 내려갑니다. 이 부품이 무엇을 위해 있는지부터 말하는 길입니다.
B · PRECISION FILM
부품에서 하늘로
두 번째 시안은 흩어진 베어링 부품에서 시작합니다. 부품이 조립되고 돌기 시작하면, 카메라가 가운데 구멍을 지나 하늘로 나갑니다. 부품이 얼마나 정밀한지부터 보여 주는 길입니다.
OUR READING
두 길이 만나는 자리
두 시안 모두 마지막에는 같은 자리에 닿습니다. 제조사와 비행 체계 사이에서 맞는 부품을 골라 공급하는 일이 세명ADS가 하는 일이기 때문입니다. 그래서 이 케이스의 제목을 「부품과 하늘 사이」로 정했습니다.

04 / IDENTITY로고와 이름

막대 세 줄과
사선으로 잘린 판

리뉴얼은 로고를 다시 읽는 데서 시작했습니다. 사이트에 올라 있는 로고는 가로 189px, 세로 50px의 작은 GIF 한 장입니다. 이 그림을 16배로 키워 화소의 경계를 따라 다시 그리자, 작은 크기에서는 잘 보이지 않던 짜임이 드러났습니다.

LOGO · 189 × 50 PXASSEMBLED

01SM · 굵은 머리글자
세명의 머리글자 S와 M을 아주 굵은 고딕으로 썼습니다. 글자색은 순검정이 아니라 조금 밝은 #191919입니다.
02막대 세 줄 · M에서 뻗은 선
M의 오른쪽 기둥에서 높이 5px의 막대 세 개가 오른쪽으로 뻗습니다. 막대 사이의 2px 틈은 판과 같은 보라입니다. 우리는 이 막대를 앞으로 나아가는 속도선으로 읽었습니다.
03사선 · 66.7°로 잘린 판
보라 판의 왼쪽 위 모서리는 수평에서 66.7° 기운 사선으로 잘려 있고, 막대 세 줄은 이 사선에서 멈춥니다. 이 케이스 페이지의 섹션 표시도 이 사선을 따라 그렸습니다.
04ADS · 판 위의 흰 글자
판 아래쪽에 흰 글자로 ADS를 썼습니다. 판의 보라와 흰 글자는 명도 대비가 8.1:1여서 작은 크기에서도 또렷합니다.

원본 GIF · 8배189×50px. 글자 가장자리의 섞인 화소까지 그대로 보입니다.

시안에서 옮겨 그린 로고시안을 빠르게 그리면서 판을 평행사변형 하나로 줄였습니다. 막대 세 줄이 빠지고 보라도 밝아졌습니다.

원본을 따라 다시 그린 벡터정식 제작에서는 원본의 막대와 사선, 판의 색을 그대로 지킨 이 벡터 로고를 씁니다.

이름은 네 가지로 적혀 있었습니다

지금 사이트에는 같은 회사가 네 가지 이름으로 적혀 있습니다. 하나로 줄이는 대신, 화면마다 어떤 이름을 쓸지 정했습니다.

주식회사 세명에이디에스법인 이름계약서와 견적서
세명ADS한국어 화면메뉴 · 본문 · 견적문의
SAEMYUNG ADS영문 표기푸터의 영문 주소 · 저작권 줄
SM ADS로고그림으로만 쓰고 글자로 풀어 쓰지 않음

05 / COLOR컬러

밤하늘의 검정,
로고의 보라와 비행운의 주황

두 시안은 모두 해가 진 뒤의 하늘을 무대로 삼았습니다. 바탕은 검정에 가까운 남색이고, 그 위에 로고의 보라와 지평선의 주황, 금속 부품의 은색을 얹었습니다.

문제는 로고의 보라색이었습니다. 흰 바탕에서는 또렷한 이 보라색이 어두운 바탕 위에서는 2.4:1밖에 되지 않아, 로고의 판이 바탕에 묻혀 버립니다.

판 · 어두운 바탕2.4:1그림 기준 3:1 미달

두 시안의 바탕
필름과 계기판이 가장 또렷하게 보이는, 검정에 가까운 남색입니다.
로고 판 · 밝은 바탕의 강조
로고 GIF에서 보라색으로 칠해진 화소 1,680개의 평균값입니다.
어두운 바탕의 로고 판
로고 보라색의 색조를 지키면서 밝기만 올려, 어두운 바탕과 흰 ADS 글자에 함께 맞췄습니다.
어두운 바탕의 보라색 글자
보라색을 글자로 쓸 때는 한 단계 더 밝혀 어두운 바탕에서도 작은 글씨가 읽히게 했습니다.
버튼 · 핵심 숫자 · 비행운
노을과 엔진 불빛에서 가져온 강조색입니다. 두 시안이 같은 값을 씁니다.
금속 · 보조 글자
베어링과 센서 몸체의 은색입니다. 버튼이나 링크 색으로는 쓰지 않습니다.

조합견본대비판정

로고 판 · 원본 보라색Aa#4E4B75 / #07080C2.4:1미달 · 그림 3:1

로고 판 · 시안에서 밝힌 보라색Aa#4F54A3 / #07080C2.9:1미달 · 그림 3:1

로고 판 · 어두운 바탕용 판Aa#6461A8 / #07080C3.6:1통과 · 그림 3:1

판 위의 흰 ADS · 어두운 바탕용 판Aa#FFFFFF / #6461A85.5:1통과 · 글자 4.5:1

보라색 글자 · 어두운 바탕Aa#8F8CE6 / #07080C6.7:1통과 · 글자 4.5:1

주황색 글자 · 어두운 바탕Aa#F2883A / #07080C7.9:1통과 · 글자 4.5:1

주황색 글자 · 흰 바탕Aa#F2883A / #FFFFFF2.5:1미달 · 글자 4.5:1

짙은 주황색 글자 · 흰 바탕Aa#AD4F14 / #FFFFFF5.3:1통과 · 글자 4.5:1

01주황은 움직임과 행동에만
주황은 버튼과 가장 중요한 숫자, 비행운처럼 움직이는 선에만 씁니다. 넓은 면을 주황으로 덮지 않습니다.
02보라색은 바탕마다 짝을 정한다
밝은 바탕에서는 로고 보라색을, 어두운 바탕에서는 밝힌 보라색을 씁니다. 어두운 바탕 위의 로고는 판의 색만 어두운 바탕용 판으로 바꿉니다.
03사진 위 글자는 어두운 면 위에
하늘 사진과 렌더 화면 위에 글자를 놓을 때는 아래에 어두운 그라데이션을 깔아 본문 기준(4.5:1)을 지킵니다.
04은색은 금속에만
티타늄 은색은 부품과 보조 글자에만 씁니다. 은색 버튼은 어두운 바탕에서 눌러도 되는 곳처럼 보이지 않습니다.

06 / TYPOGRAPHY서체

모델명은
쪼개지지 않게

이 사이트의 독자는 시험 엔지니어와 구매 담당자입니다. 이들은 문장보다 모델명과 숫자를 먼저 읽습니다. 두 시안은 제목과 본문에 Pretendard를, 모델명과 계측값에 JetBrains Mono를 썼습니다.

Pretendard · 800 / 400

작은 부품이 하늘을 지탱합니다.

측정이 정확해야 시험을 마칠 수 있고, 시험을 마쳐야 비행이 시작됩니다.

JetBrains Mono · 500

PT-01 101.3 kPa

0123456789 · Ø ± ℃ ℉ kHz

XCQ-062초소형 압력센서
LL-080얇은 선형 압력센서
APTE-51-1000항공기용 압력센서
CDAU-2010PCM 데이터 수집
nGWY-2000네트워크 게이트웨이
MSSR-2000C-SA고속 카메라 시스템

지금 사이트시안왜 바꾸나

~~-65ºF To 450ºF~~−65 ~ 450 ℉음수에는 하이픈 대신 마이너스 기호를 쓰고, 도 기호는 서수 기호 º가 아니라 ℉로 씁니다.

~~150KHz~~150 kHz킬로헤르츠는 소문자 k로 쓰고, 숫자와 단위 사이를 한 칸 띄웁니다.

~~Flush Diaphrame~~Flush Diaphragm사양 이름의 철자를 제조사 자료와 맞춥니다.

~~2000ºF (1093ºC)~~2,000 ℉ (1,093 ℃)네 자리 숫자에는 쉼표를 넣고, 화씨와 섭씨 기호를 바르게 씁니다.

−
음수와 범위의 마이너스는 하이픈(-)이 아니라 마이너스 기호(−)로 씁니다.
kPa
단위는 숫자와 한 칸 띄우되, 줄이 바뀌어도 숫자와 떨어지지 않게 묶습니다.
XCQ-062
모델명은 고정폭 글꼴로 쓰고, 하이픈에서 줄이 바뀌지 않게 한 덩어리로 묶습니다.
KT-1
기종과 체계 이름은 공식 표기를 그대로 따릅니다. KT-1, FA-50, KUH처럼 씁니다.

07 / STRUCTURE정보 구조

페이지 열 개를
한 번의 비행으로

지금 사이트는 메뉴 네 개 아래 페이지 열 개로 나뉘어 있습니다. 두 시안은 메인 페이지를 한 번의 비행처럼 이어지는 일곱 장면으로 다시 짜고, 제품 자료와 게시판은 지금 자리를 지키도록 했습니다.

지금 · 메뉴 4개, 페이지 10개

회사소개회사소개거래처찾아오시는 길
제품소개압력센서베어링파이프라인 보수Telemetry System
자료실신제품Manual/Report
견적문의

제안 · 메인 한 장, 일곱 장면

01첫 화면하늘과 부품
02회사소개30년의 공급
03체계KT-1부터 유도무기까지
04파트너 네 곳Kulite · RBC · WRAP · TTC
05적용 분야다섯 가지 산업
06거래처33곳
07견적문의사양만 알려 주세요

그대로 두는 것제품 페이지 네 개와 PDF 115건공지사항 · 신제품 · Manual/Report 게시판지금의 관리자와 게시물 주소

자료 115건으로 가는
두 번째 길

모델명을 모르는 방문자도 자기 산업에서 출발해 맞는 제품에 닿을 수 있도록, 적용 분야 다섯 개와 제조사 네 곳을 잇는 길을 냈습니다. 산업 이름을 눌러 보세요.

KuliteRBCWRAPTTC

08 / PRESSURE LAB압력 실험실

압력은 어떻게
숫자가 되나

Kulite 압력센서의 핵심은 얇은 실리콘 막 위에 새긴 저항 네 개입니다. 압력이 막을 휘게 하면 두 저항의 값은 커지고 나머지 두 저항의 값은 작아집니다. 네 저항을 다리처럼 이은 회로(휘트스톤 브리지)가 그 차이를 아주 작은 전압으로 바꿉니다.

막대를 움직이거나 막을 눌러 압력을 걸어 보세요. 바람과 엔진을 고르면 빠르게 바뀌는 압력이 그대로 파형이 됩니다.

DIE · CROSS SECTION누르기

압력 0.0 kPa

출력 전압: 0.0 mV
R1 · R3 저항 변화: +0.00%
R2 · R4 저항 변화: −0.00%

OUTPUT · mV100 kPa = 100 mV

숫자는 원리를 보여 주려고 정한 예시입니다(공급 전압 10V, 100kPa에서 출력 100mV). 실제 출력과 범위는 모델마다 다릅니다. 압저항 실리콘 소자는 지금 사이트의 압력센서 페이지가 Kulite의 핵심 기술로 소개하는 방식입니다.

09 / MOTION모션

조립하고, 통과하고,
읽어 냅니다

움직임의 원칙은 네 가지입니다. 기기에서 「동작 줄이기」를 켜면 두 시안 모두 큰 움직임을 멈추고, 모든 글을 고정된 화면으로 보여 줍니다.

01
조립

흩어진 부품이 스크롤에 맞춰 제자리를 찾습니다. 첫 번째 시안은 브라우저에서 실시간으로 그리는 3D로, 두 번째 시안은 미리 렌더한 필름으로 베어링을 조립합니다.
02
통과

부품의 가운데 구멍이나 계기판의 조준선을 지나 다음 장면으로 넘어갑니다. 장면과 장면 사이가 끊기지 않게 이어 주는 장치입니다.
03
계측

압력과 진행률 같은 숫자는 장식이 아니라 실제로 움직이는 값처럼 바뀝니다. 시험 현장의 화면을 닮게 했습니다.
04
고정

목표를 붙잡는 조준선처럼, 중요한 장면은 화면에 잠시 고정되어 충분히 읽을 시간을 줍니다.

첫 번째 시안

TARGET LOCK하늘에서 부품으로

구름 위의 항공기에서 시작해 계기판이 목표를 고정하고, 실시간 3D 베어링이 조립되는 장면으로 내려갑니다. 제품 네 가지는 가로로 흐르는 패널로, 적용 분야는 겹쳐 쌓이는 카드로 보여 줍니다.

구름 위의 항공기와 계기판(HUD)이 켜지는 첫 화면
한 단어씩 밝아지는 회사 소개 문장
브라우저에서 그리는 3D 베어링 분해 · 조립
가로로 흐르는 제품 패널 네 장
겹쳐 쌓이는 적용 분야 카드 다섯 장

Pretendard · JetBrains Mono

DIRECTION NOTES

시안 A의 장면 가운데 연출에 공을 들인 순간을 골랐습니다. 사진을 누르면 장면별 화면을 크게 볼 수 있습니다.

계기판이 켜지는 첫 화면
스크롤을 내리면 항공기로 다가가며 수평선과 속도 눈금이 그려지고, 마지막에 목표를 고정합니다.
한 단어씩 밝아지는 문장
30년의 공급 이력을 담은 문장이 스크롤에 맞춰 한 단어씩 밝아집니다.
실시간 3D 베어링
외륜과 내륜, 볼과 케이지가 흩어진 상태에서 하나로 조립됩니다.
가로로 흐르는 제품
세로 스크롤이 가로 이동으로 바뀌며 파트너 네 곳의 패널이 지나갑니다.

TARGET LOCK PALETTEPC 화면 장면 24장에서 색마다 가까운 화소의 비율 · 주황은 화면의 0.7%에만 있습니다

A · TARGET LOCK하늘에서 부품으로 내려왔다면

B · PRECISION FILM부품의 구멍을 지나 다시 하늘로

두 번째 시안

PRECISION FILM부품에서 하늘로

직접 모델링하고 한 장씩 렌더링한 3D 필름 두 편이 스크롤에 맞춰 돕니다. 흩어진 베어링이 조립된 뒤 가운데 구멍을 지나 하늘로 나가고, 파트너 네 곳은 챕터마다 다른 연출로 보여 줍니다.

베어링 필름 256장: 조립에서 하늘까지
하늘 위 계기판과 회사 소개
압력센서 필름 168장과 움직이는 kPa 수치
그려지는 베어링 도면, 감기는 복합소재 테이프
센서에서 지상 수신까지 켜지는 신호 경로

Pretendard · JetBrains Mono

DIRECTION NOTES

시안 B의 장면 가운데 연출에 공을 들인 순간을 골랐습니다. 사진을 누르면 장면별 화면을 크게 볼 수 있습니다.

구멍 너머의 하늘
조립된 베어링이 돌기 시작하면 가운데 구멍 안으로 하늘이 보이고, 카메라가 그 구멍을 지나갑니다.
조립되는 압력센서
분해된 센서가 하나로 모이는 동안 부품 이름표와 압력 파동, kPa 수치가 함께 움직입니다.
스크롤로 그리는 도면
베어링의 외륜과 내륜, 볼의 피치원과 치수선이 스크롤에 맞춰 차례로 그려집니다.
켜지는 신호 경로
센서에서 신호 처리, 인코더, 송신을 거쳐 지상 수신까지 다섯 칸이 차례로 켜집니다.

FILM · FRAME BY FRAME

필름을 손으로 돌려 보기

두 번째 시안의 필름 두 편을 프레임 단위로 넘겨 볼 수 있습니다. 화면 위에서 가로로 끌거나 아래 막대를 움직여 보세요.

흩어진 외륜 · 내륜 · 볼 · 케이지가 조립되고, 가운데 구멍을 지나 하늘로 나갑니다.

001 / 079

PRECISION FILM PALETTEPC 화면 장면 33장에서 색마다 가까운 화소의 비율 · 금속과 노을이 조금 더 넓어졌습니다

10 / PROCESS과정

첫 번째 시안에서
두 번째 시안으로

첫 번째 시안을 화면에 띄워 놓고 처음부터 끝까지 다시 내려 보았습니다. 아쉬운 점이 세 가지 보였고, 두 번째 시안은 그 세 가지를 고치는 데서 출발했습니다.

01영상이 없었습니다
첫 번째 시안의 움직임은 사진과 실시간 3D가 전부였습니다. 두 번째 시안은 베어링과 압력센서를 3D로 모델링하고 한 장씩 렌더링한 필름 두 편을 스크롤에 맞춰 돌립니다.
02첫 화면 뒤에 빈 화면이 있었습니다
첫 화면의 연출이 끝나면 다음 장면이 오기 전까지 화면이 검게 비는 구간이 있었습니다. 두 번째 시안은 베어링의 가운데 구멍을 지나 곧바로 하늘 장면으로 이어지게 했습니다.
03제품이 작게 보였습니다
가로로 흐르는 제품 패널은 화면 위아래에 여백이 많았습니다. 두 번째 시안은 파트너 네 곳을 화면 전체를 쓰는 챕터로 바꾸고, 챕터마다 조립 · 도면 · 감싸기 · 신호 경로로 연출을 달리했습니다.

처음에 비교한
네 가지 방향

이야기의 뼈대를 정하려고 네 방향을 먼저 첫 화면 스케치로 비교했습니다. 두 방향은 시안이 되었고, 나머지 두 방향은 버리지 않고 시안 안의 장치와 자료 정리 방식으로 옮겼습니다.

HUD
계기판

비행 시험의 계기판 화면을 사이트의 뼈대로 삼는 방향입니다. 수평선과 눈금, 조준선이 장면을 이끕니다.
첫 번째 시안이 되었습니다
FILM
3D 필름

부품을 직접 모델링하고 렌더링해, 스크롤로 돌리는 필름으로 보여 주는 방향입니다.
두 번째 시안이 되었습니다
DRAWING
설계 도면

부품의 단면과 치수선을 그리는 기술 도면의 방향입니다.
RBC 챕터의 도면 연출로 옮겼습니다
CATALOG
사양 카탈로그

모델명과 사양표를 앞세우는 카탈로그의 방향입니다.
제품 페이지와 자료 115건의 정리 방식으로 옮겼습니다

필름 두 편을
만든 순서

두 번째 시안의 베어링과 압력센서는 사진이 아니라 3D로 모델링하고 한 장씩 렌더링한 프레임입니다. 스크롤 위치에 맞는 프레임을 골라 그리기 때문에, 방문자가 내리는 속도대로 부품이 조립됩니다.

01모델링
외륜 · 내륜 · 볼 · 케이지, 센서의 몸체 · 나사 · 막 · 케이블을 일반적인 형태로 모델링했습니다. 제조사의 실제 도면을 옮긴 것은 아닙니다.
02조명과 재질
금속의 반사가 살아나도록 어두운 바탕 위에 가장자리 빛을 두고, 케이지에는 황동색을 입혔습니다.
03렌더링
가로 화면용으로 베어링 256장과 압력센서 168장을, 세로 화면용으로 그 절반을 따로 렌더링했습니다.
04웹으로 옮기기
프레임을 가벼운 그림 파일로 바꾸고, 구멍 너머로 하늘이 보이는 장면은 구멍의 위치를 프레임마다 기록해 하늘 사진과 겹칩니다.

두 시안이 함께
지키는 네 가지

두 시안은 첫 화면과 움직임이 다르지만, 아래 네 가지는 똑같이 지킵니다. 어느 시안을 고르더라도 사이트를 운영하는 방식은 같아야 했기 때문입니다.

01견적문의는 어디서나 한 번에
상단 메뉴의 견적문의 버튼과 마지막 장면이 같은 곳으로 이어집니다. 제품명이나 적용 환경만 알려 주면 된다는 안내를 붙였습니다.
02파트너 네 곳은 같은 틀로
번호와 제조사 이름, 제품군, 적용 분야, 제조사 사이트 링크를 같은 순서로 보여 줍니다.
03자료는 지우지 않습니다
제품 페이지와 PDF 115건, 공지사항 · 신제품 · Manual/Report 게시판은 지금의 주소와 관리자를 그대로 씁니다.
04움직임을 끌 수 있게
동작 줄이기를 켠 기기에서는 필름과 3D를 멈추고 모든 글을 고정된 화면으로 보여 줍니다.

사진이 없는 장면은
새로 만들었습니다

항공기와 제품, 적용 분야의 장면은 이번 시안을 위해 새로 만들었습니다. 세명ADS의 실제 사진과 제조사의 제품 사진이 정해지면 같은 자리에서 바꿀 수 있도록, 장면마다 비율과 초점을 맞춰 두었습니다.

11 / MOBILE모바일

손바닥 위의
비행 시험

견적 문의는 시험 현장이나 출장지에서 휴대폰으로 시작되는 일이 많습니다. 두 시안 모두 390px 화면에서 장면을 다시 짰습니다. 두 번째 시안은 세로 화면용으로 따로 렌더링한 필름을 불러와, 부품이 화면 가운데를 채우게 했습니다.

COMPARE두 시안은 어떻게 다를까요

같은 회사를 여는
두 개의 첫 화면

두 시안은 같은 내용과 같은 색을 쓰지만, 방문자에게 먼저 건네는 장면이 다릅니다. 첫 번째 시안은 항공기와 계기판으로 이 회사가 일하는 현장을 먼저 보여 주고, 두 번째 시안은 3D 필름으로 부품의 정밀함을 먼저 보여 줍니다. 세명ADS가 이 사이트에서 가장 먼저 만나고 싶은 방문자에 따라 고를 수 있도록 차이를 정리했습니다.

구분A · TARGET LOCKB · PRECISION FILM

첫 화면구름 위의 항공기와 계기판흩어진 베어링과 조립 필름

방향하늘에서 부품으로부품에서 하늘로

3D브라우저에서 실시간으로 그리는 베어링미리 렌더한 필름 두 편(424장)

제품가로로 흐르는 패널 네 장화면 전체를 쓰는 챕터 네 개

적용 분야겹쳐 쌓이는 카드 다섯 장화면을 고정한 채 바뀌는 사진

불러오는 양사진과 3D 코드만 받아 가볍습니다필름 프레임을 PC에서 약 12MB, 휴대폰에서 약 3.5MB 받습니다

어울리는 방문자회사를 빠르게 파악하려는 구매 · 협력 담당자부품의 정밀함을 확인하려는 시험 · 설계 엔지니어

12 / CREDITSFLIGHT TEST CARD · BLUECANVAS WORKS 2026

SAEMYUNG ADS RENEWAL PROPOSAL