PROJECT INFO

DGSW 학생 관리앱 "도담도담" 내부에 미니앱을 배포할 수 있도록 해주는 서비스.

별도의 스토어 설치, 클라우드 서비스에 배포하지 않아도 앱 출시 및 사용이 가능함.

DDS (도담도담 디자인 시스템), Bridge-Kit 제공.

→ 빠른 프로토타이핑 제공, 네이티브 기능에 접근 가능하도록 구성.

브릿지 통신을 이용하여 미니앱이 렌더링되는 웹뷰와 네이티브 기능을 제공하는 앱이 데이터를 주고 받을 수 있는 기능을 구현.

CONTRIBUTIONS

미니앱과 도담도담 앱 사이의 브릿지 통신을 추상화하고 API를 구축하였습니다.

SDK의 Bridge Provider, Bridge Core로 응답과 요청을 중앙화하여 브릿지 통신/사용 로직을 분리하였습니다.

추상화와 API 구축을 통해 네이티브 기능을 추가 시에 기능 구현에만 집중할 수 있게 되었습니다.

index.css, global.css에서 참조할 수 있는 CSS 파일에 색상 변수, Tailwindcss 변수를 등록하여 컬러 시스템을 구현하였습니다.

CSS와 Tailwindcss가 아닌 스타일링 도구를 써도 일관된 색상을 사용할 수 있도록 colors 객체 내에 key에 색상의 이름을, value에 CSS 변수를 저장하여 JS에서 색상 변수를 참조 하도록 구현하였습니다.

html 태그에 data-theme 속성을 추가하여 테마 정보를 저장하고, 스크립트를 통해 로컬스토리지 참조 후 저장된 theme 값으로 속성을 변경해주는 기능을 구현했습니다.

SVG 코드를 직접 컴포넌트에서 사용하는 아이콘 컴포넌트를 구현했습니다.
이를 통해 이미지로 아이콘을 가져오는 방식에 비해 렌더링 시간을 0에 수렴하게 되었습니다.

ComponentProps 속성을 통해 html 태그들의 기본 속성을 상속받은 UI 컴포넌트를 구현하였습니다.

컴포넌트를 테스트하고 문서를 제공하는 웹을 구현하였습니다.StoryBook은 내부 UI 테스트에 사용하는 데에 반해 문서와 체험 환경을 함께제공하고 있습니다.

스택 뷰를 구현하여 React 앱에서 iOS 앱과 네비게이션 측면에서 유사한 UI/UX를 구현했습니다.

웹뷰앱에서 React-Router를 사용하면 앱의 UI/UX를 제공하는 데에 한계가 있다고 생각하여 자체 네비게이션 SDK를 구현하였습니다.

TROUBLE SHOOTINGS

통신 과정에 Acknowledge 단계 추가, 수신 확인 대기 큐로 문제를 해결 했습니다.

기존의 요청-응답 과정에서 백그라운드-포그라운드 전환이 일어난 후 네이티브 모듈이 완료되면 앱은 응답을 보내지만, 웹앱의 응답 대기 큐가 초기화되어 정상적으로 응답을 처리할 수 없었습니다.

수정 방안으로 앱 측에도 작업 큐를 만들고, 응답 전송 후 수신 확인이 오면 작업을 큐에서 삭제합니다.

웹에서는 첫 로딩에서 망각한 통신 기록을 요청하고, 만약 망각한 작업이 존재한다면 해당 작업의 결과를 응답 구독자들에게 전달하여 기능 동작을 완료합니다.

스택 뷰가 손가락의 위치를 따라갈 때 위치를 상태가 아닌 transform 속성을 조절해 리렌더링이 일어나지 않도록 했습니다.

추가 효과로 CSS 애니메이션을 사용하는게 아니라서 기기가 절전 모드일 때에도 프레임드랍이 일어나지 않게되었습니다.

Emotion의 CacheProvider를 사용하여 Hydration 에러를 방지하였습니다.

Emotion이 생성한 스타일 클래스명이 서버 렌더링 단계와 클라이언트의 hydration 단계에서 달라져서 발생한 문제임을 확인하고 CacheProvider를 클라이언트 컴포넌트로 래핑한 후 layout.tsx에 삽입하였습니다.