새삼스레, 이제 와서, 국영수
학창 시절의 키워드, 언뜻 고향 친구의 이름처럼 친숙한 그 단어를 다시 들은 것은 우연히 참석한 어느 모임에서였다.
자세한 내용은 기억나지 않지만, 그 단어가 언급된 맥락은 인터랙션 디자인을 잘하고 싶은데, 그러기 위해서는 움직임에 대한 지식이 필요하고, 결국 과거에 열심히 배웠어야 했던 ‘국영수’가 기초라는 것이었다.
처음엔 그럭저럭 괜찮아
인터랙션 디자이너로 일하면서 수학적인 사고가 필요했던 적은 많지 않았다. 프로덕트 레벨에서의 개발이 아니라, 단지 움직임을 재현할 뿐이었고, 그 움직임이라고 하는 것도 그리 복잡하지 않았다.
하지만 시간이 지날수록 보다 깊이, 보다 넓게 고민해야 할 것들이 생겼고, 재현해야 할 움직임들은 점점 복잡해졌다. 그리고 무엇보다 인터랙션 디자인 자체의 매력에 빠져 점점 더 복잡한 인터랙션을 구현해 보고 싶은 욕심이 생겼다.
어디서부터 시작해볼까
그 무렵 나의 눈에 들어온 것은 iOS 크롬 브라우저의 당겨서 무엇무엇하기 인터랙션이었다. 찹쌀떡 같기도 한, 쫀득쫀득한 느낌이 좋아서 직접 구현해 보고 싶었다.
당기는 방향으로 살짝 늘어나고, 손을 놓으면 다시 튕기며 줄어드는 움직임은 Framer를 통해 20줄 내외의 코드로 비교적 간단하게 구현할 수 있었다.
하지만 만들어 놓고 보니, 어딘가 살짝 아쉽기도 하고, ‘좀 더 해볼 수 있겠는데?’ 하는 생각도 들었다. 이 찹쌀떡 덩어리를 물방울처럼 좀 더 유연하게 만들어 보고 싶었다. 물방울은 쭈욱 늘어나다가 두 덩어리로 갈라지게 되는데, 그 형태를 구현하려면 조금 더 복잡한 방법이 필요해 보였다.
‘구글신'의 도움이 간절한 시점이었다.
영어, 그 애증의 언어
처음에는 한글로 검색해 보았다. ‘물방울 효과 자바스크립트', ‘액체 효과 자바스크립트' 등 생각나는 키워드의 조합을 마구 던졌다. 기대했던 만큼 결과는 썩 만족스럽지 않았고, 나는 그저 하릴없이 정보의 바다 속에서 허우적거릴 뿐이었다.
결국 영어가 답이었던 것일까. 키워드를 영어로 바꿔서 던져보았다. ‘blob effect javascript’ 그랬더니 맙소사, 검색결과 첫 번째 항목부터 정확히 내가 원하던 문서가 있었고, 그 문서로부터 엮인 타래를 따라가며 더욱 자세한 기법을 확인할 수 있었다.
두 레이어가 겹쳐질 때, 서로 연결되는 부분을 부드럽게 뭉개려면 부모 레이어에 강한 콘트라스트를 주고, 겹쳐질 자녀 레이어들에 적당한 블러를 주면 되는 것이었다.
다만, 부모 레이어와 자녀 레이어 간의 명도 대비가 확실할 때에 가장 극적인 효과가 나타나므로, 검은색과 흰색을 사용하는 것이 좋다.
자녀 레이어에 색상을 입히려면, 원하는 색상의 최상위 레이어를 만들고, 기존 부모 레이어에 mixBlendMode: screen을 추가한 다음 최상위 레이어에 종속시키면 된다.
여기 수포자 하나 추가요
나는 어렸을 때부터 컴퓨터가 좋았다. 컴퓨터 게임도 좋았지만, 컴퓨터가 어떻게 작동하는지, 주변 기기들과는 어떻게 연동되는지 등등 컴퓨터와 관련된 것들이라면 눈을 반짝이며 찾아보고는 했다.
당연히 앞으로 공부할 분야도 컴퓨터 관련일 것이라고 생각했었다. 하지만 문과와 이과의 갈림길에서 나는 문과를 선택했다. 컴퓨터와 함께 하기에 수학의 장벽은 너무 높았다. 문과에 특별한 뜻이 있었다기 보다는, 비겁하게도 수학으로부터 도망쳐 문과로 숨어들었다.
그 전적은 학생 신분을 벗어난 이후에도 계속 이어져, 인터랙션을 구현할 때에 움직임을 미리 계산하지 않은 채, 우선 되는대로 레이어들을 붙여보고 나중에 수치값을 조금씩 더하거나 빼는 방식으로 만드는 경우가 대부분이었다.
그래도 그럭저럭 무리가 없었지만, 여름의 한가운데에서 불현듯 가을 냄새를 맡게 되는 것처럼 그렇게 나도 모르는 사이에 아쉬움이 스미고 있었다.
아쉬운 순간
늘 그랬듯이 흥미를 따라 업무 외적인 인터랙션 디자인을 탐닉하고 있을 때였다. 머티리얼 디자인의 터치 피드백인 파문 효과(ripple effect)에 욕심이 생겼고, 그 효과를 약간 변형하여 픽셀이 살아있는 레트로 느낌을 주고 싶었다.
우선 여러 개의 작은 레이어들을 그리드로 펼쳐놓고, 터치 지점에서부터 점차 커지는 레이어를 만들어, 레이어가 커지면서 겹쳐지는 그리드에 애니메이션 효과를 차례로 재생하면 비슷한 느낌을 줄 수 있을 것 같았다.
파문 효과를 비슷하게 구현하기는 했지만, 효과가 균일하게 적용되지 않았고, 원형으로 퍼져 나가지도 않았으며, 그리드를 구성하는 레이어가 많아질수록 퍼포먼스에 문제가 생겼다.
뜻밖의 수학 공식
머릿속에서 그리던 레트로 스타일의 파문 효과를 구현하기 위해 한동안 고민했으나 뾰족한 방법을 찾지 못했다. 그렇게 시간이 흐르고 고민이 잊혀져 갈 무렵, 딸의 장난감을 정리하다가 ‘삼각형’ 모양의 우드 블럭을 보게 되었다.
삼각형 하면 역시 피타고라스 정리. ‘혹시 이것으로 문제를 풀 수 있지 않을까?’ 하는 희망이 어렴풋이 들었다. 터치 지점을 원점으로 해서 그리드 각 레이어의 x(가로), y(세로)값으로 거리(빗면)를 계산할 수 있을 것 같았다.
만약 거리만 계산할 수 있다면, 그 거리만큼 애니메이션에 딜레이를 줘서, 터치 지점에서 같은 거리만큼 떨어져 있는 레이어들에 균일하게 효과를 적용할 수 있을 것이라는 가정이었다.
피타고라스 정리를 코드로 작성하기 위해서 몇 번의 검색을 거친 끝에 꽤나 그럴듯한 결과를 얻을 수 있었다.
새삼스레, 이제 와서, 국영수
컴퓨터가 알아듣는 언어가 결국 영어를 매개로 하고 있기 때문에, 코딩 관련한 내용을 구글신에게 물어보기 위해서는 영어를 사용하는 편이 정신 건강에 좋은 것 같다.
그리고 원하는 인터랙션을 좀 더 섬세하고 정확하게, 효과적이면서 효율적으로 구현하기 위해서는 가끔 수학책을 들여다 볼 필요가 있다고 생각했다.
“그럼 국어는?”
아마도 국어는 이 모든 것의 시작과 끝에 있는 것 같다. 언어의 프레임 안에서 사고 할 수 밖에 없기 때문에, 논리적인 사고를 위해서는 국어와 친해져야 하며, 0과 1로 만들어진 이 모든 것들을 나 스스로, 혹은 남들에게 이해시킬 때에도 국어가 늘 함께한다.
그래서 이렇게.
새삼스레, 이제 와서, 국영수를 되새겨 보는 것이었다.
