Lucas's Portfolio

About MeSkillArchivingProjectCareer

↓ 스크롤하여 진행해주세요!

안녕하세요!

FE개발자 최근원입니다

FE개발자 최근원

기본에 충실해지고 싶은 4년차 개발자입니다. 프론트 전반에 걸쳐 지식에 대한 열망이 아주 강합니다.

저를 조금 더 알아보고 싶나요?

ABOUT ME

이름최근원

생년월일1998.05.30

연락처010-4902-0651chlrmsdnjs9862@gmail.com

SKILLS

FrontEnd

Backend

Mobile App

Deployment

Community

Extra

ARCHIVING

github.com/lucas0530

소스 코드 저장소입니다.

• 과거 프로젝트, 프로그램, 앱의 소스 코드
• 멘토링 중인 Organizations의 소스 코드
• 라이브러리 활동 내역 등

velog.io/@lucas

스터디 및 지식 공유 목적의 블로그입니다.

• 공부한 내용을 머리로 정리하기 위해 작성한 기록
• 한층 더 성장한 개발자가 되기 위한 몸부림
• 알고 있는 지식을 공유하고 피드백을 받기 위한 자리

Portfolio

클릭 시 포트폴리오 pdf 파일로 이동합니다.

이력서를 보완하기 위해 작성한 포트폴리오입니다.
업무를 진행하면서 기능을 개선하거나 문제를 해결한 내용을 담았습니다.

※ 개인 프로젝트에 대한 포트폴리오는 별도로 작성해 게시할 예정입니다.

PROJECT

아하앱2021.11 - 2022.07 (사내 개발자 3人)

아하 서비스는 궁금한 점을 질문하면 검증된 전문가로 부터 답변을 받을 수 있는 보상형 Q&A 서비스입니다. 아하 서비스의 모바일 디바이스 점유율이 전체 중 60 퍼센트로, 비중이 높아 모바일 디바이스에 대한 어플리케이션 니즈 해결을 위해 시작하게된 프로젝트입니다.

최대 3명의 개발진으로 이루어진 TF가 만들어져 8개월 동안 여정을 함께했습니다. 이 프로젝트를 통해 React 라이브러리를 더 깊게 이해할 수 있던 계기가 되었습니다.

모바일 기기에서 실행되는 어플리케이션 특성 상, 성능 최적화가 매우 중요하기 때문에, 효율적인 컴포넌트 아키텍쳐 설계 및 최적화 작업이 필수적이었습니다. 이 과정에서 리액트에 대해 좀 더 알아갈 수 있어 흥미로운 프로젝트였습니다.

앱 출시 후 양대 마켓 무료 인기앱 2위 달성했으며, 현재 대대적인 마케팅을 통한 홍보를 진행 도중에 있습니다.

주요 기능

아하 서비스 전 기능

URL

기술 스택

React-Native

NextJS

React-Query

Redux

NativeBase

Sentry

포트폴리오 사이트2022.08 - 2022.08 (1人)

포트폴리오 용도로 제작한 웹사이트입니다.
지금 보고 있는 바로 이 웹사이트에 해당합니다.

Framer 라이브러리를 사용해 손쉽게 컴포넌트 단위로 애니메이션을 적용할 수 있었고, 이를 통해 높은 퀄리티의 사용자 인터렉션을 제공할 수 있어 재미있는 경험이었습니다.

Github Action을 통한 S3 배포 및 CloudFront Invalidation을 통해 자동화 배포를 구현했으며, Route53을 통해 도메인을 할당 받아, 보고 계시는 사이트를 여러분들께 서빙할 수 있었습니다.

주요 기능

포트폴리오

URL

https://github.com/lucas0530/soul-landing-profile-page

기술 스택

NextJS

Framer

Emotion

AWS

Dame Da Ne meme generator2020.10 - 2020.10 (1人)

전세계적으로 유행중인 다메다메 밈(Dame Da Ne meme)을 이미지 한장을 통해 원버튼으로 만들 수 있도록 하여, 수 많은 분들에게 사랑을 받을 수 있었던 개인 프로젝트입니다.
딥페이크 API를 활용해 정적인 이미지가 다메다메 밈 원 동영상처럼 움직일 수 있도록 하였습니다.
또한, i18n을 통해 외국인도 쉽게 이용하실 수 있도록 개발하였습니다.

GPU 연산을 필요로 하는 딥페이크 API 특성상, 동시 접속자가 일정 이상 모이게 되었을 때 서버의 성능이 느려지는 것을 방지하기 위해, AWS의 Simple Queue Service(SQS)를 적극 활용하였습니다.

많게는 하루에 700명 이상의 사용자와 1700번의 이상의 페이지뷰를 기록했으며, 평균 세션 시간 9분을 기록했습니다.
평균 세션 시간을 이용해 카카오 애드핏을 활용, 많게는 하루에 5만번 이상의 광고요청수를 기록했습니다.

최종적으로는 기업의 도움을 받아, 부담됐던 서버비를 줄일 수 있게 되었습니다.

주요 기능

다메다메 밈 제작

URL

초등학생 유투버가 녹화한 동작 영상 #1

기술 스택

NextJS

Koa

Socket.IO

SQS

S3

EC2

Behavior Monitoring2019.05 - 2019.11 (1人)

경쟁력이 떨어지는 기존 자사 제품의 UI를 대체하기 위해 BootStrap Template에 기반에 새롭게 작성한 웹 애플리케이션입니다.
해당 웹 애플리케이션은 Agent Driver가 설치된 OS의 파일, 프로세스, 네트워크에 대한 모든 생성 및 변경, 요청 등의 액션을 수집하고, 이를 토대로 의심 행동을 나타내어주는 기능을 제공합니다.

웹 애플리케이션 개발을 배우기 시작하면서 초기에 진행된 프로젝트로, 당시 BootStrap Template 저작권을 구매하여 MPA 기반의 웹 애플리케이션을 설계했습니다.

당시 PHP로 서비스되던 웹 애플리케이션의 경우 블로킹 I/O로 인해 UX에 치명적이었고, 이를 해결하기 위해 기존 쿼리를 수행하던 PHP 코드를 NodeJS 코드로 마이그레이션을 진행하면서 백엔드 개발 또한 함께 진행하였습니다.

실제로 개발된 웹 애플리케이션이 기관에 납품되는 등 실적을 얻을 수 있던 프로젝트였습니다.

주요 기능

내부자에 의한 정보유출 행위 및 외부 침입자의 해킹 행위에 대한 모니터링

기술 스택

JQuery

Express

CAREER

토스뱅크

2023.11 -

토스뱅크는 2021년 12월 출범부터 지금까지 가파르게 성장하여 800만이상의 고객수를 보유하고 있는제1금융 인터넷전문은행입니다.

프론트엔드 포지션으로 목돈 굴리기 서비스의 신규 개발 및 유지보수를 담당하고 있습니다.

▎ 목돈 굴리기 서비스 개발

2023.11 -

• 현재 온보딩 과정을 수행하고 있습니다.

리디 (리디북스)

2023.02 - 2023.11

리디 (리디북스)는 웹툰, 웹소설, 만화, 전자책 등을 서비스하는 콘텐츠 플랫폼입니다.
2,200만 이상의 월간활성사용자수(MAU)를 보유하고 있습니다.

기본적으로는 프론트엔드 포지션으로 리디 전체 서비스의 신규 개발 및 유지보수를 담당하고 있습니다.

▎ 배송지 입력 개발

2023.07 - 2023.09

• 리디의 "돌아온 대국민 도서 지원 프로젝트"은 전자책 + 리디페이퍼 기기의 결합 상품 프로모션으로 런칭 3일 만에 리디페이퍼 재고가 전부 소진될 정도로 인기가 많은 이벤트임
• 본 프로젝트는 해당 이벤트를 포함하여 기기 상품을 배송하기 위해, 사용자의 배송지 정보를 입력받는 기능 개발을 포함하고 있음
• 배포 전략으로 본 기능 프로덕션 배포 이후, LaunchDarkly를 통한 Feature-Flag 관리를 통해, 프로덕션 환경에서 Internal IP를 대상으로 한 라이브 테스트 진행 예정
• 위의 배포 전략을 확보하기 위해 Trunk-Based Development 전략이 선 수행되었음

▎ 상수리나무 아래 시즌3 프로모션 퀴즈 페이지 개발

2023.07 - 2023.07

• 상수리나무 아래는 리디의 메인 IP로서 틱톡 챌린지 7일 만에 3만 5천개의 동영상, 누적 조회수 60억을 돌파한 글로벌 인기 웹툰임
• 본 프로젝트는 해당 웹툰의 시즌3 연재를 기념하여 마케팅을 목적으로 개발이 진행되었으며, 마케팅 목적에 걸맞게 소셜 공유, 오픈 그래프 메타 데이터, canvas를 통한 결과 콘텐츠 렌더링 등 다양한 기능 개발이 포함되어 있음
• 프로모션 페이지 런칭 1일차에 신규 유저 6,500명 및 트위터 공유 1,000회를 기록하며 마켓팅에 있어 주요한 전략으로 자리매김함
• 배포는 Netlify로 이루어졌으며 Netlify Edge Function의 Default AWS Region이 us-east-1임에 따라, SSR Latency를 줄이기 위해 한국과 물리적 거리가 가장 가까운 Region으로 변경 진행
• 콘텐츠가 많은 프로모션 퀴즈 페이지 특성 상, 콘텐츠 다운로드 속도를 높이기 위해 Cloudflare 도입 및 OptimizedCache 처리 진행
• Zero Layout Shift를 위한 Next Font Optimization, 이미지 사이즈 최적화를 위한 Next/Image 사용 등, NextJS13의 기능을 적극 활용하였음

▎ 신간 페이지 리팩토링

2023.06 - 2023.06

• 리디의 웹사이트는 과거 PHP로 개발되어 있었으며, 생산성 증대 및 기술 스택 통일화를 위해 NextJS로의 리팩토링을 진행 중에 있음
• 해당 프로젝트는 이에 대한 일환으로서, EKS의 Canary 배포 전략을 통해 점진적인 프로덕션 반영을 기대함

▎ 키워드 파인더 웹뷰 개발

2023.03 - 2023.04

• 리디는 키워드에 따라 도서 및 웹툰 리스트를 필터링하여 보여주는 키워드 파인더 기능을 웹에서 서비스하고 있었으나 다수의 사용자가 모바일 사용자인 리디 서비스 특성 상 키워드 파인더의 앱 내 지원 요청이 누적 114건 인입됨
• gql-codegen을 통해 생성된 react-query API를 사용해 데이터를 패칭하였으며, 이전 회사에서 react-native를 다루었던 경험을 살려, QA 기간 중 주도적인 커뮤니케이션을 장려함
• 신규 기능 런칭 이후 해당 기능을 사용하는 페이지에 대한 월 평균 트래픽이 32배 상승 (16만 -> 550만)

(주) 더코퍼레이션 (아하)

2021.07 - 2022.12

(주) 더코퍼레이션은 아하 서비스를 개발 공급하고 있는 회사이며, 아하는 궁금한 점을 질문하면 검증된 전문가로 부터 답변을 받을 수 있는 보상형 Q&A 서비스입니다. 다양한 분야에 신뢰성과 전문성이 높은 지식DB 보유를 통한 높은 검색 유입량으로 400만 이상의 월간활성사용자수(MAU)와 2,500만 이상의 월 평균 페이지 수(PV)를 보유하고 있습니다.

기본적으로는 프론트엔드 포지션으로 아하 서비스의 신규 개발을 맡았으며,스타트업 기업답게 중요도가 매우 높은 코어한 기능의 개발을 맡아 담당 및 진행했습니다.

▎ 아하 서비스 웹 마이그레이션

2022.10 -

• 아하 서비스가 지속적으로 성장함에 따라 유저의 트래픽을 SSR로 감당하기 힘들어져, 기존 레거시 코드를 제거하고 효율적으로 캐싱 기능을 활용할 수 있도록 웹 서비스 마이그레이션 진행 중
• ECS 환경에서 동작하는 서비스를 CloudFront에 배포 진행해, 서버로 가중되는 트래픽을 최소화
• Style-Component를 기반으로한 컴포넌트 주도 개발(CDD)을 통해 StoryBook을 적극적으로 활용하여 디자이너 분과 상호 교류를 활발하게 진행

▎ 아하 앱 개발 (React)

2021.11 - 2022.07

• 일일 평균적으로 모바일 기기를 통해 접속하는 사용자가 전체 중 60 퍼센트로, 앱에 대한 니즈를 해결하기 위해 앱 개발을 진행함
• React-Native를 사용한 네이티브 개발 특성 상, 최적의 성능을 기대하기 위해 컴포넌트 아키텍쳐 설계 및 React 라이브러리 이해도를 바탕으로 한 성능 개선 작업 진행
• 앱 출시 후 양대 마켓 무료 인기앱 2위 달성했으며, 대대적인 마케팅으로 인한 고객 확보로 현재 진행 중임

▎ 전문가 상담 서비스 개발

2021.09 - 2021.10

• SendBird API를 기반으로 하는 아하 커넥츠 코어 기능(채팅 서비스) 개발
• 기존에 외주사로 부터 제공받아 동작하던 Legacy 코드를 전부 걷어내고 새로이 개발 진행
• 기존에 개발을 진행함에 있어 어려움이 있었던 기능들에 대한 개발 및 확장 진행(Delivery receipt, UX 향상 등)
• 개발 이후로 전과 대비해 고객 니즈 사항이 대부분 수렴되어 개선 요구 CS가 줄어듦

▎ 1:1 전문가 상담 플랫폼, 아하 커넥츠 기능 개발

2021.07 - 2021.12

• 아하 커넥츠 서비스의 쿠폰 기능, 메인 배너 캐러셀 및 검색 기능 등 개발 진행
• 개발 담당한 쿠폰 기능 등을 통한 마케팅 진행으로 고객 확보

(주) 플레이오토

2019.11 - 2021.07

국내 최초, 국내 최다 쇼핑몰 통합 관리 솔루션을 서비스하는 플랫폼 회사입니다.

기본적으로는 풀스택 포지션으로 차세대 솔루션 및 백오피스 개발을 맡았으며, 주 사용 기술스택 전환을 위해 코드 마이그레이션 프로젝트를 함께 운영했습니다.

▎ 쇼핑몰 통합 관리 솔루션 코드 마이그레이션

2021.04 - 2021.07

• 기존 솔루션 코드는 AngularJS + Legacy Code로 작성되어 있어 유지보수에 한계가 있었음
• ReactJS 라이브러리를 활용한 코드 마이그레이션 작업을 총괄하여 진행

▎ 스와치 그룹 SAP 개발 진행

2021.01 - 2021.04

• 스와치 그룹 ASP 주문 데이터 연동 및 쇼핑몰 주문 건 자동 출고 및 재고 처리 진행
• 자동 배포 구축을 위해 Github Action, Amazon ECS, Amazon ECR 사용
• 안정적인 서비스의 공급으로 고객사 확보에 큰 역할을 수행함

▎ (주)플레이오토 공식 홈페이지 교육 기능 개발

2020.12 - 2021.01

• (주)플레이오토의 솔루션 교육을 진행 및 관리하기 위해 개발됨
• 백오피스를 통한 솔루션 교육 스케쥴 등록 가능, 고객 예약 시스템 구현
• 특정 케이스에 대해 Amazon Lambda Crontab을 통해 Customer를 대상으로 교육 안내 메일 및 문자 발송 진행
• 개발 이후로 전과 대비해 오프라인 및 온라인 교육 예약 신청자가 두 배 가까이 증가

▎ 백오피스 작업리스트 개발

2020.01 - 2020.09

• Jira Cloud Platform REST API를 사용하여 백오피스와 연동 진행
• CS, QA, 기획의 개발 현황 공유를 위해 진행되었으며, 지라 담당자, 상태 변경 등 다양한 상호작용을 지원함
• 매일 새벽 Jira에 올라가 있는 이슈 및 프로젝트 리스트를 Amazon Lambda Crontab을 이용해 DB와 동기화 진행
• 개발 이후로 전과 대비해 CS를 처리해주시는 분들과 기획자 분들이 백오피스에서 지라 데이터와 접근 가능해져 업무가 매우 수월해짐

▎ 쇼핑몰 통합 관리 솔루션 통계 기능 개발

2019.12 - 2020.01

• mysql procedure를 활용해 통계 REST API를 개발하고, 프론트 단에서 C3 Chart를 활용해 통계 UI 제공
• 각 업체에게 상품별, 쇼핑몰별, 기초상품별 등 통계 기능을 제공하여, 고객 니즈 충족 및 사용자 편의성 제고를 도모함