[Flutter] Instagram Clone Coding (인스타그램 클론코딩) 1 (준비하기)

지난번에 포스팅 했던 바와 같이 인스타그램 클론 코딩을 GetX로 시도를 해보려고 하다가 여러가지 단점들을 발견하여 중간에 중단했던적이 있었다. 물론 본인의 실력이 낮았기에 이러한 결론이 나올 수도 있었겠지만, 생각보다 앱을 견고하게 만들 수 있을 것이라 생각이 들지 않아서 중간에 그만 두었다. 이유에 대해서 알고 싶다면 다음의 포스트를 참고 하자.

https://riris01.tistory.com/74

[리뷰] GetX로 인스타그램 만들기 중단 및 대체 이유

해당 포스트를 올리고 지난 몇일간 꾸준히 클론 코딩 수업을 들으며, 나름대로 조금의 변형을 하고 그 결과를 정리하여 적어보고자 한다. 약 5번에 걸쳐서 올릴 듯 한데, 미리 당부하는 것은 다 완성된 것은 아니고 부족한 부분이 있으니 미리 양해를 구한다.

 

해당 내용은 외국의 포스팅들과 수업자료들을 긁어모으면서 작성한 코드이며, 이렇게 해외 자료를 찾으면서 만든 이유는 기본적으로 코딩을 한다는 것이 "라이브 코딩"을 하는 경우는 거의 드물기 때문이다. 대부분이 거의 tensorflow라던지 GPT라던지 다양한 소스를 통해서 질문을 통해 만든 것이 대부분이다 (저자가 일하는 환경이 거의 그러하다). 그래서 외부의 소스를 사용을 한다면 이 내용이 내가 제대로 이해한 상태에서 만드는 것인지 다시 한번 확인하는 습관 그리고 원하는 정보를 잘 찾아내는 능력이 더 중요하다고 판단이 되어 실제 외국의 소스들을 참고하며 만들어보았다.

 

이번에 인스타클론 코딩을 하면서 사용한 상태관리자는 Provider로 가장 기본이 되는 상태관리자이다. Riverpod을 사용해볼까도 생각해보았지만, 그건 나중에 다른 토이 프로젝트를 진행하면서 해보려고 한다.

 

그럼, 이제 실제 인스타그램 클론 코딩을 어떻게 했는지 확인해보자. 

 

준비과정 및 소개

 

현재 내가 만든 폴더의 구성은 다음과 같다.

각 폴더에 대해서 간단하게 설명하자면 다음의 구성을 따르고 있다. 

1. models: 포스트 및 유저의 정보를 불러들이는데 필요한 혹은 입력해야할 정보의 리스트

2. providers: 상태관리자 (ChangeNotifier) 선언

3. resources: 관리자, firestore, storage 내의 '자원'관리 방법

4. responsive: 화면 레이아웃의 플랫폼 규격별 반응 방법

5. screens: UI 부분 - 사용자에게 보여질 화면

6. utils: UI 부분에 사용될 색 그리고 사진을 불러올 수 있는 Imagepicker 등의 유틸리티를 담는 부분

7. widgets: widgets는 버튼, Like, text field 등의 구성 요소들에 대한 기본 설정

8. main.dart: 앱 구동시 화면 레이아웃의 플랫폼 규격별 반응 방법등을 불러올 수 있는 로직 및 유저에게 가장 먼저 보여질 부분 등을 정한 부분

 

아무래도 이번 인스타그램 클론 코딩이 가장 기초부터 어느 정도 지식이 있는 사람들을 모두 커버하려고 하다보니, 가능한한 쉬우면서도 건설적인 형식의 언어로 풀어서 쓰고자 한다. 

 

자 지금까지가 폴더 구성이였다. 해당 구성을 꼭 따르지는 않아도 된다. 본인이 좋다고 생각하는 구성을 사용하면 된다. 다만, 폴더를 구성할때는 각 폴더의 목적에 따라서 자원을 어떻게 잘 관리할 수 있는지를 생각해보고 내용을 구성하면 좋을 듯 하다. 결국 코딩이라는 것은 공동 작업이다 보니 각각이 맡은 부분을 잘 이해하고 실행하는 것도 중요하지만 다른 사람이 보았을때 이해할 수 있는 클린코드를 만드는 것도 중요하기 때문이다.

 

자 그 다음으로는 어떤 Dependencies를 사용하였는가를 확인할 타이밍이다. 본인의 pubspec.yaml을 열어 확인을 해보자면 다음과 같다.

dependencies:
  cloud_firestore: ^4.8.1
  cupertino_icons: ^1.0.2
  firebase_auth: ^4.6.3
  firebase_core: ^2.14.0
  firebase_storage: ^11.2.3
  flutter:
    sdk: flutter
  flutter_staggered_grid_view: ^0.4.1
  flutter_svg: ^2.0.7
  image_picker: ^1.0.0
  intl: ^0.18.1
  provider: ^6.0.5
  uuid: ^3.0.7

이 수많은 dependencies를 모두 쓴다고?

그렇다. 모두 쓴다. 실제 토이 프로젝트가 아니라면 이 보다 더 많은 양을 쓸 것으로 예상이 된다. 적당하게 쓴 dependencies의 내용들을 간략하게 확인을 해보자면

(1) firebase를 쓰기 위함

(2) 보기에 깔끔한 UI를 위함

(3) 사진 찍기 및 불러오기용
(4) 사용자 정보를 확인하기 위함

 

등이 있다. 그냥 다양한 기능들을 불러올 수 있는 라이브러리들이니 당황하지 말자. 저자도 복습하면서 조금씩 설명을 진행할것이다. (물론 내가  잘 기억한다는 ... 전제하에?)

훗

해당 작업을 진행하기 전에 미리 해두어야할 것이 있다. 그것은 바로 짐작은 했겠지만 firebase에서 사용을 하기 위한 등록 과정을 거쳐야 한다는 것이다. 일일이 스크린샷을 찍어주면서 알려주면 좋겠지만 그러한 부분은 여러분들에게 맡기도록 하겠다. 이 부분은 사실상 Firebase 상에서도 너무나도 잘 설명해주는 부분이라서 내가 적어주는 것이 의미가 없을 수 있다.

 

다만, '그래서 어떻게 하면 되는데?'라고 묻는 분들에게 링크 및 유튜브를 공유해드리니 한번 찾아보면서 따라해보길 바란다.

 

참고 링크

1. Rivaan Ranawat 'Build Instagram Clone | Flutter & Firebase Tutorial for Beginners to Advanced | iOS, Android & Web'

https://www.youtube.com/watch?v=BBccK1zTgxw 

2. Apple 프로젝트에 Firebase 추가

https://firebase.google.com/docs/ios/setup?hl=ko 

 

솔직히, 이런 링크가 없어도 이미 동영상 수업을 몇번 따라해보신 분들은 Android 및 iOS 관련 등록을 해보신적이 있을 것이다. 하지만, 추후에 저자가 기억이 안나는 경우 다시 한번 확인해보고자, 미리 적어두는 부분도 없지 않아 있다.

여튼, 자 지금 부터 고민을 해볼 부분이 그렇다면 화면을 어떻게 구성해볼 것이냐라는 것이다. 이 부분은 Rivaan Ranawat이라는 유튜버의 내용을 상당 부분 참고 했다. 사실상 클론 코딩이라는 것이 원래 있던 제품을 기능을 최대한 구현을 해보는 방식이다보니, UI는 거기서 거기다. 그래서 만들고 나서 일정 부분을 수정을 하거나 추가하는 방식이 많다고 본다.

 

그렇다 보니 실제로 만들어진 화면 또한 다음과 같았다. 일단 기본적인 배경화면은 검은색으로 통일 하였다.

1. 피드를 전부 볼 수 있는 ListView를 이용한 포스트 뷰 '홈'
2. 사용자를 찾아볼 수 있는 SearchPage
3. 현 사용자의 Profile 및 포스트 등을 볼 수 있는 MyPage
4. 로그인과 등록 화면

그리고 부가적으로 본다면 좋아요 버튼 및 좋아요 기능 그리고 별도의 Comment 페이지 등이다. 사진을 지우거나 업로드 할 수 있는 부분 또한 당연히 들어가있다.

여기 있는 사진들은 일단 실기기 테스트를 해보지 않았기에 에뮬레이터에 포함되어 있는 사진들을 사용을 하였다.

 

자 그럼, 가장 먼저 무엇을 해야할 것인가. 일단, main.dart를 바로 건드려야하는거 아닌가? 라고 물어보는 사람들이 있을 것이다. 음, 그러게 말이다. 그렇게 바로 접근을 해도 좋지만 일단은 인스타그램에 사용될 만한 그래픽적 요소들을 담당하는 내용들을 작성해주자.

 

• lib/utils/colors.dart

해당 파일을 생성한 후에 다음의 코드를 입력한다.

import 'package:flutter/material.dart';

const mobileBackgroundColor = Color.fromRGBO(0, 0, 0, 1);
const webBackgroundColor = Color.fromRGBO(18, 18, 18, 1);
const mobileSearchColor = Color.fromRGBO(38, 38, 38, 1);
const blueColor = Color.fromRGBO(0, 149, 246, 1);
const primaryColor = Colors.white;
const secondaryColor = Colors.grey;

앱을 디자인 하다보면 다음과 같은 내용들을 보게 될 것이다. pirmary color는 무엇인가요? 혹은 secondary color는 무엇인가요? 라는 것인데, 쉽게 말하자면

 

primary color: 앱의 아이덴티티 (즉 '근본'이 되는 색)

secondary color: 앱의 보조색이 되는 것 (앱의 근본이 되는 색 이외의 색)

 

이다. 여기서 말하자면 내가 만들 앱의 근본이 되는 색은 하얀색이고 그 외의 보조가 되는 색은 회색이 되는 것이다.

 

어? 그럼 바탕화면이 보통 primary color아닌가? 그렇게도 볼 수 있겠지만, '전체적인 분위기를 잡는 색을' 디자인에서는 primary color라고 한다. 

 

그리고 변수를 좀 설정해주자. 지금부터 내가 만들어갈 앱은 여러가지 페이지를 가지고 있다. 그렇단 말은 각 페이지를 연결해줄 수 있는 '변수 선언이 필요하다는 것이다. 그리고 기본적인 사이즈까지 잡아주어야 한다. 왜냐하면 처음 말했던 것 처럼 각 플랫폼에서 어떻게 반응형 화면을 구성을 할지 보여줄 필요가 있기 때문이다.

 

• lib/utils/global_variables.dart

파일을 만든다음에 다음의 내용을 입력하자.

import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:instagram_flutter/screens/add_post_screen.dart';
import 'package:instagram_flutter/screens/feed_screen.dart';
import 'package:instagram_flutter/screens/profile_screen.dart';
import 'package:instagram_flutter/screens/search_screen.dart';

const webScreenSize = 600;

List<Widget> homeScreenItems = [
  const FeedScreen(),
  const SearchScreen(),
  const AddPostScreen(),
  const Text('notifications'),
  ProfileScreen(
    uid: FirebaseAuth.instance.currentUser!.uid,
  ),
];

물론 import는 나중에 만들면서 조금씩 넣을 예정이였지만, 실수로 각 단계별 내용을 저장하지 않은체 최종 코드만 저장을 해버렸다. (하아...) 그래서 일단은 지금부터 보여줄 코드들은 거의 완성형이다. 다만, 완성형이라고 해도 차근차근 부분별로 설명을 해줄테니 따라오기 어렵진 않을 것이다.

 

이 부분을 설명하자면 다음과 같다. 

• webScreenSize = 600 : 600 이상이면 웹스크린 사이즈의 반응형 사이즈가 된다.

• homeScreenItems : 각 탭별 페이지 연결 부분으로써 FeedScreen, SearchScreen, AddPostScreen, Notification, ProfileScreen으로 연결하는 변수들을 선언한것이다 (Notification에는 무엇을 넣을지 아직 정하진 않았다.)

자, 지금까지는 준비해야하는 부분 부터 시작해서 사용될 Asset들을 준비해보았다. 가장 기본적인 준비 과정이다.

 

자 다음 과정은 로그인 그리고 Sign up 부분을 만들어보겠다. 다음부터는 Github 주소도 첨부할 예정이다. 그럼 다음 시간까지 Chao

빠이!