[4주-1일차] pixel painter APP - 앱의 대략적인 UI 구현

오늘은 백로그의 1번 항목인 프론트앤드 부분의 골격을 완성시키려고 한다.

 

1. 인트로 액티비티

2. main 액티비티

3. 각 세부 액티비티 분기

 

• 깃허브 연동

github desktop

일단 깃허브 데스크탑으로 연동을 시켰다.

 

first commit

https://github.com/cyanindy/app_pixelpainter

 

 

 

 

 

 

• 인트로 액티비티

인트로 액티비티는 앱 시작시에 약 2초정도 앱의 이름과 내 이름을 표시하도록 구현할것이다.

미리캔버스

미리캔버스 사이트를 이용해서 간단하게 만들어봤다.

https://www.miricanvas.com/

디자인 플랫폼 미리캔버스

intro.java

간단하게 인트로 화면을 2.5초간 띄우고 메인 액티비티로 넘어가게 했다.

이제 액티비티들을 차례로 만들어 보자

 

 

 

 

• 메인 액티비티

우선 다른 여러 어플들을 참고해서

어떤식으로 메뉴를 구성하는지 살펴봤는데

총 5개의 앱을 다운받아봤다.

 

1. pixel art

 

이 앱에서는 깔끔하게 사용법을 처음에 알려준다

pixel art

pixel art

pixel art

pixel art

맨 마지막에 컬러 스플래시 도구 라는 유료 아이템도 판매하고 있었다.

 

2. pixel art coloring

pixel art coloring

main

첫 화면에 도안들이 나오고

아래 네비게이션에서 액티비티를 전환할 수 있게 해놓은 모습

그리고 상단에는 광고를 띄워주는 듯 하다

 

 

3. No.pix​

No.pix​

No.pix​\

no.pix 앱도 이와 동일했다.

도안을 클릭하니 광고가 나왔고

완성된 그림의 필터를 적용해서 네모 모양도트, 동그란 도트, 하트-별모양 도트등을 선택할 수 있게 했다

각 색깔의 색상도 새로 지정할 수 있었다.

비디오와 사진 을 선택해서 저장할 수 도 있었다.

 

 

4. pixelpaint

pixelpaint

pixelpaint

뭔가 제일 간결하고

아이언맨이나 오징어게임 토르 헐크 등의 익숙한 캐릭터들이 먼저 눈에 띄었다.

역시나 도안을 클릭했을때 광고가 나왔는데 너무 길었다...

역시나 유료 아이템을 팔고있었다

 

 

5. UNICORN

UNICORN

UNICORN

앱 시작하자마자 광고가 나온다

기본적인 ui 구성은 비슷하다

 

 

일단 어플들의 공통점은

1. 시작시 라이브러리가 먼저 나오고

2. 요소요소마다 광고를 배치해놨고

3. 새 도안을 생성할수있는데 모두 흑백에 좀 퀄리티가 좋지 못했다.

 

그렇다면 나는 일단 

같은 장르의 앱을 만들지만 차별화 전략을 세워봐야할텐데 생각해본게

1. 광고 최소화 -> 높은 수준 도안은 판매 혹은 구독자 전용 도안 개시

2. 새 도안 생성의 퀄리티 -> 파이썬 코드 이용 서버 경유 (광고 필수 or 구독자 전용)

3. 세이브-로드 직관화 -> 기존앱들은 저장 버튼이 어딨는지 잘 모르겠음 자동저장도 잘 안됬음

4. 공유기능 + NFT 업로드 -> 기존앱들의 공유기능에 더불어서 NFT 를 올릴 수 있게 함

5. 도안 검색 기능 -> 도안의 토픽을 검색할 수 있는 앱은 잘 없었다

정도로 해보자

 

 

이제 액티비티를 하나씩 만들어 볼껀데 바로 첫 화면은

 

 

• 내 도안 목록 액티비티

이게 앱을 실행하고 인트로 화면을 본 후 첫 화면이 될꺼다

아래 네비게이션과 각 액티비티들을 intent 만 시켜보자

 

https://www.flaticon.com/

Free Icons and Stickers - Millions of resources to download

imagebutton 에 쓸 이미지들은 이 사이트에서 구했다.

• 도안 마켓 액티비티
• 도안 만들기 액티비티
• NFT 업로드 액티비티
• 패치노트 와 공지사항

 

이정도로 구현해 봤다.

 

간단한 ui 와 intent 만 구현했다

https://youtu.be/SmSm00cjTmE

내 유튜브에 올렸다

 

오늘은 여기까지!