미리보기

• 창립멤버로 '젤리몽', '뉴레카' 기획-출시-운영 전체 과정 참여

• 놀이터 기능 주도 개발로 체류 시간 80% 증가

• 2200+ 다국어 CSV파일을 i18n 형식으로 자동 변환하는 파이프라인 구축으로 다국어 대응 효율화 증대 (n시간 -> 1분)

• Reanimated 기반 marquee 모듈 개발로 애니메이션 성능 250% 개선

• 이미지 업로드 실패율 0% 달성 / S3 pre-signed urls 기반으로 업로드 속도 72%개선 / HEIF, JPG 사이즈 증가 문제 75% 경량

• Skia 기반 이미지 편집 기능(스티커) 개발

• CKEditor5 IME 천지인 한글 입력 이슈 대응

• 빌드 시점 API 호출하여 categoryList/kaptList JSON 화 -> 초기 진입속도 개선 및 서버 부하 완화 (일 24000회 -> 0회)

KT 통신구 백오피스

• 통신구 백오피스 리뉴얼 및 유지보수 -> 약 230개 통신구 (286km) 관리 시스템 성공적으로 배포

• 통신구 시설물 관리 도메인 정의 정리 및 구조 개선 주도

• Excel + 레거시 혼합 시스템 개선 -> API 정리 및 데이터 일관성 확보

대한체육회/국방부 체력검증시스템

• 체력검증시스템 시각화 개발

• Leaflet 기반 Atlas 오프라인 지도 구축 ->

  망 분리 환경에서도 경로 추적 시각화 가능 시스템 완성

행동 인식 데이터 백오피스

• 대용량 영상 전처리 UI 개발

• Sokect.io 기반으로 영상 상태 실시간 표시 (진행률 ,소요시간) 및 전처리 옵션 관리

도보내비

• LiDAR 기반 3D 스캐닝으로 공간 데이터 수집 -> 잠실역 공간 데이터 제공으로 도보내비 성공적으로 배포

소개 : pixel-art 스타일 커플 다이어리 앱, 커플의 소중한 추억을 기록하고 공유하며 감성적인 픽셀 아트 스타일의 UI와 캐릭터 성장 요소를 결합 서비스

프로덕트 기간 : 9개월 ~

누적 다운로드 : 40,000+

DAU : 5,000+

주요 스택 : React-Native, React

역할 : 3alabs 창립 멤버로서 React-Native 프론트엔드 개발자로 젤리몽 기획-개발-배포-유지보수 전 과정을 참여했습니다. 출시 9개월 만에 DAU 5,000+명을 돌파했으며, 국내 사용자의 높은 충성도와 재방문율을 이끌어내고, 최근 다국어로 배포로 해외 사용자들의 높은 유입을 이끌어냈습니다. AppStore 라이프스타일 22위까지 올라감으로 최근 2개월 폭발적으로 성장중입니다.

[주요 업무]

놀이터 개발

커플TI, 포춘쿠키, 컬러, 오늘뭐먹지? 등 놀이터 기능을 주도하여 개발

• 놀이터 기능으로 앱 체류시간 약 80%이상 증가, 평균 약 3분 -> 약 5분30초

다국어 대응

영어 로컬라이징에 직접 참여하여 캐주얼한 커플톤으로 번역 검토를 참여

• 해외 유저 대폭 증가, 최근 유입자의 70% 이상 차지

다국어 비효율 제거

신규 시장 (일본/영미권) 진출이 임박한 시전, 약 2200+ 번역을 담고 있는 CSV 다국어 파일을 파싱하여, i18n 지원하는 형식으로 자동 변환하는 툴을 Python으로 제작하여 파이프라인 구축

• 새로운 언어가 추가될 경우에도 동일한 스크립트로 쉽게 대응 가능하도록 구성하여 재사용성 고려

• 기존 수작업으로 수시간이 걸리는 작업 -> 1분 이내 작용 가능

백오피스 개발

운영팀이 핵심 운영 지표 확인하기위해서 개발팀에 직접 요청해야 했던 비효율적인 흐름 존재 주요 데이터를 실시간으로 조회·관리할 수 있는 백오피스 시스템 구축

• 콘텐츠 운영 효율 대폭 향상

• 운영팀의 반복 업무 시간 단축

• 개발팀의 커뮤니케이션 비용 감소, 본 업무 집중도 향상

이미지 편집 기능 개발

Skia 오픈소스를 통해 이미지 편집 기능 구축

• 스티커 삽입/회전/확대, 필터, 회전, 반전

[트러블슈팅]

애니메이션 성능 최적화

기존 오픈소스 marquee 라이브러리를 사용하던 중, 화면 전환 이후에도 애니메이션이 계속 실행되어 JS/UI 스레드 과부하가 발생함. 이로 인해 앱 전반의 프레임 드랍과 렌더링 지연이 발생

해결방안

• React Native Reanimated 기반으로 marquee 기능을 모듈 직접 구현

• focus-out 상태 감지 시 애니메이션을 자동 정지

• useFrameCallback 프레임 제어 기능 추가하여 -> 16ms 마다 업데이트하여 속도 조절

성과

• 애니메이션 관련 JS 연산 부하 제거

• UI 반응성 향상 및 FPS 드랍 250% 이상 개선

• 저사양 기기에서의 렌더링 안정성 확보

이미지 업로드 안정성 개선

서비스 내 이미지 업로드 기능에서 일일 약 10건 내외의 업로드 실패 현상이 지속적으로 발생. 초기에는 이미지 Picker 라이브러리의 타이밍 이슈 또는 화면 전환 간 파일 경로 누락 문제로 판단하여 관련 로직을 수정 후 배포했지만, 문제가 반복. 정밀 디버깅 결과, 해당 오류는 0KB 용량의 이미지 파일이 업로드 대상에 포함되면서 발생한 것. 파일 경로는 존재하나, 내부 데이터가 손실된 상태에서 AWS S3 업로드를 시도하며 예외가 발생

해결방안

• 업로드 전 파일 크기 검사 로직 (size > 0) 추가

• 0KB 파일인 경우 자동 업로드 차단 및 재선택 유도 UX 구현

성과

• 0KB 업로드 완전 차단 (100%)

• 이미지 업로드 실패율 1% -> 0%로 감소

JPG, HEIF 파일크기 최적화

React Native에서 이미지 파일을 fetch(uri).blob() 방식으로 처리하여 S3 Presigned URL로 업로드할 경우,iOS 환경에서 .heic, .jpg 파일이 내부적으로 자동 디코딩 및 JPEG 품질 1.0로 재인코딩되어 원본 대비 최대 2~3배까지 파일 용량 증가 발생

해결방안

• RNFetchBlob.wrap()을 사용하여 이미지 파일을 JS 메모리에 올리지 않고,

  Native 스트림 방식으로 S3에 직접 전송

• fetch().blob() 불필요한 디코딩/인코딩 및 JS 메모리 복사를 완전히 제거

• 원본 file:// 경로를 그대로 스트림 처리 -> 재인코딩 우회, 용량 증폭 없이 전송

성과

• 원본 크기 수준으로 파일 전송 가능 (100% 재현)

• 평균 파일 용량 최대 75% 절감

• 업로드 속도 개선 및 사용자 경험 향상

• JS thread 부하 방지

이미지 업로드 속도 최적화

기존에는 Cloudflare 프록시를 거쳐 EC2에 이미지를 로컬 저장하는 구조였으나, 이 과정에서 보안 검사 및 IO 병목으로 업로드 시간이 최대 20초까지 지연되어 사용자 업로드 이탈자 발생

해결방안

• S3 Presigned URL 방식으로 전환하여 Cloudflare 우회 및 EC2 저장 부담을 제거

성과

• 업로드 시간 최대 20초 -> 3초, 72% 이상 개선

• EC2 부하 감소 → 서버 안정성 향상

• 사용자 업로드 실패율 및 취소율 감소

소개 : 지역(시/구) 커뮤니티형 부동산 매물 커넥트 서비스

직책 : Frontend Developer

주요 스택 : React, Next.js 12

역할 : 3alabs 창립 멤버 프론트엔드 개발자로 뉴레카/백오피스 개발-배포-유지보수 전 과정에 참여했습니다.

[주요 업무]

실거래가 및 매물정보 시각화

• 아파트별 실거래가 변동 데이터를 차트,그래프로 시각화하여, 가격 흐름을 직관적으로 파악할 수 있는 그래프 구현

지도 기반 주변 편의시설/학군 정보 제공

• Kakao Maps API를 이용해 아파트 주변의 학군/병원/교통편/편의점 등 핵심 요소를 마커로 시각화

지역 기반 커뮤니티 기능 구축

• 시/구 단위 커뮤니티 게시판 구성 -> 지역 이슈, 아파트 비교, 후기 공유 가능

• CKEditor5를 커스터마이징하여 이미지 업로드 및 풍부한 입력 기능 구현

• 대댓글/좋아요 기능으로 유저 참여도 증가 유도

SEO 최적화 및 SSR 구조

• Next.js SSR 기능으로 검색 노출 성능 최적화

• 구조적 시멘틱 태그를 적극 활용

• Google Lighthouse SEO 점수 100점 유지

[트러블슈팅]

CKEditor5 Android 천지인 자판기 입력 이슈 대응

프로젝트 내 웹 에디터로 CKEditor5를 도입하여 크로스 플랫폼 대응을 진행하는 중, Android 기기에서 천지인 자판으로 한글 입력 시 자음과 모음이 분리되는 현상이 발생.

• 해당 현상은 CKEditor5의 입력 이벤트 처리 방식과 Android기기 Chrome IME(Input Method Editor)간의 호환성 문제로 인해 발생

• 천지인 자판은 조합형 문자 방식이라(compositionstart, compositionupdate, compositionend) 이벤트가 정상적으로 동작하지 않아 실시간 조합이 깨지는 문제로 확인됨

해결방안

• 브라우저의 userAgent를 분석하여 Android OS 여부를 판별 -> 플랫폼 별 에디터 분기 로딩 처리

  • Android 환경일 경우, 입력 호환성이 우수한 SunEditor를 로드하여 CKEditor5를 대체

  • iOS 및 Web 환경에서는 기존 CKEditor5 유지

성과

• 키보드 IME로 인한 에러발생율 0% 유지

SSR 성능 개선을 위한 정적 데이터 JSON 화

앱 특성상 지역 단지 리스트(kaptList), 카테고리 리스트(categoryList) 등 고정값에 가까운 대규모 참조 데이터가 지속적으로 사용되었고, 해당 데이터는 페이지 진입 시 SSR 과정에서 필요했기 때문에, 매 요청마다 서버에서 API를 호출 필요

• 리스트 규모가 큼으로 서버 부하 증가 (트래픽 급증 시 위험)

• 캐싱 전략도 고려했으나, SSR 단계에서의 데이터를 만드는 핵심 데이터임으로 서버 부하 및 초기 렌더 속도 저하 발생

• 변경 주기가 거의 없는 정적 데이터

해결방안

• 빌드 시점에 prebuild 하여 JSON 파일로 저장하는 구조로 전환

• 불필요한 API 호출 제거

성과

• 모든 사용자의 초기 진입 속도 개선

• 서버 API 호출량 대폭 감소 (DAU 약 1000명 기준 일 24,000회 -> 0회)

소개 : 실외는 GPS 신호를 이용한 모바일 지도 앱을 통해 현재 위치 및 네비게이션 기능을 이용할 수 있지만 실내에서는 사용할 수 없었던 문제를 ‘딥러닝·영상 기반 위치측위 기술'과 '비콘 기반 블루투스 측위 기술의 스마트폰 관성센서를 이용한 측위기술'을 사용하여 잠실역 및 코엑스 도보 네비게이션 기능 및 실내 위치 확인을 가능하게 한 AR 프로젝트

직책 : Frontend developer, AR 데이터 수집

스택 : React, Zustand, Typescript, Ag-gird

역할 : AR 영상데이터 전/후처리를 관리하기 위한 백오피스 개발 및 LiDAR(라이다, Light Detection and Ranging) 스캐너로 잠실역 3D 공간 매핑 데이터 수집

[주요 업무]

LiDAR Scanner AR 데이터 수집

• 360도 회전형 LiDAR 센서가 장착된 백팩 형태의 장비를 착용하고, 사람 통행이 많은 공간에서 최소한의 흔들림으로 고정밀 데이터 수집 수행

• 잠실역 지하 1~3층 플랫폼을 전층 스캔하며, 위치 간 이격 및 노이즈 최소화를 위해 보행 속도, 수집 경로, 중첩 영역 등을 사전 설계

휴빌론 도보내비 AR프로젝트에 제공되어 실제 서비스용 공간 모델링에 활용됨

소개 : KT 통신구/인사 통합 서비스 리뉴얼

직책 : Frontend developer

스택 : React, Zustand, Antd UI, Echart

역할 : 통신구 백오피스 개발 참여

[주요 업무]

KT 통신구 관리 백오피스 리뉴얼 및 데이터 구조 개선 주도

• 방대한 통신구 및 시설물 관리 데이터를 기반으로 한 기존 Excel + 레거시 백오피스 시스템 리뉴얼 참여

• 프론트엔드 개발을 넘어 도메인 용어 정리 부터 데이터 구조 정리까지, 가장 신입이였지만 프로젝트 내 시설물 관리 파트 담당자로 지정되어 개발~유지보수 전담

• 약 230개 통신구 (286km) 관리 시스템 성공적으로 배포

[트러블슈팅]

UI 개발을 넘어 도메인 문제 해결

기존의 통신구 관리 시스템은 엑셀 기반 프로세스와 레거시 백오피스로 구성. 레거시 백오피스 DB 와 최신화된 엑셀시트 문맥이 불일치 함으로 KT담당자 - 개발자, 개발자 - 개발자 사이에 커뮤니케이션 문제가 발생함. 전문 용어 및 데이터 모델에 대한 이해가 불명확하여, 반복적인 DB/API/UI 재작업 발생

해결방안

• KT 측 실무 담당자와 미팅을 직접 주도하여, Excel 기반으로 용어 명세, 필드간 중복·누락 항목 모두 재정리

• 이를 기반으로 백엔드 개발자와 협업하여 DB 정규화 / API 인터페이스 재수립 기여

• 문제 본질을 파악하여 프론트엔드 개발을 넘어 해당 도메인 전반을 이해

성과

• 반복적인 재작업을 막고, 데이터 정확성과 일관성 정립

• 신입이지만 통신구 시설물 관리 파트 담당자로 지정

소개 : 체력검증/관리 현황 플렛폼

직책 : Frontend developer

스택 : React, Zustand, Typescript, Echart

역할 : 웹 테이블/차트 개발, 인프라 설치 및 대응

[주요 업무]

체력 데이터 시각화 및 오프라인 지도 기반 경로 분석 화면 개발

• 용사가 착용한 GPS 위치 추적기 데이터를 기반으로 이동 경로, 총 거리, 시간, 칼로리 등을 시각화

• 이동 데이터를 ECharts 기반 통계 차트 + 지도 경로 시각화 UI로 구성

[트러블슈팅]

군대 폐쇄망 환경에서 지도 시각화 불가 이슈

군대 폐쇄망 환경에서는 인터넷 연결이 불가능하기 때문에 카카오맵, 네이버맵, 구글 지도 API 같은 민간 지도 서비스를 사용불가. 이러한 서비스들은 대부분 실시간 서버 요청을 기반으로 동작하기 때문에, 군사 보안과 망 분리 정책이 적용된 환경에서는 적합하지 않았음.

해결방안

• Leaflet 기반 오픈소스 지도 엔진과 Atlas 타일 지도 데이터를 사전 다운로드하여 오프라인 환경에서 사용 가능한 지도 시스템 구축

• 타일 이미지 세트를 서버에 로컬로 저장하고, Leaflet에서 경로 오버레이 처리 및 마커 시각화 기능 적용

• 지도 렌더링 로직과 시각화 데이터를 분리하여, 추후 지도 타일만 교체 가능하도록 구조 설계

성과

• 폐쇄망 환경에서도 지속 가능한 오프라인 지도 시각화 시스템 구축에 성공

• 외부 라이브러리 의존 없이 독립적인 지도 시스템 운영 가능해져 보안 및 망 분리 요구사항 100% 충족

소개 : 딥러닝 기반 행동 인식 영상 처리

직책 : Frontend developer

스택 : React, Zustand, Typescript, Ag-gird, Socket

역할 : 행동 인식하는 영상데이터 전/후처리를 관리하기 위한 백오피스 개발

[주요 업무]

행동 인식 영상 처리 백오피스 개발

• 행동 인식 분석을 위한 대용량 영상 전처리, 후처리 과정을 제어하는 관리 화면 개발

• 사용자 편의를 고려해 socket 이벤트 기반 양방향 통신 처리로 전환하여 전치리/후처리 상태를 실시간으로 수신하여 진행률, 예상 남은 시간, 업로드 완료 알림 등 피드백 요소 추가

• Ag-grid 사용하여 기반 영상 메타데이터 테이블, 전처리 옵션, 처리 결과 기능 개발