피그마 디자인코드와 개발환경
리액트, 뷰, 스벨트, 플러터, 스위프트, 코틀린...
피그마로 직접 그린 이미지피그마에서 디자인을 실제 개발에 적용하기 위한 코드를 Inspect창을 통해 볼 수 있다.
Inspect / Code 에서 CSS, iOS, Android 탭을 선택하면 각각에 해당하는 코드로 보여준다.
이 코드들은 웹, 아이폰, 안드로이드폰의 세가지 환경에 적용되는 디자인 코드들이다.
디자인 코드를 제어할수 있는 환경에 대해 살펴보면 웹은 자바스크립트, 안드로이드는 코틀린, 아이폰은 스위프트로 구분된다.
웹
웹은 자바스크립트만으로도 개발코드를 작성할 수 있지만 좀더 편리하게 사용하는 라이브러리인 리액트, 뷰, 스벨트로 나누어진다.
각각의 라이브러리들은 사용하는 방법등이 다르지만 번들링을 통해 자바스크립트 코드로 변환이 되어 브라우저에 적용된다.
- 리액트 : https://ko.reactjs.org
- 뷰 : https://kr.vuejs.org/v2/guide/index.html
- 스벨트 : https://svelte.dev
하이브리드( 안드로이드 & 아이폰 )
하이브리드 개발환경은 대표적으로 리액트 네이티브와 플러터가 있다.
두가지 모두 브릿지 환경을 통해 안드로이드와 아이폰의 네이티브 코드로 변환되어 아이폰과 안드로이드폰에 적용된다.
하나의 코드로 안드로이드, 아이폰 두가지 모두 지원하는 장점이 있지만 네이티브 특정 기능을 위한 개발의 경우 별도로 xcode, android studio를 통해 개발해야하는 단점도 있다.
- 리액트 네이티브 : https://reactnative.dev
- 플러터 : https://flutter-ko.dev
안드로이드
안드로이드 개발환경은 자바와 코틀린으로 되어 있다.
초기 안드로이드 개발 환경은 자바 기반으로 되어 있었는데 2017년부터 코틀린을 공식 언어로 채택하였다.
- 자바 : https://www.java.com/ko/
- 코틀린 : https://developer.android.com/kotlin?hl=ko
아이폰
아이폰 개발환경은 오브젝티브씨와 스위프트로 되어 있다.
초기 아이폰 개발환경은 오브젝티브씨만 지원되었지만 현재에는 스위프트를 공식언어로 사용한다.
오브젝티브씨는 스위프트와 함께 쓰일 수 있다.
- 스위프트 : https://developer.apple.com/kr/swift/
위에 나열한 내용들을 통해 피그마 코드가 다양한 개발환경에 따라 다르게 적용되는것을 볼 수 있다.
https://brunch.co.kr/@eddwardpark/4
피그마툴 자체도 웹기반으로 만들어졌기 때문에 우리가 디자인한 컴포넌트들도 웹에 최적화 되어 있다.
물론 피그마에서는 아이폰과 안드로이드 코드도 지원한다.
피그마에서 아이폰코드를 확인해보면 애플에서 발표한 SwiftUI( https://developer.apple.com/kr/xcode/swiftui/)의 코드와는 다른것을 볼 수 있다.
피그마에서는 SwiftUI 이전의 XIB에서 구성된 nib파일의 코드로 보여진다.
이점은 아직 피그마의 디자인코드가 최신의 아이폰 개발환경에는 최적화되어 있지 않은것을 의미한다.
웹표준은 과거부터 지금까지 만들어진 코드들의 호환성이 거의 완벽에 가깝다 보니 개발을 배우고자 하는분들에게 자바스크립트를 추천한다.
https://www.inflearn.com/pages/weekly-inflearn-22
