The rare beef

The rare beef 링크 (포트폴리오로 대체)
얼마 전에 제작한 로고를 처음으로 활용해볼 겸 간단한 웹사이트를 하나 제작해보았다.

간단하고 재밌는 상호작용을 통해 내 git 페이지로 이동할 수 있는 웹사이트를 목표로 만들었다.

웹사이트에 등장하는 모든 이미지(소고기, 그림자, 열쇠, 스위치)는 모두 일러스트레이터에서 svg로 직접 제작한 이미지이다.

스위치 사운드의 출처는 여기이며 Logic pro를 통해 편집 후 사용하였다.

HTML, JavaScript, SCSS, npm, Webpack, Babel, git, netlify 등을 사용하였다.

다양한 뷰포트 크기에서 모두 정상적으로 출력되고 동작하도록 노력하였다.

상호작용 & 기능

크게 2가지 상호작용 & 기능이 존재한다.

1. 스위치

스위치를 클릭할 경우 페이지 내의 모든 "rarebeef" 글자들에 네온사인이 들어오고 어두웠던 사이트가 밝아지며 사이트에 전원이 공급되는 느낌을 부여했다.

네온 효과는 text-shadow와 JS의 gsap을 이용하였으며, gsap의 옵션인 repeat과 yoyo, delay 를 통해 네온이 깜빡이며 전원이 공급되는 효과를 연출하였다.

네온 효과를 적용할 텍스트는 <span>으로 구분하였으며, 더 화려한 네온 효과를 주고 싶었으나 퍼포먼스 문제로 적당히 타협하였다.

로고는 filter: brightness(); 를 이용하여 전원 공급 전과 후의 밝기를 조절하였다.

또한 스위치를 제외한 다른 모든 상호작용 요소에 스타일 pointer-events: none; 을 선언해두고 스위치를 클릭한 이후에 pointer-events: auto; 를 선언하여 사이트에 전원이 공급된 후에만 다른 상호작용이 가능하도록 만들었다.

스위치 클릭 시 재생되는 사운드의 출처는 여기이며, Logic pro를 통해 편집 후 사용했다.

스위치는 display: fixed; 를 선언하여 뷰포트 우측 상단에 고정하였고, top을 음수로 선언하여 위쪽이 잘리게 만들었다.

위쪽을 자른 이유는 스위치를 클릭하여 줄이 당기는 애니메이션이 동작할 때 스위치의 윗부분이 부자연스럽게 잘려있는 것을 방지하기 위함이다.
줄이 당겨졌다가 다시 올라가는 효과는 gsap의 yoyo와 repeat를 사용하였다.

스위치가 상호작용 가능한 요소임을 나타내기 위해 hover 에 filter: brightness(2); 를 선언하였다.

스위치에 lodash의 throttle을 2초 간격으로 적용하여 스위치 클릭 남발과 그로 인한 과부화를 방지하였다.

스위치가 한 번 이상 작동한 상태에서 뷰포트의 크기가 변할 경우 스위치가 사라지거나 애니메이션의 반경이 매우 좁아지는 버그를 발견했다. 위치와 크기 등의 수치를 vw & vh로 부여한 것과 gsap을 이용한 애니메이션 제어 어딘가에서 버그가 발생하는 것으로 보였다.
이 버그는 "resize" 이벤트가 발생할 경우 크기와 위치를 재지정하는 것으로 해결하였다.

2. 로고 플로팅

로고를 클릭했을 때 로고가 위로 떠오르며 그 아래 숨겨져있던 열쇠가 모습을 드러내도록 하였다.
그리고 이 열쇠는 github 링크를 연결하였다.

클릭했을 때 로고가 떠오른다는 느낌을 강조하기 위해 고기와 그림자의 이미지를 분리하여 제작했다.
고기 이미지가 위쪽으로 이동할 때 그림자는 반대방향으로 이동하며 작아지도록 하여 고기가 공중으로 떠오르는 느낌을 주었다.

열쇠는 상호작용 가능한 요소임을 알리기 위해 hover 에 filter: brightness(1.2) 를 선언하였다.

또한 로고가 떠오를 때 열쇠가 휘리릭 튀어나오는 느낌을 주기 위해 transform의 translateY()와 rotate() 를 사용하였다.

그 외

h1과 h2 태그 내부에서 <span> 태그로 다시 한 번 텍스트를 구분하였는데, 이는 뷰포트의 크기에 따라 텍스트가 줄바꿈 될 지점을 구분하고 네온 효과를 적용할 부분을 지정하기 위함이다.

저작권 문구를 빼면 아무것도 없는 <footer> 가 심심해보여서 이스터에그를 추가하였다. 한 번 이상 열쇠를 클릭한 후 <footer> 에 있는 아이콘을 10번 클릭하면 열쇠의 링크가 내 velog로 변경되고 콘솔에 아스키 아트를 출력하도록 하였다. 추가로 저작권 문구의 "RAREBEEF" 에도 네온 효과가 적용된다.

크기 단위로 vh와 vw만 사용하면 다양한 뷰포트 크기에서 여러 요소의 크기를 일정 비율로 유지할 수 있을 것 같아서 실험삼아 px 대신 vh와 vw만 사용해보았다.

"keydown" 이벤트와 정규표현식을 이용하여 특정 키워드 입력 시 지정한 상호작용 혹은 기능이 실행되도록 코드를 작성하였다.
다만 문제점은, 추가 할만한 재밌고 획기적인 기능이 아직 떠오르지 않아서 현재는 간단하게 "rarebeef" 를 입력하면 페이지가 새로고침 되는 정도만 구현해놓았다. 따로 입력창은 없으며 그냥 페이지 상에서 키보드로 입력하면 작동된다.

사용한 색상은 아래와 같다.

• 배경 색상(불 켜지기 전)
  #2b2b2b

• 배경 색상(불 켜진 후)
  #ce979e

• 네온 색상
  #ff3557

• 텍스트 색상
  #221718