(주)엘리스그룹

서울특별시 강남구 (2022. 08. ~ 2025. 02.)

Elice Design System Squad

(2023. 4. ~ 2025. 02.)

Storybook MUI React TypeScript

• 엘리스 디자인 시스템(v3)의 maintainer로서, 초기 단계의 디자인 시스템부터 전담하여 개발하고 유지보수해왔습니다.
• EDS의 Storybook 문서의 A to Z를 구현하고, 자체 시스템 컴포넌트에 대한 예제 코드를 작성했습니다.
• 컴포넌트의 책임을 명확히 분리하고, 직관적이며 확장 가능한 네이밍을 고민하며 컴포넌트를 설계하였고, 이를 바탕으로 팀원들이 기여할 수 있는 시스템 API 가이드라인을 작성했습니다.
  • 이를 통해 팀원 모두가 기여할 수 있는 디자인 시스템 프로젝트를 만들고 있으며, 모든 작업사항에 대해 코드 리뷰를 진행중입니다.
• MUI 기반의 디자인 시스템을 구축하며 Material-UI 소스코드를 분석하고, 커스텀 스타일을 적용하면서 개선이 필요한 부분을 Issue로 제안했습니다.
• 서비스 전역에서 자주 사용되는 UI 로직과 문제를 해결하기위한 공통된 로직을 hook, hoc로 모아 @elice/mui-utils 라이브러리를 만들어 팀원들의 DX를 향상시키려 노력했습니다.
• 팀 내 명료하지 않은 디자인 원칙/ 컨벤션이나 웹 접근성, 구현 방식 등 복잡한 의사결정 문제에 주도적으로 참여하고, 문제를 정의하고 적극적으로 의견을 제시합니다.
• 컴포넌트의 색상 커스텀 과정에서 색상 대비가 접근성 기준을 충족하지 못함을 발견하여, 디자이너에게 색상 대비 접근성을 확인해야함을 제안했고, 이를 계기로 디자인팀에서 디자인시스템의 모든 컴포넌트 색상에 대한 접근성을 체크하게 되었습니다.

UX party

(2023. 9. ~ 2023. 12.)

통합검색 기능 UX 개선

Accessibility

• 웹 접근성을 고려하여 기존 마크업을 표준 HTML 구조로 개선했습니다.
• 키보드 내비게이션 방식을 디자이너와 함께 고민하며 다양한 레퍼런스를 분석했고, W3C의 Accordion 및 List 패턴을 참고해 키보드 접근성을 향상시켰습니다.
• 디자인 시스템을 사용하더라도 키보드 접근성을 완벽히 보장하기 어렵다는 점을 깨달았고, 이를 계기로 웹 접근성 가이드라인에 대한 관심이 더욱 깊어졌습니다.

강의실 수동녹화 기능 및 녹화 기록 UX 개선

websocket

• 기존 자동 녹화 기능에 수동 녹화 시작/종료 버튼 및 자동 종료 기능을 추가해 사용자가 직접 녹화를 관리할 수 있도록 개선했습니다.
• 10초 주기로 녹화 파일 상태를 polling하여 대기, 중단, 완료, 실패 등의 상태를 실시간으로 업데이트하고, edge case들을 찾아 디자이너 및 백엔드 개발자와 협력하여 유저에게 명확한 정보를 제공할 수 있도록 고민했습니다.
• 마이크, 웹캠 등의 아이콘 버튼 라벨을 어떻게 작성해야 직관적인 정보 전달이 가능한지 디자이너와 함께 논의하며 UX 개선을 진행했습니다. (관련 블로그 글) (opens in a new tab)

Cloud Party

(2024. 12. ~ 2025. 02.)

• nx 기반 monorepo 구조의 클라우드 앱을 유지보수하며, 서비스 전반에서 반복적으로 사용되는 제품 사양 Spec Card, 시간 당 pricing 등의 UI 로직을 @elice/cloud-components 라이브러리에 공용화했습니다.
• 4가지 클라우드 서비스에서 공통적으로 사용할 Layout 컴포넌트를 마이그레이션하고, Sticky Footer 및 Side 영역 대응이 용이하도록 유지보수했습니다.

모델 라이브러리 기능 및 ML API UX 개선

• 모델 Card의 반응형 UI 개선을 위해 breakpoint별 스펙을 제안하고, 페어 프로그래밍을 통해 UI를 최적화했습니다.
• 반복적으로 사용되는 Filter UI 패턴을 디자인 시스템 컴포넌트로 도입하고, 리뷰를 통해 팀원의 디자인 시스템 기여를 적극적으로 지원했습니다.
  • 책임이 큰 컴포넌트의 재설계 필요성을 제기하고, 설계 단계부터 문서를 작성하여 리뷰를 진행했습니다.
  • 컴포넌트의 역할을 적절히 분리하여 구현할 수 있도록 제안하며, 모든 MR(merge request)의 리뷰에 참여했습니다.

LXP Party

국제화를 위한 Intl 개선 및 다국어 지원

react-intl

• 기관별로 플랫폼 내 용어(예: ‘과목’, ‘선생님’ 등)를 커스텀할 수 있도록 react-intl 기반의 @elice/intl 라이브러리 개발 및 유지보수에 참여했습니다.
• 지원 언어 확장을 용이하게 하기 위해 서비스 전반에 걸쳐 마이그레이션을 리드했습니다.
  • 팀원들이 쉽게 따라올 수 있도록 라이브러리 설명 문서 및 커스텀 언어 적용 스크립트를 작성했습니다.
  • @elice/intl 도입 후, 각 서비스에 흩어져 있던 locale 관련 로직(default locale, fallback 처리 등)을 한 곳에서 통합 관리할 수 있게 되었습니다.
• 글로벌 확장을 위한 태국어 및 일본어 지원을 포함한 국제화 작업을 서비스 전반에 걸쳐 진행했습니다.

학습 툴바 기능

React WebSocket react-draggable

• WebSocket을 활용해 교사 화면을 학생 화면과 실시간 동기화하는 기능을 개발했습니다.
• 동기화 가능 여부 및 대상을 판단하는 복잡한 조건들을 커스텀 훅으로 분리하여 유지보수성과 재사용성을 높였습니다.
• 툴바 내 수업자료 화면 동기화, 조별 활동, 화면 하이라이트, 화이트보드, 타이머 기능을 위한 조건 검증 및 적절한 tooltip 표시 로직을 custom hook으로 통합했습니다.
• 조별 활동 기능을 개선하며 학생 인원수, 수업 공개 여부, 유저 권한 등에 따라 발생하는 다양한 edge case를 정리하고, 이를 디자이너 및 백엔드 개발자와 논의하며 해결했습니다.

Elice KDT 랜딩 페이지 - 지원자 설문 페이지

(2022. 12. ~ 2023. 1.)

react-hook-form Next.js Graphql Data Schema 설계

• 설문 데이터 구조를 JSON 기반으로 설계, 하나의 survey가 여러 개의 section을 포함하고, section이 다시 여러 개의 question을 포함하는 계층적 구조를 정의했습니다.
• 디자이너와 협업하여 9가지 주요 문항 타입(예: 이메일 필드, 주소 필드, 단일/다중 선택 등)을 정리하고, 각 타입별 validation rule 및 추가 기능을 제안했습니다.
• 운영팀이 문항을 쉽게 작성하여 기수 별 설문지를 완성할 수 있도록 문항 타입 및 데이터 구조 설명 문서를 Notion에 정리하여 원활한 커뮤니케이션을 지원했습니다.

Elice KDT 랜딩 페이지

(2022. 08. ~ 2022. 10.)

Contentful Next.js GraphQL

• 운영팀이 손쉽게 랜딩 페이지를 리뉴얼할 수 있도록 Contentful CMS 기반의 랜딩 페이지를 개발했습니다.
• 운영팀의 다양한 요구사항을 반영하기 위해 각 섹션 컴포넌트 구조를 유연하게 설계했습니다.
• MUI를 처음으로 서비스에 도입하여 KDT 전용 theme을 제작하고, 실험적으로 커스텀 스타일을 적용했습니다.

Growth Party

(2024. 07. ~ 2024. 11.)

• Growth 팀에서는 해외 외주 개발자들과의 협업을 중심으로 작업이 진행되었습니다.
  • 외주 개발자의 태스크를 매일 관리하며, 진행 중 막히는 부분이나 잘못된 부분을 리뷰하여 목표 달성을 가속화했습니다.
• elice.io에 LXP, Cloud, Test를 시험적으로 사용할 수 있는 Free Trial 기능 추가
• 대규모 브랜딩 캠페인을 위한 제품 및 메인 페이지 개편 리뷰
  • CTA 및 Free Trial 관련 이벤트 정의 및 삽입
• Lighthouse 테스트 점수 개선 작업 리뷰