A closer
look.
고객의 화면,
운영자의 업무,
그 사이의 프론트엔드.
기능 개발과
기술적 판단
2022년 3월부터 더스윙에서 고객 웹·웹뷰와 운영 도구를 만들었어요. SWING, SWAP, Yellow Bus 등 여러 서비스에서 초기 구축, 기능 개발, 기술 검토와 서비스 전환에 참여했어요.
2025년 9월부터는 SWAP FE Part Lead로 기술 의사결정, 주요 기능 개발과 코드 리뷰를 맡고 있어요. API 변경과 공통 구조, 릴리스에 필요한 판단도 동료들과 맞춰요.
운영자가 일하는 순서를 듣고 백엔드와 데이터 계약을 맞추며, 앱·CX 동료와 화면 사이의 연결을 확인하는 일이 제 작업의 큰 부분이에요.
프로젝트를 오가며 맡은 일
SWING · SWAP · YELLOW BUS
고객 화면
상품을 찾고 주문하거나 앱 안에서 로그인·결제로 이어지는 흐름을 만들어요.
- SWING 고객 웹뷰
- SWAP 상품 탐색·첫 주문
- 사업자 포털
운영 도구
계약, 배차, 정산처럼 업무 순서와 권한이 맞아야 하는 화면을 다뤄요.
- 바이크 운영 어드민
- Yellow Bus 운행 관리
- SWING 파트너 정산
개발 방식과 연결
구·신규 시스템의 공존, 앱 브릿지, 화면 성능과 검증 방식을 함께 살펴요.
- SWAP Admin V2
- SWING 홈페이지 성능
- WebView QA Shell
기술 선택과 적용
어떤 문제에 어떤 기술을 썼는지
구현 사례와 함께 소개해요.
React · TypeScript
고객 화면과 운영 Admin을 만들며 응답 타입, 사용자 유형, 폼 입력과 예외 상태를 맞췄어요. API 미정 단계의 fixture와 실제 응답을 구분해 연동한 경험도 있어요.
바이크 화면의 데이터 흐름 ↗TanStack Query · SWR
언제 조회할지, 어떤 조건으로 데이터를 구분할지, 수정 후 무엇을 다시 가져올지 업무 흐름에 맞춰 정했어요.
운행 정보의 조회와 갱신 ↗Next.js · Web performance
서버·클라이언트 경계를 나누고 페이지를 프리렌더링했어요. 이미지 생성과 iframe 로드 시점, 폰트 요청을 바꾸고 로컬 Lighthouse로 비교했어요.
초기 로딩 경로와 빌드 처리 ↗WebView · QA
네이티브 브릿지와 웹 화면을 연결하고 결제 이후의 복귀 흐름을 다뤘어요. Playwright 자동화에 직접 화면 확인을 더하고, 공개 WebView QA 셸도 만들었어요.
웹뷰와 공개 QA 도구 ↗일하는 방식
실제 작업에서 무엇을 선택하고 어떻게 확인했는지 정리했어요.
업무 순서 확인
화면이 필요한 이유와 사용자가 다음에 할 일을 먼저 확인해요. 그다음 API에 필요한 필드와 예외 상태를 정리해요.
Yellow Bus 학생 목록에서 보호자 정보가 없거나 여러 명인 경우를 새 응답 계약에 반영하도록 논의했어요.
전환 경로 점검
새 화면을 붙일 때 기존 데이터와 이동 경로가 남아 있는지 확인하고 연결 순서를 잡아요.
SWAP Admin V2에서는 구·신규 작업 데이터가 공존하는 환경에서 화면과 API를 전환하는 작업에 참여했어요.
화면과 실행 결과 확인
자동화가 통과한 뒤에도 실제 화면의 빈 상태와 응답 차이를 살펴봐요.
바이크 화면에서 사용자 유형에 따라 응답 객체가 빠지는 경우를 발견했어요. 수정 후 E2E와 직접 확인을 다시 진행했어요.
선택 근거 비교
렌더링 방식과 전송 자원을 함께 보고, 같은 조건에서 변경 전후를 측정해요.
SWING 홈페이지에서 영상·이미지·폰트와 렌더링 경로를 조정하고 로컬 Lighthouse 모바일 시뮬레이션 중앙값을 비교했어요.
지금까지의 경력
2022년 3월부터 프론트엔드 엔지니어로 일하고 있어요.
SWAP FE Part Lead
SWAP FE의 기술 의사결정, 주요 기능 개발과 코드 리뷰를 맡고 있어요.
Yellow Bus 스쿼드
인수 서비스의 운영 기능을 재구축하고 초기 안정화에 참여했어요.
더스윙 · 프론트엔드 엔지니어
SWING·SWAP·Yellow Bus의 고객 웹·웹뷰와 운영 도구를 개발해 왔어요.
미네스트로네 · 학생 창업
VR 컨트롤러·파티게임과 중국 대학생 중고거래 플랫폼의 MVP를 개발했어요. 프론트엔드 정규 경력과는 별개예요.
광주소프트웨어마이스터고등학교
소프트웨어개발전공
정보처리기능사
2023.09
직접 만들고 공개한 도구
반복해서 쓰는 화면, 브라우저 QA, 오류 수집을 개인 프로젝트로 설계하고 구현했어요.
Hyeonse Design System
포트폴리오에서 쓰던 색과 화면 설정을 다른 개인 프로젝트에서도 쓸 수 있도록 분리한 디자인 시스템이에요.
- 색상·서체·간격을 역할별 CSS 토큰으로 정리하고, 테마·강조색·밀도·모서리·움직임 설정을 React UI와 함께 패키지로 제공해요.
- 이 포트폴리오와 Flow QA에 적용했어요. CSS 토큰 검사 CLI와 화면 제작·이관·리뷰를 위한 재사용 스킬도 함께 만들었어요.
- TypeScript
- React
- CSS tokens
Flow QA
서비스 플로우를 검토 가능한 테스트 케이스로 바꾸고, 브라우저 실행 결과와 근거를 리포트로 남기는 로컬 QA 도구예요.
- 플로우·케이스 스키마, 모델 연결, 허용된 단계의 컴파일과 CLI·한국어/영어 UI를 구현했어요. 브라우저 실행은 tester-army/e2e를 사용해요.
- 원본 플로우의 해시로 변경을 감지하고, 모호한 기대 결과는 차단해요. 기대값 불일치와 실행 환경 문제를 구분하고, 실행별 리포트에 시도 내역과 수집된 증거를 연결해요.
- TypeScript
- Node.js
- e2e
- Zod
Browser Error Log
브라우저 오류의 수집부터 저장·조회까지 직접 운영할 수 있도록 만든 SDK와 수집기·뷰어예요.
- 프레임워크 독립 SDK, React Error Boundary 어댑터와 공유 이벤트 계약을 npm 패키지로 공개했어요. 전역 오류·처리되지 않은 Promise 거부·네트워크 실패를 수집해요.
- 전송 큐·배치·재시도 한도를 두고, Node.js 수집기에서 SQLite·JSONL로 저장해요. 뷰어는 필터, 스택·요청 정보, JSON 가져오기·내보내기를 제공해요.
- TypeScript
- React
- Node.js
- SQLite
다른 도구와 오픈소스 기여
이 밖에 공개한 도구와 오픈소스 기여도 살펴볼 수 있어요.
대표 작업 네 개를
자세히 소개해요.