미리보기
기본 정보
기술 스택
JavaScript, React, Vue.js, TypeScript, HTML/CSS
경력
인프랩
팀원 | 프로덕트 개발 파트 | 재직 중
2022.07. ~ 재직 중 (2년 4개월)
110만 유저가 사용하는 IT 교육 서비스인 '인프런' 의 신규 기능 개발 및 유지보수를 담당했습니다.
- 바닐라 자바스크립트로 구현된 레거시 코드를 React/Next.js 로 마이그레이션
- 인프런 통합 GNB 헤더/푸터 공용 리액트 컴포넌트 라이브러리 개발
- 사내 QA 리소스 절감을 위한 사내 QA 툴 개발 (유저 계정 권한 상태 편집) <-- 기술적인 부분을 채워 넣을 수 있지 않을까? (신기술 도입 등등)
- 인프랩 FE 개발자 코드 컨벤션을 위한 ESLint 플러그인 개발
- 모니터링(센트리, 데이터독) 도구 도입 후 주기적인 에러 모니터링을 통한 사용자 경험 개선
(주)비팩토리
팀원 | 개발
2021.08. ~ 2022.04. (9개월)
(유)엠블소프트
팀원 | 개발
2019.02. ~ 2020.08. (1년 7개월)
프로젝트
인프런 질문&답변 커뮤니티 개선 및 UI 개편
인프랩
2023.01. ~ 2023.03.
인프런 유저들이 인프런 커뮤니티에서 유익한 정보를 얻을 수 있도록 질문&답변 카테고리에 투표 기능을 추가했습니다. 해당 작업을 진행하면서 커뮤니티 서비스의 유연한 확장을 위해 레거시 코드 개선 및 커뮤니티 질문&답변 UI 개편 작업을 진행했습니다.
- 인프런 커뮤니티 질문&답변 상세 UI/UX 개선
- 인프런 커뮤니티 질문&답변 게시글 및 답변에 투표 기능 추가
- 구조화된 Q&A 데이터(JSON-LD) 도입 및 Lighthouse SEO 점수 100점 달성
- 바닐라 자바스크립트 환경에서 JSDoc 활용으로 타입 체크
기술 스택 :
(인프런 커뮤니티) Javascript, Scss, Bootstrap
(인프런 강의실 커뮤니티) Typescript, React, Emotion, React-Query
인프런 통합 GNB 헤더 및 푸터 공용 리액트 컴포넌트 라이브러리 개발
인프랩
2022.08. ~ 2022.12.
바닐라 자바스크립트에서 리액트 모던 스택으로 전환하는 과정중 고민거리였던(팀의 페인 포인트), 인프런의 통합 GNB 헤더와 푸터를 리액트 모던 스택으로 전환한 공용 컴포넌트로 마이그레이션하는 작업을 진행했습니다.
GNB 헤더에는 인프런의 다양한 유저 계정 권한 로직이 담겨 있었지만, 기획 문서가 없어 레거시 코드를 분석하고 기능 명세서를 작성한 이후 작업을 진행하는 과정을 통해 인프런 서비스에 대한 이해도를 높일 수 있었습니다.
레거시 코드 분석 및 기능 명세서 작성
Lighthouse 검사 및 개선을 통해 웹 접근성 점수를 70에서 90점대로 향상
모듈 페더레이션 적용을 통한 목적조직 내의 배포병목 지점 개선
기술 스택 : Typescript, React, Emotion, React-Query, Webpack
케이팝 커스텀 굿즈 제작 서비스
(주)비팩토리
2021.11. ~ 2022.04.
K-POP 팬들을 위한 YG&비팩토리의 K-POP 굿즈(POD) 제작 플랫폼 서비스 프론트엔드 개발을 담당했습니다.
커스텀 디자인 툴로 원하는 상품을 직접 제작하며 소속사에서 제공하는 IP를 사용해 나만의 연예인을 위한 굿즈 제작이 가능한 서비스입니다.
기획과 개발, 테스트가 함께 진행되는 상황에서 개발을 진행하면서 기획/디자인 담당자와의 소통이 정말 많았던 프로젝트입니다. 매일 새롭게 추가되는 이슈를 주제로 서로 자유롭게 의견을 공유하면서 이슈를 해결한 부분이 많았습니다. 덕분에 공유와 소통에 대한 중요성을 더욱 느낄 수 있었습니다.
- 심프레스 라이브러리를 활용한 커스텀 에디터 툴 구현
- 커스텀 제작한 굿즈 디자인 저장 및 관리 보관함 구현
- React ErrorBoundary를 사용한 컴포넌트 에러 핸들링
기술 스택 : Typescript, React, Emotion, Recoil
키트랩 어드민 서비스
(주)비팩토리
2021.08. ~ 2021.10.
키트 제작 문의, 주문건 등록 및 주문 상태 관리, SCM 대시보드 조회 등의 작업이 가능한 어드민 서비스 프로젝트엔드 개발을 담당했습니다. CS/MD 담당자가 엑셀를 사용해 수작업으로 진행하던 업무를 자동화하여 운영 리소스를 20% 단축했습니다.
- 프로젝트 초기 React Application 구조 설계 및 서비스 개발
- SCM/문의 수/판매액/누적액 등의 데이터를 한눈에 확인할 수 있는 웹 대시보드 구현
- Amazon Web Service의 S3, CloudFront, CodePipeline/CodeBuild를 사용한 빌드/정적 배포 자동화 환경 구성
기술 스택 : Typescript, React, Emotion, Ant Design, React Query
스핀프로토콜 서비스
(유)엠블소프트
2019.02. ~ 2020.01.
블록체인 기반의 인플루언서 마케팅 플랫폼 서비스, 프런트엔드 개발을 담당했습니다.
서비스 내 우먼스톡 쇼핑몰 연동을 위한 API 개발을 위해 우먼스톡 개발팀과 협업을 진행했습니다. 다른 팀과 협업을 하면서 각 팀의 코딩 스타일, 업무 방식에 대해 경험할 수 있었습니다.
- 스핀프로토콜 웹 서비스의 UX 개선 작업
- 브라우저 뒤로가기 등의 상황에서 사용자가 보던 화면이 유지되도록 개발
- 로딩 화면 개선을 통해 이탈률을 낮추고 사용성 높임
- 이미지 URL 에러 처리, 대체 이미지를 보여주도록 개발
- CSS 코드 재사용성 및 관리를 위해 팀 내 Sass 기술스택 제안 및 도입
- 백엔드 개발자의 UI 개발 생산성에 도움을 주기 위한 mixin 템플릿 제작
- Sass 도입을 위해 팀 내 스터디 구성 및 진행
기술 스택 : Vue, Vuex, vue-router, vue-I18n, Amplify
셀럽플러스 서비스
(유)엠블소프트
2020.01. ~ 2020.08.
광고주 브랜드 상품의 광고형 캠페인을 통해 셀럽 마케팅 홍보가 이루어지는 플랫폼 서비스, 프런트엔드 개발을 담당했습니다.
스핀프로토콜 프로젝트 개발 시 코드 관리의 어려움을 느껴, 이를 개선하고자 프로젝트 설계 시 컴포넌트 디자인 패턴을 학습하여 적용했습니다. 적용 후 컴포넌트 재사용성이 높아져 코드 관리를 수월하게 할 수 있었고 업무 효율도 좋아졌습니다.
프로젝트를 진행하며 동료들과의 코딩 스타일을 맞추기 위해 코딩 컨벤션을 구축하며 코드를 작성하면서 불편했던 점을 공유하고 개선하면서 팀원들과 함께 성장할 수 있었습니다.
- 스핀프로토콜 웹 서비스의 UX 개선 작업
- 로딩 화면 개선을 통해 이탈률을 낮추고 사용성 높임
- 이미지 URL 에러 처리, 대체 이미지 적용
- 효율적인 CSS 코드 관리를 위해 팀 내 Sass 기술스택 제안 및 도입
기술 스택 : Vue, Vuex, vue-router, Amplify
포트폴리오
교육
서울디지텍고등학교
고등학교 | 공간정보학과
2016.03. ~ 2019.02. | 졸업
대외활동
오픈소스 컨트리뷰션 아카데미 2021 - Cracking Vue.js 멘티
오픈소스 컨트리뷰션 아카데미
프론트엔드 개발을 시작하면서 많은 도움을 받았던 Cracking Vue.js 오픈소스에 기여 할 수 있는 좋은 기회를 만들기 위해 오픈소스컨트리뷰톤 멘티 자격으로 지원을 했습니다.
오픈소스 기여의 첫 시작은 오픈 소스 문서에 있는 오타 수정 같은 작은 부분부터 시작하며 '오픈소스는 어렵다'는 마인드를 떨쳐 내도록 했습니다.
처음으로 20명이 넘는 사람들과 한 레포지토리에서 작업을 하다보니 충돌이 발생한 적이 있었는데, 함께 프로젝트를 진행하는 모두가 관심을 갖고 충돌 해결에 도움을 준 덕분에 빠르게 충돌을 해결할 수 있었습니다.
비록 문서 작성과 간단한 스타일 작업에 기여를 했지만, 어렵게만 생각하고 시도해보지 못했던 오픈소스에 경험을 할 수 있었고 PR을 올리면 적극적으로 피드백을 주는 멘토, 멘티분들 덕분에 코드 리뷰와 오픈소스에 문서 작성하는 방법 등을 배울 수 있어서 좋았습니다.
자격증
정보처리기능사
기능사 | 한국산업인력공단
2018.10.
웹디자인기능사
기능사 | 한국산업인력공단
2017.06.