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

UDC (Upbit D Conference)

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

Next.js React TanStack Query Recoil SCSS

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

• 서버 사이드에서 API를 호출하여 필요한 데이터를 미리 받아 초기 UI 렌더링 속도를 최적화
• 서버 사이드 API 요청 실패 시 에러 처리를 위한 fetch 유틸 함수 작성
• 동적 데이터가 포함된 페이지도 SEO 최적화를 고려하여 구현

다양한 기술적 경험

• 이니시스, 페이팔 PG사를 이용한 국내외 결제 및 결제취소 기능 구현
• MMS를 활용한 점유 인증 기능을 추상화하여 여러 페이지에서 쉽게 재사용할 수 있도록 구현
• CSS Injection, XSS 등 보안 취약점을 개선하여 시스템 안정성 향상

오랜기간 업데이트되지 않았던 어드민 시스템의 종속성을 최신화하여 유지보수성과 안정성을 개선

• CRA에서 Vite로 마이그레이션하여 빌드 속도를 개선
• GitHub Dependabot을 활성화하여 종속성에 대한 취약점을 자동 감지하고 패치할 수 있도록 개선

현실의 문제를 기술적으로 해결

• 과거에 진행한 컨퍼런스에서, 현장에서 어드민 페이지에 등록번호를 입력하고 버튼을 눌러 입장하는 과정이 비효율적임을 발견
• 티켓 구매 시 QR 코드를 발급하고, 바코드 리더기로 QR을 스캔하여 입장할 수 있도록 기능을 추가하여 행사 당일 혼잡도 감소에 기여

약 1000명의 참가자가 등록하며 성공적인 2024 컨퍼런스 개최

• 관련 기사
• 지디웹 디자인 어워드 동상 수상

GROO

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

Vue Vuex Element UI Framework7 Playwright Nginx

지속 가능한 프로젝트로의 전환을 위한 테스트 도입, 문서화, 코드 개선

• Playwright를 이용한 E2E 테스트를 도입하여 시스템의 신뢰성과 안정성을 개선
• TypeScript 도입이 어려운 환경에서 JSDoc을 활용해 타입 정보를 추가하여, 코드의 안정성과 유지보수성을 개선
• Datadog을 활용해 API 응답 속도를 모니터링하고, 백엔드 개발자와 협업하여 불필요한 코드 정리 및 데이터 흐름 개선을 통해 프로젝트의 전체적인 구조를 최적화
• 그룹웨어에 대한 도메인 지식이 없어도 새로운 동료가 쉽게 프로젝트에 적응할 수 있도록 워크스페이스 및 모바일 기능 명세 및 문서화

번들 크기 최적화, UI 개선 등을 통해 성능을 개선하고 사용자 경험을 향상

• 경량화된 라이브러리로 교체하고, 코드 스플리팅 및 gzip 압축을 적용하여 번들 크기를 최적화, 페이로드를 4.3MB에서 1.1MB로 줄여 로딩 속도 개선
• 스켈레톤 UI를 적용하여 다중 앱으로 구성된 그룹웨어의 페이지 전환 시 발생하는 플리커링 현상 개선
• 순서가 중요하지 않은 API 호출이 렌더링을 지연시키는 문제를 확인하고, 병렬 처리 방식으로 최적화하여 응답 속도 개선.

DUROWA

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

Next.js TypeScript TanStack Query Zustand Ant Design Vanilla Extract

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

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

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

• Kubb를 도입하여 OpenAPI 기반으로 API 요청 코드를 자동 생성하고, OpenAPI Generator를 활용해 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에 저장 및 검색 기능 구현