사용자 중심,
웹 프론트엔드 엔지니어
김재환

5년 차 프론트엔드 개발자로서 주로 웹 서비스의 개발, 운영을 담당하고 있습니다.

초기 멤버로 스타트업에 합류하여 서비스가 MAU 30,000을 달성하고 TIPS 프로그램에 선정되는 성장을 하는 동안 서비스의 프론트엔드 개발을 주도 하였던 경험이 있습니다.

5년의 디자이너 경력이 있으며 여전히 좋은 UX/UI에 대한 관심이 있습니다. 좋은 UX란, 거슬리는 게 없는 것. 이라고 생각합니다.

PartSkills
Frontend- React, Next, Typescript
- Tanstack Query, MobX, Redux Toolkit
- Nuxt3.11, Vue3.4
- Jest, React testing library
- Storybook, i18next, Radix, Canvas
- TailwindCSS, SCSS, Styled-components
- Event logging
Backend- Node(Express)
AWS- EC2, Route53, RDS(MySQL), S3
UX/UI- 5년간의 웹/UI 디자이너 경력
Collaborative- Git, Notion, Slack, Figma, Linear, Jira, Miro
  • 리액트) 다양한 UI 요구사항에 유연하게 대응하기 위한 합성 컴포넌트 패턴으로 컴포넌트를 구현하고 사용하는데 익숙합니다.
  • 리액트) Concurrent UI 패턴(Suspense, ErrorBoundary를 사용하여 API 요청 단위로 컴포넌트를 쪼개어 선언적인 로딩과 에러 화면을 관리하는 것)에 익숙합니다.
  • 반응형 웹 디자인에 대응하는 것에 익숙합니다.

2024. 02. - 현재 : Frontend Engineer

https://weolbu.com

월급쟁이부자들은 월급쟁이들에게 내집마련과 행복한 노후를 만들어주기 위한 비전으로 국내 1등 성인교육 플랫폼를 만들어가고 있습니다.

사용 기술, 특이사항

  • Nuxt, Vue3.4, Typescript, Next(전환중)
  • Shadcn, Radix, Tailwind, Turborepo, Storybook
  • Primevue, Primeflex
  • Monorepo

디자인시스템 구축

  • Shadcn + Radix UI 를 사용한 Headless + Composite 컴포넌트로 유연하게 사용할 수 있는 디자인시스템 구축

커뮤니티 제품 개발/운영

  • MAU 30만 → 100만 달성
  • 제품 개발 뿐 아니라 스쿼드 목표 달성과 문제 해결을 중점으로 둡니다.

2022. 04. - 2023. 10. : 1년 7개월 - Frontend Engineer

https://flex.team

flex는 기업이 겪는 사람과 조직에 관한 다양한 문제를 해결하는 B2B HR SaaS 입니다. flex에서 근무하는 동안, 저는 가장 많은 사용자를 가진 제품인 타임트래킹 제품을 개발, 운영, 배포하였습니다. 타임트래킹 제품은 구성원 평가의 근거가 되는 근무, 휴가와 같은 근태관리에 대한 문제를 해결합니다.

사용 기술, 특이사항

  • React, Next, Typescript
  • Tanstack Query v4, Stitches, Radix, AntD, lodash, date-fns, i18next, react-window
  • Micro Frontend, Monorepo

타임트래킹 제품 개발/운영

  • 사용자 만족도와 제품의 사용자 경험, 버그등을 개선하기 위한 VOC 대응
  • 사용자 경험 개선을 위한 IA(정보 구조) 개선에 대응하여, 복잡한 애플리케이션 내의 Next 와 React Router 구조를 리팩토링
  • 더 나은 DX를 위해 합성 컴포넌트를 응용하여 컴포넌트의 재활용성을 높임

사용자 이벤트 로깅 사내 패키지 2.0 버전 개발

  • IA(정보 구조)개선에 따른 이벤트 로깅 스키마 변경에 대응하기 위해 발생하는 시간적 유지보수 비용을 줄이기 위해, 이벤트 로깅 사내 패키지 2.0 버전 개발하여, 시간적 유지보수 비용을 없앰
  • 동료들이 편하게 응용할 수 있도록 개발 가이드 문서 제공

날짜, 시간 포맷터 패키지 개발

  • 서비스 전반적으로 날짜와 시간 포맷이 일관되지 못한 문제와 타임존 이슈 등을 해결하기 위해 날짜, 시간 포맷터 패키지 개발
  • 패키지 안정성을 위한 테스트 주도 개발(TDD)
  • 동료들이 편하게 응용할 수 있도록 개발 가이드 문서 제공

2020. 02. - 2022. 01. : 2년 - Frontend Developer

iScrim 제품은 전 세계 아마추어 E-Sports 생태계를 만들기 위해 시작 된 B2B SaaS 대회 운영 플랫폼 입니다. 초기 멤버로서 프론트엔드 전반적인 부분을 주도 했으며 제품 기획에도 참여하였습니다. 게임 BJ, 대형 스크럼 팀, 게임 개발사와의 협업, 국내 지역 이스포츠 행사 등을 통해 서비스는 천천히 성장했고 여러 국가에 걸쳐 MAU 30,000 을 달성하였습니다.

사용 기술

  • React, Typescript
  • Socket, Styled Components, MobX, Storybook, Canvas, SVG, i18next

iScrim 제품 개발/운영

  • 실시간 대회 진행, 운영자와 사용자간 실시간 커뮤니케이션을 위해 Socket 기술을 적용
  • 대회 운영자들에게 알기 쉽고 유의미한 통계 데이터와 대회 정보, 대진표를 보여주기 위해 SVG, Canvas 기술로 그래프 구현
  • 컴포넌트를 찾기 어려워질 만큼 앱이 커져서, 더 빠른 개발과 나은 DX를 위해 컴포넌트 구조 리팩토링 - SRP, Flatten component tree

사내 디자인 시스템 UI 라이브러리(React) 개발

  • 디자인 일관성과 생산성을 높이기 위해 디자인 시스템 구축, 패키지 개발
  • 다른 직군 동료들과 함께 UI 테스트를 할 수 있도록 Storybook 으로 문서화

개인 프로젝트

https://johnykim.me/work/tumssum

오랜시간 써 온 가계부를 더 편리하게 쓰기 위해 공부도 할 겸 만들어 본 프로젝트입니다. 최소 기능으로 먼저 배포하여 9개월 넘게 직접 사용하며 테스트 했습니다.

사용 기술

  • React, Django(Python), Redux toolkit, SCSS
  • Storybook, Docker, React testing library, Jest
  • OAuth2(Social authentication), Email authentication (JWT token)
  • AWS EC2, RDS(MySQL)
  • 관계형 데이터 설계, 반응형 웹 디자인

서비스 개발/운영

  • 안정성과 개인 학습을 위해 스토리북 주도 개발(SDD) 과 TDD를 지키며 개발
  • 개인 학습을 위해 EC2, RDS(MySQL) 등 유료 AWS 서비스를 적극 이용
  • 개인 학습과 로컬 환경과 동일한 EC2 환경을 구축하기 위해 Docker 도입
  • 쉽고 직관적으로 가계부를 쓸 수 있도록 드래그 앤 드롭 기능 자체 개발

이렇게 일합니다.

  • 좋은 UX/UI를 만들기 위해 함께 고민합니다.
  • 동료들과 본인의 성장을 위한 코드리뷰 문화를 좋아합니다.
  • 현재의 나보다 일을 더 잘 하기 위해 고민하고 노력합니다.
  • 빠른 의사소통을 위해 내 업무 보다는 동료들의 질문이나 도움 요청, 코드 리뷰 등을 항상 높은 우선 순위에 두려고 노력합니다.

이런 회사/동료들과 함께 일하고 싶습니다.

  • 다른 구성원의 의견에 귀를 기울이는 동료들
  • 다른 구성원이 일을 잘 해낼 수 있게 적극 도와주는 동료들
  • 누구의 탓을 찾는 대신, 해결 방법을 찾는 동료들
  • 모르는 것을 부끄러워하지 않는 동료들
  • 일을 잘 하기 위해, 내가 가진 지식을 아끼지 않고 서로 공유하는 동료들

이런 것들을 고민하고 있습니다.

  • 동료 개발자들이 사용하기 쉬운 디자인시스템은 어떤 모습일까?
  • 어떻게 하면 적은 커뮤니케이션 비용으로 내 의견이나 정보를 쉽게 전달할 수 있을까?

  • GUI, 웹 디자이너로 약 5년 근무
  • 인덕대학교 시각디자인과 4.1 학점으로 졸업
  • 인덕대학교 시각디자인과 학회장
  • 대상, 금상을 포함한 디자인 전국대회 21개상 수상