안녕하세요,
프론트엔드 개발자 백민종입니다.

b.stage

MAU 300만 규모의 글로벌 팬덤 SaaS 플랫폼 b.stage에서 프론트엔드 개발을 담당하고 있습니다. 브랜드마다 독립된 공간을 제공하는 멀티 테넌시 기반 구조에서, 커머스, 회원 관리, 콘텐츠, 멤버십 등의 기능을 개발하고 유지보수하고 있습니다.

Next.js React Zustand SCSS Monorepo

통합 계정 시스템 구축

❗️ 문제

• 멀티 테넌시 구조로 인해 사용자가 브랜드마다 별도로 회원가입해야 했고, 이는 로그인/가입 반복으로 이어지는 불편한 사용자 경험을 유발했습니다.

💡 해결

• OAuth Provider 역할을 하는 통합 계정 시스템을 구축하고, 각 브랜드는 OAuth 방식으로 연동될 수 있도록 구현했습니다.
• 보안성을 높이기 위해 OAuth 과정 중 노출될 수 있는 민감 정보는 Next.js API Route를 통해 서버 측에서 안전하게 처리했습니다.

📈 결과 및 경험

• 통합 계정 도입으로 하나의 로그인으로 여러 브랜드를 이용할 수 있게 되어, 사용자 흐름이 매끄러워지고 반복 가입의 피로도가 해소되었습니다.
• OAuth 인증 플로우에 대한 이해와 실무 적용 경험을 쌓았고, 내부 API 기반 설계를 통해 보안성과 운영 효율을 함께 확보하는 경험을 쌓았습니다.

UDC (Upbit D Conference)

2024.05 - 2025.06

두나무가 매년 개최하는 블록체인 컨퍼런스의 2024년, 2025년 컨퍼런스 페이지 및 어드민 시스템 프론트엔드 개발을 담당했습니다. 기획자, 디자이너, 퍼블리셔 등 다양한 직군과 협업하여 성공적인 컨퍼런스 개최에 기여하고 있습니다.

Next.js React TanStack Query Recoil SCSS

SSR을 활용한 성능 및 SEO 최적화

❗️ 문제

• 국문과 영문 페이지에서 서로 다른 언어의 콘텐츠를 클라이언트 사이드에서 페칭하는 구조로 되어 있어, 초기 렌더링 시 빈 콘텐츠가 노출되거나, 검색 엔진이 콘텐츠를 인식하지 못해 SEO에 불리했습니다.

💡 해결

• next-translate를 이용하여 다국어 콘텐츠를 일관되게 관리하고, getServerSideProps를 적극 활용해 서버에서 페이지별 콘텐츠를 사전에 렌더링하도록 구현했습니다.
  • 서버 사이드 렌더링 중 에러가 발생하면 정상적인 페이지나 대체 콘텐츠를 보여줄 수 있도록 getServerSideProps에 에러 핸들링 로직을 추가했습니다.

📈 결과 및 경험

• 다국어 페이지에도 SEO가 적용되어 검색 엔진에 정상적으로 노출되었고, 해당 언어의 콘텐츠가 바로 보여져 글로벌 사용자 경험을 개선했습니다.

개발 환경 최적화를 통한 빌드 성능 및 유지보수성 향상

❗️ 문제

• 기존 시스템은 Create React App(CRA) 기반으로 개발되어 있었고, 종속성 다수가 수년간 업데이트되지 않아 보안과 호환성 측면에서 위험이 존재했습니다.

💡 해결

• Vite로 마이그레이션을 하고, 주요 라이브러리를 최신화하였습니다.
• GitHub Dependabot을 설정하여 보안 취약점 자동 감지 및 패치 프로세스를 마련했습니다.

📈 결과 및 경험

• ESM(ECMAScript Modules)의 장점을 실제로 경험하며 이해도를 높였고, MHR 반응 속도와 빌드 시간을 소폭 개선했습니다.
• 기술 부채를 해소하고, 유지보수성과 확장성을 높였습니다.

공통 인증 및 결제 로직 모듈화

❗️ 문제

• MMS 점유인증 및 PG 연동(이니시스·페이팔 등) 로직이 페이지별로 중복 구현되어 있어 유지보수와 재사용에 어려움이 있었습니다.

💡 해결

• 점유 인증 로직과 결제 기능을 공통 유틸 함수와 커스텀 훅으로 추상화하여, 각 페이지에서 일관되게 재사용할 수 있는 구조로 모듈화했습니다.

📈 결과 및 경험

• 기능 추가나 수정 시 중복 코드 없이 빠르게 대응할 수 있는 구조를 마련했습니다.

보안 취약점 대응

❗️ 문제

• 리치 텍스트 에디터를 사용하는 페이지에서 XSS, CSS Injection 등의 보안 취약점이 존재하여 사용자 데이터 보호 측면에서 위험이 존재했습니다.

💡 해결

• sanitize-html 라이브러리를 이용해 허용된 HTML 태그와 속성만 출력되도록 필터링하여, 악성 스크립트 실행 가능성을 차단했습니다.

📈 결과 및 경험

• 서비스 안정성과 신뢰성을 향상시켰습니다.
• 리치 텍스트 에디터를 사용하는 다른 프로젝트에서도 활용할 수 있도록 팀 내 가이드 형태로 공유했습니다.

QR 기반 자동 입장 시스템 도입

❗️ 문제

• 지난 컨퍼런스 현장에서 어드민 페이지에 등록번호를 입력하고 버튼을 눌러 입장하는 과정 때문에 입장 처리가 불편하다는 문제가 있었습니다.

💡 해결

• 티켓 구매 시 QR 코드를 발급하여 문자로 보내고, 현장에선 바코드 리더기로 QR을 스캔하여 입장할 수 있도록 시스템화했습니다.

📈 결과 및 경험

• 운영 리소스 절감 및 현장 혼잡도 완화에 기여했습니다.
• 현장의 비효율적인 흐름을 인지하고, 이를 기술적으로 해결함으로써 실제 운영 환경을 개선하는 경험을 했습니다.

GROO

2023.08 - 2025.06

두나무 및 계열사의 사내 협업과 업무 효율성을 높이기 위한 시스템을 이어 받아 프론트엔드 개발을 담당했습니다. 지속 가능한 프로젝트로 만들기 위해 레거시 코드를 꾸준히 개선하고, 사용자 경험을 향상시키는 데 집중하고 있습니다.

Vue Vuex Element UI Framework7 Playwright Nginx

지속 가능한 프로젝트로의 전환

❗ 문제

• 이전 개발 인력이 빠진 레거시 프로젝트였고, 테스트나 문서화가 부족하여 신뢰성과 유지보수성 모두 낮은 상태였습니다.

💡 해결

• Playwright를 도입하여 일부 기능들에 대해 E2E 테스트를 자동화했습니다.
• Vue2 프로젝트의 런타임 환경과 호환성 문제를 고려하여 Typescript 도입 대신 JSDoc을 활용해 타입 정보 없이도 코드 안정성과 가독성을 확보했습니다.
• 신규 인원이 쉽게 프로젝트에 적응할 수 있도록 워크스페이스/모바일 도메인 관련 내용을 문서화했습니다.
• GitHub Action을 활용한 PR 리뷰어 알림 및 리마인더 스크립트를 작성해 팀내 코드 리뷰 활성화를 유도했습니다.

📈 결과 및 경험

• 테스트 토입과 문서를 통해 기능 수정 시 리스크를 최소화했습니다.
• 기존 불안정한 프로젝트 구조에서 벗어나 지속 가능한 프로젝트 환경으로 전환하는 기반을 마련했습니다.

성능 최적화 및 사용자 경험 중심의 구조 개선

❗ 문제

• 불필요하게 큰 번들 사이즈, 느린 렌더링 속도, 플리커링 현상 등으로 인해 사용자 경험이 저하되었고, API 요청 구조도 비효율적이어서 응답 지연이 발생했습니다.
• 일부 비동기 데이터는 렌더링을 불필요하게 차단하고 있어서 페이지 초기 접근시 렌더링이 매끄럽지 못했습니다.

💡 해결

• 기존 라이브러리를 경량화된 대안으로 교체하고, 코드 스플리팅, gzip 압축 등을 적용하여 번들 크기를 4.3MB → 1.1MB로 최적화했습니다.
• Skeleton UI를 적용해 다중 앱으로 구성된 그룹웨어의 페이지 전환 시 발생하는 플리커링 현상을 완화했고, 병렬 처리 방식으로 API 요청을 개선하여 렌더링 속도를 높였습니다.
• Datadog을 통해 API 응답 속도를 모니터링하고, 기획자·백엔드 개발자와 협업하여 불필요한 호출과 중복 요청을 제거했습니다.

📈 결과 및 경험

• 로딩 시간과 인터랙션 반응 속도가 개선되어 그룹웨어 특성상 많은 기능을 빠르게 전환해야 하는 사용자 환경에서 체감 성능을 향상시켰습니다.

DUROWA

2023.10 - 2023.02 (4개월)

두나무 및 계열사의 채용 관리 시스템 프론트엔드 개발에 참여했습니다. 주로 채용팀을 사용자 인증과 권한 관리에 대한 기능을 개발했습니다.

Next.js TypeScript TanStack Query Zustand Ant Design Vanilla Extract

사용자 인증 및 권한관리 기능 개발

• 이메일을 활용한 점유 인증 기능을 추상화하여 여러 페이지에서 쉽게 재사용할 수 있도록 구현했습니다.
• 역할 기반과 속성 기반 권한 처리를 결합하여 요구사항에 쉽게 대응하도록 구현했습니다.
• 사용자 권한 그룹에 따라 특정 컴포넌트를 숨기는 권한 판별 로직을 커스텀 훅으로 추상화했습니다.
• Okta를 활용한 인증 및 SSO 기능을 구현했습니다.

동료들의 개발자 경험 개선에 기여

• Kubb를 도입하여 OpenAPI 기반으로 API 요청 코드를 자동 생성하고, OpenAPI Generator를 활용해 API 스키마 생성을 자동화하여 개발 효율성을 향상시켰습니다.

CLOUDCAST

2019.12 - 2022.07

디스플레이를 스마트 사이니지로 전환하고, 원격 콘텐츠 관리를 지원하는 CLOUDCAST의 풀스택 개발을 담당하며, 서비스 개발부터 배포까지의 경험을 쌓았습니다.

Vue Spring MySQL Nginx Google Cloud Platform Python Open CV

JSP / jQuery로 작성된 프론트엔드 코드를 Vue로 마이그레이션

• 명령형으로 DOM을 직접 조작하는 방식에서 선언적 UI 렌더링 방식으로 전환하여, 코드 가독성과 개발 편의성을 개선했습니다.

서비스 개발부터 배포까지 전반적인 경험

• DB와 API를 설계하며, 클라이언트에서 효율적으로 데이터를 처리할 수 있도록 구조를 최적화하고, 불필요한 호출을 줄여 성능을 개선했습니다.
• 개발, 빌드, 배포, 배포 후 모니터링 등 전체적인 흐름을 경험했었습니다.

팀의 생산성 향상에 기여

• Swagger를 도입하여 엑셀로 관리되던 API 문서를 자동화하고 불필요한 커뮤니케이션 비용을 감소시켰습니다.
• Python으로 월간 리포트 배치 프로그램을 개발하여, 로그를 엑셀로 변환하고 고객사에 발송하는 반복 업무를 자동화했습니다.
• 서버 이상 발생 시 Slack 알림을 자동 전송하도록 설정하여 모니터링 환경을 개선했습니다.

이미지 전처리에 대한 경험

• 하나의 영상을 여러 디스플레이에 분할 송출할 수 있도록 Python을 이용한 영상 분할 기능을 개발했습니다.
• 이미지의 특징점을 추출하여 벡터로 변환한 후, Elasticsearch에 저장 및 검색 기능을 구현했습니다.