b.stage

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

Next.js React Zustand SCSS Monorepo

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

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

통합 계정 시스템 구축

• 멀티 테넌시 구조로 인해 사용자가 브랜드마다 별도로 회원가입해야 하는 불편한 경험이 있었습니다.
• OAuth Provider 역할의 통합 계정 시스템을 구축하여, 각 브랜드가 OAuth 방식으로 연동될 수 있도록 구현하고 하나의 계정으로 여러 브랜드를 이용할 수 있도록 개선했습니다.
• 카카오, 네이버, 구글, 애플 등 다양한 SNS 로그인을 연동하고, 앱에서는 SDK 기반 로그인을 지원하기 위해 브릿지를 구현했습니다.
• OAuth 과정 중 노출될 수 있는 민감 정보는 Next.js API Route를 통해 서버 측에서 안전하게 처리했습니다.
• 통합 계정 런칭 2개월 만에 전체 회원 13만 명을 달성하고, 외부 브랜드 연계를 통해 신규 회원 1.2만 명을 확보했습니다.

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 렌더링 방식으로 전환하여, 코드 가독성과 개발 편의성을 개선했습니다.

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

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

팀의 생산성 향상에 기여

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

이미지 전처리에 대한 경험

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