지난주 개모임을 째고… 여러 친구들과의 약속을 가장한 핑계로 1월 연휴부터 꽤 많은 휴식을 가졌다. 물론 회사에서는 쉴 새 없이 바쁘게 일했지만, 퇴근 후에는 추가적인 일이나 코딩은 현저하게 줄어들었고… 어쩌다보니 Work–life balance를 지키버렸다.
그와 동시에 최근에는 살도 꽤 많이 쪘다는 걸 깨닫고 다시 헬스장 가는 횟수를 늘려가고 있다. 같이 운동 가는 친구가 개인 일정으로 공석이라는 핑계로 확실히 한동안 몸을 방치했던 만큼 살이 찌긴 했다.
그나마 다행인 건 오히려 쉬다가 해서 그런지 운동이 잘 먹는 느낌은 든다. 여하튼 점점 아저씨화가 되어감을 느끼는데, 이참에 몸이라도 두껍게 좀 만들어봐야겠다.
그리고 지난주에는 20살 때 7명의 친구들과 함께 갔던 일본 이후, 5년만에 해외여행을 다녀왔다. 이제는 군 전역했으니 여권도 10년으로 재발급했다.
공무원 시험에 합격 후 늦게 군입대를 해서 이번달에 전역하는 친구와 부사관으로 의무인 4년 반을 벌써 다 채워가는 친구, 학점이 바닥이었지만 현재는 2곳에서 조교를 하며 나름 엘리트 코스로 살고 있는 친구 이렇게 각자의 자리에서 치열하게 살고 있는 3명의 친구들과 함께 대만을 다녀왔다.
오랜만에 한국을 떠나니, 다양한 자연경관과 문화들이 휴식과 여행의 효과를 극대화해줬다. 정규직 전환을 한다면 진짜 해외여행 한번 다녀오고 싶었는데, 혹여나 해서 인턴 때부터 아껴둔 연차가 나름 도움이 많이 되었다.
개인적으로는 이번 여행과 휴식을 통해 올해를 열심히 살아갈 원동력이 또 많이 생긴 것 같다. 사실 연휴다 뭐다 올해 들어서는 육체적으로 많이 쉬었다고 생각했는데 심적으로는 나도 모르게 많이 지쳐 있었던 것 같다.
바쁘게 달려오면서 걱정이 꽤 많았던 것은 아닐까 싶기도 하고, 단편적으로 친구들을 만나서 놀아도 뭔가 채워지지 않는 공허함이 느껴지기도 했다. 하지만 이번 여행만큼은 너무 소중한 시간이었고, 덕분에 다시 한번 리프레시 할 수 있었다.
회사에도 큰 변화들이 찾아오고 있다.
기존 멤버들이 이직 및 퇴직을 하면서 많은 변화가 있었고, 신규 입사자들도 늘어나고 있다. 얼마나 많아졌으면 원년 멤버들끼리 따로 레거시 단톡방까지 만들어서 떠난 이들과도 계속 소통 중이다.
그리고 지난(벌써 한달 전) 개모임 발표 때 열심히 개발했던 단발성 이벤트 몇개는 결국 팝업스토어 형태로 진행하게 되어, 조금은 아쉬운 마음이 남았다. 그래도 일한 게 완전히 무용지물이 된 것은 아니니까… 😅
하지만 그래도 요즘 개발을 하면서 회사 지표에 조금씩 성과가 보이기 시작한 느낌이 든다.
새로운 프리랜서 마케팅 크루분이 메타 광고를 꽤 효율적으로 운영하시면서, 개발팀이 쌓아온 작은 노력들이 빛을 보기 시작한 건지, 예전에 비하면 비교도 안 될 정도로 Active User와 매출이 증가했다.
그러나 그와 동시에 해커인지, 악성 유저인지, SEO Bot인지… .env 파일을 찾으려는 API 요청이 수천 회 발생해서 새벽에 서버가 잠깐 다운되기도 했다. 다행히 Call 로그를 보면 .env 자체는 털지 못한 것으로 확인되었지만, 이제는 프론트 서버에서도 로깅할 수 있는 보안 기술들을 적극 도입해야 할 때가 아닌가 싶다.
물론 아직 갈 길은 멀지만, 그래도 점진적인 성장과 변화를 체감할 수 있다는 점이 꽤나 즐겁다.
그리고 최근 들어 대표님이 내가 만든 백오피스 사이트를 꽤 마음에 들어 하시는 것 같다.
기존 픽 커머스(선매입 무료 배송 상품 판매) 비중을 줄이고, 배송 상품 판매를 확대하는 방향으로 전략을 수정하려는 것 같다.
이에 따라 MD를 더 늘릴 예정인데, 이 과정에서 내가 만든 처음에는 간단하게 시작한 백오피스 툴이 꽤 중요한 역할을 하게 될 듯하다.
덕분에 기존에 상상했던 백오피스 기능들이 하나둘씩 강화되고 있으며, 대표님도 이를 적극적으로 나름 지지? 지원? 집착? 해주시고 있다.
처음에 "개발자가 왜 이렇게 운영 어드민(관리 시스템)에 집착하지?" 싶었던 반응도, 이제서야 좀 동안 내가 입이 닮도록 이야기했던 "우리 회사에는 이게 필요했구나"의 반응으로 바뀌고 있다.
처음 회사에 왔었던 6개월 전(마침 글쓰는 기준 딱 180일)부터 상상하고 있던 효율적인 관리 시스템 구축의 희망이 이제는 본격적으로 하나씩이라도 실현되고 있다는 점이 꽤나 흥미롭다.
백오피스 프론트는 아직까지 전적으로 내 담당(내가 말도 없이 답답해서 시작했으니 내 담당이 맞긴하다.)이라 100% 디자인 없이, 그냥 상상으로 cursor랑 UI를 디자인하면서 만드는 중이다.
물론 백엔드부터 만들고 시작해야 해서 시간이 늘 부족하긴 하지만, 나름 재미있다.
위에는 아직까지는 조촐한 백오피스 초기 화면 나중에 애자일에서 스크럼 쓰는 프로세스를 초기화면에 넣고 퇴근할때 자동적으로 SMTP로 대표님 메일로 쏴주게 만들까 생각중이다.
아래 이미지는 슬랙에서 매일 로깅되는 웹훅 데이터를 → 백오피스용 NestJS 서버를 통해 자동으로 MongoDB에 저장 → React의 chart.js를 활용해 대시보드를 만들었고, 매출 그래프의 저점을 0이 아닌 최저 데이터 기준으로 설정해 크루들이 볼 때 매출 상승 하락을 좀 디버깅할 수 있게 효과가 좀 더 극적으로 보이게(?) 만들었다.
파트너사 관리는 민감한 부분이 많아서 스킵… 상품 등록은 Strapi Call로 들어가는 것이 아니라 기존에 마이그레이션 중인 NestJS 2.0 api Call로 흘러들어간다.
아래 이미지는 위 이미지에서 상품 등록 눌렀을 때 상세 내용 에디터 및 썸네일 설정 → 기존의 NestJS 서버로 만들어 놨던 Call 이용해서 Strapi와 같이 쓰는 S3 ↔ Cloudfront 공간에 이미지 업로드된다.
아래 이미지는 실제 서비스 Pick화면에서 매거진 진열관리이다. 누구든지 직관적으로 쓸 수 있도록 드래그앤 드랍(DND)으로 만들었다.
위의 설정에 따라서 오른쪽 이미지처럼 정렬 순서가 바뀐다.
왼쪽 이미지 백오피스 폰 사이즈 반응형은 그냥 틀만 잡아놨고 내용의 반응형 스타일링은 하나도 안된다.
월간 발견 관리는 무산되어서 스킵…앱 푸시는 백오피스 어드민에서 보낼 수는 있지만 api 콜이 아직 깔끔하게 개발하지 않아서 아직 사용 중이지는 않다.
올해 8월쯤인가? FCM 종료도 있기도 하고…. 이것도 방안을 찾기 해야한다…
드디어 대망의 Pick 회차 관리 단순화, 상품을 사면 스팟에 배송해 주는 픽커머스를 운영하면서 우리는 회차 즉 매 주마다 영업시간이랑 어떤 상품을 Pick 상품으로 파는지에 대해서 영업시간과 상품 연관관계를 Strapi에서는 굉장히 비효율적이게 MD, 운영 크루분들이 이용했다.
애초에 전에 백엔드 개발자 분들이 왜 이렇게 연관관계를 설정하게 만들었는지는 모르지만 원래 프로세스는 아래와 같았다.
따지고 보면 위 과정만 사람이 작업을 하는데 휴먼에러가 엄청 일어나서 1 ~ 2시간이 걸린다.
또한 백엔드 연관관계도 너무 많아 개발 기간이 너무 길었고 실수할 확률이 높았다.
그러나 우리의 백엔드 크루 changsboi 님이 이 Call들을 내 요구사항에 따라 2번 3번씩 묶어주셨다.
따라서 위의 사진과 같이 UI에서 딸깍과 일괄 적용으로 스팟의 픽업 시간들을 한 번에 설정할 수 있게 만들었고, Pick 회차 설정의 경우도 아래 이미지와 같이 크루들 연차 신청만 들 때 개발한 캘린더 컴포넌트를 재차 활용해서 주문기간 픽업 기간을 보여주고 스팟과 상품도 일괄 적용할 수 있게 만들었다.
이렇게 개발해서 이번주 회차 세팅을하니 기존 MD분이 신세계라며 너무 좋아하셔서 다행이였다 .물론 곧 가신다 ㅎㅎ... 이제는 그래도 세팅에 5분도 안걸린다.
그리고 현재 제 api Call들 너무 여러 개의 서버와 DB(백오피스 NestJS, NestJS / PostgresSQL, SpreedSheet, MogonDB)에서 발생하면서, API 호출 구조가 점점 복잡해지고 있었다. 이제 API 호출을 통합적으로 관리하기 위해 프론트에서 인터셉터를 활용한 공통 처리 및 API 타입별로 그나마, 구분하여 유지 보수를 용이하게 개선해 보고 있다.
TypeScriptimport axios, { AxiosRequestConfig } from 'axios'; type ApiType = 'admin' | 'nest'; const adminApi = axios.create({ baseURL: process.env.REACT_APP_ADMIN_API_URL, headers: { 'Content-Type': 'application/json', }, }); const nestApi = axios.create({ baseURL: process.env.REACT_APP_SERVER_NESTJS_API_URL, headers: { 'Content-Type': 'application/json', }, }); // 인터셉터 선언 (예제) adminApi.interceptors.request.use( (config) => { console.log(`[Admin API 요청]: ${config.url}`); return config; }, (error) => Promise.reject(error) ); adminApi.interceptors.response.use( (response: any) => response, async (error: any) => { console.error(`[Admin API 응답 에러]:`, error); return Promise.reject(error); } ); nestApi.interceptors.request.use( (config) => { console.log(`[NestJS API 요청]: ${config.url}`); return config; }, (error) => Promise.reject(error) ); const api = { get: async (type: ApiType, url: string, params?: Record<string, any>) => { ... }, post: async ( type: ApiType, url: string, data?: any, config?: AxiosRequestConfig ) => { ... }, put: async (type: ApiType, url: string, data?: any) => { ... }, patch: async ( type: ApiType, url: string, data?: any, config?: AxiosRequestConfig ) => { ... } delete: async (type: ApiType, url: string, data?: any) => { ... }, }; export default api;
이번 Pick 상품 회차 세팅을 하면서 백오피스 자동화의 중요성을 다시 한 번 절감했다.
이전에는 수작업으로 1~2시간씩 걸리던 작업이 이제는 5분도 안 걸리게 된 것만으로도 MD분들의 업무 효율성이 극대화되었고, 운영 측면에서도 휴먼 에러를 대폭 줄일 수 있었다.
이제는 단순한 기능 추가가 아니라, 비즈니스 로직과 운영 효율을 동시에 고려하면서 개발해야 할 시기인 것 같다.
앞으로 백오피스를 더 고도화하고, 운영 크루분들의 피드백을 적극 반영하여 진짜 일하는 데 도움이 되는 도구로 만들어야겠다고 더 생각했다.
그리고 마침 또 프론트엔드 인턴분도 곧 들어오시니 코드 퀄리티가 좀 더 단단해지고 또 서로 많이 배울 수 있는 시기 않을까라는 기대가 든다.
