[iOS_MyInventory] 프로토타이핑툴을 찾기위한 여정
MyBag 은 현재 내가 가지고 있는 물건들을 정리하기 위한 앱이다.
음식과 같은 유통기한이 있는 아이템도 같이 포함하기 위해, 유통기한의 개념을 넣었다.
그리고 후에 사야할 물건을 "찜한상품" 으로 관리할 수 있다.
토이 프로젝트로 필수기능을 먼저 간단하게 넣어 출시할 예정이다.
내가 선택한 웹기반 인터페이스 툴, Figma
스케치, 어도비XD 를 고민하다가 설치하지 않고 가볍게 쓸수 있다고 하여 피그마를 선택.
쉬운 인터페이스에 편리한 플러그인까지 지원하여, 빠르게 프로토타이핑을 만들어 볼수 있었다.
아미TV 님의 유투브를 참고하여 꿀팁도 획득😍
특히, 플러그인 활용하기 영상은 정말 도움이 되었다.
https://www.youtube.com/channel/UCiHk_Hsth1basT5Wxf9jDsg
InVision
무료로 사용할 수 있는 툴 중에, 피그마 말고도 inVision Studio도 있다.
피그마와 유사한데, 화면 전환같은 UI/UX 를 더 디테일하게 작업할 수 있다.
InVision | Digital product design, workflow & collaboration
InVision is the digital product design platform used to make the world’s best customer experiences.
www.invisionapp.com
Principle
inVision 으로 모자란다 느낀다면, 유료인 principle 을 추천.
figma, sketch 와 연동되며 모바일, 웹의 UI/UX와 애니메이션 작업을 모두 커버할 수 있다.
특히 동적 웹페이지를 만들때 좋아보인다.
Principle
Design For Mobile, Web, and Desktop Choose a device preset or enter a custom Artboard size to design for your favorite platform. Hover events and mouse wheel scrolling make it easy to make web and desktop prototypes that feel like the real thing.
principleformac.com
프로토타이핑 툴로 만든 여러 프로젝트들을 확인할 수 있는 사이트
https://uimovement.com/made-with/
UI Movement
Only the best UI design inspiration, right in your inbox
uimovement.com
Figma 로 UserFlow 만들어보기
피그마는 데스크탑 작업, 웹 작업 모두 지원하는데 개인적으로는 프로그램 설치하여 작업하는 쪽이 편했다.
이전에 대략적으로 작업했던 화면을 참고하여, 다시 구상해 보았다.
데스크탑에서 작업하면, 곧바로 웹에서도 적용된 모습을 확인할 수 있었다.
팀으로 작업했을때 실시간으로 확인하며 서로 의견을 조율을 할 수 있겠다 싶었다.
NEXT STEP
부가기능은 제쳐두고, 가장 먼저 작업해야 할 기능은 카테고리-상품추가 기능.
화면 인터페이스 수정하면서 프로그래밍하는 방향으로 가야겠다.
- Realm 로컬 디비 구조 짜기
- struct 정의
- 공통 클래스 뺄만한거 고민해보기
- 인터페이스 수정