HANSUNG KWONPRODUCT ENGINEER / WEB & MOBILE

권한성

Product Engineer

웹과 모바일 제품을 만들고,
팀의 개발 방식을 개선합니다.

UX/UI를 설계하고 웹과 모바일 제품을 개발하는 Product Engineer입니다. 디자인 실무 경험을 바탕으로 화면 설계부터 클라이언트 구현까지 맡아 왔습니다.

React와 React Native 서비스의 성능과 안정성을 개선하고, 디자인 시스템과 QA 도구를 개발했습니다. 개인 프로젝트에서는 제품 기획부터 앱 출시와 운영까지 직접 담당하고 있습니다.

주요 기술TypeScriptReactNext.jsReact Native

경력

에이비제트

AB-Z

Product Engineer

2025.03 ~ 현재

크리에이터 대상 웹 서비스와 모바일 앱을 개발하고 있습니다. 여러 제품이 공유하는 UI와 사내 QA 자동화 도구도 담당합니다.

WebView 인증 브릿지와 화면 전환 개선

웹 배포로 사용자 피드백을 빠르게 반영하는 구조는 유지하고, 웹과 앱의 로그인 상태가 어긋나는 문제를 수정했습니다. 같은 웹 앱 안에서는 클라이언트 라우팅을 사용해 탭을 바꿀 때 페이지 전체를 다시 로드하지 않도록 했습니다.

네이티브 SDK 초기화와 푸시 진입 처리

SDK 초기화가 첫 화면 렌더링을 막지 않도록 인증 처리와 분리했습니다. 앱 실행 중 먼저 도착한 푸시 이벤트는 큐에 보관하고, 화면이 준비된 뒤 전달하도록 처리했습니다.

WebView 초기 렌더링 성능 개선

공개 캠페인과 로그인 화면의 리소스 로딩 순서를 분석했습니다. 페이지 단위 코드 스플리팅을 적용하고, 첫 화면에 필요 없는 UI 컴포넌트와 외부 SDK는 레이지 로딩으로 전환했습니다.

중복 API 요청을 제거하고 신규 로그인 폼에 SSR을 적용해, 클라이언트 초기화가 끝나야 화면이 보이던 병목을 줄였습니다. 같은 조건의 로컬 빌드에서 로딩 시간과 기존 기능을 비교하고, 청크 로드 실패 시 재시도를 추가했습니다.

로그인 LCP 18.78초에서 1.40초 / 초기 전송량 3.00 MB에서 0.64 MB

Web Worker로 이미지 처리 중 UI 멈춤 개선

사진 디코딩을 메인 스레드에서 Web Worker로 옮기고, 전체 작업이 끝나기 전에 준비된 썸네일부터 표시했습니다. 워커 수와 메모리 사용량을 조정하고, Web Worker를 지원하지 않는 환경에서는 기존 처리 방식으로 폴백하도록 했습니다.

첫 썸네일 21.0초에서 1.8초 / 전체 처리 21.0초에서 10.9초

200ms 이상 UI 정지 20회에서 0회

여러 제품이 공유하는 디자인 시스템 개발

제품별로 달랐던 UI 구현을 디자인 토큰과 공통 컴포넌트로 정리했습니다. 공통으로 쓸 동작과 서비스별 스타일을 구분해, 기존 화면을 한꺼번에 바꾸지 않고도 새 디자인 시스템을 적용할 수 있도록 했습니다.

PR 검토와 QA 시나리오 정리 자동화

PR 변경 파일과 QA 시나리오를 연결하는 사내 QA 도구를 개발했습니다. 결과를 PR 코멘트와 Slack 리포트로 전달해 검증 항목을 정리하던 수작업을 줄였습니다.

PR 변경 영향도 분석: 약 30~60분에서 10분대

비개발자를 위한 자연어 데이터 조회 도구

비개발자가 자연어로 퍼널과 전환율을 조회하는 도구를 개발했습니다. 이벤트 데이터에 지표 정의와 제품 설명을 연결해, 분석 도구에서 데이터를 찾던 과정을 대화형 조회로 바꿨습니다.

데이터 분석 리드타임: 약 30~60분에서 수 분 내

모니모니

MonyMony

Frontend Developer

2022.01 ~ 2024.12

커플 다이어리 앱 썸원(SumOne)의 V1 운영과 V2 개발에서 앱 구조 개편, 공통 UI 개발에 참여하고 제품 시나리오별 QA 기준 정리를 주도했습니다.

SumOne V2 아키텍처 개편

앱 아키텍처 개편과 코드 컨벤션 정리에 참여해, 기능 추가와 유지보수에 필요한 앱 구조와 개발 규칙을 팀과 정리했습니다.

공통 UI 컴포넌트와 사용 가이드

반복 UI를 공통 컴포넌트로 만들고 사용 방법을 문서화했습니다. 팀이 같은 컴포넌트와 구현 규칙을 신규 화면 개발과 유지보수에 쓰도록 관리했습니다.

데이터 연동과 사용자 분석 도구

클라이언트 데이터 요청을 개선하고 사용자 분석 환경과 내부 모듈을 구현했습니다. 제품 이용 데이터를 확인하고 분석할 수 있도록 했습니다.

제품 시나리오 명세와 QA 프로세스 주도

제품 시나리오별 명세와 테스트 기준을 정하고, CMS에서 QA 환경을 준비할 수 있도록 했습니다. QA 방법론을 제안하고 사내 세미나를 주도했으며, 고객 문의에 대응하는 Admin도 개선했습니다.

INSA, ACG

Frontend Developer / Designer

2021.02 ~ 2021.12

온라인 평가와 채용 플랫폼의 UI 디자인, 프론트엔드 개발을 맡았습니다.

서비스 통합용 디자인 시스템과 운영 화면 템플릿

사내 서비스 통합 프로젝트에서 공통 UI를 디자인하고 개발했습니다. 운영 화면 템플릿을 만들어 서비스별로 반복하던 화면 작업에 재사용했습니다.

온라인 평가 화면과 평가 로직 개발

오프라인 시험을 온라인으로 옮기면서 시험 화면과 기업별 로그인 템플릿을 디자인하고 개발했습니다. 문항 저장, 스코링, 승진시험 시스템의 관리자 기능도 구현했습니다.

어니언스

Onions

Frontend Developer Intern

2020.08 ~ 2020.12

파프리카케어 앱 개발

복약 관리 기능과 공통 UI 컴포넌트를 개발하고, 기존 앱의 버그 수정과 유지보수에 참여했습니다.

일하는 방식

디자인 시스템을 작업 도구까지 연결합니다

디자인 시스템에 화면 제작 하네스와 재사용 스킬을 연결하고 있습니다. 비개발자도 같은 컴포넌트와 검수 기준을 사용해 화면을 만들 수 있도록, 작업 절차를 문서와 도구에 담고 있습니다. 담당자의 숙련도에 따라 작업 범위와 품질이 크게 달라지지 않는 환경을 목표로 합니다.

최적화는 비교해 보고 결정합니다

외부 사례를 참고하되, 같은 방법이 지금 제품에도 필요한지 먼저 확인합니다. 변경 전후 성능과 기존 기능을 비교하고, 효과가 없거나 에러 처리를 복잡하게 만드는 방법은 적용하지 않습니다.

사내 개발 환경과 운영 도구도 개선합니다

제품 기능뿐 아니라 사내 QA, 데이터 조회, 리포팅에서 반복하는 작업도 살펴봅니다. 이를 자동화하되, 제안한 테스트와 실제 실행 결과는 구분해 보여줍니다. 팀원이 결과와 근거를 직접 확인할 수 있는 도구를 만들고자 합니다.

개인 프로젝트

내일쓰기

감정 기록 모바일 앱

2025.07 ~ 현재

내일쓰기는 긴 일기를 쓰기 부담스러운 사람이 짧은 기록으로 자신의 감정 변화를 돌아볼 수 있는 모바일 앱입니다. 글을 쓰지 않아도 감정과 강도만 선택하면 기록을 마치고, 글이나 그림은 나중에 덧붙일 수 있도록 설계했습니다.

매일 무엇을 써야 할지 고민하는 부담을 줄이는 데 초점을 맞췄습니다. 쌓인 기록은 주간 리포트로 모아 보여줘, 기록을 남기는 데서 끝나지 않고 한 주의 감정 변화를 돌아볼 수 있게 했습니다.

제품 기획과 UX/UI, 앱 개발부터 iOS 및 Android 출시까지 직접 맡았습니다. 출시 후에는 기록을 시작하기 전의 이탈을 확인해 첫 기록 안내와 완료 피드백을 수정했습니다.

QAMap

코드 변경 기반 QA 분석 CLI

코드 변경 뒤 무엇을 테스트해야 할지 알려주는 CLI를 설계하고 npm으로 배포했습니다. 변경 코드와 기존 테스트를 로컬에서 분석해 QA 시나리오와 근거를 보여주며, 테스트 계획과 실제 실행 결과를 구분합니다. 소스 코드를 외부에 업로드하지 않고 사용할 수 있습니다.

이전 경력과 학력

디자인 실무 경험

웹페이지, 온라인 콘텐츠, 광고와 편집물 디자인

  • 마인드매니지 / 2019.06 ~ 2019.09
  • 스포츠MNM / 2019.03 ~ 2019.06
  • 프리랜서 디자이너 / 2018.02 ~ 2018.11
  • T-ON 네트워크 / 2017.02 ~ 2017.11

서울사이버대학교

멀티미디어디자인학과

2018.03 ~ 2020.02

2020년 2월 최우수장학생 졸업