디지털 마케팅 비디오를 사용자의 요구조건에 맞게 손 쉽게 만드는 도구를 제공합니다.
쉐이커가 인수된 이후 기술합병 과정을 진행중입니다.
활동
서울 팀과 함께 기존에 만들어진 쉐이커 기술을 셔틀락에 적용하는 작업 진행
김종현
프론트엔드 엔지니어, 소프트웨어 엔지니어
제품이 사용자에게 직접 사용되기까지 필요한 모든 분야의 것을 배우고 활용하는 것을 좋아합니다.
디자이너가 애프터 이펙트로 만든 비디오 템플릿을 쉐이커 템플릿화 하여 사용자 자신의 맞는 텍스트와 비디오, 이미지 등을 넣어 개인화 할 수 있는 서비스입니다.
B2C 개인 비디오 제작에서 B2B 비디오 마케팅 툴로의 피벗이 있었고 프론트엔드 팀으로는 저 포함 프론트엔드 리드분, 퍼블리싱과 디자인, PM을 같이 담당하시는 한 분으로 총 세 명이였습니다.
쉐이커 플랫폼은 프로젝트와 기간, 작업 관계에 따라 유동적으로 작업했으며 주 프로젝트로는 어드민, 크리에이터 대시보드 그리고 템플릿 위자드를 리드했습니다.
B2C 개인 비디오 제작에서 B2B 비디오 마케팅 툴로의 피벗이 있었고 프론트엔드 팀으로는 저 포함 프론트엔드 리드분, 퍼블리싱과 디자인, PM을 같이 담당하시는 한 분으로 총 세 명이였습니다.
쉐이커 플랫폼은 프로젝트와 기간, 작업 관계에 따라 유동적으로 작업했으며 주 프로젝트로는 어드민, 크리에이터 대시보드 그리고 템플릿 위자드를 리드했습니다.
프로젝트
쉐이커 플랫폼
사용자가 자신의 데이터를 이용하여 템플릿을 사용해 비디오를 제작하는 기능을 가진 플랫폼
어드민 대시보드
비디오, 유저, 마켓, 정기권 관리 등의 기능이 포함된 백오피스 플랫폼
크리에이터 대시보드
템플릿 디자이너 자신의 브랜드 정보, 매출 관리와 템플릿 등록을 위한 플랫폼
템플릿 위자드
디자이너가 애프터 이펙트 파일을 업로드하여 쉐이커 플랫폼에서 사용될 수 있도록 변환하는 기능을 가진 프로젝트
AngularLessTurborepoNgRx (Redux)DockerNginxGithub ActionsRESTful APIGraphQLESLintPrettier
Shakr Developers
쉐이커 API를 사용하는 개발자들을 위한 플랫폼
ReactDocusaurusDocker
StoriesAds
쉐이커를 이용한 인스타그램 Stories 비디오의 홍보와 제작을 위한 스프린트 단기 프로젝트
Vanila JSWebpackNginxDocker
Punchcard
정부에서 지원중인 방위산업체 산업기능요원 출퇴 입증문서 관리를 위한 Swift 어플리케이션, Ionic Angular 기반 웹앱 제작 이후 최적화를 위해 마이그레이션 작업됨
SwiftIonicAngularBeaconFirebase
활동
어드민, 크리에이터 대시보드, 템플릿 위자드의 유지 보수 및 주요 프로젝트 마일스톤 관리로 필요한 기능의 우선 순위 정립과 해야하는 일을 분리함
내부 개발팀 멤버 및 디자이너 팀, 마케팅 팀 등 다른 멤버들과 지속적인 커뮤니케이션으로 어드민 대시보드의 주요 기능들 개선 및 추가
어드민 대시보드의 권한 기능 제안 및 도입으로 팀원의 작업 사항 분리가 되어 새로운 팀원의 온보딩과 관련 부서의 작업에서 보안 및 사용성이 개선됨
두 개의 대시보드 내에서 공용으로 사용되는 Angular 컴포넌트, 서비스, 유틸 라이브러리를 제작하여 중복되는 코드 제거
어드민 대시보드 내 리스트에서 사용할 수 있는 백엔드 필터 기능에 기반한 프론트엔드 공용 필터 기능 제작으로 새로운 기능 리스트가 추가될 시 빠른 시간내에 도입할 수 있도록 구축하여 협업시 개발의 용이성과 내부 팀원들의 기능 필요성을 충족
어드민 대시보드 내 쉐이커 API (Id, Secret) 생성 기능 프론트엔드 제작
외부 디자이너의 수입 지급을 위한 시스템을 어드민 대시보드와 크리에이터 대시보드에 적용하여 관련 팀원의 작업 편의성과 디자이너의 편의성 개선
쉐이커 플랫폼 내에서 사용할 수 있는 사용자 팀의 비디오 템플릿 관리를 위한 프론트엔드 제작으로 기존에 분리된 크리에이터 대시보드에서만 관리 가능했던 비디오 템플릿을 플랫폼 내에서 관리할 수 있게되어 편의성과 접근성이 개선됨
애프터 이펙트 파일을 분석하는 팀원과 협업하여 기존 애프터 이펙트 파일 내에서 플러그인으로 사용되던 템플릿 위자드를 Redux를 활용하여 웹 플랫폼으로 사용할 수 있게 제작하였고 이후 어드민 대시보드, 크리에이터 대시보드, 쉐이커 플랫폼에 탑재로 사용성과 작업 분리에 따른 사용자 및 팀원 작업의 효율성이 개선됨
Docusaurus 프레임워크를 활용하여 Shakr Developers 제작
AngularJS 기반으로 구현되어 있던 어드민 대시보드와 크리에이터 대시보드를 Angular 구조로 마이그레이션 작업
어드민 대시보드와 크리에이터 대시보드 내 비디오 템플릿 버전 관리 기능에 대한 개선 사항 적용으로 디자이너의 서비스 이해도 (버전 관리)에 대한 필요성이 줄어들어 진입 장벽이 낮아져 접근성이 개선됨
StoriesAds의 프론트엔드 개발 리드 역할을 담당
Punchcard 제작으로 병역 출퇴관리 입증
비디오 제작에 사용되는 사용자 팀 애셋 관리를 위한 파일 관리 시스템 프론트엔드 구현으로 팀의 중복 파일 사용 및 업로드 시간이 단축되어 파일 서버의 관리와 비디오 제작시 시간이 줄어들어 효율적인 작업이 가능해짐
비디오 제작에 사용되는 외부 스톡 이미지 검색 및 사용을 위해 GraphQL 컨셉으로 구현된 백엔드 API를 활용하여 무한 스크롤 기능을 포함한 프론트엔드 구현 이후 내부 팀원의 QA, 외부 사용자들의 접근시 테스트의 진입 장벽이 낮아져 사용성과 접근성이 개선됨
쉐이커 백엔드, 프론트엔드, 기타 엔진과 워커 등 코드에 대한 분석
쉐이커 플랫폼과 어드민 대시보드의 버그 수정과 작은 기능들 추가
개인 프로젝트 사이트 구축과 기능 배포를 위한 기반을 마련하기위해 Turborepo를 활용하여 Next.js 모노레포를 적용하였으며 그 후 구축해놓았던 Private 도커 레지스트리 서버에 Github Actions를 통해 이미지를 올린 후 Nginx Reverse Proxy 서버를 구성해서 각 플랫폼 컨테이너로 우회했습니다. Private Turbo Remote Cache 서버를 통해 빌드 속도를 단축시켰고 pnpm 캐시 또한 Actions에 적용하여 빠른 배포와 개발이 가능해졌습니다. 이후에 Kubenetes + Nginx Ingress 컨트롤러 기반으로 변경하였고 가용성을 대폭 증가시켜 다양한 프로젝트를 구상중에 있습니다.
PortainerDockerDocker RegistryDocker ComposeNginxNext.jsReactGithub ActionsTurborepoTurbo Remote CacheMicrok8sKubernetesPnpmESLintPrettier
기획자와 소통을 위해 만든 공부 플랫폼 기획용 프로토타입 입니다. 부모님이 자녀의 문제집 풀이 시간과 결과를 확인할 수 있습니다. 로고, 상세 디자인 목업을 제외한 데이터베이스 설계, 알림 및 모든 개발 과정을 담당했습니다. 디자인 구체화와 React Native 변환 진행 예정 중입니다.
Next.jsReactCSS ModulePWAWeb Push NotificationNodeCronService WorkerPostgreSQLPrismaESLintPrettier
인천에 위치한 소형 음악 레이블 소개 페이지입니다. 메일 연동 및 홈페이지를 위한 DNS 세팅 또한 함께 작업했습니다.
AngularLessCloudflareESLintPrettier
Typescript (Javascript)Less (CSS)HTML5SQL
AngularReactStyled ComponentsNext.jsNest.jsNgRx (Redux)WebpackESBuildESLintYarnPnpmDockerKubenetesNode.jsPrismaPortainerTurborepoPrettier
GithubAWSGoogle CloudVercelCloudflare