테라파워는 마이크로소프트 창업자 빌 게이츠가 2008년에 설립한 원자력 발전 회사이다. 탄소가 없는 안전하고 풍부한 에너지를 제공한다는 목표로 설립되었으며, 미국에서 최초로 소형원자로를 건설하고 있다.

오늘은 이 테라파워의 회사 웹사이트를 보며 리뷰해볼 것이다.
관전 포인트는 3가지인데, 첫째는 화면 가득 채우는 동영상의 적재적소 배치와 미친듯한 깔끔함, 그리고 활용성이다.
둘째는 디자인에 있어서 브랜드 컬러를 얼마나 세심하게 ‘자제’하면서 쓰는 모습이다.
셋째는 구이 이펙트(Gooey effect)로 인터랙션 요소를 넣어, 디자인 컨셉을 완성시키는 부분이다.

기업의 랜딩페이지란 이래야 한다는 어떤 이상적이고 모범상이 아닐까 싶다.

테크스택

먼저 이 테라파워 웹사이트가 어떻게 만들어졌는지 살펴보자.
Vue.js 생태계를 이용하여 웹을 구성했다. Nuxt.js 프레임워크로 웹을 만들었다.
Three.js로 마우스 커서, 구이 이펙트 등의 인터랙션을 주었다.

• Lenis : 여러 기기에서 스크롤 경험을 표준화하는 부드러운 스크롤 라이브러리
• Pinia : Vue.js용 상태 관리 라이브러리

섹션1. Natural Balance

기본적으로 영상이 화면을 꽉채우도록 세팅이 돼있다.
스크롤에 따라 프레임이 재생되어 쭉쭉 내리면 자연스럽게 영상을 시청하게 만들어두었다.

테라파워의 메인 컬러는 보라색인데, 이걸 아주 은은하게 구석구석 잘 녹여두었다.
영상을 잘 보면 쉐도우를 보라색으로 맞춰두어 전체적으로 통일된 느낌을 준다.

이런 디테일이 계속 보여질 것이다.

네비게이션 바

모던한 디자인은 바로 이 상단 네비게이션 바에서부터 뿜어져 나온다.

아주 감탄한 부분은 바로 정렬이다. 나같은 사람이면 세로 축에서 중앙정렬로 맞췄을텐데, 아주 기가막히게 아래 정렬로 세련된 느낌을 살렸다.

자칫하면 촌스럽거나 어긋난 느낌을 만들 수 있다. 하지만 화살표나 적절한 타입의 크기, 굵기 등의 밸런스가 딱 맞아 떨어진다.

메뉴를 눌러 들어가면 레이아웃도 아주 세련되게 구성한 것을 볼 수 있다.
페이지마다의 위계를 주면서 흔하지 않게 아주 잘 풀어냈다.
마우스를 올리면 메인 컬러인 보라색으로 바뀐다.
이런 절제미가 기업의 가치를 시각적으로 전달하고 있다.
더불어 이 메뉴는 이후 푸터에도 유사하게 쓰여 효율성을 챙기고 있다.

섹션2. Innovating Response

발전소가 위치한 와이오밍을 뷰포트에 꽉차는 동영상으로 보여준다.
다음 섹션의 소개가 스크린샷에 보이는데, 그레이컬러를 잘 쓰고 있다는 인상을 받았다.

섹션 넘버는 작게 표시하면서 핵심이 되는 키워드만 강조하고, 설명글은 회색으로 처리했다.
딱딱 떨어지는 깔끔함이 보인다.

섹션3. Unique Symmetry

핵시설과 비핵시설을 분리하여 운영한다는 메세지를 전달하기 위해 3D 영상을 사용했다. Learn more 과 Dot 아이콘은 보라색으로 두어 더 알아볼 수 있도록 링크를 걸어두었다.

이 부분도 굉장히 효과적으로 전달하고 있는데, 보라색을 키 컬러로 사용하면서 화면분할로 시작한 클립이 이어져 메세지를 완성하고 있다.

좌우 분할이었던 영상이 모바일에서는 90도를 돌려, 상하 분리된 모습으로 보여진다. 아주 효율적으로 반응형에 대응하고 있어서 이것도 좋았다.

섹션4. Optimized Process

액체 금속을 사용한다는 것을 보여주기 위한 영상이다. 이 역시 그림자 영역에 보라색을 사용하여 통일성을 가져가고 있다.

섹션5. Stable Network

재생 에너지와 에너지 저장 방식을 소개하는 페이지이다.

2단 분할, 텍스트 박스의 배치를 통해 밋밋하지 않게 계속해서 디자인적 변화를 주고 있다.

트랜지션

이 다음 지구 영상으로 전환되는 과정이 정말 멋있다.

원 형태를 정확하게 맞추어 전환하기 위해서 노력을 많이 했을 것 같다…

섹션6. Clear Advantage

테라파워가 제공하는 나트륨 원자로의 효과에 대해 수치를 제공하는 섹션이다.

카드 형식의 박스들과 아이콘, 타입 체계를 보면 MUJI라던가 일본의 디자인 느낌마저 난다.

섹션7. Beyond Energy 및 푸터

이 섹션은 배경에 3D스타일 핵 원자로 영상을 깔아두고 마무리짓는 영역이다.

우측에 아무 텍스트 없이 위치한 빈 박스가 있다. 끝까지 컨셉을 유지하려는 노력으로 읽힌다.

결론

테라파워의 웹사이트는 기업의 정체성과 기술적 우수성을 시각적으로 완벽하게 표현한 사례로 볼 수 있다.

• 영상과 인터랙션의 완벽한 조화: 화면을 꽉 채우는 동영상과 구이 이펙트 같은 인터랙션 요소들은 사용자의 눈길을 사로잡는 동시에, 메시지를 효과적으로 전달한다. 단순히 멋진 디자인에 그치지 않고, 브랜드의 스토리를 깊이 있게 전달하는 데 성공했다.
• 브랜드 컬러의 절제된 활용: 보라색을 메인 컬러로 설정하되 과하지 않게, 적재적소에 세련되게 배치한 점은 디자인적으로 매우 인상적입니다. 이는 브랜드가 지향하는 "안정성과 혁신"이라는 가치를 시각적으로 보여준다.
• 반응형 디자인의 정교함: 데스크톱과 모바일 환경 모두에서 동일한 경험을 제공하기 위해 구조와 인터랙션을 세심하게 최적화한 점은 모든 웹사이트 개발자와 디자이너에게 훌륭한 참고 자료가 될 것 같다.
• 디테일을 살린 일관된 메시지: 텍스트, 이미지, 영상이 완벽한 조화를 이루며, 세심한 정렬과 배치가 기업의 신뢰도를 더욱 높여주고 있다.

테라파워의 웹사이트는 기술, 비전, 디자인 의 삼박자가 어떻게 완벽한 조화를 이룰 수 있는지를 보여주는 모범적인 예시라 본다. 단순히 잘 만든 기업 랜딩 페이지를 넘어, 디자인과 기술의 궁극적 목표를 보여주는 하나의 작품이라고 할 수 있지 않을까.