정신없는 주니어 개발자의 우당탕탕 인프콘 2023 후기

처음 작성해보는 후기글이라 서론이 조금 길지만, 일기처럼 써보았습니다 🙂

내가 인프콘 2023에 가게된 계기

인프콘 2023 이 열린다는 이야기를 접해들은 짧막한 썰을 풀어보자면, 사실 구름톤 이후 제주도에서 여행중에 주변 분들께 건네 들었다. 참가분들과 가까워져 같이 제주도 리프레시 여행을 다니게 되었는데, 나는 열심히 운전중 이었다. 정말이지 소식을 전해들은 과정이 돌이켜보면 얼마만의 확률로 알게 되었을까 놀랍다. 되거나 말거나 라는 생각으로 지원한 구름톤에 참가하게되고 거기서 알게 된 분들과 제주도 여행을 다녔는데 그 와중에 인프콘 2023이 열린다는 소식을 접하게 되었으니 말이다 😅

2022년도 에는 회사일과 병행하는 사이드 프로젝트에 치여 세상에서 무슨일이 벌어지는지도 모른채 지나갔고, 강의 들으러 들어간 인프런에서 인프콘 이라는것을 진행한다는 문구를 본적이 있다. 그때는 한참 개발을 시작한지 얼마 안될때고, 주변에 IT 업계 지인들도 거의 없어 아주 의기소침한 때였다. 그땐 그냥 이런것도 있구나~~ 하는정도로 넘어갔던것 같다. 마치 다른세상의 일처럼.

아무튼 퇴사이후 넓은세상(?)을 알아보고 싶었던 나는 소식을 듣자마자 인프콘 2023 을 신청 했다 !

인프콘_2023_참가신청_멸망

물론 가고싶다고 갈수있는것은 아니었다,,,,,,

같이 참가 신청을했던 분들 중에는 딱 한분이 당첨이 되어서, 아무래도 구름톤 참가 당첨 당시에 운은 전부 소진했나보다 하고, 나중에 올라올 영상을 챙겨보기로 마음 먹었었다.

하지만 너무나도 감사하게도, 당첨된분이 저에게 양도를 해주시겠다고 하셔서 이번 인프콘 2023 에 참여할수가 있었다 !! ( 정말 고마워 🙏🏻😃 )

 

아침부터 정신없던 하루

최근 이것저것 활동도 많이하고 작업도 많은터라 어느새 밤낮이 많이 바뀌어 당일에도 거의 못자고 8시반 쯤 버스를 타러 나왔다. 네트워킹 세션도 있던데,, 이 상태로 어쩌지 하며 집을 나섰다,,,,,

안녕하세요? 근데 왜 벌써 보이시죠?

이 버스가 여기서 보이면 안되는데,,,? 건너편에서 횡단보도 신호를 기다리던중 버스가 떠나버렸다,,,,,,,,,,,,,

급하게 작전을 바꿔, 역 까지 자차로 이동후 지하철을 타고 코엑스로 이동하는 루트를 선택했다. 내가 현재 지내고있는 안산은 코엑스까지 무슨짓을해도 1시간반은 족히 걸린다. 이렇게 된이상 오프닝과 첫번째 세션은 포기한다! 라는 마인드로 느긋하게 출발했다,,, ㅎㅎ 이 글 제목이 '정신없는 주니어 개발자의 우당탕탕' 이라는 수식어가 붙은 이유이다.

 

인프콘 현장의 분위기

그렇게 어찌저찌 코엑스에 도착해서, 코엑스몰 스타벅스에 들러 아아 수혈과 함께 11시 반쯤 입장했다. 참가 등록 부스에서 QR 코드를 건네며 입장권 양도 받았음을 조심스레 말씀 드렸다. 다행히 입장하는 데에는 문제없이 잘 들어왔는데 따로 뭔가 신청을 해야했는지 명찰은 따로 이름을 변경 하지는 못하고 입장을 하게되었다. 

세상에는 이렇게나 IT인이 많았군요

들어와서야 인프콘이라는 행사가 얼마나 큰 행사였는지 실감이 났다. 정말 많은 분들과 다양한 기업 부스, 인프콘 행사 부스에 많은 분들이 붐볐다. 오면서 전날부터 쌓인 피곤도 싹 사라진 기분이었다. 아직 분위기 파악이 덜된 터라 먼저 들으려고 했던 세션인 김현준 님, 김아인 님의 [출시 3일만에 앱스토어 2위를 달성한 사이드 프로젝트] 세션을 들으러 입장했다.

 

출시 3일만에 앱스토어 2위를 달성한 사이드 프로젝트 - Skrr 김현준 님, 김아인 님

나도 사이드 프로젝트 팀을 이끌어 프로젝트를 진행중 이기 때문에, 이번에 사이드 프로젝트 관련 발표세션이 가장 먼저 눈에 띄였다. 팀장이기 때문일까, 이미 출시하고 성공했다고 이야기 할수 있는 사이드 프로젝트는 어떻게 만들어 졌고, 얻어갈수 있는 인사이트가 무엇일까 기대되었다.

김현준 님, 김아인 님의 [ 출시 3일만에 앱스토어 2위를 달성한 사이드 프로젝트] 발표 세션

먼저 이 프로젝트를 하신 분들이 상당히 어린 나이임에도 불구하고 이런 결과물을 만들어 냈다는것이 정말 놀라웠다. 우리 팀은 사람도 12명이고 한분을 제외하고 모두 현직자 분들인데, 1년 3개월째 아직도 개발중인것이 속으로 살짝 부끄러웠다.

이 skrr 이란 앱을 만든팀을 한마디로 표현해보자면, '미친 실행력' 인것 같다. '충분한 뒷받침이 되는 근거를 조사하고, 그것을 바탕으로 목표가 정해지면 실행한다' 를 정말 잘 실천한것 같다. 발표 내용만 들어봐도 다른 생각없이 가설 수립 -> 목표 산정 -> 행동 -> 회고 라는 원칙으로 움직였다는 것이 많이 느껴졌다. 아직 우리팀을 이끌고 있는 내가 많이 부족하게 느껴졌다.

가장 멋졌던 점은, 서비스 출시와 운영에 도달하여 이러한 경험을 직접 겪어가며 하고 있다는 점이었다. 내가 우리팀을 만들때에 하고싶었던 경험을 이분들이 하고 계신다. 다양한 시도와 문제점, 그리고 도전. 이 팀은 지금도 현재 진행형 이다.

겪었던 크리티컬한 이슈와 문제점 해결 과정도 너무 좋았다. API 속도 문제가 심각 했던점에 대해 원인 분석과 해결과정이 하나의 스타트업을 보는 기분이었다. 개발자는 문제를 해결하는 사람이고, 문제를 겪으면서 성장하는것임을 이 발표 세션을 통해 느낄수 있었다.

 

인프콘 2023 리미디트 에디션 굿즈를 싹쓸이 해보자 - 기업부스 스탬프투어

사실상 인프콘의 메인 디쉬 이지 않을까? 라는 생각이 들었던 기업부스 투어였다. 발표 세션은 추후에 인프런을 통해 영상으로 올라 오겠지 싶어, 현장에서 진행하는 '스탬프 투어'를 하기로 마음먹었다. 부스를 돌아다니며 스탬프를 얻어오면, 인프콘 한정 굿즈를 뽑기를 통해 추첨하는 이벤트였다. 내가 유독 이런 굿즈를 좋아하는것도 한몫 하지만, 또 이런 행사가 아니면 얻기 힘든 물품이기에 더욱 메인 이벤트 라고 느끼는것이 아닐까.

점심시간에 멀리서 찍은 오른쪽 기업부스

점심시간에 사람들이 없는 틈을 타 부스를 순식간에 돌았다. 덕분에 3시가 되기 전에 모든 스탬프를 다모았다. 콘텐츠 존에서 진행했던 주사위 굴리기도 참여하고, 이벤트 존에서 SNS 공유 이벤트도 참여했다. 

다 돌았긴 돌았지만 아쉬웠던게, 무신사와 29CM 에서 준비한 굿즈가 오전에 순식간에 조기 마감 되어 버렸다. 유난히 사람이 붐비던 부스가 몇 눈에 띄었었는데, 그 중 하나가 무신사와 29CM 였나보다. 나도 무신사랑 29CM 좋아하는데,, 너무 아쉬웠다 🥲

입구에서 장바구니같은 가방을 주던 이유가 있었다.

처음 입장할때 받았던 커다란 가방의 정체를 알게되었다. 이 가방은 굿즈를 담기위한 가방이었던 것이다. 합리적으로 메인 디쉬임을 생각했던 부분이다. 😅 거의 모든 부스를 돌아서 굿즈를 한가득 모았다.

받은 굿즈들 자랑

 

SSR 의 기쁨과 슬픔 - 당근마켓 김태희 님

사실 이 인프콘을 오기 얼마전, 당근마켓 프론트엔드 개발자 채용에 지원을 했었고, 화상면접을 진행했었다. 항상 그렇듯 내가 준비한 내용은 면접때 이야기 하지 못했고, 생각보다 기초적인 부분이나 중요한 부분들을 놓치고 있음을 실감했다. 그래도 여타 당근마켓 면접 후기처럼 너무나도 좋은 면접 경험이었다. 결과는 좋지 않았지만, 정말 오랜만에 면접을 보았는데 많이 떨지 않고 발전한 내 모습을 볼수 있어 좋았다. 다음에 다시 도전해보고 싶다.

발표 세션 제목부터 정말 한편의 강의같은 발표겠다 싶어 네트워킹 세션을 포기하고 달려갔다. 거의 1년간 Next.js 개발에 매달려 있는 나에게 꼭 필요한 세션이라고 생각했고, 정말 좋은 내용이었다고 생각한다.

SSR 의 기쁨과 슬픔 - 당근마켓 김태희 님

Rendering 의 변천사

가장먼저 Rendering 의 변천사에 관한 내용을 들려주셨다. Static Page - CGI - Server Side Template - CSR - SSR 순서로 이어지는 변천사와 각 렌더링 방식의 특징에 대해 들을수 있었다. 각 방식이 어떻게 동작하는지에 대해서는 어렴풋이 알고 있었지만, 이렇게 연대기 처럼 듣는 이야기는 처음 이었던것 같다. 명확한 렌더링 방식의 이름을 알수 있던것도 좋았다.

Static Page 는 Github Pages 로 배포했던 지킬 테마 블로그 (루비) 개발당시 경험해보았었고, CGI 는 전 직장에서 PHP 가 레거시 웹 사이트 언어 였기 때문에 Fastcgi 를 사용하여 php 페이지를 렌더링하는 것을 경험 해보았다. Server Side Template 은 국비지원 수업을 들을 당시 Spring 과 함께 JSP 페이지를 개발해본 적이 있었다. CSR 이나 SSR 은 현재 진행형이다.

흥미로웠던 점은, 발표 세션에서 이야기 해주시는 내용들이 내가 전직장에서 개발할때 느꼇던 점이나 생각과 거의 비슷해서 많은 공감이 갔던 점이다. CSR 의 특징으로 개념적으로는 Static Page 와 거의 비슷하고, 동작 방식에 대한 문제 때문에 404 발생시 index.html 로 이동이 되어 버리는 것이나, 페이지 소스 보기를 통해 html 을 확인하는 과정도 회사에서 개발당시 동일하게 확인하였던 것이다. 내가 그동안 개발을 헛되이 하지는 않았구나 싶었다.

CSR 의 문제점 또한 큰 공감이 갔다. 어느 페이지로 (어떠한 URL 접속경로로) 접속하더라도 항상 반환되는 index.html 이 항상 같아서, meta tag 가 매번 동일 하다는 문제점이 있다. 이는 크롤러 입장에서 사이트를 이해하기 어렵게 만든다. 구글 크롤러는 이런 SPA 페이지를 이해할수 있다는 내용들이 찾아보면 많이 있으나, 현실은 생각보다 검색 엔진 인덱싱에 매우매우 취약하다. 그래서 이해하기 어렵게 만든다고 표현하는것이다. 검색엔진 플랫폼이나 그 크롤러가 JS 를 실행할수 없는 시스템이라면, 메인 페이지 ( index.html ) 를 제외한 모든 다른 페이지들은 검색엔진에 인덱싱 되지 않을것이다.

초기에 실행 하는 JS 양이 많아지는 문제도 존재하는데, 특히 이 문제는 모바일 웹뷰에서 많이 경험할수 있다. 실제로 나도 모바일 환경에서 에 무한 스크롤이 주된 페이지를 개발한 적이 있었는데 상당히 성능 이슈를 많이 겪었었다. 광고가 제대로 나오지 않거나 오작동 하는 스크립트에 대해서도 언급하셨는데, 실제로 가장 힘들었던 이슈이다. 광고가 간헐적으로 안나오거나, 잘 나오던것이 안나오는등 알수없는 동작을 할때가 많았다.

그외에 사전 지식내용은 SSR 이 SST 에 비해 좋은점은, client / server 가 Rendering 을 같은 언어로 개발 할수 있다는 점이다. 뷰 로직의 공유가 이루어 진다는 점에서 차이점이 있다. CSR 에 비해 단점은 server 관리의 책임이 생기고, 트래픽이 몰릴경우 그에대한 대응이 필요하고, CSR 에 비해 배포시간이 길어질수 있고, CSR 에 비해 세팅이 복잡한점 이다.

 

당근 마켓에서의 렌더링 전략

먼저 당근 마켓의 프론트엔드 개발 상황에 대해 알수 있었다. React 를 이용한 CSR 이 대부분이고, 배포는 Vercel 과 같은 PAAS 플랫폼으로 이루어져있었던 상태 였다고 한다. 웹뷰 초기로딩이 느린 문제가 대두되어 성능 문제가 있는 부분을 네이티브 앱 개발을 통해 개발 하다가, 다시 웹뷰를 통해 개발 하는 전략으로 바뀌어 SSR을 통한 웹뷰 개발을 시도하게 되었다고 한다.

Next.js 를 사용하여 React-Query 로 데이터 처리를 하고, Suspense 를 사용하여 개발하였다가 SSR 이 정상적으로 되지 않는 이슈가 있어 걷어낸후 Server Side Prefetch 까지 성공적으로 개발을 했었다고 한다. 여기까지가 기쁨편.

슬픔 편은 기존 프로젝트 Vercel 배포 대비, 인프라 관리나 서버운영 업무가 증가하고 Server 모니터링 및 로그 확인도 해야하며 docker 배포가 React 로만 이루어진 프로젝트 에 비해 5~10배 정도 느려진 문제가 있었다고 한다. 특히 당근마켓은 트래픽이 많아 순간적으로 몰려서 API Call 이 오래걸리는 경우가 발생할수 있는데, 이때 SSR 은 API 응답이 올때까지 페이지가 응답되지 않는다. 이런 사용자 경험을 개선하기 위해 Streaming SSR 을 도입 하게 되었다고 한다.

Streaming SSR 은 SSR 의 단점을 보완하여 HTML Streaming 기술을 통해 페이지를 렌더링 하는 것이다. Suspense 로 감싸진 내부 컴포넌트들의 바깥을 Shell 이라고 표현하는데, 이 부분들을 Streaming 을 통해 응답 하는 것이다. ( 이 부분은 잘못되었을수 있습니다. ) 

구성 자체는 Next.js 가 아닌 fastify 를 사용하여 renderToPipeableStream메서드를 통해 HTML Streaming 을 구현했는데, 자세한 내용은 Streaming SSR 에 대해 좀더 알아보는 시간이 필요할것 같다.

아무튼 성공적으로 배포까지 마쳤으나, 여기에도 슬픔편이 존재한다. 배포 관련 에러가 있었는데, 배포를 진행하는 동안 404 에러가 발생하는 문제와 도커 상에서 빌드가 두번되는 문제가 있었다고 한다. 이러한 문제들은 추후 해결이 되었지만 Streaming SSR 역시 정답이라고 하기는 어렵고 가장 좋은 방식에 대한 싸움은 현재 진행형 이다.

 

회고

사실 '주니어 프론트엔드 엔지니어의 성과 및 역량 향상을 위한 실전 가이드' 발표 세션과 NRISE CTO 님 과의 캐주얼 미팅도 있었지만, 사진을 못찍어서 내용을 다 담지는 못했다. NRISE CTO 님 과의 미팅도 정말 즐거운 시간이었다. 이런 대규모 행사에 참여한것은 이번이 처음이었는데, 신선하고 좋은 임팩트이자 경험이 되었던것 같다. 특히 굿즈에 관심많은 나에게는 더 즐거운 시간이었던것 같고, 성장을 위해 달리는 분들이 이렇게나 많다는 것을 느낄수 있었다. 벌써부터 내년 인프콘이 기다려진다.