커뮤니티를 위한 야매 개발자의 소프트웨어 만들기
성장하는 친구들의 프로젝트 커뮤니티: Higher Definition
'Higher Definition'은 2020년 12월부터 기획하여 2021년 3월 출범한, Project Based Learning을 함께 하는 커뮤니티입니다. 동아리 활동 등에서 눈에 띄는 동네 에이스 친구들을 모았습니다. 현재 다양한 전공의 대학생 7명으로 이루어져 있습니다. 커뮤니티의 활동 방식을 오픈소스화하고자 하는 목표가 있습니다.
HD의 첫 프로젝트, Higher Efficiency
21학번 신입생인 Carter의 주도로 '프리토킹과 한 일 기록이 있는 줌 스터디'인 'Higher Efficiency'를 HD의 첫 프로젝트로 시작하게 되었습니다. 매일 11시 정각이 되면, 15분간 오늘 한 일에 대해 프리토킹하는것이 특징입니다. 하지만 관리자 혼자 프리토킹하는 내용을 받아 적고 카드뉴스를 디자인해서 인스타그램에 올리는 것이 과도한 부담이 되었습니다. 그래서 웹 개발에 관심이 있던 제가 아래의 HE Web을 만들었습니다.
아래는 야매 개발자인 제가 작년에 적은 개발 기록입니다.
1) 개요

HE Web은 자동화를 적용하여 HE 운영상의 노동력을 줄이기 위해 만들어진 웹 앱입니다. Zoom 회의실 링크 공유, 이용 규칙 및 소개, 금일 학습 기록 작성, 날짜별 학습 기록 시각화 등의 기능이 있습니다.

HE Web은 웹프로그래밍을 공부하고 있던 HD 멤버 Hani가 제안하고 기획했습니다. '한 일에 대한 프리토킹과 기록이 있는 줌터디'인 HE를 운영하면서 점차 시스템에 대한 욕심을 가지고 기능을 추가해 나갔습니다.
2-1) 첫 HE 세션에서 만든 구글 스프레드시트 비상 연락망

첫 HE 세션부터 많은 참가자들이 모였습니다. 프리토킹을 나눴는데, 마치 클럽하우스같은 분위기였습니다. 친구 사귀기를 좋아하는(MBTI E임) Hani는 공동 작업이 가능한 구글 스프레드시트로 '비상 연락망'을 만들었습니다. 이 인연이 사라진다고 생각하면 너무 아쉽잖아요.
그러나의 급한 마음이 만들어낸 이 '비상 연락망'은 1일차를 마지막으로 폐지됩니다. HE에 참여하는 모든 유저가 Hani 자신처럼 엄청난 관종은 아니어서, 자기소개에 큰 열정이 없을 수도 있다는 걸 드디어 깨달은 거죠. 하나의 표에 동시에 자기소개를 기입하는 것이 아닌 새로운 UI가 필요하다는 생각을 하게 되었습니다.
2-2) 첫 세션부터 한 일 기록 카드뉴스로 만들어 인스타그램 계정에 업로드

3월 15일의 첫 세션부터, 줌터디 중간에 15분정도 시간을 만들어 자기소개와 오늘 뭐 하고 있는지 대화하는 시간을 가졌는데요, 한 일에 대한 기록을 카드뉴스로 만들어 인스타그램 계정에 업로드하는 일을 Carter가 수작업으로 했습니다. 이때는 프리토킹에서 나온 발화들을 독서실 관리자 Carter가 직접 받아 적었습니다.
그러나 한명이 Figma로 내용을 받아적고 업로드하는 건 품이 너무 많이 드는 일이더라구요.

그래서 밀리는 일이 발생했고, 저는 이 문제점에 주목해서 웹앱을 만들기로 합니다.
3-1) 야심차게 웹앱 개발 선언


HE 2.0이 시작한 4월 5일, 그때는 그 주 주말이면 끝나 12일 정도에 웹앱을 릴리즈할 수 있을 거라 생각했습니다. 제가 어리석었죠. 3월에 대강 그려봤던 와이어프레임을 구체화하는 과정에서 UX의 부족함과 추가하고 싶은 기능들이 마구 생겨났습니다. 웹을 만들어 본 게 처음이라 시행착오를.. 시간이 더 걸렸습니다. 결국, HE 2.0 종료를 단 10일 앞두고 서비스를 릴리즈하게 됩니다. ㅋㅋ 그래서 앱을 딱 10일밖에 못 썼어요.
3-2) 스케치

이런 그림을 그려서 HD 팀원들을 설득했어요. '나 이거 할래!!' 하고요.

HE Web을 만들기로 결정한 후 가장 먼저 시작한 것은 기획입니다. 다시 와이어프레임을 그리고 각 페이지가 어떤 레이아웃으로, 어떤 요소들을 담아야 할 지 정의해 나갔습니다.
평소 잘 쓰고 있던 운동 루틴 짜주는 앱, fintnessAI 처럼 출석한 날을 보여주는 달력이 있었으면 좋겠다는 생각이 들었습니다. 날짜를 하나하나 색칠해가는 재미가 있잖아요.
그렇게 하려다 보니 3.2.1의 '전체 한 일 기록 보여주기'에서 더 나아가 '멤버별 한 일 보여주기'도 만들기로 했습니다.
"아니, 그러면 회원 관리가 필요하잖아?"
맞습니다. 기존 HE 기록은 내 닉네임을 매일 다르게 써도 아무 문제가 없었습니다. 그러나 회원 한 명의 기록을 모아서 보여주기 위해서는 유저가 한 일을 폼에 기록할 때, 매일 같은 이름을 작성해야 합니다. 그래서 [본인 닉네임 선택] → [한 일 입력] 의 플로우를 만들기 위해 아래 페이지를 추가했습니다.

그리고 이때부터 웹페이지의 정보 구조에 대한 고민도 같이 했어요.

기록 탭에 들어가서 내 기록과 전체 기록을 분류해서 보게 할 것인가? 아니면 전체 기록 탭과 내 기록 탭을 따로 만들 것인가? 그럼 기록 추가는 어디에서 하게 하지? 신규 등록이나 닉네임 수정은 어디에서 하게 하는 게 가장 익숙할까? 등의 많은 고민이 있었습니다. 여기에서 서비스 기획과 디자인에 관심이 많은 Hailey의 자문을 구했습니다.
3-3) 프론트엔드 + 디자인

트위터가 개발한 CSS 플러그인인 Bootstrap으로 거의 모든 요소를 제작했습니다. Boostrap의 컴포넌트들은 사이즈(Small, Regular, Big), 색상(파란색 계열, 회색 계열, 빨간색 계열 등)별 옵션을 제공하는데, 이 기본 세팅값들이 인간 공학적으로 설계되어 대충 넣어도 깔끔하고 만족스러웠습니다. 디자인은 결국 통일성이 전부라고 생각합니다.

러나 Bootstrap에서 원하는 Calendar 컴포넌트는 찾을 수 없었습니다. 그래서 HTML Table을 이용해 달력을 만들었습다. 이때는 별 생각이 없었지만 나중에 DB와 연결할 때 꽤나 고생했습니다. '이게 맞아? 이렇게 해도 되나?'를 백오십만번 내뱉으며 작업했습니다. 이때 별 생각 없이 추가한 날짜별 클래스 이름들은 하나도 의미 없었습니다😅
3-4) 백엔드
기존에 데이터를 받고 있던 Typeform에서 정보를 전처리해 가져오고 DB 구조를 만들었어요.

MySQL 테이블은 아래와 같이 두 개의 테이블을 썼습니다. 유저가 한 일을 기록할 때는 'user_data' 테이블에 기록되고, 유저가 닉네임 또는 이모지 정보를 바꿀 때는 'user_info' 테이블에 기록되게 하였습니다.

예외 처리에서 가장 많은 시간이 걸렸습니다. 이전의 PHP 사용 경험은 프로토타입 IoT 디바이스 하나에서 정보를 받으면 SQL 테이블에 넣어주기. 그리고 SQL 쿼리 자체로 처리할 수 있는 조건식을 활용하여 문자메시지 API가 작동되게 하는 것 정도였거든요. 이 프로젝트 덕분에 백엔드 개발과 많이 친해졌고, node.js 도 얼른 해봐야겠다는 생각을 하게 되었습니다.
3-5) 배포와 오류 수정
Hani가 한 달에 500원씩 내며 유지하고 있던 cafe24 서버로 배포했습니다. 예산이 있는 프로젝트가 아니었기 때문에, 따로 도메인을 연결하지는 않았습니다. 그래서 bit.ly 로 URL을 줄여서 higher efficiency 인스타그램 프로필에 링크했습니다.
새로운 사용자 추가 과정 등에서 약간의 오류가 있어서 수정했습니다. 나머지는 잘 돌아갔어요!
--
어제 Fedor와 대화한 이후 영감과 좋은 에너지를 나눌 많은 사람들과 얕은 수준에서 연결되며 함께 각자 할 일을 하는 캠스터디를 열고 싶다는 생각을 했습니다. 그래서 이때 썼던 소프트웨어를 코드만 바꿔서 그대로 쓰려고요 ㅋㅋ ..
결국 커뮤니티를 만드는 이유는 외로움을 해소하고 에너지를 주고받고 싶다는 사회적 동물로서의 인간의 가장 근본적인 본능 때문인 것 같습니다!