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

b.stage

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

Next.js React Zustand SCSS Monorepo

프론트엔드 성능 개선

• 서비스가 느리다는 CS가 지속적으로 인입되어, OpenTelemetry 기반으로 서버 렌더링 응답 시간, Web Vitals 등 성능 지표를 수집하고 모니터링 환경을 구축했습니다.
• 수집된 데이터를 기반으로 병목이 되는 페이지를 식별하고, 점진적으로 로딩 성능을 개선하고 있습니다. CS 인입 전에 성능 저하를 선제적으로 감지할 수 있게 되었습니다.

통합 계정 시스템 구축

• 멀티 테넌시 구조로 인해 사용자가 브랜드마다 별도로 회원가입해야 하는 불편한 경험이 있었습니다.
• OAuth Provider 역할의 통합 계정 시스템을 구축하여, 각 브랜드가 OAuth 방식으로 연동될 수 있도록 구현하고 하나의 계정으로 여러 브랜드를 이용할 수 있도록 개선했습니다.
• 카카오, 네이버, 구글, 애플 등 다양한 SNS 로그인을 연동하고, 앱에서는 SDK 기반 로그인을 지원하기 위해 브릿지를 구현했습니다.
• OAuth 인증 흐름에서 토큰 교환, 시크릿 검증 등 민감한 로직을 서버 컴포넌트와 API Route로 분리하여 클라이언트 번들에 노출되지 않도록 설계했습니다.
• 통합 계정 런칭 2개월 만에 전체 회원 13만 명을 달성하고, 외부 브랜드 연계를 통해 신규 회원 1.2만 명을 확보했습니다. 현재 누적 가입자 700만 명을 확보하며 플랫폼의 성장 기반이 되었습니다.

웹뷰 세이프 에리어 테마 연동

• 앱 세이프 에리어 색상이 흰색으로 고정되어, 다크 모드에서 화면 톤이 깨지는 문제가 있었습니다.
• 웹뷰 최초 렌더링 시점에 브랜드별 테마 값을 브릿지로 앱에 전달해 세이프 에리어 색상을 결정하도록 개선하여, 색상 불일치 관련 CS를 완전히 해소했습니다.
• 브릿지 호출 전후의 공백 구간을 줄이기 위해 초기 fallback 값을 적용하고, 브랜드별 테마 값을 캐싱하여 화면 깜빡임을 최소화했습니다.

UDC (Upbit D Conference)

두나무가 매년 개최하는 블록체인 컨퍼런스의 2024년, 2025년 컨퍼런스 페이지 및 어드민 시스템 프론트엔드 개발을 담당했습니다. 1000명이 넘는 참가자가 등록한 2024 컨퍼런스를 성공적으로 개최하고, 지디웹 디자인 어워드 동상을 수상했습니다.

Next.js React TanStack Query Recoil SCSS

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

• 다국어 콘텐츠를 클라이언트 사이드에서 페칭하는 구조로, 초기 렌더링 시 빈 콘텐츠가 노출되어 SEO에 불리한 상태였습니다.
• next-translate를 이용하여 다국어 콘텐츠를 일관되게 관리하고, getServerSideProps를 적극 활용해 서버에서 페이지별 콘텐츠를 사전에 렌더링하도록 구현했습니다.
  • 서버 사이드 렌더링 중 에러가 발생하면 정상적인 페이지나 대체 콘텐츠를 보여줄 수 있도록 에러 핸들링 로직을 추가했습니다.
• 다국어 페이지에도 SEO가 적용되어 검색 엔진에 정상적으로 노출되었고, 초기 렌더링 시 해당 언어의 콘텐츠가 즉시 표시되도록 개선했습니다.

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

• 기존 시스템이 Create React App(CRA) 기반으로, 종속성 다수가 수년간 업데이트되지 않아 보안과 호환성 측면에서 위험이 존재했습니다.
• Vite로 마이그레이션하고, 주요 라이브러리를 최신화하여 빌드 시간을 3분대 → 1분 10초대로 단축했습니다.
• GitHub Dependabot을 설정하여 보안 취약점 자동 감지 및 패치 프로세스를 마련했습니다.

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

• 페이지별로 중복 구현되어 있던 MMS 점유인증 및 PG 연동(이니시스·페이팔 등) 로직을 공통 유틸 함수와 커스텀 훅으로 추상화하여 일관되게 재사용할 수 있는 구조로 모듈화했습니다.

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

• 컨퍼런스 현장에서 어드민 페이지에 등록번호를 수동 입력하여 입장 처리하는 방식이 비효율적이었습니다.
• 티켓 구매 시 QR 코드를 발급하여 문자로 보내고, 현장에선 바코드 리더기로 QR을 스캔하여 입장할 수 있도록 시스템화하여 운영 리소스 절감 및 현장 혼잡도를 완화했습니다.

GROO

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

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

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

Next.js TypeScript TanStack Query Zustand Ant Design Vanilla Extract

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

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

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

• Kubb를 도입하여 OpenAPI 기반으로 TanStack Query 호출 코드까지 자동 생성하고, OpenAPI Generator를 활용해 API 스키마 생성을 자동화하여 API 연동 시 수동 코드 작성 없이 바로 사용할 수 있는 환경을 구축했습니다.

CLOUDCAST

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

Vue Spring MySQL Nginx Google Cloud Platform Python Open CV

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

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

API 설계 및 서비스 운영

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

팀의 생산성 향상에 기여

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

이미지 전처리에 대한 경험

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

Mac OS의 UI를 웹으로 구현한 토이 프로젝트입니다. 평소에 구현해보고 싶은 기능들을 플레이그라운드 형태로 개발했습니다.
프로젝트 링크   GitHub 링크

React TypeScript Tailwind CSS

• 오디오 재생 관련 로직을 커스텀 훅으로 추상화했습니다.
• Canvas API를 활용하여 Snake 미니게임 앱을 구현했습니다.
• iframe을 활용하여 현재 페이지 내에서 블로그 콘텐츠를 바로 볼 수 있도록 Safari 앱을 구현했습니다.
• 앱 컴포넌트를 리사이징 할 때 state 대신 style을 직접 변경하여 렌더링 최적화 작업을 진행했습니다.

프로그래머스 데브코스 프론트엔드 3기 최종 프로젝트로, 책장 기반 독서 소셜 플랫폼의 프론트엔드 개발을 담당했습니다. 교육과정 종료 후에도 완성도를 높이는 데 집중하며, 다양한 기술적 시도를 이어갔습니다.
프로젝트 링크  GitHub 링크

Next.js TypeScript TanStack Query Recoil Headless UI Tailwind CSS

• transform CSS 속성을 이용한 3D 책 컴포넌트 구현했습니다.
• 도서 이미지를 제공하는 카카오 서버와의 CORS 이슈를 해결하기 위한 프록시를 설정했습니다.
• Suspense와 ErrorBoundary를 이용해 상태에 따른 UI를 선언적으로 렌더링하도록 구현했습니다,
• Suspense와 TanStack Query를 같이 사용할 때 쿼리의 성공 상태를 보장하는 커스텀 훅을 작성했습니다.
• Presentational & Container 패턴을 적용하여 컴포넌트의 역할을 명확히하고 재사용성을 향상시켰습니다.
• 서버 컴포넌트를 활용하여 JS 로드 크기를 223KB -> 102KB로 약 52% 감소시켰습니다.

개발하면서 겪은 경험을 간단한 메모부터 자세한 글까지 다양한 형태로 기록하고 있습니다.
프로젝트 링크  GitHub 링크

Next.js TypeScript TanStack Query Recoil Headless UI Tailwind CSS

• 도메인 구입 후 DNS 설정을 구성했습니다.
• 모든 페이지를 빌드 타임에 정적 생성하여 런타임 비용 없이 운영하고 있습니다.