미리보기

주요 역할

아이들나라(OTT)의 스마트 TV 버전 WebView 개발을 담당했습니다. 이 과정에서 기술 개선, 성능 최적화, 개발 도구 및 코드 품질 관리에 주력했습니다. 또한, 다양한 플랫폼에 맞춤화된 개발과 UI/UX 디자인, 애니메이션 개발에도 참여했습니다.

팀 내 기여

• SVN과 jQuery를 사용하는 팀원들을 지원하기 위해 세미나를 주최하고, 스터디 그룹 및 코드 리뷰 문화를 도입하여 기술 부채를 줄였습니다.
• swiper, redux 등 주요 라이브러리의 사용에 있어 발생하는 문제를 인식하고, 이를 개선하기 위해 정보 공유 허브를 구축했습니다.
• 공용 컴포넌트 사용을 장려하기 위해 Jsdoc과 상세한 주석을 통해 컴포넌트의 설명과 사용 방법을 제공했습니다.

기술 스택 : React, Enact(TV 포커스 관리), SCSS, Redux, Git, Jira

스마트 TV WebView 개발을 하면서, 리모컨의 4방향 키보드 입력과 포인터 모드에 맞춰 포커스를 관리하는 것이 주된 도전이었습니다.
이 중 기억에 남는 것은 포커스 관련된 상태 관리의 복잡성과 성능 문제를 경험했습니다.

1. 복잡한 상태 관리 해결

   • TV 사용 시나리오에 맞춰 8가지 이상의 포커스 관리 시나리오가 복잡하게 얽혀있었고, 이를 중앙화와 useFocus 훅을 통한 캡슐화로 관리 효율성 향상시켜 비용을 감소하였음

2. GPU 가속을 통한 성능 최적화

   • 프레임 끊김 문제를 translate3D를 통한 GPU 가속으로 해결하여 사용자 경험 개선.

3. 타이머 대신 이벤트 및 동기 함수 활용

   • setTimeout의 불안정성을 이벤트 연결 및 동기 함수로 대체하여 UI 타이밍 정확도와 일관성 향상.

기술 스택 : TypeScript, Next.js, React-image-crop, SWR, TailwindCSS, Recoil
Github

주요 개선 사항

이미지 로드 전 유저 경험 개선

• onLoadingComplete를 사용하여 이미지가 로딩 중일 때 로딩 화면을 표시함.
• 이미지가 완전히 로드될 때까지 선택을 막아, 로드 전에 이미지를 선택하는 문제를 해결.

이미지 자르기 문제 해결

• URL 이미지의 디코딩 문제를 base64 인코딩으로 해결.
• 사용자가 이미지가 올바르게 잘렸는지 확인할 수 있도록 모달 추가.

리팩토링 경험

• 2개월에 걸친 리팩토링 과정에서 관심사 분리,컴포넌트 화 등을 통해 코드의 가독성 및 유지보수성 개선.