전병국Frontend Developer

FRONTEND DEVELOPER

브라우저에서 시작해
스토어에서 끝냅니다

React 단일 코드베이스를 Capacitor로 패키징해 웹과 Android·iOS에 출시하고 운영합니다. release 빌드에서만 나는 크래시, CI 코드 서명 실패처럼 웹 계층 밖의 문제를 추적해 해결해 왔습니다.

  • React
  • TypeScript
  • Capacitor
  • 앱 릴리즈
프로젝트 보기연락하기 →
프론트엔드 개발자 전병국 프로필 사진

ABOUT

문제를 재현할 수 있는 조건까지 좁힌 다음 고칩니다.

필름 카메라 서비스 Finders에서 웹과 Android·iOS 앱을 하나의 React 코드베이스로 만들어 출시하고 운영하고 있습니다. 화면을 만드는 일에서 시작했지만, 앱이 실제 기기에서 죽는 문제를 만나며 네이티브 빌드와 릴리즈 파이프라인까지 다루게 됐습니다.

release 빌드에서만 앱이 종료되는 크래시를 R8의 코드 제거까지 거슬러 올라가 ProGuard 규칙 한 줄로 해결했고, CI에서 한 번도 성공한 적 없던 iOS 아카이브를 서명 단계까지 계측해 통과시켰습니다. 두 경우 모두 에러 메시지가 가리킨 곳이 실제 원인이 아니었습니다.

그래서 추측보다 계측을 먼저 넣는 편입니다. 재현이 어려운 버그에는 회귀 테스트를 남기고, 다음 사람이 같은 벽에 부딪힐 지점에는 진단 로그를 지우지 않고 둡니다.

EXPERTISE

전문 분야와 사용 도구

  • 01

    크로스플랫폼 앱 출시

    하나의 React 코드베이스를 Capacitor로 감싸 웹과 Android·iOS에 동시에 냅니다. 네이티브 SDK 연동, 플랫폼별 분기, 스토어 심사 대응까지 다룹니다.

    React · Capacitor · Xcode · Gradle

  • 02

    인증과 네트워크 계층

    웹은 localStorage, 앱은 OS 보안 저장소로 토큰을 나눠 보관하고, 동시 401에서 refresh가 중복 실행되지 않도록 대기열을 직접 구현했습니다.

    TypeScript · Axios · TanStack Query · Zustand

  • 03

    릴리즈와 디버깅

    GitHub Actions로 AAB·IPA 산출물을 자동 생성하고, release 빌드에서만 나는 크래시를 계측으로 좁혀 해결합니다.

    GitHub Actions · Sentry · Vitest · Firebase

SELECTED WORK

대표 프로젝트 2

01Mobile · Web · 2025.12 —

Finders

필름 카메라 현상소 예약·커뮤니티 서비스. 하나의 React 코드베이스를 Capacitor로 패키징해 웹과 Android·iOS 양대 스토어에 출시하고 운영하고 있습니다. 앱 패키징과 네이티브 인증, 릴리즈 CI, 푸시 알림을 담당했습니다.

커밋 540개 (31%) · Play Store · App Store · 운영 중

상세 보기 →
Finders 랜딩 화면finders

02Web App · 2025.07 — 2026.03

오메추

무엇을 먹을지 정해주는 메뉴 추천 서비스. 메인·온보딩 5단계·추천 결과와 위치 기반 맛집 화면을 맡았고, 페이지 폴더에 뭉쳐 있던 코드를 9개월에 걸쳐 FSD 구조로 옮겼습니다.

커밋 365개 (12%) · 9개월 · 팀 4인

상세 보기 →
오메추 랜딩 화면omechu

GITHUB

코드로 남긴 기록

github.com/jeonbinggu ↗
두 프로젝트 커밋
905

두 프로젝트 커밋

머지된 Pull Request
128

머지된 Pull Request

리뷰한 Pull Request
148

리뷰한 Pull Request

작성한 이슈
94

작성한 이슈

이력서와 프로젝트 상세 자료를 바로 보내드립니다.

이력서 요청하기

PROCESS

문제를 좁혀 들어갑니다

  1. 01

    실패 경로를 먼저 정의한다

    기능은 “될 때”보다 “안 될 때”에서 무너집니다. 데이터가 비었을 때, 권한이 거부됐을 때, 중간에 이탈했을 때를 화면 상태로 먼저 정의하고 시작합니다.

    — 위치 권한 거부를 원인별로 나눠 처리하고, 다단계 온보딩의 이탈 경로마다 무엇을 남기고 지울지 표로 정리했습니다.

  2. 02

    추측하기 전에 계측한다

    원인을 짐작해 고쳐보면 맞았는지 틀렸는지도 알 수 없습니다. 어디까지가 정상인지 확인하는 장치를 먼저 넣고, 재현되지 않는 문제는 재현 조건부터 좁힙니다.

    — CI 서명 실패를 Secret 문제로 판단했다가, 파일 크기와 매직 바이트를 확인하고 가설이 틀렸음을 알았습니다.

  3. 03

    바뀔 지점에 경계를 긋는다

    요구사항을 그대로 옮기면 정책이 바뀔 때마다 화면 코드를 열게 됩니다. 무엇이 바뀔 값이고 무엇이 고정된 구조인지 나눠 두는 편입니다.

    — 사용 제한 정책을 훅으로 분리하고, 푸시 딥링크를 경로 문자열 대신 action 기반 계약으로 바꿨습니다.

  4. 04

    남는 형태로 마무리한다

    고친 것보다 왜 그렇게 고쳤는지가 오래 남습니다. 재현이 어려웠던 버그에는 회귀 테스트를, 다시 부딪힐 지점에는 진단 장치를 지우지 않고 둡니다.

    — 원인과 판단 근거는 커밋 메시지에, 기능 단위 트러블슈팅은 문서로 정리해 팀이 찾아볼 수 있게 합니다.

ACTIVITY

  • UMC 8기

    Web 파트 수료

    데모데이 장려상 — 오메추

  • UMC 9기

    Web 파트장

    데모데이 최우수상(2위) — Finders · 진행 중

  • UMC 10기

    부회장

    2026.03.02 — 2026.06.23

CONTACT

편한 방법으로 연락 주세요

  • 채용 제안

    웹과 앱을 함께 만들 프론트엔드를 찾고 계시다면.

    메일 보내기 →

  • 이력서

    경력과 프로젝트 상세를 문서로 정리해 보내드립니다.

    이력서 요청하기 →

  • 코드 보기

    실제 커밋과 리뷰 흔적으로 작업 방식을 확인하실 수 있습니다.

    GitHub 방문 →