MJS
안녕하세요!
문재석입니다. 👋
'코드는 스스로 만들어지지 않는다'는 모토를 가진 프론트엔드 개발자입니다. 기획, 디자인, 그리고 코드에 담긴 의도를 이해한 실무자들 간의 협업을 통해 완성도 높고 UX가 좋은 결과물을 만들고 있습니다.
Work Experience
그립컴퍼니
2022.08 - 재직 중
프론트엔드 개발자
- 모웹, 비즈니스 센터, 어드민2.0의 출시, 신규 기능 개발, 그리고 유지 보수 주도- 코드 컨벤션 통일을 위해 ESLint, Prettier, pre-commit을 적용하고, Git-flow 전략을 기반으로 버전 및 브랜치 관리 전략을 수립하여 문서를 작성하는 등 팀 개발 문화 정착을 주도- iOS/Android Grip 앱 내 웹뷰 구현- SSR, CSR, ISR이 혼합된 구조 설계 및 렌더링 전략 적용- 실시간 스트리밍을 시청하며 쿠폰 수령/채팅/게임 등을 할 수 있는 웹 플레이어 구현- 복잡도 높은 form과 기능이 다양한 table 구현- CSS 및 canvas를 활용해 고성능 애니메이션 구현- 오퍼월 형태의 광고 및 미션을 시청/수행 후 수령한 포인트로 그리퍼(방송자)에게 선물을 보낼 수 있는 기능 구현- 기획, 디자인, 백엔드, 마케팅 등 타 부서와의 소통 및 협업- 다양한 모니터링 툴을 사용하여 사용자 동선 추적 및 장애 대응- TF, PO, FST와 같은 목적 조직에서 기획부터 배포 및 유지 보수까지 반복되는 스프린트 사이클을 다수 경험
Skills
Typescript
React
Next.js
Sass
CSS Modules
Post-CSS
Tailwind CSS
Chakra UI
MUI
Styled-components
Node.js
ESLint
Stylelint
Prettier
Axios
TanStack Query
Redux
Recoil
Jotai
Zustand
Firebase
Jenkins
Git
GitHub
Github Action
React Hook Form
Zod
Datadog
AWS
i18n
...and more...
Projects
진심을 다합니다
서비스는 대부분 혼자가 아닌 다양한 사람들과의 협업을 통해 만들어집니다. 누군가의 노력이 헛되지 않도록 제가 해야할 일에 집중해 소중한 결과물을 만들어 냅니다.
Grip
국내 최초의 라이브 커머스 Grip입니다. React로 되어 있던 기존 서비스를 Next.js로 새로이 출시하였으며 PC 및 모바일 환경에 모두 대응하였습니다.
Next.js
Typescript
Sass
Tailwind CSS
shadcn/ui
Zustand
HLS.js
Firebase
Grip Admin 2.0
그립의 사내 구성원들이 그립을 운영 및 관리할 때 사용할 수 있는 서비스를 개발했습니다. 이후 기존의 어드민1.0을 점진적으로 종료했습니다.
Next.js
Typescript
Chakra UI
Tanstack Query
Jotai
Material React Table
React Hook Form
Zod
Mock Service Worker
Grip Business
그립의 셀러 및 그리퍼가 자신의 상품, 방송, 쿠폰, 계약 등 다양한 자산 전반을 관리할 때 사용하는 서비스를 개발 및 출시하였습니다. 이후 기존의 '판매자 센터' 서비스를 점진적으로 종료했습니다.
Next.js
Typescript
Chakra UI
Ark UI
Radix UI
Tanstack Query
Jotai
Material React Table
React Hook Form
Zod
Storybook
Grip Live
Grip의 코어한 기능들을 가져와 라이브 방송 시청/송출 및 상품 판매 등이 가능한 US 전용 웹/어드민을 개발했습니다. 이후 iOS 및 Android 앱에 서비스 전체를 웹뷰로 연동했습니다.
Next.js
Typescript
Material UI
Sass
GrpahQL
Apollo Client
Recoil
HLS.js
Firebase
Timeline
꾸준히 개발합니다
새로운 프로젝트든 오래된 레거시든 저에게는 모두 경험입니다. 19개 이상의 주요 과제와 프로젝트를 진행하며 좋은 코드, 나쁜 코드, 긍정적인 협업 경험, 부정적인 협업 경험 가릴 것 없이 몸소 체험할 수 있었습니다. 저는 더 나은 개발자가 되어 가고 있습니다.
- 오
오퍼월 광고 솔루션 도입 & 그리퍼 선물하기
Grip, Grip Business
- Grip에 오퍼월을 도입하여 광고 시청 및 미션 수행을 유도함으로써 광고 수익을 증가- 카카오 선물하기 API를 연동하여 시청자가 그리퍼에게 직접 선물을 보낼 수 있도록 개발- 선물 시 라이브 방송 화면에 애니메이션을 재생하여 생동감 향상- 비즈니스 센터에 그리퍼가 받은 선물에 대한 정보를 확인할 수 있는 메뉴 추가 - 코
코드 개편
Grip
- Next 15 버전으로 업그레이드- 인증 로직으로 인해 ISR을 사용할 수 없던 구조에서 ISR/SSR을 분리하는 구조로 개편- ISR 페이지에서 기존 대비 트래픽 처리 성능 약 10배 증가 - 방
방송 페이지 2차 개편
Grip
- GDS(Grip Design System)을 적용하여 방송 페이지 2차 개편- 키보드 상호 작용, 마우스 상호 작용 등 UX 개선 - 본
본인 인증 페이지 개발
Grip
- 백엔드에서 관리하던 본인 인증 페이지를 프론트엔드 페이지로 새로 개발- Grip 앱 내 웹뷰 연동 - 판
판매자 센터 종료 프로젝트
Grip Business
- 비즈니스 센터로의 완전한 전환을 위해 판매자 센터 내 기능을 비즈니스 센터로 이관- 그리퍼들과의 인터뷰에서 나온 개선 희망 사항들을 추가 개발 - 주
주문서 페이지 개발
Grip
- 백엔드에서 관리하던 주문서 페이지를 프론트엔드 페이지로 새로 개발- Form 유효성 검사, 에러 핸들링, 시각적 효과 추가 등을 통해 UX 개선- Grip 앱 내 웹뷰 연동 - 바
바이럴 프로젝트
Grip
- 사용자들의 적극적인 공유 유도를 위해 방송/상품/프로필 공유 기능 고도화- 방송 공유 시 채팅 뱃지 지급, 상품/프로필 공유 시 쿠폰 지급 등을 통해 유저 유입 유도 - 쿠
쿠폰 페이지 개발
Grip
- 백엔드에서 관리하던 쿠폰 페이지를 프론트엔드 페이지로 새로 개발- Grip 앱 내 웹뷰 연동 - 장
장바구니 페이지 개발
Grip
- 백엔드에서 관리하던 장바구니 페이지를 프론트엔드 페이지로 새로 개발- Grip 앱 내 웹뷰 연동 - 방
방송 페이지 1차 개편
Grip
- 앱에만 존재하는 기능들을 웹에서도 구현- 웹에서도 앱과 유사한 경험을 할 수 있도록 개선 - 상
상품 등록 임시 저장 기능 추가
Grip Business
- 그리퍼가 비즈니스 센터에서 상품을 등록하다가 임시 저장을 하고 화면을 이탈할 수 있도록 하는 기능 구현- 약 40개의 필드를 저장/유효성 검사/불러오는 기능 구현- 메뉴 이동, 뒤로 가기 등 화면 이탈 시도 시 confirm을 표시 - 카
카카오스토리 내 Grip SDK 개발
Grip, Grip Admin 2.0
- 카카오스토리 개발자들과 협업하며 카카오스토리 앱 내에 SDK를 탑재하여 세번째 탭을 그립 관련 웹뷰 화면으로 추가- 웹뷰 내 구성 요소를 제어하는 어드민 페이지 개발 - G
Grip 웹 재출시
Grip
- 레거시 코드와 기술 부채가 쌓인 기존의 코드를 버리고 Next.js로 개발 및 출시- 앱의 기능 및 디자인에 맞춰 UX 간극 축소- FCP, LCP, TTFB 감소 - G
Grip Admin 2.0 출시
Grip Admin
- 백엔드에서 관리하던 어드민을 프론트엔드 페이지로 새로 개발하여 출시- 복잡한 form의 관리 로직을 추가하여 DX 향상- 테이블에 다양한 기능을 추가하여 UX 향상 - G
Grip Business 출시
Grip Business
- 비즈니스 센터용 디자인 시스템을 적용하여 '판매자 센터'를 대체하기 위한 서비스 출시- 컴포넌트 및 로직 모듈화를 통해 개발 속도 향상- 집중 QA 기간을 통해 사소한 버그까지도 해소 - 셀
셀러온보딩 PO 과제
Grip, Grip Admin 2.0, Grip Business
- 입점 안내 페이지 개편, 공유하기 강화, 첫 방송 미션 추가 등을 개발 - 게
게임 참여 기능 개발
Grip
- Firebase를 활용해 라이브 방송을 시청하는 중에 추첨, 경매, 선착순 게임에 참여하는 기능 개발- 복잡도 높은 애니메이션을 CSS로 직접 구현해 성능 저하 방지 - 웹
웹 플레이어 최적화
Grip
- 자동 재생, VOD 재생, 채팅 싱크 등에 대한 최적화 진행- iOS, Android, PC의 모든 브라우저에서 음소거가 해제된 상태로도 자동 재생이 가능하도록 우회 기능 구현 - G
Grip Live 출시
Grip Live
- Grip으로부터 코어한 기능만을 뽑아 US 전용 웹/어드민 출시- Grip 앱 내에서 웹뷰로 해당 서비스가 사용 가능하도록 구현