쌀 팔다 개발자

주니어 개발자의 새벽배송 개발기

커머스는 우리가 생각하는 것보다 훨씬 더 복잡하다.
단순히 상품을 진열하고 구매하는 것을 벗어나서, 실제 구매가 이루어진 후의
상품 출고 과정과 고객분들의 후기, 그리고 교환과 반품과 같은 CX처리까지...

이 모든 과정이 끝나야지 정말로 커머스의 한 사이클을 돌았다고 이야기할 수 있다. 

물론 사람이 진열할 상품을 고르고, 가격을 설정하고, 상품을 보내고, CX상담을 하고 하지만
이 모든 것들을 가능하게 하는 로직이 바탕이 되어야 한다. 발생할 수 있는 모든 케이스에 대해서 로직 처리가 되어있다 보니
커머스의 서버는 방대해질 수밖에 없다.

다노에 입사한 지 어느덧 2년이라는 시간이 지났다. 그 과정 속에서 나는 더 성장을 한 것인지, 정체되어 있었는지 잘 모르겠다.
가끔은 잘하고 있다는 생각이 들 때도 있었고, 또 어쩔 때는 다른 개발자들과 비교하며 정체되어 있다는 느낌을 받기도 했다. 

뭐 이유야 어찌 되었든 나는 필요에 의해 개발을 하고 있는 사람이고, 개발 그 자체를 즐기진 못하고 있다.
(물론 내가 개발을 못 한다는 이야기는 아니다.) 

개발이 정말 나의 적성에 딱 맞으면 좋겠지만, 애당초 잘 맞지 않을 것이라는 것을 예상하고 들어왔고,
나름 내가 개발자로서 목표하였던 것들을 성취하면서 성장해 나가고 있는 것 같다.

어느덧 2년 넘게 바라보았던 다노샵 서버에 이제는 너무 큰 애정이 생겨버렸다.
수 없이 마주 하였던 버그들을 수정하고, 수많은 신규 피처들을 붙이면서 다노샵은 점점 고도화되어 가고 있다.

처음 다노샵은 카페 24에서 시작하였었다.
그러다가 카페 24에서 자체에서 운영하는 독립몰로 옮기기 위해 정말 노력하셨던 분들이 있었고,
나는 그 옮겨놓은 독립몰 큰 틀 안에서 새로운 것들을 지속해서 만들어 나갔다.
아무튼 처음 입사 때부터 사수분과 둘이서 다노샵 서버 전체를 다 보았고 유지보수 및 피처개발을 해나갔다.
(이런 경험은 쉽게 쌓을 수 없다고 생각한다. 정말 감사하다고 느낀다.)

큰 이슈가 없으면 기존 것을 최대한 활용하고 발전시켜 새로운 기능들을 붙여나갔다.
(지금 다노샵 독립몰은 정말 정말 다양한 기능들이 추가되어있다. 이게 카페 24 혹은 고도몰을 활용하지 않고 독립몰을 활용하는 이유이기도 할 것이다.)

새벽배송 관련 서비스 오픈은 작년부터 SCM팀에서 진행하고 싶었던 일이기도 하였고, 다노샵을 이용하는 나라는 고객 입장에서도 너무나도 도입되면 좋겠다고 생각한 배송 서비스였지만 여러 가지 회사 사정들과 급한 이슈들로 인해 뒤로 미뤄져 갔다.

아무튼 시간이 흘러 다노샵도 새벽배송을 도입하기로 결정이 되었고,
해당 피처 작업을 맡아서 진행한 스토리를 좀 적어보려고 한다.

새벽배송? 일단 무엇을 해야 할까? 너무나도 막막한 부분이지만,
SCM팀의 리더분의 이야기는 심플했다.

"이미 배송 협력사에서 시스템이 다 갖추어져 있어서 저희는 기존에 나오던 금일 출고될 상품들의 엑셀 파일에서
새벽배송 관련된 row만 한 줄 추가되면 됩니다."

이것을 믿고, 새벽배송 TF팀은 희망을 가졌다.(서버1, 프론트1, 디자이너1, PM1, QA1)

"그래. 새벽배송이 가능한 고객분들에게는 주소랑 연락처 이외에 새벽배송 관련된 정보를 더 받자. 그리고 그걸 서버 쪽에서 핸들링해서 출고 파일 뽑을 때 추가해주자"

오 ...!! 쏘 심플하다!!! 정말 저거면 된다고?! 생각하며 시작한 새벽배송은
DUE 자체도 1달 정도로 길지 않았다.

그렇게 출사표를 던졌다.(이때까지만 하더라도 거이 새벽배송은 서버 쪽만 건들면 되는 거 아닌가 라는 내부적인 생각도 있었다. 우리 TF팀조차도..)

(다노는 정말 응원도 많이 해준다 ㅎㅎ)

하지만 과연 그랬을까....??? 일단 가장 큰 문제는 현재 다노샵에서는 현재 주문서에서 주소지를 받고 변경할 수 있는 구조인데, 그렇다면 만약에 고객이 새벽배송만 가능한 상품을 가지고 주문서로 간 뒤, 새벽배송 불가능 주소지를 입력하게 되면 그 주문서에서 "이 상품은 새벽배송만 가능한 상품입니다"와 같은 알람이 뜬 뒤에 주문서를 탈주해야 하는 시나리오였다.

결국 고객 경험에서 매우 좋지 못한 FLOW였고 이것을 위해 최소한 장바구니 단계에서 혹은 제품 상세페이지 단계에서 주소지를 넣도록 하기 위한 조치가 필요했다. (그 이유 때문이었는지 새벽배송을 하는 다른 업체들을 참고해보아도 모두 그렇게 하고 있었다.)

결국 그러기 위해서는, 주문서, 장바구니 쪽 모두 대대적인 손을 봐야 하는 상황에 직면하였다. 뿐만 아니라 제품 상세 페이지에서도 새벽배송이 가능한지 여부등을 정확히 안내해야 될 필요성이 있었고 이것은 나의 주문 목록에서도 마찬가지였다. 그리고 추가적으로 중요한 것은 새벽배송이 도입되게 되면서 기존에 택배로만 가던 우리 배송 체계가 변경되고, 새벽배송지인지 혹은 일반 택배 배송지인지에 따라서 출고 날짜가 다를 수 있다는 것이었다.... (주문 마감시간부터 택배사 휴일, 출고 가능 날짜까지 모두 다르다)

WOW..... 기존에 출고 예정일을 안내해주는 로직 역시 매우 복잡한 상태였는데 이제는 이것을 새벽배송까지 추가하여 정확히 안내해야 한다는 것이 쉽지 않았다. 또한 제일 큰 문제는 ... 고객들에게 일괄적으로 안내되는 출고일과 실제 출고일이 전혀 다를 수 있는 것이었다.

기존에 CX에서 나왔던 이슈 중에 한 가지는
고객님은 제품 상세페이지에서 분명 이 날짜에 배송이 된다고 하여서 구매를 하였는데 실제로는 그렇지 못했다는 것이다.
하지만 이 부분은 해당 시기에 고객님께 어떻게 안내되었는지 알아내기가 쉽지 않았고, CX처리 역시 쉽지 않았다.

그나마 매일매일 SCM팀이 출고작업을 진행해주었기 때문에 그동안 큰 이슈가 없었지만 (아무튼 다 출고가 되니),
고객에게 언제로 안내되었고 정확히 언제 출고가 되었는지는 새벽배송을 기점으로 더 중요한 이슈가 되었다.

상세페이지에서는 주소지 상관없이 특정 로직을 따라서 출고 예정일을 안내해주고 있었고, 그 대신 매일 돌아가는 출고 작업 로직 속에는 전체 상품을 가지고 와서 '이 제품은 제주도 배송지라서 제외시켜야 해 혹은 이 등록된 주소지는 주말 수령이 불가능하니깐 제외하자. 오늘 이 상품은 배치 가능 요일이 아니야 등"을 체크하면서 출고 작업의 속도는 나날이 늦어지고 있었다. 

그렇기에 상세에서 고객에게 안내되는 출고 예정일은 정확할 수가 없었고(정확하지 않으면 1~2일 과 같이 애매한 표현을 쓰게 된다.) 이것은 새벽배송이 도입되면서 더욱 복잡하게 될 예정이었다. 고객에게 안내되는 출고일자가 언제였는지 알 수 없기에 배송이 늦어진다 하더라도  CX처리는 불가능했고, 실제 우리 출고가 얼마나 정확하게 이루어지고 있는지 측정될 수도 없었다.

아무튼 다노샵 서버를 개발하고 있는 개발자로서, 이번 새벽배송은 선택의 기로에 선 것과 같았다. 사실 어찌 되었든 고객이 마주하는 결과물은 비슷할 것이기에, 기존의 것에 추가하여서 갈 것인지 아니면 새롭게 판을 만들지...

사실 기존의 것에 추가하여서 가도 기존의 출고 예정일을 뽑는 로직이 더 복잡해지고, 고객에게 안내가 정확히 안 나가고, 기존 배치작업도 더 시간이 오래 걸리고 그것밖에 없지만.....(내 몸도 편할 수 있다!!)
앞으로 다노는 10배 더 성장할 수 있다고 생각하고, 그렇다고 하면 지금이 결정을 내려야 하는 시기가 아닌가라는 생각이 들었다.

그렇게 나는 목표를 좀 다르게 잡았다. (목표를 보면 알겠지만 새벽배송에 대한 목표가 없다.)

위와 같이 7가지의 objective를 세웠고
아래와 같이 좀 더 구체적으로 하위 목표들을 세웠다.
위를 정확하게 달성하면 새벽배송과 같은 다양한 케이스도 충분히 처리할 수 있었다.

구체적 KR

1. 출고 작업 간소화
   기존에 여러 개로 나뉘어서 관리되던 출고 작업을 한 군데로 모으는 작업.(출고배치, 출고배치그룹, 오전출고 등등)
   상황에 따른 출고 작업 (특정 상품 제외, 특정 상품만 선택, 제품별 마감시간 적용, 강제 주문 마감시간 설정, 주문 파일만 생성)
2. 출고 작업 속도 10배 개선
   평소 1시간(오전 오후 출고 모두) 정도 소요되던 출고 배송 관련된 배치작업 ⇒ 5분 이내로 개선(10배는 오버인가...)
3. 고객에게 명확한 배송일자 안내
   상세페이지 배송 관련된 안내 및 주문서 페이지 배송 관련 안내, 출고 작업, 마이페이지 모두 배송 관련 통일
4. 출고 예정일과 실제 출고일 간의 간극 파악 및 트레킹
   위에서 통일된 고객에게 안내되는 출고 예정일과 실제 출고일 간의 간극 파악
   매일 마다 슬랙 알림을 추가하여 불편 받는 고객이 없도록 트레킹
5. 출고 예정일이 늦어진 고객에 대한 CX처리 간소화
   출고 예정일이 늦어진 고객에 대한 알림톡 혹은 일괄 문자 전송 기능 추가
   주소지 변경 기능 ⇒ 고객이 직접 할 수 있으면 CX를 훨씬 줄일 수 있을 것 같다.(상품 준비 중 단계)
6. SCM팀에서의 업무 효율성 극대화
   매일 출고될 수량에 대한 파악 admin
   배송이 늦어지는 상품에 대한 핸들링 (특정 제품 제외 후 출고 진행 / 특정 제품만 출고 진행)
   배송 준비 중 ⇒ 배송 보류 일괄 처리 등
   출고 마감 일시에 대한 핸들링
   다양한 출고 케이스 핸들링(수량으로 출고 등)
7. 2주간 사고 0건

하나하나의 objective가 중요했고 꼭 달성해야 하는 목적들이라고 생각했다.

나의 머릿속에 떠나지 않았던 keyword는 
"고객에게 명확하게 출고일에 대해서 안내하고, 그 출고일을 저장해놓고, 그 출고일자에 배치작업이 이루어지면 된다." 였다.

즉 이것을 위해서 

1. 먼저 고객의 주소지에 따라서 명확하게 출고일자가 안내되어야 하며
2. 구매할 당시에 해당 출고일자를 저장해놓고
3. 출고 배치는 오늘 날짜에 돌아야 하는 것들만 뽑아서 돌린다.

이렇게 되면 기존에 전체 상품을 대상으로 돌아가던 출고 배치가 더 이상 그럴 필요 없이 오늘 돌아가기로 한 주문건들만
그대로 돌려버리면 되니 속도도 충분히 개선될 수 있을 것 같았다.

아무튼 새벽배송 때문에 시작하게 되었지만, 다노샵 전반적인 출고 관련된 로직을 다 변경하는 작업을 하게 되었다.

그중에서 제일 중요한 로직은 바로 

1. 고객의 주소지에 따라서 명확하게 출고일자를 안내되어야 한다 였다.

이것은 상품은 배송하는 업체마다, 혹은 상품에서 새벽인지 일반인지 그리고 휴일 정보 혹은 주문제작 상품, 제주 배송 건인지에 따라서 여러 가지 케이스로 나뉠 수 있었다.

새벽배송이 추가되면서 기존 출고 FLOW가 전체적으로 어떻게 변경되는지 확인해야 했고, 정확한 출고일을 계산하기 위해서 정말 중요한 것은 SCM팀과의 정확한 소통이었다. 나 혼자만의 생각으로 "이 날짜에 출고되어야 해"라고 짠 것이 SCM팀에서 보기에는 전혀 다를 수 있었고, SCM팀에서 바라는 니즈를 명확하게 파악하고, 정확한 출고일이 맞는지 뽑아내는 커뮤니케이션이 정말 중요했다. 

그렇기에 새벽배송을 시작하고 제일 먼저 한 것은 SCM팀과의 회의였다.

그게 정말 힘든 일이기도 하였는데, 그래도 2년 동안 다노샵의 전반적인 로직부터 SCM팀과의 협업의 경험들이 그저 시간을 보냈던 것만은 아니었나 보다. 서로 무슨 이야기를 하는지 정확하게 파악할 수 있다는 것부터가 정말 감사했다. 

어떤 것들을 고려해야 하는지, 또 기존에 이미 짜여진 로직들을 어떻게 통합시킬 수 있을지 고민하고, 복잡한 것들을 단순화시키는 과정까지 전체적인 설계를 하는 일은 분명 쉽지 않았지만, 2년 동안 다노샵만을 했었기에 충분히 챌린지 할만했다.

다노샵 현재 모습에서 새벽배송을 추가하는 작업은 정말 그 누구가 와도 나보다 잘할 수는 없다고 자부심을 가졌다.
그리고 그것을 믿고 신뢰해주는 리더와 팀도 있었다.

제품 단위에서 새벽배송이 가능한지 혹은 새벽배송만 가능한지 등을 핸들링하고
각각의 상황에 맞게 출고 형태를 설정할 수 있도록 하였다.

기존에 흩어져 있던 출고 관련된 정보들을 모두 통합하여 새로운 형태의 출고 배치 통합관리를 신설하고, 거기에는 발송업체부터 
출고 형태, 주문 마감시간, 배송 휴일, 배치 가능 요일 등을 설정할 수 있도록 하였다. 

그렇게 상품 단위로 기본 배송, 새벽 배송으로 나누어서 출고 관련된 정보들을 엮어 놓고, 
이것을 바탕으로 정확한 출고 배치 일과 출고 예정일을 뽑는 로직을 구현하였다.
(출고 배치일은 우리가 출고되어야 하는 엑셀 파일을 만들어서 업체에 넘기는 시점이고, 출고 예정일은 해당 업체에서 출고가 되는 시점이다. 
때에 따라서 주문 제작 상품의 경우 다를 수 있다.)

다양한 케이스를 고려해야 했기에 이 로직을 잘 짜는 것이 정말 중요했고, 이 로직을 통해서, 제품 상세부터 장바구니, 주문서, 추후 출고까지 모두 관여하는 메인 로직이었다. 결국 로직이라는 것을 잘 짜기 위해서는 이것을 말로 풀어쓸 수 있어야 한다.

정말 이 로직을 짜기 위해서 화이트보드를 몇 번이나 지우고 새로 그리고 했는지 모르겠다.
분명 '오! 모든 케이스를 다 커버했다' 하고 나왔던 Flow도 갑자기 예외가 나오면서 수정해야 되는 경우가 다반사였다.

메인 로직은 아래와 같다.

1. 체크할 날짜를 넣는다.(오늘부터 시작)

2. 택배사 휴일인지 파악한다. (택배사 휴일은 새벽, 일반, 업체 발송에 따라 다르다.)
=> 휴일인 경우 하루를 추가하여 1번부터 다시 시작한다.

3. 오늘이 배치 가능한 요일인지 파악한다.
=> 배치 가능 요일은 배송 형태 혹은 제주 산간 , 주말 수령 가능 여부에 따라서 달라질 수 있다.
=> 불가할 경우 하루를 추가하여 1번부터 다시 시작

4.  체크하는 날짜가 오늘이면 주문 마감 시간을 확인한다.
=> 주문 마감 시간이 지났으면 하루를 추가하여 1번으로 시작한다. 

5. 배치 날짜와 출고일을 1차 FIX 하고 일반과 주문 제작 상품에 따라서 다르게 핸들링 처리한다.
- 이미 제작이 되어있는 일반 상품의 경우 출고 익일날 휴일인지 확인하고 그렇다면 1번부터 다시 시작
- 주문 제작 상품의 경우 배치 날짜는 FIX하고 출고 예정일을 대상으로 익일날 휴일인지 확인하며 출고예정일을 조정

6. 최종 배치 예정일과 출고 예정일 FIX

정말 간단해 보이는 이 로직을 만들기 위해 다양한 케이스들을 만들어서 테스트하고, 수정하고를 수없이 반복했다. 물론 이 로직도 완벽하지 않을 수 있고, 어떤 케이스가 또 생기느냐에 따라서 수정해야 할 수도 있지만 아무튼 이제는 다노샵의 출고 관련된 안내 및 실제 출고 작업은 모두 이 로직으로 통합되었다.

물론 여기서 끝이 아니었다.
이 로직을 바탕으로 세트 상품들은 어떻게 출고 작업을 진행할지 SCM팀과 논의하여, 하위 구성품들의 출고일을 바탕으로 새롭게 출고일을 계산하는 로직을 추가하고, 특정 케이스(장기간 휴무일이 있거나, 택배사 이슈 등)에 따라서 더 상위에서 핸들링할 수 있는 케이스들을 추가해주었다.

그리고 이 로직을 바탕으로 다노샵의 메인 로직들을 수정하였다. 제품의 상세페이지에서는 고객의 주소지를 모르니깐 일반적인 출고 예정일을 안내하며, 실제 고객이 장바구니에서 주소지를 입력하는 순간부터는 정말 정확한 출고일을 안내하여, 주문이 완료될 때는 그 안내된 출고 관련된 정보를 DB에 저장하였다.(물론 가상 계좌입금에 대해서는 실제 입금되는 시점에 또 핸들링되어야 했다...)

그렇게 되고 나니 정말 좋은 점은, 일단 우리가 오늘 보내야 하는 배치작업 및 출고 작업에 대해서 미리 파악하고, 
핸들링할 수 있는 것이었다. 

결국 생각만 하던 실제 우리 다노에서 얼마나 출고를 잘 관리하고 있는지, 오차 없이 출고되는지 확인할 수 있게 되었고,
이때 따라서 CX처리도 훨씬 정확하게 처리할 수 있게 되었다.

그리고 무엇보다 중요한 출고배치작업!! 
과연 10배 성능 향상은 가능했을까??

평소 한 번 전체 주문건들을 대상으로 돌면 20분 ~ 30분 걸리던 작업은 ...
무려 1분 안에 끝나게 되었다!!!!!!!!!!!!!!!!!!!

기존에 출고 배치 작업에서 체크하던 부분들을 전혀 체크해줄 필요가 없어졌기에 속도가 훨씬 더 향상될 수 있었다.
아무튼 기대한 것 이상이었다.

또한 다양한 케이스에 맞추어서 출고 배치 작업을 핸들링할 수 있도록 하였다.
특정 상품들만 출고를 진행한다던지, 특정 상품을 제외하고 출고를 진행할 수도 있고,
주문 마감 시간을 임의로 설정한다던지, 혹은 특정 수량만큼만 출고를 진행하고 싶다던지
그냥 출고 파일만 뽑아본다던지 등등
SCM팀에서 이야기한 다양한 요구 조건에 따라서 출고 배치를 등록할 수 있도록 하였다.

그렇게 위에서 이야기했던 Objective 중 몇 가지를 달성했을까?

1번 달성!
2번 달성!
3번 달성!
4번 달성!
5번 달성!
6번 달성!
7번은 달성을 위해 출고 작업이 많이 변경되는 만큼 서버 쪽 먼저 라이브 하여, 실제 SCM팀에서 테스트를 진행해주고 계시고 있고
아직 프런트 쪽이 라이브 전이라 더 파악해봐야 하지만, 테스트하면서 이슈들을 미리 잡고 있기에 달성할 수 있다고 믿고 있다...!!

새벽 배송과 관련된 작업이었지만,
목적을 새벽 배송에 두지 않았고, 다노샵 전반적인 출고 관련된 작업을 개선하기 위해 
목적을 잡았던 것은 정말 신의 한 수였다.

생각보다 스쿱도 커지면서 실제 고객 라이브 일정이 조금 밀리긴 했지만 아무튼 온전히 한 달 이상 이 작업만을 생각하면서
몰입할 수 있었던 시기인 거 같다. 

사실 사수분이 퇴사하시고 이런 큰 작업을 혼자서 진행하면서 압박도 많이 받았다. 이제는 정말 내가 실수해도 뒤에서 
봐줄 수 있는 사람이 없었기에 더더욱 실수하지 않도록 신경 써서 개발하여야 하였다.

그리고 막상 라이브하고 나니 허무하기도 했다. 정말 많은 부분 개선하였지만, 
실제로 성능이 개선되었을 것을 느끼는 사람은 매일매일 출고 작업을 진행하는 SCM팀이 전부였고,
내가 이것을 위해서 얼마나 많은 고민을 하고 노력했는지 공감해줄 수 있는 사람이 부재하는 것은 생각보다
크게 다가왔다.(실제로 공감하기 위해서는 비슷한 이해도를 가진 사람이 있어야 하는 것 같다.)

누군가에게 인정이나 칭찬을 바라고 했던 작업은 아니었지만,
사수분이 계셨다면, 분명 내가 했던 작업들에 대해서 진심으로 공감하고, 얼마나 노력을 해주었는지
알아주셨을 텐데... 뭔가 지금 내가 했던 작업을 얼마나 노력했는지 알아줄 수 있는 사람이 없고,
나도 언젠가 다노를 떠나게 되면 이건 그냥 나의 기억 속에서만 존재하겠지라고 생각하니 허무하기도 하였다.

아무튼, 다른 사람들이 몰라 준다고 해도,
내가 알고 있고, 정말 열심히 했다.

이 글은 무언가, 
스스로에게 수고했다고 적어놓는 글이다.

새벽남 이제 bye bye!

PS. 그리고 항상 개발의 마지막은 고객 반응이다...

올 한해 여러가지 프로젝트를 진행했지만,
정말 나의 피, 땀, 눈물이 들어간 프로젝트를 마무리하며
회고글을 적어보고자 한다.

사건의 발단

: 현재 다노에서는 매주 or 2주 단위로 1on1 이라는 것을 진행하고 있다. CTO님 혹은 팀장님과 현재 자신이 겪고 있는
개인적인 이슈 혹은 문제점들을 공유하면서 함께 싱크를 맞추어 나가는 자리이다. 올 6월쯤 1on1을 진행하면서,
현재 다노샵 서버를 하고 있지만 다음에 기회가 되면 프론트엔드 쪽도 한번 해보고 싶다 라는 이야기를 했었고,
CTO님께서는 다음에 다노앱안에 위치하고 있는 매거진이라는 탭을 리뉴얼할 예정이니(언제가 될 진 모르지만)
기회가 되면 다음에 한 번 해보겠냐고 하셨다. 그때 당시에는 아무 생각 없이 "예" 라고 대답을 하였다. 물론 그게 언제가 될 진 모르니깐...
(많은 일들이 이렇게 기억 속으로 묻어져가니 이것도 그렇겠지라고 생각하며..)

사건의 시작

: 9월이 시작되면서 CTO님이 갑자기 주말에 슬랙을 주셨다. 다노 매거진 개편 관련된 디자인이 다 되었는데,
병욱님이 한번 프론트 쪽 개발을 해보겠느냐는 이야기였다. 순간 머리 속이 하애졌다. '갑자기 나에게 왜 이런 이야기를 하실까?' 라는 생각도 잠시 6월의 김병욱이 저질렀던 일이 떠올랐다...아아악... 아무튼 내가 뱉은 말이었고, 먼저 가능할지에 대한 일정을 체크했다.  아무튼 기존에 하던 회사 업무 외에 진행해야 하는 업무였고(외주로 진행), 회사 내 개편 업무다 보니 DUE도 어느정도는 명확하게 걸린 업무였다.

때마침 코로나가 심해져서 주말마다 하던 일도 없어졌고, 하여 이번 기회에 좀 쉬어야지 하던 차였다. 일단 주말 일정은 확보,
그리고 있는 추석 연휴. 한글날 등등 휴일도 넉넉했다. 평일 퇴근 후에 업무를 진행하고 휴일을 모두 넣으면 어떻게든 하면 되지 않을까라고 생각했다. (이 일을 하기 전에 프론트엔드를 해본 것은 html, css, 간단한 javascript로 ajax를 써본 것이 다였다.) 

그렇게 나는 6월의 내가 했던 말에 대한 책임을 지기로 했다. 물론 그 동안 프론트엔드를 공부해야지 생각만 하던 나에게
아주 좋은 자극이 될 수 있을거라고 생각했다. 그렇게 2달 간의 기나긴 프로젝트가 시작되었다.

프로젝트의 시작 (9월 초 ~ 9월 중순)

: 정확히 9월 7일날 백엔드 인턴분이 입사하셔서 매거진의 백엔드 부분을 맡아서 개발해주시기로 하셨고, 나 역시도 9월 7일부로 개발을 시작하게 되었다. React라는 것을 한번도 써본적이 없어서, 먼저 공부부터 해야 하였다.

그렇게 React 기본 강의를 찾아 수강하기 시작했다.
수업은 인프런에서 공짜 수업으로 시작했다. 인프런에서 react를 검색하면 여러 수업들이 나오는데 나는 John Ahn님의 수업을 들었다. (www.inflearn.com/instructors/217966/courses)

다양한 수업들이 많은데, 내가 들은 것은 유튜브 클론 코딩 그리고 해당 수업을 듣기 전에 들으면 좋다고 참고자 올려놓으신 boile-plate? 수업이었다. boile-plate 수업을 모두 듣고 유튜브 클론 코딩을 절반까지 들었다. 그렇게 일주일이 훅 지나갔다. ㅠㅠ 나에게는 시간이 그렇게 많지 았다. 아 일단 이렇게 하는 거구나 느낌을 잡고, 일단 프로젝트 start를 끊었다. (시작이 절반이다...)

사내 프론트 개발자분에게 구조에 대한 피드백을 받은 뒤에, 컴포넌트들을 생성하기 시작했다. 그렇게 9월 중순 나의 첫 제대로 된
프론트엔드 프로젝트가 시작되었다.

지금 다시 생각해봐도.. 정말 답이 없는 시간이었다.


프로젝트의 초기(9월 중순 10월 초)

: 어렵게만 느껴졌단 프로젝트는 생각보다 순탄히 진행되었다. 컴포넌트들을 만들어서 쌓는다는 개념은, 굉장히 참신하면서
그동안 html, css만을 써서 만들던 나에게는 매우 직관적으로 다가왔다. (이래서 사람들이 react, react하는 구나라고 잠깐 생각할 수 있었다.) 그리고 이미 잘 만들어져 있는 라이브러리 들이 많았다. (특히 슬라이더 및 롤링 배너, 스크롤에 따라서 특정 부위를 따라다니게 하는 sticky 기능은 짱이었다.)

그리고 무엇보다 중요한, 업무시간을 확보하였다.
현재 다노에서는 출근 시간을 조정할 수 있어서 2가지 패턴으로 시간을 확보해보았다.
먼저 8시까지 출근해서 9시 30분까지 매거진 업무를 진행하고 9시 30분부터 6시 30분까지는 회사 업무, 그리고 식사 이후에 다시 10시까지 매거진 업무를 진행하는 1가지 형태와 그냥 8시부터 오후 5시까지 회사 업무를 진행하고 쭉 이어서 10시까지 매거진 업무를 진행하는 2가지 형태였다. 

결론적으로는 2번째 형태(일찍 회사 업무를 마무리하고 이후에 매거진 업무를 진행하는 형태)가 더 업무가 잘되어서 2번째 형태로 시간 확보를 하였다.

이건 뭔가 나의 고질적인 문제점이기도 한데, 일단 앞에 목표가 있게 되면 그 이외의 부분들은 크게 신경을 쓰지 않게 되는 것 같다.
그렇게 나에게 이 매거진을 끝낼 때까지 다른 일들은 모두 2순위로 밀어두었다. 

프로젝트의 위기

: 생각보다 초기에 쭉쭉 잘나가던 프로젝트였는데 (나중에 안 사실이지만, 그냥 화면에 보이게 만드는 것보다는 디테일한 부분이 훨씬 시간이 오래 걸리고 어려운 것이었다. 이때까지만 하더라도 화면에 그리면 되겠지라고 생각만 하고 있었다.) 생각지도 못하게, 탈장이라는 병에 걸리게 되었다. 탈장은 말 그대로 장기가 약해진 피부벽을 뚫고 나온 것인데, 수술 이외에는 치료법이 없다고 한다. 

처음에는 그냥 아래배 쪽이 불룩하게 튀어나와서 "뭐지 염증인가" 하고 편하게 생각하고 있었는데, (마침 추석 연휴라서 병원에도 가지 못했다.) 추석 연휴 이후에 병원에 가보니 탈장이라고 하였다. 그 동안 아래배 쪽에 불룩하게 튀어나와 있었던 게 장기였다니!!!! 
진단을 받자마자 급격하게 아파지기 시작하였다.ㅠㅠ(그 동안도 아프긴 하였지만 참을만 하였는데, 진단을 받고나니 갑자기 10배는 더 아파진 느낌이었다.)

그렇게 급하게 수술 날짜를 잡고, 수술을 진행하였다.(아악 안돼 내 휴가.. 흑흑) 생각보다 탈장이라는 병에 걸리는 사람들이 많았고,
그렇게 큰 병도 아니었지만 문제는 일상 생활이 매우 불편해진다는 것이었다. 일단 오랜 시간 앉아 있는게 굉장히 힘들어졌다.
일단 업무외에 시간을 투자해서 해당 프로젝트를 진행해나가야 했기에 나에게 오랜 시간 앉아 있을 수 있는 것은 매우 중요했는데,
그게 어려워지다보니 프로젝트도 시간을 내기 어려웠다.

자연스럽게 컨디션도 급격하게 나빠지기 시작했다. 이미 한 달 정도의 시간을 퇴근 이후의 시간들 그리고 주말, 추석 연휴까지 모두 시간을 쏟고 있어서 정신적으로나 신체적으로나 매우 힘들었지만, 아무튼 내가 하겠다고 하였고 나는 거기에 책임을 지고 싶었다. 

프로젝트의 Detail

:  전체적인 그림을 그리는 것은 한 달정도 안에 마무리를 했던 것 같은데, 생각보다 디테일한 부분에서 신경 쓸 부분이 많다.
그 동안은 서버가 진행되는 동안 Mocking api를 활용하여 대부분 get요청으로만 화면을 뿌려주었다. (post man에서 간단하게 mocking api를 만들 수 있다.) 그러다가 서버가 붙게 되면서 여러 가지 신경써야 할 부분이 많았다. 사전에 맞추었지만 변수명이 틀린 부분들도 있었고, 우리 생각처럼 잘 작동하지 않았다.

그리고 디테일하게 신경쓸 부분이 필요 했던 게 많았는데, 바로 상단 카테고리바와, 검색창이었다.

사실 저렇게 화면에 보이게 하는 것은 어렵지 않았다. 다만 개발 요구사항은 쉽지 않았다.
"일주일 이내의 새로운 글이 있을 때는 빨간 버튼이 보였으면 좋겠어요. 하지만 만약에 고객이 해당 카테고리를 클릭한 적이 있으면 빨간점이 사라져야 해요. 근데 또 만약에 고객이 클릭하고 난 다음에 새로운 글이 또 올라오면 빨간점이 또 보여야 해요"

즉 우리가 생각하던대로 새로운 글(일주일 이내)이 있으면 빨간버튼이 있어야 하고, 그 새로운 글이 우리가 해당 카테고리를 클릭하게 되면 더 이상 새로운 글이 아니다라는 것이다. 너무나도 자연스러운 액션인데, 이걸을 개발하기 위해서는 말로 정리가 되어야하고, 정리가 되어야 코드로 작성할 수 있는데, 쉽지 않았다.

이것을 해결하기 위해서는 해당 사용자가 언제 각 카테고리들을 클릭했는지 저장시켜놔야했다.
일주일 이내의 글이 있을 수 있지만, 그 글이 사용자가 그 카테고리를 클릭했을 당시에 있었던 글인지 아닌지는 또 판단이 필요했다.
이것을 해결하기 위해 서버에서 일주일 이내의 글이 있는지에 대한 정보와, 최신 발행글의 시간을 가지고 왔다.

그리고 프론트에서는 고객이 각 카테고리를 클릭한 정보들을 localstorage에 저장시켜놓고 비교하였다.
기본적으로 일주일 이내의 글이 없다고 하면 아예 빨간 버튼을 보이지 않게 하였고, 만약에 일주일 이내의 글이 있다면,
고객이 해당 카테고리를 마지막에 누른 시간과, 그 카테고리의 최신글의 시간을 비교하였다. 그래서 만약에 해당 카테고리를 누른 시간이 더 늦다면, 해당 고객이 그 카테고리를 눌렀을 당시 이미 그 글은 보였으니 빨간점을 붙이면 안되었고, 그렇지 않다면 빨간점을 붙이게 하여 해결하였다. (항상 서버만 로직을 짜면 된다고 생각했는데... 정말 이번 기회에 많은 반성을 하였다. 프론트엔드도 복잡한 로직이 굉장히 많다.)

그리고 또 하나 카테고리의 요청사항이 있었다.
"각 카테고리를 눌렀을 때 그 카테고리를 보던 위치로 갔으면 해요"
이것도 너무나 당연하게 볼 수 있는데, 이것을 구현하기 위해서는 각 카테고리마다 마지막 보던 위치를 기억하고 있어야 했다.
그래야 그 카테고리를 눌렀을 때 해당 위치로 이동할 수 있었다. 앱에서는 이게 그렇게 어렵지 않게 구현이 가능하다고 하는데, 웹에서는 
각 카테고리를 누를 때 마다 다시 api를 호출하고 랜더링을 다시 해줘야하기 떄문에, 다른 방법이 없었다. (아마 있겠지만 찾아봐도 보이지 않았다.) 그래서 각 카테고리마다 마지막 보던 위치를 저장시켜 놓았다. 그래서 현재 매거진에는 각 카테고리를 누를 때마다 마지막에 보던 위치를 찾아서 이동한다.

그리고 정말 쉽지 않았던 검색창 interaction

처음 검색창을 눌렀을 때, 그리고 입력하기 위에 커서를 위에 눌렀을 때, 최근 검색어 저장, 검색 결과 등 등 다양한 컴포넌터들이 상황에 맞게 랜더링이 되어야 했다.

그리고 또 검색하다가 해당 검색어를 지웠을 때, 등등 우리가 그 동안 자연스럽게 사용하던 부분이 막상 구현을 하려고 하니
그렇게 막막할 수 없었다.

처음 검색창을 눌렀을 때는 인기검색어가 나와야하고, 검색창을 클릭하면 최근 검색어가, 그리고 검색을 하면 해당 검색어가 최근 검색어에 저장되어야 하고, 검색어를 삭제했을 때는 다시 인기검색어로 나오는 형태로 구현이 되어야 했다.

3개의 컴포넌트가 상황에 따라서 나와야 하다보니 복잡한 부분이 많았지만, 적절하게 어떻게 분기를 태워서 해결해냈다.

사실 이 밖에도 신경써서 구현한 부분이 많았지만 그것은 모든 개발자들이 겪는 어려움일거라고 생각한다.
그래도 조금 더 자랑해보자면,

등이 있다. 조금 더 디테일한 부분들은 추후에 하나씩 다뤄보고자 한다.

아 그리고 정말 쉽지 않았던 데이터심는 작업ㅠㅠ
정말 데이터 심는 작업이 너무 쉽지 않았다. 오히려 요건이 까다로울 때는 개발보다 더 어려운 부분도 있었다.

분명 2시간~ 3시간정도면 끝나는다는 CTO님의 말을 철석같이 믿고 있었는데... 주말 온전히 2틀을 사용했는데도,
끝내지 못했다. 예를 들면 이런 요건도 있었다. 
"슬라이딩 배너에 상품들이 여러가지 있는데 각각의 상품들이 50% 이상 1초 이상 보였을 때 이벤트를 보내주세요"
ㅎㅎ 구현을 떠나 말로도 어려운 이벤트 심는 작업이었다. ㅠㅠ (회사내에 이미 구현되어 있던 것들을 많이 이용하였다...ㅎㅎ)

프로젝트의 마무리

: 그래서 이 프로젝트가 과연 끝났을까? 
처음 프로젝트를 시작할 때, 너무나도 막막했던 시간이었다. 그리고 항상 새롭게 오셔서 바로 매거진 서버를 맡게 된 나온님과
이야기 했던 것은 어떻게든 이 비둘기를 날게 하자 였다.

그렇게 2달이 지나 우리 비둘기를 날았다. 그리고 정말 많은 분들의 도움으로 생각보다 멋진 모습으로 날았다.

리뉴얼된 매거진은 여기서 볼 수 있다. (사실 다노앱을 깔면 매거진의 숨겨진 기능들도 사용할 수 있다.)
dano-magazine.dano.me/main

사실 나는 개발만 한 것이고, 이 모든 것들은 정말 많은 분들이 함께 이루어냈다.

새롭게 매거진을 디자인 해주신 디자이너분들과
새롭게 리뉴얼된 매거진에 따라서 다시 컨텐츠를 일일이 만들어주신 컨텐츠 마케터분들,
정말 귀찮은 질문을 계속해서 받아주신 주변의 많은 개발자분들,
데이터를 잘 심고, 트레킹 하기 위해 노력해주신 데이터사이언티스트분들,
앱 안에 들어가는 것이다보니 많은 추가 작업을 해주신 앱 개발자분들,
안정적으로 서비스가 돌아갈 수 있도록 도와주신 인프라 개발자분,
지치지 않고 옆에서 정신 수양을 도와주신 CTO님까지

정말 정말 많은 분들의 도움이 없었다면, 이 모든 것들이 불가능 했으리라 생각한다.
이번 작업을 하면서 내가 개인적으로 가지고 있던, 다른 분야에 대한 진입장벽도 깨진 것 같다.

개발자는 프로젝트를 하면서 성장한다는 말이 있다.
나도 이번 기회를 통해서 한 단계 더 성장했기를 기대해본다.