로그인을 해주세요
디자인부터 개발까지! Figma로 만드는 PWA 네이티브 앱
장바구니
수강신청
“피그마(Figma)를 활용한 PWA 네이티브 앱 제작 실전 프로젝트!”
본 강좌는 피그마(Figma)를 활용한 디자인부터 프론트엔드 개발(HTML, CSS, JavaScript), 그리고 PWA(Progressive Web App) 기술을 활용한 웹앱 제작까지, 전 과정을 실습해 보는 실전 강좌입니다.
복잡하고 비용이 많이 드는 네이티브 앱 개발 대신, 웹 기술로 네이티브 앱의 장점을 구현하는 PWA의 핵심 원리를 배웁니다.
피그마를 이용해 디자인을 설계하고, SwiperJS와 Google 맵을 활용해 동적인 기능을 구현하며, 최종적으로 완성된 웹을 PWA로 변환하여 모바일 환경에서도 네이티브 앱처럼 작동하게 만듭니다.
이 강좌를 통해 디자인부터 개발까지 전체적인 프로세스를 경험하고, 자신만의 웹앱을 만들 수 있습니다.
🔹피그마를 활용하여 웹앱의 UI/UX 디자인 가이드를 제작할 수 있습니다.
🔹HTML, CSS, JavaScript를 사용해 디자인 가이드를 기반으로 실제 웹 페이지를 구현할 수 있습니다.
🔹PWA 기술을 적용하여 웹 페이지를 스마트폰 홈 화면에 추가하고, 오프라인에서도 작동하는 웹앱으로 만들 수 있습니다.
🔹웹 기술을 활용해 하이브리드 앱을 만들고 싶은 웹 개발자 및 퍼블리셔
🔹피그마 디자인과 프론트엔드 개발 능력을 동시에 향상시키고 싶은 분
🔹PWA 기술에 대한 이해를 높이고, 비용 효율적인 앱 개발 방법을 배우고 싶은 분
강좌는 웹앱 제작의 디자인과 개발 두 가지 핵심 영역으로 구성되어 있습니다.
Part 1. 피그마 디자인 및 JavaScript 라이브러리
피그마(Figma)를 활용하여 웹앱의 디자인을 설계합니다. 슬라이더, 레시피 리스트, 팁 페이지 등 앱의 주요 화면에 대한 디자인을 완성하고, 프로토타입을 만듭니다.
이후, 웹 개발에 필요한 SwiperJS를 이용한 슬라이더 구현과 Google 맵 연동 등 동적인 기능을 구현하는 방법을 학습합니다.
Part 2. HTML, CSS, JavaScript 코딩 및 PWA 변환
피그마에서 만든 디자인을 기반으로 실제 웹 페이지를 코딩합니다. HTML로 페이지 구조를 만들고, CSS로 스타일을 적용합니다. JavaScript를 이용해 동적인 기능을 구현한 뒤, GitHub를 통해 웹 페이지를 호스팅합니다.
마지막으로, 웹을 PWA로 변환하여 웹앱을 완성하고, 모바일 환경에서 네이티브 앱처럼 동작하는 것을 확인합니다.
강의목차(총 18강)
- Part 1. 피그마 디자인 및 JavaScript 라이브러리
-
1. 01강 Figma 기초 스타일 29분
2. 02강 Figma 슬라이더 제작 26분
3. 03강 Figma 레시피 리스트 제작 41분
4. 04강 Figma 셰프의 팁 제작 26분
5. 05강 Figma 프로토타입 마무리 20분
6. 06강 슬라이더 제작을 위한 SwiperJS 기초1 35분
7. 07강 슬라이더 제작을 위한 SwiperJS 기초2 31분
8. 08강 SwiperJS를 이용한 멀티 슬라이더 제작 14분
9. 09강 Google 맵을 이용한 맵 제작 20분
- Part 2. HTML, CSS, JavaScript 코딩 및 PWA 변환
-
10. 10강 헤더 HTML 제작 26분
11. 11강 본문 HTML 제작 28분
12. 12강 헤더 CSS 제작 29분
13. 13강 본문 CSS 제작1 29분
14. 14강 본문 CSS 제작2 31분
15. 15강 헤더 JavaScript 제작 33분
16. 16강 본문 JavaScript 제작 15분
17. 17강 Github를 통한 웹 페이지 호스팅 21분
18. 18강 PWA 앱 만들기 31분
