미리보기

플릿 이심 App 제작

역할 및 성과:
• 데이터 기반 의사결정의 중요성과 사용자 중심 설계의 효과성 확인
• 사용자 중심 접근법의 기능 개선 및 실질적 효과 확인
• 애니메이션을 통한 사용자 이목 집중과 자연스러운 느낌 부여
• 사용자 편의성 증대
• 공통 컴포넌트 개선
• 플랫폼 별 기능 구현
• 다양한 라이브러리를 통한 사용자 경험 개선
• 개발 프로세스 및 팀 생산성 향상
• 체계적인 문서화와 이슈 프로세스 확립
• 분석을 통한 지속적인 서비스 개선 및 마케팅 전략 수립


iOS: https://apps.apple.com/app/id1669672934
Android: https://play.google.com/store/apps/details?id=com.flitmobile
Web: https://www.flitmobile.com/

Admin App 제작

역할 및 성과:
•데이터 시각화 및 업무 효율성 향상
•다양한 OS의 빌드 환경 구축
•휴먼 에러 발생률 감소
•다국어 작업

Tengo App 제작

역할 및 성과:
• 메인, 상품 페이지 UX/UI 개편
• 배송지 등록 및 결제 플로우 개편
• 레거시 코드 리팩토링 및 다양한 라이브러리 도입
• E2E 테스팅 도입 및 리그레션 이슈 대응

Tag & Tagger App 제작

역할 및 성과:
• 프로젝트 구조 설계
• 분석을 통한 서비스 개선 및 마케팅 전략 수립
• 다양한 라이브러리를 통한 사용자 경험 개선

다양한 웹 프로젝트 제작

역할 및 성과:
• 웹사이트 개발 및 유지보수

소개:

국내 여행자를 위한 eSIM 로밍 서비스

기간:
2023년 2월 - 현재

기술 스택:
React, React Native, TypeScript, Hook, Recoil, React Query, React Hook Form, React Native Reanimated, React Native Skia, Notifee, Firebase Cloud Messaging, Code Push, Fastlane, AppsFlyer, Datadog, Mixpanel, GitLab

역할 및 성과:

• 데이터 기반 의사결정의 중요성과 사용자 중심 설계의 효과성 확인

◦ 데이터독 RUM과 믹스패널을 통해 유저 이벤트를 분석하여 기대치 이하의 사용자 행동 패턴을 식별하고 가설을 수립하여 적용시켜, UX/UI 개편을 통해 사용자 목표 달성률을 25% 향상

◦ 어뷰징 케이스에 대한 정책 수립 및 대응 체계를 확립

• 사용자 중심 접근법의 기능 개선 및 실질적 효과 확인

◦ OS별, 버전별 맞춤 eSIM 설치 튜토리얼 개선으로 튜토리얼 이탈률 20% 감소

◦ 체크리스트 가이드 및 시각적 요소(Red dot, 애니메이션) 추가로 사용자 경험 개선으로 구매 고객 중 30%가 가이드 방문 및 여름 휴가 시즌 구매율 상승 대비 설치 관련 CS 인입률 7% 감소

• 애니메이션을 통한 사용자 이목 집중과 자연스러운 느낌 부여

◦ React Native Reanimated를 사용하여 사용자, 구매한 eSIM 상태에 따른 다양한 그래픽과 애니메이션 처리

◦ 애니메이션 처리 및 최적화를 통해 CPU Ticks를 최고 89.0 ticks/sec에서 현재 평균 58.3 ticks/sec로 34.5% 개선했으며, Slow Renders 비율을 5.93%에서 2.90%로 51.1% 개선

◦ 메인 페이지에 활성화된 eSIM이 없을 때, 툴팁 메시지 추가, eSIM 컴포넌트에 wiggle과 glow 애니메이션을 추가하여 사용자 클릭을 유도한 결과, 업데이트 이후 메인 페이지 - 상품 페이지로의 퍼널 값이 약 135.62% 증가

◦ 메인 페이지에서 구매한 eSIM의 상태에 따라 애니메이션을 통해 교체하여 변경 여부 및 필요한 가이드를 안내

◦ 메인, 스토어 페이지 하단의 검색 버튼 클릭 시 React Navigation의 Animation 비활성화와 투명한 배경색을 부여하여, 페이지 이동 느낌을 줄여 자연스러운 검색 페이지 이동

◦ React Native Gesture Handler의 GestureDecetor와 Fling()을 사용하여 버튼형 컴포넌트에 Press 이벤트가 감지되었을때, Scale 변화를 통해 사용자에게 직관적인 터치 피드백 제공

• 앱 성능 개선

◦ 성능 최적화 및 다양한 개선을 통해 앱 로딩 시간을 최대 1.91초에서 평균 1.28초로 33% 단축

◦ 앱 출시부터 현재까지 단 4건의 크래쉬만 발생하여 높은 안정성을 유지

• 사용자 편의성 증대

◦ 네트워크 연결 상태에 따라 오프라인 상태에서도 접근 가능한 eSIM 가이드 페이지로 리다이렉션하여, 사용자가 언제 어디서나 필요한 정보를 얻을 수 있도록 함.

◦ 사용자가 주문 성공, 실패 등의 중요한 작업을 완료했을 때 또는 사용자의 직접적인 피드백이 요구되는 시점에 햅틱 피드백을 제공. 이를 통해 사용자에게 직관적인 피드백을 제공하여 사용자 경험을 향상

• 공통 컴포넌트 개선

◦ getStatusBar(), getBottomSpace(), useSafeAreaInsets hook을 사용하여 플랫폼 별 동일한 스타일의 Blur Header 컴포넌트 구현

◦ 폰트 크기에 따라 일정한 fontLineHeight를 유지하며, 디바이스의 폰트 크기에 영향을 받지 않게 하기 위해 allowFontScaling을 비활성 시킨 Text 컴포넌트를 구현

• 플랫폼 별 기능 구현

◦ 안드로이드에서 hardwareBackPress 이벤트 리스너를 사용하여 앱의 종료를 원하지 않는 사용자에게 종료 알림 토스트 메시지를 제공. 이를 통해 실수로 앱을 종료하는 것을 방지

◦ eSIM 설치 가이드 페이지는 사용자의 디바이스 정보를 기반으로 해당 플랫폼에 맞는 가이드를 우선적으로 표시, 사용자의 편의성을 높임

◦ Header, 검색 페이지의 Blur 레이아웃을 안드로이드와 iOS의 Blur 렌더링 방식의 차이로 인하여 안드로이드에서는 비활성화

• 다양한 라이브러리를 통한 사용자 경험 개선

◦ Code Push를 이용한 실시간 배포 및 로딩 페이지를 구현하여 사용자 경험 개선

◦ Google, Apple, Kakao, Naver 멀티 SNS 로그인 구현

◦ React Native Webview, Toss Payments 결제창 연동을 통한 결제 과정 간소화

◦ Notifee와 Firebase Cloud Messaging(FCM)을 결합한 Push Notification

◦ OneLink와 React Navigation의 Linking 기능을 결합하여 앱 내외부에서의 원활한 사용자 경험을 제공

• 개발 프로세스 및 팀 생산성 향상

◦ TestFlight 및 Google Play Console을 활용한 베타 테스팅 및 배포 관리

◦ Build Scheme 별로 개발용 / 배포용 구분

◦ Fastlane match을 통한 Certificates 관리 및 배포 자동화 파이프라인 구축

◦ Slack hook과 Firebase의 App Distribution 연동으로 배포 상태 알림

◦ Semantic Versioning 기반으로 버전 관리 (Code Push를 통해 Patch 업데이트 후 내주 혹은 차주에 Minor 업데이트)

• 체계적인 문서화와 이슈 프로세스 확립

◦ OneLink 및 Mixpanel 이벤트 추적 템플릿을 Notion과 스프레드시트로 체계화하여 신규 입사자의 빠른 적응을 지원 및 마케터/PO의 이벤트 추가 프로세스 간소화

◦ Trello 도입을 통한 체계적인 이슈 및 기능 요청 관리 시스템 구축으로 팀 전반의 업무 효율성 향상

◦ 채널톡-슬랙 연동을 통한 CS 인입 내용 실시간 공유 및 Code Push를 활용한 신속한 이슈 해결 프로세스 구축

• 분석을 통한 지속적인 서비스 개선 및 마케팅 전략 수립

◦ AppsFlyer를 이용한 사용자 Screen, Event Tracking 및 Issue 추적

◦ Datadog RUM과 Mixpanel을 통해 Screen Tracking, User Event 등을 분석하여, 기대치보다 낮은 이벤트의 발생을 유도하기 위한 개선을 진행

◦ 수집된 정보로 개인의 이익을 위한 어뷰징 케이스에 대한 정책과 대응 방안을 마련

◦ 새로운 기술 도입 시 발생할 수 있는 어려움을 해결하기 위한 iOS: Universal Link Install, Android: 갤러리 이미지 기능 같은 OS 고유의 업데이트 내용을 자주 확인하고, 기술 변화에 따른 유연한 대처와 고객을 위한 지속적인 가이드 업데이트의 필요성을 인식

링크:

iOS - https://apps.apple.com/app/id1669672934

Android - https://play.google.com/store/apps/details?id=com.flitmobile

Web - https://flitmobile.com

소개:
Admin App

기간:
2022년 8월 - 현재

기술 스택:
React, Electron, Vite, Typescript, Hook, Recoil, React Query, React Hook Form, Electron Updater, React i18next, MUI (Material UI), GitLab

역할 및 성과:

• 1.0 (Desktop App) -> 2.0 (Web App)

◦ 엑셀로 관리되던 재고 및 고객 데이터를 Admin 구축을 통해 데이터 시각화, 관리 기능을 구현하여 업무 효율성을 대폭 향상

◦ Electron Updater를 통한 버전 체크 및 자동 업데이트 구현

◦ Window, Intel mac, Silicon mac 등 다양한 OS의 빌드 환경 구축

◦ Gitlab Runner를 통한 OS 별 배포 자동화와 Electron Updater을 통한 자동 업데이트로배포 및 업데이트 시간 대폭 단축

◦ React Hook Form을 통한 효율적인 Form 관리와 Yup을 사용한 Validation 처리로 휴먼 에러 발생률 30% 감소

◦ 글로벌 Agent로 인해 다국어를 위한 React i18next 적용

◦ MUI를 이용하여 디자인 통일과 작업 시간 단축

소개:

원하는 상품을 10분 내에 배달해주는 퀵커머스 서비스

기간:
2021년 10월 - 2022년 5월

기술 스택:
React, React Native, Typescript, Hook, Mobx, SWR, Styled Component, StyleSheet, Github, AirTable, AppsFlyer, Code Push, Detox

역할 및 성과:

• 유저들의 빠른 상품 탐색을 위한 메인, 상품 페이지 UX/UI 개편

◦ 기존 이미지 1개만 있던 Banner를 Carousel 배너로 변경

◦ 메인, 상품, 로그인, 마이 페이지 GNB 개편

◦ 상품 페이지의 카테고리 별 Header를 Sticky Banner로 변경하여 카테고리 별 접근을 더 쉽게 개편

• 배송지 등록 및 결제 플로우 개편

◦ Google Map library, Device Permissions 을 이용하여 유저의 현재 위치 검색 및 저장

◦ 아임포트 웹뷰를 통한 기존의 결제 방식에서 로컬 저장소, DB에 결제 수단 정보를 저장한 간편 결제 방식으로 수정

◦ 저장된 배달지의 좌표와 현재 위치의 좌표의 차이를 확인하여, 차이가 날 경우 상품 결제 페이지에서 사용자에게 알림

• 레거시 코드 리펙토링, 다양한 라이브러리 도입

◦ 기존 컴포넌트들의 Memoization 추가와 Naming 통일

◦ AirTable로 관리되는 상품들의 이미지를 효율적으로 불러오기 위한 이미지 컴포넌트 구현

◦ 당시 안드로이드에서 MAX_IMAGE_HEIGHT 이 넘어가는 고품질 세로형 이미지를 렌더링할때 에러가 발생하여, Dimension을 이용하여 사용자 기기의 너비에 이미지 Ratio를 조절하는 코드 추가

◦ Code Push를 이용한 앱 실시간 업데이트

◦ 빠른 feature 개발로 인한 잦은 리그레션 버그 발생으로 인해 일정 딜레이가 되어, wix/Detox를 이용한 E2E 테스팅 도입 및 리그레션 이슈 대응

• 분석을 통한 서비스 개선 및 마케팅 전략 수립

◦ Mixpanel를 통한 Screen Tracking, User Event 분석

◦ AppsFlyer를 이용한 사용자 Screen, Event Tracking 및 Issue 추적

[서비스 종료]
iOS: https://apps.apple.com/KR/app/id1575384444?mt=8
Android: https://play.google.com/store/apps/details?id=io.tengo
Web: https://barogohq.notion.site/Tengo-eb8842d7015d4e239ef0dd629d4959b1p

소개:

상품 판매, 취향 공유, 배우 포트폴리오 서비스를 제공하는 SNS 서비스

기간:

2020년 7월 - 2021년 10월

기술 스택:
React, React Native, Typescript, Hook, Redux, Redux thunk, Redux toolkit, Styled Component, FCM, Analytics, Dynamic Links, Code Push, Fastlane, SendBird, Github

역할 및 성과:

• 프로젝트 구조 설계

◦ A-Z 기획 및 아이디어 회의 참여

◦ API 연동, 페이지 작성, 컴포넌트 작성, 마크업

◦ 권한별 서비스 Stack 구성

• 분석을 통한 서비스 개선 및 마케팅 전략 수립

◦ Firebase Analytics을 이용한 사용자의 Screen Tracking

• 다양한 라이브러리를 통한 사용자 경험 개선

◦ FCM 연동을 통한 Push Notification 수신

◦ SendBird 기반의 채팅 기능 구현

◦ Fastlane을 통한 배포 자동화

◦ Firebase cloud message 푸시 알림 적용

◦ Firebase dynamic links를 이용한 딥링크 지원

◦ Firebase analytics를 이용한 유저별 액션 트래킹

◦ Firebase crashlytics를 이용한 장애 트래킹

[서비스 종료]

iOS - https://apple.co/3y0FGCK

Android - https://play.google.com/store/apps/details?id=com.tagntagger

Web - https://linktr.ee/tagnuniverse

기술 스택:
PHP(그누보드, 코드이그나이터), MySQL, NoSQL, Javascript, jQuery, CSS

역할 및 성과:
• 웹사이트 개발 및 유지보수