테라파워는 마이크로소프트 창업자 빌 게이츠가 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스타일 핵 원자로 영상을 깔아두고 마무리짓는 영역이다.

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

결론

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

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

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

Gus는 뉴욕에 이스트사이드에 위치한 크리에이티브 전략 회사이다. 2020년에 설립된 광고 에이전시로, Spotify, Harry's Inc., Blackstone, Sproos!, Patina, Judy와 같은 회사들의 브랜드 및 크리에이티브 전략을 개발했다.

어느 날 워드프레스로 개발한 웹사이트를 살펴보던 중, 정말 결을 달리하는 웹사이트가 눈에 띄었다. 비주얼 임팩트도 있는 웹사이트가 살펴보니 더 이상한, 괴짜같다는 느낌을 받게 한다. 한번 그 웹사이트를 같이 훑어보면서 간략하게 리뷰를 해보려 한다.

0. Tech Stack

먼저 사용한 기술을 보면, 워드프레스와 플러그인들로 웹을 구축하였다. 여러 시각적 효과는 Three.js로 만들었다.

1. Hero

히어로 섹션의 애니메이션을 보면, 정말 다양하고 재미난 요소들을 넣어둔 것이 인상적이다.

중간에 갑자기 게임이 나오기도 하고 어떤 영상들이 문을 열고 나오기도 하고 😄

그리드를 정말 잘 활용해서 Playful 느낌을 준 것 같다.

그런데 이것을 어떻게 만들었을까?

그리드를 만들때 단순히 배치한 것이 아니라 모든 요소들이 그리드를 바탕으로 정렬이 되어야 한다.

이 작업이 쉽진 않았을 것 같다.

---gridCellSize, ---x, —--y값 등을 사용해서 요소들을 CSS 상에서 딱 맞게 배치하려고 한 것 같다.

반응형을 고려하면 까다로운 작업이 아닐까 싶다.

모바일로 봐도 아주 잘 작동한다.

2. About

About 페이지로 가보자. 트랜지션 효과도 신경써서 만든 티가 난다.

회사 소개와 함께 아코디언에서 다양한 정보를 주고 있다.

‘흠 그렇구나’ 하고 지나치려는 찰나, FAQ를 잘 보면 뭔가 이상한 질문들이 있다.

‘거스의 화장실 분위기는 어떤가요?’ 라는 질문에 자신들의 스포티파이 플레이리스트를 링크해주었다… 나중에 한번 들어보자…

이외에도 유머가 넘치는 질문과 답변들이 있으니 한번 읽어봐도 괜찮을 것 같다.

데스크탑에서 페이지들의 그리드가 깨지는 이슈가 있긴 한데, 모바일로 보면 괜찮다.

3. Work

Work 페이지를 가보면 여러 작업물을 볼 수 있는데 역시 그리드를 충분히 활용하는 모습이다.

마우스를 올리면 간략한 설명이 오버되며 나타난다.

4. Contact

Contact 페이지에선 그들의 사무실을 소개하고 있다.
사무실이자 갤러리이자 매장이라고 한다.
(내가 지향하는 사무실이기도 하다)

규모가 크지 않은 에이전시라는 것을 알 수 있다.

5. 푸터

푸터에도 문구 하나하나 신경을 쓴 것 같지 않은가? 최대한 임팩트를 주려고 한 것 같다. 그리고 먹힌다.

아쉽게도 푸터가 데스크탑 버전에선 아쉽게도 깨져 보인다.

결론

Gus 에이전시는 크리에이티브를 어떻게든 보여주고 자신들이 잘한다는 것을 어필하려 한 느낌이 역력하다. 특히 쉬운 길은 아닌, 그리드 컨셉을 디자인 컨셉으로 가져가며 여러 플레이를 보여준 것이 인상적이었다.

이상한 사람들이 잔뜩 있을 것 같은 크리에이티브 전략 회사 Gus.biz 웹사이트를 둘러보았다. 참고로 링크드인 소개도 평범하진 않았다. 전문 분야에 색소폰이 껴있는 등.. 구석구석 자꾸만 살펴보게끔 만든다…