테라온 · TERAONRENEWAL PROPOSAL

열의 방향을설계하다

나노탄소 소재 기업 테라온의 홈페이지 리뉴얼 제안
Thermal Flow · Warm the Human, Cool the Earth, 두 가지 방향

케이스 읽기

TERAON · CASE STUDY테라온의 O는 전원 단추입니다
스크롤을 내리면 전원이 켜집니다

WARM · VESTATON®필름 한 장이 면 전체로 데워집니다
250℃ 이상까지 수 초, 발열 균일도 98% 이상

COOL · TERABOND®칩 아래의 은 소결층이 열을 아래로 빼냅니다
열전도도 150W/mK 이상, 압력 없이 소결합니다

WARM THE HUMAN, COOL THE EARTH한 회사가 열을 두 방향으로 다룹니다
사람 쪽으로 데우고, 칩에서는 빼냅니다

01 / OVERVIEW프로젝트 개요

열을 다루는 소재 회사,
두 개의 이름

테라온은 2018년에 설립된 소재 기업입니다. 탄소나노튜브와 그래핀으로 만든 발열 소재를 얇은 필름히터 VESTATON®으로 만들고, SiC 전력반도체의 칩을 기판에 붙이는 칩본딩제 TERABOND®를 만듭니다. 2022년에 SK실트론의 계열사가 되었고, 경기도 안성의 두 공장에서 소재와 히터를 생산합니다.

블루캔버스는 2025년부터 테라온 홈페이지의 호스팅과 유지보수를 맡고 있습니다. 올해 1월에 첫 리뉴얼 시안 네 장을 보냈고, 10월에는 처음부터 다시 그린다면 어떤 사이트가 될지 움직이는 시안 두 가지로 다시 제안했습니다. 이 페이지는 두 번의 제안을 오가며 고민한 기록입니다.

CLIENT: 테라온 TERAON
SK실트론 계열사
WEBSITE: teraon.co.kr
국문 · 영문
OUR ROLE: 호스팅 · 유지보수, 리뉴얼 리서치,
브랜드 해석, 정보 구조, UI, 모션
DELIVERABLE: 1월 첫 시안 4종, 10월 메인 시안 2종,
모바일 화면, 컬러 · 서체 · 움직임 기준

2개제품 브랜드열을 내는 VESTATON®과 열을 빼내는 TERABOND®
250℃필름이 오르는 온도VESTATON®이 수 초 만에 닿는 온도(이상)
150W/mK칩본딩제의 열전도도TERABOND®가 칩 아래에서 열을 옮기는 정도(이상)
6개두 번에 걸친 시안1월의 첫 시안 네 장과 10월의 움직이는 시안 두 가지

지금 사이트의 로고입니다. 끝이 둥근 같은 굵기의 선으로 TERAON을 쓰고, E의 가로획 세 개와 O 위의 전원 막대에만 오렌지를 칠했습니다.

02 / CHALLENGE출발점

company_logo · cont_logo.png회사 소개 페이지의 로고 그림입니다. 이 사이트에서 테라온이 무엇을 하는 회사인지 가장 짧게 말하는 문장이, 글자가 아니라 205×62px 그림 안에 들어 있었습니다.

01Nano Carbon Film Heater for EVVESTATON® · 전기차자세히 보기

VESTATON® 자세히 보기팝업 · 3개 구역

차 안의 여덟 부위 · Steering wheel부터 Door trim까지
Hands Off Detection for Autonomous Driving
Leading Energy Solution

02Die Attach Paste for SiC Power SemiconductorTERABOND® · 칩본딩제자세히 보기

TERABOND® 자세히 보기팝업 · 8개 구역

Top · Die · Lead · Bottom Attach
Thermal Cycle Tests
Void & Delamination Test Results
Sintering Test Results
우수한 공정성 · Open Time
Manufacturing Process
Analysis Process
제품 특징 · 사양표(TDS)

03NEWS소식 한 건

지금 메인 페이지의 구성입니다(2026년 10월 기준). 전체 화면 세 장 가운데 두 장에 「자세히 보기」 팝업이 붙어 있고, 차 안의 여덟 부위와 칩본딩제의 시험 결과, 사양표는 모두 팝업 안에 있습니다.

01
세 장의 화면, 두 개의 팝업
지금 메인 페이지는 전체 화면 세 장입니다. 차 안의 여덟 부위와 핸즈오프 감지, 칩본딩제의 시험 결과와 공정, 사양표는 모두 「자세히 보기」를 눌러야 열리는 팝업 두 개 안에 들어 있습니다. 회사가 가장 자랑할 내용이 첫 화면 뒤에 숨어 있었습니다.
02
세 곳에 따로 적힌 사양
칩본딩제의 열전도도와 공정 온도, 칩 크기는 메인 팝업과 칩본딩제 페이지, 회사 소개의 Advanced Materials에 따로 적혀 있습니다. 운영하는 쪽에서는 수치 하나를 고칠 때 세 곳을 함께 맞춰야 하는 구조입니다.
03
그림 안에 갇힌 태그라인
「Warm the Human, Cool The Earth」는 회사 소개 페이지의 로고 그림 안에만 있습니다. 글자가 아니라 그림이어서 검색에도, 화면을 읽어 주는 프로그램에도 잡히지 않습니다.
04
보이지 않는 열
VESTATON®의 장점은 면 전체가 고르게 데워지는 것이고, TERABOND®의 장점은 칩 아래로 열이 잘 빠지는 것입니다. 둘 다 눈에 보이지 않는 열의 이야기인데, 사이트는 이를 렌더링 이미지와 숫자로만 설명하고 있었습니다.

03 / TWO DIRECTIONS두 방향의 열

데우는 소재와
식히는 소재

리뉴얼을 시작하기 전에 두 제품이 하는 일을 다시 적었습니다. VESTATON®은 전기를 받아 필름 전체에서 열을 내고, TERABOND®는 칩 아래에서 열을 빼냅니다. 한 회사의 두 제품이 정반대 방향으로 열을 다루고 있었습니다.

WARM열을 사람 쪽으로

VESTATON®Nano Carbon Film Heater

COOL열을 칩 바깥으로

TERABOND®Die Attach Paste for SiC

수치 출처: 테라온 홈페이지의 필름히터 · 칩본딩제 · 회사 소개 페이지(2026년 10월)

WARM · VESTATON®
필름 한 장이 면 전체로 데워집니다
전극 사이에 흐르는 전기가 탄소나노튜브와 그래핀 입자를 지나며 열이 됩니다. 선을 깔아 데우는 열선과 달리 면 어디에서나 열이 나서, 곡면이나 복잡한 모양에 붙여도 고르게 데워집니다.
WARM · TO THE HUMAN
열은 사람 쪽으로 갑니다
데워진 필름은 원적외선으로 가까이 있는 몸을 직접 데웁니다. 손이 닿으면 터치센서가 온도를 낮춰 저온화상을 막습니다. 전기차의 도어 트림과 콘솔, 바닥처럼 사람 가까이에 붙는 이유입니다.
COOL · TERABOND®
칩의 열은 아래로 빠집니다
SiC 전력반도체는 켜지고 꺼질 때마다 열을 냅니다. TERABOND®는 칩과 구리 기판 사이에서 은 소결층이 되어, 그 열을 기판과 방열판으로 옮깁니다.
COOL · TO THE EARTH
덜 뜨거우면 덜 샙니다
열이 잘 빠지면 칩이 덜 뜨거워지고, 같은 전기를 더 적게 잃습니다. 테라온은 같은 패키지에서 가압 필름형 본딩재보다 Rds(on)이 약 5% 낮았다는 시험 결과를 공개하고 있습니다.
OUR READING
한 문장이 이미 있었습니다
열을 사람 쪽으로 보내는 제품과 열을 칩 바깥으로 보내는 제품. 회사 소개 페이지의 로고 그림 안에 적힌 「Warm the Human, Cool the Earth」가 이 관계를 그대로 말하고 있었습니다. 두 시안은 이 문장을 사이트의 뼈대로 삼았습니다.

WARM열을 사람 쪽으로

VESTATON®

탄소나노튜브와 그래핀 플레이크를 섞은 발열 소재를 얇은 필름에 담았습니다. 전기를 받으면 필름 전체에서 열이 나고, 원적외선으로 가까이 있는 사람을 바로 데웁니다. 바람을 불어 공기를 데우는 방식과 달리, 데우고 싶은 곳에 붙여 쓰는 히터입니다.

수 초 만에 오르는 온도: 250℃ 이상
발열 균일도: 98% 이상
필름 두께: 0.07mm 미만
차 안의 부위 · 적용 분야: 8곳 · 3가지

COOL열을 칩 바깥으로

TERABOND®

SiC 전력반도체 칩을 기판에 붙이는 칩본딩제입니다. 은(Ag)을 압력 없이 저온에서 소결해 칩 아래에 치밀한 층을 만들고, 칩이 켜질 때마다 생기는 열을 기판과 방열판 쪽으로 빼냅니다. 열이 잘 빠질수록 칩은 덜 뜨겁고, 전력은 덜 샙니다.

열전도도: 150W/mK 이상
비저항 수준: 4×10⁻⁶Ωcm
붙일 수 있는 칩 크기: 1×1~8×8㎟
공정 온도 · 압력 없이: 170~250℃

04 / IDENTITY로고 읽기

O는
전원 단추입니다

테라온의 로고를 획 단위로 나눠 보았습니다. 끝이 둥근 같은 굵기의 선으로 쓴 다섯 글자 사이에서, O만 전원 단추의 기호로 그려져 있습니다. 그래서 이름이 TERA와 ON으로 나뉘어 읽힙니다.

두 제품 모두 「켜는 순간」 일을 시작합니다. 전원이 켜지면 VESTATON®은 데워지기 시작하고, 전력반도체 칩은 켜지고 꺼질 때마다 열을 냅니다. 칩본딩제 소개에 온도를 반복해서 올리고 내리는 Thermal Cycle 시험 결과가 실려 있는 것도 그 때문입니다.

TERAON

A안은 첫 화면 오른쪽 아래에 움직임을 멈추고 켜는 「MOTION ON」 단추를 두어, 로고의 ON을 작은 기능으로 옮겼습니다.
B안은 마지막 장면에서 로고 아래에 태그라인을 글자로 다시 놓아, 그림 안에 있던 문장을 화면 위로 꺼냈습니다.

05 / HEAT LAB열 실험실

숫자를
손으로 느끼게

「발열 균일도 98% 이상」과 「보이드 5% 이내」는 사양표에서는 같은 무게의 숫자로 보입니다. 두 숫자가 실제로 무엇을 바꾸는지 보여 주려고, 열이 퍼지는 모습을 단순하게 계산하는 작은 실험 두 개를 만들었습니다. 리뉴얼 사이트의 제품 페이지에 넣을 수 있는 장치입니다.

FILM · TOP VIEW열선 히터

눌러 보세요

면 고르기

VESTATON® LAB

선으로 데울까, 면으로 데울까

같은 전력을 열선 몇 줄에 몰아 주면 줄 사이는 덜 데워져 줄무늬가 생깁니다. 필름 전체에서 열이 나면 면이 고르게 데워집니다. 필름 위를 누르고 있으면 손이 닿은 자리의 온도가 내려갑니다. 테라온 필름의 터치센서가 하는 일입니다.

색의 밝기는 온도를, 아래 막대는 필름 안의 온도 차이가 얼마나 작은지를 나타냅니다.

CROSS SECTION보이드 0%

칩의 가장 뜨거운 점

TERABOND® LAB

빈틈이 열을 가둡니다

칩과 기판 사이의 접합층에 공기 방울(보이드)이 생기면 그 자리에서 열이 막혀 칩 위에 뜨거운 점이 생깁니다. 막대를 밀어 빈틈을 늘려 보세요. 테라온은 수요기업의 글로벌 파워모듈 평가에서 TERABOND®의 보이드가 5% 이내였다고 밝히고 있습니다.

접합층의 빈틈(보이드)0%

TERABOND® · 5% 이내(수요기업 평가 결과)

색의 밝기는 온도를, 아래 막대는 칩 위에서 가장 뜨거운 점이 얼마나 뜨거운지를 나타냅니다.

06 / COLOR컬러

오렌지는
약 150℃의 색입니다

테라온의 홍보 영상은 필름이 데워지는 장면을 열화상 카메라의 색으로 보여 줍니다. 차가운 곳은 보라, 뜨거운 곳은 주황을 지나 흰빛이 됩니다. 이 눈금을 20℃부터 250℃까지 펴 놓고 로고의 오렌지를 올려 보니, 약 152℃ 자리에 놓였습니다.

두 시안의 오렌지도 같은 자리에 모였습니다. 그래서 색의 규칙을 하나로 정했습니다. 색이 뜨거울수록 그 장면에 열이 있다는 뜻이고, 오렌지는 열이 있는 곳에만 씁니다.

온도를 움직여 눈금의 색을 보세요

152℃#E25A32로고 오렌지와 가장 가까운 자리

ONE ORANGE, THREE SHADES

바탕마다
짝이 다른 오렌지

로고 오렌지 #D35222를 작은 글자로 쓰면 흰 바탕에서 4.2:1, 검은 바탕에서 4.6:1입니다. 본문 기준 4.5:1에 걸쳐 있어 어느 바탕에서도 넉넉하지 않습니다. 그래서 로고 오렌지는 로고와 큰 숫자에 두고, 작은 글자는 바탕에 따라 한 단계 누르거나 밝혔습니다. 단추를 눌러 비교해 보세요.

250℃까지 수 초,
면 전체가 고르게

작은 글자 · 발열 균일도 98% 이상, 0.07mm 미만의 필름

4.2:1흰 바탕 위 로고 오렌지 · 큰 글자에만 씁니다

01오렌지는 열이 있는 곳에만
오렌지는 데워지는 장면과 버튼, 가장 중요한 숫자에만 씁니다. 넓은 면을 오렌지로 덮지 않습니다.
02바탕마다 짝을 정한 오렌지
로고 오렌지는 흰 바탕에서 4.2:1, 검은 바탕에서 4.6:1이라 어느 쪽에서도 넉넉하지 않습니다. 작은 글자는 흰 바탕에서 짙게 누른 오렌지, 검은 바탕에서 밝힌 오렌지로 씁니다.
03열화상 눈금은 순서대로
보라 · 빨강 · 주황 · 노랑 · 흰빛의 순서를 뒤집지 않습니다. 차가운 것을 노랗게, 뜨거운 것을 보랗게 칠하지 않습니다.
04TERABOND®는 차갑게
열을 내는 VESTATON®은 따뜻한 쪽, 열을 빼내는 TERABOND®는 남색과 파랑 쪽에 둡니다. 색만 보고도 어느 제품 이야기인지 압니다.

07 / TYPOGRAPHY서체

숫자가 많은 회사의
숫자 조판

테라온 사이트에는 온도와 두께, 열전도도와 비저항처럼 단위가 붙은 숫자가 유난히 많습니다. 같은 수치가 페이지마다 8x8mm², 8×8㎟처럼 다르게 적혀 있어, 두 시안 모두 숫자와 단위를 쓰는 규칙부터 정했습니다.

본문은 두 시안 모두 고딕입니다. A안은 Inter와 Noto Sans KR로 짧고 단단하게, B안은 Pretendard 위에 영문 제목용 Sora와 데이터 표시용 JetBrains Mono를 더해 실험실의 기록처럼 읽히게 했습니다.

250℃수 초 만에 오르는 온도

>150W/mK열전도도

4×10⁻⁶Ωcm비저항

8×8㎟붙일 수 있는 칩 크기

0.07mm필름 두께(미만)

98%발열 균일도(이상)

A안 · Inter 600 · 영문 제목

Small material.
Extraordinary possibilities.

B안 · Sora 600 · 영문 제목

Warm the Human,
Cool the Earth.

B안 · JetBrains Mono · 배율과 장 번호

SCALE · NANOMETER10⁻⁹ m → 10⁻³ m → 10⁰ m → 10³ m04 / 08 · VESTATON® FILM

Pretendard 400 · 본문 17px 이상

TERABOND®는 압력을 가하지 않고 저온에서 은(Ag)을 소결해 칩과 기판을 붙입니다. 공정 중 칩 손상을 줄이고, 칩에서 나는 열을 기판과 방열판으로 빠르게 전달합니다.

×
곱하기는 영문 x 대신 곱셈 기호로 씁니다. 8x8mm²가 아니라 8×8㎟입니다.
℃ ㎟
단위는 한 글자짜리 기호로 써서 줄이 바뀌어도 쪼개지지 않게 합니다.
10⁻⁶
지수는 작게 줄인 위첨자 대신 유니코드 위첨자로 써서 14px 아래로 내려가지 않게 합니다.
®
제품명의 ®는 구역마다 처음 한 번만 붙이고, 숫자와 겹치지 않게 띄웁니다.

08 / STRUCTURE정보 구조

다섯 메뉴를
WARM · COOL · BASE로

먼저 이 사이트를 찾는 사람들을 적었습니다. 완성차와 부품사의 엔지니어, 전력반도체 패키징 엔지니어, 설비와 건축 담당자, 구매 · 품질 담당자, 투자자와 언론, 입사 지원자까지 일곱 부류였습니다. 대부분은 두 제품 가운데 하나를 찾아 들어옵니다.

그래서 메뉴를 회사 중심의 다섯 칸에서, 열의 방향 중심의 세 갈래로 다시 묶었습니다. 열을 내는 제품은 WARM, 열을 빼는 제품은 COOL, 두 제품을 만드는 회사의 이야기는 BASE입니다. 아래에서 방문자를 고르면 그 사람이 지나갈 길이 밝아집니다.

지금 · 메뉴 다섯 칸

Company기업개요 · 연혁 · 특허 · R&D · 핵심기술 · Advanced Materials · 경영철학
VESTATON®필름히터 · 자동차 · 자켓히터 · 실내
TERABOND®칩본딩제 · 제품 소개 · 제품 특징
Quality품질경영 · 자동화 공정기술 · MES
Media홍보영상 · 수상 및 인증 · 언론보도 · IR 현황

제안 · 열의 방향 세 갈래

WARM · VESTATON®열을 사람 쪽으로

필름히터
자동차 · 여덟 부위
자켓히터
실내 복사난방

COOL · TERABOND®열을 칩 바깥으로

칩본딩제
적용 위치 · Top · Die · Lead · Bottom
시험 · 공정 · 분석
사양표 · TDS

BASE · TERAON두 방향을 만드는 회사

회사 · 연혁
소재 기술 · R&D
품질 · MES
소식 · IR

제품 문의WARM · COOL 가운데 하나를 먼저 고르고 쓰는 문의

09 / MOTION모션

켜지고, 흐르고,
넓어진다

움직임의 원칙은 세 가지입니다. 첫 번째는 두 시안이 함께 쓰는 색의 움직임이고, 두 번째와 세 번째는 시안마다 고른 움직임입니다. 기기에서 「동작 줄이기」를 켜면 두 시안 모두 큰 움직임을 멈추고 모든 내용을 고정된 화면으로 보여 줍니다.

01
켜면 데워진다

스크롤로 장면이 켜질 때 색은 열화상 눈금을 따라 보라에서 주황, 흰빛으로 올라갑니다. B안의 숫자는 올라가는 동안 이 눈금의 색으로 달아오릅니다.
02
소재는 흐른다

A안에서는 탄소 리본과 열 입자가 화면을 가로질러 흐르고, VESTATON® 필름이 세 겹으로 벌어졌다 다시 겹쳐집니다. 움직임이 곧 소재의 결입니다.
03
배율이 커진다

B안에서는 오른쪽 SCALE 눈금이 나노미터에서 밀리미터, 미터, 킬로미터로 올라갑니다. 소재에서 지구까지, 보고 있는 크기를 늘 알려 줍니다.

제안 A안 · 흐름

THERMAL FLOW소재에서 새로운 에너지의 가능성을 발견합니다

탄소 소재가 리본처럼 흐르며 열이 되고, 필름이 되고, 제품이 되는 과정을 짧고 빠르게 보여 주는 방향입니다. 첫 화면에서는 검은 탄소 리본 위로 오렌지 빛 입자가 흐르고, 「HEAT. CONNECT. TRANSFORM.」 띠가 지나간 뒤 VESTATON® 필름이 세 겹으로 벌어졌다 다시 겹쳐집니다. 적용 분야는 스크롤에 맞춰 전기차 · 산업용 히터 · 실내 공간이 차례로 바뀌고, TERABOND®는 SiC 칩 하나와 세 가지 특징으로 정리했습니다. 마지막은 오렌지 바탕의 「Let's create what's next.」입니다.

검은 탄소 리본 위로 오렌지 빛 입자가 흐르는 첫 화면
스크롤에 맞춰 세 겹으로 벌어졌다 겹쳐지는 VESTATON® 필름
전기차 · 산업용 히터 · 실내 공간이 차례로 바뀌는 적용 분야
지금 사이트의 공정 영상을 다시 쓴 품질 구역

Inter · Noto Sans KR

시안 A 직접 보기

DIRECTION NOTES

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

Small material. Extraordinary possibilities.
첫 화면입니다. 검은 탄소 리본 위로 오렌지 빛 입자가 흐르고, 스크롤하면 리본이 화면 가까이 다가옵니다. 오른쪽 아래에는 움직임을 멈추는 MOTION ON 단추가 있습니다.
HEAT. CONNECT. TRANSFORM.
「우리는 소재에서 새로운 에너지의 가능성을 발견합니다」가 한 줄씩 밝아진 뒤, 세 단어 띠가 화면을 가로질러 흘러갑니다.
얇게, 유연하게. 온기는 더 가까이.
VESTATON® 필름이 화면에 고정된 채 세 겹으로 벌어지고, 오른쪽 글이 소재 · 에너지 · 가능성 순서로 바뀝니다.
어디에나 자연스럽게.
적용 분야는 밝은 세이지 바탕으로 바뀌고, 스크롤에 맞춰 전기차 · 산업용 히터 · 실내 공간 세 장면이 차례로 넘어갑니다. 탭을 눌러 바로 옮길 수도 있습니다.
다양한 형상에도, 정교하게 전하는 열.
산업용 히터 장면입니다. 배관을 감싸는 자켓히터를 단면으로 보여 주고, 필름이 어떤 모양에도 붙는다는 이야기를 이어 갑니다.
작은 연결이 큰 성능을 만듭니다.
TERABOND®는 SiC 칩 하나와 150+W/mK · <15GPa · Pressureless 세 가지 특징으로만 정리해, 짧은 메인에서 두 제품의 차이를 빠르게 보여 줍니다.
아이디어에서 품질까지.
품질 구역은 지금 사이트의 공정 영상을 다시 쓰고, 설계 · 공정 · 검증 세 단계를 펼쳐 보는 목록으로 정리했습니다.
Let's create what's next.
마지막은 오렌지 바탕의 큰 문장과 문의 링크입니다. 문의 양식은 지금 사이트의 것을 그대로 이어 씁니다.

A · THERMAL FLOW숯빛 검정 위의 오렌지, 적용 분야의 밝은 세이지

THERMAL FLOW소재가 흐르면 제품이 됩니다

WARM THE HUMAN, COOL THE EARTH배율을 키우면 지구가 보입니다

제안 B안 · 배율

WARM THE HUMAN, COOL THE EARTH사람에게는 온기를, 지구에는 아낀 에너지를

그림 안에 있던 태그라인 「Warm the Human, Cool the Earth」를 첫 문장으로 꺼내고, 화면의 배율이 나노미터에서 킬로미터로 커지는 흐름을 따라가는 방향입니다. 탄소나노튜브 그물에서 시작한 첫 화면은 0.07mm 필름이 되고, 화면 가운데에서 WARM과 COOL 두 화면이 양쪽으로 열립니다. VESTATON®은 홍보 영상을 여덟 장면으로 나눠 스크롤에 맞춰 넘기고, 전기차 여덟 부위와 세 가지 적용 분야를 지납니다. TERABOND®는 칩 아래 은 소결층을 겹겹이 띄운 분해도에서 시험 수치와 공정, 사양표로 이어집니다. 오른쪽의 SCALE 눈금이 지금 보는 배율을 알려 주고, 마지막은 눈길을 달리는 전기차에서 항공뷰로 멀어집니다.

탄소나노튜브 그물에서 0.07mm 필름으로 이어지는 첫 화면
화면 가운데에서 양쪽으로 열리는 WARM과 COOL
홍보 영상을 여덟 장면으로 나눠 넘기는 VESTATON® 이야기
칩 아래 은 소결층을 겹겹이 띄운 TERABOND® 분해도

Pretendard · Sora · JetBrains Mono

시안 B 직접 보기

DIRECTION NOTES

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

Warm the Human, Cool the Earth.
첫 화면입니다. 탄소나노튜브 그물이 스크롤에 맞춰 가까워지고, 오른쪽의 SCALE 눈금이 나노미터를 가리킵니다.
0.07mm 필름 히터, VESTATON®
그물 속으로 들어가면 장면이 0.07mm 필름으로 바뀌고, 눈금은 밀리미터로 올라갑니다. 첫 화면 하나에서 배율이 한 번 커집니다.
VESTATON® | TERABOND®
「WARM | COOL」의 세로선을 기준으로 두 화면이 양쪽으로 열리고, 열을 내는 제품과 열을 빼는 제품이 나란히 놓입니다.
10초 안에 250℃
홍보 영상을 여덟 장면으로 나눠, 스크롤할 때마다 소재 · 두께 · 발열 · 유연성 · 안전 · 성형 · 곡면 · 실내를 한 장면씩 넘깁니다.
전기차의 겨울을 더 적은 전력으로
밝은 종이색 바탕으로 바뀌고, 차 렌더링 아홉 장을 부위마다 바꿔 끼우며 스티어링 휠부터 도어 트림까지 여덟 부위를 비춥니다.
칩 아래에서 열을 빼내는 은 소결층
TERABOND® 구역은 남색으로 바뀌고, 칩 · 소결층 · 기판을 겹겹이 띄운 분해도 옆으로 Die · Top · Lead · Bottom Attach가 차례로 밝아집니다.
나노 단위에서 설계하는 소재 기술
R&D 구역은 그래핀 육각 격자 위로 커서와 스크롤을 따라 열이 번지는 캔버스입니다. 다섯 가지 핵심 기술이 그 위에 놓입니다.
사람에게는 온기를,
마지막은 눈길을 달리는 전기차에서 항공뷰로 멀어지며 「사람에게는 온기를, 지구에는 아낀 에너지를」이라는 문장을 남깁니다.

B · WARM THE HUMAN, COOL THE EARTH검정 위의 열화상 빛, TERABOND®의 남색, 밝은 종이색

10 / PROCESS과정

1월의 네 장에서
10월의 두 방향으로

이번 제안은 두 번째입니다. 1월에는 같은 구조에 네 가지 색과 글꼴을 입힌 첫 시안 네 장을 보냈습니다. 네 장 모두 첫 문장이 「나노탄소 기술로 미래를 설계하다」에 가까웠고, 지금 돌아보면 열은 어디에도 없었습니다.

10월에는 「미래」 대신 「열」을 설계할 대상으로 삼았습니다. 아래는 1월의 첫 시안에 우리가 다시 단 메모입니다.

01 Premium · Cream Cormorant Garamond · Montserrat
「The Art of Nano Carbon」

금색과 세리프로 고급스럽게 꾸몄지만, 250℃로 데워지는 소재의 온도는 화면 어디에도 없었습니다.
02 Premium · Black Cormorant Garamond · Noto Sans KR
「나노탄소 기술로 미래를 설계하다」

어두운 바탕은 열을 보여 주기에 좋았지만 금색이 열의 색을 대신했습니다. 한글 제목은 영문 세리프에 없는 글자라 시스템 명조로 떨어졌습니다.
03 Corporate Plus Jakarta Sans · Noto Sans KR
「나노탄소 기술로 에너지의 미래를 설계합니다」

읽기 쉽고 단정했지만, 회사 이름만 바꾸면 어느 기술 기업에도 맞는 화면이었습니다.
04 Soft DM Sans · Noto Sans KR
「나노탄소 기술로 에너지의 미래를 설계합니다」

부드러운 파스텔은 친근했지만, 칩 아래에서 열을 빼내는 소재 회사의 단단함과는 거리가 멀었습니다.

01옷보다 이야기를 먼저
네 장 모두 소개 → 제품 → 핵심 기술 → 연혁 → 인증 → 소식 → 문의의 같은 순서였고, 색과 글꼴만 달랐습니다. 10월에는 이야기의 축을 먼저 정하고 색을 골랐습니다.
02숫자는 사이트에 있는 것만
첫 화면의 「51+ 등록 특허」는 등록 25건과 출원 26건을 더한 숫자였고, 「10+ 글로벌 파트너」는 근거를 찾지 못한 숫자였습니다. 10월의 두 시안은 테라온 사이트와 홍보 영상에 적힌 수치만 옮겼습니다.
03영상은 링크가 아니라 장면으로
1월에는 홍보 영상을 통째로 걸었습니다. 10월에는 영상 속 열화상 장면을 스크롤에 맞춰 한 장면씩 넘기거나(B안), 공정 영상을 품질 이야기의 한가운데에 두었습니다(A안).

10월에 비교한
네 방향

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

01
소재가 흐른다

탄소 소재가 리본처럼 흐르며 필름과 제품이 되는 과정을 짧게 보여 주는 방향입니다. 브랜드 인상을 빠르게 남깁니다.
A안 Thermal Flow로 발전
02
배율이 커진다

나노미터의 소재에서 킬로미터의 설경까지 화면의 배율을 키워 가는 방향입니다. 수치와 구조를 자세히 읽게 합니다.
B안 Warm the Human, Cool the Earth로 발전
03
열화상으로 본다

사이트 전체를 열화상 카메라 화면으로 보는 방향입니다. 강렬하지만 제품 사진과 글까지 한 가지 색 규칙에 묶여, B안의 숫자 색과 이 케이스의 첫 화면으로 옮겼습니다.
숫자 색 · 케이스 첫 화면으로
04
사양표 먼저

엔지니어가 바로 수치를 찾도록 첫 화면을 사양표로 여는 방향입니다. 처음 온 방문자에게 문턱이 높아, B안의 TERABOND® 제품 정보 표와 TDS 단추로 남겼습니다.
B안 사양표 · TDS로 옮김

01지금 사이트 다시 읽기
메인의 화면 세 장과 팝업 두 개, 세 곳에 되풀이된 사양, 그림 안에 든 태그라인을 정리했습니다.
021월의 첫 시안
같은 구조에 네 가지 색과 글꼴을 입힌 첫 시안을 보냈습니다.
03숫자 맞춰 보기
사이트에 적힌 수치를 페이지마다 맞춰 보고, 서로 다르게 적힌 곳은 확인 목록으로 따로 정리했습니다.
04두 방향의 열
VESTATON®과 TERABOND®가 열을 반대 방향으로 다룬다는 데서 이야기의 뼈대를 세웠습니다.
05로고와 색
전원 기호로 그린 O, 두 곳뿐인 오렌지, 열화상 눈금을 한 줄로 이었습니다.
06두 가지 시안
흐름과 배율, 두 방향을 실제로 스크롤할 수 있는 메인 페이지로 만들었습니다.
07사진이 없는 장면
나노 구조와 소결층, 설경처럼 카메라로 담기 어려운 장면은 새로 그렸습니다.
08모바일과 정리
390px 화면에서 장면을 다시 짜고, 컬러 · 서체 · 움직임 기준을 정리했습니다.

그래서 정한
네 가지

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

01숫자는 출처가 있는 것만
테라온 사이트와 홍보 영상에 적힌 수치만 옮기고, 연구 목표는 목표라고 적습니다. 다르게 적힌 수치는 고객 확인을 거친 뒤에 씁니다.
02사양은 한 곳에
세 곳에 되풀이되던 칩본딩제 사양은 한 곳에 두고, 다른 페이지에서는 그 표를 불러옵니다. 고칠 곳이 하나가 됩니다.
03두 제품은 두 방향으로
열을 내는 VESTATON®은 따뜻한 색, 열을 빼내는 TERABOND®는 차가운 색에 둡니다. 어느 페이지에서든 지금 어느 제품 이야기인지 알 수 있습니다.
04태그라인은 글자로
그림 안에 있던 「Warm the Human, Cool the Earth」를 글자로 꺼내, 검색과 화면 읽기 프로그램에도 잡히게 합니다.

사진이 없는 장면은
새로 그렸습니다

탄소나노튜브의 그물이나 칩 아래의 소결층처럼 카메라로 담기 어려운 장면은 새로 그렸습니다. 지금 사이트의 제품 사진과 공정 영상은 그대로 살려 쓰고, 실제 사진이 생기면 같은 자리에서 바꿀 수 있도록 장면마다 비율과 초점을 정해 두었습니다.

11 / MOBILE모바일

손바닥 위의
열화상

전시회와 미팅에서 받은 명함의 주소로 들어오는 방문은 휴대폰에서 시작되는 일이 많습니다. 두 시안 모두 390px 화면에서 장면을 다시 짰습니다. A안은 세 겹의 필름과 적용 분야를 세로로 쌓았고, B안은 프레임 영상을 피사체를 따라가는 정사각형으로 다시 잘랐습니다.

시안 B · WARM | COOL 모바일 화면 — B · WARM | COOL

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

같은 두 제품을 여는
흐름과 배율

두 시안은 같은 두 제품과 같은 오렌지를 다루지만, 첫 화면에서 먼저 건네는 말이 다릅니다. A안은 짧은 메인에서 브랜드 인상과 두 제품의 차이를 빠르게 남기고, B안은 긴 메인에서 구조와 수치를 자세히 읽게 합니다. 테라온이 이 사이트에서 가장 먼저 만나고 싶은 방문자에 따라 고를 수 있도록 차이를 정리했습니다.

구분A · THERMAL FLOWB · WARM THE HUMAN, COOL THE EARTH

첫 화면검은 탄소 리본과 오렌지 빛 입자탄소나노튜브 그물에서 0.07mm 필름으로

첫 문장Small material. Extraordinary possibilities.Warm the Human, Cool the Earth.

이야기의 축소재가 흐르며 제품이 된다나노미터에서 킬로미터로 배율이 커진다

색숯빛 검정과 오렌지, 적용 분야의 밝은 세이지검정 위 열화상 빛, TERABOND®의 남색, 밝은 종이색

서체Inter · Noto Sans KRPretendard · Sora · JetBrains Mono

VESTATON®세 겹으로 벌어지는 필름과 세 갈래 적용 분야홍보 영상 여덟 장면과 차 안 여덟 부위

TERABOND®SiC 칩 하나와 세 가지 특징은 소결층 분해도, 시험 수치, 공정 · 분석, 사양표

길이메인 7장, 짧고 빠르게메인 14장, 길고 자세하게

무게를 둔 곳브랜드 인상과 두 제품의 차이를 빠르게구조와 수치를 자세히 비교하는 기술 고객의 탐색

12 / CREDITSTECHNICAL DATA SHEET · BLUECANVAS WORKS 2026

TERAON RENEWAL PROPOSAL