[11/05 부트캠프] 카타, ②개인과제(가상 커머스 앱)

 

프로덕트 디자이너 부트캠프 D-12 (3주차)

📌To Do List

* 카타: 프로덕트

* ②개인과제: 생필품·식음료 가상 커머스 앱 만들기

- 와이어프레임

- 폰트스타일 제작

- 컬러스타일 제작

- GNB바 제작

- 컴포넌트 작업 - 진행중

- 디자인 작업 - 진행중

 

---

 

01 카타: 프로덕트

 

새로운 주제로 카타를 시작하기 앞서

항상 튜터분들의 발제가 시작된다!

어렴풋 알고있던 개념들을 상기시켜줘서 레퍼런스 서치할 때 더 잘 찾을 수 있었다.

 

그리고 추가적인 튜터님의 설명까지

 

*프로덕트: 다양한 제품의 형태
[웹&앱 차이]
- 웹: 브라우저로 접속 가능 (피그마, 노션, 슬랙)
- 앱: 반드시 앱을 다운받아야한다.

 

 

 

내가 찾은 앱 프로덕트는 루티너리, 발로소득, 그리고 더벤티.

 

내가 자주 쓰는 앱은

루티너리다.

 

평소 게으른 성격이라 강압적으로 뭔가의 일이 주어지지 않으면

마냥 쉬어버림.. 그래서 시작하게 된 앱인데

별 기대없이 했지만 이걸 쓰다보면

그동안 내가 얼마나 시간을 SNS에 많이 썼는지를 알 수 있다.

습관을 지켜가며 체크를 누르는 것도 뿌듯하고

다음엔 어떤 것을 해야하는지 명확히 알 수 있어서 자주 사용하고

무엇보다 심플 이즈 베스트라고.. 필요한 핵심 기능에 루티너리만의 아이덴티티를 살짝 넣었다.

 

 

좋다고 생각하는 앱은

발로소득, 더벤티 이다.

 

기준은 그 앱의 기능이 뚜렷한가? 눈에 잘 보이는가? 였다.

복잡하기만한 앱은 사용 목적을 잃게 만든다고 생각한다.

그래서 필요없는 것은 빼고, 필요한 것만 잘 넣은 앱인지 판단했다.

 

 

발로소득은 만보기+챌린지 앱테크 앱이다.

토스라고 생각하면 된다.

이렇게 모은 캐시는 쇼핑지원금으로 변환하여 쇼핑하는 데 유용하게 쓸 수 있다.

쇼핑 지원금 + 쿠폰을 써서 구매를 하고 이후 또 적립이 되는 방식!

하단 바를 위로 올렸을 때 이미지가 작아지는 모션도 아이디어가 굉장히 좋다고 생각.

 

전체적인 터치감은 굉장히 편했다.

하단 네비게이션 바부터 시작해서 전체적인 탭영역이

타 앱 대비 넓은편이다. 그래서 다른 영역에 탭할 걱정없이 편하게 이용했다.

챌린지나 혜택도 비교적 쉬운 편에 속했다.

토스와 비슷한 카드형식이라 그 점이 아쉽긴했다. 

 

컬러도 다양하게 쓰긴했는데 생각보다 그렇게까지 가독성을 해친 느낌은 아니라는 생각.

물론! 이미지 딱! 텍스트 딱! 썼을때보단 가독성이 좋지 않지만

독특한 디자인으로 '발로소득'의 디자인을 잘 녹였다고 생각한다.

저걸 눌렀을 때 들어가지는 상세페이지도 엄청 깔끔하게 만들어졌다는 것을 알 수 있다.

 

 

 

더벤티도 어마무지한 깔끔함을 자랑한다.

이게 홈화면의 전부다.밑으로 스크롤도 안되고 어느 부분에 집중한지 볼 수 있다.

뭔가 밑에 바를 누르고싶지않으세요..? 중요한 내용이니 primary color를 넣었다.

누르면 내가 받은 스탬프, 쿠폰, 10주년 뱃지 정보를 확인할 수 있다.

저 3가지 기능이 끝이다.

아무래도 멤버십이다보니 그렇게 많은 기능이 필요하지 않아서 이런 디자인이 가능했을 수도 있지만

원래 기능이 적을수록 더 어려운법...

그럼에도 정말 깔끔하고 필요한 것들로만 쏙쏙 구현해내서 좋은 레퍼런스 중 하나로 check~!

 

---

 

02 개인과제: 생필품·식음료 가상 커머스 앱 만들기

좋아요 버튼도 어디에다가 넣을지 요리조리 해보다가 결국에는 제일 효율적인 방식을 택했다..ㅋㅋㅋ

앱에서 추구하는 디자인은 다 이유가 있는 법..

더 편한 방법이 없을지 고민했는데 생각보다 쉽지않았다 허허💦

 

와이어프레임만 그려봤는데 어떻게 변할지 눈에 그려진다.

좀 정신없는 느낌이 있긴한데 일단 실제 디자인에 적용했을 때 어떨지를 더 확인해봐야할 것 같다.

더보기는 이런식으로 만들어봤다. 

 

 

계속해서 레퍼런스를 보며 어느 부분을 가져와야할 지 생각했던 것 같다.

상품목록화면

 

커머스 쉽지않다.. 들어가야 할 버튼이 정말많다... ㅠㅠ 쉽지않아....

 

상세페이지 진짜... 하 겨우했다. 와이어프레임 단계 맞냐며...ㅋㅋ ㅠㅠ

 

 

 

디자인단계에 돌입하면서 본격적으로 아이콘, 컬러스타일, 컴포넌트, GNB바 베리언츠 제작에 돌입했다.

디자인단계에 들어가니 뭔가 재밌긴했는데 예전에 배웠던 것들을 하나둘씩 까먹었다는..ㅋㅋ

그 중 instance swap이 제일 헷갈리는데 이게 적용이 된건지 안된건지 표시가 나지 않아서 직접 하나씩 눌러봐야 알 수 있다.ㅠㅠ 알아차리기가 쉽지않아요..

아직 미숙해서 그런것이라..생각한다.

 

팀원들도 다같이 개인과제진행하는데 뭔가 내적으로 다들 들떠있는 느낌이었다 ㅋㅋ

다들 재밌어하는게 눈에 보인다 ㅎㅎ 

팀프로젝트가 어떨지 굉장히..기대가 된다!!!

 

오늘 내가 만든 개인과제다

폰트스타일은 중간중간에 자꾸 추가가돼서 저기에서 더 많아질 예정이다...ㅋㅋㅋ

오른쪽에 아주아주 조그맣게 아이콘 있다 ㅎ

실화냐 지금 여기까지했다. ㅠㅠㅠ 밤샘각~~

기능만 아는 느낌으로 하려고했는데 하다보니 자꾸 완벽을 추구하게돼버림.. ㅠㅠ

 

오늘 약간 작업좀 하다가 자야겠다... 수/목 요일밖에 남지않았다... 후