다사다난 해 - 2023년 회고

무엇부터 써내려가야 할지 모르겠다.

“쓰다 보면 완성되겠지. 2023년 처음으로 기억을 되돌려서 시작할까? 어디서부터 시작할까..”

# 서비스 종료

작년에 B2B 위주의 회사에서 데카킬이라는 서비스를 기획하였다. 트위치 플랫폼에서 제 3자가 실시간으로 퀴즈를 내고 문제를 맞히면 포인트를 받고, 그 포인트를 통해서 상품을 살 수 있는 그러한 플랫폼이었다.

 

데카킬을 만드는 중간에  팀에 합류되었다. 데카킬 팀에는 10년 차 이상의 수준급 디자이너, PM이 있었지만 나는 프론트엔드로서 React도 제대로 모르고 JS도 잘 몰랐기 때문에 신입이 만든 Vue.js를 이해하지도 못하였다.

 

나는 문제를 출제하는 페이지를 React로 만들었고 신입은 트위치 서드파티 플랫폼을 Vue.js로 만들었다.

와이리 통일성이 없너!

 

프로덕트 출시를 하자마자, 프로덕트는 오류 투성이었고 나는 그걸 해결할 수 있는 능력이 없었다. 해당 프로젝트는 종료됐고, 거금을 부어서 인플루언서를 통해 유저들은 많이 모으는데 성공했다. 하지만, 시대는 빠르게 변했고 투자사는 BM이 없어서 투자를 해줄 수 없다고 했다. 회사는 런웨이를 지속하기 어렵다는 판단하에 대규모 권고사직이 시작되었다.

사..살..살려주시라요..!

 

나는 권고사직 대상자는 아니었지만, 만약 권고사직을 당하면 어떻게 될까 생각했다. 이 회사 외에 나는 매력이 있을까?

# 정통 스포츠 데이터 분석 및 웹사이트 도난

데카킬의 종류 후, 회사에서는 e스포츠 외에 정통 스포츠 데이터 분석을 해보자고 하였다. 나는 회사가 돈을 버는 길이면 괜찮다고 생각했지만 회사의 정체성을 잃어가고 있다고 생각하였다.

 

문제가 발생했다. 이미 같은 이름으로 된 프로덕트들이 너무 많이 있었다. 회사에서는 SEO를 어디서 들었는지 몰라도 상단에 노출을 요구했다.

그 내가 한다고 할 수 있는게 아니라요!

 

나는 마케터와 함께 구글 검색 위에서 어떻게 가장 최상단으로 끌어올릴 수 있을까? 가장 큰 고민을 하였던 시기이다.

 

일단 프로젝트는 Next.js를 처음 도입하기로 했다. B2C 서비스 이기 때문에 SEO(Search Engine Optimization)를 최대로 끌어올리기로 하였고, 최대한 만들 수 있는 페이지를 CSR이 아닌 SSG 또는 ISR로 만들어서 SEO 최적화된 페이지를 다짐하였다.

ISR은 만능이 아니었다.

나는 ISR이 빌드 기준으로 5분(캐시 타임)마다 새롭게 페이지를 만들어서 캐시를 쥐고 있는 줄 알았는데, 캐시 타임이 끝나고 난 이후의 처음 들어온 사람 기준으로 캐시 타임동안 캐시를 잡는다. 그러다보니 같은 API를 써도 캐시된 페이지마다 데이터가 불일치하는 문제가 발생하였다.

이..이게 무슨 일이고..?!

• Main page는 20xx.12.18 15:00:31 ~ 20xx.12.18 15:05:31 까지 reload 하지 않음.
• Detail page는 20xx.12.18 15:03:31 ~ 20xx.12.18 15:08:31 까지 reload 하지 않음.

같은 /api/info 를 사용하지만 시간에 따라 0분과 3분의 데이터가 다를 수 있고, 그 이후에 생성되는 페이지라고 해도 일치할 가능성이 낮았다.

불일치 문제로 스트레스 받을거라면 SSR로 페이지를 로드할 때마다 하는게 낫겠다고 생각이 들어서 ISR에서 SSR로 모두 변경하였다.

웹사이트 도난 당했습니다.

어느날 갑자기 페이지에 방문자가 기하급수적으로 늘어났다.

가..갑자기.. 무..무엇이라요..?!

그런데 알고보니 누가 회사 프로덕트를 iframe으로 도난해버렸다. iframe 위에 악의적으로 사용될 수 있는 링크가 덮어져 있었다.

허허허허허허허허…

 

이건 아니다 싶어서 운영중인 모든 도메인들을 모아서 해당 도메인이 아닌 경우 올바른 페이지로 올 수 있도록 만들었다.

export const SITE_URL = [
  process.env.NEXT_PUBLIC_SITE_URL,
  process.env.NEXT_PUBLIC_SITE_URL2,
  process.env.NEXT_PUBLIC_TEST_SITE_URL,
  process.env.NEXT_PUBLIC_PREVIEW_SITE_URL,
];

export const checkMySite = () => {
  if (typeof window !== undefined) {
    try {
      const parentHref = window.parent.location.href;
      return !!SITE_URL.find((url) => parentHref.includes(url));
    } finally {
        return false
    }
  }
};

 

위 코드는 나의 웹페이지를 체크하는 함수이다.

 

iframe의 경우 html 태그 위에 감싸고 있는 형태이기 때문에 window.parent를 통해 접근이 가능하단 것을 깨달았다.

여기서 재밌었던 것은 window.parent.location.href하였는데 도난 했던 사이트에서 해당 href에 접근하면 에러를 일으켰다. 그래서 에러가 나면 우리 사이트가 아닌 것으로 하여 처리를 하였다.

# React UI 에서 CSS 프레임워크로.

(번역) 우리가 CSS-in-JS와 헤어지는 이유

(번역) 우리가 CSS-in-JS와 헤어지는 이유

팔랑귀일 순 있지만… 해당 글을 읽고 MUI랑 좀 멀어져야겠다고 생각했다. Next.js를 쓰면서 MUI에 회의적이기도 했고, _document.tsx에 코드를 추가하는 것과 emotion에 의존하는 것을 보고 너무 무겁게 쓰고 있는게 아닐까 생각하게 되었다.

그러다가 Next.js 컨퍼런스에서 tailwindcss 를 사용하는 것을 알게 되었다.

Next.js Conf Keynote: Introducing Next.js 13 and Turbopack

 

새 프로젝트에서는 디자인 시스템 처음부터 다시 구축하기 시작했다. 이걸 언제 다 만드나 했지만, 부사수 분께서 디자이너 출신이라 그런지 손이 나보다 빨라서 매우 빠르게 구축할 수 있었다.

 

구축이 끝난 후, 단순하게 작성할 수 있는 코드에 매우 만족했다. 그러나, 처음 적용했을 때, MUI에 비해서 UI가 투박하게 동작해서 운영진 측에서 무슨 말이라도 할 줄 알았는데, 아무도 크게 신경 쓰지 않아서 tailwindcss로 잘 정착할 수 있었다.

관심이 없는걸지도..?

# Riot Korea와 함께 일하다.

회사에 오면 Riot이랑 일할 수 있을까 했는데, 드디어 그런 날이 왔다.

라이엇 게임즈 슬랙에도 들어가보고 이게 왠 일이니 헤헤헤헤헤헿

 

어느날 라이엇에서 신규 프로덕트가 날라왔다. 방송에서 사용할 신규 웹 프로덕트였다. 기존에는 Excel을 통하여서 각 선수마다의 정보를 작가와 알바분들이 직접 찾아가면서 방송에서 사용할 데이터를 정리하고 있었다. 그러니 웹에서 바로바로 쓸 수 있도록 간편화 시켜달라는 내용이었다.

 

부사수와 함께 각 페이지마다 작업을 나누고 프로덕트를 만들었다. 이 때 처음으로 GraphQL을 적용하였다. 생각해보니 새롭게 라이브러리를 도입할 때, 다른 회사의 개발자 분들이 우려의 목소리를 냈었다. 그렇지만 우리 회사 백엔드 분께서 책임지고 만들어서 문제가 없었다. 주변에 인사이트도 좋지만, 일단 만들어 보는게 더 도움이 되는 것 같다.

 

그 당시 제품의 필터 구조에서 <리그 Select />와 <게임 Select />가 있었다. 리그(예시: 2023 LCK Summer)를 선택하면 해당 리그의 모든 경기를 <게임 Select /> 의 <게임 Select-Item />으로 보여주는 방식이었다. 한 리그를 onClick하면 <게임 Select />에서 약 90개 정도의 <게임 Select-Item />을 보여주었다. 그때까진 웹에서 크게 부담이 없었고, 무사히 넘어갈 수 있다고 생각했다.

 

프로덕트를 다 만들었다고 생각했을 때, 일어난 일이었다.

 

“<리그 Select />에 [전체]라는 list item을 추가하고 <게임 Select />에는 지금까지 있었던 모든 게임을 보여주세요.”

이..이..!!! 무슨..?!!

 

관련한 내용은 Virtualize List with react-window 에서 다루고 있으니 참고 바란다. (좀 봐달라카랑끼야요)

# 부사수 생김

회사의 권고사직 시즌이 지난 뒤, 나는 모든 프로덕트를 관리하게 되었다. B2B, B2C 프로덕트까지 다 인수인계를 받아버렸기 때문에 아주 힘들 예정이었다.

사..살..살려주시라요..

 

그래서 프론트엔드 채용 공고를 올리게 되었으나 거의 대부분의 사람을 떨어뜨렸다. 스타트업이라서 그런지 진심으로 지원했다는 느낌을 못 주는 지원자들도 많았다. 실력이 있다는 느낌도 못 받았다. 신입들의 포폴은 클론 코딩 느낌이 많이 나서 기술 면접 당시에 전개 연산자를 썼길래 전개 연산자를 왜 썼냐고 물어봤다. 면접자분이 전개 연산자 무엇이냐고 물어서 스프레드 연산자라고 말하니 무엇인지 모르셨다.

모를 수 있어.. 괜찮아.. 그럴 수 있어..

 

면접의 마지막 때, 이미 직감하고 있을 것 같아서 만약 다음 회사 면접에 간다면 어떤 것을 준비하면 좋을지 가르쳐주고 돌려보냈다.

 

나는 휴가를 길게 쓰고 본가인 부산에 있었다. 할 것도 딱히 없어서 인스타그램에 부산에 온 거 자랑할 겸 사진을 찍고 올리려고 인스타그램을 켰는데, 메시지에 [요청]이라는 글자가 활성화 되어 있었다. 눌러보니 두 사람에게 연락이 왔는데… 장문의 DM이 하나 있었다.

살면서 그렇게 긴 장문의 DM은 처음이에요 ㅇㅅㅇ;

 

부사수의 이력서와 포트폴리오를 보고 “이 사람이다!” 생각했다. 회사와 같은 도메인으로 프로젝트를 만들고 운영까지 하고 있었기 때문에 완벽하다고 생각했다. 이 사람은 뽑아야겠다고 강하게 생각이 들었다.

 

자세한 내용은 부사수분의 회고에 기록되어 있다.

2023 회고

2023 회고

역시 나보다 글을 잘 쓰는 것 같다! ㅇㅅㅇ

 

부사수 분이 온 뒤로 프론트엔드 문화를 갖추기 위해서 노력하였고, 나의 물경력을 해소하기 위해서 끊임없이 노력했다. 그 때 든 생각은 "회사에서 프론트엔드 시니어를 구할 순 없으니 내가 직접 돈주고 배우자!"는 생각이 들어 F-lab을 시작하게 되었다.

 

매번 생각하지만, 나는 변덕적이다. 어떤 기술을 사용할지, 어떤 것이 정답인지 배운 적이 없어서 인터넷에서 좋다고 한 것들을 회사에서 날 것으로 다 시도해보았다. 그렇게 몸소 체험하는데 부사수님이 함께 해주어서 다양한 시도들을 할 수 있었다. 항상 감사하게 생각하고 있다. 내가 성장할 수 있었던 것도 F-lab도 있었겠지만 좋은 부사수를 만나서 다양한 시도를 할 수 있었고 나아가 함께 성장을 도모할 수 있는 문화에 동행해주어서 가능했던 일이라고 생각한다.

 

---

 

11월에 살면서 최초로 사는 것의 의미를 잃고 꿈도 열정도 난도질 당했다. 전세 사기를 당한 뒤부터 가만히 누워있질 못했다.

 

한 동안 부정적인 우물에 빠져 살고 있었다. 상황이 안좋아져서 하고 있는 멘토링을 잠시 중단하였다. 어떤 것이든 집중을 못하고 무기력한데 생산적이고 싶어하는 내 모습을 발견하게 되었다. 그러나 책상에 앉아서 아무것도 하지 못했다. 

생각보다 심각한 것 같아서 정신과를 가볼까 생각했지만, 문득 내가 편안했던 것들이 무엇이 있는지 기억을 더듬기 시작했다. 더듬어가면서 편안해지는 나를 발견했다. 그러면서 점점 ‘나’ 다워지기 시작했다.

 

나를 다시 찾아가면서 불안함은 줄어들고 나를 마주할 수 있었다. 이런 시기에 감정에 휩쓸리지 않고 나를 지킬 수 있음에 감사했고, 앞으로도 나를 무너뜨릴 일들에 두려워하지 않고 마주하기로 했고 지금은 많이 건강해졌다.

 

내가 정신이 없는 사이에 부사수 분께서는 내가 힘들까봐 회사일을 거의 다 맡아서 해주고 계셨다. 회사에서도 모든 일을 부사수분께 주고 있었다. 그래서 부사수분께 참으로 감사함을 느낀다.  

 

작년에 진짜 별에 별일이 다 있었지만, 회고가 너무 길어도 재미가 없을 것 같으니 여기서 마무리하는게 좋을 것 같다. 연말 회고를 쓰는 것은 처음이다. 앞으로는 좀 체계적인 회고를 써야겠다. 연습을 통해서 개선을 좀 해봐야겠다. 

정리도 안된 글을 봐주신 분들 너무너무 감사하고 새해에는 행복한 한해 되세요~~

 

---

 

최근에 프론트엔드가 프로젝트 할 때 백엔드 배워서 CRUD만 하는 것보다 프론트엔드적으로 깊게 파고 공유할 수 있는 자리를 만들고 싶어서 FE 드릴링이라는 슬랙 채널을 만들었습니다! 

 

위 글은 추상적이라 좀 더 직접적으로 설명하자면 좋은 블로그를 쓰거나 궁금한 점들을 서로 공유하여 댓글이나 답글을 통해 생각을 나누고 하길 바라는 마음에 만들었습니다! 

 

혹시 저와 함께 하고 싶으신 분들은 댓글 또는 kthrkdals@kakao.com 으로 메일 부탁드려요!