Expo App

수주 전 기술 검토 과정에서 Expo 앱의 탐색과 공통 화면 기반을 구성했습니다. 탭이 있는 화면과 일반 스택, 모달과 인증 그룹을 나누고 Skia Atlas와 Reanimated를 사용한 그래픽 예제도 만들었습니다. 출시한 앱의 운영 사례와는 구분해 구현과 미완성 범위를 정리했습니다.

검증 질문

질문	구현한 부분	더 확인할 부분
탭 화면과 상세, 모달을 어떻게 나눌 것인가	route group과 공통 Stack 구성	단말의 전환과 뒤로가기
화면 공통 기본값은 어디에 둘 것인가	safe area와 keyboard box, 공통 UI	플랫폼별 실제 입력 동작
이미지 프레임과 개체 위치를 어떻게 그릴 것인가	Skia Atlas와 시간별 source rect, transform buffer	반응성 전달과 실제 단말 성능

개요

항목	내용
기록 시기	2025.09 ~ 2025.10의 Git 기록
구성	초기 화면 기반과 후속 확장 저장소를 하나의 기술 검토로 묶었습니다
역할	앱 탐색과 공통 UI, 그래픽 실험 구현
기술	React Native, Expo, Expo Router, TypeScript, Unistyles, Reanimated, Skia
단계	수주로 이어지지 않아 PoC에서 마무리한 기술 검토

구현과 판단

탭 shell과 나머지 탐색을 구분하기

검증 질문. 탭을 유지할 화면과 탭 밖의 상세, 모달과 인증 흐름을 같은 방식으로 다루면 화면 구조와 뒤로가기가 복잡해질 수 있습니다.

구현. 루트 Stack 아래에 shell, 일반 stack, modal과 auth 그룹을 나눴습니다. shell에는 Tabs를 두고 상세와 설정, 모달은 별도 경로에서 구성했습니다.

flowchart TB
    Root["루트 Stack"] --> Shell["shell: Tabs"]
    Root --> Stack["일반 stack"]
    Root --> Modal["modal 그룹"]
    Root --> Auth["auth 그룹"]

남은 과제. 경로와 화면 파일이 등록된 것만으로 기능이 완성된 것은 아닙니다. 인증 화면에는 안내 문구만 있는 표본도 있어 실제 인증과 서버 연동을 구현한 앱으로 설명하지 않았습니다.

플랫폼 기본값과 화면별 재정의를 함께 두기

검증 질문. 키보드를 피하는 동작처럼 플랫폼에 따라 기본값이 달라지는 UI를 각 화면에서 반복하지 않는 방법을 검토했습니다.

구현. keyboard box에서 플랫폼별 기본 동작을 정하고 호출부가 필요한 속성을 재정의하도록 구성했습니다.

const initProps = {
  behavior: Platform.OS === "ios" ? "padding" : "height",
  keyboardVerticalOffset: Platform.OS === "ios" ? 12 : 0,
};
const mergedProps = { ...initProps, ...restProps };

남은 과제. 기본값을 구성한 코드와 실제 단말에서 입력 필드가 가려지지 않는지 확인하는 과정은 구분했습니다. 화면별 입력과 safe area의 조합을 더 확인해야 합니다.

스프라이트 프레임과 개체 위치를 분리하기

검증 질문. 스프라이트 시트에서 현재 프레임을 고르는 일과 여러 개체의 화면 위치를 계산하는 일을 나눠 검토했습니다.

구현. clock에서 프레임 번호를 계산하고 source rect buffer에 이미지에서 자를 영역을 넣었습니다. transform buffer에는 각 개체의 좌표를 전달하고 Atlas로 그렸습니다.

구현 코드: 시간에서 프레임 번호 계산

const clock = useClock();
const frame = useDerivedValue(() => {
  "worklet";
  return Math.floor((clock.value / 1000) * fps) % totalFrames;
});

표본의 fps는 프레임 선택에 사용하는 설정값입니다. 측정된 단말 FPS를 뜻하지 않습니다.

남은 과제. 진행률과 위치를 넘기는 경로가 실제로 매 프레임 갱신되는지, Skia buffer와 어떻게 동기화되는지 재현이 필요합니다. 단말 FPS와 메모리 개선율은 측정한 결과로 추가하지 않았습니다.

결과와 활용

앱 탐색과 공통 UI, 그래픽을 검토한 코드를 남겼습니다. 등록된 화면 파일과 완성된 기능을 구분했고 mock 데이터는 운영 사용자 데이터와 구분했습니다. 이 사례는 앱 구조의 선택과 그래픽 전달 경로를 설명하는 PoC로 정리했습니다.