Subscribe to New Posts

Lorem ultrices malesuada sapien amet pulvinar quis. Feugiat etiam ullamcorper pharetra vitae nibh enim vel.

Subscribe Zalgritte's Blog cover image

Design & Devlopment

— 인터랙티브 웹을 좋아하는 Zalgritte의 블로그입니다.

Terrapower: 미래 에너지 산업의 비전을 보여주는 웹디자인 post feature image
ChatGPT로 미디어 아트 만들기 (크리에이티브 코딩) post feature image
Gus.biz : 크리에이티브에 미친 사람들이 있지 않을까? 싶은 웹사이트 post feature image
ToyFight Studio : 엉뚱함 + 유머러스 = 독창적이고 재밌는 경험 post feature image
Salt and Pepper : 디자인과 기술이 융합된 디지털 프로덕트 에이전시 post feature image
디자이너 3명이서 인터랙티브 웹을 만든다면? post feature image
Unseen Studio : 인터랙티브 웹의 최고존엄 스튜디오 post feature image
GLSL & Shader 기초 개념 학습하기 (feat. 패스트캠퍼스) post feature image
GLSL & Shader 기초 개념 학습하기 (feat. Wael Yasmina 유튜브) post feature image
테오의 스프린트 17기 - 디자이너로써의 후기! post feature image
하롱반미, 합정 최고의 베트남 샌드위치 post feature image
Mac OS에서 MP4를 WebP로 변환하기 post feature image
Designing with AI : Figma와 Diagram을 통해 엿보는 디자인의 미래 post feature image
Config 2023 — Figma의 더 강력해진 기능들과 AI스타트업 인수 post feature image
Framer AI 홍보 영상 중, 'Start with AI'라는 버튼을 누르는 장면

Latest

Terrapower: 미래 에너지 산업의 비전을 보여주는 웹디자인 post image

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

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

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


테크스택

terrapower_테크스택.png

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

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

섹션1. Natural Balance

0:00
/0:09

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

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

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

네비게이션 바

terrapower_메뉴.webp

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

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

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

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

섹션2. Innovating Response

terrapower_02.png

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

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

섹션3. Unique Symmetry

0:00
/0:07

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

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

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

terrapower_03_mobile.webp

섹션4. Optimized Process

0:00
/0:04

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

섹션5. Stable Network

terrapower_05.png
terrapower_06.png
terrapower_07.png

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

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

트랜지션

terrapower_08-earth transition.webp

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

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

섹션6. Clear Advantage

terrapower_09.png
terrapower_10.png

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

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

섹션7. Beyond Energy 및 푸터

0:00
/0:07

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

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


결론

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

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

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

0:00
/0:03
Gus.biz : 크리에이티브에 미친 사람들이 있지 않을까? 싶은 웹사이트 post image

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

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


0. Tech Stack

gus_techstack.png

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

1. Hero

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

gus_히어로모음 복사본 2.webp
gus_히어로모음 복사본 3.webp
gus_히어로모음 복사본 4.webp
gus_히어로모음 복사본 5.webp
gus_히어로모음 복사본 6.webp
gus_히어로모음 복사본.webp

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

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

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

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

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

gus_콘솔.png

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

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

gus_히어로_모바일.gif

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

2. About

gus_트랜지션.webp

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

gus_about.webp

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

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

gus_FAQ.png

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

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

gus_about_모바일.gif

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

3. Work

gus_work1.webp

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

gus_work2.webp

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

4. Contact

gus_contact.webp

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

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

5. 푸터

gus_푸터.webp

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

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


결론

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

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

0:00
/0:05
ToyFight Studio : 엉뚱함 + 유머러스 = 독창적이고 재밌는 경험 post image

ToyFight 스튜디오는 2015년에 설립된, 영국 맨체스터를 기반으로 둔 디자인 스튜디오이다.

“Creating unmistakably original brands and playful digital experiences.”
스스로를 독창적인 브랜드와 재미있는 디지털 경험을 만드는 곳으로 소개하고 있다.이 스튜디오에서는 1. Strategy, 2. Design, 3. Development, 4. Content를 서비스하고 있다.

미리 스튜디오의 웹사이트를 보면 알다시피, 게임기라는 요소를 적극 활용해서 자신만의 브랜드 아이덴티티를 구축하고 있다.
어떤 유머러스한 점들이 있는지, 어떤 요소들로 웹 구성을 하였는지 한번 알아보자.

0. 테크 스택

toyfight_테크스택.png

React, Next.js로 웹을 구성했고 Styled-components, GSAP, Three.js를 사용했다.

또 여기서는 나오진 않지만, 관리자도구 콘솔창을 확인했을 때 Spline.design (노코드 3D툴)를 사용해서 3D 모델을 임베딩한 것 같다.

이외에도 사용된 기술 스택은 다음과 같다.

  • Prismic : 잼스택용 헤드리스 CMS
  • Lenis : 여러 기기에서 스크롤 경험을 표준화하기 위한 부드러운 스크롤 라이브러리
  • Howler.js : 웹 오디오 API와 HTML5 오디오를 위한 폴백 메커니즘을 지원하는 오디오 라이브러리

1. 로딩

CleanShot 2024-10-25 at 23.45.22.webp
CleanShot 2024-10-26 at 00.17.55@2x.png

메인 화면으로 넘어가기 전 로딩 페이지부터 봐보자. 픽셀 폰트와 타원, 둥근 네모꼴, 그리고 애니메이션에서 특유의 게임기스러운 느낌을 살리고 있다.

2. 히어로

toyfight_히어로.webp

그 이미지는 히어로 섹션에서도 잘 드러나는데, 게임기를 전면에 내세우면서 A, B 버튼을 눌러볼 수 있게 3D를 임베딩해두었다.

  • 픽셀 폰트는 컨셉이 확고할 때 쓰면 괜찮다. 지금처럼 레트로한 느낌에, 특히 지금처럼 도트 게임을 표현하고 싶을 때가 가장 전형적이다.
  • 국내 폰트로는 갈무리 시리즈, 도스 시리즈가 있다.
toyfight_헤더.png

헤더에 로고 및 작은 사이즈의 폰트들에도 적용되어 있다.

3. 스크롤

toyfight_스크롤.webp

스크롤을 내리면 대표적인, 최신 작업물들과 스튜디오 소개를 하고 있다.

4. 커맨드 터미널

toyfight_커맨드터미널.webp
toyfight_커맨드터미널2.png

이 스튜디오는 웹사이트에 신기한 장치를 하나 해두었는데, 바로 커맨드터미널을 쓸 수 있다는 것이다.
‘/’ 슬래시를 누르면 우측에서 오프캔버스가 나타나 커맨드를 입력할 수 있다.
이걸로 직접 페이지를 이동할 수도 있고, bw(black & whihte), negative 효과를 주어 웹사이트를 흑백 혹은 반전하여 볼 수도 있다.

이런 재미난 장치를 심어둠으로써 좀더 재미나고 유머러스한 사용자 경험을 전달하고 있다.

5. Services

toyfight_services 1.webp

Services 페이지로 가보면, 어떤 것들을 제공하고 클라이언트로 어떤 회사들이 있었는지 볼 수 있다.

toyfight_services 2.webp

awwwards, FWA등 수상 내역을 캔버스 인터랙션을 통해 보다 효과적으로 전달하고 있다. 양이 어느정도 되다보니 사실 숫자로 적는 것보다도 이러한 식의 전달도 괜찮게 보인다.

6. Work

toyfight_work.webp

Work 페이지로 가면 필터와 함께 작업물들을 살펴볼 수 있다.
썸네일에 마우스를 올리면 커서가 해당 작업물의 제목으로 바뀐다.
우측에는 Featured, All, Branding, Marketing, Website, Content, eCommerce로 구분하여 필터링을 할 수 있다.

toyfight_work 2.png
toyfight_work 3.png

7. 상세페이지

toyfight_상세페이지1.webp

이 중 GSAP 웹사이트를 만든 작업물 페이지로 가보자.

좌측에는 여러 정보들과 작품 소개가 나타나고 우측에는 여러 이미지들이 배치되어 있는 깔끔한 레이아웃으로 구성돼있다.

toyfight_상세페이지 2.png

8. Connect

toyfight_connect.webp

Connect 페이지로 가보면 또 재미난 요소를 볼 수 있다.
Contact가 아니라 연결에 초점을 맞춘게 아닌가 하는 생각이 드는데, 녹음기를 통해 여러 사람들의 육성을 들을 수 있기 때문이다.
사용자도 우측에 메세지 남기기 버튼을 통해 녹음을 할 수도 있다.

하단에는 포스트잇같은 형태로 비즈니스 메일 주소와 구인중인 포지션을 알려주고 있다.

9. Store

toyfight_store 1.webp

웬 스토어가 있나 했는데 굉장히 전략적으로 재치가 돋보이는 페이지라고 느꼈다.
상품 목록을 보면 하나같이 정상적인 제품들은 없다.

깨진 아이맥, 안쓴 포토샵 라이센스, 각종 요상한 머그컵과 장난감들.
정상적인 제품을 팔지 않는다는 뻔뻔한 여러 문구들에서 브랜드 아이덴티티를 만들어내고 있다.
심지어 실제 몇 제품은 구매가 가능한 것 같다…

toyfight_store 2.png

결론

ToyFight 스튜디오는 다소 뻔한 웹 구성을 탈피해서 여러 장치와 스토어 페이지를 넣음으로써, 여러가지의 히스토리와 재치를 잔뜩 뻔뻔하게 표현해냈다는 점에서 아주 좋았다.
이전 포스팅했던 에이전시들에 비해 아주 웹사이트가 기술적으로 심도있다고 생각이 되진 않을 수 있다. (각 스튜디오 만들어낸 작업물의 퀄리티를 얘기하는 것이 아니다)

하지만 어떻게 디테일들을 살려서 브랜딩을 녹여내고 사용자 경험을 설계했는지 보면 정말 감탄스럽다.
아주 깔끔한 화면을 구성하면서 특유의 유머코드를 일관되게 가져가고 있다는 점에서 배울 점들이 있다.
나또한 미니멀리스트에 가까운 성향이라, 더욱 더 세심함에 신경쓰며 보게되고 차용하고 싶은 점들이 있었다.

0:00
/0:05
Salt and Pepper : 디자인과 기술이 융합된 디지털 프로덕트 에이전시 post image

SALT AND PEPPER 에이전시 (이하 SNP) 는 러시아에서 활동하는 디지털 프로덕트 에이전시이다. 2011년에 설립되었으며, “Helping turn your ideas into digital products”라는 슬로건 하에 창의력과 전문적인 개발로 독특한 디지털 경험을 만들어왔다. 주로 (1)Commercial Web (2)Creative development (3)Digital proudct를 서비스한다.

이 포스팅에서는 SNP의 웹사이트를 훑어보며 간단하게 기술과 디자인 측면에서 리뷰해보려 한다.


0. Tech Stack

snp_기술.png

앞서 Wappalyzer로 SNP의 웹을 분석해본다.

React, Next.js를 사용하고 있으며 Three.js와 GSAP으로 여러 애니메이션과 이펙트를 구성하고 있다.

*딱 내가 지향하는 기술들이다.

1. 히어로 애니메이션

snp_히어로.webp

SNP의 첫인상이자 에이전시의 정체성을 드러내는 히어로 애니메이션이다. 네모와 원을 대표적인 브랜딩 요소로 활용하고 있다. (앞으로도 계속해서 이와 같은 시각 요소들이 군데군데 나타날 예정이라 기억해두면 좋다.)

또한 Salt, Pepper를 파티클로 나타내고 이를 Three.jsShader로 구현하고 있다. 도형에 힘을 설정해 파티클을 끌어들이고 가둬 형태를 이루는 스킬은 이전부터 하고 싶었던 것인데 어떻게 접근해야할지 감도 안잡혔다. SNP를 뜯어보면서 한번 힌트를 얻어볼 생각이다.

디자이너의 입장에서 기본 도형인 사각형과 원형을 시각 아이덴티티로 삼는다는 것은 쉽지 않은 일이다. 왜냐하면 너무나 기본적인 도형인 탓에 독특한 아이덴티티를 가질려면 여러 보조적인 수단들이 많이 활용되어야 하고 그럼에도 불구하고 로고만으로 사용자에게 브랜드를 각인시키기 쉽지 않기 때문이다.

2. 작업물 소개

snp_작업물.webp

스크롤을 내리면, 애니메이션과 함께 최근 작업들을 볼 수 있다.
이때 적절한 마우스커서의 변화로, 클릭을 유도하는 메세지를 전달하고 있다.

3. 필터

snp_필터.webp

SNP의 작업물을 쉽게 볼 수 있도록 필터링하는 섹션도 마련해두었다.
이 부분이 마음에 드는 것이, 마우스오버만 해도 필터링이 작동해서 손쉽게 정보를 전달한다는 점이다.
특히 기술스택도 하나의 축으로 두어 대략적으로 구현된 모습도 상상하게 만든다.

나중에 이런 식의 필터링을 참고해서 도입해보고 싶다.

4. 서비스 소개

snp_서비스소개.webp

SNP가 제공하는 서비스가 무엇인지 전달하는 섹션이다. 앞서 말했듯 커머셜, 크리에이티브, 디지털 프로덕트 3가지이며 호버이펙트와 함께 메세지를 전달하고 있다.

*SNP가 전반적으로 폰트를 작게 쓰는 경향이 있는데, 개인적으로 이런 비즈니스 메세지까지 그럴 필요가 있나 싶다.

5. 푸터

snp_푸터.webp

푸터도 히어로 섹션과 유사하게, 파티클과 에이전시명을 활용하여 브랜드 아이덴티티를 드러내고 있다.

아래는 다른 페이지로 이동할 수 있게 제공하고 있는데 정렬이 독특하다.

6. 네비메뉴

snp_네비메뉴.webp

우측상단 메뉴를 누르면 다른 페이지로 이동할 수 있다.

다만 아쉬운 점은 아이템들의 크기는 작아서 마우스의 섬세한 이동이 요구된다.
동시에 중앙 부분에 현재 마우스가 올라간 페이지 명이 나타나는데, 이 지점이 유려한 웹페이지를 위해 UX가 어느정도 희생된 점이 아닌가 싶다.

마우스 이동은 위에서 아래로 (종이동), 가운데로 시선이 이동할 때는 사선 방향이다. 마우스 이동과 시선의 이동이 일치하지 않으며 중앙 현재페이지 표시 장치가 오히려 방해된다.

7. Cases 페이지

snp_케이스페이지.webp

Cases 페이지로 이동해보자.
흰 배경에 아까보았던 필터링이 나와 좀더 자세하게 작업물들을 살펴볼 수가 있다.
스크롤을 내리면 폴더들이 위로 나오듯 작품들을 볼 수 있는데, 이때도 썸네일을 원형으로 마스킹하여 브랜드 요소를 활용하고 있다.

한 페이지 안에서 여러가지 폰트 크기들을 볼 수 있다.
각각 글꼴 크기가 뚜렷하게 차이가 있어 시각적 위계질서(Hierarchy)가 잘 정돈된 느낌이다.
이러한 글자를 만지는 능력이 디자인에 대한 전문성을 드러낸다.

8. 상세 페이지

snp_상세페이지.webp

상세페이지로 들어가 스크롤을 내리면, 사각형을 활용한 트랜지션을 볼 수 있다.
그리고 여러 이미지들이 마우스만 올려도 손쉽게 볼 수 있도록 갤러리를 구성해두었다.

더 스크롤을 내리면 좀더 상세한 작업물 소개 및 설명을 볼 수 있다.
그리고 다음 작품으로 넘어가는 구간은 원형 두개로 마치 눈 혹은 쌍안경을 연상시키는 장치를 마련해두었다.

9. Careers 페이지

snp_커리어 페이지.webp

커리어 페이지에선 좌측 섹션에선 기업 문화를 설명하고 우측 섹션에 현재 구인중인 자리를 보여주고 있다.

이때도 섹션별 트랜지션이 육면체를 활용해 효과적으로 들어가고 있다.

10. Contact 페이지

snp_컨택트 페이지.webp

컨택트 페이지로 가보자.
마치 휴대폰 목업처럼 좀더 심리스하게 연락할 수 있도록 문의 채널을 마련해두었고, 우측에는 텍스트 메세지가 올라가듯 간단한 애니메이션과 UI를 구비해두었다.

컨택트 페이지에서도 이런 디테일로 좀더 트렌디하고 센스있는 모습을 보여주고 있다.


결론

SNP(Salt and Pepper) 에이전시의 웹사이트는 기술과 디자인이 정교하게 융합된 훌륭한 디지털 경험을 제공하고 있다.

React, Next.js, Three.js와 같은 최신 기술 스택을 기반으로 한 유려한 애니메이션과 인터랙티브 요소들이 사이트 전반에 걸쳐 구현되어 있어, 단순히 보기 좋은 디자인을 넘어 사용자의 몰입도를 높이는 데 큰 역할을 하고 있다.

특히 히어로 섹션에서부터 눈에 띄는 파티클 애니메이션과 필터 기능, 트랜지션 등은 브랜딩 요소와 UX를 효과적으로 결합시켜, 사이트를 탐색하는 내내 사용자에게 일관된 비주얼 아이덴티티를 전달하고 있다. 이러한 세심한 인터랙션 설계는 SNP가 프로젝트를 대하는 방식—디테일과 품질을 중시하는 태도—를 엿볼 수 있었다.

디자이너로서도 개발자로서도 참고할 만한 부분들이 많으며, 특히 기본 도형을 활용한 시각 아이덴티티 구축과 기술적인 구현이 돋보이는 점은 인상적이다. 전체적으로 기술과 디자인, 두 요소 모두에서 높은 완성도를 보여주는 SNP의 웹사이트는, 디지털 프로덕트를 제작하고자 하는 기업들이 참고하기에 충분한 사례라고 할 수 있다.

0:00
/0:04
Unseen Studio : 인터랙티브 웹의 최고존엄 스튜디오 post image

Unseen Studio는 브랜드, 디지털, 모션을 전문으로 하는 영국의 스튜디오이다.
신선한, 예상치 못할 아이디어를 엄청난 비쥬얼로 풀어낸다.
2010년에 설립되었으며 회사 규모는 50명 미만이다.

Awwwards를 비롯하여 각종 웹 분야에서 상을 휩쓰는, 인터랙티브 웹에선 빼놓을 수 없는 곳이다.
이 스튜디오에서 만들어낸 클라이언트 작업도 하나하나 뜯어보는 재미가 있겠지만, 이번엔 먼저 Unseen의 자사 웹사이트를 뜯어보도록 하겠다.

#0. Wappalyzer 분석

먼저, Wappalyzer로 웹이 어떻게 만들어졌는지 파보면 놀랍게도 워드프레스를 이용하고 있는걸 확인할 수 있다.

💡
Wappalyzer는 웹사이트가 어떤 라이브러리 및 프레임워크로 구성돼있는지 볼 수 있는 크롬 확장 앱이다.

워드프레스를 Headless CMS로 이용하고 프론트는 three.js를 사용해서 아주 어메이징한 3D 공간을 만들어냈다.

Howler.js는 오디오 라이브러리로, 배경음악과 메뉴 버튼들의 효과음 등을 컨트롤하는 것 같다.

생각보다 굉장히 심플한 모습이며 three.js 혹은 더 원시적인 코드로 3D, Shader를 컨트롤해서 최적화를 하지 않았을까 하는 추측이다.

#1. 로딩

웹사이트에 첫 입장을 하거나 새로고침을 하면 센스있는 로딩창을 보여준다.

U N S E, 4개의 알파벳이 돌아가는 모션과 스튜디오 소개 문구, 배경 트랜지션으로 로딩의 진행도를 볼 수 있다.

#2. 입장

본격적으로 메인 페이지인 Index로 가기 전에, 아주 재밌는 인터랙션을 넣어둔 것을 볼 수 있다.

마우스 위치에 따라 눈이 변하는데 기본 도형의 3D Matrix 좌표값을 이용해 애니메이션을 주고 가운데 Enter 버튼을 향하도록 자연스럽게 유도하고 있다.

사운드 재생을 원하지 않는다면 하단의 Without Audio로 입장할 수 있다.

#3. 메인 Index

메인 페이지인 Index에선 아주 강렬한 3D 공간을 마주하는데 정말 충격적으로 부드럽고 우아하다.
Creating unexpected. 그 슬로건에 걸맞는 비주얼을 구현해냈다.

마우스를 따라다니는 원형 커서와 카메라, 중앙 타이포그래피의 미감과 물결치는 쉐이더 효과, 그리고3D 배경에 일렁이는 바닷물이 커서를 따라 발광하는 효과…

스튜디오가 지향하는 바를 웹에서, 가히 가상세계라고 부를 수 있을만큼의 공간을 구축했다.

#4. 메뉴

메뉴바 역시도 마이크로 인터랙션이 아주 훌륭하게 들어가있다.

우아한 세리프체의 이탤릭과 간결한 산세리프의 대비, 트랜지션으로 호버 효과를 감각적으로 보여준다.

#5. 사이드 메뉴

사이드메뉴를 펼치면 트랜지션 효과와 함께 전체를 뒤덮는 메뉴를 볼 수 있다.

#6. 페이지 트랜지션

이제 프로젝트로 가보자. 페이지를 전화할 때 역시 정말 우아하게 이동한다.

3D 공간을 그저 비쥬얼만을 위해서 사용하는 것이 아니라, 아주 효과적으로 공간 구성을 통해 사용하고 있다.

물 속 지하로 내려가면 수많은 보물들을 마주하는 것처럼.

#7. Projects

프로젝트 페이지에서 스크롤을 내리면 Z축을 기준으로 화면이 이동하며 좀더 공간 깊은 곳으로 이동한다.

각 케이스별 테마 색상에 맞추어 배경색도 다크/라이트 모드처럼 스위칭된다.

우측 하단에 뫼비우스 띠 아이콘으로 전체 프로젝트 중 어느 지점까지 왔는지 은유적으로 암시하고 있다.

#8. Projects - 목차이동

마우스를 꾹 누르고 있으면 프로젝트를 손쉽게 이동할 수 있는 메뉴가 나타난다.

특정 케이스로 손쉽게 이동할 수 있는 수단을 만들어둔 것인데 UX, UI 측면에서 세심한 고민이 있었을 것이라는 게 잘 느껴진다.

#9. Projects 상세보기

View project를 누르면 해당 케이스의 상세 페이지로 이동한다.
역시 마이크로 인터랙션과 함께 여러 스크롤 애니메이션을 볼 수 있다.

#10. 수상내역

각종 수상내역도 주최측의 3D 로고를 만들어 마우스 호버 효과와 함께 보여준다.

#11. 다음 프로젝트 보기

페이지 최하단에서 스크롤을 더 내리면 자연스럽게 다음 프로젝트의 상세 페이지로 전환된다.

이 과정이 정말 스무스하다.

#12. Contact

Contact 페이지에서는 심플하지만 효과적으로 연락처를 보여주고 있다.

#13. World

3개의 페이지 말고도, World 라는 페이지를 따로 구성해두었다.
이 트랜지션 효과가 얼마나 깔롱하게 잘만들어졌는지 감탄스럽다.

#14. World - 스크롤

World 페이지는 일종의 갤러리이다. 스튜디오의 기록들이 마치 포스트잇 혹은 폴라로이드가 잔뜩 붙은 보드와 같은 형태로 구성돼있다.

별도의 손모양 커서와 함께 이 세계를 탐험할 수 있다.

#15. World 갤러리

각 사진을 클릭해보면, 갤러리 템플릿이 나타나 좀더 상세하게 볼 수 있다.


정리

이러한 디자인 요소들이 합쳐져서 Unseen Studio가 제공하는 서비스와 철학을 명확하게 전달하는 데 큰 역할을 하고 있다. 디자인과 개발의 조화로운 결합이 얼마나 큰 영향력을 미칠 수 있는지를 잘 보여주는 사례이다. 사용자에게 단순한 정보 전달을 넘어서는 몰입감을 제공하면서도, 직관적인 사용성을 놓치지 않은 점이 매우 인상적이다.

이러한 점은 나에게도 창의적인 웹 경험을 만들어보고 싶은 영감을 주었다. 특히 디자인과 개발 간의 유기적인 협업이 얼마나 중요한지, 그리고 그 결과물이 얼마나 강력한 사용자 경험을 창출할 수 있는지를 다시 한번 깨닫게 되었다.

0:00
/0:04