디자인회사의 개발 이야기
첫 번째 人(in)spiration | DX 김기현 이사님
Plus 人(in)spiration - 플러스엑스의 ‘일’ 그리고 ‘사람’ 이야기
더하기를 기울여 곱하기로 변화하듯 플러스엑스는 다양한 사람이 모여 함께 일합니다. 변화하는 시대에 다양한 경험들을 새롭게 조합해 나가며 늘 최선의 결과를 만들어 내는 플러스엑스. 그 사람들의 이야기를 만나보세요.
Plus 人(in)spiration의 첫 인터뷰이는 플러스엑스 DX팀의 리더 김기현 이사님입니다.
DX(Development eXperience)팀의 리더 김기현 이사님은 컨설팅 프로젝트부터 플러스엑스 웹사이트, 내부 협업 소프트웨어까지 플러스엑스의 개발과 관련된 모든 일을 리딩하고 계십니다. 남다른 미적 감각을 가진 개발자로 디자이너의 아이디어에 생명을 불어넣는 일을 하고 계신데요.
많은 사람들이 궁금해했던 플러스엑스 웹사이트 개발의 비하인드 스토리 그리고 디자인 회사에서 개발자로 일 하는 것에 대해 이야기를 나누어보았습니다.
삼각함수의 움직임을 적용한 플러스엑스 웹사이트
기현이사님께서는 어떻게 플러스엑스에 합류하게 되셨는지 궁금해요.
저는 플래시 개발자로 시작해서 NHN에서 신명섭/변사범 대표님을 알게 되었어요. 이후 시대의 흐름에 맞춰 다양한 앱들을 제작했고, 플러스엑스와의 인연으로 29cm 프로젝트 앱 개발자로 참여하게 됐습니다. 앱의 유지/보수를 위해 3년이라 는 긴 시간 동안 같이 일하면서 업무적으로 신뢰 관계가 돈독해졌어요. 그게 계기가 되어 이후 제 커리어의 변화에 따라 자연스럽게 합류하게 되었습니다.
작년 연말을 기점으로 플러스엑스의 웹사이트가 여러 차례 업데이트되었어요. 그 내용에 대해 간략하게 말씀해주실 수 있을까요?
가장 최근에 업데이트된 사항은 웹사이트 메인 페이지예요. 플러스엑스의 ‘+’와 ‘×’를 활용해 다양한 실험을 해봤어요. 개인적으로 수묵화의 퍼지는 느낌을 좋아하는데 그것을 두 기호로 구현해봤고, 두번째 메인 페이지에서는 플랫한 화면에 제한된 인터랙션을 주어 2D에서 3D로 돌출되는 형태의 이미지로 플러스엑스를 나타내보았어요.
플러스엑스 웹사이트 메인 페이지그 외, 이전 플러스엑스 SNS에서도 홍보된 적이 있는 다크/라이트 모드, 각 페이지를 매끄럽게 이어주는 페이지 트랜지션과 디테일한 모션들도 추가되었어요. 그리고 플러스엑스 유니온에 대한 소개 페이지가 새로 업데이트 되었습니다. 앞으로도 웹사이트의 업데이트 사항은 플러스엑스 인스타그램과 페이스북을 통해 알릴 예정입니다.
다채로우면서도 일관적인 유니온 페이지가 인상 깊었어요. '각자 개성이 있는 회사들이 모여 일한다’라는 메시지가 잘 구현된 페이지 같기도 하고요. 모션에 대한 디렉션 없이 개발팀에서 소화해낸 것이라고 들었는데요. 모션의 모티브는 어디서 얻으셨나요?
유니온 페이지의 모션은 삼각함수에서 모티브를 얻었어요. 프론트 개발이라는 게 시각적인 것을 다루다 보니, 단순한 움직임으로 끝나는 것들은 연속성이 없어 예측 가능하고 재미없거든요. 그래서 간단한 수학을 활용해 연속성이 있는 살아있는 움직임을 만들어 봤습니다. 사인/코사인 법칙을 이용한 반복적인 움직임이나 일정한 규칙 속에서 변화하는 도형은 사람들로 하여금 다음 움직임을 기다리고 자꾸 보게 하는 매력이 있거든요. 이런 수학적인 요소를 활용해 모션을 만드는 것이 제가 가장 좋아하는 개발 방식 중 하나여서 팀원들에게 강의를 하기도 하고, 함께 스터디 모임을 통해 연구도 하고 있어요.
모션에 대한 디렉션이 없었던 건 서로에 대한 신뢰가 있어서 가능한 거 같아요. 이번 웹사이트 디자인을 맡은 변대표님과는 추구하는 디자인과 움직임에 대한 결이 비슷하다 보니, 서로 말하지 않아도 잘 알거든요. 그래서 구체적인 디렉션 없이도 서로에 대한 신뢰를 바탕으로 편하고 즐겁게 작업할 수 있었어요.
각자의 개성을 보여주는 플러스엑스 유니온 페이지설명을 듣고 그 페이지를 보니 더 새롭네요. 일상에서도 모션에 적용할 수 있는 요소에 관심이 많으실 거 같아요.
크리에이티브나 표현 방식에 대한 아이디어는 일상 생활에서 많이 얻는 편이에요. 영화나 광고에서 재미있는 효과가 나오면 기억해뒀다가 그 움직임의 개연성이 있다고 판단되면 적용해봐요. 예를 들어 영화 인트로에 나오는 타이핑 효과, 광고 속에서 보여지는 다양한 모션그래픽과 편집 기법. 그런 것들을 유심히 관찰하고 기억해뒀다가 일 할 때 참고하기도 해요.
모든 페이지가 다 만족스러운 결과물이겠지만, 직접 개발한 개발자로서 가장 마음에 드는 페이지가 있나요?
저는 플러스에이(Plus Advance Lab)의 소개 페이지가 완성도면에서 가장 만족스러워요. 페이지로 이동하면 백그라운드에서 그려지는 선과 앞에 나타나는 글씨의 속도감과 리듬감은 많은 편집과정을 거쳐서 만들어진 거예요. 이 편집은 공식처럼 수치화해서 만들어낼 수 없는 거고, 그래서 쉽게 따라할 수 없는 느낌이기도해요. 플러스에이측 담당자가 플러스에이의 홈페이지 리뉴얼을 앞두고 있는데 이 소개 페이지가 너무 멋져서 부담된다고 농담 섞인 칭찬을 하더라고요. (웃음) 그만큼 디렉터들도 만족한 결과라 보람을 느꼈습니다.
웹사이트 경우 계속해서 업데이트가 이루어지고 있는데, 업데이트 시 가장 주안점을 두는 부분이 있나요?
‘안정성과 표현의 재미’. 이 두 가지를 가장 중요하게 생각해요. 어떻게 보면 아이러니한 난제이기도 한 게, 많은 파티클을 쓰고 비용이 많이 드는 효과는 페이지 반응이 느려지거나 무거워질 수밖에 없거든요. 그래서 플러스엑스의 포트폴리오 페이지가 가장 구현하기 어려웠어요. 저희 웹사이트의 가장 핵심적인 페이지라 중요하기도 했고, 들어가는 콘텐츠가 많고 그것을 동적으로 구현하기 위해서 최적화 과정에 많은 시간과 노력을 쏟아부었어요. 시간과 노력이 들더라도 가능한 선 안에서 표현하려고 하는 것들은 다 담아내면서, 퍼포먼스 측면의 과제도 해결하려고 해요.
많은 콘텐츠를 담는 동시에 동적으로 표현한 플러스엑스의 포트폴리오 페이지디자인 회사의 개발 이야기
아무리 멋있는 움직임이라도 그 모션이 그곳에 존재하는 마땅한 이유가 있어야 한다고 생각해요.
포트폴리오 페이지가 어찌보면 디자인 컨설팅 펌의 웹사이트가 가진 특징이기도 하네요. 디자인 컨설팅 회사에서의 개발은 다른 회사에서의 개발과 어떤 다른 점이 있을까요?
플러스엑스는 컨설팅할 때 단순히 어떤 서비스를 구현하는 것에 목적을 둔다기보다, 그것을 넘어서 재밌고 멋있게 표현하기를 원하는 회사예요. 이런 회사에서 개발자의 가장 중요한 역할은 디자인의 목적에 대해 이해하는 거라 생각합니다. 아무리 멋있는 움직임이라도 그 모션이 그곳에 존재하는 마땅한 이유가 있어야 한다고 생각해요. 그래서 모션이나 인터랙션을 설계할 때 디자이너가 어떤 목적을 가지고 이 디자인으로 표현하려 했는지, 그리고 이 움직임이 이걸 보는 유저의 목적성에 부합하는지를 제일 많이 고려해요.
그 외에, 디자이너와의 커뮤니케이션 방식도 정말 중요한데, 저희는 개발팀에서 먼저 적극적으로 역(逆)제안하는 경우가 많아요. 디자이너가 특정 아이디어가 실제로 구현 가능한지에 대해 끊임없이 물어보는 과정은 길어질 수밖에 없기 때문에 개발자가 기술적으로 구현 가능한 것들을 먼저 보여주고, 여기서 아이디어를 발전시켜 디자인에도 적용해 볼 수 있는 거죠. 이런 것이 이상적인 프론트 개발 환경인데, 현실적으로는 이런 환경이 만들어지기가 쉽지 않아요. 저희는 계속해서 작은 프로젝트를 내부에 공유해, 개발팀이 구현할 수 있는 것들에 대해 내부적으로 알리고 있어요.
지난번 개발팀에서 사내에 공유한 이모지 프로젝트가 인상 깊었어요. 그것도 ‘역제안’의 일환인가요?
네, 맞아요. 처음에는 BX팀에서 랜덤이나 우연한 효과들로 산출물을 만드는 것에 대한 레퍼런스를 전달해준 적이 있는데, 이 중 쿼드트리 알고리즘을 사용한 동적인 패턴을 프로토타입으로 제작했었어요. 마침 다른 팀에서 캐릭터를 가지고 베리에이션하는 프로젝트를 보고 영감을 얻어, 귀여운 요소를 접목해 재미로 만들었어요. 이런 재미로 만든 것들을 통해 다른 팀들도 영감을 받고, 이 기술을 활용한 재밌는 서비스를 함께 만들어보자는 차원에서 공유했어요.
사실 그동안 개발팀이 존재하지 않았던 회사이기에, 다른 팀에서는 개발팀과 어떻게 협업할지 잘 모르거나, 익숙하지 않을 수도 있다고 생각해요. 그래서 재미로 만든 이런 소소한 프로젝트들이 타팀과 개발팀을 이어주는 브릿지 같은 역할을 할 거라 생각합니다.
실제 DX팀이 제작한 랜덤페이스 프로토타입플러스엑스에 개발팀이 생기고 나서 여러 프로젝트가 더 박차를 가하고 있다는 느낌이 들어요.
플러스엑스는 아직 개발에 대한 목마름이 있어요. 지금 개발팀에서는 파이썬을 이용한 백엔드 개발, 내부 그룹웨어 개발, 프론트에 들어가는 개발이나 컨설팅 업 등 여러 프로젝트를 지원하고 있어요. 특히, DX팀이 협업한 곧 공개될 새 프로젝트는 플러스엑스 역사상 디자인부터 백엔드 개발까지 전부 소화해낸 첫번째 프로젝트라 의미가 깊어요.
앞으로 이와 유사한 프로젝트가 많아질 거라 예상합니다. 플러스엑스 웹사이트 변천사를 예시로 보면, 처음에는 Flash로 개발한 후 시대의 흐름에 따라 웹 표준을 준수한 Modern Web 기반의 기술을 적용했고, 이번 리뉴얼은 React 기반으로 제작한 후 Webgl을 활용한 아트워크까지 추가되었어요. 웹사이트에 새롭고 다양한 시도를 하는 것 자체가 개발에 대한 플러스엑스의 투자 의지를 보여 준다고 생각해요. 앞으로 플러스엑스만 구현할 수 있는 작업물을 만들기 위한 과정이라고 볼 수 있죠.
채용을 위해 2010년 임시로 만들어진 플러스엑스 첫 웹사이트
2011년 업데이트된 두 번째 웹사이트이야기하는 내내 기현 이사님의 일에 대한 애정과 긍지가 느껴지네요. 개발자라는 일의 어떤 부분에서 가장 보람을 느끼시나요?
저는 저와 비슷한 안목을 가진 사람들이 제가 만들어 낸 결과물을 보고 재미있어 하거나, 감동하는 모습을 보면 보람을 많이 느껴요. 새로운 프로젝트가 완성될 때, 함께 일했던 사람들이 만족하고, 다른 사람들도 멋있다고 한마디 해줄 때. 그때가 제일 뿌듯해요. 플러스엑스에서는 바쁘긴 하지만, 마음이 맞는 사람들과 함께 그런 결과물을 얻을 때가 많아서 재밌게 일하고 있습니다.
Plus 人(in)spiration 릴레이 인터뷰는
매달 플러스엑스 브런치를 통해 발행됩니다.
