[헬스 다이어리 앱 개발] 9편 - UI 디자인

보기 좋은 떡이 먹기도 좋다고, 앱을 한번 보기 좋게 만들어보자.

 

디자인 컨셉은 포카리 스웨트다.

헬스 끝나고 마시는 포카리 스웨트가 좋아서, 포카리 스웨트처럼 청량한 핼스 앱을 만드는 것이 목표다.

 

 

 

 

포카리 스웨트 공식 홈페이지에서 포카리 스웨트의 블루 컬러는 pantone300C(#005eb8) 이라고 한다.

배경색, 메인색은 이 블루 컬러로 글자색, 보조색은 흰색으로 정했다.

사용하고 있는 UI 라이브러리 react-native-paper도 이에 맞게 커스터마이징해주었다.

포카리스웨트

 

Theming · React Native Paper

 

 

포카리 스웨트 색깔 적용

청량한 느낌이 나긴 하는데,  폰트가 촌스럽다.

폰트를 바꿔보자.

 

 

 

 

구글은 무료로 많은 폰트를 제공해준다.

난 그 중에서 둥글둥글한 Gamja Flower을 사용했다.

Google Fonts

 

 

다운 받은 ttf 파일을 /assets/fonts 에 넣어준 후, expo-font를 import 해준다.

그리고 Font의 loadAsync 메서드를 사용해서 load한 후 사용하면 된다.

 

expo는 폰트 외에도 벡터 아이콘처럼 개발을 편하게 해주는 것들이 많이 만들어져있다.

만약 react-native-cli에서 개발을 한다면 config 파일을 통해 따로 설정을 해줘야한다.

 

import * as Font from "expo-font";
Font.loadAsync({
  GamjaFlower: require(
    "../../../assets/fonts/GamjaFlower-Regular.ttf"
  ),
});



/ ... /

const styles = StyleSheet.create({
  text: {
    color: "white",
    fontSize: 25,
    padding: 10,
    fontFamily: "GamjaFlower",
  },
});

GamajaFlower 폰트 적용

감자꽃 폰트가 잘 적용되었다.

 

 

 

 

위처럼 모든 텍스트에 하나 하나 폰트를 적용하는 것은 귀찮으니, Text 컴포넌트를 만들어보자.

 

/src/components/basic/Text.js

import React from "react";
import { Text as ReactNativeText, StyleSheet } from "react-native";
import * as Font from "expo-font";
Font.loadAsync({
  GamjaFlower: require(
    "../../../assets/fonts/GamjaFlower-Regular.ttf"
  ),
});

export default function Text({ children, fontSize, color }) {
  const styles = StyleSheet.create({
    text: {
      color: color,
      fontSize: fontSize,
      padding: 10,
      fontFamily: "GamjaFlower",
    },
  });
  return <ReactNativeText style={styles.text}>
    {children}
  </ReactNativeText>;
}

텍스트 내용(children)뿐만 아니라 폰트 사이즈(fontSize), 폰트 색깔(color)도 props로 전달했다.

이제 텍스틀 쓸 떄, react-native의 Text가 아닌 내가 만든 Text 컴포넌트를 쓰면 자동으로 감자꽃이 적용된다.

 

 

 

 

캘린더와 운동 시작 버튼의 디자인도 수정해줬다.

HomeScreen - 오늘 운동 안했을 때

 

 

 오늘 운동을 했다면 '운동 시작' 버튼을 '운동 완료'로 바꿔주었다.

HomeScreen -오늘 운동했을 때

 

 

 

 

다음은 다이어리 스크린의 UI를 수정했다.

운동이 없을 떄

 

 

운동 추가 버튼을 누르면 운동을 고를 수 있는 모달이 뜬다.

운동 선택 모달

원래 기획에선 운동을 어깨, 하체와 같이 분류하지 않았는데, 한번에 모든 운동을 보여주기엔 종류가 많은 것이 한눈에 들어오지 않아 분류를 했다.

 

 

운동 분류

부위 버튼을 누르면 그 부위에 해당하는 운동만 렌더링되도록 했다.

그리고 누른 버튼의 배경색을 어둡게 만들어 어떤 부위에 운동을 보고 있는지 쉽게 알 수 있도록 만들었다.

 

 

세트 추가

운동을 선택하면 세트를 추가, 수정, 삭제할 수 있다.

여기도 바뀐 부분이 있는데, 원래는 세트를 추가, 수정할 때 모달창에서 하도록 했었다.

하지만 그렇게 하면 모달창이 너무 자주 뜨는 것이 UX를 해친다고 생각해서 이렇게 바꿨다.

세트 추가 버튼을 누르면 가장 마지막 세트의 무게, 횟수로 세트가 추가되고 기존 세트가 없다면 기본 값 20, 10으로 추가 된다.

 

 

상단바의 저장 버튼을 누르면 핸드폰의 로컬 스토리지에 기록을 저장하고 홈 스크린으로 이동한다.

기록이 추가된 헬스 앱

 

 

 

 

다음에는 로고를 만들고 런치 스크린을 꾸며보자.

 

 

 

 

코드

 

GitHub - junhee-won/health-diary-app