Skip to main content

내일의 네일 (네일 디자인 공유 플랫폼)

calendar-app
githubgithubgithubgithub

프로젝트 개요​

앞서서 연차관리 앱을 마무리 할 무렵에 devFest라는 행사가 송도에서 열리기에 회사동료랑 지원해서 갔었습니다.. 왠만하면 프론트엔드 관련 세션을 듣고 싶었지만 대부분이 플러터나 안드로이드 혹은 백엔드 세션뿐이 없었는데요. 그래서 플러터 세션을 듣다가 해당 GDG와 연결되어 있는 Flutter in Songdo 라는 곳에서 스터디를 모집하고 있어서 지원을 하게 되어서 이 프로젝트를 시작하게 되었습니다.

calendar-app

각자의 아이디어를 발표하다가 제 눈에 들어온건 앱스토어에서 벤치마크가 없었던 네일 디자인 공유 플랫폼이였습니다.

그래서 프론트엔드 ( 플러터 ) 개발자로써 참여를 하게되었고 추후 기획에도 참여해서 작업을 이어나가기 시작했습니다.

화면 구성​

login

로그인 페이지

login

회원 가입

login

네일 업로드

login

네일 상세 페이지

login

친구 리스트

login

마이페이지

기술스택​

Flutter​

사내에서 처음 시작했던 Flutter가 몇달만에 계속해서 버전이 빠르게 변화하는 것을 경험했습니다. 이번 프로젝트 역시 Flutter 스터디의 연장선으로 자연스럽게 Flutter를 선택하게 되었습니다.

Firebase​

Flutter와의 호환성이 매우 뛰어난 Firebase는 이미지 관리랑 더불어 간단한 데이터베이스 구성을 위한 최적의 선택이였던 것 같습니다. 백엔드 작업에 대한 공수를 줄여서 개발 효율성을 높였습니다. 실시간 데이터베이스와 클라우드 스토리지는 프로젝트 요구사항을 충족시키는 데 매우 유용했습니다.

Get​

프로젝트의 규모가 비교적 커져서 상태 관리를 해야했고, 이때 라우트 관리와 다양한 편의 기능을 제공하며 학습 곡선이 가장 낮았던 Get 패키지를 사용하기로 결정했습니다. Get 패키지는 단순하면서도 강력한 상태 관리 솔루션을 제공하며, 라우팅 및 의존성 주입 기능도 매우 유용하게 사용되었습니다.

OAuth​

프로젝트의 인증 기능 구현을 위해 다양한 OAuth 서비스를 통합했습니다. 가장 레퍼런스가 많은 카카오톡 OAuth부터 시작하여, 안드로이드 배포를 위한 구글 로그인까지 Firebase Auth를 통해 구성했습니다. 이 과정에서 전체적인 인증 로직을 맡아 구현하였고, 이를 통해 사용자 친화적인 인증 시스템을 구축할 수 있었습니다.

클린코드 아키텍쳐​

lib/
├── apps/
│   └── _
│       └── tomorrow_nail/
│           └── v1/
│               └── main/
│                   ├── data/
│                   ├── domain/
│                   ├── interaction/
│                   ├── util/
│                   └── README.md
├── data/
│   ├── repository/
│   │   ├── database/
│   │   └── storage/
│   ├── source/
│   │   ├── database/
│   │   └── storage/
└── domain/
    ├── entity/
    │   ├── enum/
    │   └── model/
    ├── repository/
    │   ├── database/
    │   └── storage/
    └── use_case/
        └── _/
├── interaction/
│   ├── v_side/
│   │   ├── bottom_sheet/
│   │   ├── dialog/
│   │   ├── loading/
│   │   ├── toast/
│   └── v_vm/
│       └── login/
│       └── freinds/
│       └── nail_detail/
│       └── nail_upload/
├── util/
│   ├── theme/
│   └── validation/
└── README.md

data/​

역할: 데이터 소스와의 상호작용을 담당하는 계층으로, 데이터의 저장, 불러오기, 업데이트 및 삭제 작업을 수행합니다.

  • repository: 데이터 저장소의 인터페이스와 구현을 포함합니다.
  • source: 실제 데이터 소스와의 상호작용을 담당하는 클래스들이 위치합니다.

domain/​

역할: 비즈니스 로직과 관련된 파일들을 포함하며, 애플리케이션의 핵심 규칙과 엔티티를 관리합니다.

  • entity: 비즈니스 도메인 모델을 정의합니다.
  • repository: 도메인 레벨에서의 데이터 접근 인터페이스를 정의합니다.
  • use_case: 각 유스 케이스별로 비즈니스 로직을 구현합니다.

interaction/​

역할: UI 및 사용자 인터페이스와 상호작용하는 로직을 포함하며, 프레젠테이션 레이어의 요소들을 관리합니다.

  • v_side: 바텀시트 같은 사이드 위젯.
  • v_vm: 페이지 위젯.

프로젝트 성과 및 반성​

처음으로 제대로된 클린코드 아키텍쳐를 접하면서 현업자이신 멘토분의 도움을 받아가면서 비지니스 로직과 구조를 이해했었고

아무 생각없이 사용하고 난무하던 dart라는 언어에 좀 더 깊게 이해하고 실제로 배포를 하기 위해서 필요한게 어떤게 있으며

같이 작업하는 개발자분들 위해 웹쪽에서는 컴포넌트를 분리하는것처럼 위젯도 최대한 분리해서 재활용을 하면서 사용하려고 했습니다.

아무래도 웹 프론트엔드로 일도 했었어서 스켈레톤 UI나 폼의 유효성 검사같은 경우는 물론 방식이 다르지만 비슷한 로직이기 때문에 어렵지 않게 할 수 있었습니다.

그리고 실제로 배포하는 과정에 참여하면서 개발 외적인 작업들과 많이 공수가 드는 것을 느꼈습니다.

아이폰도 배포를 하려고 했으나 시간이 너무나 소요되서 못한건 너무 아쉬웠고, 다들 직장인분들이셔서 지속적으로 디벨롭을 못한게 좀 아쉬웠네요.

calendar-app