"안녕하세요!
- 서비스를 책임지는
- 도전적인
- 낭만 끝판왕
- 삽질을 즐기는
개발자 김준혁 입니다."
Contact.
Career.
N.CODE | 2020.04 ~ 2023.11 |
LG U+ | 2023.12 ~ |
License.
정보 처리 기사
리눅스 마스터 2급
Introduce.
5년 차 FE 개발자로 패션 이커머스 스타트업(엔코드)와 통신기반 플랫폼 서비스업(LG U+)에서 웹/앱 서비스를 기획/개발/배포/운영 하였습니다.
(주)엔코드에서는 클라이언트 서비스(d.code)와 백오피스를 모두 개발한 경험이 있으며 회사에 기여 가능한 크고 작은 프로젝트를 다수 담당하였으며, 장기간 프로젝트에서 실패와 성공의 경험을 모두 가지고 있습니다. 리더만 있던 3명의 팀에 첫발을 내디뎌 19년도 입사 당시 월 거래액 1.8억 원에서 현재는 월 거래액 30억 원에 육박할 만큼 회사의 성장을 함께하였습니다.
(주)LG U+ 에서 아이돌플랫폼 서비스인 diggus 오픈을 함께 하였으며 웹뷰 기반으로 개발을 진행하였습니다. 현재는 온라인 통신 서비스인 Nerget 에서 앱(React-native)/웹뷰/웹을 모두 개발하고 있습니다.
저는 회사와 서로 공생하여야 한다고 생각합니다. 제가 주는 것만큼 회사도 저에게 돌려준다는 생각으로 업무에 임합니다.
실패를 두려워하지 않고 책임을 회피하지 않으며 결과를 통하여 얻는 경험을 소중히 합니다.
밀려들어오는 업무에서 어떻게 하면 좀 더 팀에 기여를 할지 고민하며 일을 하였습니다.
팀이 함께 성장하길 바래왔고, 때문에 크고 작은 세미나를 열어 공유하였습니다.
클라이언트/백오피스 플랫폼을 가리지 않고 모두 개선/개발한 경험이 있습니다.
Skill.
Basic
CSS
SASS / SCSS
JavaScript
TypeScript
Library/Framework
React
NextJS
antd
MobX
Redux
recoil
styled
components
components
PostCSS
Tailwind
CSS
CSS
Communication
Confluence
Notion
Trello
JIRA
Slack
Zeplin
Figma
Tools
Git
Github
bitbucket
VSCode
WebStorm
PostMan
Google
Analytics
Analytics
Firebase
Analytics
Analytics
Amplitude
HTML CSS SASS/SCSS
javascript typescript
React Mobx Redux Recoil NextJS antd
styled-components PostCSS tailwindCSS
Trello Jira Slack Notion Figma Zeplin
Git Github BitBucket Postman VsCode WebStorm
Google Analytics Firebase Analytics Amplitude
Education.
Side Project.
Semina.
Activity & Awards.
Work Experience.
순서 : 중요하게 생각하는 경험
(클라이언트 서비스) d.code v3.0 개발
d.code 3.0은 ncode에서 서비스하는 패션 이커머스 플랫폼입니다.
period | 2021.04 ~ 2022.01 |
projects | d.code 3.0 개발 |
tech | TypeScript, React, Mobx, antd(백오피스) |
schedule | JIRA(Gantt Chart) |
documentation | Notion |
•
ncode에서 서비스하는 클라이언트 플랫폼인 d.code(v2.0)를 v3.0으로 새로 만드는 작업
•
클린 아키텍쳐 기반으로 하여 프로젝트 설계 및 구현
•
초기 셋팅 및 라이브러리 선택 리드
•
개발 의사결정(컨벤션) 주도
•
공통 컴포넌트 설계/구현 → 문서화
•
유틸리티성 컴포넌트 및 hook 컴포넌트 설계/구현
•
페이지/레이어 단위 개발 : 결제, 상품목록/상세, 주문목록/상세, 리뷰
결과 : 버전 업으로 인하여 처음부터 프로젝트를 설계하여 구현. 공통 컴포넌트를 설계 및 구현하고 문서화함에 따라, 팀원간의 중복된 컴포넌트를 최대한 방지하였고, 의사결정을 주도하여 팀원간의 스타일을 동기화하여 팀원들끼리 서로 작업파트가 달라지더라도 추후에 유지보수가 용이하게끔 하였음. 또한 도움이 필요한 기능들은 별도의 유틸리티로 격리하였으며, 외부라이브러리는 최대한 Wrapping하여 라이브러리가 중간에 교체되더라도 손쉽게 유지보수를 할 수 있도록 설계 하였음. 동기화된 코드와 스타일로 인해 유지보수 시간을 대폭 감소시켰으며, v2.0 클라이언트 플랫폼 대비 전체적인 속도를 20프로 이상 (라이트하우스 기준) 빠르게 하였음.
(구) 백오피스 → v3.0 백오피스 통합
period | 2022.03 ~ 2022.06 |
projects | v1.0, v2.0 백오피스 → v3.0 백오피스 통합 프로젝트 |
tech | TypeScript, React, Mobx, antd |
schedule | Trello |
documentation | Notion |
•
ncode에서 사용하고 있는 백오피스 플랫폼(v1.0, v2.0)의 일부 기능을 백오피스(v3.0)로 통합하는 작업
•
백엔드를 제외한 모든 작업 단독 진행 : 기획, 설계, 구현
•
1.0, 2.0 백오피스에서 사용된 16버전의 React, Redux, JS로 작업된 코드들을 전부 클린아키텍쳐 기반으로 설계된 v3.0으로 통합하며 리펙토링 진행 (v17 React, Mobx, TS)
결과 : 백오피스 v1.0 페이지 자체가 제거 됨에 따라, 3개로 운영되고 있던 서버비용, S3비용을 2개로 줄였기 때문에 비용이 절감됨. 또한 다음과 같은 성과를 달성
1.
백오피스 v3.0으로 일부 메뉴들이 이관됨에 따라 브라우저 창 자체의 변경이 필요 없어졌고 3.0에서 사용하는 유저상태가 유지되었기 때문에 협업부서의 업무 효율성이 증가시켰으며 추후 각 부서에 따른 메뉴 권한을 주기 위한 작업의 초안이 됨
2.
각 어드민 별로 각기 달랐던 UI/UX들을 일관된 UI/UX를 제공함에 따라, 추가적인 학습 없이 어드민 기능을 이용이 가능
3.
단순히, 통합한 것이 아닌 기존 메뉴에 발생하던 버그를 해결하여 사용성 증가
전사 업무 통합 관리 플랫폼(WMS/ERP) 개발
period | 2020.12 ~ 2021.03 |
projects | 전사 업무 통합 관리 플랫폼 : Alice Project |
tech | TypeScript, React, Mobx, SnowPack, antd |
schedule | WBS |
documentation | Notion |
•
클린 아키텍쳐 기반으로 하여 프로젝트 설계 및 구현
•
공통 컴포넌트 설계 및 문서화
•
Grid 시스템을 이용하여 엑셀과 유사한 동작방식의 데이터 핸들링 기능 구현
결과 : 실패 > 개발 인력 부족, 회사 정책 변경으로 인한 프로젝트 드랍
해당 프로젝트로 배운 점 : 해당 프로젝트가 실패를 하였으나, 개발적인 측면에서 OOP 설계의 도입, 아키텍쳐 적용으로 인해 코드를 분리하여 동시 작업의 효율 극대화를 경험하였음.
v3.0 백오피스 상품 등록 신설
period | 2023.04 ~ 2023.07 |
projects | v3.0 백오피스 상품 등록 신설 |
tech | TypeScript, React, Mobx, antd |
schedule | Notion |
documentation | Notion |
•
정책 설계 참여 및 일정 조율 리드
•
ERP에서 관리하던 재고 시스템을 상품타입에 따라서, 백오피스에서 관리하도록 하는 기능 추가
•
클라이언트 서비스에서 옵션재고가 보여지는 UI 컴포넌트 구현
•
컨텐츠 및 상품 상세서 정보 입력 방식 수정
•
서비스로직 설계 및 구현
결과 : 상품 컨텐츠 제공성 향상. 클라이언트 서비스에서 설정할 수 있는 상품옵션이 단일에서 다중으로 변경 됨에 따라, 보다 많은 정보를 쉽게 파악 가능 하도록 수정됨. 자사 서비스 확대를 할 수 있는 기회 마련.
v3.0 백오피스 상품 관리 개편
period | 2022.07 ~ 2022.10 |
projects | v3.0 백오피스 상품 관리 개편 |
tech | TypeScript, React, Mobx, antd |
schedule | Trello |
documentation | Notion |
•
미승인 -> 승인 -> 전시, 판매 로 총 4개의 탭과 3개의 플로우 로 협업부서에서 사용 중인 방식을 좀 더 효율적인 2개의 탭과 2개의 플로우(미승인 -> 승인, 전시와 판매는 제거) 단축
•
재고 변경을 추적하는 히스토리 기능 구현
•
코드 리펙토링
결과 : 업무에 대한 효율성과 유지보수성이 증가하였으며, 상품 생성 및 수정 속도가 30프로 향상.
1.
더 빠르게 상품을 컨트롤할 수 있게 되었으며, 이전보다 단순해진 플로우로 인해 복잡성이 줄어듬
2.
상품 데이터 변경에 대한 히스토리 추적이 가능해짐
v3.0 백오피스 전시관리 개편
v2.0 백오피스 교환/반품 이력 기능
v3.0 백오피스 외주 인수 및 컨텐츠 유지보수
period | 2021.11 |
projects | v3.0 백오피스 외주 인수 및 컨텐츠 유지보수 |
tech | TypeScript, React, Mobx, antd(백오피스) |
schedule | JIRA(Gantt Chart) |
documentation | Notion |
•
v3.0 백오피스을 해외 외주업체로 부터 인수 받아 유지보수를 진행
•
컴포넌트를 작은 단위로 격리하고 반복문을 최대한 줄여 속도를 개선
•
UI와 Logic을 분리하는 리펙토링 작업
결과 : 렌더링 이슈를 해결하여, 속도 개선(약 50% 이상의 속도를 개선함, 약 6초 → 1~2초)
(모바일) 클라이언트 서비스 리빌딩
period | 2020.06 ~ 2020.09 |
projects | 클라이언트(v2.0) 플랫폼 리빌딩 |
tech | TypeScript, React, Mobx |
schedule | JIRA |
documentation | Confluence |
•
라이브러리 업데이트
◦
JS → TS로 변경
◦
최신 React 버전 반영 (v16.13.0)
•
Mobx를 이용한 MVVM 설계 반영
결과 : 유지보수 시간 단축. 팀원들과의 코드 레벨과 컨벤션을 동기화 함으로써 작업 파트에 구애받지 않는 작업이 실현가능하게 됨.
v2.0 백오피스(주문) : 바코드 시스템 개발
period | 2020.08 ~ 2020.10 |
projects | 백오피스(v2.0) 플랫폼 |
tech | JavaScript, React, Mobx, Redux |
schedule | JIRA |
documentation | Confluence |
•
상품별 바코드 정책 설계 참여
•
상품별 바코드 엑셀 파일 업로드 기능 설계 및 구현
•
상품별 바코드를 구현하는 기본 데이터 구성 기능 설계 및 구현
결과 : 바코드 단위로 상품 구성을 할 수 있게 되어, 기존에 상품들에 상품번호를 기준으로 수작업하여 엑셀관리 했던 부분에서 바코드를 이용하여 보다 체계적으로 주문과 상품을 관리가 가능해졌으며, 추후 상품의 상태 추적에 도움을 줌. 향후, 세일즈 업무 시간을 약 2시간정도 단축하는 성과 달성.
(PC/Mobile) 클라이언트 서비스 & 백오피스(컨텐츠) : 컨텐츠 서비스 개편
period | 2020.10 ~ 2020.12 |
projects | 백오피스(v2.0) 플랫폼 |
tech | JavaScript, React, Mobx, Redux |
schedule | JIRA |
documentation | Confluence |
•
(PC/Mobile) 클라이언트서비스 > 브랜드 단위 노출 서비스(이하 샵커버) 설계 및 구현
•
백오피스 > 브랜드 단위 노출 서비스(이하 샵커버)의 관리 설계 및 구현
•
백오피스 > 브랜드 데이터 CRUD 관련 기능 설계 및 구현
•
TOP 브랜드 리스트 노출 구현, 이벤트 배너 관리 영역 구현, 기획전 관리 영역 구현, 추천 브랜드 관리 영역 등등 구현
결과 : 특정 브랜드를 선호하는 고객에 비슷한 유형의 상품을 소개하고, 계정별로 노출하는 컨텐츠 서비스 기능을 개발하여 구매 전환율을 높이는 컨텐츠 서비스를 개편. 클라이언트 서비스가 개편함에 따라, 어드민에 관리 구좌도 함께 개편을 진행하였음. 특정 판매율이 저조하던 브랜드의 판매율이 20% 상승하는 성과 달성.
전사 문서화 Tool 변경 제안 : Confluence → Notion
기존에 Confluence로 모두 작업하고 있던 문서화 체계에서 Notion으로 문서화 Tool 전환을 전사에 제안
결과 : 개발팀만 Confluence를 사용하고 타 부서는 별도의 프로그램을 이용하였던 상황에서 타부서 또한 문서화 Tool을 Notion으로 변경 후, 엑셀, 구글 등으로 난잡하게 흩어진 문서들이 Notion으로 모이는 효과를 보여줌.
서비스 유지보수
period | 2020.04 ~ 현재 |
projects | (PC/모바일) 클라이언트(v2.0) 플랫폼, 백오피스(v1.0, v2.0) 플랫폼,
클라이언트(v3.0) 플랫폼, 백오피스(v3.0) 플랫폼 |
tech | JavaScript, TypeScript, React, Mobx, Redux |
schedule | JIRA, Notion |
documentation | Confluence, Notion |
2020.04 ~ 2022.01
•
PC 클라이언트(v2.0)
•
모바일 클라이언트(v2.0)
•
v1.0 백오피스
•
v2.0 백오피스
22.01 ~ 현재
•
v3.0 클라이언트
•
v2.0 백오피스, v3.0 백오피스