군대에서 팀플하기

*썸네일은 거제 군부대와 관련 없습니다. 

이런 멘트 하나쯤 있으면 아주 나이스하지

 

해안선 작전확인 웹을 만들며 생긴 일

 

---

시작

때는 어느 날과 다름 없는 칙칙한 지통실이였다. 뒤에서 장비는 삑삑삑-삐삑 소리와 함께 쉼없이 울려대고 당직병의 한숨소리와 통신병의 교신소리만 들린다. 이미 가라앉을만큼 가라앉은 분위기 속에서  정보과장이 갑자기 다가와 "영환아 엑셀 할줄 아냐?" 란 말에

나는 즉각 '이건 짬이다. 할 줄 알면 큰일난다' 라는 생각과 함께 sum 함수만 겨우 쓴다는 대답을 하고 화장실에 다녀왔다.

 

그러나 왠걸 화장실을 다녀오니 "실망이다 반영환." 이란 말과 함께 나는 엑셀을 할 줄 아는 놈이 되어있었다. 선임이 오해하고 내가 할 줄 안다고 했던 것. 일단 엑셀은 정말 할 줄 모른다고 정정하고 무슨 일인지 물어봤다.

 

사단장님이 거제 작전지역을 한 눈에 파악할 수 있도록 기존에 다른 곳에서 사용하던 (아닐 수도 있다.) 엑셀을 손 보라고 했다는 것.

그러나 정보과장은 이를 조작할 능력도 여건도 안됐던 것. 

 

이를 보며 마음속으로 '흠.. 엑셀 말고 웹으로 하면 쉽게 할 수 있을거같은데?' 란 생각을 1초간 하다가 '여기서 어떻게 해...' 란 생각을 하며 입을 굳게 닫았다.

 

"웹으로 만들면 금방 만들 수 있을거 같습니다 과장님."

 

선임이 말했다. 나는 귀를 잠시 의심했지만 이미 일은 벌어진 뒤. 나랑 맞선임이랑 소파견지에 있는 맞선임의 동기랑 함께하면 금방 끝낼 수 있다고 하는 것이다. 엑셀로 만드는 것은 짬이지만 웹으로 그것도 군대에서 프로젝트를 한다..? 이거 생각보다 재밌을지도? 하며 선임의 의견에 동의했다. 

 

??? : "이거 웹으로 만들면 금방 만들거 같은데? (아니였음.) 레이아웃만 잡고 작전은 뭐 별거 우리가 손 볼거 없잖아. (별거 있었음.)"

 

그렇게 소파견지에 있는 선임(카이스트 컴공 - 리액트 사용경험), 맞선임(고려대수학과 - 군대와서 코딩 처음 배움) 그리고 나(서울대 공릉캠 - itm 3학년 1학기 무사히 마침) 이렇게 세명이 모여서 이 일이 시작됐다.

 

---

그 때 우리는

처음 만난 셋은 정보과에 티 테이블에 모여앉아 (왜 있는지 모르겠다.) 설레는 마음을 가지고 어떻게 일을 진행할지 말하기 시작했다. 레이아웃을 한 번 짜보고 기능은 어떻게 구현할지 작전은 어떤 요소를 넣을지를 고민했다. 

 

프레임워크 없는 웹개발은 3명 모두 처음이라 굉장히 힘들 것 같았지만 군대에서 코딩을 하고 팀플을 할 수 있는 경험을 쌓을 수 있다는 것만으로도 굉장히 설레고 행복한 일이였다. (후에 불행해짐.)

 

후에 작업공간은 통신소대로 정하고 들어오자마자 notepad+(은솔이 땡큐!)로 레이아웃부터 짜기 시작했다. 내 담당이였는데 맨 땅에 리액트부터 배웠던 반영환이 뭐가 뭔지몰라서 html css 공부를 했던 지난 1년의 경험을 바탕으로 아주 양호히 초안을 완성했다. (근데 난 백엔드 할건데 왜 모든 역할이 프론트지? ㅋㅋ)

 

---

정보과장님 그러실 거에요?

처음 작전을 도식할 때 180개로 나누어진 해안선을 클릭해서 범위를 선택해 작전 지역을 고르도록 유도하려고 했다.

그런데 이게 해안선을 나누는 작업이 여간 힘든일이 아니였는데 정확히 자르고 png로 저장하고 폴더에 옮기는 행위를 180번 진행해야 했던 것.

 

그러나 세상에 마상에 이런일이 소파견지 맞선임(이하 소선임)이 구글링을 톡톡 하더니 div를 마우스 드래그로 생성해 그 사이에 있는 png파일을 자르는 기염을 토해냈다. (이때부터 느꼈다. 프론트라도 내가 해서 다행이다.)

 

그러나 항상 비극은 행복 뒤에 찾아오는 법. 

 

"과장님 이거 해안선 작전지역이 애매하게 걸쳐있고 순찰 범위가 ppt에 없는데 어떡합니까?"

 

??? : "어 그거 참고철에 자료들 모여있으니까 그거 봐봐."

 

????? 병사가..비문..작전을..분석을..? 이때부터 우리는 180개의 div 조각을 작전 지역에 1대1로 대응시키기 위해서 3일 밤낮으로 작전을 분석하고 db를 구성하기 시작했다.

 

---

코드스타일

나는 카멜스타일을 선호한다. 무엇보다 ctrl + shift로 변수명을 한 번에 고를 수 있기 때문이고 그 무엇보다 이쁘다.

 

그런데 소선임은 스네이크스타일을 선호했다. 이 때 대강 스네이크스타일로 진행하자고 정했다. (대충 기억은 안나지만 그랬다.)

 

그리고 나는 일단 코드가 실행되게 짠 뒤에 후에 리팩토링을 하는 스타일이다. 그러나 소선임은 불편함을 참지 못하는 사람이였다.

div의 width가 1px이라도 어긋나면 '불-편'을 외치며 코드르 수정하고 5~10분동안 if문의 ()와 {}의 간격에 대해 토의했다.

 

그러나 이런 모습은 나에게 굉장히 긍정적으로 다가왔다. 이런 세세함과 시작부터 견고한 코드를 짜는 사람과 함께 코드스타일을 맞추어가며 코딩을 해나가니 잔실수가 적어졌고 코드가 전체적으로 훨씬 보기 좋아졌다. (스네이크스타일 제외. 암튼 제외)

 

 css는 컴포넌트의 위치에 따라서 레이아웃 방향은 좌에서 우로, 코드의 방향은 상에서 하로 맞춰갔다. 이렇게 기준을 정해놓고 코드를 작성하니 후에 리팩토링이나 수정할 사항이 생길 때 매우 편했다. (1.2.3ver를 수정하는 지금도 다행이라 생각한다.)

 

소선임에게 배울점은 또 하나 있다. 바로 기능들을 모듈화를 잘 시킨다는 것!

 

무한 if-else문으로 "아빠 지구는 왜 돌아요? - 돌아가잖아. 일단 냅둬."에서 내 코드가 지구인 것 마냥 방치하며 코드를 짰는데 소선임은 카이스트여서 잘하는건지 그냥 잘하는건지 (둘 다 그냥아닌가?) 코드를 보면 깔끔했다.

 

필요한 기능별로 모듈화를 시켜서 후에 우리가 수정사항을 받아도(후가 아니라 지금이다.) 작성하기 매우 편하게 만들었다. (실제로 매우 편했다. 땡큐!)

 

반성도 많이되고 1.2.3ver를 수정하고있는 지금조차 냅다 박아버리는 코드를 작성한 나는 꼭 다음에 사회에서 코딩할 땐 깔끔하게 해야함을 다짐한다.

---

애로사항

나는 대대 통신소대원이다. 전산병이자 머머장의 친아들이지.

 

그에 반해 소상병은 머머장의 동생의 아들이다. 그래서 지금 사촌이 우리집에 놀러온 상황인 것.

 

사촌은 오면 뭘 하는가? 논다. 일 안한다. 그래서 그 시간동안 풀로 코딩에 매달릴 수 있었다. (피곤했겠다. 마음아프다.)

 

나와 내 맞선임은 낮에는 업무를 그리고 밤에는 야간근무 그리고 코딩을 하면서 8일 밤낮을 개인정비시간이 거의 없이 쭉 코딩과 업무만 했다. 하고싶은 일을 하며 재미는 있었지만 이도 체력적으로 한계가 있었다. (24살이잖아...24살이잖아...)

 

게다가 같이 토론을 하며 코드를 진행한 것이 아니라 소선임이 일과시간동안 코드를 짜놓으면 이를 우리가 로직별로 큼지막하게 이해해서 작전도 수정하고 사용자 기능도 수정했다.

 

이러니 로직을 이어놓은 부분은 소선임이 진행하고 나는 프론트컴포넌트 싸개와 이벤트 리스너 싸개가 됐고 맞선임은 작전분석싸개와 div 숫자싸개가 되었다.

 

---

로그파일

나는 수정사항을 log파일로 관리했다. 그래야 한 눈에 무엇을 했고 무엇이 바뀌었는지 알 수 있..기...때문인데 log파일을 메모장에만 관리하고 이전 버전을 지워버렸다.(?) 이럴꺼면 왜 써놨는지 몰라 참나.

 

그래. 사실 기분이라도 내보려고 썼다. 밖에선 github 있으니까 그때부터 잘하자. (밖에서? ㅋㅋ)

 

1.0.0ver : 초기 빌드 버전
1.0.1ver : 00 간0 0찰 조에 할당된 처부 이름 삭제
-----------------------------------------------
1.1.0ver : 작전 인원을 저장해도 순찰 관련 작전은 추가가 안되는 오류 제거
-----------------------------------------------------------------------
1.2.0ver : 해안선 다시 그린 뒤 div 번호 재생성, 레00, 고00O0, 000OD, 0복0, U00까지 변경사항 적용
1.2.1ver : 로그인창 엔터치면 로그인 되게 설정, 작전추가창 리뉴얼 및 선종류 안내 div 위치 변경
1.2.2ver : 같은 이름의 해안선 구간이 작전 표시가 안되는 오류 제거, 로그인창에 버전명 개시
1.2.3ver : 작전 입력창 화살표 드래그로 이동가능하게 변경
1.2.4ver : 작전지역 체크박스 크기 증가

---

대대장 수정사항

갑자기 무슨 바람이 불었는지 (좀 쌔게 불어서 날라갔으면 더 좋았을 탠데!) 대대장이 해안선에 절벽지역을 따로 분리해달라 했다. 그리고 항구 구간에 해안선 말고 이름을 좀 구체적으로 붙여달라 했다. 그래서 우리는 다시 해안선 조각을 270개로 분리해내는 기염을 토해냈다. (토나온다. 만약에 소선임이 div tool을 안만들었다면..? 우리는 아마 지금쯤 숨 쉰채 발견됐을 것이다.)

 

270개의 조각에 하나하나 이름을 불러주자 그들은 내게 날아와 항포구가 되었다. (render함수가 좀 꼬여있었고 남의 코드가 이해하기 참 쉬운일이 아니라는걸 새삼 느꼈다.)

 

div 창을 옮기는건 생각보다 google에 간단하게 나와있어서 행복했다. 그냥 뇌 빼고 툭툭 쳤다. 너무 피곤했었으니까.

---

느낀 점

1. 대학교 팀플과는 사뭇 다른 분위기 (사뭇을 넘어선 팔뭇 십육뭇 삼십이뭇..)
2. 해서 안되는 곳에서 무언갈 하는 배덕감 (핸드폰 24시간)
3. 남들은 냉동 치킨 먹을 때 교촌 치킨 뜯는 희열
4. 느슨해진 군생활에 한 번의 탄력

남들과 생각을 하며 만든 세번째 토이프로젝트이기 때문에 (이게 토이였다고? 아프진~않니~ 많이~ 걱정돼~)

나름 의미가 있었다고 생각한다. 

 

첫 번째 프로젝트는 자료구조 팀플. 이때 코딩하다가 울었다. 서러워서.

 

두 번째 프로젝트는 빅데이터 웹개발 팀플. 이때도 울었다. 힘들어서.

 

저~위에선 내가 정말 수정싸개가 된 것처럼 써놨지만 나름 발전도 있었다.

 

먼저모르는 것에 대한 두려움이 사라진 것. 이 기능을 구현할 수 있을까?란 질문에 안될 것 같은데 라는 질문을 던지는 내가 있었다면 구글링해볼까? 로 마음이 열린 것. 아..전체 기능에 대한 코드가 있으면 좋겠다.란 안일한 생각에서 아 이 부분만 코드 참고할 만한게 있을까? 로 생각이 깊어진 것.

 

언어에 대한 지식이나 몰랐던 새로운 함수를 알았다는 등의 뻔한 교훈은 없었다. 그저 웹을 도식하고 똑똑한 사람이 만든 로직을 구현한 역할 뿐이였으니까. 

 

하지만 규칙성 있는 코드를 작성하고 모듈화를 시키는 것에 대한 중요성을 인지하고 다른 이들과 생각을 공유할 때 어떤 자세로 임해야 하는지 느꼈고 모르는 것은 모르는 것일 뿐 안되는 것이 아니라는 점을 알게됐다.

 

이 프로젝트는 정말 가볍게 시작해서 무겁게 끝났지만(마무리는 잘 됐다.) 무겁게 끝난 만큼 나에게 있어서 가벼운 경험이 아닌 정말 프로그래밍을 하면서 가져야 할 자세에 대해 다시 한 번 깨닫고 그 필요성을 몸소 경험한 아주 중요한 시간이였다.

 

2022/01/08 ~ 2022/01/24 거제대대에서 24살의 영환이의 잊지 못할 경험