Final Project - (6) 2020_0203

이제까지 프로젝트 셋팅을 나름 했고 팀원들과 논의 끝에 지금까지 셋팅한 것으로 프로젝트를 시작하기로 하였다.

진~짜로 본격적인 프로젝트 시작이다. 팀원 중에 프론트 부분을 맡은 사람이 나와 한분이 더 있어서 그 분과 일을 분담하였다. 

 

팀원들과 다 같이 기획한 프로젝트의 아키텍쳐 문서를 가지고 일을 나눴는데 먼저 나는 프로젝트의 메인 스크린의 뼈대를 잡기로 하였고, 다른 분은 로그인과 회원가입 스크린의 뼈대를 잡기로 하였다.

 

우선 코드를 치기 전에 프로젝트의 폴더 디렉토리 구조를 만들어 보려고 하였다. 실제 현업 프로젝트에서 어떤 식으로 디렉토리를 구조화해서 파일을 관리하는지는 잘 모르겠지만, 나름 그래도 여기저기서 보고 최대한 컴포넌트를 잘 관리해보려고 한다.

 

리엑트의 경우에는 first project를 할 때 react-router-dom을 활용하여 SPA의 구조로 만들었었다.

그래서 라우터를 app.js에서 관리하고 각 라우터(페이지) 별로 폴더를 나누어서 만들고 컴포넌트 들을 만들었었다. 

 

하지만 리엑트 네이티브는 리엑트 프로젝트와 다를 것 같아서 리엑트 네이티브 프로젝트 예제 깃헙 레포들을 보면서 어떻게 디렉토리 구조를 만드는지 찾아보았다.

 

리엑트 네이티브의 경우에는 리엑트와는 좀 다른 부분이 있었는데 screen을 쌓고 거기에 컴포넌트를 렌더하는 방식으로 하는 것(?) 같았다. 즉, 스크린 컴포넌트와 스크린에 포함될 컴포넌트를 따로 관리하는 형태인 것 같았다. 

 

그래서 우선 src 폴더에 스크린 폴더와 컴포넌트 폴더를 만들고 스크린 컴포넌트들은 스크린 폴더에, 스크린 안에서 렌더될 하위 컴포넌트들은 컴포넌트 폴더에 따로 만들려고 하고 있다.

 

프로젝트 디렉토리 구조

사실 이렇게 하면 되는건지 잘하고 있는 건지는 잘 모르겠다. 그래도 나름 컴포넌트들을 잘 나눠서 사용하려고 이렇게 해보고 있다.

 

이렇게 디렉토리를 만들고 메인 스크린...!을 만드려고 했으나 구글링을 하면서 찾다가보니까 splash screen이란 것을 알게 되었다.

 

Splash screen

splash screen이란 유저가 앱을 구동 (cold start)할 때 보여주는 시작화면을 말한다.

 

앱의 데이터를 로딩하는 시간 동안 빈 화면을 보여주지 않기 위해 1~2초 정도 보여주는 화면으로 유튜브나 페이스북, 카카오톡 등의 앱을 시작할 때 로고와 함께 나오는 시작화면을 떠올리면된다.

 

근본적인 목적은 앱을 시작할 때 빈 페이지가 노출되는 불쾌한 사용자 경험을 줄이는 것이지만 많은 기업들이 이 화면에 자신들의 로고 등을 보여줌으로써 브랜드 아이덴티티를 표현하는 등의 앱 브랜딩 목적으로 사용하고 있다.

 

그러나 최근에는 하드웨어의 높은 사양과 빠른 인터넷 환경 등으로 앱 구동시간이 점점 짧아져서 일부 서비스에서는 splash screen을 보여주기 위해 일부러 로딩 시간을 넣는 경우도 있다고 한다. 

 

그래서 splash screen이 꼭 필요한가에 대한 의견도 분분한 것으로 알고 있는데, 나는 개인적으로 이런 화면이 나오는 서비스 들을 너무 많이 써봐서 그런지 몰라도 익숙한 패턴이기도 하고, 빈 화면만 보이면 좀 허전한 느낌도 있는 것 같다. 그리고 우리는 이런 서비스이다를 함축적으로 (디자인만 잘 된다면) 보여줄 수 있다고 생각해서 splash screen이 있으면 좋은 것 같다.

 

참고 레퍼런스 : https://brunch.co.kr/@kangsigner/1

스플래시 스크린은 꼭 필요할까?

그래서 splash screen을 만들고 싶어서 찾아보았는데 expo의 경우에는 root에 app.json에 쉽게 설정을 할 수 있었다!

 

app.json에 icon과 splash의 이미지를 그냥 바꿔주기만 하면되었다. 그래서 일단 아이콘을 만들고 싶어서 first project 때 무료로 로고를 만들 수 있는 사이트에서 대강 로고를 만들었고, 포토샵은 살면서 1도 해본적이 없어서 어찌어찌 찾아보다가 pixlr라는 웹 포토샵? 느낌의 사이트를 발견해서 발 실력으로 원래 디폴트로 있던 스플래시 이미지에 로고를 얹어서 완성하였다.

 

만들다보니 디자인에 대한 감이 너무 없는 것 같다...ㅠㅠ

일단은 그래도 로고나 스플래시 이미지가 없는 것 보다는 심플하고 간단하지만 뭐라도 있는 것이 나은 것 같아서 넣었는데 나름 괜찮은 것 같다.

 

우리 프로젝트 로고!

 

splash image

 

얼른 프로젝트를 만들어야 되는데 이런 거에 시간낭비 한 것 아닌가 생각도 든다. 

 

다음에는 메인 스크린에 기본적인 bottom tab navigation을 만들어 볼 생각이다!

 

 

참고 레퍼런스

https://www.freelogodesign.org/

Logo Maker - Create Your Own Logo, It’s Free! - FreeLogoDesign

https://pixlr.com/editor/

Online Photo Editor | Pixlr Editor