Story | February 3, 2025
2024년 회고
2024년에 있었던 일들
보통 개인 회고 같은 사소한 주제로는 글을 잘 쓰지 않지만, 이듬해의 제가 봐줬으면 좋겠다는 생각이 들어 한번 글을 써 봅니다.
제게 2024년은 살아생전 가장 바쁜 한 해였습니다. 그도 그럴 게 이 글을 쓰는 시점의 저는 몇 년 살지도 않았거든요.
프론트엔드 엔지니어로 근무하며 가장 많은 경험과 챌린지를 겪었고, 많은 성장을 이룰 수 있었던 한 해이기도 합니다. 제가 했던 경험들 중 인상 깊은 부분 몇 가지를 간략하게, 일상적인 내용들도 좀 작성해 봤습니다.
Framer
제가 근무하고 있는 29CM 는 Framer 라는 low-code 웹 빌더를 도입하여, 상품과 브랜드를 소개하는 콘텐츠 페이지를 디자이너가 직접 구현하고 발행까지 가능한 환경을 마련했습니다.
웬만한 정적인 웹 페이지를 구현하는 과정은 딸깍으로 가능하며 화려한 인터렉션도 쉽게 넣을 수 있고, 좀 더 복잡한 기능들은 코드로 구현하되, 사용하는 건 개발을 모르는 사람도 가능하죠.
하여, 디자이너가 Framer 로 구현하는데에 어려움이 있는 컴포넌트들을 주로 구현해 드리고 있습니다. 데이터가 연동되어야 하거나, 동적으로 렌더되어야 하는 컴포넌트 등을 말이죠.
하지만, 기술적 측면에서 Framer 를 다루는 건 꽤나 어려운 일이였습니다. 개발자가 구현하는 Framer 컴포넌트들은 사내 제품이자 고객 제품이 되기 때문에, 디자이너의 편의성과 고객의 사용자 경험. 두 가지 방면에서 고민해야 했거든요.
또한, 시간에 쫒겨 임시방편이나 단편적인 용도로 구현하며 생기는 기술부채는 디자이너에게도 고스란히 전해지기에, 컴포넌트를 설계할 때 향후 방향성까지 고려하여 범용적이면서도 단순한 사용성을 가지도록 설계해야 했습니다.
간단한 상품 목록 컴포넌트 하나를 완성도 있게 구현하는 데에도 나흘 정도의 시간이 소요되는데, 당시에 기술의 맛을 제대로 봐버린 회사가 더 공격적으로 대형 기획전들을 추가하면서 일정이 빠듯해져 이것저것 고려할 여유가 없었습니다.
제가 시도하고 있는 방법은 디자이너가 사용할 인터페이스는 바뀌지 않게, 내부 구현은 최대한 빠르게 하되, 명확히 기록해 둔 후 개선하는 것입니다.
우리가 어떤 모듈을 만들 때에도 먼저 바뀌지 않을 인터페이스를 완성한 후에 내부를 구현 하듯, 외부에 주는 영향을 덜 수 있는 방법이라, 대입해 봤을 때 꽤나 효과적이라 느꼈습니다.
크롬 확장 프로그램 제작
Framer 로 제작된 콘텐츠를 29CM 서비스 내 지면에 노출시키려면 메타데이터가 필요 했는데, 관련된 관리 기능을 제공하고 있진 않았고 직접 구현해야 했습니다.
Framer 에서 메타데이터 관리까지 한 큐에 수행할 수 있는 방법을 고민하다, 사내에서 사용할 크롬 확장 프로그램을 만들게 됩니다.
메타데이터는 Framer 컴포넌트에 입력 시키고, 발행 버튼 딸깍 한번에 메타데이터를 색인해서 사내 DB 에 적재 시키도록 하기 위해, Framer 내부 API 까지 뒤져서 몰래 사용하는 등 Framer 측에서 알면 뒷목 잡고 자빠질 만한 해키한 접근도 해봤습니다.
필요한 데이터가 없을 때엔 제공하는 API 혹시 없는지 같이 좀 먹고 살자고 파파고를 돌려가며 Framer 측에 뻔뻔하게 문의를 했다가 여러 번 빠꾸를 먹기도 했습니다.
최근에는 Plugin 기능이 출시 돼서 확장 프로그램을 만들 필요는 없지만, 그 당시의 좀 더 자세한 내용이 궁금하다면 제가 작성한 글을 한번 읽어 보셔도 좋을 것 같습니다.
그 밖에 CSS import 가 불가한 Framer 환경에서 TailwindCSS 적용하기, 자체 DDoS 방지 기능 우회하기, 삽질하며 찾은 내부 API 들과 꼼수들 등등 Framer 관련 재밌는 주제들이 있는데, 시간이 되면 글로 좀 남겨 보려 합니다 ㅋㅋ.
Framer x 29CM Meetup
조직이 Framer 를 적극적으로 활용하고 있는 것을 Framer 측에서도 알게 되었는지, 영광스럽게도 Meetup 행사 개최 제안이 왔고 암스테르담에서 서울의 무신사 본사까지 찾아와 주셔서 Framer 와 관련된 다양한 발표와 이야기도 나누고 네트워킹도 해 볼 수 있었습니다.
다양한 기업들, 개발자뿐만 아니라 디자이너부터 기획자까지 다양한 직군의 사람들이 참여해 많은 이야기를 들어볼 수 있어 좋은 경험이 되었습니다. “와 Framer 로 저런 것까지 할 수 있다고?” 라는 생각을 정말 많이 했어요.
동료들과 Framer 도입 과정 관련 주제로 발표를 계획했지만, 도입 과정에는 참여하지 않기도 했고, 기술 중심의 자리가 아니었기에 제가 언급할 내용은 특별히 없는 것 같아 저는 청중으로만 즐겼습니다.
전사 기획전 대응
콘텐츠를 다루는 조직에 있다 보니, Framer 에서 사용할 전사 기획전에 필요한 제품들을 구현할 일이 많았습니다.
대부분 기획전 준비 기간이 한두 달 안팎이지만 요구사항은 이리저리 추가/변경/제거되기도 하기에, 발등에 불이 떨어진 채로 작업을 합니다.
블랙프라이데이 즈음에 오픈하는 29CM 의 ‘이굿위크’ 기획전은 가장 규모가 큰 기획전인 만큼, 높은 사용자 경험을 위해 이미지 최적화, 불필요한 리렌더링 방지, 리소스 지연 로드 등등 기본적인 최적화는 물론, 오픈 직후 100만명이 넘는 트래픽이 몰리기 때문에 서버가 죽었을 때를 대비해 네트워크 응답을 브라우저에 캐시하거나 큰 모듈 단위로 fallback 처리를 하거나, Framer 페이지 자체를 캐시하는 등 온갖 최적화란 최적화로 풀무장을 해야 했습니다.
빠듯한 일정에 다양한 기획전 제작에 참여해 본 제가 얻은 노하우는, 복수의 제품을 만들 때 디자이너와 쇼부를 쳐서 유사한 UI 를 최대한 통일시켜 공통 컴포넌트로 만들어 두고, 개발자가 가져다 쓰도록 하는 것이였습니다.
제품 개발 시간을 단축시켜 최적화에 투자할 시간을 확보할 수 있었죠.
동료들과 전쟁터 같은 환경에서 뼈 빠지게 굴러보다 보니, 최적화 방법이나 구현 속도를 높이는 방법, 더 나아가 일을 효율적으로 하는 방법에 대해 많이 배울 수 있었습니다.
이렇듯 개발자부터 디자이너까지 동료가 일을 더 쉽게 잘 할 수 있도록 하기 위한 작업과 고민을 여러차례 해 보면서, 객관적으로 생각하는 능력도 한층 성장하게 됐고, 동료로부터 긍정적 피드백을 들으며 동기부여를 받아, 제가 남 돕는 일에 적성이 맞다는 걸 느끼는 계기가 되었습니다.
새 블로그 만들기
회사 업무 뿐만 아니라 사이드 프로젝트도 병행했고 약 한 달 반 정도 끝에 완성할 수 있었습니다. 바로 이 글이 제공되고 있는 블로그 서비스입니다.
원래는 ReactJS 만을 사용해 마크다운 파일 기반의 블로그를 제작해 사용 중이였는데, CSR 의 한계점인 낮은 SEO 퀄리티와 런타임 파싱으로 인한 느린 로딩 성능이 아쉬워, 극한의 성능을 가지면서 금전적 비용 없는 블로그로 탈바꿈 시키고자 NextJS 의 Server Components 를 활용해 Static Rendering 이 적용된 블로그를 제작해 보았습니다.
Lighthouse 로 간단하게 측정해 보아도 확연한 차이가 보입니다. Static Rendering 덕분에 페이지를 미리 완성해 둘 수 있어 피드에서 아티클을 클릭하는 즉시 navigate 되는 점이 굉장히 인상적입니다.
또, 글 작성 경험을 높이기 위해 Notion 과 연동하였는데, 요청 횟수 제한 및 이미지 유효 기간 등의 제약사항에 부딪혔고 우회하기 위한 다양한 방법을 시도해 볼 수 있었습니다. 이 내용은 “Notion 을 CMS 로 활용하기” 라는 제목의 글로 정리 중에 있답니다.
아직 다듬어야 하는 코드도 좀 있고, On-Demand Revalidation 같은 부가적인 기능도 구현해야 해서 차차 개선해 나갈 예정입니다.
코드는 GitHub 링크에서 살펴 보실 수 있습니다.
사소한 변화들
이제 TMI 들 얘기할 거라 관심 없으시면 그만 봐주셔도 괜찮습니다. 여러분의 시간은 소중하니까요.
데스크 셋업
가장 먼저, 큰 마음 먹고 꽤나 준수한 사양의 데스크탑과 모니터, 마우스, 커스텀 키보드, 패드 등 게이밍 장비들을 구매해 데스크를 셋업 했습니다. 그간 컴퓨터 게임을 하려면 항상 피시방에 가서 손때낀 키보드 마우스를 썼어야 했는데, 드디어 집에서 게임을 할 수 있게 되었습니다.
발로란트, 리썰 컴퍼니, 팰월드, 헬 다이버즈2 등등 하고 싶었던 인기/신작 게임들을 마음껏 할 수 있어 기부니가 좋았습니다.
듀얼 모니터는 개발할 때도 참 편했습니다. 한쪽엔 코드, 다른 한쪽엔 결과물을 띄워두면 마치 개쩌는 슈퍼 프로페셔널한 개발자가 된 듯한 기분이 듭니다. 근데 이 글을 쓰는 지금은 모니터 하나가 고장 나서 반쪽짜리 개발자가 됐습니다.
키보드가 진짜 간지폭풍. 배열, 키캡, 타건음/감, 스위치/스테빌 윤활 모두 갓벽합니다.
양식 요리
저는 양식 요리를 좋아하고 그 중에서 파스타를 가장 좋아합니다. 알리오올리오, 카쵸에페페, 까르보나라(정통) 등등 근본 있는 파스타를 주로 만들어 먹는 편입니다. 절대 초딩 입맛이 아닙니다.
그러던 어느 날, 파스타를 만드는 방식에 좀 더 색다른 변화를 주고 싶다는 생각이 듭니다.
보통 고가의 양식 레스토랑에서는 일반적인 건면이 아닌 생면으로 만든 파스타를 제공하곤 하는데, 영앤푸어인 저는 사 먹어 본 적이 없기에 한번 직접 만들어 보기로 합니다.
그렇습니다. 제면기 사서 직접 만들었습니다. 감사하게도 사내에 생일 복지가 있어 29CM 에서 거의 공짜로 구매한 마카토 제면기입니다.
세몰라 밀가루와 계란 노른자가 만난 황금 빛깔의 파스타 반죽을 예쁘게 빚고 있노라면 순수했던 어린 시절로 돌아가 친구들과 정겹게 찰흙놀이를 하는 것 같기는 개뿔 팔 박살나는 줄 알았습니다.
겨울 날씨임에도 불구하고 이마와 등에는 땀이 삐질삐질 맺힐 정도이니 그날 운동은 할당량 다 채운 듯 싶습니다.
반죽은 힘들지만 면 뽑는 건 되게 재밌습니다. 틀에 따라 면 모양도 기호에 맞게 선택할 수 있는데, 넓적한 링귀니가 식감도 좋고 포만감도 좋았습니다.
면까지 직접 뽑아 요리하면 이건 정말로 내가 만든 파스타라 할 수 있다는 점이 정말 뿌듯했습니다.
한번 해 보고는 어깨뽕이 제대로 올랐는지 직장 동료분들을 집에 초대해 생 파스타 클래스를 열었습니다.
반죽으로 웰컴 노동 한번 시켜드리고, 면 펴고 뽑기 시범 한번 보여드린 뒤 실습도 다 같이 해 봤습니다. 시범 보여드릴 때 사진을 엄청 찍으셔서 많이 부끄러웠지만 리액션이 혜자스러워서 나이키 미소가 절로 나왔습니다.
저도 한번 밖에 안 해봤지만, 제가 제일 잘 만들었던 것 같습니다. 죄송합니다. 흑백요리사2 참가해야 할 것 같습니다. 히든범부 출동.
그렇게 이 날 파스타만 세 종류를 만들어 대접해 드리고는 기절했다고 합니다.
여행
저와 함께 사경을 넘나들어 전우애를 다진 동료분께서는 여행을 정말 좋아하시는 듯 했습니다.
굉장히 엄청난 추진력과 영업 스킬에 저는 한낮 예스맨으로 전락하고 말았고, 다른 동료분들을 포함해 여러차례 여행을 다녀 오게 되었습니다.
일본에서 근무하신 경험이 있으신 분이다 보니, 일본어를 네이티브급으로 잘 하셔서 일본 위주로 여행을 다니며 든든한 가이드 역할을 해주셨고, 저는 그냥 손에 돈만 꼬깃꼬깃 쥐고 쫄쫄 따라 다니기만 했습니다.
데려다 주시는 모든 음식점은 먹어 본 적도 없는 미슐랭 양뺨을 후려쳤으며, 길거리를 걸어다니기만 해도 재밌었습니다.
길게 쓰니까 너무 힘듭니다. 사진으로 대체하겠습니다.
2박 3일 도쿄 여행
4박 5일 부산 여행
6박 7일 오키나와 여행
