Flutter Log | Toy Project | 이미지 띄워주는 앱 만들기 (I Am Rich)

이미지 띄워주는 앱을 만들었습니다.

I AM RICH

토이프로젝트 I Am Rich

 

2008년 이미지만 띄워주고 아무런 기능이 없는 앱이 애플의 앱스토어에 출시 됐다. 이 최소기능을 갖고 있던 앱 (I Am Rich)는 앱스토어에서 책정 가능한 최고가액으로 공개 됐고, 몇 사람들이 이 앱을 구매했던 일이 생겼었다.

I am Rich

🔗 출처
1) https://en.wikipedia.org/wiki/I_Am_Rich
2) https://forums.macrumors.com/threads/i-am-rich.1542562

 

현재는 삭제되었지만, 현재는 앱 개발자가 되고 싶은 학생들이 가장 먼저 만들어 보는 레퍼런스 앱이 되었다.

I am rich

실제로 I am rich 앱을 만들어 보면서 앱이 어떤 최소 구조를 갖고, 요소들을 추가해 나갈지 학습할 수 있어 상당히 추천할만한 과제이다. 그래서 민스도 하였다.

 

🚨 강의를 따라가면서 만들어본 프로젝트이다.

 

앱 구동 모습

아래 화면이 앱 구동모습이다.

💡 Flutter로 앱을 만들면 특별한 노력 없이 한 번에 안드로이드와 iOS에 대응 할 수 있다는 점이 새삼 너무 좋다는 걸 느낀다.

I Am Rich 앱 구동 모습

배운 것들

아무 기능도 없는 앱이지만 그럼에도 가장 기초적인 것들을 성취감 있게 배울 수 있다.

• 앱의 구조

앱 페에지의 전체 골격을 담당하는 Scaffold 클래스 내에 다른 요소들을 추가해 가면서 레이어를 쌓아갈 수 있다. HTML과 결론적으론 같은 개념이지만 코드가 훨씬 직관적이고, 작성하면서 코드를 작성하는 기분이 안 들었다.

• 속성의 객체화

솔직히 이 표현이 맞는지 모르겠지만, 형태가 그러하다. CSS의 속성으로 작성하던 것들을 Class로 표현해 변수처럼 작성할 수 있다. String 작성을 위한 ""를 안 쓰는 것만으로도 많은 일을 줄일 수 있었다.

• 앱 아이콘 이미지 설정

앱 아이콘 이미지가 담겨 있는 Assets 폴더에 이미지를 추가하면 아이콘 이미지가 원하는 대로 추가가 안될 수 있다. 이건 android 모듈만 안드로이드 스튜디오에서 실행해 해결해야 한다.

안드로이드 스튜디오 메뉴

 

새로운 안드로이드 스튜디오 창이 뜨고 파일 목록 로딩이 완료되면 res 디렉터리를 찾는다. 이 디렉터리에서 마우스 오른쪽 버튼 클릭 > New > Image Asset에 들어간다. 여기서 이미지를 불러오고 오른쪽 모든 예시가 원하는 모습이 되도록 사이즈 조절을 해준다. 완료 한 뒤 

Image Asset

여기서 이미지를 불러오고 오른쪽 모든 예시가 원하는 모습이 되도록 사이즈 조절을 해준다. 완료 한 뒤 Next > Finish 버튼을 눌러주면 원하는 모습으로 아이콘 이미지가 설정된 것을 확인할 수 있다.

아이콘 설정

아래 이미지에서 i_am_rich 앱 아이콘이 잘 설정 된 것을 확인할 수 있다.

I Am Rich 아이콘

소스코드

📁 Study > Flutter > i_am_rich에서 소스코드를 확인할 수 있다.

GitHub - YdMinS/Study

Reference

본 포스팅의 내용은 수강 중인 강의 "The Complete Flutter Development Bootcamp with Dart"를 따라가며 배우고 만든 것들입니다.