JS's Page

WELCOME

양종선 Yang Jong-seon

Frontend / Mobile Developer

단순한 문제해결을 넘어 비즈니스 성공에 직접적으로 기여합니다.

Going beyond simple problem-solving to directly contribute to business success.

View Projects Contact
양종선

About

지난 5년간 React Native 기반 모바일 앱 개발을 중심으로, 0에서 10만 명 이상의 사용자로 성장한 서비스의 전체 주기를 경험한 프론트엔드 개발자입니다.

초기 MVP 구축부터 성능 최적화, 운영 자동화까지 제품의 전 생애주기에서 문제를 정의하고 해결해 왔습니다. 기능 개발을 넘어 서비스 안정성, 운영 효율성, 사용자 경험이라는 관점에서 주도적으로 가치를 만들어 온 경험이 있습니다.

A frontend developer with 5+ years focused on React Native mobile development, with hands-on experience across the full lifecycle of a service that grew from zero to 100,000+ users.

From initial MVP through performance optimization and operational automation, I've defined and solved problems at every stage of the product lifecycle — creating value not just through feature delivery, but through service stability, operational efficiency, and user experience.

Tech Stack

React Native TypeScript Next.js React Zustand React Query Node.js Tailwind CSS Claude API

Projects

실제 서비스된 제품들입니다.

Products that have been in production.

모바일 앱 웹 어드민 Mobile App Web Admin

모두의충전

EV 충전 및 차량구독 플랫폼

EV Charging & Vehicle Subscription Platform

10만+ 사용자 규모의 EV 충전·차량구독 플랫폼으로, 초기 합류부터 정식 런칭까지 충전소 탐색·검색, 모두페이 결제(NFC·QR), 마이카·테슬라 API 연동, 대리충전 등 주요 도메인 기능을 직접 설계·개발했습니다. 이후 웹·앱으로 분리 운영되던 이벤트 페이지를 웹뷰로 통합해 관리 포인트를 줄였으며, 모바일 앱(20+ 스크린), Next.js 이벤트 웹, 어드민 대시보드(45+ 페이지)를 함께 개발했습니다.

An EV charging and vehicle subscription platform with 100,000+ users. From initial onboarding to official launch, I designed and built core domain features including charging station search, ModuPay payments (NFC/QR), MyCar and Tesla API integration, and proxy charging. Later consolidated fragmented web/app event pages into a unified WebView, and developed the mobile app (20+ screens), Next.js event web, and admin dashboard (45+ pages).

React Native Next.js TypeScript Zustand TanStack Query Firebase Naver Maps
홈페이지 Website
모바일 앱 Mobile App

BMW Charging

BMW OEM EV 충전 앱

BMW OEM EV Charging App

BMW 전기차 오너를 위한 OEM 충전 네트워크 앱 리뉴얼 프로젝트입니다. 대량의 충전소 데이터를 지도에 표시할 때 발생하는 성능 저하를 해결하기 위해 한국 지도를 100m 단위 셀로 분할하는 그리드 인덱싱 로직을 직접 설계해 지도 로딩 및 스크롤 성능을 개선했습니다. 외부 협력사와의 공동 개발 환경에서 문서화되지 않은 레거시 API 예외처리 로직도 직접 설계했습니다. PNC(Plug & Charge) 계약 관리, RF 카드 관리, SQLCipher 암호화 SQLite 기반 오프라인 충전소 데이터를 구현했습니다.

An OEM charging network app renewal for BMW EV owners. To address performance degradation when rendering large volumes of charging station data on a map, I designed a grid indexing system that divides the Korean map into 100m cells, significantly improving map load and scroll performance. I also designed undocumented legacy API error-handling logic in a joint development environment with an external vendor. Implemented PnC (Plug & Charge) contract management, RF card management, and offline charging station data using SQLCipher-encrypted SQLite.

React Native TypeScript Zustand TanStack Query SQLite Firebase Naver Maps

Side Projects

개인적으로 만든 것들입니다.

Personal projects I built on my own.

게임 플랫폼 UI 클론 Game Platform UI Clone

해외 게임 플랫폼의 UI/UX를 Next.js 15 + React 19 스택으로 클론 구현한 프로젝트입니다. 외부 컴포넌트 라이브러리 없이 직접 구현한 인터랙티브 컴포넌트들을 중심으로, 다국어 라우팅과 게이밍 특화 디자인 시스템 구축에 집중했습니다.

A clone implementation of an overseas gaming platform's UI/UX built with a Next.js 15 + React 19 stack. Focused on building interactive components from scratch without external component libraries, along with a multi-locale routing system and a gaming-specific design system.

Tech Stack

  • Next.js 15 App Router + React 19
  • TypeScript + Tailwind CSS 4
  • Zustand + TanStack Query
  • next-intl 다국어(ko/en) locale 라우팅
  • Turbopack 개발 빌드

Design System

  • CSS 변수 자동 생성 스크립트 (colors.ts → CSS vars)
  • 게이밍 네온 테마 + 다크 최적화
  • 시맨틱 컬러 토큰 체계
  • IcoMoon 커스텀 아이콘 시스템
  • 반응형 브레이크포인트 설계

Tech Stack

  • Next.js 15 App Router + React 19
  • TypeScript + Tailwind CSS 4
  • Zustand + TanStack Query
  • next-intl multi-locale (ko/en) routing
  • Turbopack dev build

Design System

  • Auto CSS variable generation script (colors.ts → CSS vars)
  • Gaming neon theme + dark-optimized
  • Semantic color token system
  • IcoMoon custom icon system
  • Responsive breakpoint design

Component Highlights

Sliding Tab

선택 탭에 배경이 따라오는 슬라이딩 인디케이터. 라이브러리 없이 offsetLeft로 직접 위치 계산.

Sliding indicator that follows the selected tab. Position calculated directly using offsetLeft without libraries.

Bottom Sheet
Select Currency

Context + Portal 기반 Compound Component. Trigger · Overlay · Content를 직접 구현. 애니메이션 후 unmount 처리.

Compound Component with Context + Portal. Implements Trigger · Overlay · Content directly. Handles unmount after animation.

Scroll Fade

스크롤 위치에 따라 양끝 그라디언트 페이드 자동 제어. 모바일 스크롤 다운 시 컨테이너 hide.

Auto-controls gradient fade on both ends based on scroll position. Auto-hides container on mobile scroll down.

Animated Border
Baseline 3.20
Performance 1.70
Error Rate 4.25

값 변동 시 rotating gradient border 표시. padding-box / border-box 기법으로 투명 테두리 안에 그라디언트를 입히고 CSS 변수로 각도를 회전.

Displays rotating gradient border on value change. Uses padding-box / border-box technique to apply gradient inside transparent border, rotating angle via CSS variable.

반려동물 커뮤니티 게시글 자동 포스팅 봇 Pet Community Auto-Posting Bot

반려동물 커뮤니티 한펫(hanpet.co.kr)에 자연스러운 게시글을 자동으로 생성·업로드하는 봇입니다. 96개의 페르소나 프로필(나이·지역·직업·반려동물·말투)을 기반으로 Claude API가 맥락에 맞는 글을 생성하며, 자유게시판·앨범·펫상식 3개 게시판에 하루 9개씩 자동 포스팅합니다. 트렌드 수집부터 이미지 선택·업로드까지 전 과정을 자동화했습니다.

A bot that automatically generates and uploads natural-sounding posts to the pet community Hanpet (hanpet.co.kr). Claude API generates contextually appropriate content based on 96 persona profiles (age, region, job, pet, tone), auto-posting 9 times a day across 3 boards: General, Album, and Pet Tips. The entire pipeline — from trend collection to image selection and upload — is fully automated.

Claude API

  • 페르소나·게시판 맥락 기반 글 생성
  • web_search로 오늘의 트렌드 수집
  • 게시글 내용 기반 최적 이미지 선택
  • 히스토리 기반 주제 중복 방지

자동화 파이프라인

  • Unsplash API 이미지 후보 수집
  • 96개 페르소나 히스토리 관리
  • 게시판별 포스팅 전략 분리
  • 한펫 API 연동 자동 업로드

Claude API

  • Post generation based on persona & board context
  • Trend collection via web_search
  • Optimal image selection based on post content
  • History-based topic deduplication

Automation Pipeline

  • Unsplash API image candidate collection
  • 96 persona history management
  • Per-board posting strategy
  • Hanpet API integration for auto-upload

Example

Persona

🧑‍💻

우준희 Woo Junhee

31세 · 경기 수원시

31 y.o. · Suwon, Gyeonggi

직업 Job
IT 개발자 IT Developer
반려동물 Pet
골든리트리버 4살 (맥스) Golden Retriever, 4 y.o. (Max)
말투 Tone
유머러스하고 솔직한 말투, 정보 전달 중심, 아재 개그 가끔 Humorous and candid, info-focused, occasional dad jokes
구체적인 인적사항 Profile
우준희 씨는 경기 수원시 소재 IT 기업에서 근무하는 31세 개발자로, 백엔드 및 IoT 연동 시스템 개발에 강점을 가지고 있다. 코드 품질과 효율성을 중시하며, 반려동물 관련 스마트 기기에 관심이 많아 업무 외 시간에도 펫테크 분야 기술 트렌드를 꾸준히 탐색한다. 팀 내에서는 유머러스한 분위기 메이커로 통하지만, 기술적인 문제 앞에서는 날카롭고 논리적인 면모를 드러낸다. Woo Junhee is a 31-year-old developer at an IT company in Suwon, Gyeonggi, with strengths in backend and IoT integration systems. He values code quality and efficiency, and actively follows pet-tech trends in his spare time. Known as a humorous mood-maker on his team, he shows sharp logical thinking when tackling technical problems.

Generated Post

자유게시판 Free Board

맥스한테 스마트 급수기 달아줬더니 본인이 더 신기한가봄 ㅋㅋ

Got Max a smart water dispenser and he's more confused than hydrated lol

어제 해외직구로 주문했던 IoT 급수기 드디어 도착했습니다 ㅎㅎ

설치하면서 앱 연동하느라 한 시간 날렸는데 결국 맥스는 그냥 물 마시고 가더라고요...

근데 제가 카메라로 들여다보니까 맥스가 앱 알림 소리 들릴 때마다 급수기 앞에서 고개 갸웃거리는 거 포착 ㅋㅋ

솔직히 급수기보다 맥스 반응 모니터링하려고 산 것 같기도 해요 😂

혹시 스마트 급수기 써보신 분들 있나요? 필터 교체 주기가 좀 짧은 것 같아서 다른 제품도 궁금하네요~

My IoT water dispenser from overseas finally arrived yesterday!!

Spent an hour connecting the app during setup, and Max just walked up, drank some water, and left...

But when I checked the camera, I caught Max tilting his head in front of the dispenser every time the app notification sound went off lol

Honestly I think I bought it more to monitor Max's reactions than for the water dispenser itself 😂

Has anyone used a smart water dispenser before? The filter replacement cycle seems kinda short — curious about other products~

Code Conventions Code Conventions

GitHub

React Native와 Next.js/React 프로젝트에서 팀 전체가 일관된 코드를 작성할 수 있도록 정리한 컨벤션 문서입니다. 네이밍, 컴포넌트 구조, 상태관리, API 레이어, 테스트 전략까지 실제 프로덕트 개발 경험을 기반으로 작성했습니다.

A convention guide for writing consistent code across React Native and Next.js/React projects. Covers naming, component structure, state management, API layer design, and testing strategy — all drawn from real production development experience.

React Native

  • 네이밍 규칙
  • 컴포넌트 구조
  • TypeScript 원칙
  • API 레이어 설계
  • 상태관리 (Zustand + React Query)
  • 스타일 시스템
  • 테스트 전략 (Jest / RNTL / MSW / Maestro)
  • Anti-patterns

Next.js / React

  • Server / Client Component
  • App Router 네비게이션
  • API 레이어 설계
  • 상태관리 (Zustand + React Query)
  • 스타일 시스템 (Tailwind / styled-components)
  • 에러 핸들링
  • TypeScript 원칙
  • Commit 컨벤션

React Native

  • Naming conventions
  • Component structure
  • TypeScript principles
  • API layer design
  • State management (Zustand + React Query)
  • Style system
  • Test strategy (Jest / RNTL / MSW / Maestro)
  • Anti-patterns

Next.js / React

  • Server / Client Component
  • App Router navigation
  • API layer design
  • State management (Zustand + React Query)
  • Style system (Tailwind / styled-components)
  • Error handling
  • TypeScript principles
  • Commit conventions

Contact

함께 만들고 싶은 것이 있다면 편하게 연락주세요.

If you have something you'd like to build together, feel free to reach out.

[email protected]