HIGHTECH POLYMER · 하이텍폴리머WEBSITE RENEWAL PROPOSAL

보이지 않는 것을보이게

하이텍폴리머 홈페이지 리뉴얼 제안
Matter in Motion · Polymer Scroll Film, 두 가지 방향

HIGHTECH POLYMER · CASE STUDY하이텍폴리머 홈페이지 리뉴얼 제안
스크롤을 내리면 흩어진 점들이 이어집니다

POLY · MER폴리머는 많은 부분이 이어진 것이라는 뜻입니다
작은 분자가 이어져 하나의 사슬이 됩니다

A · MATTER IN MOTION사슬은 빛이 통과하는 매듭이 되고
가능성은, 소재로부터.

B · POLYMER SCROLL FILM매듭이 풀려 그물 구조가 되고
보이지 않는 구조가 제품의 성능을 결정합니다

케이스 읽기

01 / OVERVIEW프로젝트 개요

독일과 미국의 소재를
국내 현장에 잇는 회사

하이텍폴리머는 한국 BASF㈜의 대리점이자 미국 Shakespeare의 한국 Representative입니다. 멜라민 폼 Basotect W, 미세 기공 폴리우레탄 엘라스토머 Cellasto, 열가소성 폴리우레탄 Elastollan, 도전사를 국내 업체에 공급하고, 독일 FAIST ChemTec의 소음 방지 패드와 Synwer의 패시브 하우스용 건축 자재도 함께 다룹니다.

CLIENT: (주)하이텍폴리머
한국 BASF 대리점 · Shakespeare 한국 대표
WEBSITE: htpolymer.co.kr
국문 · 영문 기업 홈페이지
OUR ROLE: 리서치, 브랜드 해석, 정보 구조,
UI 디자인, 모션그래픽, 3D 필름
DELIVERABLE: 메인 시안 2종, 모바일 화면,
컬러 · 서체 가이드, 모션 필름 2편

4곳글로벌 공급사독일의 BASF · FAIST ChemTec · Synwer와 미국의 Shakespeare
6종핵심 소재Basotect W · Cellasto · Elastollan · 도전사 · 소음 방지 패드 · 건축 자재
28종Elastollan 등급지금 홈페이지에 적힌 일곱 계열의 열가소성 폴리우레탄 등급
200장B안 필름 프레임고분자 사슬에서 도전사까지 스크롤에 맞춰 넘기는 3D 장면

02 / CHALLENGE출발점

하이텍폴리머KOR · ENG

지속 성장을 향해 달려가는
하이텍폴리머

사업 분야

Basotect WCellastoElastollan도전사자동차 분야건축 자재

회사소개사업분야오시는 길고객문의

1234

지금 하이텍폴리머 메인 화면의 구성

1로고 자리에는 이미지 없이 테마 기본 글꼴로 쓴 「하이텍폴리머」 글자만 있습니다. 회사를 알아볼 표지가 따로 없습니다.
2첫 화면의 문장 「지속 성장을 향해 달려가는 하이텍폴리머」만으로는 이 회사가 무엇을 공급하는지 알 수 없습니다.
3소재 네 가지는 「케미칼 분야」 아래에 「Basotect W / BASF (독일)」처럼 제품명과 공급사로만 나뉘어 있고, 어느 산업에 쓰이는지는 페이지를 하나씩 열어야 보입니다.
4푸터에는 copyright 2015가 적혀 있고, 사진은 2016년 7월에 올린 그대로입니다.

FOUR QUESTIONS

리뉴얼은
네 가지 질문에서 시작했습니다

지금 홈페이지에는 소재마다 자세한 설명과 물성표가 이미 있습니다. 다만 그 정보가 제품 페이지 깊숙이 들어 있어서, 첫 화면에서는 회사가 하는 일이 잘 보이지 않았습니다.

Q1
무엇을 공급하는 회사인지 첫 화면에서 보일까요?
지금 첫 화면에는 「지속 성장을 향해 달려가는 하이텍폴리머」라는 문장만 있습니다. 두 시안은 첫 문장을 소재 이야기로 바꿨습니다. A안은 「가능성은, 소재로부터.」, B안은 「보이지 않는 구조가 제품의 성능을 결정합니다」입니다.
Q2
제품 속에 숨은 소재를 어떻게 보여 줄까요?
A안은 빛이 통과하는 소재 조각을 크게 보여 주고, B안은 현미경으로 들어가듯 분자 구조를 보여 줍니다. 같은 문제를 하나는 인상으로, 하나는 구조로 풀었습니다.
Q3
공급사 넷, 소재 여섯, 여러 산업을 어떻게 엮을까요?
지금 메뉴는 공급사와 제품명으로만 나뉘어 있습니다. 두 시안은 소재와 산업을 서로 잇고, 산업에서 관련 소재로 바로 넘어갈 수 있게 했습니다.
Q4
숫자로 된 물성을 어떻게 읽게 할까요?
지금 홈페이지의 Cellasto 물성표는 밀도 일곱 단계와 항목 일곱 개가 표로만 놓여 있습니다. B안은 밀도를 고르면 인장강도 · 신율 · 인열강도가 함께 바뀌는 그래프로 바꿨습니다.

03 / NAME이름 다시 읽기

폴리머라는 이름에
회사가 하는 일이 있었습니다

새 문장을 짓기 전에 회사 이름부터 다시 읽었습니다. 폴리머라는 낱말은 고분자의 구조를 설명하는 말이면서, 공급사와 고객사를 잇는 하이텍폴리머의 일을 설명하는 말이기도 했습니다.

01 · NAME

HIGHTECH POLYMER

하이텍폴리머의 영문 이름은 HIGHTECH POLYMER입니다. 지금 홈페이지 회사소개에는 「High Quality in HIGHTECH POLYMER」라는 문장이 적혀 있습니다. 새 홈페이지를 그리기 전에 이 이름이 무엇을 말하는지부터 다시 읽었습니다.

02 · POLY + MER

많은 부분이 이어진 것

폴리머(polymer)는 그리스어 poly(많은)와 meros(부분)를 합친 말입니다. 단량체라는 작은 분자가 수천 개 이어져 긴 사슬을 이루면 비로소 고분자가 됩니다.

03 · STRUCTURE

이어지는 방식이 성질을 정합니다

사슬이 어떻게 이어지고 얽히는지에 따라 같은 고분자도 단단해지거나 부드러워집니다. 멜라민 폼의 그물 구조와 엘라스토머의 복원력은 모두 이 구조에서 나옵니다.

04 · REPRESENTATIVE

회사도 하나의 사슬입니다

하이텍폴리머는 인사말에서 스스로를 「공급사와 고객들의 대변인」이라고 소개합니다. 독일과 미국의 공급사 네 곳을 국내 고객사와 잇는 일이어서, 회사가 하는 일이 이름과 닮아 있습니다.

05 · INVISIBLE

그런데 소재는 보이지 않습니다

이렇게 공급된 소재는 완제품 안으로 들어갑니다. 서스펜션의 완충 부품, 차체의 소음 방지 패드, 벽 속의 방습지, 방진복에 짜 넣은 실이 그렇습니다. 다 만든 제품에서는 소재도, 하이텍폴리머라는 이름도 보이지 않습니다.

06 · TWO OPENINGS

두 시안이 고른 같은 낱말

A안은 「보이지 않는 차이가 더 나은 내일을 만듭니다」로, B안은 「보이지 않는 구조가 제품의 성능을 결정합니다」로 회사를 소개합니다. 따로 그린 두 시안이 모두 「보이지 않는」이라는 낱말에서 출발했고, 이 사례의 제목도 여기에서 가져왔습니다.

04 / CHAIN공급사 · 소재 · 산업

네 공급사, 여섯 소재,
네 가지 산업

하이텍폴리머가 다루는 소재는 공급사로 나누면 네 갈래이고, 쓰이는 곳으로 나누면 네 가지 산업이 됩니다. 지금 홈페이지에는 공급사와 제품명으로 나눈 메뉴만 있어서, 자동차 회사의 담당자는 어느 소재가 자기 일에 맞는지 페이지를 하나씩 열어 확인해야 합니다.

두 시안은 소재와 산업을 서로 잇는 구조로 바꿨습니다. 아래 지도에서 공급사나 소재, 산업을 누르면 이어진 선이 밝아집니다.

SUPPLIER공급사

MATERIAL소재

INDUSTRY산업

지도 읽는 법공급사 · 소재 · 산업 가운데 하나를 누르면 그와 이어진 항목과 설명이 여기에 나타납니다.

공급사와 소재는 지금 홈페이지의 인사말과 제품 페이지를, 산업 분류는 B안의 정보 구조를 따랐습니다.

05 / LAB소재 실험실

눈에 보이지 않는 성질을
직접 움직여 보게

소재의 장점은 대부분 제품 안에서, 그것도 아주 작은 크기에서 드러납니다. 두 시안이 사진과 필름으로 그 장면을 보여 준다면, 이 사례에서는 한 걸음 더 나아가 네 가지 성질을 직접 움직여 볼 수 있게 만들었습니다. 수치는 모두 지금 홈페이지의 제품 페이지에 적힌 값입니다.

엉킨 사슬늘인 사슬 01 · STRETCH · Elastollan

늘였다 놓으면 돌아오는 사슬

열가소성 폴리우레탄(TPU)은 엉킨 사슬이 당기면 펴지고 놓으면 다시 감기는 성질 덕분에 신발 밑창과 케이블 피복, 호스에 쓰입니다. 막대를 끌어 사슬을 늘였다가 놓아 보세요.

500
600
1100
B
C
R
S
일곱 계열 · 스물여덟 가지 등급

그대로60% 누르기

인장강도: 3.6 N/mm²
파단 신율: 350 %
인열강도: 10.0 N/mm
압축 영구 줄음률: 2.6 %

02 · PRESS · Cellasto

눌러도 옆으로 퍼지지 않게

꽉 찬 고무 덩어리는 누르면 옆으로 불룩해집니다. Cellasto는 미세한 기공이 먼저 줄어들기 때문에 옆으로 거의 퍼지지 않고, 놓으면 원래 높이로 돌아옵니다. 지금 홈페이지는 이 특징을 「최소한의 횡 팽창으로 높은 압축량」이라고 적었습니다. 밀도(g/cm³)를 바꾸면 Cellasto MH의 물성 값이 함께 바뀝니다.

03 · OPEN CELL · Basotect W

빛이 지나가는 그물

Basotect W는 멜라민 수지를 발포한 오픈셀 폼입니다. 기공이 막혀 있지 않고 가는 뼈대만 3차원으로 이어져 있으며, 국내에서는 「매직블럭」이라는 세정용품으로 잘 알려져 있습니다. 그림 위에서 포인터를 움직이면 그물 사이로 빛이 지나갑니다.

1kgF902 R022를 풀면 409,091m

마라톤 코스(42.195km) 약 9.7개를 이은 길이입니다

04 · CONDUCT · 도전사

정전기를 흘려보내는 실

Shakespeare의 도전사는 전기가 통하는 나일론(PA6)과 폴리에스터 실입니다. 원단에 몇 가닥만 짜 넣어도 쌓인 정전기를 이 실이 흘려보내기 때문에 반도체 공장의 방진복과 제전복에 쓰입니다. PA6 도전사 F902 R022의 평균 저항은 4×10⁵ Ω/cm, 녹는점은 220℃입니다.

도전사의 길이는 지금 홈페이지 F902 R022 물성표의 409,091 meters per kilogram을 옮긴 값이고, 마라톤 코스 한 칸은 42.195km입니다.

06 / STRUCTURE방문자와 장면 순서

하이텍폴리머를 찾는
다섯 부류의 사람들

하이텍폴리머의 홈페이지에는 자동차 부품 회사의 구매 담당자부터 해외 공급사까지 서로 다른 목적을 가진 사람들이 찾아옵니다. 찾는 정보가 저마다 달라서, 각자가 도착할 장면을 먼저 정했습니다.

01자동차 부품 회사의 구매 · 개발 담당자
소음 · 진동 · 충격을 줄일 소재와 등급을 찾고 물성을 비교합니다.
소재 · 물성 데이터
02건축 · 패시브 하우스 시공사
기밀 테이프와 투습 · 방습지의 사양과 시공 위치를 확인합니다.
건축 자재 · 적용 분야
03섬유 · 의류 업체
방진복과 아웃도어 의류에 넣을 도전사의 종류와 굵기를 찾습니다.
도전사 · 물성표
04생활용품 · 산업용 제품 회사
세정용 폼, 신발 밑창, 의자 부품처럼 완제품에 맞는 소재를 고릅니다.
적용 분야 · 소재 아카이브
05해외 공급사 · 협력사
한국 대리점이 다루는 품목과 회사 정보를 영문으로 확인합니다.
회사소개 · 영문 사이트

같은 소재를
새 순서로

지금 메인 화면은 회사 문장 하나와 바로가기 칸으로 이루어져 있어서, 소재가 무엇이고 어디에 쓰이는지 설명하는 장면이 없습니다. 두 시안은 첫 장면에서 소재를 보여 준 뒤 회사와 공급사, 소재, 산업, 문의 순서로 이야기를 이었고, B안은 그 사이에 물성 데이터를 넣었습니다. 색 점은 각 장면이 맡은 이야기입니다.

첫 문장
회사 · 공급사
소재
산업
물성 데이터
문의

지금 메인 화면5장면

01지속 성장을 향해 달려가는 하이텍폴리머슬라이드 사진 세 장과 문장 하나
02사업 분야이미지 세 장
03제품 · 분야 바로가기사진 여섯 칸의 링크
04회사소개 · 오시는 길 · 고객문의아이콘 네 개
05푸터copyright 2015

A · Matter in Motion6장면

01가능성은, 소재로부터.빛이 통과하는 매듭과 9.87초 필름
02보이지 않는 차이가회사의 관점과 공급사 네 곳
03소재를 알면, 다음이 보입니다소재 네 가지 아카이브와 상세 창
04소재, 산업이 되다자동차 · 건축 · 산업과 생활 가로 장면
05좋은 소재에서 좋은 해답으로상담 세 단계
06당신의 다음을, 함께문의

B · Polymer Scroll Film8장면

01보이지 않는 구조가200장 스크롤 필름과 다섯 장면
02회사 소개 문장공급사 · 소재 · 사업 분야의 숫자
03검증된 글로벌 소재를공급사 네 곳
046가지 핵심 소재옆으로 넘기는 소재 여섯 가지
05밀도를 고르면Cellasto MH 물성 그래프
06자동차부터 클린룸까지산업 네 가지와 관련 소재
07고객사의 직원이라는 마음으로인사말 한 문장
08필요한 소재를 알려 주세요관심 소재를 고르는 문의

07 / COLOR컬러 차트

빛이 통과하는 호박색과
현미경 속의 청록

A안은 투명한 소재에 빛이 지나갈 때 생기는 호박색을 골랐습니다. 숯빛 바탕에 주황 하나만 두고, 나머지 색은 소재 사진이 맡게 했습니다.

B안은 분자 구조를 들여다보는 현미경 화면을 떠올렸습니다. 깊은 남색 바탕에 청록 하나로 구조선과 버튼, 그래프를 그렸습니다. 두 시안 모두 강조색을 하나만 남겨 그 색이 닿는 곳에 눈이 가도록 했고, 장면 캡처에서 세어 보면 주황은 A안 화면의 1.6%, 청록은 B안 화면의 0.2%만 차지합니다.

A · 빛이 통과할 때#11110F#FF6B3A

B · 구조를 비출 때#050A12#5CC8E4

같은 소재,
두 가지 빛

두 시안의 색이 무엇을 바꾸는지 확인하려고, 하이텍폴리머가 다루는 소재 여섯 가지를 같은 자리에 놓고 빛만 바꾼 재료 보드를 만들었습니다. 왼쪽은 A안의 호박색 빛, 오른쪽은 B안의 청록 빛입니다.

A안의 빛 아래에서는 TPU 알갱이가 호박색으로 빛나고, B안의 빛 아래에서는 같은 소재가 표본처럼 정돈되어 보입니다. 가운데 선을 좌우로 끌면 두 장면을 견주어 볼 수 있습니다.

A안 Matter in Motion의 재료 보드: 숯빛 돌판 위에 놓인 흰 멜라민 폼, 노란 폴리우레탄 범퍼, 투명하고 호박색인 TPU 알갱이, 검은 도전사 실패, 알루미늄 부틸 테이프, 회색 소음 방지 패드, 주황 종이 띠가 왼쪽의 주황빛을 받고 있는 장면

B안 Polymer Scroll Film의 재료 보드: 눈금이 새겨진 남색 유리판 위에 같은 소재 여섯 가지가 표본처럼 줄지어 놓이고, 위에서 청록빛이 비추는 장면

A · Matter in Motion

숯빛과 호박색

바탕 · 45.4%첫 화면과 소재 · 산업 장면, 푸터의 바탕입니다. 순수한 검정보다 조금 따뜻한 숯빛입니다.
문의 · 사진의 그림자 · 33%문의 장면의 바탕이며, 사진 속 그림자와 같은 높이의 숯빛이라 화면 비율이 높게 나옵니다.
밝은 장면 · 글자 · 18%회사 소개와 상담 장면의 바탕이고, 어두운 장면에서는 글자색으로 씁니다.
보조 글자 · 2%설명 문장과 작은 라벨에 쓰는 회색입니다.
강조 · 1.6%제목 끝의 마침표와 기호, 진행 막대에만 쓰는 주황입니다.

B · Polymer Scroll Film

남색과 청록

바탕 · 75.7%스크롤 필름과 대부분의 장면이 놓이는 깊은 남색입니다.
카드 · 표 · 18.5%공급사 카드와 물성표, 문의 양식의 바탕입니다.
라벨 · 2.2%단위와 작은 라벨에 쓰는 색입니다.
보조 글자 · 1.9%설명 문장에 쓰는 회청색입니다.
글자 · 1.6%제목과 본문 글자색입니다. 흰색에 남색을 조금 섞었습니다.
강조 · 구조선 · 0.2%버튼과 그래프, 필름 속 구조선에 쓰는 청록입니다.

색 견본을 누르면 HEX 값이 복사됩니다. 견본 안의 숫자는 그 위에 올리는 글자색과의 명도 대비이고, 비율은 두 시안의 장면 캡처에서 각 색에 가까운 화소를 세어 낸 값입니다.

08 / TYPOGRAPHY이름과 서체

로고가 없던 이름을
글자로 세우기

지금 홈페이지 머리글에는 로고 이미지 없이 「하이텍폴리머」라는 글자만 있습니다. 그래서 두 시안은 각자 이름을 화면에 다시 세웠습니다. A안은 궤도 세 개가 겹친 원자 모양 기호와 HT POLYMER를, B안은 자간을 넓게 벌린 HIGHTECH POLYMER를 만들었습니다.

하이텍폴리머

지금테마 기본 글꼴로 적은 회사 이름입니다.

HT POLYMER하이텍폴리머

A · Matter in Motion궤도 세 개가 겹친 기호와 굵기 800의 짧은 영문 이름입니다.

HIGHTECH POLYMER하이텍폴리머

B · Polymer Scroll FilmBarlow 600에 자간 0.3em을 준 긴 영문 이름입니다.

Pretendard 600 · A안 첫 화면600 / -0.065em

가능성은,
소재로부터.

Matter
in motion.

A안은 큰 한글 제목 옆에 기울인 세리프 영문 「Matter in motion.」을 겹쳐 두었습니다. 기계적인 소재 이야기에 손으로 쓴 듯한 결을 더하려는 선택입니다.

Barlow 600 · B안 이름과 숫자tracking 0.30em

HIGHTECH
POLYMER

좁게넓게

4×10⁵ Ω/cm0.35 g/cm³

보이지 않는 구조가
제품의 성능을 결정합니다

한글 제목은 Pretendard 700, 자간 -0.04em입니다. 물성 숫자는 고정폭 글꼴 Geist Mono로 적어 자릿수가 세로로 맞습니다. 막대를 움직이면 영문 이름의 자간이 바뀝니다.

09 / MOTION모션 원칙

필름은 스크롤로,
장면은 옆으로

두 시안 모두 첫 화면의 필름을 스크롤로 넘깁니다. 내리면 앞으로, 올리면 뒤로 재생되므로 보는 사람이 장면의 속도를 정합니다. 산업과 소재처럼 나란히 놓인 내용은 세로 스크롤을 가로 이동으로 바꿔 차례로 보여 줍니다. 운영체제에서 동작 줄이기를 켜면 두 시안 모두 정지 화면만 보여 줍니다. 아래 네 장의 카드는 스크롤을 따라 실제로 움직입니다.

01 · MATTER IN MOTION · A

스크롤로 감는 9.87초

A안 첫 화면의 필름은 9.87초 길이입니다. 스크롤 위치에 맞춰 재생 위치를 옮기기 때문에 내리면 매듭이 풀리고, 올리면 다시 감깁니다. 이 카드를 지나가는 동안 같은 필름의 48장면이 넘어갑니다.

02 · POLYMER SCROLL FILM · B

200장을 넘기는 필름

B안 첫 장면은 미리 그려 둔 200장의 3D 프레임을 스크롤 위치에 맞춰 캔버스에 그립니다. 프레임 번호가 다섯 장면의 경계에 닿으면 문장이 바뀝니다. 이 카드에서는 그중 48장이 넘어갑니다.

03 · IN EVERY POSSIBILITY · A

옆으로 지나가는 산업

A안은 세로 스크롤을 가로 이동으로 바꿔 자동차, 건축, 산업과 생활 세 장면을 차례로 보여 줍니다. 이 카드의 세 장면도 스크롤을 따라 옆으로 지나갑니다.

04 · WORD BY WORD · B

한 단어씩 밝아지는 문장

B안의 회사 소개 문장은 처음에 흐리게 놓여 있다가, 스크롤을 따라 단어가 하나씩 밝아집니다. 긴 문장도 읽는 속도에 맞춰 끝까지 따라가게 됩니다.

제안 A안 · 매듭

Matter in Motion가능성은, 소재로부터.

투명한 소재 조각에서 시작해 산업의 장면으로 넓어지는 방향입니다. 첫 화면에서는 빛이 통과하는 고분자 매듭이 9.87초 필름으로 돌고, 스크롤을 내리면 필름이 앞으로, 올리면 뒤로 재생됩니다. 그다음에 회사의 관점과 공급사 네 곳, 소재 네 가지를 고르는 아카이브, 자동차 · 건축 · 산업과 생활을 옆으로 넘기는 장면, 상담 세 단계를 차례로 놓았습니다.

빛이 통과하는 고분자 매듭과 스크롤로 앞뒤로 재생하는 9.87초 필름
소재를 고르면 사진의 빛과 이름이 바뀌는 소재 아카이브와 상세 창
자동차 · 건축 · 산업과 생활을 가로로 넘기는 적용 분야 장면
Understand · Connect · Move forward 상담 세 단계

Pretendard · Georgia Italic

DIRECTION NOTES

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

가능성은, 소재로부터.
빛이 통과하는 고분자 매듭이 오른쪽에 놓인 첫 화면입니다. 제목 끝의 마침표 하나만 주황으로 칠했습니다.
연결될수록, 가능성은 커집니다
스크롤을 내리면 매듭이 입자로 흩어져 하나의 구를 이루고, 화면에 두 번째 문장이 떠오릅니다.
궤도 세 개
필름의 끝에서 구는 궤도 세 개로 펼쳐집니다. 머리글의 기호도 같은 궤도 세 개로 그렸습니다.
보이지 않는 차이
밝은 종이 위에 회사의 관점을 적고, 아래에 공급사 네 곳의 이름을 나란히 두었습니다.
소재 아카이브
소재를 고르면 왼쪽 사진의 빛깔과 이름, 한 줄 설명이 함께 바뀝니다. 아래에는 주황 띠 문장이 지나갑니다.
더 조용하게. 더 편안하게.
자동차 장면입니다. 세로 스크롤이 가로 이동으로 바뀌며 산업 세 장면을 차례로 지나갑니다.
공간의 성능을, 한 겹 더 높이다.
건축 장면에서는 기밀과 방수, 투습과 방습을 「보이지 않는 곳에서 완성되는 쾌적함」으로 설명합니다.
좋은 소재에서 좋은 해답으로
Understand · Connect · Move forward 세 단계로 상담이 어떻게 이어지는지 보여 줍니다.

MATTER IN MOTION빛이 통과하는 매듭을 풀어

POLYMER SCROLL FILM보이지 않는 구조 안으로

제안 B안 · 구조

Polymer Scroll Film보이지 않는 구조가 제품의 성능을 결정합니다

분자 하나에서 시작해 완제품으로 다가가는 방향입니다. 첫 화면은 고분자 사슬, 오픈셀 그물, 탄성 복원, 도전사 네 장면을 200장의 3D 프레임으로 넘기는 스크롤 필름입니다. 그다음에 회사 소개와 공급사 네 곳, 옆으로 넘기는 핵심 소재 여섯 가지, 밀도를 고르면 물성이 바뀌는 Cellasto MH 그래프, 산업 네 가지를 차례로 놓았습니다.

고분자 사슬 · 오픈셀 · 탄성 복원 · 도전사로 이어지는 200장 스크롤 필름
공급사와 제품 정보를 함께 적은 핵심 소재 여섯 가지 가로 장면
밀도 일곱 단계에 따라 바뀌는 Cellasto MH 물성 그래프와 전체 물성표
산업 네 가지에서 관련 소재로 바로 가는 링크와 관심 소재를 고르는 문의

Pretendard · Barlow · Geist Mono

DIRECTION NOTES

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

보이지 않는 구조가
흩어진 단량체가 떠 있는 첫 화면입니다. 오른쪽 장면 목록으로 필름의 다섯 장면을 바로 고를 수 있습니다.
사슬이 얽혀 그물이 될 때
스크롤을 따라 단량체가 사슬로 이어지고, 사슬이 얽혀 멜라민 폼의 3차원 그물 구조가 됩니다.
전기가 흐르는 실
필름의 마지막 장면은 도전사입니다. 평균 저항 4×10⁵ Ω/cm를 문장 옆에 함께 적었습니다.
회사 소개 한 문단
스크롤을 따라 단어가 하나씩 밝아지는 회사 소개 문장입니다. 아래에 공급사 · 소재 · 사업 분야를 숫자로 정리했습니다.
6가지 핵심 소재
소재마다 공급사와 원산지, 구조와 특징, 적용 분야를 같은 틀에 적고 옆으로 넘깁니다.
밀도를 고르면
Cellasto MH의 밀도를 고르면 인장강도 · 파단 신율 · 인열강도 그래프가 함께 움직입니다.
자동차부터 클린룸까지
산업 네 가지를 사진과 함께 소개하고, 산업마다 관련 소재로 바로 가는 링크를 달았습니다.
필요한 소재를 알려 주세요
관심 소재를 고르고 적용 제품과 요구 물성을 적는 문의 양식입니다.

10 / PROCESS사진과 필름

제품을 새로 찍는 대신
소재가 일하는 장면을 그렸습니다

지금 홈페이지의 사진은 2016년에 올린 제품 사진뿐이어서, 큰 화면에 쓸 장면을 새로 만들어야 했습니다. 두 시안은 실제 제품을 흉내 내기보다 소재가 쓰이는 장면과 소재 속 구조를 그리는 쪽을 택했습니다.

A안은 사진 네 장과 직접 짠 3D 코드로 9.87초 필름을 만들었고, B안은 사진 열한 장과 200장의 3D 프레임, 10초 필름을 만들었습니다. 특정 납품 사례처럼 보이지 않도록, 사진에는 상표와 글자를 넣지 않았습니다.

매듭에서 궤도까지,
A안의 9.87초

A안의 필름은 하나의 3D 장면 안에서 투명한 매듭이 입자로 흩어지고, 다시 구가 되었다가 궤도를 그리는 순서로 이어집니다. 필름은 모든 프레임을 바로 찾아갈 수 있게 저장해, 스크롤을 빠르게 움직여도 장면이 끊기지 않습니다.

01투명한 매듭빛이 통과하는 고분자 리본이 매듭을 짓고 천천히 돕니다.
02흩어지는 입자매듭의 표면이 입자로 흩어지며 사슬의 흔적을 남깁니다.
03하나의 구입자가 다시 모여 하나의 구를 이룹니다.
04궤도 구조구 둘레로 궤도가 생기며 「연결」의 장면을 엽니다.

어두운 콘크리트 스튜디오에 놓인 은회색 전기 스포츠카의 뒷모습과 차체를 따라 흐르는 호박색 빛 — 자동차 · 더 조용하게

해 질 녘 풀밭에 선 콘크리트와 목재의 패시브 하우스, 큰 유리창 안으로 따뜻한 빛 — 건축 · 한 겹 더

검은 바탕 위에 흩어진 투명하고 호박색인 열가소성 폴리우레탄 알갱이 — 소재 · TPU 알갱이

분자에서 실까지,
B안의 200장

B안은 단량체, 사슬, 그물, 압축과 복원, 도전사 다섯 장면을 하나의 3D 장면으로 이어 200장의 프레임으로 내보냈습니다. 넓은 화면용 1600×900 프레임과 세로 화면용 720×1280 프레임을 따로 만들어, 휴대폰에서도 구조가 화면을 채웁니다. 소재 여섯 가지와 산업 네 가지는 사진으로 보여 줍니다.

01단량체흩어진 작은 분자가 떠 있는 첫 장면입니다.
02사슬분자가 이어져 나선과 지그재그의 사슬이 됩니다.
03그물사슬이 얽혀 오픈셀 폼의 3차원 그물 구조가 됩니다.
04압축과 복원눌린 층이 옆으로 퍼지지 않고 다시 돌아옵니다.
05도전사그물이 가늘게 모여 전기가 흐르는 실 한 가닥이 됩니다.

Basotect W단면에 오픈셀이 드러난 멜라민 폼
Cellasto서스펜션 스프링 옆의 범퍼
Elastollan공중에 흩어지는 TPU 알갱이와 호스
도전사회색 원단에 짜 넣은 검은 실
Noise Anti-pad차문 안쪽에 붙인 소음 방지 패드
Synwer창호 모서리의 부틸 테이프와 방습지

B · POLYMER SCROLL FILM · 16:9 · 0:10

단량체가 사슬과 그물이 되고, 눌렸다 돌아온 뒤 실 한 가닥이 되기까지를 이은 필름입니다. 시안에서는 「모션 필름 보기」 버튼으로 엽니다.

A · MATTER IN MOTION · 16:9 · 0:10

투명한 매듭이 입자와 구, 궤도로 바뀌는 필름입니다. 시안에서는 스크롤을 따라 앞뒤로 재생됩니다.

11 / MOBILE모바일

손안에서도
같은 매듭과 구조

현장에서 소재를 찾는 담당자는 휴대폰으로 물성을 확인하는 경우가 많습니다. A안은 모바일에서 가로로 넘기던 산업 장면을 세로 카드로 쌓고, 사진이 천천히 확대되도록 바꿨습니다. B안은 세로 화면 전용 프레임으로 필름을 따로 만들고, 옆으로 넘기던 소재 여섯 가지를 세로로 이어 보여 줍니다.

COMPARE두 방향은 어떻게 다를까요

같은 소재를 여는
매듭과 구조

두 시안은 같은 회사와 같은 소재를 다루지만 첫 화면에서 먼저 하는 말이 다릅니다. A안은 소재가 주는 인상에서 시작해 산업의 장면으로 넓어지고, B안은 소재 속 구조에서 시작해 기술 정보로 들어갑니다. 하이텍폴리머가 첫 화면에서 가장 먼저 전하고 싶은 이야기에 따라 고를 수 있도록 차이를 정리했습니다.

구분A · Matter in MotionB · Polymer Scroll Film

첫 화면빛이 통과하는 고분자 매듭이 도는 9.87초 필름분자에서 실까지 다섯 장면을 넘기는 200장 필름

첫 문장가능성은, 소재로부터.보이지 않는 구조가 제품의 성능을 결정합니다

색숯빛 바탕과 주황 하나깊은 남색 바탕과 청록 하나

서체Pretendard · Georgia ItalicPretendard · Barlow · Geist Mono

이름궤도 세 개의 기호와 HT POLYMER자간을 넓게 벌린 HIGHTECH POLYMER

소재네 가지를 고르는 아카이브와 상세 창여섯 가지를 옆으로 넘기는 장면

산업자동차 · 건축 · 산업과 생활 세 장면산업 네 가지와 관련 소재 링크

데이터소재 설명과 원래 제품 페이지 링크Cellasto MH 밀도별 물성 그래프

무게를 둔 곳소재가 주는 인상과 가능성소재의 구조와 기술 정보

12 / CREDITSTECHNICAL DATA SHEET · BLUECANVAS WORKS 2026

MATERIAL HTP-WEB · REV. 10