미리보기

주식회사 블라스트 - 프론트엔드 개발자

HACCP - 공장 인증 어플리케이션 제작
(2024.08 ~ )

• 리액트네이티브 Expo를 사용해 공장 인증 어플리케이션 제작

상담 녹음 및 명함 저장 웹/앱플리케이션 제작
(2024.08 ~)

• React Ionic을 사용하여 웹/앱 개발

전기차 충전 서비스 어플리케이션 제작
(2024.06 ~ 2024.08)

• 리액트네이티브를 활용한 하이브리드 앱 개발

튜터링 - 프론트엔드 개발자

QA 프로세스 개선 및 자동화
(2022.10 - 2022.12)

• 테스트 자동화 프레임워크 도입 및 구축:

  • Selenium, Cypress, Playwright 등 다양한 테스트 자동화 프레임워크를 분석하고 도입하여 QA 프로세스를 자동화.

  • 테스트 커버리지를 40% 향상

화상 서비스 퍼블리싱
(2022.10 - 2022.12)

• 재사용 가능한 React 컴포넌트 설계 및 개발:

  • Button, Modal 등 재사용 가능한 React 컴포넌트를 설계 및 개발하여, UI 개발 시간 단축.

  • WCAG 접근성 가이드라인을 준수하여, 웹 접근성 점수를 15% 개선.

• 협업 도구 활용:

  • Jira를 사용하여 작업 관리와 팀 협업을 효율화하고, 프로젝트 일정 준수율 향상.

Admin 홈페이지 개편
(2022.09 - 2022.10)

• 관리자 페이지 텍스트 콘텐츠 최적화:

  • 텍스트 콘텐츠를 최적화하여 페이지 로딩 시간을 15% 단축하고, 사용자 만족도를 높임.

• 푸터 영역 접이식(folding) UI 구현:

  • 관리자 페이지에 접이식 UI를 구현하여, 페이지의 사용자 인터페이스를 개선하고, 사용 편의성 향상.

Nexon Networks - 라이브 QA (마비노기 영웅전)

대만 라이브 QA 담당
(2017.10 - 2019.01)

• 업데이트 검수 및 배포 지원:

  • 대만 서비스의 주요 업데이트를 검수하고, 성공적인 배포를 지원하여 서비스 안정성을 유지.

• 신속한 문제 대응:

  • 문제 발생 시 즉각적인 대응과 해결책을 제시하여, 서비스 중단 시간을 20% 단축.

• 안정적 서비스 운영 지원:

  • 사용자 피드백을 기반으로 문제를 분석하고 해결하여, 사용자 만족도를 15% 향상.

한국 라이브 QA 담당
(2015.09 - 2017.10)

• 업데이트 검수 및 배포 지원:

  • 한국 서비스 업데이트를 검수하고, 원활한 배포를 지원하여, 서비스 중단 없이 성공적인 업데이트를 달성.

• 동향 파악 및 밸런스 테스팅:

  • 게임 내 주요 변경 사항에 대한 동향을 파악하고, 밸런스 테스트를 수행하여, 게임 플레이의 균형을 유지.

• 라이브 서비스 운영 경험:

  • 라이브 서비스 운영 경험을 바탕으로, 안정적이고 지속적인 서비스 제공을 지원.

프로젝트 소개:

에너캠프는 스마트 에너지 관리 솔루션을 제공하는 혁신적인 기업으로,
주로 배터리 관리 및 충전 기술을 중심으로 전기차 충전 관리 어플리케이션 개발에 참여하였습니다.

팀 구성 및 역할:

• 프론트엔드 개발자 1인

구현 기능 및 성과:

• 전기차 충전소 마커 표시 최적화

  • 지연 문제 해결을 위한 웹 지도 서비스 도입:
    네이티브 지도에서의 느린 성능 문제를 해결하기 위해, AWS Amplify를 이용하여 웹 기반 지도 서비스를 구축하고 이를 웹뷰(WebView)로 연동하는 방식을 채택했습니다.

  • 지도 로딩 시간 최적화:
    AWS Amplify를 통해 웹 지도 서버를 호스팅하고, 해당 웹 페이지를 네이티브 앱의 웹뷰에서 로드하여 지도의 렌더링 성능을 향상시켰습니다. 이 접근 방식을 통해 지도 로딩 시간을 6분에서 1분으로 단축하여, 사용자에게 훨씬 빠르고 원활한 경험을 제공했습니다.

  • 웹뷰 통신을 통한 데이터 연동:
    웹 지도 페이지와 네이티브 앱 간의 통신을 위해 웹뷰 브릿지(WebView Bridge) 기술을 활용했습니다. 이를 통해 사용자는 네이티브 앱 내에서 직접적인 상호작용이 가능하며, 마커 클릭 시 상세 정보나 추가 기능을 제공하는 등, 웹 지도 서비스와 네이티브 앱 사이의 원활한 데이터 연동을 구현했습니다.

• 디바이스 언어 감지 및 자동 반영

  • 애플리케이션이 초기화될 때, 디바이스의 언어 설정을 감지하여 i18next에서 해당 언어의 번역 리소스를 자동으로 로드하도록 구현했습니다.

  • 이를 통해 사용자가 디바이스에서 언어를 변경하면, 애플리케이션 내에서도 해당 변경 사항이 즉시 반영되어 일관된 사용자 경험을 제공할 수 있었습니다.

기술 스택:

• Frontend: React-native, TypeScript, SCSS, Zustand AWS Amplify

프로젝트 소개:
투두리스트와 함께 성장하는 나만의 펫을 키우는 앱입니다. 할 일을 완료하면 펫이 자라나고, 이름도 직접 지을 수 있습니다. 투두리스트, 스케줄, 루틴을 한 곳에서 관리하며, 원하는 일정만 캘린더에 표시할 수 있습니다. 친구와 소통하고, 펫 도감을 모으며, 다양한 업적을 달성하는 재미도 있습니다. 중요한 일정은 알림으로 받아볼 수 있어 효율적으로 하루를 관리할 수 있습니다.

팀 구성 및 역할:

• 프론트엔드 개발자 1인

구현 기능 및 성과:

• 투두 리스트 및 스케쥴 관리

  • 라벨 커스터마이징 및 텍스트 추가:

    • 프로젝트 요구에 따라 react-native-calendars 라이브러리를 오버라이딩하여, 특정 날짜의 기간에 라벨을 표시하는 기능을 확장했습니다.

    • 기존의 단순 라벨 표시 기능을 개선하여, 라벨 안에 텍스트를 추가할 수 있는 기능을 구현했습니다. 이를 통해 사용자가 선택한 기간 동안 특정 이벤트나 정보를 라벨 내에 직관적으로 표시할 수 있도록 했습니다.

  • 동일 날짜에 다중 라벨 지원 및 정렬 알고리즘 구현:

    • 사용자가 동일한 날짜에 여러 개의 라벨을 생성할 수 있도록 기능을 확장했습니다.

    • 라벨의 우선순위를 이벤트 중요도와 시작 시간에 따라 정렬하는 알고리즘을 도입했습니다. 이 알고리즘은 중요도 점수와 시간을 기반으로 오름차순으로 라벨을 정렬하여, 중요한 이벤트가 가장 먼저 표시되도록 했습니다. 시간이 동일한 경우, 중요도가 높은 라벨이 우선 표시되도록 최적화했습니다.

    • 이를 통해 복잡한 일정에서도 사용자에게 중요한 정보를 효율적으로 제공할 수 있었습니다.

  • 라이브러리 내부 구조 및 스타일 커스터마이징:

    • react-native-calendars의 내부 구조를 수정하여, 추가된 텍스트와 다중 라벨을 효율적으로 렌더링하도록 최적화했습니다.

    • 각 라벨의 스타일을 프로젝트의 디자인 가이드라인에 맞추어 재정의하고, 라벨 간의 간격 및 배치를 조정하여 시각적인 일관성과 가독성을 높였습니다.

    
    

• 펫 성장 및 관리

  • 사용자 행동 데이터 기반의 지속적 성장 시스템 구현:

    • React Query 활용:
      사용자의 행동 데이터를 실시간으로 수집하고, 이를 기반으로 펫의 성장을 반영하는 시스템을 설계 및 구현했습니다.

    • 데이터 관리 최적화:
      React Query의 데이터 페칭 및 캐싱 기능을 활용하여, 사용자 활동에 따른 데이터를 효율적으로 관리했습니다. 이를 통해 서버 상태와 클라이언트 상태를 일관되게 유지하며, 사용자 경험을 최적화했습니다.

  • 업적 시스템 도입:

    • 참여도 향상:
      다양한 업적 달성을 통해 펫 성장을 유도하는 메커니즘을 도입하여, 사용자 참여도를 높였습니다.
      

• 알림 및 알람 기능

  • Firebase 연동을 통한 실시간 알림 시스템 구축:

    • FCM과 React 통합:
      Firebase Cloud Messaging(FCM)과 React를 연동하여 실시간 알림 시스템을 구축했습니다. 이를 통해 멀티 채널(푸시, 이메일 등) 알림 기능을 구현하였으며, 이로 인해 사용자 재방문율을 15% 상승시켰습니다.

  • 사용자 맞춤형 알림:
    React와 Firebase의 통합을 통해 사용자 맞춤형 알림을 다양한 채널(푸시, 이메일 등)로 전달하는 시스템을 구축했습니다. 이를 통해 사용자 참여도가 증가했습니다.
    

• Zustand를 활용한 상태 관리 및 퍼포먼스 최적화:

  • 경량화된 상태 관리:
    Zustand를 사용하여 일정과 라벨 관련 상태를 간결하게 관리하였습니다. 이로 인해 상태 변경에 따른 불필요한 리렌더링을 최소화하고, 빠르고 일관된 사용자 경험을 제공할 수 있었습니다.

  • 효율적인 성능 유지:
    특히, 다중 라벨이 동일한 날짜에 있는 경우에도 앱의 성능을 유지하며 효율적인 상태 관리를 구현했습니다. 이를 통해 복잡한 상황에서도 앱의 퍼포먼스를 최적화했습니다.

기술 스택:

• Frontend: React-native, SCSS, Zustand , AWS Amplify, Firebase Cloud Messaging(FCM)

• Additional Tools: Firebase (Real-time notifications), Git, GitHub for version control