프로젝트

프론트엔드 엔지니어링 역할로 시작했지만 훨씬 더 많은 것을 요구하는 방향으로 빠르게 진화했습니다. 두 달 후 테크 리드가 프로젝트를 떠났고 — 심각한 기술 부채를 가진 두 개의 SPA를 남겼습니다: 컴포넌트에 직접 포함된 로직, 관심사 분리 없음, 명확한 아키텍처 없음. 독립적으로 시작한 새 SPA에 이전 프로젝트의 모든 것을 적용했습니다: 헥사고날 아키텍처, DDD, 클린 코드, Doc as Code. ~20명의 엔지니어로 구성된 전체 비즈니스 유닛에서 재사용할 수 있는 스캐폴딩을 구축하고, 두 명의 주니어 개발자를 새 아키텍처에 온보딩하고, 완전한 문서를 작성하고, 프론트엔드 기술 방향을 이끌었습니다. 아키텍처 외에도 테크 리드의 모든 책임을 맡았습니다: Scrum 세리머니 주도, 작업 정제 및 추정, UX/UI 정렬, 클라이언트와 직접 커뮤니케이션, 파이프라인 문제 및 테스트 케이스 검토에서 QA팀 지원, 배포 관리, 백엔드 및 클라이언트 회의에서 프론트엔드 관점 대표.

• 테크 리드의 갑작스러운 이탈 후 상당한 기술 부채를 가진 두 개의 SPA를 물려받음
• 새 SPA에 헥사고날 아키텍처와 DDD 적용 — 뱅킹 규모에서 처음
• ~20인 비즈니스 유닛에서 여러 제품에 걸쳐 채택된 재사용 가능한 스캐폴딩 구축

• React
• TypeScript
• Hexagonal Architecture
• DDD
• TanStack Query
• Scrum

이 프로젝트는 제 커리어에서 중요한 변곡점이었습니다. 유명 디스펜서 브랜드의 운영자를 위해 구축된 이 플랫폼은 인시던트 보고, 내부 지원 채팅, 실시간 추적 및 물류 조정을 처리했습니다. 제품 자체를 넘어, 여기서 헥사고날 아키텍처, DDD, 클린 코드 원칙, Doc as Code를 깊이 파고들었습니다 — 처음으로 프로덕션 환경에서 적용하면서. 또한 더 시니어한 역할을 맡았습니다: 주니어 개발자 도움, 아키텍처 결정의 오너십, 코드 리뷰 주도, 즉각적인 작업을 넘어서는 기술적 개념 설명. TanStack Query의 사용은 서버 상태 관리에 대해 근본적으로 다른 사고 방식을 가르쳐 주었습니다.

• 헥사고날 아키텍처와 DDD를 사용하여 플랫폼 설계 및 구축 — 이러한 원칙의 첫 프로덕션 적용
• Doc as Code 실践 구현: 코드베이스 구조와 정렬된 살아있는 문서화
• 서버 상태 관리를 위해 TanStack Query 도입 — 데이터 페칭 패턴 크게 개선

• React
• Tailwind CSS
• TanStack Query
• Hexagonal Architecture
• DDD
• Unit Testing

주요 섬유 회사를 위한 프로젝트에 합류하여 창고 운영자가 트럭 배송을 추적하고, 수량을 관리하고, 주문 흐름을 모니터링할 수 있도록 설계된 물류 SaaS 플랫폼을 구축했습니다. 라이브 API에 연결된 대규모 컴포넌트 세트와 완전한 대시보드 흐름을 구축했습니다. 이 프로젝트 중 모바일 개발도 탐색했습니다 — Android Studio를 설정하고 Kotlin/Java에서 수정 작업을 하다가 클라이언트가 Android만으로 결정했습니다. 웹 중심 방향과 맞지 않는 방향을 따르기보다 앞으로 나아가기로 선택했습니다. 이 경험은 SaaS 제품 직관과 데이터 중심 UI 디자인에 대한 깊은 이해를 제공했습니다.

• 라이브 물류 API에 연결된 복잡한 데이터 흐름을 가진 완전한 SaaS 대시보드 구축
• 배송 추적 및 재고 관리를 위한 운영자 중심 UI 설계 및 구현
• 클라이언트가 모바일 전용으로 피봇하기 전 Android Studio 설정 및 Kotlin/Java 수정

• React
• Redux
• Sass
• REST APIs
• Android Studio
• Kotlin

주요 보험 회사를 위한 완전한 컴포넌트 라이브러리를 구축하는 임무를 맡아 처음부터 시작했습니다: Webpack 설정, Node 10과 클래스 기반 React 컴포넌트를 실행하는 레거시 스택과의 통합 문제 해결, 구형 및 신형 코드베이스 모두에서 작동할 수 있는 컴포넌트 API 설계. 다른 제품에서 15인 팀의 명목상 지원을 받음에도 불구하고 완전히 혼자 작업했습니다. 작업을 자체 정의하고, 자체 사양을 작성하고, 정제를 실행하고, 노력을 추정하고, UX 리드가 프로젝트 중간에 장기 휴가를 떠난 후 독립적으로 UX 결정을 내려야 했습니다. 전체 Storybook 문서와 기존 제품 흐름 마이그레이션을 포함한 라이브러리를 납품했습니다. 잘못된 엔지니어링 관행과 클라이언트 윤리로 인해 곧 프로젝트를 떠났습니다.

• 완전한 컴포넌트 라이브러리 납품 — Webpack 설정부터 Storybook 문서까지
• 레거시 스택과의 복잡한 통합 문제 해결: Node 10, 구형 React, 클래스 컴포넌트
• 전체 프로젝트 라이프사이클 자율 관리: 작업 정의, 정제, 추정, 납품

• React
• Storybook
• Tailwind CSS
• CSS
• Webpack
• RTL

Coderhouse에서 프론트엔드 자격증을 취득한 후 기술 튜터로 남도록 초대받았습니다. 단순히 과제를 수정하는 것이 아니라 훨씬 더 나아갔습니다: 활성 Discord 학습 커뮤니티를 구축하고 운영했으며, Twitch로 방송된 라이브 코딩 및 화면 공유 세션을 진행했고, 강좌에서 다루지 않은 주제에 대한 기술 토론을 이끌었으며, 보충 학습 콘텐츠를 제작했습니다. 이 경험은 오늘날 제가 멘토링에 접근하는 방식의 기반이 되었습니다 — 단순히 과제를 완료하는 것이 아닌 명확성, 구조, 장기적 성장에 초점을 두면서.

• HTML, CSS, JavaScript, React를 다루는 여러 프론트엔드 자격증 프로젝트 완료
• 활성 동료 학습 공간이 된 Discord 커뮤니티 구축 및 운영
• Twitch를 통한 라이브 코딩 세션 및 화면 공유 진행 — 커리큘럼에 없는 개념 설명

• JavaScript
• React
• HTML5
• CSS3
• Discord
• Twitch

클라이언트에게 납품을 가속화하려는 회사를 위해 프로덕션 준비가 된 보일러플레이트 세트를 개발했습니다. 작업은 클라이언트별로 빠르게 적응할 수 있는 재사용 가능한 React 컴포넌트와 Tailwind 기반 레이아웃 시스템을 구축하는 것이었습니다. 열악한 기술 리더십으로 고압적인 환경이었지만 — 아이러니하게도 이것이 제 학습을 가속화했습니다. 복잡한 컴포넌트 문제를 독립적으로 디버그하고, 불명확한 요구사항을 탐색하고, 언제 반론을 제기할지 판단하는 능력을 개발해야 했습니다. React를 깊이 이해하고 기능 장애적 팀 다이나믹이 엔지니어링 품질에 어떻게 영향을 미치는지 배운 결정적 경험.

• Tailwind CSS로 재사용 가능한 React 컴포넌트 라이브러리 및 레이아웃 템플릿 구축
• 시니어 엔지니어의 최소한의 지도로 압박 속에서 독립적으로 개발
• React 컴포넌트 아키텍처와 상태 패턴에 대한 심층적인 실무 경험 습득

• React
• Tailwind CSS
• JavaScript
• HTML5
• CSS3

첫 번째 실제 프로젝트 중 하나 — 아직 학업 중에 동료와 협력하여 구축했습니다. 완전한 이커머스 솔루션을 처음부터 설계하고 개발했으며, 전체 제품 라이프사이클을 다루었습니다: 고객 등록, 주문 관리, 재고 추적, 관리 패널. 오늘날 레거시로 간주될 스택을 사용했음에도 불구하고, 이 경험은 실제 클라이언트를 위해 처음부터 끝까지 무언가를 납품하는 실제 복잡성에 노출시켰습니다. 여기서 처음으로 단순히 코드를 작성하는 것이 아닌 제품을 소유한다는 것이 무엇을 의미하는지 이해했습니다.

• 완전한 이커머스 흐름 구축: 제품 카탈로그, 장바구니, 체크아웃, 주문 관리
• 재고 및 인벤토리 관리 시스템 설계 및 구현
• 클라이언트 요구사항 직접 처리 — 스테이크홀더 커뮤니케이션 첫 노출

• PHP
• HTML5
• CSS3
• Bootstrap
• JavaScript
• MySQL