☎️ Phone ✉️ Email 📚 Github 🏠 Blog

+82-10-5838-4388 [email protected] https://github.com/raonzena https://medium.com/@sulhwa-dev

About

사용자 경험 개선과 코드 효율성 사이의 최적점을 찾는 프론트엔드 개발자입니다. 서비스의 리팩토링 및 마이그레이션을 주도하며 기술 부채를 해결하고, 팀 생산성을 높이는 소통 방식을 지향합니다.

제가 일하면서 가장 중요하게 여기는 것은 다른 사람들과의 소통입니다. 혼자 일을 한다면 상관없지만, 팀 단위로 일을 할 때 다른 팀원들과의 소통, 다른 팀과의 소통이 중요하다고 생각합니다. 지금까지 프로젝트를 진행하면서 팀원들과 건강한 소통을 하기 위해 항상 노력해 왔고, 그 결과 업무에 많은 도움이 되었습니다.

개발을 하면서 가장 좋아하는 것은 기존에 있던 제품이나 코드를 분석해보고 리팩토링 하거나 더 나은 제품을 만들기 위해 노력하는 것입니다. 그런 과정을 통해 좋은 제품을 만들어 나가는 것이 가장 보람되고 즐겁습니다.

Technical Skills

Key Skills

React, Javascript, Git, Vue, Vuex, Typescript, Redux Toolkit, Nextjs, Nodejs, Scss, Panda Css

Experienced

Tanstack query, jotai, stitches, styled-component, Tailwind, RTK, Yup, Zod, emotion, AWS, GCP

Interested

SSR, SEO, Nuxt, Storybook

Applications & Tools

Cursor, VS Code, Source Tree, Fork, Jira, Bitbucket, Confluence, Notion, Slack, Trello, Monday, Sentry, Datadog, Cursor, Codex

Experience

2022.08 ~ 2026.03

프렉스 코리아 유한책임회사 (Prex)

웹 프론트엔드 엔지니어

Flipster 거래소 사이트 개발 (기존 AQX 거래소 리브랜딩) https://flipster.io

🗓 2024.03 ~ 2026.03

• Usage Stack : Nextjs, React, jotai, Panda Css, Typescript, Javascript
• 실시간 데이터 렌더링 최적화 (Open/Pending Position) Open/Pending Position 컴포넌트의 단일 상태 구조를 기능별로 세분화(Atomization)하고, Prop Drilling을 제거하여 컴포넌트 간 강결합을 해소했습니다. 이를 통해 실시간 소켓 데이터 수신 시 전체 자식 컴포넌트가 초당 2~3회 불필요하게 리렌더링되던 문제를 해결하고, 실제 데이터가 변경되는 컴포넌트만 선택적으로 렌더링되도록 개선하여 70%정도의 리렌더링 발생 횟수를 줄였습니다.
• AI Agent 컨벤션 자동화 및 개발 생산성 향상 .agent/skills 내 CSS Styling, API 처리, Design System, 커밋/코드 규칙 등 프로젝트 표준 규칙을 구조화하여 명시했습니다. Cursor, Claude code 등 AI 프롬프트 기반 코드 생성 환경에서 팀 컨벤션을 일관되게 준수하도록 유도함으로써, 팀원 간 코드 스타일 파편화를 방지하고 리뷰 코스트를 절감했습니다.
• CMS 기반 동적 이벤트 컴포넌트 구조 설계 (Trading Competition Revamp) Volume, P&L, Daily Check-in, Lucky Draw 등 다양한 이벤트 페이지에 공통으로 적용할 수 있는 재사용 가능한 컴포넌트 구조를 설계했습니다. Contentful CMS 데이터에 따라 UI와 로직이 동적으로 결정되도록 구현하여, 마케팅 요구사항 변경이나 신규 이벤트 추가 시 코드 수정 없이 데이터 설정만으로 즉시 대응할 수 있는 환경을 구축했습니다.
• 비동기 응답 기반 가변 루프 애니메이션 구현 (Lucky Draw) Lucky Draw 인터랙션 구현 중, 네트워크 지연으로 인해 응답 수신 전 애니메이션이 종료되어 당첨 결과가 노출되지 않는 UX 결함 가능성을 포착했습니다. 초기 '3회전 보장 및 Easing' 기획을 기술적으로 재해석하여, 비동기 API 응답 상태에 따라 애니메이션의 생명주기를 동적으로 제어하는 '응답 대응형 가변 루프' 방식을 도입해 사용자 경험을 개선했습니다.
• 단일 책임 원칙(SRP) 기반 도메인 상태 분리 (Orderbook) 기존 Orderbook 컴포넌트 내에 강결합되어 있던 로직을 단일 책임 원칙에 따라 분리했습니다. 전역 상태(Atom)를 사용 목적(Form, Action, Validation, Event)에 맞게 세분화하여 코드의 복잡도를 낮추고 유지보수성을 제고했습니다.
• 디자인 시스템 구축 및 스타일링 환경 고도화 Scss에서 Panda CSS로 전환하여 빌드 타임 Type-safe한 스타일링 환경을 구축했습니다. 신규 디자인 시스템을 적용하며 공통 컴포넌트를 구현하고 스토리북에 추가하여 디자인-개발 간 시각적 명세 공유와 컴포넌트 재사용성을 강화했습니다. 대표적으로 Floating-UI와 Framer Motion을 기반으로 Compound 패턴을 적용하여 Tooltip(Root, Content, Trigger) 구조를 명확히 설계했습니다.
• 검색 엔진 최적화(SEO) 및 노출 개선 Metadata 및 Sitemap을 구조적으로 작성하여 SEO를 최적화했습니다. 그 결과 Google 검색 결과 내 위치를 기존 5페이지에서 1페이지 상단으로 개선했습니다.

AQX 앱 랜딩유도 사이트 개발 https://app.aqx.com/

🗓 2023.03 ~ 2024.03

• Usage Stack : Nextjs, React, jotai, Scss, Typescript, Javascript
• Next.js 기반 랜딩 페이지 개발 및 프로젝트 도입 (AQX 진입 유도 사이트) 서비스 전환율 제고를 목적으로 Next.js 기반 랜딩 사이트를 구축했습니다. 정적 단일 페이지 특성에 맞춰 당시 출시 초기 단계였던 App Router 환경을 도입했으며, 컴포넌트 단위의 Server/Client Component 분리 체계를 적용하고 초기 버그 이슈에 대응하며 성공적으로 오픈했습니다.

AQX 거래소 사이트 개발 https://aqx.com/

🗓 2022.08 ~ 2024.03

• Usage Stack : React, jotai, Scss, Typescript, Javascript
• i18n 기반 다국어 지원 체계 구축 글로벌 사용자 대응을 위해 영어, 중국어, 러시아어 3개국 다국어 지원 환경을 구축했습니다. BabelEdit 도구를 활용해 번역 자산(JSON)을 체계적으로 관리하고, react-i18next 패키지 기반의 번역 파이프라인을 연결하여 확장 용이한 i18n 아키텍처를 구현했습니다.
• Wallet 페이지 모듈화 및 도메인 로직 정제 오래된 Wallet 코드베이스의 기술 부채를 해결하기 위해 전면 리팩토링을 진행했습니다. 컴포넌트, Hook, Util 등에 파편화되어 있던 코인 자산 계산 로직을 수집·재설계하여 팀 내 코드 컨벤션을 준수하도록 모듈화했습니다. 또한 기존 수식의 Known Issue에 대해 PO 및 백엔드 엔지니어와 지속적으로 논의하여 계산 도메인 로직을 명확히 정립했습니다.
• 이원화된 KYC 인증 SDK 연동 및 UI/UX 개편 Sumsub 및 ISpiral 두 개의 외부 KYC 인증 솔루션을 적용하며 인증 UI/UX를 개편했습니다. 각 솔루션별로 상이한 사용자 상태값(State Mapping)을 분석하고 이를 표준화하여, 상태 조합별 예외 처리와 분기 로직을 일관되게 제공하도록 구현했습니다.
• 리퍼럴(Referrer) 페이지 개발 및 신속한 온보딩 입사 직후 유저 초대 리퍼럴 페이지 개발을 담당했습니다. 스쿼드 구성원들과의 논의를 통해 비즈니스 요구사항과 핵심 기능을 신속히 파악하였으며, 기한 내 안정적으로 개발을 완료하여 서비스에 배포했습니다.

2019.07 ~ 2022.08

(주)브레이브모바일(Soomgo)

웹 프론트엔드 개발자

숨고클래스 개발(SoomgoClass) https://www.soomgoclass.com/

🗓 2022.04 ~ 2022.08

• Usage Stack : Nextjs, React, jotai, stitches, Typescript, Javascript, Nginx, Elastic Beanstalk
• 차세대 VOD 플랫폼 마이그레이션 및 타입 시스템 구축 (mybiskit → soomgoClass) Vue 2 기반 레거시 VOD 서비스 인수 과정에서, 타입 시스템 부재와 낮은 가독성으로 인한 기술 부채를 해결하고자 Next.js(v12) 기반의 점진적 마이그레이션을 주도했습니다. TypeScript와 ESLint가 적용된 표준 개발 환경을 구축하고 불분명했던 비즈니스 로직을 컴포넌트 중심 아키텍처 및 아토믹 상태 관리 구조로 재설계하여, 서비스 통합 단계에서의 유지보수성과 운영 효율성을 확보했습니다.

숨고클래스 백오피스 개발 및 유지보수(SoomgoClass Admin)

🗓 2022.04 ~ 2022.08

• Usage Stack : Nuxt, Vue, Vuex, Typescript, Javascript, jQuery, Nginx, Elastic Beanstalk
• BFF 구조 최적화 및 레거시 백오피스 리팩토링 VOD 백오피스 통합 과정에서 비효율적인 BFF 계층과 타입 시스템 부재로 인한 가독성 저하 문제를 해결했습니다. 기존 코드베이스에서 쿠폰 및 뱃지 관리 기능을 중심으로 TypeScript와 Vue 2 Decorator를 점진적으로 도입해 안정성을 높였습니다. 또한 서버 개발팀과의 협업을 통해 불필요한 BFF 계층을 제거하고 서버 API로 역할을 위임하는 구조적 최적화를 수행하여 데이터 흐름을 단순화했습니다.

숨고 플랫폼 개발 및 유지보수(Soomgo) https://soomgo.com/

🗓 2019.07 ~ 2022.08

• Usage Stack : Vue, Vuex, Typescript, Javascript, jQuery, Nginx, Elastic Beanstalk
• Django 종속성 제거 및 이벤트 운영 프로세스 자동화 Django 템플릿에 종속되어 있던 Vue 컴포넌트들을 독립적인 프론트엔드 프로젝트로 분리하여 개발 독립성을 확보했습니다. 기존에 개발자가 직접 코드 수정 및 배포를 담당하던 이벤트/배너 관리 방식을 백오피스 API 기반 공통 컴포넌트 구조로 전환함으로써 반복적인 수동 배포 프로세스와 운영 공수를 줄였습니다.
• 커뮤니티 SEO 라우팅 및 쿠폰/리텐션 시스템 구축 커뮤니티 기능 개발 시 검색 키워드 기반의 고유 URL 라우팅을 설계해 유저 공유 편의성과 SEO 기틀을 마련했습니다. 더불어 쿠폰 발급 및 쿠폰함 시스템을 안정적으로 구축하여 신규 유저 인입과 리텐션 향상에 기여했습니다.

숨고 백오피스 개발 및 유지보수(Soomgo Force2)

🗓 2019.09 ~ 2022.08

• Usage Stack : React, Redux, Typescript, Javascript, NodeJs, Material UI
• 관리자 플랫폼 React 마이그레이션 및 핵심 금융 CRUD 구현 (Soomgo Force) 기존 PHP 기반 관리자 시스템을 React 프로젝트로 전환을 주도했습니다. 비즈니스 모델 전환(정기결제 구독형 → 캐시 시스템)에 맞춰 계좌 환불 신청, 캐시 지급 실패 내역 관리 등 핵심 금융 데이터에 대한 CRUD 기능을 구현했습니다.
• 백오피스 어드민 내재화를 통한 운영 효율화 개발자의 수동 코드 배포에 의존하던 이벤트 및 배너 관리 프로세스를 백오피스 전용 CRUD 시스템으로 내재화했습니다. 비개발 직군(이벤트 담당자)이 직접 콘텐츠를 운영할 수 있는 환경을 제공하여 부서 간 커뮤니케이션 비용과 프로덕트 배포 의존도를 낮췄습니다. 또한 이벤트 쿠폰 생성·관리 및 커뮤니티 게시글·댓글·신고 관리 어드민을 구축하여 데이터 관리의 정확성을 강화했습니다.