최성익

Work Experiences

채널코퍼레이션

2021.01 ~ 현재 | 프론트엔드 엔지니어 (IC)

디자인 시스템 라이브러리

사내 디자인 시스템, Bezier의 React 구현체이자 오픈 소스 라이브러리인 bezier-react의 메인 컨트리뷰터입니다. 라이브러리를 운영하고 개발함과 동시에 디자이너와 커뮤니케이션하며 디자인 시스템 전반을 개선해나가고 있습니다.

• 재사용 가능한 컴포넌트 설계 및 구현: 디자인 시스템과 엔지니어의 요구 사항에 맞는 다양한 재사용 가능한 컴포넌트를 설계하고 구현했습니다.
• 피그마 플러그인 구현: 별도의 커뮤니케이션 없이 디자이너가 직접 피그마 플러그인을 통해 GitHub 레포지토리에 아이콘 업데이트를 할 수 있도록 자동화하여 팀의 워크플로우를 개선했습니다. (채널톡 기술 블로그 - 피그마 플러그인으로 아이콘 업데이트 자동화하기).
• svg 아이콘 패키지 구현: 트리 쉐이킹이 가능한 svg 아이콘 패키지를 구현했습니다. 애플리케이션의 번들 사이즈를 줄이고, 컴포넌트 라이브러리와 아이콘 에셋의 의존성을 분리하여 모바일 등 다른 환경에서도 아이콘을 단일 진실 공급원으로서 독립적으로 사용할 수 있도록 개선했습니다. (npm 패키지).
• 마이그레이션 CLI 툴 구현: 대규모 마이그레이션을 소스 코드 정적 분석을 통해 자동화하여 큰 변경에 대한 비용을 감소시켰습니다. 또한, 라이브러리에 기여해주시는 다른 엔지니어에게도 마이그레이션 코드를 작성하는 책임을 부여하여 팀 내 코드 퀄리티를 일관되게 유지하고, 기여 과정을 더 효율적으로 개선했습니다. (npm 패키지).
• 스토리북 자동 배포 구현: Chromatic과 GitHub Action을 사용하여 Pull Request별로 변경 사항에 대한 스토리북 링크를 코멘트에 추가하는 기능을 구현했습니다. 다른 엔지니어가 변경 사항을 확인하기 위해 거쳐야 하는 과정을 단순화시켜 팀의 생산성을 개선했습니다.
• 테스트 코드 작성: 사용자 인터랙션 기반의 단위 테스트 작성으로 라이브러리의 안정성을 향상시켰습니다. (테스트 커버리지 43% → 84%.)¹
• 모노레포 구조 도입: 모노레포 구조를 도입, 레포지토리의 확장성을 높여 컴포넌트 라이브러리 외 다양한 패키지를 환경 설정 등에 대한 부담 없이 추가할 수 있는 환경을 마련했습니다. 또한 그에 맞는 자동 버전 관리 및 배포 환경을 구성하여 라이브러리 기여 과정의 허들을 낮췄습니다.

기업용 SaaS 애플리케이션

채널 데스크(기업용 SaaS 애플리케이션) 팀에 속하여 채팅, 마케팅, 객관식 챗봇, 통계 등 애플리케이션 전반의 기능을 유지보수하고 개발하는 일을 담당하고 있습니다.

• 권한 세분화 TF 웹 팀 리드: 미들웨어를 통한 전역 권한 에러 처리 방식을 설계하고 구현했습니다. 스크럼 진행, 문서화 및 문서 기반의 커뮤니케이션, 태스크 상세 분석 및 할당 & 추적하여 프로젝트의 가시성을 높였습니다.
• z-index 개선: 애플리케이션에 존재하던 350개가량의 z-index 매직 넘버를 디자인 시스템 사용 및 쌓임 맥락을 정리하여 모두 제거했습니다. 묵혀왔던 문제점에 대해 개선점을 먼저 제안하고 적용하여 관련 UI 버그 발생률을 획기적으로 낮췄습니다.
• 서포트봇 폼 릴리즈: 채널 데스크 애플리케이션과 채널 프론트(고객용 메신저) 애플리케이션에서 함께 사용할 수 있는 공용 폼 컴포넌트를 설계하고 구현했습니다. 양측을 모두 고려한 컴포넌트 인터페이스를 설계하여 엔지니어의 사용성을 높이고, 웹 접근성을 준수하여 가능한 한 많은 사람이 제품을 사용할 수 있도록 구현했습니다.
• 다크모드 릴리즈: 채널톡 데스크탑 앱의 Cross-platform(Windows, macOS) vibrancy effect, Tray icon 및 Splash 페이지를 포함한 완성도 높은 다이내믹 테마를 구현했습니다.
• 상담통계 리뉴얼 릴리즈: 차트 라이브러리를 커스텀하여 요구사항에 맞는 다양한 형태의 차트를 구현했습니다.

Personal Projects

Gatsby Starter Apple

2020.08 ~ 현재 | 메인 컨트리뷰터

정적 사이트 생성기인 Gatsby 기반의 오픈 소스 블로그 스타터 템플릿입니다. 접근성 및 성능 관련 모범 사례와 설치 및 기여에 대한 문서를 잘 포함하고 있다고 판단되어² Gatsby Offical Community Starter Library에 등록되었습니다.³

• 성능: Google Lighthouse 100점을 달성했습니다.⁴
• 접근성: 웹 접근성을 준수하도록 구현했습니다. 스크린 리더 친화적으로 마크업하고, 모바일 버거 메뉴에 포커스 트랩을 사용하여 높은 키보드 접근성을 구현했습니다.
• 다이내믹 테마: 외부 서비스(iframe)의 테마 변경까지 고려한 디테일 높은 다이내믹 테마 기능을 구현했습니다.
• UI/UX 디자인: 별도의 UI 프레임워크를 사용하지 않고 직접 디자인했습니다.