리그오브레전드리그오브레전드

온라인 1,897

개발자 블로그 - 원소술사 럭스 로그인 화면 제작기

조회수 13,630댓글 4추천 12

20161228153927_274788.jpg

▲ 원소술사 럭스의 로그인 화면: 물의 형상

과거의 리그 오브 레전드 로그인 화면에서는 챔피언들이 역동적인 동작을 취하고 있습니다. 그들이 ‘누구’ 인가 보다는 협곡에서 ‘어떻게’ 싸우는가에 초점을 맞춘 화면이었죠. 그 후 로그인 화면은 계속해서 진화했고, 요즘에는 어떻게 하면 각 챔피언의 독특한 테마와 감정을 담은 이야기를 잘 전달해줄 수 있을 것인가에 집중하여 로그인 화면을 제작합니다.

원소술사 럭스의 이야기를 구현하는 작업은 쉽지 않았습니다. 럭스의 열 가지 형상은 서로 다른 열 개의 감정을 담아내기 위해 정교하게 제작됐습니다. 챔피언의 모습만 덩그러니 보여주던 전형적인 로그인 애니메이션에서는 감정의 미묘함을 포착하기가 쉽지 않았습니다. 얼굴 표정은 사람의 감정을 보여주는 가장 좋은 지표이므로 클로즈업한 얼굴이야말로 플레이어들과 럭스의 감정을 연결해주는 최적의 연결 고리라고 생각했습니다.

잠깐, 이게 럭스라고?

챔피언의 실루엣을 보면 그가 누군지 대충 짐작할 수있습니다. 누군가의 실루엣이 가로등처럼 보인다면 큰 무기는 갖고 있지 않을 거라고 추측할 수 있는 것처럼 거대한 건틀릿의 형상이 보인다면 멀리서도 그 사람이 필트오버의 집행자 바이라는 걸 알아챌 수 있겠죠. 챔피언들만의 독특한 특징이 없다면 뽀삐와 트리스타나를 한 눈에 구분하기는 어려울 겁니다.

아티스트 “hugehugesword” 수크는 정지 화면에서 럭스의 본질이 무엇인지를 먼저 파악하고자 했습니다. 럭스의 전체적인 모습이나 마법봉처럼 실루엣 만으로도 럭스를 알아보는 데 핵심적인 역할을 하는 부분들은 일단 고려하지 않았습니다. 그는 일단 대강 그림을 그린 뒤 다른 라이엇 직원들에게 물었습니다. “이거 리그 오브 레전드 챔피언 같이 보이나요? 누구처럼 보여요?”

수크가 그림을 그려 몇 차례 보여줬을 때, 그것이 데마시아의 마법사 럭스라는 것을 알아차린 사람이 가끔 있기는 했지만 대부분은 럭스를 럭스답게 만드는 발랄하고 사교적인 페르소나가 빠진 것 같다고 느꼈습니다. 수크는 직원들의 의견을 수렴해 다시 작업을 시작했고, 이번에는 반짝이는 눈빛과 미소를 강조했습니다. 수크가 직원들에게 새로 그린 그림을 보여주자 그들은 이제서야 그 그림이 그저 아름답기만한 얼굴이 아니라는 걸 깨달았습니다. 그림의 주인공은 분명 럭스였습니다.

수크는 원소술사 럭스의 이미지 각각에 서로 다른 감정을 담아내고 싶었습니다. 빛의 형상은 럭스의 눈에서 뿜어져 나오는 선명한 광채와 그녀의 얼굴에 드리워진 빛에서 보여지는 희망의 상징입니다. 불은 강렬한 머리 색깔과 강한 성격을 연상케 하는 각진 얼굴에서 드러나는 분노의 상징이며 물은 편안한 표정과 차가우면서도 차분한 색깔로 표현되는 평온의 상징이죠.

20161228153937_423281.jpg

▲ 원소술사 럭스의 빛의 형상 (작업중)

일러스트레이션 작업이 끝나면 일러스트레이션을 여러 개의 레이어로 나눕니다. 그래야 모션 그래픽 아티스트가 레이어 별로 따로 작업을 할 수 있으니까요. 예를 들어, 어깨와 얼굴은 고정해 놓고 머리카락만 바람에 흩날리게 할 수 있도록 하는 것입니다. 이미지들을 이동시킬 때 그림이 그려지지 않은 부분이 드러나지 않도록 레이어들 사이에 언더페인팅 작업을 해야 할 때도 있습니다.

럭스의 눈은 선을 여러 번 더하지 않고 한 번에 그려서 완성했습니다. 선이 많아지면 럭스가 시선을 옮길 때 선과 선이 만나는 부분이 드러날 수 있기 때문이었죠. 수크는 럭스의 눈을 더 작업하려다가 럭스의 눈이 그려진 오버레이가 너무 재미있어서 팀원들에게 그 이미지를 보내줬습니다. 내부에서는 꽤 화제였죠.


20161228153947_220969.gif
▲ 럭스의 빛의 형상 내에 존재하는 많은 레이어들 중 일부… 그리고 바로 그 화제의 이미지

덜 손대고 더 세련되게

모션 그래픽 아티스트 "AdamKadamon" 아담 올리베이라와 “BumsAreCool” 티모시 와이저가 일러스트에 움직임을 더하기 위해 수케와 함께 작업을 시작했을 때, 그들은 어떻게 하면 럭스에 대한 친근감을 손상시키지 않으면서 럭스에게 생명력을 불어넣을 수 있을지 고민했습니다. 당장이라도 싸움을 걸듯한 자세에 극적인 애니메이션을 더해서 만든 기존의 애니메이션 로그인 화면은 영 마음에 들지 않았습니다. 그래서 이번에는 미묘한 얼굴 표정의 변화와 배경의 움직임, 그리고 화면 전환에 중점을 두기로 했습니다. 

▲ 아티스트들은 이미지의 특정 부분들에 점을 찍은 뒤 그 점들을 조정하여 럭스의 표정을 바꿉니다.

눈의 움직임을 조정하는 작업은 쉽지 않았습니다. 일러스트에 움직임을 더하자 럭스의 눈은 상대를 똑바로 바라보지 않고 방을 둘러보는 듯 했습니다. 아담은 다음과 같은 이야기도 전했습니다. “사람들은 차라리 럭스가 아예 움직이지 않는 편이 낫겠다고 말했죠.” 움직임이 너무 심하다 보니 럭스가 누구와도 눈을 마주치지 않는 것처럼 느껴졌습니다. 럭스의 눈에 감지하기 어려울 정도로 작고 자연스러운 움직임을 적용 했더니 그제서야 럭스와 보는 사람 간에 관계가 형성되는 것 같았습니다. 물론 럭스의 얼굴에 활기도 불어 넣을 수 있었고요.

 

 

▲ 눈의 움직임: 작업중인 버전과 최종 버전

티모시와 아담은 또한 일러스트에 움직임을 더해 각 이미지에 담긴 감정을 증폭시키고자 했습니다. 물의 형상일 때는 물결 모양의 빛이 럭스의 얼굴에 부드럽게 반사되고, 불의 형상일 때는 용암이 그녀의 머리카락 사이로 거세게 흘러내립니다. 빛의 형상에 희망을 증폭시키는 작업이 까다로웠지만 티모시는 즐겁게 작업했습니다. “전 사실 뭔가를 엄청나게 귀엽게 만드는 작업을 할 기회는 많지 않거든요. 빛이 꽃처럼 피어나고, 무지개가 생기고, 머리카락은 반짝반짝. 저 정말 열심히 했습니다.” 티모시가 말했습니다.

서로 다른 이미지들을 하나로

특징이 뚜렷한 서로 다른 세 개의 이미지로 일관성 있게 반복되는 하나의 애니매이션을 만드는 작업은 까다로웠습니다. “저희는 화면 전환도 수크 작품의 일부로 만들고 싶었습니다. 마치 시간이 지남에 따라 자연스럽게 변화하는 것처럼요.” 티모시가 말했습니다. 화면 전환을 처음 작업할 당시에는 불의 형상을 공격적인 오버레이에 굉장히 튀는 색깔로 작업했습니다. 그렇게 하니 불의 느낌은 잘 살았지만 추상적이고 부드러웠던 기존의 아트 스타일과는 어울리지 않았죠. 본래 이미지의 색 포화도와 초점을 반영해서 다시 작업하니 화면 전환이 자연스러워졌습니다.

 

▲ 불의 형상으로 화면 전환: 작업중인 버전과 최종 버전

화면 전환은 이질적인 세 개의 이미지를 연결하는 역할을 할 뿐 아니라 각 형상에 구현된 감정들을 더욱 강렬하게 표현하는 데에도 도움을 줬습니다. 예를 들어, 불의 열기는 굉장히 강렬하기 때문에 화면 전환 오버레이도 강하고 극적인 느낌으로 만들었고, 물의 경우에는 고요함을 강조하기 위해 부드러운 잔물결이 치는 느낌으로 제작했습니다.

럭스의 감정이 불의 분노에서 물의 평온함으로 바뀌는 순간은 그녀의 눈을 통해 알 수 있습니다. “그 순간은 일 초도 안 됩니다. 럭스가 마치 ‘으으으…!’하는 소리를 낼 것처럼 화가 난 듯 눈을 감습니다. 그러고 나서 그녀는 곧 모든 것을 내려 놓은 듯 편안해지죠.” 아담이 말했습니다. 물의 형상을 벗어날 때도 럭스는 눈을 감고 있습니다. 다시 눈을 뜨면 화면 가득 빛이 들어옵니다. 화면 전환은 그저 논리적 흐름을 위해 존재하는 장치가 아닙니다. 화면 전환을 통해 자신의 본질을 찾아 끊임없이 여정을 떠나는 럭스의 열정을 엿볼 수 있으니까요.

 

▲ 로그인 비디오와 음악은 동시에 제작이 됐지만 화면 전환과 음악이 잘 어우러집니다. 이에 대해 티모시는 “운명적 만남이었죠.”라고 웃으며 말했습니다.

댓글