미리보기

• 디자인 시스템 리뉴얼
• 디자인 토큰과 디자인 시스템 연동 자동화 링크
• GraphQL codegen에서의 type safe한 Custom Scalar 지원을 위한 플러그인 작성
• 에러 대응을 위한 Sentry 셋업 및 슬랙 봇 도입
• AI 채팅 및 이미지 생성 playground 개발 링크

[문제점] 클라이언트단의 에러 추적 및 대응 프로토콜 부재

[해결]

1. 앱에서 발생하는 에러 종류들 문서화 및 공유. 각 에러 타입 별로 sentry의 tag 및 context에 재현 가능하도록 부가 정보들 기입 후 리포팅하도록 기능 개발
2. Sentry alerts에 각 에러 타입 별 tag와 attribute를 사용해서 R&R이 맞는 사람에게 jira ticket 생성 및 assign + slack 알람이 가도록 설정
3. 클라이언트단에서 더 풍성한 로그 수집을 위해서 sentry에 수집되게 할 데이터도 스크럼 시작시 논의하도록 건의(e.g. UX상 유저가 원치 않는 플로우에 도달하는 경우)

링크

[문제점] 개발 속도가 안나와서 릴리즈가 밀리는 상황

[문제 상세]

1. 라이브러리 없이 퓨어하게 직접 컴포넌트를 짜서 스타일 및 테스트까지 추가하는 과정 그리고 이를 배포해야하는 과정 때문에 디자인이 아직 없을 때 먼저 개발을 시작하기 부담스럽기 때문에 팀원들이 디자인을 기다리는 상황이 발생
2. 코어 컴포넌트와 비즈니스 로직에 맞춘 컴포넌트 간의 구분이 없다보니 코어 컴포넌트가 비대해짐으로써 유지보수 비용이 올라간 상태

[해결]

1. factory패턴이 적용된 mantine으로 코어 컴포넌트를 대체해서 유지보수 비용을 줄일 것을 건의. prop과 styling만 지정된 코어 컴포넌트 패키지를 별도 패키지로 관리하고 각 앱에 필요한 컴포넌트는 각 앱에서 관리하도록 리팩토링 및 방법 문서화
2. styling은 디자인 토큰을 피그마에서 내보낼 수 있도록 하는 자동화 프로세스 구축.

오픈소스 컨트리뷰션 내역입니다. Dotting은 픽셀 에디터 리액트 컴포넌트입니다.

그리기 기능 성능 최적화
PR 링크
Dotting은 캐싱도 하면서 멀티플레이어를 염두에 두고 설계되었기에 획을 긋는 단순한 기능에도 연산이 많이 들어가 있어 획을 많이 그리면 병목이 생겨서 획이 끊기는 문제가 있었습니다. 이를 해결하기 위해 중간에 획이 끊기면 끊긴 만큼 획을 이어주는 기능을 브레젠험 직선 알고리즘을 사용해서 채워넣어 유저 입장에서는 끊김없이 그리는 듯한 경험을 할 수 있도록 했습니다.

줌 인 & 아웃 시 유저 경험 향상
PR 링크
줌 인/ 줌 아웃시 크기 조절 버튼의 인터랙션 가능한 영역이 달라지도록 하는 기능을 제안하고 머지시켰습니다. 특정 사각형을 선택하려고 했는데 줌 아웃되어 있고 선택 가능한 영역이 실제 크기와 같으면 유저는 마우스를 굉장히 섬세하게 움직여야만 해당 사각형을 선택할 수 있게 됩니다. 이는 유저 입장에서 피로한 과정입니다. 이를 해결하기 위해서 줌 인되어 있을 때는 선택 가능한 영역이 작게 줌 아웃되면 커지도록 선형 보간 함수를 사용했습니다.