[만쥬네 동아리 가게] 2. 디자인과 MVVM 모델 구축

디자인

디자인에 대해서는 아는 것이 많이 없어, 기존의 어플들을 참고하여 만들어보았다.

레퍼런스

VIBE - 네이버 음악 스트리밍 어플

SoundCloud - 음악 스트리밍 어플

 

디자인 스케치

 

다음과 같은 디자인으로 홈 화면을 개발할 예정이다.

한 화면을 디자인한 후 개발을 완성하고, 다음 화면을 디자인하고 개발하는 과정으로 진행할 예정이다.

 

MVVM

Model

Category

Category

내용	변수명	Type
카테고리명	name	String
카테고리 이미지	image	Image

예술 동아리, 학술 동아리, 봉사 동아리 등으로 카테고리를 나눌 예정이며 해당 카테고리에는 이미지들이 존재한다. 이 이미지들은 디자인 전공 친구에게 부탁을 했다.

 

Category Data

카테고리 데이터의 구성은 스포츠 / 취미/ 봉사 / 학술/ 음악 / 기타

총 6가지로 분류했다.

 

 

Society

Society

내용	변수명	Type	Optional
동아리명	name	String
카테고리	category	Category
부서	department	String
주제	theme	String
주소	address	String
대표 이미지	mainImage	Image
상세 이미지	subImage	Image	Optional
인스타그램 주소	instagram	String	Optional
공고링크	post	String	Optional

필요한 동아리의 정보들을 다음과 같은 모델로 정했다.

 

Society Data

동아리의 정보는 동아리가 50개 정도 되므로 굉장히 많다.

이 정보들은 추후 백엔드를 통해 받아올 예정이며 우선을 샘플 데이터만 추가했다.

 

View Model

MainViewModel

 

View

HomeView

메인 화면인 HomeView에서는 TabView와 ZStack을 이용하여 홈화면, 검색화면, 프로필 등을 구성했다.

SelectView

각각의 카테고리의 동아리들 목록을 위 아래로 슬라이드하며 볼 수 있도록 ScrollView와 Vstack을 사용했다.

CategoryRowView

홈 화면 최상단에는 카테고리의 목록들이 좌우로 슬라이드하며 볼 수 있다. ScrollView와 Hstack을 사용했다.

SocietyRowView

홈 화면에 각 카테고리의 동아리들 목록을 좌우로 슬라이드하며 볼 수 있다. 마찬가지로 ScrollView와 Hstack을 사용했다.

 

최종 구현 화면

 

라이트 모드

다크 모드