Woojin | Front-end Dev.최우진
Front-end Dev.
안녕하세요, 프론트엔드 개발자 최우진 입니다.
현재 3년차 프론트엔드로 재직중이며, 다양한 사람과의 소통을 좋아합니다.
솔직하고 담백한 화법을 선호하며, 동료들과의 논의를 통해 하나의 목표를 이뤄 나가는 과정을 즐깁니다. 또한, 팀 개발자분들과 함께하는 리뷰 시간을 중요하게 생각합니다. 저는 이러한 다양한 소통의 과정에서 얻는 배움을 통해 성장해 나가고 있습니다.
아래의 내용은 업무 과정에서 경험한 Work Experience, 개인 프로젝트를 개발하고 기술을 학습하며 경험한 Other Experience 구성되어 있습니다.
페이민트 회사 페이지로 연결됩니다.
결제선생 공식 안내 웹사이트
26.02 ~ 26.03
기존 Vue 2 기반의 웹사이트를 Next.js 15 기반으로 전면 마이그레이션 하였습니다.
메타태그를 페이지별로 나누어 설정하고, 이러한 메타태그를 체계적으로 관리할 수 있는 구조가 필요했습니다. 따라서 미래의 기능 확장과 SEO 최적화를 위해 Next.js를 선택하여 마이그레이션을 진행하였습니다.
컴포넌트를 단일 책임 기준으로 작게 나누어 재사용성을 높였고, 프론트엔드 작업자 간의 협업이 훨씬 원활해졌습니다. 이로 인해 전체 개발 기간도 약 1주 단축할 수 있었습니다.
기존 수동 배포 방식에서 GitLab Runner와 Docker 기반의 CI/CD 배포 환경을 활용하여 작업했으며, 수동 배포로 인한 반복 작업과 오류를 줄일 수 있었습니다.
Styled-components를 활용해 컴포넌트 내부에서 버튼, 텍스트, 섹션 등 엘리먼트의 시멘틱한 역할을 분리하였으며, 그 결과로 협업 시 코드 이해도와 유지보수성을 향상 시킬 수 있었습니다.
상시
GitLab 파이프라인을 이용하여 CI/CD를 구현하기 위해 AWS CloudFront와 S3를 활용하여 빠르게 배포할 수 있도록 설정했습니다. Git에 push가 발생하면 파이프라인에 커밋이 축적되고, 해당 커밋에 대한 배포는 수동 승인(Manual Trigger) 방식으로 구성해, 배포 시작 버튼을 눌러야 실제 배포가 진행되도록 설정했습니다.
사수가 없는 환경에서 Admin 2.0을 신규 구축하고 개발 리드를 담당하였으며, 코드의 유지보수성과 확장성을 고려하여 폴더 구조를 체계적으로 분류하고 정의하였습니다.
browser tab 과 같은 UI 를 구현하기 위해 vue-router-tab 라이브러리를 활용 및 커스터마이징하여 기획과 사용자 니즈를 효과적으로 반영하여 개발했습니다.
UI 요소들의 컴포넌트화에 집중해서 개발하였으며, 주요 기능별로 폴더를 나누어 컴포넌트, 유틸함수, 스타일 파일 등을 별도의 디렉토리로 정리하였습니다. 이를 통해 코드의 재사용 및 가독성을 높이고, 협업과 유지보수 시 개발 처리 속도를 향상시켰습니다.
1.0 ver.과 2.0 ver. 간의 페이지 이동시 sessionStorage 및 postMessage 활용으로 로그인 정보 저장, 재로그인 과정을 생략처리하여 API 중복 호출 방지 및 업무자의 작업 동시성을 보장하였습니다.
어드민 메뉴마다 연동되어 있는 목록 조회 API와 엑셀 다운로드 목록 조회 API를 사용자의 동작 순간에 맞춰 분류하여 연동함으로써, API 과부하를 방지하고 효율성을 높였습니다.
API의 error response를 노출하는 별도의 팝업을 제작하였습니다. 정상 응답코드를 global 파일에 전역변수로 명시 후 응답 코드가 정상 응답이 아닌경우에는 에러 팝업을 노출하도록 구성하였습니다. 이 작업 이후에 직관적으로 오류를 파악 할 수 있엇으며, 에러 처리 속도를 향상 시킬 수 있었습니다.
2024.03 ~ 2024.07
관리자의 서비스 심사 과정을 OCR 인식 및 대행사 통신 연결(NICE, KSNET)을 통해 자동화하여 심사 승인 업무처리 속도를 증가시켰습니다. 이를 통해 기존 업무 인력소모를 절반으로 감소시키고, 업무 처리 효율을 약150% 향상시켰습니다.
2023.01
카드사별 장애 메시지를 관리할 수 있는 페이지를 개발했습니다. 이 페이지는 결제수단별로 탭을 나누어 각 카드사의 '장애/업데이트' 안내 메시지를 설정할 수 있는 기능을 제공합니다. 관리자는 메시지의 기간, 타이틀, 내용을 설정 할 수 있으며, 등록 시 AWS SDK를 활용하여 S3 버킷에 JSON 데이터를 업데이트하도록 구현했습니다. 서비스 화면에서는 고객이 페이지에 진입 시 S3 데이터를 조회해 앱카드 비활성화 및 에러 메시지가 노출되도록 구현했습니다.
2021.12 ~ 2022.03
사업장의 서비스 개시의 수동 심사 처리를 위한 페이지를 개발하였습니다. 서비스 개시, 서류 보완, 심사 반려, 심사건 삭제 등의 프로세스를 지원하며, 각 프로세스마다 컴포넌트와 로직을 분리하여 관리와 유지보수가 용이하도록 설계하였습니다.
심사제출서류 이미지를 확인 할 수 있는 이미지 뷰어 팝업을 개발하였습니다. 디자인 UI를 수용하기 위해 별도의 컴포넌트로 커스텀 제작했으며, AWS S3 URL 을 받아 이미지를 노출시키고 이미지의 확대, 축소, 회전, 다운로드의 기능을 제공하도록 개발하였습니다.
Slack API를 연동하여 어드민 심사자가 업무 처리를 완료하면 Slack 메시지가 자동 발송되도록 구현하였습니다. 기존에 발생하던 업무 중복 처리 이슈를 해소하여 심사팀 간 소통을 원활하게 하고, 업무 효율성을 높이는 데 기여하였습니다.
2021.12 ~ 2022.03
기존에는 없던 CS상담(ARS) 관리 페이지를 신규 개발하였습니다. 고객에게 전화걸기 및 끊기, 상담중 페이지 이탈 방지 로직으로 중복 상담 방지, 관리자를 댓글타입으로 멘션하여 상담 히스토리 관리 등의 UI/UX 개발을 작업하였으며, 이로인해 CS 업무 효율을 증가시켰습니다.
상시
기존 1.0 버전에서는 주로 유지보수 업무를 담당하며, 안정적인 운영을 위한 문제 해결과 개선 작업을 수행하였습니다.
서비스 로그인 페이지로 연결됩니다.
상시
반응형 및 웹뷰 화면 설계를 통해 사용자에게 최적화된 경험을 제공하였습니다. CSS Media Queries를 활용하여 반응형 레이아웃을 구현했으며, 웹뷰 또는 모바일 환경에서 로그인 과정 없이 다이렉트로 접근하는 페이지의 경우, 별도의 레이아웃으로 분기 처리하여 사용 환경에 적합한 화면이 진입 시점부터 노출되도록 작업했습니다.
기존 비밀번호 유효성 체크는 연약하다고 판단되어, 보안 강화 및 개선 작업을 진행했습니다. 비밀번호 유효성 체크에 다양한 문자 타입을 요구하도록 로직을 개선하고, 사용자의 개인정보화면 진입 시 비밀번호를 한 번 더 입력해야 하는 브레이크 페이지를 추가하였습니다. 이 작업으로 웹 취약점을 효과적으로 개선할 수 있었습니다.
사용자 행동 데이터를 모니터링하기 위해 Google Analytics(GA) 태그를 추가하였습니다. 주요 페이지에 GA 태그를 삽입하여 사용자의 행동 데이터를 수집할 수 있도록 구현하였으며, 이를 통해 마케팅 전략 수립에 활용할 수 있는 데이터를 확보했습니다.
2024.12
CS 상담 시스템을 기존 카카오챗에서 채널톡으로 전환하였습니다. 채널톡 API와 자사 API를 Vue의 CSR 방식에 맞춰 연동하며, 'Boot', 'Update', '신규 메시지 감지' 등 주요 이벤트를 단일 호출로 처리하여 중복 호출을 방지했습니다. 1주일의 개발 기간 동안 효율적으로 작업하여 CS 상담 환경을 효과적으로 개선했습니다.
2024.03 ~ 2024.07
사용자의 서비스 이용 등록 및 심사요청 프로세스를 리뉴얼하는 작업으로 이전보다 간소화 된 경험을 제공하였습니다. 기존에는 사용자가 필요서류 이미지를 모두 업로드하고 내용을 직접 입력해야 했지만, OCR 기술과 휴대폰 본인 확인 도입 및 대행사 API 연결 과정으로 등록 단계를 줄이고 프로세스를 자동화하였습니다. 이를 통해 고객의 서비스 등록 이탈률을 24%에서 2.8%로 크게 감소시켰습니다.
3가지 타입의 등록 프로세스와 뒤로가기 기능이 요구되어 컴포넌트 전역에서 상태 관리를 구현해야 했습니다. 이를 위해
상시
다양한 제휴 간편결제 서비스 등록 페이지를 개발하였습니다. '우리카드 가맹점 신청', '카카오페이 결제수단 신청', '케이뱅크 간편계좌이체 결제수단 신청' 등 여러 간편결제 서비스와의 제휴 페이지 작업을 진행했습니다. 각 제휴 서비스의 신속한 출시 일정에 맞춰 강점인 빠른 작업 속도로 페이지당 평균 1.5일 만에 완료하며, 개발 일정 단축에 기여했습니다.
서비스 체험 링크로 연결됩니다.
상시
유지보수에 중점을 두고 기존 프로세스와 UI를 관리하고, 시스템의 기능을 최신화하였습니다.
모바일에 최적화된 반응형 레이아웃을 구현하고, 디바이스 종류에 따라 결제 앱 목록을 동적으로 조정하여 UI/UX를 제공했습니다. 이를 통해 각 디바이스 환경에서의 일관성을 유지했습니다.
'KB Pay 알림결제 서비스 신청' 페이지를 제작하였습니다. 고객이 페이앱 푸시알림을 받고 바로 결제할 수 있도록 하는 서비스로, 서비스 안내, 정보 입력, 약관 동의, 신청완료로 구성된 짧은 프로세스로 구현하여 미납률 감소 효과를 이뤘습니다.
2024.11 ~ 진행중
현재 Vue.js 프로젝트를 Next.js 마이그레이션하는 작업을 진행 중입니다. 최종 목표는 페이민트의 모든 프론트엔드 프로젝트를 전환하는 것이며, 현재는 청구서 프로젝트를 우선적으로 진행하고 있습니다. Typescript, Jotai, styled-components, Tailwind, Husky, eslint, aws-sdk 등을 스택으로 선정했으며, 폴더 구조와 커밋 스타일 컨벤션을 설정하여 초기 구축을 완료했습니다. 현재는 개발 작업을 진행 중이며, 최대한 atomic 컴포넌트화를 지향하여 유지보수성과 재사용성을 높일 수 있도록 작업하고 있습니다.
서비스 안내 랜딩으로 연결됩니다.
2023.08 ~ 2023.09
출결선생 서비스의 출석체크, 출결조회 페이지를 개발하였습니다.
리스트형 UI를 통해 학생들의 출석 상태를 관리하며, 각 리스트의 '등원, 하원, 결석, 철회'의 동작은 컴포넌트 간의 상호작용 및 데이터 흐름을 고려하여 독립적으로 처리되도록 개발하였습니다.
'출결선생' 런칭 홍보 페이지를 개발하였습니다. 네컷만화 형식으로 구성 된 페이지며 단일 컴포넌트로 각 회차를 동적 라우팅으로 구분하여 prev/next 버튼을 통한 간편한 회차 탐색이 되도록 개발하였습니다.
2024.01
HTML, CSS, 및 Vanilla JS를 사용하여 페이지를 제작하였습니다.
'Spline 3D'와 'Lottie' 이미지를 JavaScript로 연동해 인터랙티브한 UI 페이지를 구현했습니다.
2일이라는 제한된 기한 내에 효율적으로 페이지를 완성하여 높은 품질의 결과물을 제공했습니다.
상시
주로 신규 서비스 및 이벤트 제공 페이지의 추가 개발을 담당하여 작업했습니다.
메시지 체험 페이지로 연결됩니다.
2024.05
Next.js, Typescript, AWS SNS, vercel 을 활용하여 제작 및 배포하였습니다.
반응형으로 제작하여 모바일과 PC 디바이스 간의 UI 차이를 두고 제작하였습니다.
메세지는 AWS 사용이슈로 국제발신 메시지로 발송됩니다.
리딩오션 프로그램 소개 블로그로 연결됩니다.
2022.12
협업 개발자와 함께 코드 컨벤션을 정하고 준수하며 개발을 진행하였습니다.
독서 미션 수행, 포인트 획득, 꾸미기 아이템 구매 및 사용 등의 화면들을 제작하였으며, 컴포넌트 단위로 분류하여 개발하였습니다.
고객사의 개발표준 및 개발환경을 준수하고, 요청 기한에 맞춰 프로젝트 개발을 완성했습니다.
본 페이지는 상업적 목적이 아닌
비영리적 개인 포트폴리오용으로 만들어진 사이트입니다.
본 페이지는 React, Next.js, Vercel 을 이용해서 제작하였습니다.
woojin choi ⓒ 2024