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

UDC (Upbit D Conference)

2024.05 - 진행중

두나무가 매년 개최하는 블록체인 컨퍼런스의 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 - 진행중

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

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에 저장 및 검색 기능을 구현했습니다.