[Web3] Glitch Hackathon 후기

 

 

회고

결론부터 말하자면 2일차 오전 5시부터 4시간 자고, 오전 9시부터 3일차 현재 오후 2시까지 잠을 자지 않은 상태다. 대략 30시간을 잠을 자지 않은 상태로 매우 졸리고 잠깐 눈을 감으면 쓰러질 것 같은 기분이지만, 지난 밤 동안 배운 것을 잊지 않기 위해 몬스터 에너지 음료수를 마시며 TIL을 작성한다. 배운 것을 하나도 빠짐없이 기록하고자 한다. 이번 해커톤 동안 대기업 현직자 형님과 팀을 이룰 수 있었는데 팀업을 하면서 정말 많은 것을 배울 수 있었다.

 

• 프로젝트 설계 시 시스템을 시각화하면 시스템 로직을 한눈에 볼 수 있어서 구체화하는 데 도움이 된다.
• 협업을 하면서 계속해서 요구사항을 맞추기 위해 팀원과 적극적으로 소통해야 한다.
• 실제 앱을 런칭해봐야 배울 수 있는 것이 있다!
• 기획자는 팀의 프로젝트 기획과 시스템 다이어그램을 기반으로 한 시스템 구체화, 피칭 등 팀프로젝트에 필수적인 존재이다.

 

나의 역할

나는 이번 프로젝트에서 FE Developer로서 Flutter 프론트를 구현하는 작업을 맡았다. 배운지 한달도 채 안된 초짜 언어였지만, 문법이 JS 언어 등과 크게 다르지않고 어차피 실전이 제일이라고 생각해서 프론트엔드를 맡기로 했다. 팀원분들은 각각 Rust 기반 스마트컨트랙트 구현 작업과 프론트와 컨트랙트를 잇는 미들웨어 서버 구현 작업을 맡았다. 프로젝트 설계 단계에는 팀원들과 대화하며 시스템 다이어그램을 그리고 로직을 구체화한 후, 각자의 역할을 분담하고 개발에 착수했다. 나는 우선 안드로이드 UI의 대략적인 구상도를 그린 후 필요한 위젯들을 구글링하며 작업을 진행했다. 익숙치 않은 툴을 써보겠다고 자신했지만 자잘한 에러가 너무 자주 발생해서 좀 후회하게 되었다.

 

프로젝트에서 어려웠던 일

플러터 뿐만 아니라, 프론트엔드 단에서 가장 골때리는 부분이 바로 '비동기'일 것이다. dart 언어의 비동기 처리는 JS처럼 async/await를 사용하는데, 특이하게도 dart 언어는 비동기로 호출한 콜에 대해서 await 처리를 할 때 Future<Object>라는 것을 사용한다. 이 부분과 null 처리가 꼬이고 꼬여서 함수콜을 해도 값을 받을 수 없는 괴상한 구조의 스파게티 코드가 탄생했다. 다행히 중간중간 git push를 계속 했어서 롤백할 수 있었다.

 

우리 프로젝트의 핵심은 소셜 네트워크 계정과 NEAR Protocol 상의 계정을 매핑해서 사용자에게 Web2 같은 환경을 제공하는 것이다. 이로 인해 사용자는 어플리케이션이 Web3인지 모르는채로 Web2를 쓰는 것과 동일한 체험을 할 수 있다. 이것을 구현하기 위해 Flutter 앱에서 카카오톡 로그인 API를 호출하고 액세스 토큰을 처리하는 과정도 진행했는데 이것 역시 만만치 않았다. 사용자 스마트폰에 카카오톡이 설치되었는지, 로그인이 되었는지, 로그인이 성공했는지를 비동기로 처리한 후 response 값을 받아 액세스 토큰을 추출하고 이를 다시 미들웨어 서버 쪽으로 post 시켜준다. 굉장히 유연하게 들리는 이 일련의 과정이 큰 고비 중의 하나였다.

 

두 번째 고비는 PageView+BottomNavigationBar로 옆으로 스크롤 할 수 있는 화면이었다. Dart package를 공유하는 Pub.Dev 웹사이트에서 괜찮게 생긴 페이지뷰를 발견해서 긁어왔다가 CustomWidget인 TicketCard 목록을 집어넣는데서 문제가 생겼다.

 

마지막 고비는 비동기 처리이다. late 선언을 한 변수를 비동기 처리로 값을 저장하도록 했는데, 어디서 꼬였는지 자꾸 late initialization error가 발생해서 어떻게든 처리해보려고 새벽 6시간을 썼다. OOP의 SRP(Single Responsibility Principle)을 지키고자 개별 함수를 생성했던 것을 결국에는 비동기 처리에 영향을 안 받고자 하나의 함수에 몰아넣었다. 해커톤은 클린 코드보다는 구현의 완성도가 중요한 법이다..

 

프론트 단에서 컨트랙트 콜을 하는데도 문제가 많았지만 큰 문제는 아니었다. 시간을 많이 잡아먹었을 뿐...

 

나를 괴롭하게 하는 요인은 하나가 더 있는데, 바로 Flutter이다. 크로스 플랫폼 개발이 가능하지만, 플랫폼 별로 설정을 따로 해주어야 하는 불편함이 있는데다가 웹브라우저 포트를 지정하기 위해서는 flutter run -d chrome --web-port 5000을 터미널로 실행시켜야 한다. 그런데 터미널에서는 플러터의 장점인 Hot Reloading이 무한 로딩에 빠진다. 리로딩이 안되서 계속해서 Ctrl + C로 강제 종료시키는 번거로움을 만끽했다. 앱 로직의 문제인지, 노트북의 문제인지 어떨 때는 빠르게 리로딩이 되다가도 무한로딩에 빠져서 나를 괴롭게 했다. 위젯을 추가할 때마다 앱이 엄청 무거워져서 강종시키고 다시 시키는 속도도 계속해서 느려진다. 앱 리로딩 하는데만 시간을 엄청 빼앗겼다.

 

프로젝트 제출 마감은 3일차 오전 10시. 나는 내게 닥친 에러를 어떻게 해결할 수 있었다. 내 에러를 처리하기 바빠 백엔드와 컨트랙트 구현을 하는 팀원들에게 도움을 주지 못했다. 처음 구상했던 로직에서 마켓 기능을 빼고, NFT를 사고 파는 기능도 구현하지 못한 채로 간신히 작동하는 앱을 구현해서 프로젝트를 업로드 후 제출했다.

 

피칭

팀원분이 피칭도 캐리했다.

 

결과

결과적으로 파이널리스트 후보는 커녕 3등에도 들지 못했다. 처음에는 납득할 수 없었지만, 파이널리스트 수상작들을 보고 이해할 수 밖에 없었다.

 

배운 것

• 시스템 다이어그램은 로직을 시각화해서 확인하는 데 도움이 된다. Plant UML이란 툴을 쓰면 코딩하듯히 작성할 수 있어서 편리하다.
• 프로젝트에서 기획자와 디자이너는 필수적이라는 것을 특히 느꼈다. 수상작들의 퀄리티를 보면서 확실히 깨달았다.
• 비동기 처리는 매우매우 어렵다.
• 개발자에게 커뮤니케이션 능력과 피칭 능력이 중요하다는 것을 배웠다. 머릿속으로 알고 있는 것과 알고 있는 것을 설명하는 것은 다르다. 로직을 설명하는 것/피칭/이슈를 설명하는 것.
• 실제 구현 능력에서 현직자와의 차이를 많이 느꼈다. 특히나 에러 대응에서 나는 시간을 굉장히 많이 소모했다.
•  

반성하는 점

순수한 개발 실력 차이를 굉장히 많이 느꼈다. 피칭이나 설계도 그렇지만, 에러 대응과 비동기 구현, 그리고 무엇보다 구현 능력이 엄청나게 후달린다. 평소 웹 개발에 대해 가볍게 생각했었는데 막상 이틀만에 제대로 된 앱을 하나 만들려고 해보니, 쉬운 일이 없었다. 캐리해주었던 팀원분에게는 미안한 마음 뿐이다. 이번 해커톤에서 나는 프론트 구현하는 것만도 벅찼다.

 

그래도 이번 실패에서 배운 것이 많다. 나의 현 주소를 깨달았으니 이제 미련없이 정진할 수 있다. 스스로가 잘났다는 착각을 완전히 버릴 수 있었다. 크래프톤 정글이 아직 3개월 넘게 남아있다. 남은 시간 동안 더 노력해야 한다.

 

글리치 해커톤 후기

22년도에 참여했던 "2022 부산 블록체인 해커톤"과는 많이 달랐다. 2박 3일 해커톤은 처음이었고, 대학생 중심의 해커톤에 비해 현직자/시니어 개발자/외국인 유학생 등등 웹3에 관심있는 매우 많은 사람들이 참여해서 수상작들의 아이디어/디자인/설계/구현/피칭이 높은 퀄리티를 보여주었다. 스스로에게 자신감을 가지고 있었던 것이 왕창 박살났다.

 

그래도 글리치 해커톤에 참여하면서 많은 것을 배울 수 있었다. 그리고 티셔츠도 2장이나 받았고, 경품으로 무선 키보드도 받았다. 비록 이번 해커톤에서는 아무런 실적도 남기지 못했고 벽을 느꼈지만, 절대 좌절하지 않을 것이다.