무더위가 계속되고 있는 여름입니다. 더위가 언제 잦아들까 생각하면서도 벌써 중복이라는 여름의 반환점을 지났다는 사실에 놀랍기도 한데요, 8월 중순 부산 벡스코에서 열릴 JUNCTION ASIA의 개최가 20일도 남지 않았다는 사실에 놀라워지기도 합니다. ‘SHIFT 크루를 만나다’ 시리즈도 이제 절반을 지나오고 있습니다. 오늘은 JUNCTION 해커톤에 관심을 가졌던 분들이라면 그냥 지나칠 수 없는 팀에 대해 소개하려고 해요.
이전에 JUNCTION 해커톤에 참가 신청을 했던 분들이라면, 올해 웹페이지에 많은 변화가 있다는 사실을 눈치채셨을 겁니다. 기존의 oopy를 활용해 제작되었던 랜딩 페이지가 아닌 올해의 브랜딩을 한눈에 보여주는 시원시원한 디자인을 머금은 랜딩 페이지가 여러분들을 반겼을텐데요, 디자인 팀 인터뷰와 피플 팀 인터뷰에서 이야기되었던 실험적인 레이아웃과 디테일이 잘 느껴지셨는지 궁금하기도 합니다.
참가 신청 페이지까지 새롭게 제작되어 많은 분들의 호평과 피드백을 들을 수 있었는데요, 웹페이지가 여러분에게 공개되기까지 SHIFT 크루들은 정말 많은 우여곡절을 겪었습니다. 오늘은 그 중에서도 웹페이지의 배포까지 정말 많은 고생을 한 테크 팀을 만나보려고 합니다.
안녕하세요, 테크 팀! 각자 소개를 부탁드립니다.
이상훈: 안녕하세요, JUNCTION ASIA 테크 팀에서 헤드를 맡고 있는 이상훈입니다. 테크 팀을 리딩하는 역할과 더불어 행사 소개 및 참가 지원용 웹페이지 개발을 총괄하고 있습니다. 주로 Frontend 관련 업무를 맡고 있어요.
김규헌: 테크 팀 크루 김규헌입니다, 반갑습니다. 테크 팀에서 SHIFT 내부의 자동화 슬랙봇인 ‘태일’이의 제작과 웹페이지의 Backend를 담당하고 있어요. 팀 내에서는 ‘태일이 아버지’라고 불리고 있습니다.
민승현: 안녕하세요, 테크 팀 크루 민승현입니다. 규헌 님과 함께 ‘태일’이의 제작과 웹페이지의 Backend 개발을 담당하고 있습니다. 최근에는 상훈 님을 도와 Frontend에서 발생하는 버그들의 hotfix도 진행하고 있어요.
테크 팀은 올해 새롭게 신설된 팀이라 들었습니다. 어떠한 목적을 가지고 테크 팀이 생겨나게 되었는지 이야기를 듣고 싶어요.
이상훈: 작년에 SHIFT의 오퍼레이션 팀으로 합류해 JunctionX Seoul 2021 해커톤의 전반을 기획했습니다. 코로나-19로 인해 행사가 100% 온라인으로 개최될 수 밖에 없었고, 오프라인 해커톤과 동일한 경험을 주기 위해 구글 폼, 게더 타운, 슬랙 등 여러 온라인 도구를 활용하게 되었는데요, 외부 도구의 활용에 있어 크루들이 일일이 설정을 만져줘야 했기에 시간과 자원이 불필요하게 많이 소비되어야 했습니다. 그 중 하나는 핀란드 JUNCTION의 플랫폼을 활용해 참가 지원을 받는 일이었는데요, 이미 틀이 갖추어진 ‘플랫폼’이라는 특성 상 커스터마이징이 어렵다는 단점이 있었습니다.
올해는 이를 가장 먼저 해결하고 싶었고, 인간의 노동력이 들어가는 부분을 자동화해 리소스를 줄이자는 목표가 생기게 되었습니다. 코드 작성을 통해 사람이 직접 처리해야 하는 부분을 기계가 대신 진행할 수 있어, 크루들이 행사의 퀄리티에 더 집중할 수 있는 것이죠. 이렇게 업무 효율을 위한 자동화 및 해커톤 지원을 위한 웹페이지를 제작해야 한다는 목표가 생기다 보니, 자연스럽게 테크 팀이 만들어지게 된 것 같아요.
창업자들이 직접 숙소를 촬영하러 다니다, 사진 작가와 인턴을 고용하며 매뉴얼과 프로세스를 만들고 이후 가장 고치기 쉬운 부분부터 자동화를 시작했던 에어비엔비의 창업 일화가 생각나네요. 그런 면에서 SHIFT가 커져가고 단단해지는 과정은 스타트업의 성장과 비슷하다는 생각이 듭니다.
SHIFT 업무 프로세스를 자동화하는 과정에서 소개 때 들은 슬랙봇 ‘태일’이가 탄생한 것 같네요, 이에 대해 자세히 설명해주실 수 있으신가요?
김규헌: 태일이는 상훈 님께서 말씀하셨던 ‘단순 반복되는 불필요한 업무를 줄여보자’는 목표를 가지고 만들어진 슬랙 봇입니다. 어떤 업무를 쉽고 효율적으로 안내할 수 있을지에 대해 크루들의 pain point가 담긴 이야기를 듣고, 이를 기능으로 추가하고 있어요.
현재 가장 유용하게 쓰이고 있는 기능은 크게 두 가지가 있는 것 같네요. 첫 번째는 회의 알람 기능입니다. SHIFT는 팀 외에도 수많은 TF로 나눠서 업무를 진행하는데요, TF의 특성에 따라 때로는 정기적으로, 때로는 비정기적으로 회의를 진행하고 있습니다. 태일이는 기존에 노션에 만들어진 회의 페이지를 인식하고 회의 시작 30분 전 이를 슬랙을 통해 리마인드해주고 있어요.
두 번째는 디자인 팀의 업무 안내 기능인데요, 디자인 팀의 경우 타 팀에서 제작 업무를 요청하는 경우가 많기에 이를 놓치지 않도록 노션 내 DB에 새로운 기획서가 올라왔다는 안내를 해주고 있습니다. SHIFT는 슬랙과 노션을 모두 사용하기 때문에 대화가 언제는 슬랙에서, 언제는 노션에서 이어지기 때문에 헷갈리는 경우가 종종 발생하는데요, 이를 슬랙으로 몰 수 있어 디자인 팀 크루 분들의 만족도가 높은 편입니다.
태일이는 행사 준비를 하며 자동화가 필요하다고 느끼는 부분이 있다면 계속 기능이 추가되고 발전될 예정입니다. SHIFT의 internal tool로써 지속적으로 사용될 수 있도록 하는 것이 목표입니다.
민승현: 태일이의 기능들 중에서는 실제로 제작이 완료되었으나 크루들에게 공개되지 않은 기능도 존재해요. 결국에는 태일이는 저희 크루들이 사용하는 것이기에, 크루들이 기존의 방식보다 태일이를 사용했을 때 더 혼동이 오게 된다면 기능을 오픈하지 않는 것이 더 좋겠다는 판단이 들어서였어요. 물론 기능 구현을 위해 API를 여러 번 수정하는 노력을 들여 아쉽기는 하지만, 해당 기능은 내년에 차근차근 업데이트하면 되지 않을까 싶습니다.
질문이 한 가지 있는데요, 혹시 슬랙봇의 이름이 ‘태일’이가 된 계기가 있을까요?
김규헌: 저희 테크 팀에서는 작명 센스가 없어서 태일이가 크루들에게 공개되기 전까지 ‘자동화’라는 이름을 가지고 있었습니다. 이를 위해 저희 크루들끼리 이름 공모전을 열었는데요, ‘자동화’에서 ‘동화’라는 이름이 나오고, 동화가 영어로 ‘fairy tale’이니까 이름을 ‘태일’이라고 짓자는 의견이 채택되었습니다. 태일이의 영어 이름은 꼬리를 뜻하는 ‘tail’이 아닌 ‘tale’이라는 사실을 알아두시면 감사하겠습니다.
JUNCTION ASIA라는 글로벌 이벤트를 준비해서 그런지, 슬랙봇까지 영어 이름을 가지고 있네요. 재미있는 비하인드 공유 감사드립니다.
다양한 매체를 통해 행사에 관심을 가지게 된 분들은 랜딩 페이지에 접속해 행사에 대한 추가적인 정보를 얻게 됩니다. 디자인 팀 인터뷰에서 지윤 님께서는 랜딩 페이지의 디자인에 있어 고려한 부분에 대해 이야기를 해주셨는데, 상훈 님께서는 지윤 님의 랜딩 페이지 시안을 실제로 제작하며 유의하신 부분이 있으셨나요?
이상훈: 사람에게 있어 첫인상은 기대치를 낮출 수도, 높일 수도 있는 중요한 역할이며, 이는 저희 행사를 소개하는 랜딩 페이지 또한 동일하다 생각해요. 랜딩 페이지는 이름에서부터 사람들이 제일 쉽고 빠르게 접근할 수 있어야 하며, 베일에 쌓여 있는 JUNCTION이라는 행사에 대해 알아가는 첫 번째 방법인 셈이죠. 그래서 저는 JUNCTION ASIA의 랜딩 페이지를 보고 감탄을 할 수 밖에 없이 만드는 것이 첫 번째 목표였습니다.
사람들은 랜딩 페이지에 접속할 때 데스크톱, 모바일, 태플릿 등 다양한 기기를 사용하며, 이 빈도도 사람마다 달라요. 때문에 모든 기기에서 랜딩 페이지가 깨지지 않게 보여야겠다는 생각이 들었고, 지윤 님과 긴밀하게 소통하면서 UI와 UX 요소들을 수정했습니다. 랜딩 페이지의 크기가 변환될 때에도 애니메이션을 걸어두어, 브라우저의 크기를 바꾸는 경우에도 부드럽게 전환될 수 있도록 노력했어요.
이러한 고민이 바탕이 되었기에 지금과 같은 랜딩 페이지가 만들어질 수 있었던 것 같습니다. 랜딩 페이지 제작에 있어 가장 힘들었던 포인트 하나만 소개해주실 수 있으실까요?
이상훈: JUNCTION ASIA 랜딩 페이지 시안이 정형화된 디자인이 아니어서 정말 예뻤고, 그래서 개발자 입장에서는 쉽지 않은 도전이었습니다. 그 중에서도 랜딩 페이지의 처음을 장식하는 파란 빙하 영역의 제작이 가장 어려웠던 것으로 기억합니다.
빙하 모양은 그리드를 어긋나게 제작된 디자인이다 보니, 브라우저의 크기에 따라 반응형으로 제작하기 가장 까다로웠습니다. 빙하 안에 행사명과 설명, 그리고 CTA 버튼이 들어가야 하는데 데스크톱, 모바일, 그리고 태블릿까지 모든 크기에서 내용이 빙하 밖을 벗어나지 않도록 조정이 필요했어요. 세부적인 조정을 위해서 제가 직접 픽셀 단위로 엘레먼트를 움직였던 것이 가장 기억에 남습니다. 물론 아직 약간의 버그가 존재하지만, 대부분의 환경에서 문제 없이 랜딩 페이지가 배포되고 있습니다.
랜딩 페이지 뿐만 아니라, 올해 신청 페이지 또한 많은 변화가 있었습니다. 신청 페이지의 경우 Frontend보다는 Backend 단에서 많이 고려했어야 할 것 같은데, 이에 대해서도 소개해주실 수 있으신가요?
김규헌: 상훈 님께서 말씀하셨듯이, 올해는 이전 행사들의 참가 신청에 있어 존재했던 단점들을 해결하고자 신청 페이지를 제작하게 되었어요. 그 중 하나는 팀 코드라는 개념이었습니다.
기존에는 팀으로 해커톤을 지원하고 싶다면 개인 신청을 모두 마무리한 후 팀 코드를 따로 입력해야 했기에, 신청을 마무리하지 않은 채 팀 신청을 어떻게 진행하는가 문의를 주신 경우가 종종 발생했어요. 이를 해결하고자 올해에는 참가 신청 중간에 팀 코드를 입력하는 란이 존재하고, 신청 후 메인 페이지에서 현재 내 팀에 어떤 사람들이 등록을 완료했는지 확인할 수 있도록 기획되었습니다. Backend 단에서는 팀 코드를 통해 개인 지원자나 팀 지원자가 팀을 합칠 때 팀 코드를 어떻게 처리해야 하는지에 대해 기획자 분과 많이 소통하고, 이를 구현하는 데 노력했던 것 같아요.
민승현: 맞아요. 이외에도 참가 신청 전과 후 API에서 전송되어야 하는 정보가 소소하게 달라져야 한다는 점과 지원서 작성 정보가 날아가지 않도록 페이지가 넘어될 때 저장하도록 구현하고, 봉사자 또는 참가자 등록을 선택한 이후 이를 번복하지 못하도록 막는 등 조그마한 페이지에서도 고려해야 할 점이 은근히 많았던 것 같아요.
테크 팀이 타 팀과 팀 내부에서의 소통을 중요하게 생각해, 문제 없이 지원 모집이 마감될 수 있지 않았나 생각해봅니다. 이 글을 읽는 주 독자가 개발자, 또는 개발자와 협업을 진행하는 기획자나 디자이너인 만큼 협업에 대해 궁금한 점이 많을 것 같아요. 협업을 진행하며 어떤 부분을 주로 신경쓰셨나요?
민승현: 주로 Backend 개발을 담당했기에, 규헌 님과 코드 작성에 있어 협업을 많이 했습니다. 그러다 보니, 두 명이서 같은 파일의 같은 부분을 수정하게 되면 conflict이 나고 리소스도 낭비될 수 밖에 없어요. 이를 피하기 위해 어떤 부분을 누가 작업하고 있는지 보여주는 것이 중요하다 생각했고, 백엔드 API 문서에 현재 작업하고 있는 부분에 이름과 자물쇠 이모지를 달아두자는 이야기가 나왔습니다. 해당 부분에 규헌 님 이름이 있으면, ‘규헌 님이 해당 부분을 작업하고 있구나’ 인지하고 다른 부분을 작업할 수 있었습니다.
김규헌: 올해 처음 작성하는 코드이다 보니, 코드가 엄청 많은 것이 아닌지라 승현 님과 저 사이에는 크게 커뮤니케이션에 별 문제가 없었습니다. 작성된 코드를 바탕으로 소통하니 쉽게 이야기가 통했고요. 더불어 코드 컨벤션은 이미 툴이 잘 나와 있어서, 해당 툴을 사용해 맞출 수 있었습니다.
저는 팀 내부의 소통보다 기획자 분들과의 소통을 더 중요시했던 것 같아요. TF 조직으로 운영되다 보니 모든 사람이 해당 기획에 100%의 노력을 쏟을 수 없고, 그러다 보니 회의에서 이야기되었던 것들을 바탕으로 개발되어야 하는 부분도 일부 존재했어요. 완벽한 기획서가 나오는 것이 아니니, 기획자가 어떤 의도로 해당 기능을 추가했을까, 이를 사용하는 사람들은 어떤 생각을 가지고 있을까 나름 생각하면서 코드를 작성했던 것 같아요.
이상훈: 웹페이지의 Frontend를 담당하고 있기에, 제작이 완료된 API에서 500 에러가 발생하거나 payload가 맞지 않을 경우 빠르게 소통하고 이를 고쳐나갔습니다. 이외에도 승현 님과는 웹페이지에서 발생하는 버그를 수정하는 과정에서 많은 이야기가 오갔고, 규헌 님과는 태일이의 정책 및 접근 권한에 대해 이야기하며 코드 리뷰를 진행했던 기억이 납니다.
저 또한 홈페이지 TF의 개발 직군이 아닌 크루들과 소통이 많았고, 그렇기 때문에 개발 직군에서만 통용되는 전문적인 단어를 사용하지 않으려고 노력했어요. 너무 기술적인 이야기만 오고 갈 경우 다른 분들이 이해하지 못하는 경우가 발생해 추후에 더 큰 문제로 발생했던 경험이 많았던지라, 이야기를 할 때 내 관점이 아닌 저 사람이 내 말을 이해해야 한다는 관점으로 이야기를 나눴습니다. 이해를 하지 못한다는 표정이 나올 경우에는 쉬운 비유를 통해 설명했던 기억이 납니다.
사실 홈페이지 TF 분들과는 업무적으로 티키타카가 잘된다 생각해요. A를 이야기하면 회의에서 이야기되지 않았던 B까지 고려해 결과물이 나오고, 서로 어떤 이야기가 오고 갈지 어느 정도는 알고 있어 웹페이지를 제작한다는 큰 임무를 가지고 있음에도 나름대로 회의가 짧게 끝나는 것 같습니다.
민승현: 맞아요. 지윤 님과 홈페이지에 적용될 애니메이션에 대해 이야기를 나눌 경우, 타 웹사이트와 앱을 많이 사용해보신 상훈 님께서 이를 빠르게 캐치해서 소통이 빠르게 이루어졌습니다. 기획 면에서도 비슷한 서비스를 사용해본 경험이 있다 보니 배경 설명이 없더라도 알아서 척척 진행되었던 면이 있었어요.
SHIFT에 들어오며 무엇을 기대하셨고, JUNCTION ASIA 2022를 준비하며 어떤 것을 얻어가고 계신지 궁금합니다.
민승현: 예전부터 JUNCTION은 규모가 큰 해커톤으로 인지하고 있었어요. 이런 해커톤들은 어떻게 기획되고, 운영되고, 준비가 이루어지는지 궁금했고, 그 무엇보다 이를 준비하는 크루들을 알아가고 싶다는 생각이 컸습니다. 실제로 SHIFT에 들어와보니 크루 분들께서 다들 능력이 있고 좋은 분들이 많으셔 기대가 충족된 것 같아요.
김규헌: 제가 몸담고 있는 직무 특성 상 기획자나 디자이너와 협업할 기회가 없었기에 SHIFT에서의 경험이 특별한 것 같습니다. 그 동안은 제가 짠 코드를 기껏해야 동료들만 사용했었는데 이렇게 불특정 다수가 사용하게 되는 경험을 해보니 재미 있습니다. 휴가를 쓰고 열심히 웹페이지 API 개발을 했던 기억이 떠오르네요.
이상훈: 작년에는 오퍼레이션 팀에 있었는데, 올해는 테크 팀에 있으니 기분이 새롭습니다. 승현 님과 규헌 님으로 인해 테크 팀이 잘 굴러가고 있다 생각하고, 덕분에 작년에 행사를 운영하며 아쉬웠던 부분들이 해소되고 있어요. 올해 테크 팀이 가지고 있던 이상향을 100% 달성하지는 못했지만, 절반 이상은 달성하고 있어 만족하고 있습니다.
마지막으로, 이 글을 읽고 계실 JUNCTION ASIA 2022의 참가자들에게 하고 싶은 말씀이 있으실까요?
민승현: JUNCTION ASIA 2022의 개최가 얼마 남지 않았네요. 랜딩 페이지와 신청 페이지에 방문해주신 모든 분들께 감사의 말씀 드리고, 앞으로 웹페이지에 공개될 추가적인 정보들과 더불어 8월의 행사도 많이 기대해주세요!
김규헌: 사용자는 언제나 QA의 마지막을 담당한다 생각해요. 행사장에서도 웹페이지가 사용될텐데, 당일에도 QA 잘 부탁드립니다~
이상훈: 홈페이지 곳곳에 알게 모르게 이스터 에그가 숨겨져 있다는 사실! 혹여나 버그를 발견한다면 언제든지 저희에게 알려주세요!
테크 팀이 멋지게 제작한 JUNCTION ASIA 2022 웹페이지를 방문하고 싶다면?
