[토이프로젝트] XD디자인 와이어프레임부터 출시까지 -2

리액트 네이티브 개발 

디자인 → 개발 단계 순으로 스텝 바이 스텝 진행을 하려 했으나,

내가 원하는 리액트 네이티브 라이브러리 + 로티 애니메이션 등을 확인하고 싶어 링크와 소스들을 모아봤다.

 

---

🐻 Lottie Animation

로티 이미지는 에어비앤비에서 제공하는 오픈소스 라이브러리로서 벡터 애니메이션을 웹, 앱에 적용할 수 있다.

리액트 네이티브에도 적용가능! 애프터이펙트로 작업후 JSON형식으로 추출하여 개발에서 적용할 수 있게 해준다.

 

https://lottiefiles.com/

Free Lottie Animation Files, Tools & Plugins - LottieFiles

 

🎡 Rotating Circles

고민이 많았던 Rotating Circle 코드는 여기서 비슷한 소스를 찾아서 응용하면 될 것이라고 생각한다.

 

https://stackoverflow.com/questions/55196610/react-native-animated-rotating-circles-with-scale-dependency

React Native Animated Rotating Circles with scale dependency

(티스토리의 코드블럭 기능은 다크모드도 지원이 안되 아쉽다🥲)

 

 

---

 

강사님이 알려주신 기본 디자인 가이드 🍊

디자이너가 쓰는 기본 툴은 → XD, Zeplin 그리고 Figma

 

디자인 작업 순서

어도비 XD 와이어프레임 → 디자인 작업 → Zeplin에서 React Native Extenstion으로 Styld-Component로 배경 추출 → Figma에서 아이콘 @1x @2x @3x로 추출해서 쓴다.

 

 

그리고 어제까지 디자인 결과⭐️

 

 

🌈 Main Color 

Theme Color는 Laduree의 Snowy Mint

나머지 supporting 해주는 색은 역시 채도가 낮은 아이시한 컬러로 전체적인 분위기를 맞춰주고

컬러 팔레트 또한 보석색에 방해되지 않는 것 위주로 골랐다.

☪️ Icon Set

별자리와 보석 아이콘으로 디테일을 살려, Magic + Star + Healing Gem 과 같은 분위기를 내려고 한다.

백그라운드에는 각진 도형으로 인레이해주었는 데, 거기에 맞춰 보석 상세 페이지의 텍스트 박스 또한 둥글기보단 각지게 해준다.

 

걱정되는건 리액트 네이티브에서 배경 인레이를 해본적이 없어 고민이지만 진행하면서 수정하기로!