[합주시간표 프로젝트] 01# 기획과 구상, 시간표 만들기

01. 문제상황

---

밴드 동아리에서 사용할 합주 시간표 마법사가 필요했다.

 

밴드 동아리 특성 상 합주를 해야하는 일이 많은데 

기타2, 베이스1, 드럼1, 키보드1, 보컬1 총 6명이 공통으로 비어있는 시간을 맞추기란 쉽지가 않았다.

 

그래서 파이썬을 잘 다루는 동아리 부원중 한명이 파이썬 라이브러리로 히트맵을 만들어

시각화해서 보여주는 합주 시간표 마법사를 만들었으나,

일일이 데이터를 입력하여 캡쳐해서 단톡에 보내주는것이 꽤 불편해 보였다..

 

그래서 그냥 필요한 사람들의 이름만 입력하면 자동으로 합주 가능한 시간을 보여주는

웹사이트를 만들어 배포하면 친구의 수고로움도 덜고,

다른 부원들도 직접 들어가서 확인할 수 있으니 좀 더 편리할것이라는 생각이 들었다.

 

그래서 경험도 쌓아 볼 겸 개인 프로젝트를 진행하기로 하였다.

 

02. 기획 구상

---

어쨌든 내가 사용할 서비스이기도 하니, 사용자인 내 입장에서 구상을 해보았다.

당연히 부담없이 들어갈 수 있도록 반응형 모바일 웹으로 제작하기로 한다.

 

우선, 필수적으로 들어가야 할 기능을 생각하면 이랬다.

 

1. 메인 기능 : 공통으로 비어있는 시간표를 시각화해서 보여줄것

2. 저장된 시간표들을 클릭해서 확인할 수 있을것

3. 사람들의 이름을 클릭해서 시간표를 제작할 수 있을 것

 

기능은 우선순위대로 나열해 보았다..ㅎㅎ

최대한 빨리 만들고 사용해야하기에 시간이 없으므로

우선 1번,2번을 제대로 만드는게 목표!

 

그래서 카페에서 대충 화면 구성과 기능들을 끄적여보았다.

편리함을 위해 함께 합주하는 사람들 이름을 추가하면 좋을것 같았다.

 

3. 시간표 제작

---

우선 메인 기능인 시간표의 시각화부터 진행하기로 하였다.

이게 실패하면 만드는 이유가 없기때문에.. 계획을 세움과 동시에 만들어보았다.

 

우선 완성본은 이러하다. 아직 데이터 연결은 안해둔 상태이다.

이름이 구리다고 하면 슬프다... 급하게 생각해낸거라구.. / 오른쪽은 모바일로 보았을때의 화면. 깔끔하게 보이도록 마진을 주었다.

 

상단에는 합주 곡 제목과 합주 참여 인원

아래 시간표에는 공통으로 합주가 가능한 시간 (공강시간)을 색깔로 표시하도록 하였다.

 

시간표 디자인은 에브리타임을 참고하였고, 시간표는 table로 제작하였다.

참고 자료를 찾아보다 CanvasAPI로 제작을 하신 분의 프로젝트를 보았는데

CanvasAPI를 다루는게 서툴기도 하고, 과목을 구분할 필요도 없고

급하게 만들어야하는 나에게는 맞지 않을것이라 생각하여

웹 프로젝트 예제로 만들어보기 국룰인 table을 이용하였다.

 

이건 나도 자꾸 헷갈려서 만들어온 테이블 태그이다..🥹

근데 또 여기서 요소들을 묶기 위해 <tbody> , <thead>, <tfoot>등의 태그를 사용한다.

 

표는

1. 월화수목금토일(7)의 리스트를 만든다

2. 8시부터 23시까지()의 시간 리스트를 만든다

3. 이중 리스트 만드는것 마냥 map()을 이용해 표를 제작한다.

 

코드를 그림으로 정리 요약하면 이런 느낌이다.

보기 쉽게 뭉텅이로 묶어본 코드.

이해하기 쉽죠?

 

핵심 코드는 이거다.

사람들의 시간표가 비워져있다면 pink색을 칠하는것이다.

(즉, 시간이 포함되어있다면 하얀색)

---

나 뿐만 아니라 친구들이 직접 사용할 서비스를 만드니까 너무 즐거웠다..

코딩이 이렇게 재밌는줄 몰랐다. 오늘 하루종일 노트북만 뚜드린듯

 

다음 포스팅은 우선 순위 2번, 저장된 시간표 클릭해서 불러오기를 해보겠다.

한달 내로 완료해보장

아자아자