vidi님의 프로필

핸드폰 시간을 통제하기 위한 iOS 앱 개발일지 1편

iOS앱을 만들고싶은 개발자가 무작정 혼자 기획부터 개발까지 해보는 일지

핸드폰 시간을 통제하기 위한 iOS 앱 개발일지 0편

서비스에 기본적으로 들어가는 요소

Mobbin과 WWIT로 UI flow를 참고하였습니다.

기본적으로 앱서비스에 들어가는 내용들이 있습니다.

찾아봤을때 아래와같은 내용들을 정리해볼수 있었습니다.

(더 들어갈만한 부분이 있다면 댓글로 남겨주세요!)

스플래시 화면
앱 처음 로그인페이지
회원가입 페이지
서비스이용약관, 개인정보처리방침, 오픈소스 목록
소통을 위한 1:1 문의
핵심 서비스 페이지

참고한 디자인

뤼이드튜터
- 학습에 대해 도움이 될만한 내용들을 둘러봄
캐시슬라이드
- 메인페이지의 차트가 눈에 띄었음 딱 필요한 기능들이 메인페이지에 잘 구성되어있어서 참고
코끼리명상
- 핵심기능의 플로우가 부드럽게 이어지도록 되어있는것 같음
- OS 디자인의 Hero 에니메이션이 연상되는 디자인
- 바텀시트를 통한 필터기능은 참고해볼법하다. 필터에 관한 경험은 하단바텀시트로 올라와 선택하는걸로 하는게 익숙했던것같다.
- 기록의 타임라인은 후에 참고할만한것 같다. 내 기록을 보기에 타임라인이 적합해보이는데 아직 이 서비스에 타임라인을 써서 보여줄만한 컨텐츠가 있었나? 아직 아닌것같다.

제공할 핵심 기능 개발전 간단한 UI

핵심서비스를 어떻게 제공할까를 고민해보았습니다.

기본서비스는, 토글 가능한 앱 허용여부 목록입니다.

~~(절망적인 그림)~~

초안으로는 이정도면 기능제공은 가능할것 같다는 생각이 듭니다.

이후 추가 서비스는 기본적인 기능을 제공하고 추가하는게 좋을것입니다.

단순하게 앱만들고 끝낼게 아니라 지속적으로 추가할 예정이니까요.

위에 기본적인 기능은 핵심기능을 우선 개발한후 넣기로 할게요.

이제 디자인을 제외하고 SwiftUI로 개발을 해보려고 합니다.

핵심기능이 원하는대로 구현이 안된다면 디자인을 해도 무의미해지니까요.

SwiftUI 공부하기

iOS에서 핫하다는 SwiftUI 공부를 시작했습니다.

애플개발자 페이지에 따라갈수 있는 강의가 하나 있었습니다.

Introducing SwiftUI

샘플 앱을 볼수있는 애플개발자 페이지도 있었구요

- Sample App Tutorial - About me

아키텍쳐는 어떻게 구성하는지 공부하기위해 swiftui awesome architecture를 검색해보니 참고할만한 글과 프로젝트가 있었습니다.

개발했던 경험에 의하면, UI와 로직은 완전히 분리되어야 하며, 로직안에서도 버튼을 클릭했을때 일어나는 비즈니스 로직과 액션로직 또한 분리되어 있어야 합니다.

안드로이드 클린 아키텍쳐에서도 UseCase가 있는 이유가 UI로직과 비즈니스로직의 복합성을 하나의 UseCase를 호출하게 함으로서 분리하는 목적을 가지고 있다고 생각합니다.

내일은 SwiftUI로 위의 내용정도만 개발해보고 잘 동작한다면 생각해놓은 기본적으로 앱서비스에 들어가야할 부분들도 붙여볼 생각입니다.

핸드폰 시간을 통제하기 위한 앱 개발일지 (0)

iOS앱을 만들고싶은 개발자가 무작정 혼자 기획부터 개발까지 해보는 일지

안녕하세요. 처음 글을 쓰게된 스타트업에서 풀스택으로 개발하는 vidi라고 합니다.

제품을 개선하는것에 대해 엔지니어관점에서 어떻게 해결할것인지 고민하고 해결하는것을 즐깁니다.

글을 잘 못쓰지만, 이렇게 공유하면서 개발해야 더 동기부여가 되기도 하니.. 꾸준히 프로덕트를 만드는 개발하는 과정을 공유해보려고 합니다.

저는 AOS, Flutter, 웹 그리고 Firebase나 nestjs서버로 주로 서비스를 구축하며, 이번 프로덕트는 Firebase와 iOS SwiftUI로 구축해보려고 합니다.

앱 개발시작

이 앱은 제가 필요해서 만들기 시작하는 앱입니다.

추석이기도 하고 딱 몰입해서 개발하기 좋은 시간인것같아 컨셉을 잡고 개발을 해보기로 했습니다.

왜 만들기 시작했나요?

인스타그램을 너무 자주보게 되는것같다. 스크린타임에 블럭을 한다고 해도 아래 해제할수 있는 버튼이 있어서 그냥 해제하고 사용해버린다.
스크린타임이 가끔 6시간일때가 있다. 하루 24시간중 6시간을 핸드폰을 본다는거 너무하지 않나 싶다.

위와같은 문제들을 겪고있고, 개인적으로도 핸드폰을 덜 쓰고싶기 때문에 강제로 통제할수있는 앱을 만들고 싶었습니다.

어떻게 해결할건가요?

아이폰 유저이기 때문에 iOS 개발을 공부해서 만들어보려고 합니다.

Screen time api와 swift ui를 활용해 차근차근 개발해볼 생각입니다.

이미 앱이 있는가?

이미 앱은 하나 있긴 했습니다.

App Block 이란 앱으로 제가 원하는 기능이 거의다 있더라구요

사실 저걸 유료로 사용해도 지금 제 니즈를 대부분 다 충족할수있긴 하지만..

그럼에도 만들려는건 제 맞춤형으로 만들고싶었습니다.

iOS 개발도 경험해보고 싶었구요!

단순한 욕구로 만들기를 시작했습니다.

앱 컨셉은 어떻게 할건가요?

앱 이름을 정할겸 ChatGPT랑 대화를 해보았습니다.

아이폰 앱을 만들려고해
휴대폰 중독을 통제하기 위한 앱이야
컨셉은 휴대폰에 중독되어 소비되는 내 시간들을 통제하고 싶어서 만들게 되었어

현재 기능은 아래와같아
_ 특정시간, 위치등 조건에 따라서 앱이나 웹을 접근하지 못하도록함
- 접근시 동기부여를 위한 문구와 앱을 사용하지 못하도록 블럭페이지를 보여줌
- 내 통계를 확인할수있음

나중에는 포모도로타이머같은 일에 집중할수 있는 환경을 만들어주는 앱을 만들고싶어
앱 이름을 10가지정도 한줄의 설명과 함께 추천해줘

이렇게 물어보니 10가지정도 추천해주었습니다.

그중 3개지만 올려볼게요

DigitalBalancer - "핸드폰과 PC에서 디지털 균형을 유지하세요."
TimeSync - "핸드폰과 PC를 효율적으로 동기화하여 생산성을 극대화하세요."
MultiDeviceMaster - "다양한 디바이스에서 시간을 마스터하세요."

임시로 digitalbalancer로 이름을 정하면 좋을것같습니다.

나중에 도메인서버를 구축할 필요도 있으니 godaddy에 들어가 도메인가격을 확인해보았습니다.

아직 아무도 점유안한 도메인으로 보이네요
가격도 저렴해서 쓸수 있을것같습니다.
이름을 일단 digitalbalancer로 하고 다음 디자인컨셉을 잡기위해 디자인을 찾아보았습니다.

(앱 이름이 아직 만족스럽지 않아서 바꿀것같아요 ㅎㅎ)

디자인 컨셉 찾아보기

저는 UI/UX디자인에 약합니다.

만들어진 디자인을 개발해왔지 디자인을 해오진 않았었으니까요.

그래서 참고할만한 디자인을 찾기위해 아래 디자인사이트를 찾아갔습니다.

Mobbin - 앱 플로우를 볼수있는 사이트, free로 간단하게만 볼수있음
WWIT - 한국형 Mobbin, 앱 플로우를 볼수있음. 회원가입 플로우등 참고
dribbble 디자이너들의 앱디자인들을 볼수있음, 색상과 앱 컨셉에 결정에 도움이됨

여기서 찾은 몇몇 리소스들을 가지고 figma로 디자인을 스케치를 먼저 해볼 예정입니다.

vidi님의 아티클