📘 [7편] 디자인 시스템 정리 – 깔끔한 UI로 앱 완성도 높이기

📘 [7편] 디자인 시스템 정리 – 깔끔한 UI로 앱 완성도 높이기

---

이제 기능은 거의 완성됐습니다.
이번 편에서는 앱의 전체적인 디자인을 정돈하고,
사용자에게 신뢰감을 주는 깔끔한 UI를 구성합니다.

---

🎯 이번 목표

✅ 다크모드 대응
✅ 디자인 컴포넌트 분리
✅ 공통 스타일 적용 (색상, 폰트, 간격)
✅ 기본 앱 아이콘 / 스플래시 설정 (Expo 사용자 한정)

---

🎨 1. 디자인 토큰 및 스타일 통일

📄 src/constants/theme.js

export const colors = {
  primary: '#007aff',
  background: '#f9f9f9',
  text: '#222',
  card: '#fff',
  border: '#ccc',
  completed: '#d3ffd3',
  darkBackground: '#000',
  darkText: '#fff',
};

export const spacing = {
  s: 8,
  m: 16,
  l: 24,
};

export const fonts = {
  regular: 16,
  large: 20,
  header: 24,
};

---

💅 2. 컴포넌트 스타일 통일

예: 📄 components/ChatMessage.js

import { colors, spacing, fonts } from '../constants/theme';

const styles = StyleSheet.create({
  container: {
    padding: spacing.s,
    marginVertical: spacing.s / 2,
    borderRadius: 10,
  },
  user: {
    alignSelf: 'flex-end',
    backgroundColor: colors.primary,
  },
  bot: {
    alignSelf: 'flex-start',
    backgroundColor: colors.card,
  },
  text: {
    fontSize: fonts.regular,
    color: colors.darkText,
  },
});

---

🌙 3. 다크모드 대응

반응형

React Native 기본 제공 useColorScheme() 사용:

import { useColorScheme } from 'react-native';

const scheme = useColorScheme();
const isDark = scheme === 'dark';

const bgColor = isDark ? colors.darkBackground : colors.background;

적용 예:

<View style={{ flex: 1, backgroundColor: bgColor }}>
  {/* 콘텐츠 */}
</View>

---

🖼 4. 앱 아이콘 & 스플래시 (Expo 사용 시)

1) app.json 설정

{
  "expo": {
    "name": "AI Todo",
    "slug": "ai-todo",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    ...
  }
}

2) 이미지 추가

assets/
├── icon.png
└── splash.png

---

✅ 이번 글 요약

디자인 요소 적용 여부

공통 스타일 파일	✅
다크모드 대응	✅
컴포넌트별 정리	✅
앱 아이콘 설정	✅ (Expo)

---

📘 다음 글 예고

마지막 글에서는 앱을 Android/iOS에 배포하거나
APK 파일로 내보내고, 포트폴리오 또는 블로그에
실제 프로젝트로 정리하는 방법을 안내합니다.

---

 

react native 다크모드 적용,react native 디자인 시스템,react native 공통 스타일,expo splash 설정,expo 앱 아이콘 설정,react native 디자인 가이드,react native darkmode 적용법,react native ui 예제,react native chat 스타일링,react native todo 디자인