GOAL - MAUI 안드로이드 앱

이광석 · 5월 11, 2023, 2:53오전

안녕하세요.

앱 심사를 통과를 마치고 출시되었습니다!
Maui App Comming Soon! 에 말씀 드렸다시피 간단한 기획의도와 과정을 소개도 같이 해드리려 합니다.

기획 당시에 세웠던 목표

Maui 특유의 보라 색감을 제거하기
SQLite-net 알고 계신가요? 을 활용해보기
최소한 기능으로 복잡하게 만들지 않기

이 세가지의 목표를 가지고 앱을 만들기 시작하였습니다.

과정

UX 화면 구조 및 디자인

피그마를 통해서 앱의 뼈대를 기획하였습니다.

‘복잡하지 않게 만들자’ 라는 키워드가 머릿속에 맴돌다보니 외국샘플사이트라던지 현재 한국에서 상용 중인 앱이라던지 제 기획의도와 비슷한 UI 컨셉들을 많이 찾아다녔습니다.
찾은 컨셉들을 가지고 github에 비슷하게 구현된 오픈소스들을 찾아 구현하였습니다.

초기 앱 샘플 기획화면
(이때 당시만 해도 TASK 앱 명칭으로 출시 계획이였으나 무슨 바람이였는지… GOAL이라는 이름이 끌려 변경하였습니다.)

앱 아이콘

@honeyhead 님께서 알려주신 미리 캔버스를 통해서 무료 템플릿을 활용하여 작업하게 되었습니다.

여러 샘플을 찾다가 귀여운 캐릭터와 앱을 이름을 넣어봤습니다.

개발 이슈

할일 목록 로드 시 화면 겹쳐지는 현상 발생

앱 출시 예정일을 일주일 미룬 가장 큰 주범입니다.
메인 화면에서 목표를 누르고 할일을 불러오는 과정에서 네비게이션바는 이미 할일 화면인데 아래 주 내용은 메인화면의 잔상이보였습니다.(지금생각해보면…할일화면의 색상을 하얀색으로했으면…됬을 문제네요…)
해결방법은 따로 연락주시면 알려드리겠습니다!

새로 알게 된 사실들

처음 앱을 심사를 넣었을 때 제가 만든 앱은 달랑 3개 페이지정도와 별것없는 기능이여도 3일 정도 소요되었습니다.
페이지 1개의 앱이든 만들어보고 출시 해보는것도 경험이였던 것 같습니다.

마무리

앱의 개선점이라든지 피드백은 언제든지 환영합니다.

플레이스토어 설치링크

p.s 이기종 간의 테스트 및 다양한 상황에 대비를 하지 못해서 버그가 좀 많습니다. 양해바랍니다.

디스플레이는 다크모드로 할 경우 진행에 어려움이 있을 수 있습니다!

jamesnet214 · 5월 11, 2023, 3:05오전

@이광석 대박입니다. 아이폰유저라 당장 설치할 순 없지만 빨리 확인해볼게요. 축하 드립니다.
개발과정, 런칭, 이슈까지 함께 공유해 주셔서 정말 감사합니다. (리스펙)

이광석 · 5월 11, 2023, 3:23오전

감사합니다!

파란매 · 5월 11, 2023, 3:31오전

^^ 설치했는데 달력 컨트롤 표시가 안되요 그리고 저기서 목표 추가 어떻게 하는지
제목 적고 컬러 선택했는데 안넘어가네요 달력도 컨트롤은 보이지 않아도
카렌다 컨트롤 있는 위치 누르니까 카렌다 선택은 되는데 날짜 선택해도 확인 버튼이 활성화
안됩니다.

TASK 라는 문자가 메인 화면 안나옵니다.
목표 추가할때 연필 버튼 누르고 수정 한다음에 수정이 안되고 목표라고 계속 표시되는것 같아요

플립 3입니다.

갤럭시 A12에서는

컨트롤이 정상 표시되나 확인 버튼 누르면 Not Woking 입니다.

이광석 · 5월 11, 2023, 4:16오전

앗 벌써 앱 다운로드 수를 2개씩이나…!
테스트해주셔서 감사합니다!

아마 플립3에서 나오는 이슈는
안드로이드의 디스플레이 모드가 다크모드인걸로 확인되고 있습니다.

안드로이드 A12는 이슈는
저기 연필모양을 클릭해서 작성해주셔야합니다!
이건 또…어떻게 하면 이런 동작에 대해 고민하게 되네요.

오늘 저녁에 퇴근하고 나서 다시 수정해볼게요!

jamesnet214 · 5월 11, 2023, 5:10오전

@파란매 크 역시… 벌써 피드백까지 주시는…리스펙 합니다.

iamjinseok · 5월 12, 2023, 1:14오전

Windows Subsystem for Android인데… 버튼이 동작하진 않네요…
(처음엔 눌려졌어요. 글자가 안 써져서 다시 켰더니 안눌리네요.
근데 뭐… 저같은 마이너한 환경은 안 돌아도… ㅎ)
설치는 잘 됩니다. ㅎㅎ

이런 프로젝트 좋네요. 출시까지 해보면 경험이 많이 생길 것 같습니다.

jamesnet214 · 5월 12, 2023, 1:20오전

@iamjinseok 저도 Windows Dev Kit 2023 고장 안났으면 시도해보는건데 WSA로 해보셨군요!

이광석 · 5월 12, 2023, 1:42오전

옷! 다양한시도로 통해서 해주셨네요!

만약 필요하시다면… 윈도우에서 필요하시면…
윈도우로 재빌드해서…공유를 해드리도록하겠습니다!

(여기서 MAUI 장점이 나오네… )

jamesnet214 · 5월 12, 2023, 5:31오전

@이광석 호달달…

재성_조 · 4월 2, 2024, 8:13오전

안녕하세요.
maui 혼자 공부하고 있습니다. ^^

" * Maui 특유의 보라 색감을 제거하기" 저도 이부분이 너무 맘에 안 들어서 구글링에 광석님의 글을 보고 너무 반가워서 글을 적습니다.

아무리 찾아봐도 잘 모르겠던데 어떻게 해결하셨는지요?
무례가 아니라면 작은 팁 하나 얻을 수 있을까요?

이광석 · 4월 2, 2024, 8:31오전

저는

resources폴더에 style이란곳에서 지정하시면 됩니다.

앱 전체 컨트롤에 대한 스타일과 색상이 지정되어있기때문에 이부분을 수정합니다

——

모든 컨트롤들의 스타일은 바로 위 상위 리소스에 영향을 받습니다.

그렇기 때문에 현재 해당 페이지에 리소스가 없다면 리소스/스타일의 영향을 받습니다.

재성_조 · 4월 3, 2024, 12:01오전

먼저 답변 감사드립니다.
아침에 답변을 보고 즉시 resources 폴더에 있는 style에서 Colors.xaml 파일을 수정했습니다.
< Color x:Key=“Primary”>#FFFFFF< /Color > 이 부분을 흰색 값으로 변경했습니다.
Primary 상수가 흰색으로 설정되어 전반적으로 Styles.xaml에서 사용될 것이라고 믿고
변경 후에 실행했지만, 로딩 화면은 여전히 보라색으로 나왔습니다. ㅜ.ㅜ

광석님이 개발하신 어플을 다운로드 받아 실행했는데, 흰색 배경에 썬그라스를 쓴 귀여운 강아지가 너무 귀엽더라구요.
저도 이런 화면을 만들고 싶은데요.

로딩 전체 배경을 간단하게 흰색으로 변경하는 방법을 소스 코드로 알려주시면 정말 정말 감사하겠습니다.

이광석 · 4월 3, 2024, 12:05오전

로딩 전체 부분은 .csproj 파일 열어보시면 됩니다.
그 부분 중 아래 이미지 영역을 참고하시면 될 것 같습니다

재성_조 · 4월 3, 2024, 12:20오전

와우!!!
해결했습니다. maui 공부한지 한달가량되었는데
광석님 덕분에 큰 발전을 하였습니다.

정말 정말 감사합니다. 복 많이 받으세요. ^^

이광석 · 4월 3, 2024, 1:57오전

네~ 열공하세요~!