Blue Garage에서의 6개월을 돌아보며 (작성중)
Blue Garage에서 Frontend Engineer로 일한 지 6개월이 지났습니다. 이번 글에서는 6개월 동안 해온 일들, 느낀 점, 배운 점 그리고 앞으로 남은 6개월 동안 어떻게 할 것인지에 대해 적어보려고 합니다.
어드민 개발과의 첫 만남
예상치 못한 시작
처음 회사에 입사해서 맡게 된 부분은 어드민 개발이었습니다. 당시 이커머스 런칭을 위해 서버와 애플리케이션 개발이 한창이었고, 어드민 개발을 할 리소스가 부족해서 제게 맡겨졌습니다. CTO님께서는 "어드민이 추상화가 굉장히 잘 되어있으니 많은 것들을 배울 수 있을 것"이라고 하셨습니다. 실제로 어드민의 추상화 계층은 매우 잘 정돈되어 있었고, 많은 기능을 빠르게 만들어낼 수 있도록 설계되어 있었습니다.
혼자서 코드 탐험하기
하지만 처음에는 프로젝트 구조를 이해하는 데 큰 어려움을 겪었습니다. 온보딩 문서가 없어서 스스로 코드를 읽어보며 이해해야 했기 때문입니다. 특히 자바스크립트로 작성된 코드베이스에서 각 컴포넌트가 어떤 프로퍼티를 가지고 있는지, 어떤 메서드를 가지고 있는지 파악하는 데 시간이 많이 걸렸습니다. 매일 코드를 따라가며 "이 컴포넌트가 왜 이렇게 동작하지?"라는 의문을 품고 살았던 것 같습니다. 첫 3개월은 거의 프로젝트의 구조와 컨벤션을 이해하는 데 할애했습니다.
첫 PR과 큰 실수
작은 변경이 큰 파장을 일으키다
첫 PR을 올리고 병합되기까지 1주일 정도 걸렸는데, Picker 컴포넌트들을 자바스크립트에서 타입스크립트로 변경하고 기존 컴포넌트들을 개선하는 작업이었습니다. 문제는 해당 컴포넌트가 병합되면서 많은 컴포넌트들이 영향을 받게 되었고, 핵심 기능 중 하나가 오작동하는 문제가 발생했습니다. ISOString으로 변환하는 과정에서 모든 컴포넌트들이 동일한 입력 포맷을 주지 않고 있었던 것이 원인이었습니다. 이 문제 때문에 대부분의 추가/수정 폼에서 오류가 발생했고, 정말 걱정이 많았던 한 주를 보내기도 했습니다. 이 경험을 통해 기존 코드베이스에서 변경을 할 때는 더욱 신중해야 한다는 교훈을 얻었습니다.
본격적인 상품/재고 관리 개발
사용자 경험 개선에 집중
이후에는 상품/재고 관리 페이지를 집중적으로 작업했습니다. 상품 진열, 추가, 수정 및 벌크 작업 등을 주로 맡았고, 재고를 쉽게 관리할 수 있도록 하며 서버와 통신하는 로직도 작성했습니다. 특히 사용자 경험을 개선하기 위해 서버 검증 로직 전에 어드민에서 검증 로직을 우선적으로 동작하게 하는 작업도 진행했습니다. 이를 통해 사용자가 잘못된 데이터를 입력했을 때 서버까지 가지 않고도 즉시 피드백을 받을 수 있게 되었습니다.
CSV 다운로드 기능의 도전
CSV 다운로드 기능을 제공하는 작업도 진행했습니다. 어드민 사용자들은 대부분 데이터를 가지고 업무를 해야 하는 사람들이기 때문에, 데이터를 다운받아 업무를 진행할 수 있도록 하는 것이 중요했습니다. 처음에는 쉽게 구현할 수 있을 것이라 생각했지만, 실제로는 많은 고민이 필요했습니다.
- 데이터 형식을 어떻게 정의할지
- 어떻게 데이터를 가공할지
- 하나의 도메인뿐만 아니라 여러 도메인에서 공통으로 사용할 수 있는 기능을 어떻게 만들지
이러한 기능을 만들기 위해서는 어드민의 추상화 계층을 깊이 이해해야 했습니다. 데이터를 사용자에게 보여주는 형식과 단계, 그리고 렌더링 과정을 모두 파악해야 했기 때문입니다. 결국 3주 정도의 시간이 걸렸지만, 이후에는 여러 도메인에서 일관된 방식으로 데이터를 다운받을 수 있게 되었습니다.
현재 진행 중인 작업들
타입스크립트 마이그레이션과 DSL 개발
현재는 어드민의 핵심 기능을 개발하거나 개선하는 작업을 주로 맡고 있습니다. 특히 자바스크립트로 작성된 컴포넌트들을 타입스크립트로 개선하여 코드의 안정성을 높이고, 타입 추론을 통해 개발 효율을 높이는 작업을 진행하고 있습니다. 또한 어드민의 추상화 계층을 더 적극적으로 활용하기 위해 어드민만의 DSL(Domain Specific Language)을 정의하고 재사용성을 높이는 방안을 고민하고 있습니다.
백엔드 개발자를 위한 도구 만들기
어드민은 프론트엔드 개발자보다 백엔드 개발자가 쉽고 빠르게 기능을 만들어낼 수 있도록 하는 것이 중요합니다. 그래서 직접 컴포넌트를 작성하기보다는 메타 정보만으로도 화면과 컴포넌트를 만들어낼 수 있도록 하는 방향으로 개발하고 있습니다. 향후에는 Server Driven UI를 통해 더욱 빠르게 화면을 만들어낼 수 있는 방향도 고민하고 있습니다.
IDE 변경: 생산성을 위한 도전
VSCode에서 Vim으로의 전환
처음에는 VSCode만을 사용하고 있었습니다. 회사에 입사하고 2개월 정도 지나 개발 팀장님과의 1:1 미팅을 진행했는데, 개발 생산성을 높일 수 있는 방법들을 고민하게 되었습니다. 팀장님께서는 "생각하는 속도와 코드가 만들어지는 속도가 같아야 한다"고 하시며, 그러기 위해서는 IDE에 대한 깊은 이해가 필요하다고 말씀하셨습니다. 실제로 VSCode의 여러 단축키들을 사용하면서 속도를 개선한 적이 있었고, 이보다 더 빠르게 코드를 작성할 수 있는 방법이 있을지 고민하게 되었습니다. 팀장님께서 추천해주신 Vim을 사용해보기로 했습니다. 처음에는 단축키를 외우는 것이 걱정이었지만, 실제로 사용해보니 생각보다 쉽게 적응할 수 있었습니다. 특히 마우스를 사용하지 않고도 대부분의 작업을 진행할 수 있어서 속도가 훨씬 빨라졌습니다.
Cursor + Neovim의 조합
다만 순수한 Vim이나 Neovim보다는 Cursor에 Neovim extension을 설치하여 사용하고 있습니다. Cursor의 코드 추천 기능과 코드 수정 기능이 뛰어나서 이 기능들을 놓치고 싶지 않았습니다. 또한 프론트엔드 개발자 대부분이 VSCode나 Cursor를 사용하고 있어서 커뮤니티 측면에서도 좋은 환경이라고 생각했습니다.
불편함을 개선하려는 자세
이런 변경들을 통해 단순히 IDE 이해도가 높아진 것만이 아니라, 가장 큰 변화는 불편함을 감수하는 정도였습니다. 불편한 요소들을 "어쩔 수 없다"는 핑계로 넘어가는 것이 아니라, 불편함을 개선하기 위해 노력하고 개선하는 것이 중요하다고 생각하게 되었습니다. Neovim을 사용하면서 불편한 점들을 하나씩 커스터마이징하면서 생산성을 높이는 방향으로 개발하고 있습니다. 이런 생각은 프로젝트를 진행하면서도 계속 발전하고 있으며, 불편한 점이나 개선되어야 하는 점들이 발견되면 빠르게 해결점을 찾고 개선하는 방향으로 개발하고 있습니다.
오픈소스 컨트리뷰션 아카데미 도전
새로운 학습 기회 발견
6월 즈음 SNS를 보다가 오픈소스 컨트리뷰션 아카데미(OSSCA)에 대해 알게 되었습니다. 평소에도 오픈소스 컨트리뷰션에 관심이 많았고, 오픈소스를 통해 많은 것들을 배웠기 때문에 참여하고 싶다는 생각이 들었습니다.
GlueSQL을 선택한 이유
신청한 주제는 GlueSQL이었습니다. Rust 기반의 SQL 엔진인데, 최근에 SQL을 비롯해 데이터 관점에서 바라보는 시각이 필요하다고 느꼈고 이를 배울 수 있을 것이라 생각했습니다. 또한 Rust라는 언어가 많은 인기를 얻고 있어서 공부할 계기가 있으면 좋겠다고 생각했었는데, 좋은 기회라고 생각했습니다.
현업과의 연결점
현업에서 자바스크립트를 타입스크립트로 마이그레이션하면서 ts-morph 기반의 codemod를 만들고 있는데, 이 과정에서 AST Builder에 대해 관심을 갖게 되었습니다. 이런 학습 방향이 현재 만들고 있는 어드민 DSL에도 도움이 될 것이라고 느껴 GlueSQL을 선택했습니다. 7월 12일이 첫 발대식인데, 새로운 사람들을 만나서 함께 학습하고 기여할 수 있게 되어 기대하고 있습니다.
6개월을 돌아보며
이 6개월 동안 정말 많은 것들을 배웠습니다. 어드민 개발을 통해 복잡한 시스템의 추상화를 이해하게 되었고, 도구 개선을 통해 생산성을 높이는 방법을 배웠습니다. 특히 "불편함을 개선하려는 자세"가 개발뿐만 아니라 일하는 방식 전반에 긍정적인 영향을 주고 있습니다. 작은 불편함도 그냥 넘어가지 않고 개선할 방법을 찾는 습관이 생겼습니다. 앞으로 남은 6개월 동안은 어드민 DSL 개발을 통해 더욱 생산적인 개발 환경을 만들고, OSSCA를 통해 오픈소스 생태계에 기여하며 새로운 기술을 학습하는 것이 목표입니다.