추억팔이
KUCC에 들어온지가 언젠지.. 도 가물가물한데, 채널톡과 KUCC의 인연도 오래된 것 같다.
채널톡에서는 동아리 지원금 뿐만 아니라 매학기 오피스 투어를 열어 대학생들에게 맛있는 저녁도 사주고 현직 개발자들과의 치킨챗(?)을 해준다.
이와 더불어 채널톡 챌린저스에 참여하는 각 대학 동아리 간의 해커톤인 채널톡 챌린저스 HACKY-TALKY를 개최한다.
고려대 KUCC뿐만 아니라 DevKor 연대 YCC, 서울대 SCSC와 멋사, 카이스트 SPARCS, 세종대 엔샾 이렇게 구성되어있다.
(여기서 인연을 맺은 사람들과 SKYST 연합 행사도 개최하고 했다)
작년 채널톡 해커톤에도 나왔었는데, 그 당시에도 랜덤매칭으로 나왔던 것으로 기억한다.
쿠씨(KUCC)의 민재형, 성철이와 YCC의 소효은님과 나왔었는데, 이때는 다들 잘 했어서 버스를 탄 기억이 있다.
지금보니 달파에서 일하고 신한카드 취뽀하고 다들 능력자네,,
해커톤 회고 시작
변수 발생,,
이번에도 랜덤매칭이긴 했지만 입장이 달랐다. 우리 팀원들은 해커톤에는 나가보고 싶지만 다들 웹개발 경험이 많지 않아 4인팀 중 3명이서 해커톤 맛만 보러 나가는 후배들이었다. 본인도 즐겜을 원했던 터라 같이 즐겜을 하기 위해 팀에 합류했다.
하지만 한가지 변수가 생긴 것은 작년까지는 그냥 주제에 맞는 웹서비스를 만드는 것이었지만, 이번에는 주제가 있고 그 주제에 맞는 채널톡 앱을 만드는 것이었다.
주제 : 대학생들에게 필요한 채널톡 앱 만들기
채널톡 앱은 채널톡 서비스 안에서 동작하는 서드 파티 앱으로, 채널톡 앱스토어 플랫폼이 있고 채널톡 API를 사용해서 개발해야했다.
물론 클라이언트단 기술 스택은 React 기반이라 괜찮았지만 클라이언트단을 채널톡 앱으로 띄우고 API를 통해 채널톡과 통신하는 부분에서 초반에 삽질을 조금 했다.
또 주제도 쉽지 않았다. 채널톡이라 함은 CX툴로 고객 응대가 주된 서비스라고 알고 있었고, 대학생에게 필요하다는 것은 보다 메신저(슬랙, 디스코드) 같은 느낌을 바라는 것인가? 헷갈렸다.
채널톡 측에 문의한 결과, CX툴도 좋지만 직접 동아리나 대학교 생활에서 발견한 문제를 푸는데 채널톡을 수단으로 쓰면 좋겠다는 답변을 받았다. 생각보다 유료 요금 고객 중에서는 팀메신저로 채널톡을 쓰는 사례가 있고 중소규모 기업에서도 best practice가 꽤 나온다고 한다.
해커톤 일정
일정은 다음과 같았다. 사실상 개발 시간이 거의 8시간 정도라고 보면 될 것 같다. 예선 평가 이후로는 개발을 할 수 없기에..
우리 팀은 주제도 아직 선정하지 않았어서 우선 주제 선정 회의부터 시작했다.
주제 선정 회의
주제가 며칠 일찍 나왔던거 같은데, 우리 팀은 해커톤답게 당일 주제를 선정했다 ㅎㅎ (코테, 면접 기간과 겹쳐서 사실 할 수도 없었을 듯)
운동, 스터디 같은 챌린지를 인증하고 관리하는 앱, 채널톡에서 멀티태스킹을 도와주는 앱, 그리고 채널톡에는 없는 기능인 투표와 정산을 도와주는 앱이었다.
시간 내에 구현가능성과 아이디어, 주제부합성 등을 모두 고려해 첫번째 아이디어인 챌린지 인증, 관리 앱으로 결정했다.
구현 시작!
앱을 간단히 설명하자면 채널톡에서 command로 챌린지를 등록하고 다른 멤버가 참여할 수 있으며, 챌린지 인증 및 인증 현황 조회의 기능을 구상했다.
아래는 다른 팀원이 구상한 UI 배치이다.
물론! 구현을 하며 채널톡의 디자인시스템인 bezier system(https://github.com/channel-io/bezier-react)을 쓰며 구현할 것이고. 클라이언트 개발자가 본인 혼자였기에 ㅎㅎ 빠르게 개발할 수 있는 방법으로 하느라 UI 레이아웃만 참고하게 되었다.
구현된 서드파티 앱은 다음과 같이 채널톡 디자인과 통일성을 가져가면서 `/make` command를 채팅창에 입력하면 다음과 같이 챌린지를 만들 수 있는 모달(WAM)이 나온다.
채널톡 앱 안에서 띄우는 모달은 WAM이라고 하며 다음 공식문서에서 확인해 볼 수 있다. https://developers.channel.io/reference/app-wam-kr
이 WAM을 띄우고 채널톡 앱이 아닌 외부 API, Open API를 사용하는 과정에서 많은 팀이 어려움을 겪었던거 같았다.
요런 프론트엔드와 백엔드 통신 부분은 이미 우테코 팀플에서 수도 없이 겪었기 때문에 금방 해결했다... ㅎㅎ
이후 `/flag` command를 입력하면 현재 만들어져있는 챌린지와 내가 참여하고 있는 챌린지 목록이 보인다.
내가 참여하고 있는 챌린지를 클릭하면 챌린지 현황이 보이고, 만들어진 챌린지를 누르면 해당 챌린지에 참가할 수 있다.
이때 누군가 해당 챌린지에 참여하면, 설정해둔 채널톡 봇이 해당 유저의 이름과 함께 `000님이 00챌린지에 참여하였습니다`라고 메시지를 보내도록 구현했다.
(해당 부분은 현재 백엔드 서버가 꺼져있어서 캡쳐하지 못했다 ㅜㅜ 해커톤 끝나기 전에 제때 캡쳐해놓자..)
또 챌린지를 인증하면 채널톡 봇이 인증 메시지를 보내준다.
이렇게 프론트엔드 1명, 백엔드 1명, 디자인 및 기획/발표 2명으로 해커톤을 진행했고, 아쉽게 입상은 하지 못했다~~
다른 팀들을 보니까 주제가 3~4일 전부터 해커톤 공지 노션에 슬쩍 나와있었던 것 같은데, 미리미리 준비해온 것 같았다. 이런~~
해커톤 기간 안에 했다면 정말 대단한 볼륨의 구현을 해왔더라..
(피자에는 손도 못대고 반쯤 자면서 시간에 쫓기고 있는 모습)
수상작 엿보기
학교 행사 관리 앱, 채널톡 조교 앱, 출석 체크 자동화 앱 등등 많은 서비스가 나왔다
채널톡 해커톤 자랑
꽤나 혜자다. 먹으러 해커톤 온다는 사람들도 있을 만큼 밤새 돼지파티를 할 수 있다
스낵바에는 과자, 초콜릿, 컵라면 무한리필이고 콜라, 에너지드링크, 맥주가 무제한이다.
야식으로 치킨 피자도 주셔서 진짜 배고플 틈은 없다.
티셔츠도 준다. 오늘도 잠옷을 하나 얻었다
이건 주시진 않았지만 채널톡과 협업해 만든 굿즈라고 한다.
그리고 현업 개발자들께 해커톤을 진행하며 멘토링을 받을 수 있는데, react-router 관련해서 새로운 지식도 얻고, 이야기 해볼 수 있는 좋은 경험도 했다!!
낯선 환경에서 API 공식문서를 보며 개발한 것도 경험치에 플러스 되었당
마무리
이번 해커톤을 진행하면서 UI 작업이 빠른 편은 아니란 것을 깨닫고 자주 활용되는 레이아웃을 연습해보고 나만의 UI 라이브러리도 만들어보고 싶다는 생각을 했다. 현재 진행하는 프로젝트의 디자인 시스템도 더 고도화 해볼 아이디어도 얻었구..
채널톡의 bezier 디자인시스템을 사용하면서 느낀 점과 의문점도 있었기에..!
그리고 낯선 환경과 API를 공식 문서를 보며 익히는 연습은 좋았다.
또 해커톤을 나온 참가자들에 한해 채널톡 인턴십 기회도 주시는 것 같다.
현재는 서류 제출을 하고 코테를 준비하는 중이다. 좋은 결과가 있으면 좋겠는데~~
(채널톡 개발자가 대우가 좋다는 소문은 익히 들어.. 인턴도 타 사 정규직보다 월급이 많은듯)
1년 전의 나와 비교해 정말 많은 성장을 한 것 같아서 뿌듯하기도 한 해커톤 후기 끝~!