넘블 금융앱 리뷰얼 for 액티브 시니어 프로젝트 개발 회고록

[연계 챌린지] 액티브 시니어를 위한 금융 앱 온보딩 페이지 제작하기 (링크)

지난 6주 (09-30(금) ~ 11-10(목)) 간 진행된 프로젝트에 대한 개발 회고록 입니다.

 

 

미션

OO은행에서 재직하고 있는 당신은 어느날 액티브 시니어들을 주고객층으로 끌고 오라는 미션을 부여받습니다. 그들을 고객으로 끌고 오기에 매력적인 포인트들을 잡고 기존에 쓰고 있는 금융앱을 리뉴얼하여 온보딩페이지를 제작해주세요. 들어가는 내용에 대한 제약은 없습니다. 기획, 디자인, 기능 부분에서 리뉴얼할 부분이 있으면 포함하여 고려해주세요! 

1. 사용하고 계신 금융 앱 중 하나를 팀별로 골라 액티브 시니어를 겨냥하여 리뉴얼해주세요.
2. 어떤 기능을 추가하거나, 어떤 컨셉을 담을지, 어떤 서비스를 추가할 것인지는 팀원들의 자율입니다.
3. 온보딩페이지는 최소 4페이지 최대 6페이지로 (앱 설명을 간단하게 담을 수 있게 그려주시면 됩니다.)
4. 금융앱의 기능을 담고 있되, 액티브 시니어라는 타겟층을 고려하여 주세요.
5. 프론트엔드 개발은 React Framework를 사용해주세요.

참여 동기

22년 하반기를 어떻게 알차게 보낼 수 있을까 고민하다가 프론트엔드 개발자 직무로 이직한 뒤로는 너무 회사 일만 열심히 했어서 개인적으로 따로 프로젝트를 한 번도 해본 적이 없다는 것이 생각이나서 너무 부담감 없는 선에서 할 수 있는 협업 프로젝트를 해보기로 마음 먹었습니다.
또한 제가 지금 있는 회사가 제 프론트엔드 개발자 직무로는 첫 번째 회사인데 회사에 디자이너가 딱 한 분 계시고, 기획 까지 같이 하시기 때문에 그 한 분만의 스타일 밖에 경험하지 못했습니다. 그래서 기획-디자이너 쪽으로 많은 사람과 다양하게 협업을 해보면 좋겠다는 생각으로 위의 기획-디자인-개발 협업 프로젝트를 선택했습니다.

개발 환경 구축

공유를 위해 웹으로 개발하여 배포하고, 웹뷰로 네이티브에 이식하자 !

미션에서 React Framework 를 사용하라고 하였으나, 실제로는 금융App을 리뉴하여 온보딩 페이지를 만드는 것이 목적이었기 때문에
React Native를 사용하여 App을 만들어야했습니다.
제가 Native 가 주력인 사람은 아니어서 만약에 복잡한 화면을 만들어야 한다면 부담이 되는 상황이었습니다.😮‍💨😮‍💨😮‍💨
그런데 가만 생각해보았을때, Native 로 개발 해버리면 팀원들에게 공유할 방법도 없고 애플 개발자 등록도 안되어 있어서 최종적으로 안드

로이드에만 설치가능한 APK 파일밖에 못 만드는 점이 고뇌에 빠지게 만들었습니다. 🤔

 

그래서 실제로 각각의 페이지는 React.js 로 개발하여 브라우저 상으로 접근할 수 있게 Vercel를 이용해서 배포하고,

배포된 웹주소를 네이티브에서 Webview 로 띄우면 앱으로도 사용할 수 있다는 점을 이용했습니다.
그래서 팀원들 에게는 배포된 웹페이지의 URL을 전달하여 진행상황을 공유하였고, 최종적으로 결과물은 웹/앱 두가지 모두 빌드했습니다.

 

 

회사에서 미리 경험하지 않았다면... 아마 시도할 생각도 못했을 겁니다 🥺
https://www.npmjs.com/package/react-native-webview

react-native-webview

 

 

컬러/텍스트 스타일, 아이콘 사용을 위한 스토리북 개발 !

저희 디자이너 님께서 컬러/텍스트 스타일에 대한 정의를 친절히 만들어 주셨습니다.

프로젝트 진행하다보니 개발 분량이 엄청나게 늘어났고, 어차피 반복되는 요소를 여러 번 사용해야 한다면 따로 패키지로 만들어도 되겠다는 생각도 들었습니다.

 

그 뿐만 아니라 애니메이션을 다루는 작업이 지금껏 해본 작업 중에 가장 많았는데

이런 애니메이션 값 조절을 위해 스토리북을 활용하면 굉장히 편할 것 같아서 스토리북을 만든 것도 있습니다.

한 가지 예시로, 아래 컴포넌트는 SVG 경로를 따라 그라데이션 효과를 적용하는 컴포넌트인데 색상/지속시간/선 굵기/플레이방향 등을 조절할 수 있게 만든 예시입니다. 

참고로 저 Path Gradient 는 아래 라이브러리를 사용해야만 구현할 수 있습니다. 일반적인 방법으로는 절대! 구현할 수 없습니다. 이거 때문에 엄청 고생한 기억이 나네요 🥲
원리는 경로상에 작은 점을 찍어서 모든 점들에 그라데이션을 주는 것입니다.한번만 draw 하는 건 괜찮은데 이걸 반복되는 애니메이션으로 사용할 경우에는 이전에 draw한 것을 지워주지 않으면 점들이 계속 누적되어서 성능 이슈 발생합니다. 

https://www.npmjs.com/package/gradient-path

gradient-path

 

 

웹 / 모바일 / 공통 패키지 ! 삼단 합체 모노레포 !

진짜 야심차게 준비했습니다. 솔직히 이것을 하기 위한 프로젝트였다고 봐도 무방합니다.
이번 프로젝트에 총 3개의 repo (web, mobile, 공통UI) 를 만들어야 했는데 혼자서 3개의 환경을 모두 구축해서 각각의 main/test 브랜치를 만들고 각각의 Issue 에 해당하는 feature 브랜치 생성 및 PR 생성, CI/CD 까지 구축하는 것은 불가능한 일이었습니다.

심지어 공통UI 패키지는 NPM 상에 올려서 다운받아야 사용할 수 있죠.. 😕

 

그래서 호방하게 모노레포로 통합하였습니다. 어차피 요즘 관심이 있어서 공부도 하고 싶었습니다! 💪💪

모노레포는 yarn workspace + lerna 조합으로 구축했습니다.

lerna 가 앞으로 지원을 중단한다는 소식을 접하게 된 것은 이미 프로젝트가 꽤 진행이 된 이후의 일이었지만, 어차피 일괄 커맨드 날리는 것 외에 딱히 대단한 용도로 사용하는 것도 아니었고 검색으로 얻을 수 있는 자료도 제일 많았기 때문에 이 조합을 그대로 유지했습니다.

• Apps
  • mobile : expo: ^46.0.16, react-native: 0.68.2
  • web : CRA (React v17)
• Shared
  • ui : @storybook/react: ^6.5.12, CRA (React v17), rollup: 2.70.1

mobile 프로젝트를 expo 로 한 이유는 시간 관계상 정말 급하게 만들고 테스트할 수 있어야 했기 때문입니다.. 실제로도 시간이 정말 촉박해서 최종 결과물 제출일을 코앞에 둔 주말에야 첫 APK 파일을 뽑아낼 수 있었습니다. 🥲

 

 

모노레포 - nohoist 의 잘못된 사용으로 고통받다...

그리고 모노레포 구축하면서 굉장히 어려운 부분이 있었는데 nohoist 를 함부로 하면 안됩니다. 

모노레포는 모든 공통된 패키지를 root 의 node_modules 폴더에 설치하고 각각의 패키지들은 심볼릭 링크로 연결시켜서 사용하게 됩니다. 그런데 이 nohoist 에 작성된 패키지는 root 의 node_modules 폴더에 설치하지 않고 현재 패키지의 node_modules 폴더에 설치하게 됩니다.

문제가 터진 것은 바로 react 를 nohoist 로 설정했을때 였는데요. web, ui 두 패키지 모두에 react를 설치하고 web 패키지에서 ui 패키지의 어떤 컴포넌트를 사용하려고 하면, react가 두개가 있다는 에러가 발생합니다  결국에는 nohoist를 싹다 제거하여 해결할 수 있었습니다. 그리고 mobile 패키지는 예외적으로 React Native 환경이라 딱히 겹칠 일이 없기 mobile 패키지 통째로 nohoist 설정했습니다. 이렇게 해야 어렵지 않고 쉽게 가는 방법이라는 블로그 글이 많더군요.

 

 

모노레포 - 루트 경로에서 모든 패키지에 손쉽게 접근 !

또한 2022 우아콘에서 보았던 pnpm을 이용한 모노레포 구축 세션에서 모노레포 워크스페이스의 상대 경로를 root 로 지정해서 모든 패키지들을 하나의 폴더에 있는 것 처럼 접근하여 사용하는 것을 참고하여 저 또한 그렇게 구성하여 모노레포 구축을 완성할 수 있었습니다. 

 

web 프로젝트는 CRA로 만들었기 때문에 craco를 사용했고 ../apps 즉, 루트 경로를 포함하도록 하여 루트 경로에서 부터 탐색 가능하도록 하였습니다. 물론 이대로 사용하면 불편하기 때문에tsconfig.paths.json 파일에 web 프로젝트 내의 주요 폴더를 alias 등록했습니다. 또한 craco v6은 react-script v5를 지원하지 않는다고 하여 @craco/craco": "7.0.0-alpha.3" 를 사용하였습니다. (2022 우아콘 - 우리는 하나다! 모노레포 with pnpm 참고)

우리는 하나다! 모노레포 with pnpm

 

@kb-bankapp/web 패키지의 craco.config.js 에 루트 경로를 포함시켰습니다.

// craco.config.js
const CracoAlias = require("craco-alias");
const fs = require("fs");
const path = require("path");
const cracoBabelLoader = require("craco-babel-loader");

const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = (relativePath) => path.resolve(appDirectory, relativePath);

module.exports = {
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: "tsconfig",
        tsConfigPath: "tsconfig.paths.json",
      },
    },
    {
      plugin: cracoBabelLoader,
      options: {
        includes: [resolveApp("../apps")],
      },
    },
  ],
};

 

@kb-bankapp/web 패키지의 package.json 에 아래와 같이 @kb-bankapp/ui 패키지를 포함시켰습니다.

// package.json
"dependencies": {
  "@craco/craco": "7.0.0-alpha.3",
  "@kb-bankapp/ui": "^0.0.3",
}

그리고 아래와 같이 import 하여 사용했습니다.

import { colors, Icon, IconButton } from "@kb-bankapp/ui";

ui 패키지에서의 변경사항 반영하고 싶다면

ui 패키지 코드 수정 -> ui 패키지 build-> web 패키지 start 순으로 진행하여 변경사항을 즉시 반영하였습니다.

그리고 규칙을 지키지는 못했지만, ui 패키지에 큰 변경사항이 있을때 yarn version 커맨드로 버전을 올려서 배포했습니다.

버전 올린 경우에는 package.json 에서 수동으로 버전 올려줘야 합니다.

 

 

결과물

엄청 급하게 만든것 치고는 생각보다 결과물이 잘 뽑힌 것 같아서 기분이 좋습니다. 🥳

모노레포도 처음해보았는데 잘 동작하고, 브랜치/커밋 관리 규칙만 잘 짜서 이용하면 매우 강력할 것 같다는 생각이 듭니다.

 

구동 영상은 APK 파일로 빌드해서 제 폰으로 녹화한 것입니다 ! 모바일 환경에서도 높이가 잘 맞춰서 나오네요 ! 🥳

 

웹 페이지

https://kb-bankapp.vercel.app/

KB Bank App

 

스토리북

https://kb-bankapp-web-storybook.vercel.app/?path=/story/colors--page 

Webpack App

 

Github 주소

https://github.com/snowman95/kb-bankapp

GitHub - snowman95/kb-bankapp: new kb-bankapp for active senior