전자책 구독 서비스 만권당

• 전자책 구독 웹 플랫폼 신규 구축을 담당하였습니다.

• 주요 기술: Typescript, React, Next.js, React Query, Recoil, styled-components

• 반응형 UI와 웹 접근성을 고려하여 주요 컴포넌트를 개발하였습니다.

• RESTful API 연동 및 캐싱 전략을 최적화하여 페이지 전환 속도를 개선하였습니다.

20년 된 Visual Basic 기반 백오피스 앱 웹 마이그레이션

• Visual Basic 애플리케이션을 최신 웹 백오피스로 전환하는 프로젝트를 리딩하였습니다.

• 주요 기술: Typescript, React, Next.js, React Query, Recoil, React Hook Form, zod

• 프론트엔드 개발자 6명을 리딩하며 코드 리뷰와 컨벤션을 도입하여 팀 내 품질을 관리하였습니다.

• 공통 컴포넌트와 폼 검증 로직을 정립하여 생산성과 유지보수성을 강화하였습니다.

• 대규모 데이터 테이블을 최적화하여 성능을 개선하고 사용자 경험을 향상시켰습니다.

사내 인증/인가 관리 백오피스

• 사원 계정 및 권한을 관리하는 인증/인가 백오피스를 구축하였습니다.

• 주요 기술: Typescript, React, Next.js, React Query, Zustand, React Hook Form, zod

• OAuth2.1 PKCE 플로우와 AWS Cognito를 적용하여 보안을 강화하였습니다.

• 사내 인증/인가 관리 프로세스를 표준화하여 운영 효율을 높였습니다.

• 구축 사례를 기반으로 AWS 기술 블로그에 기고하였습니다. (AWS Blog)

검색어 관리 백오피스

• 알라딘에서 제공하는 검색 엔진의 검색 품질을 개선하기 위한 검색어 관리 시스템을 개발하였습니다.

• 주요 기술: Typescript, React, Next.js, React Query, Zustand, React Hook Form, zod, nuqs

• 불용어, 유의어 관리와 커스텀 검색어 기능을 제공하여 검색 정확도를 높였습니다.

• 직관적인 UI 설계를 통해 운영 효율성을 개선하였습니다.

백오피스 템플릿화

• 사내 공통 백오피스 템플릿을 개발하고 신규 프로젝트 초기 세팅을 자동화하였습니다.

• 주요 기술: Typescript, React, Next.js, React Query, Zustand, React Hook Form, zod

• Makefile 기반 자동화 스크립트를 적용하여 신규 프로젝트 생성 시간을 80% 이상 단축하였습니다.

• 상태 관리, 폼 검증, UI 컴포넌트를 모듈화하여 재사용성을 높였습니다.

• 파트너사가 스케쥴과 상품을 관리하고 매출을 확인할 수 있는 플랫폼을 개발하였습니다.
• 주요 기술: Typescript, React, Next.js, React Query, Zustand, Emotion, Figma
• 서버 데이터를 가공하여 사용자가 직관적으로 스케줄을 설정하고 편집할 수 있는 UI를 구현하였습니다.
• 분리되어 있던 두 페이지를 통합하여 운영 효율성과 사용성을 개선하였습니다.
• 모바일 전용 레이아웃과 다크 모드를 지원하여 다양한 환경에서 접근성을 강화하였습니다.
• 기획자와 디자이너와 협업하여 운영자의 실제 업무 시나리오를 반영하였습니다.

• 연말정산 관리 서비스인 클레버의 웹 프론트엔드를 개발하였습니다.
• 주요 기술: Typescript, React, Next.js, React Query, Emotion
• 로그인, 구성원 관리, 관리자 대시보드 등 핵심 페이지를 개발하여 MVP 구축에 기여하였습니다.
• 랜딩 페이지를 개발하여 사용자 유입 경로를 마련하였습니다.
• React Query 기반 전역 상태 관리를 도입하여 데이터 동기화와 캐싱 효율성을 개선하였습니다.
• 서비스 초기 단계에서 안정적인 프론트엔드 아키텍처 설계에 참여하였습니다.

• 선택지를 통해 다양한 결말을 제공하는 텍스트 어드벤처 모바일 게임 시리즈를 개발하고 운영하였습니다.
• 주요 기술: Javascript, React Native, Codepush, styled-components
• 홈, 게임 플레이, 상점, 업적, 레벨 페이지 등 주요 기능 전반을 개발하였습니다.
• React Native와 Codepush를 활용하여 크로스 플랫폼 환경과 OTA 업데이트를 지원하였습니다.
• 공통 UI 컴포넌트를 개발하여 재사용성과 유지보수성을 강화하였습니다.
• 시각장애인을 고려한 접근성 라벨링을 적용하여 포용적인 사용자 경험을 제공하였습니다.

• 턴제 카드 모바일 게임을 WebSocket 기반 실시간 양방향 통신으로 개발하였습니다.
• 주요 기술: Javascript, React Native, Animated, Codepush
• 게임 플레이, 상점과 구매 기능, 랭킹 시스템 등 주요 기능을 개발하였습니다.
• Animated를 사용하여 카드 움직임과 전투 애니메이션을 구현하였습니다.
• WebSocket 기반 실시간 통신 로직을 설계하여 다인전 플레이를 지원하였습니다.

• 거짓말을 기억하며 진행하는 캐주얼 모바일 게임을 개발하였습니다.
• 주요 기술: Javascript, React Native, Codepush, Figma
• 홈, 게임 플레이, 상점, 업적 등 주요 기능을 개발하였습니다.
• Codepush 기반 OTA 업데이트 방식을 적용하여 안정적인 운영을 지원하였습니다.

근력학교 앱

• 수강생이 결제, 수업 신청, 공지 확인 등을 할 수 있는 모바일 앱을 개발하였습니다.

• 주요 기술: Javascript, React Native, Codepush, styled-components, Figma

• UI/UX 디자인부터 개발까지 모두 진행하였습니다.

• Codepush를 적용하여 빠른 기능 개선과 안정적인 운영을 가능하게 하였습니다.

근력학교 어드민 페이지

• 수강생과 공지사항을 관리할 수 있는 관리자 페이지를 개발하였습니다.

• 주요 기술: Javascript, React, React Admin, styled-components

• React Admin을 기반으로 CRUD 및 권한 관리 기능을 구현하였습니다.

• 직관적인 UI를 제공하여 관리자가 데이터를 효율적으로 관리할 수 있도록 하였습니다.

Git

Jira

YouTrack

Next.js 기반 SSR/CSR 하이브리드 렌더링 전략을 설계하여 초기 로드와 탐색 성능을 균형 있게 최적화

React Query 캐싱 정책(키 전략, staleTime, prefetch)을 고도화해 카탈로그/도서 상세/구독 영역 데이터 패칭 효율 개선

Recoil로 전역 구독 상태(플랜, 권한, 세션)를 안정적으로 관리하고, 권한 가드 및 라우팅 보호 로직 구현

반응형 UI 시스템 구축: 그리드/타이포/간격 스케일 정의 및 공통 컴포넌트화로 일관된 디자인과 개발 생산성 확보

웹 접근성 강화: 키보드 포커스 이동, 스킵 링크, 라이브 리전, 대체 텍스트/ARIA 속성 적용

구독 온보딩/플랜 선택 흐름의 UX 개선(단계 분리, 유효성 검증, 오류/예외 처리)으로 전환 과정 이탈 최소화

코드 스플리팅과 이미지 최적화(지연 로딩, 사이즈 지정)를 통해 체감 성능과 LCP 구간 개선

에러 바운더리 및 로깅 적용으로 장애 상황 가시성 확보, 복구 가능한 사용자 경험 제공