TIL

패스트캠퍼스 해커톤 후기(Clone Trello)

0. 사용기술

  • Angular
  • TypeScript
  • HTML
  • CSS
  • Python
  • Django(Rest Framework)

1. 해커톤 주제

이번 해커톤의 주제는 Life changing (인생을 바꾸는 ___ ): 이었다.

2. 팀빌딩

이번 해커톤의 팀빌딩 방식은 프론트엔드, 백엔드 , ios 나누지 않고 먼저 주제를 제안하는 제안자가 구글 스프레드시트에 주제를 기입하고 그 주제에 참여를 원하는 사람들이 자유롭게 팀이 되는 형식이었다. 나는 인생을 바꾸는 계획이라는 이름으로 trello를 clone 하자는 제안을 하였고 나를 포함하여 프론트엔드 3명, 백엔드 2명 총 5명이 팀을 이루었다.

3. MVP 선정

trello를 clone 하자는 계획을 세웠지만 무턱대고 할 수는 없었다. 순수히 개발을 할 수 있는데 쏟아 부을 수 있는 시간은 대략 30시간 내외 였기 때문에 어느 정도의 기능까지 구현을 할 지 정하고 MVP를 선정하여야 했다. 의논 끝에 회원가입과 다른 사람을 초대하여 같이 board를 사용하는 기능은 시간 내 구현이 어려울 것이라 예상하여 제외하고 trello의 핵심 기능인 List CRUD, Card CRUD, Dialog CRUD , List MOVE, Card MOVE를 MVP로 선정하고 MVP가 완료되면 배경색 변경 기능과 라벨 기능을 추가하기로 하였다. 이렇게 MVP를 선정하고 난 후에 우리는 가장 낯설면서도 핵심 기능중의 하나인 List MOVE, Card MOVE 기능을 구현해보기로 하였다. 의논 끝에 하드코딩으로 구현하기에는 어려운 기능이라고 생각하여 Drag & Drop 기능을 지원해주는 라이브러리가 있는지 찾아보기로 하였다. 팀원 중 한명이 찾아내었고 그 링크는 아래와 같다.

Angular material

하지만 위 링크에 있는 예제만으로는 trello의 Drag & Drop 기능을 완벽하게 구현할 수는 없었다. trello의 Drag & Drop 기능은 리스트 간 이동, 리스트 내에서 카드 이동, 리스트 간 카드 이동이 전부 가능하여야 했다. 그래도 우리 팀은 포기하지 않고 위 링크에 나와있는 예제 코드를 이용하여 trello의 Drag & Drop 기능을 구현하는데 성공하였다. (이 기능을 구현하고는 거의 다 한거라고 생각했다…)

4. 디자인, UI 및 레이아웃 && UX 분석

기능을 구현하기에 앞서 디자인, UI 및 레이아웃을 먼저 만들기 시작하였다. trello를 clone 하는 것이기 때문에 별다른 설계없이 trello 웹페이지를 보고 clone하였다. 팀원 중 한명이 여러 사람이 함께 하는 것보다는 한명이 담당하여 빠르게 작업하는 것이 더 좋을 것 같다는 의견을 제시하여서 그렇게 하고 다른 사람들은 그동안 trello 웹페이지를 분석하기로 하였다. 팀원 한명이 디자인 작업을 하는 동안 나머지 팀원과 같이 trello를 분석해보았다. trello를 분석해보면서 느낀 점은 확실히 세계적으로 널리 사용하는 웹 기반의 프로젝트 관리 소프트웨어 답게 처음 접하는 사람들도 쉽게 이용할 수 있는 직관적이고 쉬운 ui, ux를 제공하고 있었다. 그 핵심인 Drag & Drop 기능은 물론이고 사용자가 불필요한 동작을 더 할 필요없이 간결하고 효율적이었다. 예를 들면, 리스트 하나를 만들고 다음 리스트를 만들 시 다른 동작 필요없이 입력하고 enter만 치면 된다. 자동으로 다음 리스트를 만드는 곳으로 커서가 focus 되기 때문이다.

5. 백엔드와의 협업

백엔드와 회의를 통해서 어떤 형태의 자료구조로 데이터를 주고 받을 것인지 또, 어떤 기능을 서버와 통신하게 할 것인지 결정하였다. 먼저 자료구조 예시는 아래와 같다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
lists: List[] =
[
{
"id": 62,
"title": "todo1",
"listSort": 0,
"cards": [
{
"title": 62,
"id": 57,
"cardTitle": "잼잼",
"description": null,
"comments": [],
"cardSort": 0
},
{
"title": 62,
"id": 58,
"cardTitle": "하이루",
"description": null,
"comments": [],
"cardSort": 1
}
]
}
]

배열 안에 객체 또 그 객체 안에 배열로 이루어진 조금은 복잡한 자료구조이다. 아직 자료구조에 대해서 잘 알지 못해서 이런 구조로 만드는 것이 효율적인지는 판별하기가 어렵다.

위 자료구조에서 가장 까다로웠던 부분은 listSort, cardSort이다. 네임에서도 알 수 있듯이 Drag & Drop 기능을 이용하여 list와 card를 이동하였을 시에 그 index 값을 서버에게 전달하여 이동한 위치를 저장하기 위해 필요한 데이터이다. 사실 처음에는 생각하지 못한 부분이었다. 당황스러웠지만 팀의 협업에 의해 고차함수 map의 두번째 파라미터인 index를 이용하여 데이터를 추출하여 서버에 전달 할 수 있었다.

위 자료구조에 interface는 아래와 같다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
export interface List {
id: number;
title: string;
listSort: number;
cards: Array<Card>;
}

export interface Card {
title: number;
id?: number;
cardTitle: string;
description: string | null;
comments: Array<Comment>;
cardSort: number;
}

export interface Comment {
id: number;
comment: string;
card: number;
}

서버와 통신할 기능은 List CRUD, Card CRUD, Dialog CRUD , List MOVE, Card MOVE의 MVP 전부와 추가적으로 가능하다면 배경색 과 라벨까지 하기로 하였다.

6. 기능 구현

기능 구현 당시 아직 백엔드에서 작업이 완료되지 않았기 때문에 함수를 이용하여 id와 같이 필요한 데이터를 임의적으로 생성하여 작업을 진행하였다. 기능은 크게 list와 card, dialog로 나눌 수 있었다. 마침 프론트엔드 팀원이 3명이었기 때문에 각자 하나씩 맡아서 진행하였다. 나는 list 파트를 맡아서 진행하였다. list 파트를 진행하면서 가장 어려웠던 점은 사용자의 편의를 생각해서 다양한 이벤트를 생성해야 하고 그 이벤트들을 독립적으로 생성하면 되는 것이 아니라 리스트 간 또, 리스트와 카드 간의 관계를 생각해서 유기적으로 만들어야 한다는 점이었다. 정말 생각한대로 되지 않아서 많은 시행착오를 거듭하였지만 팀원들의 도움에 힘입어 기능 구현에 성공하였다. 해커톤 하면서 가장 큰 깨달음은 문제가 발생하였을시 물론 혼자 문제를 해결해보려고 하는 시도도 필요하지만 너무 불필요하게 오래 문제를 잡고 있는 것보다는 팀원들과의 협력하여 해결하는 것이 더 빠르고 정확하다는 것이다. 우리 팀은 그렇게 막히면 서로에게 물어보고 도움을 청하면서 문제들을 해결하였다. 리스트 기능 구현이 생각보다 일찍 끝나게 되어서 배경색을 변경하는 기능까지 진행하였다.

7. 서버와의 통신

해커톤 당일. 서버와의 통신 기능 부분을 제외하고는 상당히 많은 부분의 기능을 구현한 상태로 시작하였다. 서버와의 통신을 위하여 HttpClient 객체와 subscribe를 사용하였다. 백엔드 팀원들이 전해준 api document를 보면서 개발을 진행하였다. api docment를 보면서 개발을 진행한 것은 처음이었는데 직관적이고 이해하기 쉽게 되어있어서 백엔드 팀원들과 많은 대화를 하지 않아도 개발을 진행할 수 있었다. 직접 server에 request를 날려 볼 수도 있고 Request URL, Response Body도 확인해 볼 수 있었다. 서버와의 통신은 생각보다는 순조롭게 이루어졌다.

8. 발표 및 수상

발표는 한 팀원에 자원해서 진행하였다. 발표컨셉은 trello를 잘 모르는 사람들에게 실제 trello를 보여준다고 하면서 우리가 만든 trello를 보여주는 것이었다. 발표가 끝나고 여러 사람들에게 물어보니 잘 먹힌듯(?)하다. 다른 팀들의 발표가 모두 끝나고 해커톤 참여자들의 투표와 심사위원님들의 평가결과를 합산하여 수상을 진행하였다. 총 12팀이 참가하였고 3팀이 수상의 영광을 안았다. 다행히 우리 팀도 인생을 바꾸는 작은 기술상을 수상하였다. 해커톤 시작 전 가장 탐나던 상이었는데 수상을 하게 되어서 좋았다.

9. 결과물

devpost

github

Share