DEV.
이택우 이력서
contact :[email protected]
- 5년 동안 사업을 운영했습니다. 효율적인 운영 방식을 모색하면서 개발을 시작하게 되었습니다.
- 사용자 경험과 개발 생산성을 동시에 향상하는데 관심이 많습니다.
- 효과적인 협업을 위한 적절한 맥락 공유와 투명한 소통을 지향합니다.
경력
(주)비씨랩스
프론트엔드 엔지니어
2022.11 ~ 2024.07
사용기술Typescript, Next.js (Pages router), Recoil, Tanstack-Query, TailwindCSS, Next-i18next, Jest, CircleCI, Github Actions, Storybook
신규 기능 개발 및 서비스 개선
주요 담당 업무
- 펀드 디테일과 리스트, 랜딩, 커뮤니티, 마이 페이지와 트레이더 대시보드를 담당했습니다.
- 신규 펀드 페이지의 기획 단계부터 참여하여 디테일 페이지의 결제 기능 담당하여 개발
- 랜딩, 펀드 마켓 리스트, 펀드 디테일 페이지 및 공용 결제 UI의 모바일 반응형 담당
사용자 경험 문제 해결
문제펀드 디테일 페이지의 느린 초기 로딩 속도와 성능 이슈로 인한 사용성 저하
분석
- 시간이 지남에 따라 증가하는 데이터로 인해 서버사이드에서 API 호출의 통신 지연
- 일부 API 필드의 갱신을 위한 getServersideRendering 사용으로 인한 렌더링 병목
- 서버 상태 업데이트 주기에 맞는 적절한 캐싱과 최적화 전략의 부재
해결 및 성과
- 전체 페이지 로딩 속도 70% 개선 (1.312s → 399ms)
- FCP: 1s → 86.12ms, LCP: 2.1s → 0.4s, CLS: 0.416 → 0.063, Hydration: 1s → 189.58ms
- ISR 전환: 서버 상태 변화가 적은 영역을 정적 렌더링으로 전환 뒤 적절한 revalidate 주기 설정
- 컴포넌트 단위로 정적 렌더링 여부를 분석하여 하이브리드 렌더링 도입
- 서버 상태 업데이트 주기와 빈도, SEO 포함 여부를 고려하여 서버사이드 API 호출 여부를 개선
- Tanstack Query를 통한 서버 상태 변경 주기에 맞는 캐싱 및 Prefetch 전략 구현
공용 라이브러리 및 개발 생산성 기여
담당 업무 및 성과
- 디자인 시스템 UI 라이브러리: 결제 관련 주요 컴포넌트 개발 및 유지보수를 담당
- Jest 테스트 코드 도입: 결제 페이지 유닛-통합 테스트 및 자동화 환경 구축을 담당
- Circle CI, Vercel, Github Actions을 이용한 자동 배포 환경 관리 및 문서화
생산성 문제와 해결 과정
문제 프론트엔드 FE 팀 규모 감소(5명→ 2명) 상황에 따른 생산성 저하에 대응이 필요했습니다.
분석
- 예측 가능성: 비일관적인 비동기 상태 관리와 예외 처리, props 구조 등 일관되지 않은 설계를 분석했습니다.
- 확장성: 강한 의존성으로 인해 컴포넌트 간 결합도가 높아 기획 변경 시 수정 범위가 커지고, 재사용성이 저하되었습니다.
해결 과정
- 선언적 UI를 위해 노력했습니다. 불필요한 상태 의존성 제거와 바운더리 패턴을 도입했습니다.
- 디자인 시스템: 다형성을 고려한 Props와 일관성 있는 API를 위한 컴포넌트와 유틸을 개발했습니다.
- 에러 처리 중앙화: 에러 바운더리 도입과 인증 토큰 에러 처리 개선에 기여했습니다.
- 기획팀과 협업해 누락된 예외 처리 케이스를 식별하고, Fallback UI 제공하도록 했습니다.
- Slack API와 Next.js API route를 사용하여 간단한 에러 로깅 시스템 구현했습니다.
팀 협업 기여
- 기능 스프린트와 별도의 FE 유지보수 기간을 기획하고, 업무 분배와 일정 산정을 주도하여 생산성 유지
- Storybook, Figma, Confluence 각종 문서를 기반으로 디자이너, 기획자와 협업
- 기술 세미나 주도 및 dev plan, 기능 명세서, 온보딩 문서화로 기술 문화 개선
- 코딩 컨밴션 세션을 진행한 뒤 문서화 및 사내 ESLint 라이브러리 개발과 유지보수
코인고스트
프론트엔드 엔지니어
2022.06 ~ 2022.08
사용기술Typescript, Next.js (pages router), Recoil, SWR, Styled Components
역할
- 마이 페이지: 암호화폐와 NFT를 통합 관리하는 모바일 지갑 서비스 컴포넌트 개발
- 백오피스 개발: 유저 데이터와 익명 게시글 관리 기능 개발 및 검색/필터링 기능 구현
- 모바일 웹뷰의 이벤트 배너와 백 오피스 연동하여 운영팀의 이벤트 콘텐츠 업데이트 자동화
개인 프로젝트
Auto Resume
2025.02
1인 풀스택 개발
사용기술
Figma에서 작성한 이력서를 웹사이트와 동기화하는 앱입니다. Figma API와 서버리스를 통해 JSON으로 마크업을 구성하고 배포합니다. 동적인 마크업을 서버에서 구성하는 방법에 대한 궁금증에서 시작한 프로젝트입니다.
- Figma 커스텀 플러그인에서 요청을 보내면 동적 컨텐츠, 스타일 정보를 보내고 배포를 트리거합니다.
- Handlebars와 CSS만을 사용하고, UI 코드 작성을 최소화하고자 했습니다.
Teklog - 기술 블로그
2022.08 ~ 현재
1인 풀스택 개발
사용기술
Next.js 14 (App router), TypeScript, TailwindCSS, Prisma, Supabase, Next/Auth
기술 블로그를 개발하고 운영하고 있습니다.
- 자료 구조와 알고리즘, JS와 리액트 원리에 대해 학습하고 있습니다.
- 학습한 내용과 새로운 기술을 적용하는 테스트 베드로 활용하고 있습니다.
사용기술
Next.js 14, React, TypeScript, Vite, TailwindCSS, Supabase, GitHub Actions, Cloudflare R2, Worker
컴포넌트 단위로 제품을 만들고자 시작했습니다. 상품 리뷰를 손쉽게 수집·관리하는 SaaS 솔루션으로, 웹사이트에 간편히 설치하고 사용할 수 있도록 설계했습니다.
- 웹 컴포넌트와 커스텀 이벤트를 활용하여 설치 및 커스텀 스타일링 기능 구현
- PayPal API를 통한 결제·구독 및 해지 기능과 인보이스 생성 기능으로 결제 관리
- GitHub Actions CI 구축 및 배포 시 Gzip 압축과 CDN 캐싱 최적화로 스크립트 서빙 500ms 이내로 단축
- Cloudflare Browser Rendering과 Workers를 통해 Amazon, Etsy에서 상품 리뷰 가져오기 기능 구현