비전공자, 기획과 개발로 첫 해커톤을 준비하다 (3)
멋쟁이 사자처럼 직장인 서울 5기, 서비스 개발 과정
멋쟁이 사자처럼 직장인 5기로 웹 서비스를 기획하면서 느낀 점과 과정 등을 시리즈로 제작해보았다! 오늘은 3편, 서비스 개발 과정에 대한 내용이다.
앞선 1,2편 링크는 아래에!
▼1편 링크▼
비전공자, 기획과 개발로 첫 해커톤을 준비하다 (1) : 멋쟁이 사자처럼 직장인 서울 5기, 공부법과 커리큘럼 그리고 느낀 점
▼2편 링크▼
비전공자, 기획과 개발로 첫 해커톤을 준비하다 (2) : 멋쟁이 사자처럼 직장인 서울 5기, 아이디어톤과 팀빌딩
05. 서비스 개발 과정
1) 큰 그림부터, 페이지 만들기 - HTML & CSS
우리 서비스는 플랫폼 서비스인 만큼 많은 페이지가 필요했다. 그리고 그 페이지마다 들어갈 기능들이 아주 많았기 때문에 '우선순위'가 중요했다. 모든 기능을 구현하는 건 현실적으로 불가능했고, 비효율 적이었다. 우선순위를 두고, 꼭 필요한 기능부터 구현하는 게 당연했다. 그래서 우선순위를 정하자니 머리로는 그려지는 데 설명에는 한계가 있어서 oven을 사용해서 화면을 초기 설계했었다. 하지만 뭔가 부족했다. 그래서 예시로 메인 페이지를 내게 가장 편한 툴인 ppt로 디테일하게 설계했고, 매니징 시간에 들고 가서 강사님께 보여드렸다. 강사님께서도 칭찬해주시며 이런 식으로 그림으로 그려진 페이지를 먼저 만들어보면 한결 수월할 것이라는 팁을 주셨다. 그래서 우리는 각자 oven에 만들었던 것처럼 각자 맡은 페이지의 HTML과 CSS를 먼저 시작했다.
FIF 화면 설계 초안 (oven)
1-2주간 나는 HTML과 CSS에 묻혀 살았다. 백엔드보다 적성에 더 잘 맞아서도 그랬지만, 무엇보다 '밑그림 없이는 색칠도 할 수 없고, 그림을 전시할 수도 없으며, 그 그림을 보는 관객들을 초대할 수도 없다'라는 생각 하나로 나는 디자인과 퍼블리싱에 진심이었다. 거의 모든 약속을 취소하고 퇴근 후 카페에 가서, 집에서 3-4시간을 매달렸다. notion에 적어뒀던 HTML 기초 수업 필기를 보면서 뼈대를 만들고, 정말 열심히 구글링 해가면서 그렇게 징그럽도록 페이지만 만들었다. Python과 Django를 일부러 잊고 살았다. 초반에는 CSS 정렬이 안돼서 강의도 찾아보며 몇 시간을 매달렸지만, 이젠 HTML에서 jQuery도 활용하고, CSS에서 animation 기능까지 쓸 수 있게 되었다. 크고 작은 배너까지도 직접 포토샵으로 제작했다. 그리고 어느 서비스 페이지를 들어가든 관리자 모드에서 style을 확인하는 습관이 생겼다. (Ctrl+Shift+C....)
물론 HTML과 CSS는 해커톤 발표 직전까지 수정했다. 심지어 난 막판에 전체적인 디자인과 특히 메인 페이지를 한 번 엎겠다고 선언했었고, 페이지들의 전체적인 디자인을 통일시켰다.
그리고 지나고 나서 생각해보니 개인적으로 HTML/CSS 퍼블리싱 작업을 할 때 미리 알았더라면 더 좋았을 내용들을 정리해봤다.
(1) HTML/CSS는 자기가 만든 내용을 어느 정도 기억하고 있어야 한다. 다른 팀원이 수정하기 수월하려면, 내 기억력이 한계가 있다고 느낀다면 id나 class 명도 직관적이게 만들 필요가, 아니 의무가 있다.
(2) CSS는 해당 내용들이 어떤 것에 관련된 건지, 주석으로 제목을 적어주는 것도 좋은 방법이다.
(3) tab키는 귀찮더라도, 옆으로 늘어지더라도 꼭 해서 구분해야 한다. tab이 제대로 안된 div가 closing 되지 않아서 먹통이 된 페이지를 붙잡고 허송 시간을 보낸 게 한두 번이 아니었다.
(4) 서버를 연결하기 전까지는, Live Server는 꼭 깔아서 하자. 수정할 때마다 runserver 하고 새로고침 하던 시간이 너무 아깝다.
(5) 어디선가 복사해 온 코드라면, (JS는 더더욱) 출처를 주석으로 달아놓으면 좋을 것 같다. 마무리할 때쯤 되니까 처음부터 그러지 못한 게 아쉬웠다.
2) 뼈대 만들기 - MVT
다시 한번, 노션으로 정리했던 내용들이 빛을 발하는 순간이 있었다. MVT Pattern 내용에서 헷갈리거나 기억나지 않는 부분들은 항상 나의 CODING 페이지로 가서 참고했다.
Model, Template, View의 개념과 원리만 알아도 Django에서 웬만한 서비스를 개발할 수 있다.
MVT는 5주 차 때 배웠는데, 사실 이때부터 Django를 이해하기 시작했고, 그동안 배웠던 것들의 이유를 알게 되었다. 그동안은 이걸 도대체 어디에 쓰는 건가, 싶은- 예를 들면 고등학교 수학 개념과 같은 느낌이었는데, MVT를 배우면서부터는 실제 그 개념들을 통해 눈에 보이는 무언가를 만들기 시작했다.
우리는 큰 카테고리마다 앱을 만들었다. 앱도 정말 많았고, 각 앱마다 html은 기본 2개 이상, 4-5개까지도 있었다. 그래서 총 랜딩 페이지수는.. 굳이 언급하지 않아도 정말 많았다는 걸 알 수 있다.
3) 개발 그리고 개발
그림을 그렸으니, 그림이 현실이 되게 하는 마법을 부릴 차례였다. 우리는 차근차근 체크하며 정리해뒀던 노션의 기능 구현 리스트를 보면서 그리고 끊임없이 회의하면서 기능 구현을 위해 열심히 개발했다. 사실 기능 구현 리스트는 대부분 내가 작성한 것이었는데, (욕심 가득..) 지나고 나니 팀원들에게 정말 미안할 정도로 있어야 할 게 너무 많았던 것도 사실이다. 배운 것 이상으로 해내야 할 것들도 많았고, 세세하지만 꼭 있었으면 좋겠을 기능들까지.. 아무튼 시간도 없는데 양은 정말 많았다.
욕심 가득 기능 구현 리스트 대시보드우린 보통 주 단위로 끊어서 할 일을 정해 마무리했다. 그리고 결전의 11월, 당시엔 해커톤이 12월로 예정되어 있었으므로 11월 말은 거의 폭풍전야였다. 매주 토요일 수업 전 후 카페에서도, 주말과 쉬는 날은 팀원, 그리고 엔젤(!)의 집을 드나들며 코딩공장을 꾸렸다.
점심도 저녁도 같은 자리에서 챙겨 먹으면서 11월 마지막 토요일, 낮부터 새벽 1시가 넘어서까지 작업을 했다.
정말 많은 시간과 노력을 투자하면서 그만큼 많이 배운 것 같다. 개발 지식뿐만 아니라 함께 개발하는 것도, 시간과 할 일을 적당히 분배하는 것도 중요하다는 것을 배울 수 있었다.
사실 각 기능마다 어떤 식으로 구현했는지, 어떤 노력과 삽질을 거듭했는지.. 적는 것도 좋겠지만 그렇게 하면 정말 긴 글이 될 것 같아서 과감히 생략하기로 했다! 구글 검색과 보조강사(엔젤)님 도움을 많이 받았다는 사실만 기록해 두기로!
12월까지는 이런 식으로 잠도, 일정도 줄여가면서 열심히 해커톤을 준비했다.
하지만 몇 가지 이슈 때문에 기존 일정이 미뤄지고, 특히 코로나로 인한 집합 금지가 연말까지 연장되면서 우리는 해커톤 무기한 연기라는 아쉬운 결정이 내려졌다.
12월 7일, 집합 금지 조치 이후의 공지 
결국 미뤄진 해커톤사회적 거리두기 2단계 미만 격하까지 연기하는 것이 해커톤을 3월에 하게 되리라는 것을 그땐 아무도 예상하지 못했고, 덕분에 3개월 정도 힘이 빠진 채 허무하게 보냈다. 아직 해내지 못한 것들이 많았지만 도무지 속도를 내지 못한 채 미뤄뒀다. 그리고 드디어 3월 해커톤 날짜가 정해졌다.
Copyright 2021. 임지은 All pictures cannot be copied without permission
