개발일지/GoodWishes8 [굿위시 제작기] 7. 굿즈 추가 페이지 제작과정 - 도면, 초기세팅, 사진추가 기능 굿즈를 추가할 수 있는 페이지가 필요하다바텀 내비게이션바의 '추가' 버튼을 누르면 나오는 페이지이자, 굿즈 정보를 추가할 수 있는 기능이 포함된 페이지가 필요합니다. 지금부터 굿즈 추가 페이지를 만드는 과정에 대해 알아보겠습니다.굿즈 추가 페이지는 다른 페이지와 다르게 많은 기능 구현 과정이 포함됩니다. 따라서, 여러 단계로 글을 나눠서 작성을 하겠습니다. 페이지 디자인굿즈나 위시리스트에 들어갈 굿즈의 정보를 자세하게 입력하고 저장하는 기능을 담당합니다. 제작 결과물아이폰 15프로를 기준으로 출력된 모습입니다. 페이지 소스코드import 'package:flutter/material.dart';import 'package:goodwishes/constants/ui_numbers.dart';i.. 2024. 9. 24. [굿위시 제작기] 6. 굿즈 상세 페이지 제작하기 굿즈의 상세한 정보를 보여주는 페이지를 만들자저번에 만든 굿즈 메인페이지의 굿즈를 클릭하면, 그 굿즈에 대해서 정확하게 보여주는 페이지가 필요합니다.지금부터 그 페이지를 만들겠습니다. 페이지 디자인굿즈의 내부 정보랑, 같은 카테고리에 포함된 다른 굿즈들을 보여주는 것을 목표로 디자인을 했습니다. 이후 코딩과정에서 두 가지 변경사항이 생겼습니다.1. 태그기능은 넣지 않고, 카테고리(분류)만 일단 넣자.2. '같은 카테고리의 물건들' 항목은 앱의 안정성을 더 키운 이후에 업데이트하자 제작 결과물아이폰 15프로를 기준으로 출력된 모습입니다. 페이지 소스코드import 'package:flutter/material.dart';import 'package:goodwishes/Models/goods_m.. 2024. 9. 17. [굿위시 제작기] 5. 바텀 내비게이션 제작하기 바텀 내비게이션 - 모바일UI의 대표적인 내비게이션 바많은 모바일 앱들을 살펴보면, 대부분이 화면 하단에 내비게이션 바를 설치해놨습니다.마치 윈도우의 작업표시줄이나, Mac의 Dock처럼, 많은 UI가 화면 하단을 이용해서 다른 페이지나 프로그램으로 들어가는 것을 유도하고 있습니다.그렇기에 사용자들에게도 바텀 내비게이션은 아주 익숙한 UI이고, 굿위시 또한 바텀 내비게이션을 채택했습니다. 제작 결과물 Scaffold 위젯의 속성 : bottomNavigationBarMaterialApp( debugShowCheckedModeBanner: false, // 디버그 표시를 없앤다. home: DefaultTabController( animationDuration: Dur.. 2024. 9. 4. [굿위시 제작기] 4. 굿즈 메인 페이지 제작하기 페이지 디자인 의도피그마에서 위와 같은 디자인을 만들었습니다. 사실 이 디자인은애플뮤직의 UI를 대부분 갖고 온 것입니다.그러다보니 안드로이드 폰을 쓰는 친구들에게는 생소한 느낌이라는 이야기를 많이 들었고, 아이폰 유저이면서 특히 애플뮤직 유저인 친구들에게는 애플뮤직 갖다 썼다는 소리를 들었습니다. 제가 보기에는 애플 뮤직의 디자인이 본 앱에 꽤 어울린다는 생각이 들어서, 위처럼 제작하고자 했습니다. 제작 결과물제법 무난하게 제작됐습니다. 상단 : TopWithProfile화면 최상단에 페이지의 이름과 프로필 이미지가 나오는 부분입니다.왼쪽은 그냥 페이지에 따라 페이지 이름이 나오게 끔 만들었고, 오른쪽 프로필 아이콘버튼을 누르면 계정관리 페이지로 넘어가는 구조입니다. SizedBox( .. 2024. 8. 27. [굿위시 제작기] 3. 굿즈, 위시, 카테고리 Class(모델)를 선언하기 코딩 진입하기이제 본격적으로 Dart & Flutter 코딩에 들어갑니다.프로젝트 파일을 생성한 후 가장 먼저, 이 앱에 사용할 데이터 모델들을 정리합니다. 필요한 데이터 모델당장 기능 구현에 필요한 데이터 모델은 4가지가 있습니다. 1. Goods : 굿즈 리스트를 담을 모델2. Wish : 위시 리스트를 담을 모델3. Category : 굿즈와 위시의 카테고리를 담을 모델4. Profile : 프로필 데이터를 담을 모델 위 4개의 모델을 선언하고 관리하는 방식으로 앱의 데이터를 관리합니다. 첫 번째 Class : Goods Goods 정보를 저장할 수 있는 Class 입니다. String id : 식별자 dynamic thumbnail : 굿즈 사진 String goodsName : 굿즈 이름.. 2024. 8. 23. [굿위시 제작기] 2. 피그마 UI 설계 및 발표 피그마로 UI 제작발표 기획서에는 간단한 디자인 시안이 필요했습니다.저는 Figma를 이용해서 UI를 잡고, 이걸 가지고 발표를 하면 좋겠다는 판단을 했습니다. 피그마 링크 : https://www.figma.com/design/04WCIO0JOg9AZ6CIox6EIt/%EA%B5%BF%EC%A6%88%EC%A7%80%EA%B0%91?node-id=0-1&t=pH7PQhlG0SSEzA7K-1 FigmaCreated with Figmawww.figma.com 누구든 위 사이트를 통해서 직접 확인할 수 있습니다. 홈화면 - 굿즈 관리화면일단 굿즈 관리 앱 답게, 메인을 굿즈관리 페이지로 두었습니다. 메인 디자인은 애플뮤직의 디자인에서 아이디어를 가져왔고, 추가적으로 굿즈를 클릭하면 볼 수 있는 굿즈.. 2024. 8. 19. [굿위시 제작기] 1. Flutter 과제로 시작된 굿즈 관리 앱 과제 제작에서 시작된 굿위시때는 2024년 4월, [모바일프로그래밍] 과정을 대학교에서 수강하던 중, 중간고사 고지로 위와 같은 안내문을 받습니다. 기말 프로젝트로 수행할 자신만의 앱을 기획한다. 간단한 메모장 앱을 만들어도 충분하다고 하셨지만, 4학년이기도 하고 포폴로 쓰기도 좋으며, 이참에 출시까지 염두에 둔 나만의 앱을 하나 만들면 좋겠다는 생각이 들었습니다. 그렇게 깊은 고민의 단계에 빠집니다. 기후운동 앱부터 플랫폼 앱까지 다양하게 고민하고 프로토타입을 만들어봤지만 뭔가 마음이 계속 끌리지 않았습니다. 이미 있는 앱이기도 했고, 다른 사용자들의 관심을 끌기 힘들다고 판단이 들기도 했습니다. 그러던 중,온갖 굿즈들을 수집하던 상황에서, 내가 굿즈들을 언제 어디서 얼마에 샀는지, 어디에 뒀는지를.. 2024. 8. 16. GoodWishes 개인정보처리방침 Privacy PolicyThis privacy policy applies to the GoodWishes app (hereby referred to as "Application") for mobile devices that was created by ParkGiraffe (hereby referred to as "Service Provider") as a Free service. This service is intended for use "AS IS".Information Collection and UseThe Application collects information when you download and use it. This information may include information such.. 2024. 7. 4. 이전 1 다음
