React Native Expo Router 기반 소셜 커뮤니티 앱 '커넥트' 1인 개발 UI 개선 및 기능 구현 기록

핵심 기술

1인 개발자가 React Native와 Expo Router를 사용하여 소셜 커뮤니티 앱 '커넥트'의 UI를 개선하고 핵심 기능 화면(게시글 작성, 운세/타로)을 구현하는 과정을 상세히 기록했습니다. 사용자의 피드백을 반영하여 UX와 디자인 완성도를 높이는 데 중점을 두었습니다.

기술적 세부사항

• 헤더 UI 개선: Expo Router의 기본 헤더 높이를 headerStyle 옵션을 사용하여 조절하고, 그림자 대신 얇은 경계선을 추가하여 디자인을 개선했습니다.
  typescript headerStyle: { backgroundColor: '#fff', height: 70, // 헤더 높이를 직접 지정 borderBottomWidth: 1, // 그림자 대신 경계선 추가 borderBottomColor: '#f3f4f6', },
• 안드로이드 탭 바 가려짐 문제 해결: useSafeAreaInsets 훅을 사용하여 시스템 내비게이션 바에 가려지는 탭 바 문제를 해결하고, 하단 여백을 동적으로 조절했습니다.
  typescript tabBarStyle: { height: 60 + insets.bottom, // 기본 높이에 하단 여백 추가 paddingBottom: insets.bottom, // 아이콘이 가려지지 않도록 패딩 추가 },
• 커스텀 로고 적용: react-native-svg 라이브러리를 사용하여 벡터 그래픽 기반의 로고 컴포넌트를 구현하고, headerLeft 옵션을 통해 헤더에 배치했습니다.
• 게시글 작성 화면 구현: Expo Router의 app 폴더 최상위 파일 생성 및 presentation: 'modal' 옵션을 활용하여 아래에서 위로 올라오는 모달 애니메이션으로 글쓰기 화면(writePost.tsx)을 구현했습니다.
  typescript <Stack.Screen name="writePost" options={{ presentation: 'modal', headerShown: false, // 커스텀 헤더를 사용할 것이므로 기본 헤더는 숨김 }} />
• 운세/타로 화면 구현: ImageBackground 컴포넌트와 그라데이션 오버레이를 활용하여 시각적으로 매력적인 운세/타로 메뉴 카드 UI를 구현했습니다.

개발 임팩트

Expo Router의 라우팅 및 화면 관리 기능을 효과적으로 활용하는 방법을 보여주며, 실제 사용자 피드백을 바탕으로 UI/UX를 개선하는 실질적인 개발 과정을 공유합니다. 1인 개발 환경에서 필요한 UI 컴포넌트 구현 및 디자인 패턴 적용에 대한 인사이트를 제공합니다.

커뮤니티 반응

(원문에 커뮤니티 반응에 대한 언급 없음)

톤앤매너

1인 개발자의 생생한 경험과 기술적 구현 과정을 전문적이면서도 친근한 톤으로 전달하며, 코드 예시와 함께 구체적인 해결책을 제시합니다.