Klaytn

CLIENT

클레이튼 재단
RELEASE DATE

2023.04
TYPE

반응형웹, 다국어, webgl

클레이튼 재단 웹사이트는 오픈소스 퍼블릭 블록체인 클레이튼에 대한 소식과 지표, 개발자를 위한 리소스, 튜토리얼, 클레이튼 생태계의 프로젝트, Governance Council, 지원 프로그램, 로드맵, 커뮤니티 등 모든 정보 담아낸 허브사이트 입니다. 기존 사이트의 유아틱하고 장난스러운 브랜드 무드에서 벗어나 신뢰감있고 무게감 있는 분위기로 클레이튼 본연의 컨셉에 맞게 리디자인 되었습니다. 클레이튼의 모든 서브 사이트와의 연결, 요약 정보, 각종 콘텐츠들을 이어줌과 동시에 브랜드의 가치를 높혀주는 디자인과 퍼포먼스로 클레이튼 블록체인의 훌륭한 메인 게이트 역할을 수행합니다.

KLAYTN ARCHITECTURE

양승오

클레이튼 재단 웹사이트는 모든 클레이튼 서비스의 대한
허브 사이트로 숏컷 콘텐츠를 통한 페이지 이동성이 높은 성격을 가지고 있습니다.
내부 링크와 외부 링크가 복잡하게 혼재 되어 있고, 각 데이터에 대한 요약 콘텐츠가 산재되어 있어
설계단계에서 이 점을 고려한 이미지맵(image map) 작업을 통해
작업자들의 이해를 돕기 위해 노력하였습니다.

KLAYTN DESIGN CASE

정다운

암석, 마그마를 통해 탄생된 클레이튼의 파워풀한 에너지를
다양한 질감의 3d 오브젝트와 일러스트로 제작하여 표현하였습니다.
암석에서 클레이튼으로 탄생되기까지
제이티가 생각하는 의미있는 연결과 과정을 만나보세요.

KLAYTN DEV CASE STUDY

쇼베 니콜라

행성에서부터 클레이튼 로고가 탄생하기까지의 여정을 나타내는 3D 스크롤 애니메이션을 구현하는 것이 프론트 개발의 주요 기술과제 였습니다. Greensock의 ScrollTrigger 플러그인과 Three.js를 활용하여 애니메이션을 설계하였고, 그 과정을 소개합니다.

STEP 1. Planet

행성은 Three.js의 SphereGeometry에 텍스처을 입힌 간단한 구체입니다. 디자인팀과의 협업을 통해 다양한 텍스처를 입혀보며 클레이튼에 가장 적절한 질감을 찾는 과정을 반복하였습니다.

STEP 2. Cloud

구름을 추가하여 행성의 대기에 생동감을 추가하였습니다. 구름은 텍스처 이미지를 활용했으며, shadedrelief.com에서 대기와 관련된 다양한 공개 도메인 이미지를 확인하실 수 있습니다.

Tip! bumpMap과 동일한 텍스처를 사용하면 더 많은 볼륨을 제공할 수 있습니다.

cloudMaterial = new THREE.MeshPhysicalMaterial( { 
    bumpMap : textureLoader.load( '/textures/cloud.jpg' ),
    bumpScale : 0.008,
    …
} );

STEP 3. Magma

GSAP를 활용해 Emissive Map의 강도를 조절하는 애니메이션을 추가하여 마그마 활동을 표현하고, 이는 행성이 곧 폭발할듯한 느낌을 주는데 큰 역할을 하였습니다. emissiveIntensity를 자연스럽게 변환하기 위한 GSAP 코드를 아래에서 볼 수 있습니다.

intensityTween = gsap.fromTo( planetMaterial,  {
    emissiveIntensity: 0.8
}, {
    emissiveIntensity: 2, 
    duration: 3.5, 
    yoyo: true, 
    repeat: -1,
    ease: 'sine.inOut' 
});