이번 Config에서 업데이트된 내용들을 빨리 써보고 싶습니다..! 그동안 각종 플러그인이나 꼼수(?)등의 우회 방법으로 사용했던 것들을 대거 메인으로 끌고 온 느낌입니다. 게다가 AI 스타트업의 인수를 하면서 더욱더 기대되고 있습니다. 이로써 Figma는 디자인/협업/프로토타이핑 툴로써 더욱더 확고해지지 않았나 싶네요.
ToyFight 스튜디오는 2015년에 설립된, 영국 맨체스터를 기반으로 둔 디자인 스튜디오이다.
“Creating unmistakably original brands and playful digital experiences.” 스스로를 독창적인 브랜드와 재미있는 디지털 경험을 만드는 곳으로 소개하고 있다.이 스튜디오에서는 1. Strategy, 2. Design, 3. Development, 4. Content를 서비스하고 있다.
미리 스튜디오의 웹사이트를 보면 알다시피, 게임기라는 요소를 적극 활용해서 자신만의 브랜드 아이덴티티를 구축하고 있다. 어떤 유머러스한 점들이 있는지, 어떤 요소들로 웹 구성을 하였는지 한번 알아보자.
0. 테크 스택
React, Next.js로 웹을 구성했고 Styled-components, GSAP, Three.js를 사용했다.
또 여기서는 나오진 않지만, 관리자도구 콘솔창을 확인했을 때 Spline.design (노코드 3D툴)를 사용해서 3D 모델을 임베딩한 것 같다.
이외에도 사용된 기술 스택은 다음과 같다.
Prismic : 잼스택용 헤드리스 CMS
Lenis : 여러 기기에서 스크롤 경험을 표준화하기 위한 부드러운 스크롤 라이브러리
Howler.js : 웹 오디오 API와 HTML5 오디오를 위한 폴백 메커니즘을 지원하는 오디오 라이브러리
1. 로딩
메인 화면으로 넘어가기 전 로딩 페이지부터 봐보자. 픽셀 폰트와 타원, 둥근 네모꼴, 그리고 애니메이션에서 특유의 게임기스러운 느낌을 살리고 있다.
2. 히어로
그 이미지는 히어로 섹션에서도 잘 드러나는데, 게임기를 전면에 내세우면서 A, B 버튼을 눌러볼 수 있게 3D를 임베딩해두었다.
픽셀 폰트는 컨셉이 확고할 때 쓰면 괜찮다. 지금처럼 레트로한 느낌에, 특히 지금처럼 도트 게임을 표현하고 싶을 때가 가장 전형적이다.
이 스튜디오는 웹사이트에 신기한 장치를 하나 해두었는데, 바로 커맨드터미널을 쓸 수 있다는 것이다. ‘/’ 슬래시를 누르면 우측에서 오프캔버스가 나타나 커맨드를 입력할 수 있다. 이걸로 직접 페이지를 이동할 수도 있고, bw(black & whihte), negative 효과를 주어 웹사이트를 흑백 혹은 반전하여 볼 수도 있다.
이런 재미난 장치를 심어둠으로써 좀더 재미나고 유머러스한 사용자 경험을 전달하고 있다.
5. Services
Services 페이지로 가보면, 어떤 것들을 제공하고 클라이언트로 어떤 회사들이 있었는지 볼 수 있다.
awwwards, FWA등 수상 내역을 캔버스 인터랙션을 통해 보다 효과적으로 전달하고 있다. 양이 어느정도 되다보니 사실 숫자로 적는 것보다도 이러한 식의 전달도 괜찮게 보인다.
6. Work
Work 페이지로 가면 필터와 함께 작업물들을 살펴볼 수 있다. 썸네일에 마우스를 올리면 커서가 해당 작업물의 제목으로 바뀐다. 우측에는 Featured, All, Branding, Marketing, Website, Content, eCommerce로 구분하여 필터링을 할 수 있다.
7. 상세페이지
이 중 GSAP 웹사이트를 만든 작업물 페이지로 가보자.
좌측에는 여러 정보들과 작품 소개가 나타나고 우측에는 여러 이미지들이 배치되어 있는 깔끔한 레이아웃으로 구성돼있다.
8. Connect
Connect 페이지로 가보면 또 재미난 요소를 볼 수 있다. Contact가 아니라 연결에 초점을 맞춘게 아닌가 하는 생각이 드는데, 녹음기를 통해 여러 사람들의 육성을 들을 수 있기 때문이다. 사용자도 우측에 메세지 남기기 버튼을 통해 녹음을 할 수도 있다.
하단에는 포스트잇같은 형태로 비즈니스 메일 주소와 구인중인 포지션을 알려주고 있다.
9. Store
웬 스토어가 있나 했는데 굉장히 전략적으로 재치가 돋보이는 페이지라고 느꼈다. 상품 목록을 보면 하나같이 정상적인 제품들은 없다.
깨진 아이맥, 안쓴 포토샵 라이센스, 각종 요상한 머그컵과 장난감들. 정상적인 제품을 팔지 않는다는 뻔뻔한 여러 문구들에서 브랜드 아이덴티티를 만들어내고 있다. 심지어 실제 몇 제품은 구매가 가능한 것 같다…
결론
ToyFight 스튜디오는 다소 뻔한 웹 구성을 탈피해서 여러 장치와 스토어 페이지를 넣음으로써, 여러가지의 히스토리와 재치를 잔뜩 뻔뻔하게 표현해냈다는 점에서 아주 좋았다. 이전 포스팅했던 에이전시들에 비해 아주 웹사이트가 기술적으로 심도있다고 생각이 되진 않을 수 있다. (각 스튜디오 만들어낸 작업물의 퀄리티를 얘기하는 것이 아니다)
하지만 어떻게 디테일들을 살려서 브랜딩을 녹여내고 사용자 경험을 설계했는지 보면 정말 감탄스럽다. 아주 깔끔한 화면을 구성하면서 특유의 유머코드를 일관되게 가져가고 있다는 점에서 배울 점들이 있다. 나또한 미니멀리스트에 가까운 성향이라, 더욱 더 세심함에 신경쓰며 보게되고 차용하고 싶은 점들이 있었다.
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
앞서 Wappalyzer로 SNP의 웹을 분석해본다.
React, Next.js를 사용하고 있으며 Three.js와 GSAP으로 여러 애니메이션과 이펙트를 구성하고 있다.
*딱 내가 지향하는 기술들이다.
1. 히어로 애니메이션
SNP의 첫인상이자 에이전시의 정체성을 드러내는 히어로 애니메이션이다. 네모와 원을 대표적인 브랜딩 요소로 활용하고 있다. (앞으로도 계속해서 이와 같은 시각 요소들이 군데군데 나타날 예정이라 기억해두면 좋다.)
또한 Salt, Pepper를 파티클로 나타내고 이를 Three.js와 Shader로 구현하고 있다. 도형에 힘을 설정해 파티클을 끌어들이고 가둬 형태를 이루는 스킬은 이전부터 하고 싶었던 것인데 어떻게 접근해야할지 감도 안잡혔다. SNP를 뜯어보면서 한번 힌트를 얻어볼 생각이다.
디자이너의 입장에서 기본 도형인 사각형과 원형을 시각 아이덴티티로 삼는다는 것은 쉽지 않은 일이다. 왜냐하면 너무나 기본적인 도형인 탓에 독특한 아이덴티티를 가질려면 여러 보조적인 수단들이 많이 활용되어야 하고 그럼에도 불구하고 로고만으로 사용자에게 브랜드를 각인시키기 쉽지 않기 때문이다.
2. 작업물 소개
스크롤을 내리면, 애니메이션과 함께 최근 작업들을 볼 수 있다. 이때 적절한 마우스커서의 변화로, 클릭을 유도하는 메세지를 전달하고 있다.
3. 필터
SNP의 작업물을 쉽게 볼 수 있도록 필터링하는 섹션도 마련해두었다. 이 부분이 마음에 드는 것이, 마우스오버만 해도 필터링이 작동해서 손쉽게 정보를 전달한다는 점이다. 특히 기술스택도 하나의 축으로 두어 대략적으로 구현된 모습도 상상하게 만든다.
나중에 이런 식의 필터링을 참고해서 도입해보고 싶다.
4. 서비스 소개
SNP가 제공하는 서비스가 무엇인지 전달하는 섹션이다. 앞서 말했듯 커머셜, 크리에이티브, 디지털 프로덕트 3가지이며 호버이펙트와 함께 메세지를 전달하고 있다.
*SNP가 전반적으로 폰트를 작게 쓰는 경향이 있는데, 개인적으로 이런 비즈니스 메세지까지 그럴 필요가 있나 싶다.
5. 푸터
푸터도 히어로 섹션과 유사하게, 파티클과 에이전시명을 활용하여 브랜드 아이덴티티를 드러내고 있다.
아래는 다른 페이지로 이동할 수 있게 제공하고 있는데 정렬이 독특하다.
6. 네비메뉴
우측상단 메뉴를 누르면 다른 페이지로 이동할 수 있다.
다만 아쉬운 점은 아이템들의 크기는 작아서 마우스의 섬세한 이동이 요구된다. 동시에 중앙 부분에 현재 마우스가 올라간 페이지 명이 나타나는데, 이 지점이 유려한 웹페이지를 위해 UX가 어느정도 희생된 점이 아닌가 싶다.
마우스 이동은 위에서 아래로 (종이동), 가운데로 시선이 이동할 때는 사선 방향이다. 마우스 이동과 시선의 이동이 일치하지 않으며 중앙 현재페이지 표시 장치가 오히려 방해된다.
7. Cases 페이지
Cases 페이지로 이동해보자. 흰 배경에 아까보았던 필터링이 나와 좀더 자세하게 작업물들을 살펴볼 수가 있다. 스크롤을 내리면 폴더들이 위로 나오듯 작품들을 볼 수 있는데, 이때도 썸네일을 원형으로 마스킹하여 브랜드 요소를 활용하고 있다.
한 페이지 안에서 여러가지 폰트 크기들을 볼 수 있다. 각각 글꼴 크기가 뚜렷하게 차이가 있어 시각적 위계질서(Hierarchy)가 잘 정돈된 느낌이다. 이러한 글자를 만지는 능력이 디자인에 대한 전문성을 드러낸다.
8. 상세 페이지
상세페이지로 들어가 스크롤을 내리면, 사각형을 활용한 트랜지션을 볼 수 있다. 그리고 여러 이미지들이 마우스만 올려도 손쉽게 볼 수 있도록 갤러리를 구성해두었다.
더 스크롤을 내리면 좀더 상세한 작업물 소개 및 설명을 볼 수 있다. 그리고 다음 작품으로 넘어가는 구간은 원형 두개로 마치 눈 혹은 쌍안경을 연상시키는 장치를 마련해두었다.
9. Careers 페이지
커리어 페이지에선 좌측 섹션에선 기업 문화를 설명하고 우측 섹션에 현재 구인중인 자리를 보여주고 있다.
이때도 섹션별 트랜지션이 육면체를 활용해 효과적으로 들어가고 있다.
10. Contact 페이지
컨택트 페이지로 가보자. 마치 휴대폰 목업처럼 좀더 심리스하게 연락할 수 있도록 문의 채널을 마련해두었고, 우측에는 텍스트 메세지가 올라가듯 간단한 애니메이션과 UI를 구비해두었다.
컨택트 페이지에서도 이런 디테일로 좀더 트렌디하고 센스있는 모습을 보여주고 있다.
결론
SNP(Salt and Pepper) 에이전시의 웹사이트는 기술과 디자인이 정교하게 융합된 훌륭한 디지털 경험을 제공하고 있다.
React, Next.js, Three.js와 같은 최신 기술 스택을 기반으로 한 유려한 애니메이션과 인터랙티브 요소들이 사이트 전반에 걸쳐 구현되어 있어, 단순히 보기 좋은 디자인을 넘어 사용자의 몰입도를 높이는 데 큰 역할을 하고 있다.
특히 히어로 섹션에서부터 눈에 띄는 파티클 애니메이션과 필터 기능, 트랜지션 등은 브랜딩 요소와 UX를 효과적으로 결합시켜, 사이트를 탐색하는 내내 사용자에게 일관된 비주얼 아이덴티티를 전달하고 있다. 이러한 세심한 인터랙션 설계는 SNP가 프로젝트를 대하는 방식—디테일과 품질을 중시하는 태도—를 엿볼 수 있었다.
디자이너로서도 개발자로서도 참고할 만한 부분들이 많으며, 특히 기본 도형을 활용한 시각 아이덴티티 구축과 기술적인 구현이 돋보이는 점은 인상적이다. 전체적으로 기술과 디자인, 두 요소 모두에서 높은 완성도를 보여주는 SNP의 웹사이트는, 디지털 프로덕트를 제작하고자 하는 기업들이 참고하기에 충분한 사례라고 할 수 있다.
