미리보기
- 직업
- Web Front-end Engineer
- 이름
- 이재혁
- 간단소개
- - 서비스의 확장 및 복잡성을 고려하여 기술적으로 꾸준히 탐색합니다. 또한 개선 필요시 가장 적절한 기술을 검증하여 적용합니다. - 서비스의 성장을 위해 문제점을 찾아 해결하는 것을 우선으로 생각합니다. 이를 위해 문제를 빠르게 개선하여 원활한 운영 지원과 그 과정에서 유저의 관점에서 이해하는 역량을 쌓기 위해 노력해왔습니다. - 인하우스 및 외부 인력들과의 효울적인 소통을 위해 요청, 문의 사항들을 문서화하여 원할하게 협업을 해왔으며 마케팅 및 기획 직무에 대한 이해도를 갖추고 있어 명확한 의사전달이 가능합니다. 또한 다양한 구성원들과의 협업에 있어 기술적 정보의 격차를 해소하기 위해 비개발자의 시점에 맞추어 최대한 간결하게 설명합니다.
기술 스택
- 기술 스택
- React
- Next.js
- JavaScript
- TypeScript
- scss
- react-query
- zustand
- HTML/CSS
경력
- 회사명
- (주) 버즈니
- 직책 • 부서
- 프론트엔드 • 커머스 AI 스쿼드
- 근무 기간 (근무 형태)
- 2024.04. - 재직 중
- (6개월 | 정규직)
- 담당 업무
커머스 AI 스쿼드 소속의 프론트엔드 엔지니어로서
홈쇼핑 영상 기반 AI 기술을 통해 추출한 클립들을 컷 편집할 수 있는 B2B 서비스 개발하였습니다
- 회사명
- (주) 요쿠스
- 직책 • 부서
- 프론트엔드 • 개발팀
- 근무 기간 (근무 형태)
- 2023.05. - 2024.02.
- (10개월 | 정규직)
- 담당 업무
프론트엔드 혼자서 기존 국내 어드민을 글로벌 통합 어드민에 이관하는 작업 및 신규 글로벌 통합 어드민 설계 / 개발 / 운영하였습니다.
이외에도 기존 마이뷰팁 웹 서비스와 요쿠스 홈페이지 유지보수 및 고도화, 마이뷰팁 랜딩페이지, 마이뷰팁+ 랜딩페이지를 개발하였습니다
- 회사명
- (주) 헥스콘
- 직책 • 부서
- 프론트엔드 • 개발팀
- 근무 기간 (근무 형태)
- 2020.12. - 2023.04.
- (2년 5개월 | 정규직)
- 담당 업무
스타트업의 첫 번째 프론트엔드 개발자로서 모든 웹 개발 프로젝트의 프론트엔드 업무(웹사이트, 백오피스, 블로그) 기획 / 개발 업무를 수행했습니다
프로젝트
- 프로젝트명
- A+ short-form generator
- 소속/기관명
- (주)버즈니
- 프로젝트 기간
- 2024.04. - 진행 중
- (6개월)
- 프로젝트 설명
Next.js v14, tailwind, tanstack-query, dnd-kit, headless-ui, rc-slider, videojs, react-timeline-editor
타임라인 라이브러리와 dnd-kit를 활용하여 클립 sorting, 클립과 BGM dnd 기능, BGM multi row로 관리, 각 요소 구간 리사이징, 프리뷰 연동, fade in-out기능 구현
숏폼에 필요한 디자인 요소들을 관리하여 실시간 프리뷰 구현
crop 비율 설정, 자막 및 헤드라인 디자인 요소 적용, 스티커 기능 적용
홈쇼핑 데이터 AI 기반 숏폼 편집 AI 플랫폼
스택
개발
- 프로젝트명
- Mybeautip+ 글로벌 통합 어드민
- 소속/기관명
- (주) 요쿠스
- 프로젝트 기간
- 2023.05. - 진행 중
- (1년 5개월)
- 프로젝트 설명
- Next.js v14, mantine v6, styled-components, zustand, tanstack-query, typescript
- 기존 어드민과 신규 글로벌 어드민의 통합을 위해 기존에 종속되어있는 react-admin 기반의 프로젝트를 초기 빠른 이전 작업을 위해 mantine ui 라이브러리 기반의 어드민으로 구축
- 서비스 안정화 이후 다양한 요구사항에 대응하기 위해서는 mantine으로는 비효율적인 코드가 많이 필요했고 이를 해결하기 위해 styled-components 기반의 ui 컴포넌트로 이전 작업 실시
- 서버 사이드 데이터 관리를 위해 tanstack-query와 이에 사용되는 key 값을 선언적으로 관리하기 위해 query-key-factory를 사용해 각 API들에 맞는
커스텀 훅 구현 - props drilling과 세부적으로 나누어져 있는 데이터들를 응집도 있게 관리하기 위해 slice pattern을 활용한 zustand를 활용
- 특정 API들에서는 입력 필드를 15개 이상을 다루거나 조건에 따라 처리해야할 state들을 다룰경우 state와 유효성 체크 관리가 더욱 중요해지기 때문에 react-hook-form과 zod를 통해 유연하고 확장성있게 대응
- 재사용성과 유연하고 확장성 있는 compound component를 위해 관심사를 분리하고 선언적으로 관리
- 변동성이 적고 많은 데이터들을 virtual scroll을 통해 최적화
해외 뷰티 커뮤니티 및 이커머스 서비스 Mybeautip+ 관리를 위한 글로벌 통합 어드민
스택
개발
- 프로젝트명
- 탑티어 IT 관리자 온라인 파견 솔루션 “X-Cubator”
- 소속/기관명
- (주) 헥스콘
- 프로젝트 기간
- 2022.12. - 2023.04.
- (5개월)
- 프로젝트 설명
- Next.js, SCSS, zustand, Twilio Video SDK, React-query, react-hook-form, typescript
- 문제
- 총 서비스 기획에 따라 구현 도중 모든 단계를 고려하여 서비스를 구현하는 것은 시간적인 로스가 크고 서비스 구조가 너무 복잡하다는 분석
- 해결
- 단계별로 나눠져 있던 서비스 중 1단계 서비스 출시를 목표로 플로우를 단순화하여 이를 중점으로 기획안을 재구성하여 플로우 작성 후 구현
- 고객 유입을 위한 랜딩 페이지 개발
- Twilio Video SDK를 통한 미팅, 실시간 채팅, 화면 공유, 대기실 기능 구현
- zustand를 이용한 클라이언트 사이드 데이터 전역 관리
- react-query를 이용한 서버 사이드 데이터 관리
- SCSS 문법을 활용한 코드 재사용성 확보 및 개발 속도 향상
- 커스텀 디자인 적용을 위한 자체 캘린더 구현
- 외부 인력(기획, 디자이너) 과의 커뮤니케이션을 통해 기획을 고도화
국내 첫 민간 투자특화형 청년창업사관학교 ‘대전 청창사’ 입교 기업 중 TOP 12 데모데이 선정 아이템
스택
Problem & Solution
개발
- 프로젝트명
- 단기간 영어 회화 집중 학습 서비스 “ZOOPITO”
- 소속/기관명
- (주) 헥스콘
- 프로젝트 기간
- 2020.12. - 2022.03.
- (1년 4개월)
- 프로젝트 설명
- Next.js, styled-component, zustand, Vimeo SDK, Ant-design, typescript
- 영어 회화 커리큘럼을 바탕으로 단기간 집중 학습을 위한 영어 회화 서비스 작업 및 관리를 위한 프론트엔드 개발의 모든 부분을 맡아 서비스와 백오피스 구축
- AWS S3, cloudfront, route53을 통한 정적 웹사이트 호스팅
- AWS pipeline을 통한 CI/CD 구축
- PG사 심사 신청부터 결제 API 연동 후 결제까지 결제 프로세스 구축 (심사, 도입, 연동)
- 다날을 통한 본인 인증 프로세스 구축 (심사, 도입, 연동)
💡 2차 개발- Next.js
- 간편한 동적 라우팅과 빌드설정 등 빠른 CI/CD 구축을 위해 AWS Amplify 채택
- React에서 Next로 마이그레이션을 통해 SEO, 개발 속도(routing, data fetching) 개선
- axios interceptor를 통해 상태 코드에 따른 에러 처리
💡 3차 개발 - 지속적인 문제 분석 및 해결
- 간편한 로그인/회원가입을 위한 소셜 로그인 (네이버, 카카오) 프로세스 구축 (심사, 도입, 연동)
- 초기 유저 유입 유도 및 다양한 프로모션을 위해 쿠폰 기능 도입 (기획, 개발)
- 오프라인 모임을 타겟하여 영어 질문지 구성에 대한 페인 포인트를 포착하여 영어 질문지 자동 생성기 기능 도입 (기획, 개발)
- 난이도, 질문 갯수를 동적으로 입력한 값을 png혹은 pdf로 변환, 공유, 다운 가능
- 기능단 외부 프리랜서와 협업을 위한 AWS IAM 도입하여 필요 권한만 허가
- 계정 보안 향상을 위한 AWS MFA 도입
- 유저 저니맵 작성하여 유저플로우를 분석 → AARRR 관점에서 각 단계별 문제점 파악 → 문제 해결을 위한 개선 방안 작성 → 구체적 방안 도출 → 개발에 적용
- 랜딩 페이지 분석하여 이탈률이 가장 많이 일어나는 영역 탐색하고 AB테스트를 통해 개선 시도
- Ant-design 기반 백오피스 모든 기능 및 디자인을 기획/설계/구현
- 비디오 솔루션 Vimeo SDK을 이용해 영상 업로드 및 업데이트를 위해 백오피스 기능 기획/개발
- 문제 : 제품 출시 이후, 고객의 유입이 적은 문제 발생
- 해결 : 유저플로우를 통한 분석 후 여러 컨텐츠를 벤치마킹하여 방안들을 작성하고 내부 회의 및 스프린트를 통해 컨텐츠 수립 및 A/B 테스트를 통한 지속적인 수정/개발
자체 연구한 영어 회화 커리큘럼 기반, 단기간 집중 학습을 위한 영어 회화 서비스
스택
Summary
주요 업무 요약
💡 1차 개발- React.js
백오피스
Problem & Solution
- 프로젝트명
- 온라인 패션 갤러리 플랫폼 Cloco
- 소속/기관명
- (주) 헥스콘
- 프로젝트 기간
- 2021.01. - 2021.10.
- (10개월)
- 프로젝트 설명
- 문제
- 클라이언트의 복잡한 요구사항에 맞는 Clayful API가 존재하지 않는 문제
- 입점사를 위한 전용 관리 페이지가 따로 존재하여 이 부분도 같이 고려해야하는 문제
- 해결
- 자체 구축한 입점사 관리 API와 Clayful과의 지속적인 커뮤니케이션을 통한 구현 가능성을 체크를 통해 서비스를 구현
- Clayful에도 관리자 페이지가 있었으며 최대한 관리자 페이지 내의 기능을 활용, 커스텀하여 클라이언트의 요구사항을 맞춤
💡 통합 결제 솔루션 아임포트(현 포트원) 이슈 발견 및 대응
- 문제 : 해외 결제 테스트 중 발생한 결제 취소 동작에 대한 문제가 발생
- 해결 : 아임포트 해외 결제관련 이슈 발견 및 분석, 해결 기여
입점사 - 클로코 -고객을 연결 시키는 온라인 패션 갤러리 플랫폼
Problem & Solution
💡 클라이언트의 복잡한 요구사항 대응
- 프로젝트명
- 만화/웹툰 포트폴리오형 만화 자율 번역 SNS, Epiclogue
- 소속/기관명
- 창원대학교 창업동아리 루나캣
- 프로젝트 기간
- 2020.03. - 2020.12.
- (10개월)
- 프로젝트 설명
- ROLE: 전반적인 프론트엔드 업무 담당
- Canvas library인 Fabric.js를 이용한 만화 번역 에디터 구현
- portal을 이용한 모달 기능 개선
- 서비스 기획과 정책 수립에 기여
- react-router-dom을 이용한 권한 별 페이지 접근 제한 구현
- masonry레이아웃 구현을 통한 자유로운 구성
- useRef를 이용한 무한 스크롤 구현
교육부 학생 창업유망팀 300(U300) 경진대회 창업도전형 최종 선정
포트폴리오
교육
- 소속/기관
- 창원대학교
- 종류 | 전공명/전공계열
- 대학교(학사) | 경영학과
- 재학 기간 (재학 상태)
- 2015.03. - 2020.02. (졸업)